@primer/doctocat-nextjs 0.0.2-rc.1da8f9a → 0.0.2-rc.cdbd6bf

package/CHANGELOG.md

@@ -4,6 +4,4 @@
 
 ### Patch Changes
 
-- [#4](https://github.com/primer/doctocat-nextjs/pull/4) [`4f28982`](https://github.com/primer/doctocat-nextjs/commit/4f28982e327e75f199f28fad987f1e827deafeb2) Thanks [@joseph-lozano](https://github.com/joseph-lozano)! - Wrap links with Next's Link component
-
 - [#2](https://github.com/primer/doctocat-nextjs/pull/2) [`2742b32`](https://github.com/primer/doctocat-nextjs/commit/2742b3214e7a53416d23f0459dc389f7c22cf5a1) Thanks [@rezrah](https://github.com/rezrah)! - Remove code blocks stylesheet, now merged into global.css

package/components/layout/index-cards/IndexCards.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import {Card, Grid} from '@primer/react-brand'
 import {Folder, MdxFile} from 'nextra'
+import {useRouter} from 'next/router'
 
 import styles from './IndexCards.module.css'
-import Link from 'next/link'
 
 type IndexCardsProps = {
   route: string
@@ -22,6 +22,7 @@ type DocsItem = (MdxFile | FolderWithoutChildren) & {
 }
 
 export function IndexCards({route, folderData}: IndexCardsProps) {
+  const {basePath} = useRouter()
   const filteredData = folderData.filter(item => item.kind === 'MdxPage' && item.route.includes(`${route}/`))
 
   return (
@@ -30,14 +31,12 @@ export function IndexCards({route, folderData}: IndexCardsProps) {
         if (item.kind !== 'MdxPage') return null
         return (
           <Grid.Column span={{medium: 6}} key={`cell-${item.route}`}>
-            <Link href={item.route} legacyBehavior passHref>
-              <Card href="#" hasBorder style={{width: '100%'}}>
-                {item.frontMatter && <Card.Heading>{item.frontMatter.title}</Card.Heading>}
-                {item.frontMatter && item.frontMatter.description && (
-                  <Card.Description>{item.frontMatter.description}</Card.Description>
-                )}
-              </Card>
-            </Link>
+            <Card href={`${basePath}${item.route}`} hasBorder style={{width: '100%'}}>
+              {item.frontMatter && <Card.Heading>{item.frontMatter.title}</Card.Heading>}
+              {item.frontMatter && item.frontMatter.description && (
+                <Card.Description>{item.frontMatter.description}</Card.Description>
+              )}
+            </Card>
           </Grid.Column>
         )
       })}

package/components/layout/nav-drawer/NavDrawer.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import NextLink from 'next/link'
 import {Box, IconButton, Link, ThemeProvider} from '@primer/react'
 import {XIcon} from '@primer/octicons-react'
 
@@ -35,7 +34,7 @@ export function NavDrawer({isOpen, onDismiss, navItems}: NavDrawerProps) {
             }}
           >
             <Box sx={{py: 20, pl: 4, pr: 3, alignItems: 'center', justifyContent: 'space-between', display: 'flex'}}>
-              <Link as={NextLink} href="https://primer.style" sx={{fontWeight: 'bold', color: 'inherit'}}>
+              <Link href="https://primer.style" sx={{fontWeight: 'bold', color: 'inherit'}}>
                 Explore
               </Link>
               <IconButton icon={XIcon} aria-label="Close" onClick={onDismiss} variant="invisible" />

package/components/layout/root-layout/Theme.tsx

@@ -1,5 +1,4 @@
 import React, {useMemo} from 'react'
-import NextLink from 'next/link'
 import Head from 'next/head'
 import type {Folder, MdxFile, NextraThemeLayoutProps} from 'nextra'
 import {useFSRoute} from 'nextra/hooks'
@@ -37,7 +36,7 @@ const {publicRuntimeConfig} = getConfig()
 
 export function Theme({children, pageOpts}: NextraThemeLayoutProps) {
   const {title, frontMatter, headings, filePath, pageMap, route} = pageOpts
-  const {locale = 'en-US', defaultLocale} = useRouter()
+  const {locale = 'en-US', defaultLocale, basePath} = useRouter()
   const fsPath = useFSRoute()
   const {colorMode} = useColorMode()
   const {activePath, topLevelNavbarItems, docsDirectories, flatDocsDirectories} = useMemo(
@@ -97,8 +96,7 @@ export function Theme({children, pageOpts}: NextraThemeLayoutProps) {
                                   <Breadcrumbs>
                                     {siteTitle && (
                                       <Breadcrumbs.Item
-                                        as={NextLink}
-                                        href="/"
+                                        href={basePath || '/'}
                                         sx={{
                                           color: 'var(--brand-InlineLink-color-rest)',
                                         }}
@@ -109,9 +107,8 @@ export function Theme({children, pageOpts}: NextraThemeLayoutProps) {
                                     {activePath.map((item, index) => {
                                       return (
                                         <Breadcrumbs.Item
-                                          as={NextLink}
                                           key={item.name}
-                                          href={item.route}
+                                          href={`${basePath}${item.route}`}
                                           selected={index === activePath.length - 1}
                                           sx={{
                                             textTransform: 'capitalize',

package/components/layout/sidebar/Sidebar.tsx

@@ -1,5 +1,4 @@
 import React, {useMemo} from 'react'
-import NextLink from 'next/link'
 import {NavList} from '@primer/react'
 import {Folder, MdxFile, PageMapItem} from 'nextra'
 import {useRouter} from 'next/router'
@@ -61,6 +60,7 @@ function getOcticonForType(type?: string): Icon | undefined {
 
 export function Sidebar({pageMap}: SidebarProps) {
   const router = useRouter()
+  const basePath = router.basePath
 
   const {sidebarLinks}: ThemeConfig = publicRuntimeConfig
 
@@ -94,7 +94,7 @@ export function Sidebar({pageMap}: SidebarProps) {
 
           if (item.kind === 'MdxPage') {
             return (
-              <NavList.Item as={NextLink} key={item.name} href={item.route} sx={{textTransform: 'capitalize'}}>
+              <NavList.Item key={item.name} href={`${basePath}${item.route}`} sx={{textTransform: 'capitalize'}}>
                 {item.frontMatter?.title ?? item.name}
               </NavList.Item>
             )
@@ -109,7 +109,7 @@ export function Sidebar({pageMap}: SidebarProps) {
             const shouldShowTabs = indexPage.frontMatter?.['show-tabs'] ?? false
             if (shouldShowTabs) {
               return (
-                <NavList.Item as={NextLink} key={indexPage.name} href={indexPage.route}>
+                <NavList.Item key={indexPage.name} href={`${basePath}${indexPage.route}`}>
                   {(indexPage as MdxFile).frontMatter?.title || item.name}
                 </NavList.Item>
               )
@@ -129,9 +129,8 @@ export function Sidebar({pageMap}: SidebarProps) {
                       if (child.kind === 'MdxPage') {
                         return (
                           <NavList.Item
-                            as={NextLink}
                             key={child.name}
-                            href={child.route}
+                            href={`${basePath}${child.route}`}
                             aria-current={child.route === router.pathname ? 'page' : undefined}
                           >
                             {(child as MdxFile).frontMatter?.title || item.name}
@@ -145,9 +144,8 @@ export function Sidebar({pageMap}: SidebarProps) {
                         )
                         return (
                           <NavList.Item
-                            as={NextLink}
-                            key={(landingPageItem as MdxFile).route}
-                            href={(landingPageItem as MdxFile).route}
+                            key={`${(landingPageItem as MdxFile).route}`}
+                            href={`${basePath}${(landingPageItem as MdxFile).route}`}
                             sx={{textTransform: 'capitalize'}}
                             aria-current={(landingPageItem as MdxFile).route === router.pathname ? 'page' : undefined}
                           >
@@ -172,12 +170,7 @@ export function Sidebar({pageMap}: SidebarProps) {
               const LeadingIcon = getOcticonForType(leadingIcon)
 
               return (
-                <NavList.Item
-                  as={NextLink}
-                  key={link.title}
-                  href={link.href}
-                  target={isExternalUrl ? '_blank' : undefined}
-                >
+                <NavList.Item key={link.title} href={link.href} target={isExternalUrl ? '_blank' : undefined}>
                   <NavList.LeadingVisual>{LeadingIcon && <LeadingIcon />}</NavList.LeadingVisual>
                   {link.title}
                   {isExternalUrl && (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/doctocat-nextjs",
-  "version": "0.0.2-rc.1da8f9a",
+  "version": "0.0.2-rc.cdbd6bf",
   "description": "A Next.js theme for building Primer documentation sites",
   "main": "index.js",
   "scripts": {