feat(docz-theme-default): add automatic table of content

packages/docz-theme-default/package.json

@@ -35,6 +35,7 @@
     "react-feather": "^1.1.0",
     "react-lightweight-tooltip": "^1.0.0",
     "react-powerplug": "^0.1.6",
+    "react-router-hash-link": "^1.2.0",
     "react-spinners": "^0.3.2",
     "webfontloader": "^1.6.28"
   },

packages/docz-theme-default/src/components/shared/Sidebar/Link.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react'
+import { SFC } from 'react'
+import { Link as BaseLink, LinkProps as BaseLinkProps, Entry } from 'docz'
+import { NavHashLink } from 'react-router-hash-link'
+
+import styled, { css } from 'react-emotion'
+
+export const linkStyle = (p: any) => css`
+  position: relative;
+  display: block;
+  margin: 6px 16px;
+  font-weight: 600;
+  color: ${p.theme.colors.sidebarText};
+  text-decoration: none;
+  transition: color 0.2s;
+
+  &:hover,
+  &:visited {
+    color: ${p.theme.colors.sidebarText};
+  }
+
+  &:hover,
+  &.active {
+    color: ${p.theme.colors.primary};
+    font-weight: 600;
+  }
+`
+
+const LinkStyled = styled(BaseLink)`
+  ${linkStyle};
+`
+
+interface LinkWrapperProps {
+  active: boolean
+  theme?: any
+}
+
+const activeWrapper = (p: LinkWrapperProps) => css`
+  &:after {
+    position: absolute;
+    display: block;
+    content: '';
+    top: 0;
+    left: 0;
+    width: 2px;
+    height: 100%;
+    background: ${p.theme.colors.border};
+  }
+`
+
+const LinkWrapper = styled('div')`
+  position: relative;
+  ${(p: LinkWrapperProps) => p.active && activeWrapper(p)};
+`
+
+const isActive = (doc: Entry, location: any) => {
+  return doc.route === location.pathname
+}
+
+const SmallLink = styled(NavHashLink)`
+  font-size: 14px;
+  padding: 0 0 5px 26px;
+  text-decoration: none;
+  opacity: 0.5;
+  transition: opacity 0.2s;
+
+  &,
+  &:visited,
+  &.active {
+    color: ${p => p.theme.colors.sidebarText};
+  }
+
+  &.active {
+    opacity: 1;
+  }
+`
+
+const Submenu = styled('div')`
+  display: flex;
+  flex-direction: column;
+  margin: 5px 0;
+`
+
+const isSmallLinkActive = (slug: string) => (m: any, location: any) =>
+  slug === location.hash.slice(1, Infinity)
+
+interface LinkProps extends BaseLinkProps {
+  doc: Entry
+}
+
+export const Link: SFC<LinkProps> = ({ doc, onClick, ...props }) => {
+  const active = isActive(doc, location)
+
+  return (
+    <LinkWrapper active={active}>
+      <LinkStyled {...props} onClick={onClick} />
+      {active && (
+        <Submenu>
+          {doc.headings.map(
+            heading =>
+              heading.depth > 1 &&
+              heading.depth < 3 && (
+                <SmallLink
+                  key={heading.slug}
+                  onClick={onClick}
+                  to={{ pathname: doc.route, hash: heading.slug }}
+                  isActive={isSmallLinkActive(heading.slug)}
+                >
+                  {heading.value}
+                </SmallLink>
+              )
+          )}
+        </Submenu>
+      )}
+    </LinkWrapper>
+  )
+}

packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx

@@ -1,15 +1,21 @@
 import * as React from 'react'
 import { SFC } from 'react'
-import { Entry, Link } from 'docz'
+import { Entry } from 'docz'
 import { Toggle } from 'react-powerplug'
 import ChevronDown from 'react-feather/dist/icons/chevron-down'
 import styled from 'react-emotion'
 
+import { Link, linkStyle } from './Link'
+
 const Wrapper = styled('div')`
   display: flex;
   flex-direction: column;
 `
 
+export const MenuLink = styled('a')`
+  ${linkStyle};
+`
+
 interface IconProps {
   opened: boolean
 }
@@ -45,17 +51,17 @@ export const Menu: SFC<MenuProps> = ({ menu, docs, sidebarToggle }) => (
 
       return (
         <Wrapper>
-          <a href="#" onClick={handleToggle}>
+          <MenuLink href="#" onClick={handleToggle}>
             {menu}
             <Icon opened={on}>
               <ChevronDown size={15} />
             </Icon>
-          </a>
+          </MenuLink>
           {on && (
             <dl>
               {docs.map(doc => (
                 <dt key={doc.id}>
-                  <Link onClick={sidebarToggle} to={doc.route}>
+                  <Link onClick={sidebarToggle} to={doc.route} doc={doc}>
                     {doc.name}
                   </Link>
                 </dt>

packages/docz-theme-default/src/components/shared/Sidebar/index.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
-import { Docs, Link, Entry, ThemeConfig, DocsRenderProps } from 'docz'
+import { Docs, Entry, ThemeConfig, DocsRenderProps } from 'docz'
 import { Toggle } from 'react-powerplug'
 import { Media } from 'react-breakpoints'
 import { adopt } from 'react-adopt'
 import styled from 'react-emotion'
 
 import { Menu } from './Menu'
+import { Link } from './Link'
 import { Docz } from './Docz'
 import { Hamburguer } from './Hamburguer'
 
@@ -27,6 +28,7 @@ const Wrapper = styled('div')`
   display: flex;
   flex-direction: column;
   width: 300px;
+  min-width: 300px;
   height: 100%;
   background: ${background};
   transition: transform 0.2s, background 0.3s;
@@ -41,26 +43,6 @@ const Wrapper = styled('div')`
 
   ${p => p.theme.styles.sidebar};
 
-  a {
-    position: relative;
-    display: block;
-    padding: 6px 16px;
-    font-weight: 600;
-    color: ${p => p.theme.colors.sidebarText};
-    text-decoration: none;
-  }
-
-  a:hover,
-  a:visited {
-    color: ${p => p.theme.colors.sidebarText};
-  }
-
-  a:hover,
-  a.active {
-    color: ${p => p.theme.colors.primary};
-    font-weight: 600;
-  }
-
   dl {
     padding: 0;
     margin: 0 0 0 20px;
@@ -117,11 +99,12 @@ const Footer = styled('div')`
   font-size: 14px;
   color: ${p => p.theme.colors.footerText};
   border-top: 1px dashed ${p => p.theme.colors.border};
+`
 
-  & > a {
-    padding: 0;
-    margin-left: 5px;
-  }
+const FooterLink = styled('a')`
+  padding: 0;
+  margin: 0;
+  margin-left: 5px;
 `
 
 const ToggleBackground = styled('div')`
@@ -196,7 +179,12 @@ export const Sidebar = () => (
             )}
             <Menus>
               {docsWithoutMenu.map(doc => (
-                <Link key={doc.id} to={doc.route} onClick={handleSidebarToggle}>
+                <Link
+                  key={doc.id}
+                  to={doc.route}
+                  onClick={handleSidebarToggle}
+                  doc={doc}
+                >
                   {doc.name}
                 </Link>
               ))}
@@ -211,9 +199,9 @@ export const Sidebar = () => (
             </Menus>
             <Footer>
               Built with
-              <a href="https://docz.site" target="_blank">
+              <FooterLink href="https://docz.site" target="_blank">
                 <FooterLogo width={40} />
-              </a>
+              </FooterLink>
             </Footer>
           </Wrapper>
           <ToggleBackground opened={on} onClick={handleSidebarToggle} />

packages/docz-theme-default/src/components/ui/NotFound.tsx

@@ -12,13 +12,14 @@ const Wrapper = styled('div')`
 
 const Title = styled('h1')`
   margin: 0;
-  font-size: 48px;
+  font-size: 42px;
+  font-weight: 400;
   color: ${p => p.theme.colors.primary};
 `
 
 const Subtitle = styled('p')`
   margin: 0;
-  font-size: 22px;
+  font-size: 18px;
 `
 
 export const NotFound = () => (

packages/docz-theme-default/src/types.d.ts

@@ -1,5 +1,6 @@
 declare module 'react-feather'
 declare module 'react-powerplug'
+declare module 'react-router-hash-link'
 declare module 'react-lightweight-tooltip'
 declare module 'react-feather/dist/icons/chevron-down'
 declare module 'react-spinners'

packages/docz/src/components/Link.tsx

@@ -1,10 +1,7 @@
 import * as React from 'react'
 import { SFC } from 'react'
-import { NavLink, NavLinkProps } from 'react-router-dom'
+import { NavLink, NavLinkProps as LinkProps } from 'react-router-dom'
 
-export const isActive = (match: any, location: any) =>
-  match && match.url === location.pathname
+export const Link: SFC<LinkProps> = props => <NavLink {...props} exact={true} />
 
-export const Link: SFC<NavLinkProps> = props => (
-  <NavLink isActive={isActive} {...props} />
-)
+export { LinkProps }

packages/docz/src/index.ts

@@ -1,7 +1,7 @@
 export { theme, Entry } from './theme'
 export { DocPreview, PageProps, RenderComponent } from './components/DocPreview'
 export { Docs, DocsRenderProps } from './components/Docs'
-export { Link } from './components/Link'
+export { Link, LinkProps } from './components/Link'
 export { Playground } from './components/Playground'
 export { PropsTable } from './components/PropsTable'
 export { ThemeConfig } from './components/ThemeConfig'

yarn.lock

@@ -9381,6 +9381,12 @@ react-router-dom@^4.3.1:
     react-router "^4.3.1"
     warning "^4.0.1"
 
+react-router-hash-link@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/react-router-hash-link/-/react-router-hash-link-1.2.0.tgz#ce824cc5f0502ce9b0686bb6dd9c08659b24094c"
+  dependencies:
+    prop-types "^15.6.0"
+
 react-router@^4.3.1:
   version "4.3.1"
   resolved "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz#aada4aef14c809cb2e686b05cee4742234506c4e"