feat: add new theme sidebar

Author: pedronauck

core/docz-core/src/machines/devServer/index.ts

@@ -62,4 +62,4 @@ const machine = Machine<ServerMachineCtx>({
 export const devServerMachine = machine.withConfig({
   services,
   actions,
-})
+} as any)

core/docz-core/src/machines/devServer/services/ensureDirs.ts

@@ -4,5 +4,5 @@ import * as paths from '../../../config/paths'
 
 export const ensureDirs = async () => {
   await fs.ensureDir(paths.docz)
-  await fs.ensureDir(path.join(paths.docz, 'src/pages'))
+  return await fs.ensureDir(path.join(paths.docz, 'src/pages'))
 }

core/docz-utils/src/mdast.ts

@@ -80,6 +80,6 @@ export interface ParsedData {
 }
 
 export const getParsedData = (ast: any): ParsedData => {
-  const node = find(ast, (node: any) => is('yaml', node))
+  const node = find(ast, (node: any) => is(node, 'yaml'))
   return get(node, `data.parsedValue`) || {}
 }

core/docz/src/hooks/useMenus.ts

@@ -111,7 +111,7 @@ const sortMenus = (first: Menus, second: Menus | undefined = []): Menus => {
 const search = (val: string, menu: MenuItem[]) => {
   const items = menu.map(item => [item].concat(item.menu || []))
   const flattened = flattenDepth(2, items)
-  const flattenedDeduplicated = [...new Set(flattened)]
+  const flattenedDeduplicated = Array.from(new Set(flattened))
   return match(flattenedDeduplicated, val, { keys: ['name'] })
 }
 
@@ -143,6 +143,7 @@ export const useMenus = (opts?: UseMenusParams) => {
     return filterMenus(result, opts && opts.filter)
   }, [entries, config])
 
+  console.log(query)
   return query && query.length > 0
     ? (search(query, sorted) as MenuItem[])
     : sorted

core/gatsby-theme-docz/src/base/Layout.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import { useStaticQuery, graphql } from 'gatsby'
 import { useComponents } from 'docz'
 import { MDXProvider } from '@mdx-js/react'
+import { propEq, get } from 'lodash/fp'
 
 import Theme from '../docz'
 import Wrapper from '../docz/wrapper'
@@ -42,12 +43,16 @@ const parseDatabase = data => {
   }
 }
 
+const findEntry = (db, ctx) => {
+  const filepath = get('entry.filepath', ctx)
+  return db.entries.find(propEq('value.filepath', filepath))
+}
+
 const Layout = ({ children, ...defaultProps }) => {
   const { pageContext: ctx } = defaultProps
   const data = useStaticQuery(query)
   const db = parseDatabase(data)
-  const entry =
-    db.entries && db.entries.find(entry => entry.filepath === ctx.filepath)
+  const entry = findEntry(db, ctx)
 
   return (
     <Fragment>

core/gatsby-theme-docz/src/docz/components/Header/index.js

@@ -4,14 +4,16 @@ import { Link, useConfig, useCurrentDoc } from 'docz'
 import styled from '@emotion/styled'
 
 import { themeProp } from '@docz/utils/theme'
+import { breakpoints } from '@docz/theme/breakpoints'
+
 import { Edit, Sun, Menu, Github } from '../Icons'
 import * as styles from './styles'
 
 const Wrapper = styled(Box)`
   border-bottom: 1px solid ${themeProp('colors.header.border')};
 `
 
-export const Header = () => {
+export const Header = ({ onOpen, nav }) => {
   const config = useConfig()
   const { edit = true, ...doc } = useCurrentDoc()
   const [colorMode, setColorMode] = useColorMode()
@@ -20,46 +22,53 @@ export const Header = () => {
     setColorMode(colorMode === 'light' ? 'dark' : 'light')
   }
 
+  const handleMenu = () => {
+    onOpen(s => !s)
+    if (!nav.current) return
+    const navLink = nav.current.querySelector('a')
+    if (navLink) navLink.focus()
+  }
+
   return (
-    <Wrapper css={styles.wrapper}>
+    <Wrapper sx={styles.wrapper}>
       <Container>
-        <div css={styles.innerContainer}>
+        <div sx={styles.innerContainer}>
           <Flex aligmItems="center">
-            <button css={styles.menuButton}>
-              <Menu size={30} />
-            </button>
-            <Box pl={3}>
-              <Link to="/" css={styles.link}>
-                {config.title}
-              </Link>
+            <Box sx={styles.menuIcon}>
+              <button sx={styles.menuButton} onClick={handleMenu}>
+                <Menu size={30} />
+              </button>
             </Box>
+            <Link to="/" sx={styles.link}>
+              {config.title}
+            </Link>
           </Flex>
           <Flex>
             {config.repository && (
-              <Box mr={3}>
+              <Box sx={{ mr: 2 }}>
                 <a
                   href={config.repository}
-                  css={styles.headerButton}
+                  sx={styles.headerButton}
                   target="_blank"
                   rel="noopener noreferrer"
                 >
                   <Github size={15} />
                 </a>
               </Box>
             )}
-            <button css={styles.headerButton} onClick={toggleColorMode}>
+            <button sx={styles.headerButton} onClick={toggleColorMode}>
               <Sun size={15} />
             </button>
           </Flex>
           {edit && doc.link && (
             <a
-              css={styles.editButton}
+              sx={styles.editButton}
               href={doc.link}
               target="_blank"
               rel="noopener noreferrer"
             >
               <Edit width={14} />
-              <Box pl={2}>Edit page</Box>
+              <Box sx={{ pl: 2 }}>Edit page</Box>
             </a>
           )}
         </div>

core/gatsby-theme-docz/src/docz/components/Header/styles.js

@@ -1,4 +1,13 @@
 import * as mixins from '@docz/utils/mixins'
+import { media } from '@docz/theme/breakpoints'
+
+export const menuIcon = {
+  mr: 3,
+  display: 'none',
+  [media.tablet]: {
+    display: 'block',
+  },
+}
 
 export const wrapper = {
   bg: 'header.bg',

core/gatsby-theme-docz/src/docz/components/Headings/index.js

@@ -7,7 +7,7 @@ const heading = Tag => {
       <Tag {...props}>
         <a
           href={`#${props.id}`}
-          css={{
+          sx={{
             color: 'inherit',
             textDecoration: 'none',
             ':hover': {

core/gatsby-theme-docz/src/docz/components/Icons/index.js

@@ -2,3 +2,4 @@ export { default as Edit } from 'react-feather/dist/icons/edit-2'
 export { default as Sun } from 'react-feather/dist/icons/sun'
 export { default as Menu } from 'react-feather/dist/icons/menu'
 export { default as Github } from 'react-feather/dist/icons/github'
+export { default as Search } from 'react-feather/dist/icons/search'

core/gatsby-theme-docz/src/docz/components/Layout/index.js

@@ -1,16 +1,33 @@
 /** @jsx jsx */
-import { jsx, css, Layout as BaseLayout, Main, Container } from 'theme-ui'
+import { useRef, useState } from 'react'
+import { jsx, Layout as BaseLayout, Main, Container } from 'theme-ui'
 import { Global } from '@emotion/core'
 
 import global from '@docz/theme/global'
 import { Header } from '../Header'
+import { Sidebar } from '../Sidebar'
+import * as styles from './styles'
 
-export const Layout = ({ children }) => (
-  <BaseLayout css={{ '> div': { flex: '1 1 auto' } }}>
-    <Global styles={global} />
-    <Main>
-      <Header />
-      <Container>{children}</Container>
-    </Main>
-  </BaseLayout>
-)
+export const Layout = ({ children }) => {
+  const [open, setOpen] = useState(false)
+  const nav = useRef()
+
+  return (
+    <BaseLayout sx={{ '& > div': { flex: '1 1 auto' } }}>
+      <Global styles={global} />
+      <Main>
+        <Header nav={nav} onOpen={setOpen} />
+        <Container sx={styles.container}>
+          <Sidebar
+            ref={nav}
+            open={open}
+            onFocus={() => setOpen(true)}
+            onBlur={() => setOpen(false)}
+            onClick={() => setOpen(false)}
+          />
+          <div sx={styles.content}>{children}</div>
+        </Container>
+      </Main>
+    </BaseLayout>
+  )
+}

core/gatsby-theme-docz/src/docz/components/Layout/styles.js

@@ -0,0 +1,19 @@
+import { media } from '@docz/theme/breakpoints'
+
+export const container = {
+  py: 0,
+  display: 'grid',
+  gridTemplateColumns: '250px 1fr',
+  [media.tablet]: {
+    display: 'block',
+  },
+}
+
+export const content = {
+  py: 5,
+  px: 4,
+  [media.tablet]: {
+    py: 4,
+    px: 0,
+  },
+}

core/gatsby-theme-docz/src/docz/components/NavGroup/index.js

@@ -0,0 +1,22 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui'
+
+import * as styles from './styles'
+import { NavLink } from '../NavLink'
+
+export const NavGroup = ({ item }) => {
+  const { menu } = item
+  return (
+    <div sx={styles.wrapper}>
+      <div sx={styles.title}>{item.name}</div>
+      {menu &&
+        menu.map(menu => {
+          return (
+            <NavLink key={menu.id} item={menu}>
+              {menu.name}
+            </NavLink>
+          )
+        })}
+    </div>
+  )
+}

core/gatsby-theme-docz/src/docz/components/NavGroup/styles.js

@@ -0,0 +1,11 @@
+export const wrapper = {
+  my: 3,
+}
+
+export const title = {
+  mb: 1,
+  fontSize: 0,
+  fontWeight: 600,
+  textTransform: 'uppercase',
+  color: 'sidebar.navGroup',
+}

core/gatsby-theme-docz/src/docz/components/NavLink/index.js

@@ -1,26 +1,40 @@
 /** @jsx jsx */
+import React from 'react'
 import { jsx } from 'theme-ui'
 import { Link } from 'gatsby'
-import isAbsoluteURL from 'is-absolute-url'
+import { useDocs, useCurrentDoc } from 'docz'
+import { get } from 'lodash/fp'
 
-const styles = {
-  display: 'inline-block',
-  px: 2,
-  py: 2,
-  color: 'inherit',
-  textDecoration: 'none',
-  fontSize: 1,
-  fontWeight: 'bold',
-  '&.active': {
-    color: 'primary',
-  },
+import * as styles from './styles'
+
+const getHeadings = (route, docs) => {
+  const doc = docs.find(doc => doc.route === route)
+  const headings = get('headings', doc)
+  return headings ? headings.filter(heading => heading.depth === 2) : []
 }
 
-export const NavLink = ({ href, ...props }) => {
-  const isExternal = isAbsoluteURL(href || '')
-  if (isExternal) {
-    return <a {...props} href={href} css={styles} />
-  }
-  const to = props.to || href
-  return <Link {...props} to={to} css={styles} activeClassName="active" />
+export const NavLink = ({ item, ...props }) => {
+  const docs = useDocs()
+  const to = item.route
+  const headings = docs && getHeadings(to, docs)
+  const current = useCurrentDoc()
+  const isCurrent = item.route === current.route
+  const showHeadings = isCurrent && headings && headings.length > 0
+
+  return (
+    <React.Fragment>
+      <Link {...props} to={to} sx={styles.link} activeClassName="active" />
+      {showHeadings &&
+        headings.map(heading => (
+          <Link
+            key={heading.slug}
+            to={`${to}#${heading.slug}`}
+            sx={styles.smallLink}
+            activeClassName="active"
+          >
+            {heading.value}
+          </Link>
+        ))}
+    </React.Fragment>
+  )
 }

core/gatsby-theme-docz/src/docz/components/NavLink/styles.js

@@ -0,0 +1,20 @@
+export const link = {
+  my: 2,
+  display: 'block',
+  color: 'sidebar.navLink',
+  textDecoration: 'none',
+  fontSize: 2,
+  '&.active': {
+    color: 'sidebar.navLinkActive',
+  },
+}
+
+export const smallLink = {
+  ...link,
+  ml: 2,
+  fontSize: 1,
+  color: 'sidebar.tocLink',
+  '&.active': {
+    color: 'sidebar.tocLinkActive',
+  },
+}

core/gatsby-theme-docz/src/docz/components/NavSearch/index.js

@@ -0,0 +1,14 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui'
+
+import * as styles from './styles'
+import { Search } from '../Icons'
+
+export const NavSearch = props => {
+  return (
+    <div sx={styles.wrapper}>
+      <Search size={20} sx={styles.icon} />
+      <input {...props} sx={styles.input} />
+    </div>
+  )
+}

core/gatsby-theme-docz/src/docz/components/NavSearch/styles.js

@@ -0,0 +1,18 @@
+export const wrapper = {
+  mb: 3,
+  display: 'flex',
+  alignItems: 'center',
+}
+
+export const input = {
+  outline: 'none',
+  background: 'none',
+  border: 'none',
+  color: 'text',
+  fontSize: 1,
+}
+
+export const icon = {
+  color: 'border',
+  mr: 2,
+}