[nextra/nextra-theme-docs]: support both `experimental.newNextLinkBeh…

…avior` - `true` and `false` (#519) * [nextra/nextra-theme-docs]: support `experimental.newNextLinkBehavior` * fix typecheck
shuding · Aug 2, 2022 · 96ed5c2 · 96ed5c2
1 parent 3fa790c
commit 96ed5c2
Show file tree

Hide file tree

Showing 39 changed files with 700 additions and 281 deletions.
diff --git a/.changeset/honest-donkeys-end.md b/.changeset/honest-donkeys-end.md
@@ -0,0 +1,6 @@
+---
+'nextra': patch
+'nextra-theme-docs': patch
+---
+
+[nextra/nextra-theme-docs]: support both `experimental.newNextLinkBehavior` - `true` and `false`
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,24 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  reportUnusedDisableDirectives: true,
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 'latest'
+  },
+  overrides: [
+    {
+      // TODO: enable for `nextra-theme-blog` also
+      files: 'packages/nextra-theme-docs/**/*.{js,jsx,mjs,cjs,ts,tsx,mts,cts}',
+      rules: {
+        'no-restricted-imports': [
+          'error',
+          {
+            name: 'next/link',
+            message: 'Use local <Anchor /> instead'
+          }
+        ]
+      }
+    }
+  ]
+}
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -47,6 +47,9 @@ jobs:
       - name: Test
         run: pnpm test
 
+      - name: Lint ESLint
+        run: pnpm lint
+
       - name: Clean
         run: pnpm clean
 

diff --git a/examples/swr-site/next.config.js b/examples/swr-site/next.config.js
@@ -62,4 +62,7 @@ module.exports = withNextra({
     ];
   },
   reactStrictMode: true,
+  experimental: {
+    newNextLinkBehavior: true,
+  },
 });
diff --git a/examples/swr-site/pages/blog.en-US.mdx b/examples/swr-site/pages/blog.en-US.mdx
@@ -7,18 +7,12 @@ searchable: false
 import { getPagesUnderRoute } from 'nextra/context'
 import Link from 'next/link'
 
-{getPagesUnderRoute('/blog').map(page => {
-// Alias `<a>` to avoid it being replaced by MDX components.
-const A = 'a'
-return <div>
-
-<Link href={page.route}>
-<A style={{
-        color: '#000',
-      }}>{page.meta.title || page.frontMatter?.title || page.name}</A>
-</Link>
-<p>{page.frontMatter?.description}</p>
-<p>{page.date}</p>
-
+{getPagesUnderRoute('/blog').map(page => (
+  <div>
+    <Link href={page.route} className="text-black dark:text-gray-100 hover:!no-underline text-2xl">
+      {page.meta.title || page.frontMatter?.title || page.name}
+    </Link>
+    <p>{page.frontMatter?.description}</p>
+    <p>{page.date}</p>
   </div>
-})}
+))}
diff --git a/examples/swr-site/pages/docs/data-fetching.en-US.mdx b/examples/swr-site/pages/docs/data-fetching.en-US.mdx
@@ -1,5 +1,4 @@
 import Callout from 'nextra-theme-docs/callout'
-import Link from 'next/link'
 
 # Data Fetching
 
@@ -13,7 +12,7 @@ The returned value will be passed as `data`, and if it throws, it will be caught
 
 <Callout emoji="💡">
   Note that <code>fetcher</code> can be omitted from the parameters if it's{' '}
-  <Link href="/docs/global-configuration"><a href="/docs/global-configuration">provided globally</a></Link>.
+  [provided globally](/docs/global-configuration).
 </Callout>
 
 ## Fetch

diff --git a/examples/swr-site/pages/docs/data-fetching.es-ES.mdx b/examples/swr-site/pages/docs/data-fetching.es-ES.mdx
@@ -1,5 +1,4 @@
 import Callout from 'nextra-theme-docs/callout'
-import Link from 'next/link'
 
 # Obtención De Datos
 
@@ -13,8 +12,8 @@ y devuelve los datos.
 El valor devuelto será pasado como `data`, y si lanza, será capturado como `error`.
 
 <Callout emoji="💡">
-  Tenga en cuenta que el <code>fetcher</code> puede ser omitido de los parámetros si se 
-  <Link href="/docs/global-configuration"><a href="/docs/global-configuration">proporciona globalmente</a></Link>.
+  Tenga en cuenta que el <code>fetcher</code> puede ser omitido de los parámetros si se
+  [proporciona globalmente](/docs/global-configuration).
 </Callout>
 
 ## Fetch

diff --git a/examples/swr-site/pages/docs/data-fetching.ja.mdx b/examples/swr-site/pages/docs/data-fetching.ja.mdx
@@ -1,5 +1,4 @@
 import Callout from 'nextra-theme-docs/callout'
-import Link from 'next/link'
 
 # データフェッチ
 
@@ -13,7 +12,7 @@ const { data, error } = useSWR(key, fetcher)
 
 <Callout emoji="💡">
   <code>fetcher</code> が{' '}
-  <Link href="/docs/global-configuration"><a href="/docs/global-configuration">グローバルで提供されている</a></Link>{' '}
+  [グローバルで提供されている](/docs/global-configuration){' '}
   場合は、パラメーターから省略できることに注意してください。
 </Callout>
 

diff --git a/examples/swr-site/pages/docs/data-fetching.ko.mdx b/examples/swr-site/pages/docs/data-fetching.ko.mdx
@@ -1,5 +1,4 @@
 import Callout from 'nextra-theme-docs/callout'
-import Link from 'next/link'
 
 # 데이터 가져오기
 
@@ -12,7 +11,7 @@ const { data, error } = useSWR(key, fetcher)
 반환된 값은 `data`로 전달되며, 만약 throws라면 `error`로 잡힙니다.
 
 <Callout emoji="💡">
-  <code>fetcher</code>가 <Link href="/docs/global-configuration"><a href="/docs/global-configuration">전역으로 제공</a></Link>된다면 
+  <code>fetcher</code>가 [전역으로 제공](/docs/global-configuration)된다면
   파라미터에서 생략할 수 있습니다.
 </Callout>
 

diff --git a/examples/swr-site/pages/docs/data-fetching.ru.mdx b/examples/swr-site/pages/docs/data-fetching.ru.mdx
@@ -1,5 +1,4 @@
 import Callout from 'nextra-theme-docs/callout'
-import Link from 'next/link'
 
 # Выборка данных
 
@@ -13,7 +12,7 @@ const { data, error } = useSWR(key, fetcher)
 
 <Callout emoji="💡">
   Обратите внимание, что <code>fetcher</code> можно не указывать в параметрах, если он{' '}
-  <Link href="/docs/global-configuration"><a href="/docs/global-configuration">предоставляется глобально</a></Link>.
+  [предоставляется глобально](/docs/global-configuration).
 </Callout>
 
 ## Выборка (Fetch)

diff --git a/examples/swr-site/pages/docs/data-fetching.zh-CN.mdx b/examples/swr-site/pages/docs/data-fetching.zh-CN.mdx
@@ -1,5 +1,4 @@
 import Callout from 'nextra-theme-docs/callout'
-import Link from 'next/link'
 
 # 数据请求
 
@@ -12,7 +11,7 @@ const { data, error } = useSWR(key, fetcher)
 返回值将作为 `data` 传递，如果抛出错误，将作为 `error` 被捕获。
 
 <Callout emoji="💡">
-  注意：如果 <code>fetcher</code> 是<Link href="/docs/global-configuration"><a href="/docs/global-configuration">全局配置</a></Link>提供的，可以从参数中忽略。
+  注意：如果 <code>fetcher</code> 是[全局配置](/docs/global-configuration)提供的，可以从参数中忽略。
 </Callout>
 
 ## Fetch

diff --git a/examples/swr-site/pages/docs/getting-started.en-US.mdx b/examples/swr-site/pages/docs/getting-started.en-US.mdx
@@ -1,5 +1,4 @@
 import Callout from 'nextra-theme-docs/callout'
-import Link from 'next/link'
 
 # Getting Started
 
@@ -26,8 +25,8 @@ const fetcher = (...args) => fetch(...args).then(res => res.json())
 ```
 
 <Callout emoji="💡">
-  If you want to use GraphQL API or libs like Axios, you can create your own fetcher function. 
-  Check <Link href="/docs/data-fetching"><a href="/docs/data-fetching">here</a></Link> for more examples.
+  If you want to use GraphQL API or libs like Axios, you can create your own fetcher function.
+  Check [here](/docs/data-fetching) for more examples.
 </Callout>
 
 Then you can import `useSWR` and start using it inside any function components:

diff --git a/examples/swr-site/pages/docs/getting-started.es-ES.mdx b/examples/swr-site/pages/docs/getting-started.es-ES.mdx
@@ -1,5 +1,4 @@
 import Callout from 'nextra-theme-docs/callout'
-import Link from 'next/link'
 
 # Comienza
 
@@ -28,7 +27,7 @@ const fetcher = (...args) => fetch(...args).then(res => res.json())
 
 <Callout emoji="💡">
     Si tu quieres usar API GraphQL o librerías como Axios, puedes crear tu propia función fetcher. Consulta
-    <Link href="/docs/data-fetching"><a href="/docs/data-fetching">aqui</a></Link> para ver más ejemplos.
+    [aqui](/docs/data-fetching) para ver más ejemplos.
 </Callout>
 
 Luego puede importar `useSWR` y empezar a usarlo dentro de cualquier componente de la función:

diff --git a/examples/swr-site/pages/docs/getting-started.ja.mdx b/examples/swr-site/pages/docs/getting-started.ja.mdx
@@ -1,5 +1,4 @@
 import Callout from 'nextra-theme-docs/callout'
-import Link from 'next/link'
 
 # はじめに
 
@@ -27,7 +26,7 @@ const fetcher = (...args) => fetch(...args).then(res => res.json())
 
 <Callout emoji="💡">
   もし GraphQL API または Axios のようなライブラリを使いたい場合は、独自のフェッチャー関数を作ることができます。
-  その他の例は<Link href="/docs/data-fetching"><a href="/docs/data-fetching">こちら</a></Link>をご覧ください。  
+  その他の例は[こちら](/docs/data-fetching)をご覧ください。
 </Callout>
 
 そして、 `useSWR` をインポートして、任意の関数コンポーネント内で使用することができます：

diff --git a/examples/swr-site/pages/docs/getting-started.ko.mdx b/examples/swr-site/pages/docs/getting-started.ko.mdx
@@ -1,5 +1,4 @@
 import Callout from 'nextra-theme-docs/callout'
-import Link from 'next/link'
 
 # 시작하기
 
@@ -26,8 +25,8 @@ const fetcher = (...args) => fetch(...args).then(res => res.json())
 ```
 
 <Callout emoji="💡">
-  GraphQL API 또는 Axios와 같은 라이브러리를 사용하려면 여러분만의 fetcher 함수를 생성하면 됩니다. 
-  <Link href="/docs/data-fetching"><a href="/docs/data-fetching">여기</a></Link>에서 더 많은 예시를 확인하세요.
+  GraphQL API 또는 Axios와 같은 라이브러리를 사용하려면 여러분만의 fetcher 함수를 생성하면 됩니다.
+  [여기](/docs/data-fetching)에서 더 많은 예시를 확인하세요.
 </Callout>
 
 그 다음, `useSWR`을 임포트하고 함수 컴포넌트 내에서 사용하여 시작하면 됩니다.

diff --git a/examples/swr-site/pages/docs/getting-started.ru.mdx b/examples/swr-site/pages/docs/getting-started.ru.mdx
@@ -1,5 +1,4 @@
 import Callout from 'nextra-theme-docs/callout'
-import Link from 'next/link'
 
 # Начало работы
 
@@ -27,9 +26,9 @@ const fetcher = (...args) => fetch(...args).then(res => res.json())
 ```
 
 <Callout emoji="💡">
-  Если вы хотите использовать GraphQL API или библиотеки, такие как Axios, вы можете создать свою 
+  Если вы хотите использовать GraphQL API или библиотеки, такие как Axios, вы можете создать свою
   собственную fetcher-функцию.
-  Смотрите примеры <Link href="/docs/data-fetching"><a href="/docs/data-fetching">здесь</a></Link>.
+  Смотрите примеры [здесь](/docs/data-fetching).
 </Callout>
 
 Затем можете импортировать `useSWR` и использовать его внутри функциональных компонентов:

diff --git a/examples/swr-site/pages/docs/revalidation.en-US.mdx b/examples/swr-site/pages/docs/revalidation.en-US.mdx
@@ -1,12 +1,11 @@
 import Video from 'components/video'
 import Callout from 'nextra-theme-docs/callout'
 import Bleed from 'nextra-theme-docs/bleed'
-import Link from 'next/link'
 
 # Automatic Revalidation
 
 <Callout>
-  If you want to manually revalidate the data, check <Link href="/docs/mutation"><a href="/docs/mutation">mutation</a></Link>.
+  If you want to manually revalidate the data, check [mutation](/docs/mutation).
 </Callout>
 
 ## Revalidate on Focus

diff --git a/examples/swr-site/pages/docs/revalidation.es-ES.mdx b/examples/swr-site/pages/docs/revalidation.es-ES.mdx
@@ -1,12 +1,11 @@
 import Video from 'components/video'
 import Callout from 'nextra-theme-docs/callout'
 import Bleed from 'nextra-theme-docs/bleed'
-import Link from 'next/link'
 
 # Revalidación Automática
 
 <Callout>
-  Si quiere revalidar manualmente los datos, compruebe <Link href="/docs/mutation"><a href="/docs/mutation">mutation</a></Link>.
+  Si quiere revalidar manualmente los datos, compruebe [mutation](/docs/mutation).
 </Callout>
 
 ## Revalidar on focus

diff --git a/examples/swr-site/pages/docs/revalidation.ja.mdx b/examples/swr-site/pages/docs/revalidation.ja.mdx
@@ -1,12 +1,11 @@
 import Video from 'components/video'
 import Callout from 'nextra-theme-docs/callout'
 import Bleed from 'nextra-theme-docs/bleed'
-import Link from 'next/link'
 
 # 自動再検証
 
 <Callout>
-  データを手動で再検証する場合は、<Link href="/docs/mutation"><a href="/docs/mutation">ミューテーション</a></Link>を確認してください。
+  データを手動で再検証する場合は、[ミューテーション](/docs/mutation)を確認してください。
 </Callout>
 
 ## フォーカス時の再検証

diff --git a/examples/swr-site/pages/docs/revalidation.ko.mdx b/examples/swr-site/pages/docs/revalidation.ko.mdx
@@ -1,12 +1,11 @@
 import Video from 'components/video'
 import Callout from 'nextra-theme-docs/callout'
 import Bleed from 'nextra-theme-docs/bleed'
-import Link from 'next/link'
 
 # 자동 갱신
 
 <Callout>
-  수동으로 데이터를 갱신하려면 <Link href="/docs/mutation"><a href="/docs/mutation">뮤테이션</a></Link>을 확인하세요.
+  수동으로 데이터를 갱신하려면 [뮤테이션](/docs/mutation)을 확인하세요.
 </Callout>
 
 ## 포커스 시에 갱신하기

diff --git a/examples/swr-site/pages/docs/revalidation.ru.mdx b/examples/swr-site/pages/docs/revalidation.ru.mdx
@@ -1,12 +1,11 @@
 import Video from 'components/video'
 import Callout from 'nextra-theme-docs/callout'
 import Bleed from 'nextra-theme-docs/bleed'
-import Link from 'next/link'
 
 # Автоматическая ревалидация
 
 <Callout>
-  Вы можете ревалидировать данные вручную, смотрите <Link href="/docs/mutation"><a href="/docs/mutation">мутацию</a></Link>.
+  Вы можете ревалидировать данные вручную, смотрите [мутацию](/docs/mutation).
 </Callout>
 
 ## Ревалидация при фокусировке

diff --git a/examples/swr-site/pages/docs/revalidation.zh-CN.mdx b/examples/swr-site/pages/docs/revalidation.zh-CN.mdx
@@ -1,12 +1,11 @@
 import Video from 'components/video'
 import Callout from 'nextra-theme-docs/callout'
 import Bleed from 'nextra-theme-docs/bleed'
-import Link from 'next/link'
 
 # 自动重新请求
 
 <Callout>
-  如果你想手动重新请求数据，请查看 <Link href="/docs/mutation"><a href="/docs/mutation">mutation</a></Link>。
+  如果你想手动重新请求数据，请查看 [mutation](/docs/mutation)。
 </Callout>
 
 ## 聚焦时重新请求

diff --git a/examples/swr-site/tailwind.config.js b/examples/swr-site/tailwind.config.js
@@ -1,10 +1,8 @@
 module.exports = {
-  mode: "jit",
+  darkMode: "class",
   content: [
     "./components/**/*.js",
-    "./pages/**/*.md",
-    "./pages/**/*.mdx",
+    "./pages/**/*.{md,mdx}",
     "./theme.config.js",
-    "./styles.css",
   ],
 };
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
     "dev": "turbo run dev",
     "build": "turbo run build:tailwind build --filter=./packages/*",
     "types:check": "turbo run types:check",
+    "lint": "eslint --ignore-path .gitignore .",
     "dev:core": "turbo run dev --filter=nextra...",
     "dev:theme-blog": "turbo run dev --filter=blog...",
     "dev:theme-docs": "turbo run dev --filter=swr-site...",
@@ -18,6 +19,8 @@
     "format": "turbo run format"
   },
   "devDependencies": {
+    "@typescript-eslint/parser": "^5.31.0",
+    "eslint": "^8.20.0",
     "@changesets/cli": "^2.24.1",
     "@edge-runtime/vm": "1.1.0-beta.23",
     "postcss-import": "^14.1.0",