Update to new layout

Adds theme switch.
Fixes fonts
Update version
Fixes some typing issues
Fixes table coloring

Author: stuarthendren

example/docs/index.mdx

@@ -17,6 +17,7 @@ The gatsby theme allows you to write documentation in Markdown. With support for
 - :tropical_fish: mermaid diagrams
 - :package: @committed/components
 - :tada: :shortcode: emoji.
+- :mag: search
 
 This is meant for Committed's documentation site, but feel free to use it, or copy it, for your own projects.
 

example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example",
-  "version": "1.0.7",
+  "version": "2.0.0",
   "main": "index.js",
   "author": "Committed <[email protected]>",
   "license": "MIT",
@@ -13,7 +13,7 @@
     "deploy": "gh-pages -d public -r https://[email protected]/commitd/docs.git"
   },
   "dependencies": {
-    "@committed/gatsby-theme-docs": "^1.0.7",
+    "@committed/gatsby-theme-docs": "^2.0.0",
     "gatsby": "^2.21.9",
     "gatsby-plugin-manifest": "^2.4.1",
     "react": "^16.13.1",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@committed/gatsby-theme-docs-workspace",
   "private": true,
-  "version": "1.0.7",
+  "version": "2.0.0",
   "main": "index.js",
   "license": "MIT",
   "scripts": {

theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@committed/gatsby-theme-docs",
-  "version": "1.0.7",
+  "version": "2.0.0",
   "main": "index.js",
   "author": "Committed <[email protected]>",
   "license": "MIT",
@@ -30,13 +30,13 @@
     "react-dom": "^16.13.1"
   },
   "dependencies": {
-    "@committed/components": "^3.0.0",
-    "@committed/layout": "^1.1.0",
+    "@committed/components": "^3.0.2",
+    "@committed/layout": "^2.0.1",
+    "@gatsby-contrib/gatsby-plugin-elasticlunr-search": "^2.3.0",
     "@material-ui/core": "^4.9.12",
     "@material-ui/icons": "^4.9.1",
     "@mdx-js/mdx": "^1.6.1",
     "@mdx-js/react": "^1.6.1",
-    "@gatsby-contrib/gatsby-plugin-elasticlunr-search": "^2.3.0",
     "gatsby-plugin-layout": "^1.3.0",
     "gatsby-plugin-material-ui": "^2.1.8",
     "gatsby-plugin-mdx": "^1.2.4",

theme/src/components/Header.tsx

@@ -1,9 +1,40 @@
-import { Box, Button, Flex, Heading, Icons, Logo } from '@committed/components'
+import {
+  Box,
+  Button,
+  Flex,
+  Heading,
+  Icons,
+  Logo,
+  ThemeChoice,
+  ThemeSwitch,
+  useTheme,
+  makeStyles,
+} from '@committed/components'
 import { graphql, useStaticQuery } from 'gatsby'
 import React from 'react'
 import { ClearLink } from './Link'
 
-export const Header = () => {
+export const useStyles = makeStyles((theme) => ({
+  color: {
+    '& .commit_logo': {
+      stroke: theme.palette.primary.contrastText,
+      fill: theme.palette.primary.contrastText,
+    },
+  },
+}))
+
+const ThemedLogo = () => {
+  const classes = useStyles()
+  return <Logo size={24} className={classes.color} />
+}
+
+export const Header = ({
+  themeChoice,
+  toggleThemeChoice,
+}: {
+  themeChoice: ThemeChoice
+  toggleThemeChoice: () => void
+}) => {
   const {
     site: {
       siteMetadata: {
@@ -34,20 +65,27 @@ export const Header = () => {
       }
     `
   )
+  const theme = useTheme()
   const finalLogoLink = logo.link !== '' ? logo.link : '/'
   return (
     <>
-      <Flex color="white" flexGrow={1}>
+      <Flex flexGrow={1}>
         <ClearLink href={finalLogoLink}>
-          <Flex color="white">
+          <Flex color={theme.palette.type == 'light' ? 'white' : 'black'}>
             <Box mx={2}>
               {logo.image !== '' ? (
                 <img src={logo.image} alt="logo" />
               ) : (
-                <Logo size={24} />
+                <ThemedLogo />
               )}
             </Box>
-            <Heading.h1 style={{ fontSize: '1.5rem' }}>{title}</Heading.h1>
+            <Heading.h1
+              style={{
+                fontSize: '1.5rem',
+              }}
+            >
+              {title}
+            </Heading.h1>
           </Flex>
         </ClearLink>
       </Flex>
@@ -67,6 +105,11 @@ export const Header = () => {
           </Button>
         </ClearLink>
       ) : null}
+      <ThemeSwitch
+        themeChoice={themeChoice}
+        toggleThemeChoice={toggleThemeChoice}
+        variant="celestial"
+      />
       {helpUrl !== '' ? (
         <a href={helpUrl}>
           <Icons.Help />

theme/src/components/Layout.tsx

@@ -1,4 +1,11 @@
-import { Box, CodeStyle, Container, ThemeProvider } from '@committed/components'
+import {
+  Box,
+  CodeStyle,
+  Container,
+  ThemeProvider,
+  useThemeChoice,
+  fonts,
+} from '@committed/components'
 import { Content, Header as LayoutHeader, Nav, Root } from '@committed/layout'
 import { navigate } from 'gatsby'
 import React, { Dispatch, ReactNode, useState } from 'react'
@@ -36,16 +43,22 @@ export const Layout = ({
   ...props
 }: LayoutProps) => {
   const [collapsed, setCollapsed] = useState((location && location.state) || {})
-  useHotkeys('shift+home', () => navigate('/'))
-  useHotkeys('shift+p', () => navigate('/print'))
+  const [themeChoice, toggleThemeChoice, componentMounted] = useThemeChoice()
+
+  useHotkeys('shift+home', () => {
+    navigate('/')
+  })
+  useHotkeys('shift+p', () => {
+    navigate('/print')
+  })
 
   const navigateTo = (url) => {
     navigate(url, {
       state: collapsed,
     })
   }
 
-  return (
+  const component = componentMounted ? (
     <DocsContext.Provider
       value={{
         pathname: location.pathname,
@@ -55,7 +68,9 @@ export const Layout = ({
       }}
     >
       <ThemeProvider
-        fonts={{
+        choice={themeChoice}
+        createFonts={() => ({
+          ...fonts.defaultFonts,
           display: {
             fontFamily:
               'Dosis, "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif',
@@ -65,27 +80,35 @@ export const Layout = ({
             fontFamily:
               'Lato, -apple-system, BlinkMacSystemFont, "San Francisco", Roboto,  "Segoe UI", "Helvetica Neue"',
           },
-        }}
+        })}
       >
         {pageContext.current && pageContext.current.title && (
           <SEO title={pageContext.current.title} {...props} />
         )}
         <Root
-          style={{ minHeight: '100vh' }}
           config={{
             collapsible: false,
+            navVariant: {
+              xs: 'temporary',
+              sm: 'permanent',
+            },
+            headerResponse: {
+              xs: 'static',
+              sm: 'squeezed',
+            },
+            contentResponse: {
+              xs: 'static',
+              sm: 'squeezed',
+            },
           }}
         >
           <LayoutHeader>
-            <Header />
+            <Header
+              themeChoice={themeChoice}
+              toggleThemeChoice={toggleThemeChoice}
+            />
           </LayoutHeader>
-          <Nav
-            header={
-              // you can provide fixed header inside nav
-              // change null to some react element
-              (ctx) => null
-            }
-          >
+          <Nav>
             <Sidebar location={location} current={id} />
           </Nav>
           <Content>
@@ -105,5 +128,6 @@ export const Layout = ({
         </Root>
       </ThemeProvider>
     </DocsContext.Provider>
-  )
+  ) : null
+  return component
 }

theme/src/components/Link.tsx

@@ -9,11 +9,7 @@ const isExternal = (url: string) => url && url.startsWith('http')
 const isInPage = (url: string) => url && url.startsWith('#')
 const isRelative = (url: string) => url && !url.startsWith('/')
 
-const LocalLink: React.FC<LinkProps> = ({
-  href,
-  variant,
-  ...props
-}: LinkProps) => (
+const LocalLink = ({ href, variant, ...props }: LinkProps<'a'>) => (
   <DocsContext.Consumer>
     {({ pathname, navigate }) => {
       let base = pathname.replace(pathStartRegEx, `/`)
@@ -37,7 +33,7 @@ const LocalLink: React.FC<LinkProps> = ({
   </DocsContext.Consumer>
 )
 
-export const Link: React.FC<LinkProps> = ({ href, ...props }: LinkProps) => {
+export const Link = ({ href, ...props }: LinkProps<'a'>) => {
   if (isExternal(href)) {
     return <RawLink variant="styled" href={href} target="_blank" {...props} />
   }
@@ -51,10 +47,7 @@ export const Link: React.FC<LinkProps> = ({ href, ...props }: LinkProps) => {
   return <LocalLink {...props} variant="styled" href={href} />
 }
 
-export const ClearLink: React.FC<LinkProps> = ({
-  href,
-  ...props
-}: LinkProps) => {
+export const ClearLink = ({ href, ...props }: LinkProps<'a'>) => {
   if (isExternal(href)) {
     return <RawLink variant="clear" href={href} target="_blank" {...props} />
   } else {

theme/src/components/Markdown.tsx

@@ -2,19 +2,29 @@ import React, { FC } from 'react'
 import { MDXProvider } from '@mdx-js/react'
 import MDXRenderer from 'gatsby-plugin-mdx/mdx-renderer'
 import { Link } from './Link'
-import { mdx } from '@committed/components'
+import { styled, mdx, Table, Theme } from '@committed/components'
 
 interface MardownProps {
   children: any
 }
 
+const StripedTable = styled(Table)(({ theme }: { theme: Theme }) => ({
+  '& tr:nth-child(even)': {
+    backgroundColor:
+      theme.palette.type === 'light'
+        ? theme.palette.grey[100]
+        : theme.palette.grey[900],
+  },
+}))
+
 const components = Object.assign({}, mdx.components, {
   a: ({ children, href, ...props }) => (
     <Link href={href} {...props}>
       {children}
     </Link>
   ),
-  ...mdx.shortcodes
+  table: (props) => <StripedTable {...props} />,
+  ...mdx.shortcodes,
 })
 
 export const Markdown: FC = (props: MardownProps) => (

theme/src/components/Search.tsx

@@ -47,7 +47,7 @@ export const Search: FC<SearchProps> = (props: SearchProps) => {
 
     const r = index
       // Expand allows for partial matches (mer matches mermaid)
-      .search(query, { expand: true })
+      .search(query, JSON.parse('{ "expand": true }'))
       // Map over each ID and return the full document
       .map(({ ref }) => index.documentStore.getDoc(ref))
 

theme/src/layout/print.tsx

@@ -1,4 +1,4 @@
-import { Box, CodeStyle, ThemeProvider } from '@committed/components'
+import { Box, CodeStyle, ThemeProvider, fonts } from '@committed/components'
 import { graphql, navigate } from 'gatsby'
 import React from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
@@ -11,7 +11,9 @@ import '../style/mermaid.css'
 import '../style/print.css'
 
 export default ({ pageContext, data }) => {
-  useHotkeys('esc', () => navigate('/'))
+  useHotkeys('esc', () => {
+    navigate('/')
+  })
 
   const docs = data.allDocs.edges.reduce((accu, edge) => {
     accu[edge.node.id] = edge.node.body
@@ -20,7 +22,8 @@ export default ({ pageContext, data }) => {
   return (
     <ThemeProvider
       choice="light"
-      fonts={{
+      createFonts={() => ({
+        ...fonts.defaultFonts,
         display: {
           fontFamily:
             'Dosis, "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif',
@@ -30,7 +33,7 @@ export default ({ pageContext, data }) => {
           fontFamily:
             'Lato, -apple-system, BlinkMacSystemFont, "San Francisco", Roboto,  "Segoe UI", "Helvetica Neue"',
         },
-      }}
+      })}
     >
       <Header />
       <Footer />