feat(docs): upgrade nextra (wevm#1415)

* feat(docs): upgrade nextra * fix: lint errors
QEasyWeb3 · Dec 4, 2022 · 65b18e1 · 65b18e1
1 parent ad7a7b5
commit 65b18e1
Show file tree

Hide file tree

Showing 17 changed files with 479 additions and 461 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -72,7 +72,7 @@
       }
     }
   ],
-  "ignorePatterns": ["CHANGELOG.md", "build", "dist", "node_modules", "**/*.config.js"],
+  "ignorePatterns": ["CHANGELOG.md", "build", "dist", "node_modules", "**/*.config.js", "**/*.config.mjs"],
   "settings": {
     "import/parsers": {
       "@typescript-eslint/parser": [".ts", ".tsx", ".d.ts"]

diff --git a/docs/components/blog/BlogIndex.tsx b/docs/components/blog/BlogIndex.tsx
@@ -18,17 +18,18 @@ export function BlogIndex({ more = 'Read more' }) {
 
           <div className="">
             <h3 className="text-2xl font-bold mb-4">
-              <Link href={page.route}>
-                <a style={{ color: 'inherit', textDecoration: 'none' }}>
-                  {page.meta?.title || page.frontMatter?.title || page.name}
-                </a>
+              <Link
+                href={page.route}
+                style={{ color: 'inherit', textDecoration: 'none' }}
+              >
+                {page.meta?.title || page.frontMatter?.title || page.name}
               </Link>
             </h3>
 
             <p className="opacity-80 mb-3">
               {page.frontMatter?.description}{' '}
-              <Link href={page.route}>
-                <a className="nx-text-primary-500 underline">{more + ' →'}</a>
+              <Link href={page.route} className="nx-text-primary-500 underline">
+                {more + ' →'}
               </Link>
             </p>
 

diff --git a/docs/components/docs/Header.tsx b/docs/components/docs/Header.tsx
@@ -1,63 +1,43 @@
 import { useRouter } from 'next/router'
-// eslint-disable-next-line import/no-unresolved
-import { Callout } from 'nextra-theme-docs'
 
 import { LogoType } from '../core'
 
 const TITLE_WITH_TRANSLATIONS: Record<string, string> = {
   'en-US': 'React Hooks for Ethereum',
 }
 
-type Props = {
-  showGitcoinBanner?: boolean
-}
-
-export function Header({ showGitcoinBanner }: Props) {
+export function Header() {
   const { locale, defaultLocale = 'en-US' } = useRouter()
   const resolvedLocale = locale || defaultLocale
   const title = TITLE_WITH_TRANSLATIONS[resolvedLocale]
 
   return (
     <header className="mb-10 flex flex-col items-center">
-      {showGitcoinBanner && (
-        <div className="mb-4">
-          <Callout type="info">
-            wagmi is participating in{' '}
-            <a
-              target="_blank"
-              href="https://gitcoin.co/grants/4493/wagmi-react-hooks-library-for-ethereum"
-              rel="noopener noreferrer"
-            >
-              Gitcoin Grant Round 15
-            </a>{' '}
-            until September 22. Contributions are matched with{' '}
-            <a
-              href="https://finematics.com/quadratic-funding-explained"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              Quadratic Funding
-            </a>{' '}
-            (e.g. $1 turns into $27). If you find wagmi useful, please consider
-            supporting development{' '}
-            <a
-              target="_blank"
-              href="https://gitcoin.co/grants/4493/wagmi-react-hooks-library-for-ethereum"
-              rel="noopener noreferrer"
-            >
-              here
-            </a>
-            . Thank you 🙏
-          </Callout>
-        </div>
-      )}
-
       <div className="mt-8 w-auto h-12 md:h-14">
         <h1 className="sr-only">wagmi</h1>
-        <LogoType />
+        <span>
+          <LogoType />
+          <style jsx>{`
+            span {
+              padding: 0.5rem 0.5rem 0.5rem 0;
+              mask-image: linear-gradient(
+                60deg,
+                black 25%,
+                rgba(0, 0, 0, 0.2) 50%,
+                black 75%
+              );
+              mask-size: 400%;
+              mask-position: 0%;
+            }
+            span:hover {
+              mask-position: 100%;
+              transition: mask-position 1s ease, -webkit-mask-position 1s ease;
+            }
+          `}</style>
+        </span>
       </div>
 
-      <p className="text-center text-lg mb-6 mt-2 text-gray-500 md:!text-xl">
+      <p className="text-center text-lg mb-6 mt-3 text-gray-500 md:!text-xl">
         {title}
       </p>
 

diff --git a/docs/components/docs/ValidationComparisonTable.tsx b/docs/components/docs/ValidationComparisonTable.tsx
@@ -18,7 +18,7 @@ export function ValidationComparisonTable() {
               <video
                 id="lazy"
                 controls
-                src="/media/lazy-mint.mp4"
+                src="/assets/lazy-mint.mp4"
                 style={{ width: 300, paddingBottom: 8 }}
               />
               <label htmlFor="lazy" style={{ fontSize: '14px' }}>
@@ -31,7 +31,7 @@ export function ValidationComparisonTable() {
               <video
                 id="eager"
                 controls
-                src="/media/eager-mint.mp4"
+                src="/assets/eager-mint.mp4"
                 style={{ width: 300, paddingBottom: 8 }}
               />
               <label htmlFor="eager" style={{ fontSize: '14px' }}>

diff --git a/docs/middleware.ts b/docs/middleware.ts
@@ -11,6 +11,7 @@ const redirects: Record<string, string> = {
   '/docs/migrating-to-030': '/docs/migrating-to-03', // Tweeted wrong link: https://twitter.com/awkweb/status/1518607780332122116
   '/docs/migrating-to-03': '/docs/migration-guide',
   '/docs/provider': '/docs/WagmiConfig',
+  '/react/prepare-hooks/intro': '/react/prepare-hooks',
 }
 
 export function middleware(request: NextRequest) {
@@ -23,7 +24,7 @@ export function middleware(request: NextRequest) {
     return NextResponse.redirect(url)
   }
 
-  const skipMiddlewareRegex = /^\/favicon|media\/.+/
+  const skipMiddlewareRegex = /^\/assets|favicon\/.+/
   if (!skipMiddlewareRegex.test(request.nextUrl.pathname))
     return locales(request)
 }
diff --git a/docs/next.config.js → docs/next.config.mjs b/docs/next.config.js → docs/next.config.mjs
@@ -1,12 +1,14 @@
-const withNextra = require('nextra')({
+import nextra from 'nextra'
+import withPreconstruct from '@preconstruct/next'
+
+const withNextra = nextra({
+  defaultShowCopyCode: true,
+  flexsearch: {
+    codeblocks: false
+  },
   theme: 'nextra-theme-docs',
   themeConfig: './theme.config.tsx',
-  unstable_contentDump: true,
-  unstable_defaultShowCopyCode: true,
-  unstable_flexsearch: {
-    codeblocks: true,
-  },
-  unstable_staticImage: true,
+  staticImage: true,
 })
 
 /** @type {import('next').NextConfig} */
@@ -16,7 +18,7 @@ const config = {
     defaultLocale: 'en-US',
   },
   reactStrictMode: true,
-  redirects: () => {
+  redirects() {
     return [
       // Redirects for old docs
       {
@@ -65,15 +67,7 @@ const config = {
   },
 }
 
-if (process.env.NODE_ENV === 'development') {
-  // We don't use Preconstruct anymore, but the Next.js plugin works great for
-  // development with our custom set up in packages' `tsup.config.ts`.
-  // https://github.com/preconstruct/preconstruct/tree/main/packages/next
-  const withPreconstruct = require('@preconstruct/next')
-  module.exports = withPreconstruct(withNextra(config))
-} else {
-  const withBundleAnalyzer = require('@next/bundle-analyzer')({
-    enabled: process.env.ANALYZE === 'true',
-  })
-  module.exports = withBundleAnalyzer(withNextra(config))
-}
+// We don't use Preconstruct anymore, but the Next.js plugin works great for
+// development with our custom set up in packages' `tsup.config.ts`.
+// https://github.com/preconstruct/preconstruct/tree/main/packages/next
+export default process.env.NODE_ENV === 'development' ? withPreconstruct(withNextra(config)) : withNextra(config)
diff --git a/docs/package.json b/docs/package.json
@@ -9,31 +9,29 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@reach/skip-nav": "^0.16.0",
     "degen": "^0.0.49",
     "ethers": "^5.7.1",
     "fathom-client": "^3.5.0",
     "iron-session": "^6.1.3",
-    "next": "^12.2.0",
+    "next": "^13.0.5",
     "next-themes": "^0.2.0",
-    "nextra": "2.0.0-beta.41",
-    "nextra-theme-docs": "2.0.0-beta.41",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "nextra": "^2.0.0",
+    "nextra-theme-docs": "^2.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "siwe": "^1.1.6",
     "wagmi": "workspace:*"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "^12.1.6",
     "@preconstruct/next": "^4.0.0",
-    "@types/node": "^17.0.31",
+    "@types/node": "^18.11.9",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.3",
-    "autoprefixer": "^10.4.7",
+    "autoprefixer": "^10.4.13",
     "eslint": "^8.15.0",
     "eslint-config-next": "^12.1.6",
-    "postcss": "^8.4.13",
-    "tailwindcss": "^3.0.24",
+    "postcss": "^8.4.19",
+    "tailwindcss": "^3.2.4",
     "typescript": "^4.9.3"
   }
 }
diff --git a/docs/pages/_app.tsx b/docs/pages/_app.tsx
@@ -4,7 +4,7 @@ import NextScript from 'next/script'
 import * as React from 'react'
 
 import 'nextra-theme-docs/style.css'
-import '../styles/globals.css'
+import '../style.css'
 
 // https://github.com/import-js/eslint-plugin-import/issues/1868
 // eslint-disable-next-line import/no-unresolved

diff --git a/docs/pages/_document.tsx b/docs/pages/_document.tsx
diff --git a/...pages/react/prepare-hooks/intro.en-US.mdx → docs/pages/react/prepare-hooks.en-US.mdx b/...pages/react/prepare-hooks/intro.en-US.mdx → docs/pages/react/prepare-hooks.en-US.mdx
@@ -3,7 +3,7 @@ title: 'Prepare Hooks'
 description: 'What are Prepare Hooks?'
 ---
 
-import { ValidationComparisonTable } from '../../../components/docs/ValidationComparisonTable'
+import { ValidationComparisonTable } from '../../components/docs/ValidationComparisonTable'
 
 # Prepare Hooks
 
@@ -32,7 +32,7 @@ The video below shows the difference between a slow TTOW and a fast TTOW.
 
 <video
   controls
-  src="/media/ttow-comparison.mp4"
+  src="/assets/ttow-comparison.mp4"
   width="100%"
   style={{ marginTop: 16 }}
 />

diff --git a/docs/pages/react/prepare-hooks/_meta.en-US.json b/docs/pages/react/prepare-hooks/_meta.en-US.json
@@ -1,5 +1,4 @@
 {
-  "intro": "Intro",
   "usePrepareContractWrite": "usePrepareContractWrite",
   "usePrepareSendTransaction": "usePrepareSendTransaction"
 }
diff --git a/docs/public/media/eager-mint.mp4 → docs/public/assets/eager-mint.mp4 b/docs/public/media/eager-mint.mp4 → docs/public/assets/eager-mint.mp4
diff --git a/docs/public/media/lazy-mint.mp4 → docs/public/assets/lazy-mint.mp4 b/docs/public/media/lazy-mint.mp4 → docs/public/assets/lazy-mint.mp4
diff --git a/docs/public/media/ttow-comparison.mp4 → docs/public/assets/ttow-comparison.mp4 b/docs/public/media/ttow-comparison.mp4 → docs/public/assets/ttow-comparison.mp4
diff --git a/docs/styles/globals.css → docs/style.css b/docs/styles/globals.css → docs/style.css
@@ -1,7 +1,9 @@
+@tailwind base;
+@tailwind components;
 @tailwind utilities;
 
-html {
-  font-feature-settings: 'rlig' 1, 'calt' 1, 'ss01' 1, 'ss06' 1 !important;
+body {
+  font-feature-settings: 'rlig' 1, 'calt' 1;
 }
 
 [data-reach-skip-link] {
@@ -33,6 +35,10 @@ sup a {
   text-decoration: none;
 }
 
+code.text-\[\.9em\] {
+  font-size: 14px;
+}
+
 .footnotes {
   @apply text-sm;
 }