refactor: clean up layouts, mainfest plugin

Author: chriswhong

config.js

@@ -263,25 +263,6 @@ const config = {
     docsLocation: 'https://github.com/qri-io/website/blob/master/content',
     favicon: 'https://graphql-engine-cdn.hasura.io/img/hasura_icon_black.svg'
   },
-  pwa: {
-    enabled: false, // disabling this will also remove the existing service worker.
-    manifest: {
-      name: 'Gatsby Gitbook Starter',
-      short_name: 'GitbookStarter',
-      start_url: '/',
-      background_color: '#6b37bf',
-      theme_color: '#6b37bf',
-      display: 'standalone',
-      crossOrigin: 'use-credentials',
-      icons: [
-        {
-          src: 'src/pwa-512.png',
-          sizes: '512x512',
-          type: 'image/png'
-        }
-      ]
-    }
-  },
   docsSections,
   processCrumbs
 }

gatsby-config.js

@@ -21,12 +21,7 @@ const plugins = [
   'gatsby-plugin-netlify',
   'gatsby-plugin-sitemap',
   'gatsby-plugin-sharp',
-  {
-    resolve: 'gatsby-plugin-layout',
-    options: {
-      component: require.resolve('./src/layouts/index.js')
-    }
-  },
+  'gatsby-plugin-layout',
   'gatsby-plugin-emotion',
   'gatsby-plugin-remove-trailing-slashes',
   'gatsby-plugin-react-helmet',
@@ -48,7 +43,7 @@ const plugins = [
     resolve: 'gatsby-plugin-mdx',
     options: {
       defaultLayouts: {
-        pages: require.resolve('./src/layouts/markdown-page.js')
+        pages: require.resolve('./src/components/markdown-page.js')
       },
       gatsbyRemarkPlugins: [
         {
@@ -85,24 +80,24 @@ const plugins = [
     options: {
       useAutoGen: true
     }
-  }
-]
-
-// check and add pwa functionality
-if (config.pwa && config.pwa.enabled && config.pwa.manifest) {
-  plugins.push({
+  },
+  {
     resolve: 'gatsby-plugin-manifest',
-    options: { ...config.pwa.manifest }
-  })
-  plugins.push({
-    resolve: 'gatsby-plugin-offline',
     options: {
-      appendScript: require.resolve('./src/custom-sw-code.js')
+      name: 'Qri.io',
+      short_name: 'Qri.io',
+      icons: [{
+        src: 'google-touch-icon.png',
+        sizes: '512x512'
+      }],
+      background_color: '#ffffff',
+      theme_color: '#ffffff',
+      display: 'fullscreen'
     }
-  })
-} else {
-  plugins.push('gatsby-plugin-remove-serviceworker')
-}
+
+  }
+]
+
 module.exports = {
   pathPrefix: config.gatsby.pathPrefix,
   siteMetadata: {

gatsby-node.js

@@ -74,10 +74,11 @@ exports.createPages = ({ graphql, actions }) => {
         result.data.allMdx.edges.forEach(({ node }) => {
           createPage({
             path: node.fields.slug ? node.fields.slug : '/',
-            component: path.resolve('./src/layouts/docs.js'),
+            component: path.resolve('./src/components/DocsContent.js'),
             context: {
               id: node.fields.id,
-              layout: 'docs'
+              layout: 'docs',
+              faqPage: node.fields.slug === '/docs/faq'
             }
           })
         })
@@ -93,10 +94,11 @@ exports.createPages = ({ graphql, actions }) => {
             if (d.items) {
               createPage({
                 path: d.path,
-                component: path.resolve('./src/layouts/DocsSectionLandingPageLayout.js'),
+                component: path.resolve('./src/components/DocsSectionLandingPage.js'),
                 context: {
                   sectionInfo: d,
-                  colorClass
+                  colorClass,
+                  layout: 'docsSectionLandingPage'
                 }
               })
 

netlify.toml

@@ -1,3 +1,3 @@
 [build]
   publish = "public"
-  command = "npm run build"
+  command = "gatsby build --prefix-paths"

src/components/DocsContent.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import MDXRenderer from 'gatsby-plugin-mdx/mdx-renderer'
 import { MDXProvider } from '@mdx-js/react'
+import { graphql } from 'gatsby'
 
 import mdxComponents from './mdxComponents'
 import DocsFooter from './DocsFooter'
@@ -52,4 +53,33 @@ const DocsContent = (props) => {
   )
 }
 
+export const pageQuery = graphql`
+  query($id: String!) {
+    site {
+      siteMetadata {
+        title
+        docsLocation
+      }
+    }
+    mdx(fields: { id: { eq: $id } }) {
+      fields {
+        id
+        title
+        slug
+      }
+      body
+      tableOfContents
+      parent {
+        ... on File {
+          relativePath
+        }
+      }
+      frontmatter {
+        metaTitle
+        metaDescription
+      }
+    }
+  }
+`
+
 export default DocsContent

src/components/DocsSectionLandingPage.js

@@ -1,12 +1,27 @@
 import React from 'react'
+import { graphql } from 'gatsby'
 import classNames from 'classnames'
 
 import DocsContentWide from './DocsContentWide'
 import { calculateTreeData } from './sidebar/tree'
 import DocsCards from './DocsCards'
 import BreadCrumbs from '../components/BreadCrumbs'
 
-const DocsSectionLandingPage = ({ docsSectionInfo, allMdx, colorClass, crumbs }) => {
+const DocsSectionLandingPage = (props) => {
+  const { data, pageContext } = props
+  const { allMdx } = data
+
+  const { sectionInfo, colorClass, breadcrumb } = pageContext
+  const { crumbs } = breadcrumb
+  // traverse config.docsSections to locate the match
+  return (
+    <DocsSectionPage docsSectionInfo={sectionInfo} allMdx={allMdx} colorClass={colorClass} crumbs={crumbs} />
+  )
+}
+
+export default DocsSectionLandingPage
+
+const DocsSectionPage = ({ docsSectionInfo, allMdx, colorClass, crumbs }) => {
   const tree = calculateTreeData(docsSectionInfo.items, allMdx.edges)
 
   const topLevelItems = tree.filter(d => !d.items)
@@ -33,4 +48,19 @@ const DocsSectionLandingPage = ({ docsSectionInfo, allMdx, colorClass, crumbs })
   )
 }
 
-export default DocsSectionLandingPage
+// pagequery to get data for this section
+export const pageQuery = graphql`
+  query {
+    allMdx(filter: {fileAbsolutePath: {regex: "\\/docs/"}}) {
+      edges {
+        node {
+          fields {
+            slug
+            title
+            description
+          }
+        }
+      }
+    }
+  }
+`

src/components/index.js

@@ -1,5 +1,4 @@
 import React from 'react'
-import { graphql } from 'gatsby'
 
 import DocsColumns from '../components/DocsColumns'
 import DocsContent from '../components/DocsContent'
@@ -25,7 +24,7 @@ const DocsLayout = (props) => {
   }
 
   // special handling for FAQ, a markdown docs page with no sidebar
-  if (props.path === '/docs/faq') {
+  if (props.pageContext.faqPage) {
     leftSidebar = false
   }
 
@@ -35,42 +34,13 @@ const DocsLayout = (props) => {
   }
 
   return (
-    <>
+    <div className='docs-content-layout'>
       <DocsHeader {...props} />
       <DocsColumns {...props} leftSidebar={leftSidebar} rightSidebar={rightSidebar}>
         {content}
       </DocsColumns>
-    </>
+    </div>
   )
 }
 
-export const pageQuery = graphql`
-  query($id: String!) {
-    site {
-      siteMetadata {
-        title
-        docsLocation
-      }
-    }
-    mdx(fields: { id: { eq: $id } }) {
-      fields {
-        id
-        title
-        slug
-      }
-      body
-      tableOfContents
-      parent {
-        ... on File {
-          relativePath
-        }
-      }
-      frontmatter {
-        metaTitle
-        metaDescription
-      }
-    }
-  }
-`
-
 export default DocsLayout