Upgrade to Nextra alpha (#207)

* adjust styles

* use nextra alpha

* refactor highlights

* upgrade nextra

* update 404 links

Author: shuding

.gitignore

@@ -7,3 +7,5 @@ yalc.lock
 
 public/*.st
 public/*.toml
+public/.nextra
+.vercel

next.config.js

@@ -2,6 +2,7 @@ const withNextra = require("nextra")({
   theme: "nextra-theme-docs",
   themeConfig: "./theme.config.js",
   unstable_stork: false,
+  unstable_contentDump: true,
   unstable_staticImage: true,
 });
 

package.json

@@ -5,21 +5,22 @@
   "main": "index.js",
   "scripts": {
     "dev": "next",
+    "debug": "NODE_OPTIONS='--inspect' next",
     "start": "next start",
-    "build": "STORK_PATH=$(pwd)/bin/stork.bin next build"
+    "build": "next build"
   },
   "author": "Shu Ding",
   "license": "Apache-2.0",
   "dependencies": {
-    "@reach/skip-nav": "^0.10.5",
+    "@reach/skip-nav": "^0.16.0",
     "focus-visible": "^5.1.0",
     "intersection-observer": "^0.10.0",
     "markdown-to-jsx": "^6.11.4",
-    "next": "^12.0.5",
-    "nextra": "^2.0.0-beta.4",
-    "nextra-theme-docs": "^2.0.0-beta.4",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "next": "^12.0.7",
+    "nextra": "^2.0.0-alpha.11",
+    "nextra-theme-docs": "^2.0.0-alpha.11",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-intersection-observer": "^8.26.2"
   },
   "devDependencies": {

pages/_middleware.js

@@ -0,0 +1,2 @@
+import { locales } from "nextra/locales";
+export const middleware = locales;

pages/docs/getting-started.en-US.mdx

@@ -93,7 +93,7 @@ import { Welcome } from 'components/diagrams/welcome'
 
 Traditionally, we fetch data once using `useEffect` in the top level component, and pass it to child components via props (notice that we don't handle error state for now):
 
-```jsx highlight="7-11,17,18,27"
+```jsx {7-11,17,18,27}
 // page component
 
 function Page () {
@@ -141,7 +141,7 @@ components inside the page content can be dynamic, and the top level component m
 
 SWR solves the problem perfectly. With the `useUser` hook we just created, the code can be refactored to:
 
-```jsx highlight="20,26"
+```jsx {20,26}
 // page component
 
 function Page () {

pages/docs/getting-started.es-ES.mdx

@@ -101,7 +101,7 @@ import { Welcome } from 'components/diagrams/welcome'
 Tradicionalmente, obtenemos los datos una vez utilizando `useEffect` en el componente de nivel superiror, y pasarlo a los componentes hijos
 a través de props (fíjate que por ahora no manejamos el estado de error):
 
-```jsx highlight="7-11,17,18,27"
+```jsx {7-11,17,18,27}
 // componente de la página
 
 function Page() {
@@ -154,7 +154,7 @@ Los componentes dentro del contenido de la página pueden ser dinámicos, y comp
 
 SWR resuelve el problema perfectamente, Con el hook `useUser` que acabamos de crear, el código puede ser refactorizado a:
 
-```jsx highlight="20,26"
+```jsx {20,26}
 
 // componente de la página
 

pages/docs/getting-started.ja.mdx

@@ -92,7 +92,7 @@ import { Welcome } from 'components/diagrams/welcome'
 
 従来では、トップレベルのコンポーネントで `useEffect` を使用してデータを一度だけ取得し、 props を介して子コンポーネントに渡しています（現時点ではエラー状態を処理してないことに注意してください）:
 
-```jsx highlight="7-11,17,18,27"
+```jsx {7-11,17,18,27}
 // ページコンポーネント
 
 function Page () {
@@ -140,7 +140,7 @@ function Avatar ({ user }) {
 
 SWR はその問題を完璧に解決してくれます。 先ほど作成した `useUser` フックを使って、コードをリファクタリングしましょう：
 
-```jsx highlight="20,26"
+```jsx {20,26}
 // ページコンポーネント
 
 function Page () {

pages/docs/getting-started.ko.mdx

@@ -93,7 +93,7 @@ import { Welcome } from 'components/diagrams/welcome'
 
 전통적으로는 최상위 레벨 컴포넌트에서 `useEffect`를 사용해 데이터를 한 번 가져오고, 이를 props를 통해 자식 컴포넌트에 전달합니다(현재는 에러 상태를 처리하지 않습니다)
 
-```jsx highlight="7-11,17,18,27"
+```jsx {7-11,17,18,27}
 // 페이지 컴포넌트
 
 function Page () {
@@ -141,7 +141,7 @@ function Avatar ({ user }) {
 
 SWR은 이 문제를 완벽하게 해결합니다. 우리가 막 생성한 `useUser` hook을 사용해 다음과 같이 리팩토링할 수 있습니다.
 
-```jsx highlight="20,26"
+```jsx {20,26}
 // 페이지 컴포넌트
 
 function Page () {

pages/docs/getting-started.ru.mdx

@@ -98,7 +98,7 @@ import { Welcome } from 'components/diagrams/welcome'
 и передаем их дочерним компонентам через пропсы (обратите внимание, что мы пока не обрабатываем
 состояние ошибки):
 
-```jsx highlight="7-11,17,18,27"
+```jsx {7-11,17,18,27}
 // компонент страницы
 
 function Page () {
@@ -148,7 +148,7 @@ function Avatar ({ user }) {
 
 SWR отлично решает проблему. С помощью только что созданного хука `useUser` код можно реорганизовать так:
 
-```jsx highlight="20,26"
+```jsx {20,26}
 // компонент страницы
 
 function Page () {

pages/docs/getting-started.zh-CN.mdx

@@ -89,7 +89,7 @@ import { Welcome } from 'components/diagrams/welcome'
 
 传统上，我们在顶级组件中使用 `useEffect` 请求一次数据，然后通过 props 将其传递给子组件（注意，我们现在不处理错误状态）：
 
-```jsx highlight="7-11,17,18,27"
+```jsx {7-11,17,18,27}
 // 页面组件
 
 function Page() {
@@ -135,7 +135,7 @@ function Avatar({ user }) {
 
 SWR 完美地解决了这个问题。使用我们刚刚创建的 `useUser` hook，可以将代码重构为:
 
-```jsx highlight="20,26"
+```jsx {20,26}
 // 页面组件
 
 function Page() {

pages/docs/pagination.en-US.mdx

@@ -23,7 +23,7 @@ import { Pagination } from 'components/diagrams/pagination'
 ...which is a typical pagination UI. Let's see how it can be easily implemented with
 `useSWR`:
 
-```jsx highlight="5"
+```jsx {5}
 function App () {
   const [pageIndex, setPageIndex] = useState(0);
 
@@ -42,7 +42,7 @@ function App () {
 
 Furthermore, we can create an abstraction for this "page component":
 
-```jsx highlight="13"
+```jsx {13}
 function Page ({ index }) {
   const { data } = useSWR(`/api/data?page=${index}`, fetcher);
 
@@ -65,7 +65,7 @@ function App () {
 Because of SWR's cache, we get the benefit to preload the next page. We render the next page inside
 a hidden div, so SWR will trigger the data fetching of the next page. When the user navigates to the next page, the data is already there:
 
-```jsx highlight="6"
+```jsx {6}
 function App () {
   const [pageIndex, setPageIndex] = useState(0);
 
@@ -95,7 +95,7 @@ import { Infinite } from 'components/diagrams/infinite'
 To implement this, we need to make **dynamic number of requests** on this page. React Hooks have [a couple of rules](https://reactjs.org/docs/hooks-rules.html),
 so we **CANNOT** do something like this:
 
-```jsx highlight="5,6,7,8,9"
+```jsx {5,6,7,8,9}
 function App () {
   const [cnt, setCnt] = useState(1)
 
@@ -118,7 +118,7 @@ function App () {
 
 Instead, we can use the `<Page />` abstraction that we created to achieve it:
 
-```jsx highlight="5,6,7"
+```jsx {5,6,7}
 function App () {
   const [cnt, setCnt] = useState(1)
 
@@ -142,7 +142,7 @@ For example, we are still implementing the same "Load More" UI, but also need to
 about how many items are there in total. We can't use the `<Page />` solution anymore because
 the top level UI (`<App />`) needs the data inside each page:
 
-```jsx highlight="10"
+```jsx {10}
 function App () {
   const [cnt, setCnt] = useState(1)
 
@@ -226,7 +226,7 @@ GET /users?page=0&limit=10
 ]
 ```
 
-```jsx highlight="4,5,6,7,10"
+```jsx {4,5,6,7,10}
 // A function to get the SWR key of each page,
 // its return value will be accepted by `fetcher`.
 // If `null` is returned, the request of that page won't start.

pages/docs/pagination.es-ES.mdx

@@ -24,7 +24,7 @@ import { Pagination } from 'components/diagrams/pagination'
 ...que es un típico UI de paginación. Veamos cómo se puede implementar fácilmente con
 `useSWR`:
 
-```jsx highlight="5"
+```jsx {5}
 function App () {
   const [pageIndex, setPageIndex] = useState(0);
 
@@ -43,7 +43,7 @@ function App () {
 
 Además, podemos crear una abstracción para este "page component":
 
-```jsx highlight="13"
+```jsx {13}
 function Page ({ index }) {
   const { data } = useSWR(`/api/data?page=${index}`, fetcher);
 
@@ -67,7 +67,7 @@ Gracias a la caché de SWR, tenemos la ventaja de precargar la siguiente página
 La página siguiente se presenta dentro de un hidden div, por lo que SWR activará la obtención de datos
 de la página siguiente. Cuando el usuario navega a la siguiente página, los datos ya están allí:
 
-```jsx highlight="6"
+```jsx {6}
 function App () {
   const [pageIndex, setPageIndex] = useState(0);
 
@@ -97,7 +97,7 @@ import { Infinite } from 'components/diagrams/infinite'
 Para implementar esto, necesitamos hacer **número de peticiones dinámicas** en esta página. Los React Hooks tienen [un par de reglas](https://reactjs.org/docs/hooks-rules.html),
 por lo que **NO PODEMOS** hacer algo así:
 
-```jsx highlight="5,6,7,8,9"
+```jsx {5,6,7,8,9}
 function App () {
   const [cnt, setCnt] = useState(1)
 
@@ -120,7 +120,7 @@ function App () {
 
 En su lugar, podemos utilizar la abstracción `<Page />` que hemos creado para conseguirlo:
 
-```jsx highlight="5,6,7"
+```jsx {5,6,7}
 function App () {
   const [cnt, setCnt] = useState(1)
 
@@ -144,7 +144,7 @@ Por ejemplo, seguimos implementando la misma UI "Load More", pero también neces
 sobre cuántos item hay en total. No podemos utilizar la solución `<Page />` porque
 la UI de nivel superior (`<App />`) necesita los datos dentro de cada página:
 
-```jsx highlight="10"
+```jsx {10}
 function App () {
   const [cnt, setCnt] = useState(1)
 
@@ -228,7 +228,7 @@ GET /users?page=0&limit=10
 ]
 ```
 
-```jsx highlight="4,5,6,7,10"
+```jsx {4,5,6,7,10}
 // Una función para obtener la key de SWR de cada página,
 // su valor de retorno será aceptado por `fetcher`.
 // Si se devuelve `null`, la petición de esa página no se iniciará.

pages/docs/pagination.ja.mdx

@@ -23,7 +23,7 @@ import { Pagination } from 'components/diagrams/pagination'
 ...これは典型的なページネーション UI です。`useSWR` を使って簡単に実装する方法を
 みてみましょう：
 
-```jsx highlight="5"
+```jsx {5}
 function App () {
   const [pageIndex, setPageIndex] = useState(0);
 
@@ -42,7 +42,7 @@ function App () {
 
 さらに、この「ページコンポーネント」を抽象化できます：
 
-```jsx highlight="13"
+```jsx {13}
 function Page ({ index }) {
   const { data } = useSWR(`/api/data?page=${index}`, fetcher);
 
@@ -65,7 +65,7 @@ function App () {
 SWR のキャッシュがあるため、次のページを事前にロードできるという利点があります。次のページを非表示の div 内にレンダリングすると、
 SWR は次のページのデータフェッチを開始します。ユーザーが次のページに移動したときには、データはすでにそこにあります。
 
-```jsx highlight="6"
+```jsx {6}
 function App () {
   const [pageIndex, setPageIndex] = useState(0);
 
@@ -95,7 +95,7 @@ import { Infinite } from 'components/diagrams/infinite'
 実装するには、このページで**動的な多くのリクエスト**を行う必要があります。
 React フックには[いくつかのルール](https://reactjs.org/docs/hooks-rules.html)があるため、次のようなことは**できません**：
 
-```jsx highlight="5,6,7,8,9"
+```jsx {5,6,7,8,9}
 function App () {
   const [cnt, setCnt] = useState(1)
 
@@ -118,7 +118,7 @@ function App () {
 
 代わりに、抽象化して作成した `<Page />` を使うことができます：
 
-```jsx highlight="5,6,7"
+```jsx {5,6,7}
 function App () {
   const [cnt, setCnt] = useState(1)
 
@@ -142,7 +142,7 @@ function App () {
 表示する必要がでてきました。トップレベルの UI （`<App />`）が各ページ内のデータを必要とするため、
 `<Page />` を使ったソリューションは使えなくなってしまいました：
 
-```jsx highlight="10"
+```jsx {10}
 function App () {
   const [cnt, setCnt] = useState(1)
 
@@ -226,7 +226,7 @@ GET /users?page=0&limit=10
 ]
 ```
 
-```jsx highlight="4,5,6,7,10"
+```jsx {4,5,6,7,10}
 // 各ページの SWR キーを取得する関数であり、
 // その返り値は `fetcher` に渡されます。
 // `null` が返ってきた場合は、そのページのリクエストは開始されません。