👷‍♂️ [WIP] add versioning support

.changeset/grumpy-jeans-know.md

@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+add versioning support

examples/docs/next.config.js → examples/docs/next.config.mjs

@@ -1,12 +1,14 @@
-const withNextra = require('nextra')({
+import nextra from 'nextra'
+
+const withNextra = nextra({
   theme: 'nextra-theme-docs',
-  themeConfig: './src/theme.config.js',
+  themeConfig: './theme.config.jsx',
   unstable_staticImage: true,
   unstable_flexsearch: {
     codeblock: false
   }
 })
 
-module.exports = withNextra({
+export default withNextra({
   reactStrictMode: true
 })

examples/docs/src/pages/_meta.json

@@ -1,7 +1,24 @@
 {
-  "index": "Introduction",
-  "get-started": "Get Started",
-  "features": "Features",
-  "themes": "Themes",
-  "advanced": "Advanced"
+  "index": {
+    "type": "page",
+    "display": "hidden",
+    "theme": {
+      "timestamp": false
+    }
+  },
+  "docs": {
+    "type": "page",
+    "title": "v3.0.0",
+    "versioned": true
+  },
+  "v2.13.13": {
+    "type": "page",
+    "versioned": true
+  },
+  "nextra_link": {
+    "title": "Nextra ↗",
+    "href": "https://github.com/shuding/nextra",
+    "type": "page",
+    "newWindow": true
+  }
 }

examples/docs/src/pages/docs/_meta.json

@@ -0,0 +1,6 @@
+{
+  "index": "Get Started",
+  "features": "Features",
+  "themes": "Themes",
+  "advanced": "Advanced"
+}

examples/docs/src/pages/get-started.mdx → examples/docs/src/pages/docs/index.mdx

@@ -63,6 +63,7 @@ const withNextra = require('nextra')({
   themeConfig: './theme.config.js'
   // optional: add `unstable_staticImage: true` to enable Nextra's auto image import
 })
+
 module.exports = withNextra()
 ```
 

examples/docs/src/pages/v2.13.13/_meta.json

@@ -0,0 +1 @@
+{}

examples/docs/src/pages/v2.13.13/hello.mdx

@@ -0,0 +1 @@
+# New doc

examples/docs/src/pages/v2.13.13/index.mdx

@@ -0,0 +1 @@
+# New doc

packages/nextra-theme-docs/src/components/head.tsx

@@ -61,7 +61,6 @@ export function Head(): ReactElement {
         :root {
           --nextra-primary-hue: ${lightHue}deg;
           --nextra-navbar-height: 4rem;
-          --nextra-menu-height: 3.75rem;
           --nextra-banner-height: 2.5rem;
         }
 

packages/nextra-theme-docs/src/components/navbar.tsx

@@ -8,6 +8,7 @@ import { useConfig, useMenu } from '../contexts'
 import { MenuIcon } from 'nextra/icons'
 import { Item, PageItem, MenuItem, renderComponent, getFSRoute } from '../utils'
 import { Anchor } from './anchor'
+import { VersionSwitch } from './version-switch'
 import { DEFAULT_LOCALE } from '../constants'
 
 export type NavBarProps = {
@@ -83,6 +84,21 @@ export function Navbar({ flatDirectories, items }: NavBarProps): ReactElement {
   const activeRoute = getFSRoute(asPath, locale)
   const { menu, setMenu } = useMenu()
 
+  const { versioned, filteredItems } = items.reduce<{
+    versioned: PageItem[]
+    filteredItems: (PageItem | MenuItem)[]
+  }>(
+    (acc, curr) => {
+      if ('versioned' in curr && curr.versioned) {
+        acc.versioned.push(curr)
+      } else {
+        acc.filteredItems.push(curr)
+      }
+      return acc
+    },
+    { versioned: [], filteredItems: [] }
+  )
+
   return (
     <div className="nextra-nav-container nx-sticky nx-top-0 nx-z-20 nx-w-full nx-bg-transparent">
       <div
@@ -106,7 +122,9 @@ export function Navbar({ flatDirectories, items }: NavBarProps): ReactElement {
             {renderComponent(config.logo)}
           </div>
         )}
-        {items.map(pageOrMenu => {
+        {versioned.length > 0 && <VersionSwitch options={versioned} />}
+
+        {filteredItems.map(pageOrMenu => {
           if (pageOrMenu.display === 'hidden') return null
 
           if (pageOrMenu.type === 'menu') {

packages/nextra-theme-docs/src/components/version-switch.tsx

@@ -0,0 +1,46 @@
+import React, { ReactElement, useEffect, useState } from 'react'
+import { ArrowRightIcon } from 'nextra/icons'
+import { useRouter } from 'next/router'
+import { Select } from './select'
+import { PageItem } from '../utils'
+
+export function VersionSwitch({
+  options
+}: {
+  options: PageItem[]
+}): ReactElement {
+  const router = useRouter()
+  const [route, setRoute] = useState('')
+  useEffect(() => {
+    const newRoute =
+      options.find(opt => router.route.startsWith(opt.route))?.route || ''
+    setRoute(newRoute)
+  }, [router.route])
+
+  const selected = route ? options.find(opt => opt.route === route) : options[0]
+  return (
+    <Select
+      className="nx-flex nx-gap-1 nx-items-center"
+      onChange={option => {
+        setRoute(option.key)
+        router.push(option.key)
+      }}
+      selected={{
+        key: route,
+        name: (
+          <>
+            {route ? selected?.title : 'Docs'}
+            <ArrowRightIcon
+              className="nx-shrink-0 nx-h-3.5 nx-w-3.5"
+              pathClassName="[[aria-expanded='true']>svg>&]:nx-rotate-[270deg] nx-origin-center nx-transition-transform nx-rotate-90"
+            />
+          </>
+        )
+      }}
+      options={options.map(o => ({
+        key: o.route,
+        name: o.title
+      }))}
+    />
+  )
+}

packages/nextra-theme-docs/src/utils/normalize-pages.ts

@@ -42,6 +42,7 @@ export interface PageItem extends MdxFile {
   display?: Display
   withIndexPage?: boolean
   isUnderCurrentDocsTree?: boolean
+  versioned?: true
 }
 
 export interface MenuItem extends MdxFile {