docs: upgrade nextra to v2 (#220)

* docs: upgrade nextra to v2

* docs: node14 or higher

Co-authored-by: Kiko Beats <josefrancisco.verdu@gmail.com>

docs/components/features.js

@@ -31,7 +31,7 @@ const features = [
     icon: ArrowsExpandIcon,
   },
   {
-    name: 'Node.js 12 or higher',
+    name: 'Node.js 14 or higher',
     description: `Turborepo doesn't interfere with your runtime code or touch your sourcemaps. It does what it does and then gets out of your way.`,
     icon: ChipIcon,
   },

docs/components/tabs.js

@@ -1,9 +1,9 @@
-import * as NextraTabs from 'nextra-theme-docs/tabs'
+import { Tabs as NextraTabs, Tab } from 'nextra-theme-docs'
 import useSWR from 'swr'
 
-export const Tab = NextraTabs.Tab
+export { Tab }
 
-const get = key => {
+const get = (key) => {
   try {
     return JSON.parse(localStorage.getItem(key))
   } catch (e) {
@@ -14,14 +14,14 @@ const get = key => {
 const set = (key, value) =>
   localStorage.setItem(key, JSON.stringify(value)) && value
 
-export function Tabs ({ storageKey = 'tab-index', items, ...props }) {
+export function Tabs({ storageKey = 'tab-index', items, ...props }) {
   // Use SWR so all tabs with the same key can sync their states.
   const { data, mutate } = useSWR(storageKey, get)
   const selectedIndex = items.indexOf(data)
 
   return (
-    <NextraTabs.Tabs
-      onChange={index => mutate(set(storageKey, items[index]), false)}
+    <NextraTabs
+      onChange={(index) => mutate(set(storageKey, items[index]), false)}
       selectedIndex={selectedIndex === -1 ? undefined : selectedIndex}
       items={items}
       {...props}

docs/next.config.js

@@ -1,8 +1,11 @@
 const withNextra = require('nextra')({
   theme: 'nextra-theme-docs',
   themeConfig: './theme.config.js',
-  unstable_flexsearch: true,
+  flexsearch: {
+    codeblocks: false,
+  },
   unstable_staticImage: true,
+  defaultShowCopyCode: true,
 })
 
 module.exports = withNextra({

docs/package.json

@@ -14,17 +14,16 @@
   "license": "MPL-2.0",
   "dependencies": {
     "@heroicons/react": "~1.0.6",
-    "next": "~12.2.5",
+    "next": "~13.0.6",
     "next-themes": "0.2.1",
-    "nextra": "2.0.0-alpha.56",
-    "nextra-theme-docs": "2.0.0-alpha.59",
+    "nextra": "2.0.1",
+    "nextra-theme-docs": "2.0.1",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "swr": "1.3.0"
   },
   "devDependencies": {
-    "@mdx-js/react": "2.1.3",
-    "autoprefixer": "~10.4.8",
+    "autoprefixer": "~10.4.13",
     "postcss": "~8.4.16",
     "tailwindcss": "~3.1.8"
   }

docs/theme.config.js

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { useRouter } from 'next/router'
 import { useTheme } from 'next-themes'
-
+import { useConfig } from 'nextra-theme-docs'
 const useDark = () => {
   const { resolvedTheme } = useTheme()
   const [isDark, setIsDark] = useState(false)
@@ -11,19 +11,26 @@ const useDark = () => {
   }, [resolvedTheme])
   return isDark
 }
-
+/** @type import('nextra-theme-docs').DocsThemeConfig */
 const theme = {
-  github: 'https://github.com/vercel/edge-runtime',
-  projectLink: 'https://github.com/vercel/edge-runtime',
-  docsRepositoryBase:
-    'https://github.com/vercel/edge-runtime/blob/main/docs/pages',
-  titleSuffix: ' | Edge Runtime',
-  search: true,
-  unstable_flexsearch: true,
-  unstable_staticImage: true,
-  floatTOC: true,
-  font: false,
-  feedbackLink: 'Question? Give us feedback →',
+  project: {
+    link: 'https://github.com/vercel/edge-runtime',
+  },
+  editLink: {
+    text: 'Edit this page on GitHub',
+  },
+  feedback: {
+    content: 'Question? Give us feedback →',
+  },
+  toc: {
+    float: true,
+  },
+  docsRepositoryBase: 'https://github.com/vercel/edge-runtime/blob/main/docs',
+  useNextSeoProps() {
+    return {
+      titleTemplate: '%s | Edge Runtime',
+    }
+  },
   logo: function Logo() {
     const isDark = useDark()
     return (
@@ -37,10 +44,10 @@ const theme = {
       </>
     )
   },
-  head: function Head({ title, meta }) {
+  head: function Head() {
     const router = useRouter()
     const isDark = useDark()
-
+    const { frontMatter, title } = useConfig()
     return (
       <>
         <meta name='viewport' content='width=device-width, initial-scale=1.0' />
@@ -52,23 +59,20 @@ const theme = {
         <meta name='twitter:card' content='summary_large_image' />
         <meta property='og:type' content='website' />
         <meta name='og:title' content={title} />
-        <meta name='og:description' content={meta.description} />
+        <meta name='og:description' content={frontMatter.description} />
         <meta
           property='og:url'
           content={`https://edge-runtime.vercel.app${router.asPath}`}
         />
         <meta
           property='og:image'
           content={`https://edge-runtime.vercel.app${
-            meta.ogImage ?? '/og-image.png'
+            frontMatter.ogImage ?? '/og-image.png'
           }`}
         />
         <meta property='og:site_name' content='Edge Runtime' />
       </>
     )
   },
-  footerEditLink: () => {
-    return 'Edit this page on GitHub'
-  },
 }
 export default theme