Merge pull request #29 from commitd/cf-layout-plugin

Use Gatsby Layout Plugin to maintain sidebar position

Author: stuarthendren

theme/gatsby-config.js

@@ -39,6 +39,12 @@ module.exports = ({
     `gatsby-plugin-typescript`,
     `gatsby-plugin-material-ui`,
     `gatsby-plugin-react-helmet`,
+    {
+      resolve: `gatsby-plugin-layout`,
+      options: {
+        component: require.resolve(`./src/layout/index.tsx`)
+      }
+    },
     {
       resolve: `gatsby-source-filesystem`,
       options: {

theme/gatsby-node.js

@@ -131,6 +131,8 @@ exports.createPages = async (
             path: item.url,
             component: path.resolve(`${__dirname}/src/layout/docs.tsx`),
             context: {
+              layout: 'docs',
+              current: item,
               id: item.id,
               previous,
               next
@@ -142,6 +144,7 @@ exports.createPages = async (
           path: '/print',
           component: path.resolve(`${__dirname}/src/layout/print.tsx`),
           context: {
+            layout: 'print',
             data
           }
         })

theme/package.json

@@ -36,6 +36,7 @@
     "@material-ui/icons": "^4.5.1",
     "@mdx-js/mdx": "^1.5.1",
     "@mdx-js/react": "^1.5.1",
+    "gatsby-plugin-layout": "^1.3.0",
     "gatsby-plugin-material-ui": "^2.1.6",
     "gatsby-plugin-mdx": "^1.0.55",
     "gatsby-plugin-react-helmet": "^3.1.13",

theme/src/components/Layout.tsx

@@ -1,16 +1,16 @@
-import React, { useState, ReactNode, Dispatch } from 'react'
+import { Box, CodeStyle, Container, ThemeProvider } from '@committed/components'
+import { Content, Header as LayoutHeader, Nav, Root } from '@committed/layout'
+import { navigate } from 'gatsby'
+import React, { Dispatch, ReactNode, useState } from 'react'
+import { useHotkeys } from 'react-hotkeys-hook'
 import 'typeface-dosis'
 import 'typeface-lato'
-import { Header } from './Header'
-import { Footer } from './Footer'
-import { Sidebar } from './Sidebar'
 import { PageContext } from '../types'
+import { Footer } from './Footer'
+import { Header } from './Header'
 import { PreviousNext } from './PreviousNext'
 import { SEO, SEOProps } from './SEO'
-import { navigate } from 'gatsby'
-import { useHotkeys } from 'react-hotkeys-hook'
-import { Root, Header as LayoutHeader, Nav, Content } from '@committed/layout'
-import { ThemeProvider, CodeStyle, Container, Box } from '@committed/components'
+import { Sidebar } from './Sidebar'
 
 export interface LayoutProps extends SEOProps {
   id: string
@@ -33,7 +33,6 @@ export const Layout = ({
   pageContext = { id: 'default' },
   children,
   location = {},
-  title,
   ...props
 }: LayoutProps) => {
   const [collapsed, setCollapsed] = useState((location && location.state) || {})
@@ -68,7 +67,9 @@ export const Layout = ({
           }
         }}
       >
-        <SEO title={title} {...props} />
+        {pageContext.current && pageContext.current.title && (
+          <SEO title={pageContext.current.title} {...props} />
+        )}
         <Root
           style={{ minHeight: '100vh' }}
           config={{

theme/src/components/TreeNode.tsx

@@ -1,15 +1,15 @@
-import React from 'react'
-import { Item, Info } from '../types'
-import { firstUrl } from '../util/tree'
 import {
-  useTheme,
-  Theme,
-  List,
+  Collapse,
   Icons,
+  List,
   ListItem,
   ListItemText,
-  Collapse
+  Theme,
+  useTheme
 } from '@committed/components'
+import React from 'react'
+import { Info, Item } from '../types'
+import { firstUrl } from '../util/tree'
 
 export interface TreeNodeProps extends Item {
   isActive: (id: string) => boolean
@@ -21,30 +21,6 @@ export interface TreeNodeProps extends Item {
   id: string
 }
 
-class Scroller extends React.Component<{ active: boolean }> {
-  private ref = React.createRef<HTMLDivElement>()
-
-  scroll = () => {
-    const { active } = this.props
-
-    if (active) {
-      this.ref.current.scrollIntoView({ block: 'center', inline: 'nearest' })
-    }
-  }
-
-  componentDidMount() {
-    this.scroll()
-  }
-
-  componentDidUpdate() {
-    this.scroll()
-  }
-
-  render() {
-    return <div ref={this.ref}>{this.props.children}</div>
-  }
-}
-
 export const TreeNode = React.memo(
   ({
     id,
@@ -65,7 +41,7 @@ export const TreeNode = React.memo(
     const title = info ? info.title : label
     const active = isActive(id)
     return (
-      <Scroller active={active}>
+      <>
         <ListItem
           style={{
             paddingLeft: theme.spacing(2) * (level + 1)
@@ -111,7 +87,7 @@ export const TreeNode = React.memo(
             </List>
           </Collapse>
         ) : null}
-      </Scroller>
+      </>
     )
   }
 )

theme/src/layout/docs.tsx

@@ -1,32 +1,18 @@
-import React from 'react'
 import { graphql } from 'gatsby'
-import { Layout } from '../components/Layout'
+import React from 'react'
 import { Markdown } from '../components/Markdown'
 import '../style/mermaid.css'
 
-export default ({ pageContext, location, data }) => {
+export default ({ data }) => {
   const {
-    docs: { id, body, metaDescription, metaTitle, tableOfContents }
+    docs: { body, tableOfContents }
   } = data
-  return (
-    <Layout
-      id={id}
-      pageContext={pageContext}
-      location={location}
-      title={metaTitle}
-      description={metaDescription}
-    >
-      <Markdown>{body}</Markdown>
-    </Layout>
-  )
+  return <Markdown>{body}</Markdown>
 }
 
 export const pageQuery = graphql`
   query DocQuery($id: String!) {
     docs(id: { eq: $id }) {
-      id
-      metaDescription
-      metaTitle
       tableOfContents
       body
     }

theme/src/layout/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Layout } from '../components/Layout'
+
+export default props => {
+  const { children, pageContext, location } = props
+
+  // Pass through when in print mode
+  if (pageContext.layout === 'print') {
+    return <>{children}</>
+  } else {
+    return (
+      <Layout id={pageContext.id} pageContext={pageContext} location={location}>
+        {children}
+      </Layout>
+    )
+  }
+}

theme/src/types/index.d.ts

@@ -57,4 +57,5 @@ export interface PageContext {
   id: string
   previous?: Info
   next?: Info
+  current?: Info
 }

yarn.lock

@@ -786,6 +786,13 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
+"@babel/runtime@^7.9.2":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.6.tgz#a9102eb5cadedf3f31d08a9ecf294af7827ea29f"
+  integrity sha512-64AF1xY3OAkFHqOb9s4jpgk1Mm5vDZ4L3acHvAml+53nO1XbXLuDodsVpO4OIUsmemlUHMxNdYMNJmsvOwLrvQ==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.6.0", "@babel/template@^7.7.0":
   version "7.7.0"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.7.0.tgz#4fadc1b8e734d97f56de39c77de76f2562e597d0"
@@ -5960,6 +5967,13 @@ gatsby-page-utils@^0.0.28:
     micromatch "^3.1.10"
     slash "^3.0.0"
 
+gatsby-plugin-layout@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-layout/-/gatsby-plugin-layout-1.3.0.tgz#5ed5574cb08b36735a74073629f9f51c95463716"
+  integrity sha512-S8fYUIUZ8sluA0oSmqXoVkMPgT+iINHS5xYxtmvqlWnvOa1We4KbEV+9UBN8WEL+RtMCFuxJj2fVuLspqax67g==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
 gatsby-plugin-manifest@^2.2.26:
   version "2.2.26"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-manifest/-/gatsby-plugin-manifest-2.2.26.tgz#040a7dc2ab54e64cc97481adfb498e5dc8caade4"
@@ -11301,6 +11315,11 @@ regenerator-runtime@^0.13.2, regenerator-runtime@^0.13.3:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
   integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==
 
+regenerator-runtime@^0.13.4:
+  version "0.13.5"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697"
+  integrity sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==
+
 regenerator-transform@^0.14.0:
   version "0.14.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.1.tgz#3b2fce4e1ab7732c08f665dfdb314749c7ddd2fb"