factor out NextLink

docs/src/Header.js

@@ -1,28 +1,24 @@
 import React from 'react'
 import {withRouter} from 'next/router'
 import Octicon, {MarkGithub} from '@githubprimer/octicons-react'
-import NextLink from 'next/link'
 import BoxShadow from './BoxShadow'
-import {Text, Flex, Link, Sticky, Box} from '@primer/components'
+import Link from './Link'
+import {Text, Flex, Sticky, Box} from '@primer/components'
 
 const NavLink = withRouter(({href, router, ...rest}) => (
-  <NextLink href={href}>
-    <Link color="white" href={href} px={4} fontWeight={router.pathname === href ? 'bold' : null} {...rest} />
-  </NextLink>
+  <Link color="white" href={href} px={4} fontWeight={router.pathname === href ? 'bold' : null} {...rest} />
 ))
 
 const Header = props => (
   <Sticky zIndex={100}>
     <BoxShadow py={3} bg="gray.9" color="white" {...props}>
       <Flex className="p-responsive" alignItems="center" justifyContent="space-between">
-        <NextLink href="/css">
-          <Link ml={3} color="white" href="/css">
-            <Flex alignItems="center" justifyContent="center">
-              <Octicon icon={MarkGithub} size="medium" />
-              <Text ml={3}>Primer CSS</Text>
-            </Flex>
-          </Link>
-        </NextLink>
+        <Link ml={3} color="white" href="/css">
+          <Flex alignItems="center" justifyContent="center">
+            <Octicon icon={MarkGithub} size="medium" />
+            <Text ml={3}>Primer CSS</Text>
+          </Flex>
+        </Link>
         <Box display={['none', 'none', 'block']}>
           <NavLink href="/css">Docs</NavLink>
           <NavLink href="/css/getting-started">Getting Started</NavLink>

docs/src/Link.js

@@ -0,0 +1,8 @@
+import NextLink from 'next/link'
+import {Link as PrimerLink} from '@primer/components'
+
+export default ({href, ...rest}) => (
+  <NextLink href={href}>
+    <PrimerLink href={href} {...rest} />
+  </NextLink>
+)

docs/src/SideNav.js

@@ -1,9 +1,9 @@
 import React from 'react'
-import NextLink from 'next/link'
 import {withRouter} from 'next/router'
 import {join} from 'path'
-import {Box, BorderBox, Link, Flex, Relative} from '@primer/components'
-import {rootPage, requirePage} from './utils'
+import {Box, BorderBox, Flex, Relative} from '@primer/components'
+import Link from './Link'
+import {rootPage} from './utils'
 
 export default props => (
   <Relative is="nav">
@@ -47,29 +47,25 @@ const NavList = ({path, router}) => (
 
 const SectionLink = withRouter(({href, router, ...rest}) => (
   <Box mb={2}>
-    <NextLink href={href}>
-      <NodeLink
-        href={href}
-        color="gray.9"
-        fontSize={2}
-        fontWeight={router.pathname.startsWith(href) ? 'bold' : null}
-        {...rest}
-      />
-    </NextLink>
+    <NodeLink
+      href={href}
+      color="gray.9"
+      fontSize={2}
+      fontWeight={router.pathname.startsWith(href) ? 'bold' : null}
+      {...rest}
+    />
   </Box>
 ))
 
 const NavLink = withRouter(({href, router, ...rest}) => {
   return (
     <Box mb={2}>
-      <NextLink href={href}>
-        <NodeLink
-          href={href}
-          color={router.pathname === href ? 'black' : undefined}
-          fontSize={1}
-          {...rest}
-        />
-      </NextLink>
+      <NodeLink
+        href={href}
+        color={router.pathname === href ? 'black' : undefined}
+        fontSize={1}
+        {...rest}
+      />
     </Box>
   )
 })
@@ -80,6 +76,6 @@ function NodeLink(props) {
     return <Link {...props} />
   }
   const node = rootPage.first(node => node.path === href)
-  const children = (node ? requirePage(node.file).meta.title : null) || href
+  const children = (node ? node.meta.title : null) || href
   return <Link {...props}>{children}</Link>
 }

docs/src/components.js

@@ -1,4 +1,5 @@
-export {default as Header} from './Header'
-export {default as SideNav} from './SideNav'
-export {default as IndexHero} from './IndexHero'
 export {default as BoxShadow} from './BoxShadow'
+export {default as Header} from './Header'
+export {default as IndexHero} from './IndexHero'
+export {default as Link} from './Link'
+export {default as SideNav} from './SideNav'