Anchor Link in Docs

docs/markdown.js

@@ -1,15 +1,24 @@
 import React from 'react'
-import {Heading, Link} from '@primer/components'
-import {CodeExample} from '@primer/blueprints'
+import {Link} from '@primer/components'
+import {MarkdownHeading} from '@primer/blueprints'
+import {CodeExample} from '@primer/blueprints/next-components'
 import Outline from './Outline'
 
-export const H1 = props => <Heading fontSize={6} fontWeight="light" {...props} />
+export const H1 = props => <MarkdownHeading {...props} />
+export const H2 = props => <MarkdownHeading as="h2" {...props} />
+export const H3 = props => <MarkdownHeading as="h3" {...props} />
+export const H4 = props => <MarkdownHeading as="h4" {...props} />
+export const H5 = props => <MarkdownHeading as="h5" {...props} />
 
 export default function getComponents(page = {}) {
   const {outline: getOutline = () => []} = page
 
   return {
     h1: H1,
+    h2: H2,
+    h3: H3,
+    h4: H4,
+    h5: H5,
     // render links with our component
     a: Link,
     // render code blocks with our wrapper around react-live

package.json

@@ -47,7 +47,7 @@
     "@githubprimer/octicons-react": "^8.1.3",
     "@mdx-js/mdx": "^0.16.6",
     "@mdx-js/tag": "0.15.0",
-    "@primer/blueprints": "3.0.4",
+    "@primer/blueprints": "4.0.1",
     "@primer/components": "12.0.1",
     "@primer/next-pages": "0.0.3",
     "@storybook/addon-viewport": "5.0.0",

pages/_app.js

@@ -4,7 +4,8 @@ import {MDXProvider} from '@mdx-js/tag'
 import Head from 'next/head'
 import {BaseStyles, BorderBox, Box, Flex, theme} from '@primer/components'
 import {PackageHeader} from '../docs/components'
-import {Header, JumpNav, Section, RouteMatch, SectionLink, SideNav} from '@primer/blueprints'
+import {Header, MarkdownHeading, JumpNav, SideNav} from '@primer/blueprints'
+import {NavList} from '@primer/blueprints/next-components'
 import getComponents from '../docs/markdown'
 import documents from '../searchIndex'
 import {config, requirePage, rootPage} from '../docs/utils'
@@ -27,7 +28,6 @@ export default class MyApp extends App {
     // strip the trailing slash
     const pathname = this.props.router.pathname.replace(/\/$/, '')
     const {Component, page} = this.props
-
     const node = rootPage.first(node => node.path === pathname) || {}
     const {file, meta = {}} = node || {}
     const components = getComponents(node)
@@ -58,7 +58,7 @@ export default class MyApp extends App {
               {Hero ? <Hero /> : null}
               <Box color="gray.9" maxWidth={['auto', 'auto', 'auto', CONTENT_MAX_WIDTH]} px={6} mx="auto" my={6}>
                 <div className="markdown-body">
-                  {!meta.hero && meta.title ? <h1>{meta.title}</h1> : null}
+                  {!meta.hero && meta.title ? <MarkdownHeading>{meta.title}</MarkdownHeading> : null}
                   <PackageHeader {...meta} />
                   <MDXProvider components={components}>
                     <Component {...page} />
@@ -83,19 +83,13 @@ export default class MyApp extends App {
               borderTop={[1, 1, 0, 0]}
             >
               <SideNav>
-                <Section path="/css/getting-started" />
-                <Section path="/css/principles" />
-                <Section path="/css/tools" />
-                <Section path="/css/whats-new" />
-                <RouteMatch path="/css">
-                  <Section>
-                    <SectionLink color='black' href="status-key" />
-                  </Section>
-                  <Section path="support" />
-                  <Section path="utilities" />
-                  <Section path="objects" />
-                  <Section path="components" />
-                </RouteMatch>
+                <NavList currentPath={pathname} path="/css/getting-started" />
+                <NavList currentPath={pathname} path="/css/tools" />
+                <NavList currentPath={pathname} path="/css/principles" />
+                <NavList currentPath={pathname} path="/css/support" />
+                <NavList currentPath={pathname} path="/css/utilities" />
+                <NavList currentPath={pathname} path="/css/objects" />
+                <NavList currentPath={pathname} path="/css/components" />
               </SideNav>
             </BorderBox>
           </Flex>

pages/_error.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import {Heading} from '@primer/components'
-import {redirectTrailingSlash} from '@primer/blueprints'
+import {redirectTrailingSlash} from '@primer/blueprints/next-components'
 
 export default class extends React.Component {
   static getInitialProps(context) {

pages/index.js

@@ -1,2 +1,2 @@
-import {redirect} from '@primer/blueprints'
+import {redirect} from '@primer/blueprints/next-components'
 export default redirect('/css')