[v3] use shikiji-compat (#2295)

.changeset/ten-zebras-happen.md

@@ -0,0 +1,9 @@
+---
+'nextra-theme-blog': major
+'nextra-theme-docs': major
+'nextra': major
+---
+
+- use `shikiji` instead of `shiki`
+
+- rename `useSSG` to `useData`

.eslintrc.cjs

@@ -48,6 +48,13 @@ module.exports = {
         'unicorn/prefer-string-replace-all': 'error',
         '@typescript-eslint/prefer-for-of': 'error',
         quotes: ['error', 'single', { avoidEscape: true }], // Matches Prettier, but also replaces backticks
+        '@typescript-eslint/no-unused-vars': [
+          'error',
+          {
+            argsIgnorePattern: '^_',
+            varsIgnorePattern: '^_' // allow underscores in destructuring
+          }
+        ],
         // todo: enable
         '@typescript-eslint/no-explicit-any': 'off',
         '@typescript-eslint/no-non-null-assertion': 'off',
@@ -165,7 +172,7 @@ module.exports = {
         tailwindcss: {
           config: 'packages/nextra-theme-docs/tailwind.config.js',
           callees: ['cn'],
-          whitelist: ['nextra-code-block', 'nextra-filetree']
+          whitelist: ['nextra-code', 'nextra-filetree']
         }
       },
       rules: {

.prettierignore

@@ -6,3 +6,5 @@ docs/pages/docs/guide/advanced/latex.mdx
 examples/swr-site/nextra-remote-filepaths/*.json
 examples/swr-site/pages/en/remote/graphql-eslint/_meta.ts
 examples/swr-site/pages/en/remote/graphql-yoga/_meta.ts
+
+docs/pages/docs/guide/built-ins/cards.mdx

docs/pages/docs/guide/built-ins/cards.mdx

@@ -1,10 +1,10 @@
 import { CardsIcon, OneIcon, WarningIcon } from '@components/icons'
 import { Cards } from 'nextra/components'
+import { RemoteContent } from 'nextra/data'
+import { buildDynamicMDX } from 'nextra/remote'
 
-# Cards Component
-
-## Example
-
+export async function getStaticProps() {
+  const mdx = `
 <Cards>
   <Cards.Card
     icon={<WarningIcon />}
@@ -21,18 +21,21 @@ import { Cards } from 'nextra/components'
     title="Steps"
     href="/docs/guide/built-ins/steps"
   />
-</Cards>
+</Cards>`
+  const props = await buildDynamicMDX(`
+# Cards Component
+
+## Example
+${mdx}
 
 ## Usage
 
-{/* prettier-ignore */}
-```mdx filename="Markdown"
+\`\`\`mdx filename="Markdown"
 import { Cards } from 'nextra/components'
 import { CardsIcon, OneIcon, WarningIcon } from '../../icons'
+${mdx}
+\`\`\``)
+  return { props }
+}
 
-<Cards>
-  <Cards.Card icon={<WarningIcon />} title="Callout" href="/docs/guide/built-ins/callout" />
-  <Cards.Card icon={<CardsIcon />} title="Tabs" href="/docs/guide/built-ins/tabs" />
-  <Cards.Card icon={<OneIcon />} title="Steps" href="/docs/guide/built-ins/steps" />
-</Cards>
-```
+<RemoteContent components={{ Cards, CardsIcon, OneIcon, WarningIcon }} />

docs/pages/docs/guide/syntax-highlighting.mdx

@@ -7,15 +7,15 @@ Nextra uses [Shiki](https://shiki.matsu.io) to do syntax highlighting at build
 time. It's very reliable and performant. For example, adding this in your
 Markdown file:
 
-````md filename="Markdown"
+````md copy=false filename="Markdown"
 ```js
 console.log('hello, world')
 ```
 ````
 
 Results in:
 
-```js
+```js copy=false
 console.log('hello, world')
 ```
 
@@ -26,7 +26,7 @@ console.log('hello, world')
 Inlined syntax highlighting like `let x = 1{:jsx}` is also supported via the
 `{:}` syntax:
 
-```md filename="Markdown"
+```md copy=false filename="Markdown"
 Inlined syntax highlighting is also supported `let x = 1{:jsx}` via:
 ```
 
@@ -35,7 +35,7 @@ Inlined syntax highlighting is also supported `let x = 1{:jsx}` via:
 You can highlight specific lines of code by adding a `{}` attribute to the code
 block:
 
-````md filename="Markdown"
+````md copy=false filename="Markdown"
 ```js {1,4-5}
 import { useState } from 'react'
 
@@ -48,7 +48,7 @@ function Counter() {
 
 Result:
 
-```js {1,4-5}
+```js copy=false {1,4-5}
 import { useState } from 'react'
 
 function Counter() {
@@ -62,7 +62,7 @@ function Counter() {
 You can highlight specific substrings of code by adding a `//` attribute to the
 code block:
 
-````md filename="Markdown"
+````md copy=false filename="Markdown"
 ```js /useState/
 import { useState } from 'react'
 
@@ -73,7 +73,7 @@ function Counter() {
 ```
 ````
 
-```js /useState/
+```js copy=false /useState/
 import { useState } from 'react'
 
 function Counter() {
@@ -90,7 +90,7 @@ number it: `/str/1`, or multiple: `/str/1-3`, `/str/1,3`.
 By adding a `copy` attribute, a copy button will be added to the code block when
 the user hovers over it:
 
-````md filename="Markdown"
+````md copy=false filename="Markdown"
 ```js copy
 console.log('hello, world')
 ```
@@ -111,7 +111,7 @@ you can disable it via the `copy=false` attribute.
 You can add line numbers to your code blocks by adding a `showLineNumbers`
 attribute:
 
-````md filename="Markdown"
+````md copy=false filename="Markdown"
 ```js showLineNumbers
 import { useState } from 'react'
 
@@ -124,7 +124,7 @@ function Counter() {
 
 Renders:
 
-```js showLineNumbers
+```js copy=false showLineNumbers
 import { useState } from 'react'
 
 function Counter() {
@@ -138,23 +138,23 @@ function Counter() {
 You can add a filename or a title to your code blocks by adding a `filename`
 attribute:
 
-````md filename="Markdown"
+````md copy=false filename="Markdown"
 ```js filename="example.js"
 console.log('hello, world')
 ```
 ````
 
 Renders:
 
-```js filename="example.js"
+```js copy=false filename="example.js"
 console.log('hello, world')
 ```
 
 ### ANSI Highlighting
 
 You can highlight ANSI escape codes:
 
-````md filename="Markdown"
+````md copy=false filename="Markdown"
 ```ansi
  ✓ src/index.test.ts (1)
    Test Files  1 passed (1)
@@ -168,7 +168,7 @@ You can highlight ANSI escape codes:
 
 Renders:
 
-```ansi
+```ansi copy=false
  ✓ src/index.test.ts (1)
    Test Files  1 passed (1)
         Tests  1 passed (1)
@@ -183,41 +183,9 @@ Renders:
 Check [this list](https://github.com/shikijs/shiki/blob/main/docs/languages.md)
 for all supported languages.
 
-## Customize the Theme
-
-Nextra uses CSS variables to define the colors for tokens. You can inject a
-[global CSS](https://nextjs.org/docs/basic-features/built-in-css-support#adding-a-global-stylesheet)
-to customize them under light/dark themes. For example this is the default
-tokens and you can override any of these:
-
-```css filename="styles.css"
-:root {
-  --shiki-color-text: #414141;
-  --shiki-color-background: transparent;
-  --shiki-token-constant: #1976d2;
-  --shiki-token-string: #22863a;
-  --shiki-token-comment: #aaa;
-  --shiki-token-keyword: #d32f2f;
-  --shiki-token-parameter: #ff9800;
-  --shiki-token-function: #6f42c1;
-  --shiki-token-string-expression: #22863a;
-  --shiki-token-punctuation: #212121;
-  --shiki-token-link: #22863a;
-}
+{/* ## Customize the Theme */}
 
-.dark {
-  --shiki-color-text: #d1d1d1;
-  --shiki-token-constant: #79b8ff;
-  --shiki-token-string: #ffab70;
-  --shiki-token-comment: #6b737c;
-  --shiki-token-keyword: #f97583;
-  --shiki-token-parameter: #ff9800;
-  --shiki-token-function: #b392f0;
-  --shiki-token-string-expression: #4bb74a;
-  --shiki-token-punctuation: #bbb;
-  --shiki-token-link: #ffab70;
-}
-```
+{/* Nextra uses CSS variables to define the colors for tokens. */}
 
 ## With Dynamic Content
 
@@ -273,7 +241,7 @@ export function DynamicCode({ children }) {
 }
 
 <DynamicCode>
-```js filename="dynamic_code.js"
+```js copy=false filename="dynamic_code.js"
 function hello () {
   const x = 2 + 3
   console.log(1)
@@ -315,7 +283,7 @@ You can provide these grammars by overriding the `getHighlighter` function in
 `mdxOptions.rehypePrettyCodeOptions` option in your Nextra config inside
 `next.config.mjs`:
 
-```js filename="next.config.mjs" {13-18}
+```js copy=false filename="next.config.mjs" {13-18}
 import { BUNDLED_LANGUAGES } from 'shiki'
 
 nextra({
@@ -346,7 +314,7 @@ nextra({
 Within `mdxOptions.rehypePrettyCodeOptions` you may also provide custom themes
 instead of [relying on CSS Variables](/docs/guide/syntax-highlighting):
 
-```js filename="next.config.mjs" {4}
+```js copy=false filename="next.config.mjs" {4}
 nextra({
   // ... other options
   mdxOptions: {

examples/docs/src/pages/features/ssg.mdx

@@ -7,15 +7,15 @@ can also be cached by a CDN to maximize the performance.
 
 This is supported by Nextra too. Here's an example:
 
-import { useSSG } from 'nextra/data'
+import { useData } from 'nextra/data'
 
 export const getStaticProps = ({ params }) => {
   return fetch(`https://api.github.com/repos/shuding/nextra`)
     .then(res => res.json())
     .then(repo => ({
       props: {
         // We add an `ssg` field to the page props,
-        // which will be provided to the Nextra `useSSG` hook.
+        // which will be provided to the Nextra `useData` hook.
         ssg: {
           stars: repo.stargazers_count || 0
         }
@@ -27,7 +27,7 @@ export const getStaticProps = ({ params }) => {
 
 export const Stars = () => {
   // Get the data from SSG, and render it as a component.
-  const { stars } = useSSG()
+  const { stars } = useData()
   return <strong>{stars}</strong>
 }
 
@@ -44,27 +44,27 @@ enabled, it will be kept up to date.
 Here's the MDX code for the example above:
 
 ```js filename="ssg.mdx"
-import { useSSG } from 'nextra/data'
+import { useData } from 'nextra/data'
 
 export const getStaticProps = ({ params }) => {
   return fetch(`https://api.github.com/repos/shuding/nextra`)
     .then((res) => res.json())
     .then((repo) => ({
       props: {
         // We add an `ssg` field to the page props,
-        // which will be provided to the Nextra `useSSG` hook.
+        // which will be provided to the Nextra `useData` hook.
         ssg: {
-          stars: repo.stargazers_count,
-        },
+          stars: repo.stargazers_count
+        }
       },
       // The page will be considered as stale and regenerated every 60 seconds.
-      revalidate: 60,
+      revalidate: 60
     }))
 }
 
 export const Stars = () => {
   // Get the data from SSG, and render it as a component.
-  const { stars } = useSSG()
+  const { stars } = useData()
   return <strong>{stars}</strong>
 }
 

examples/swr-site/package.json

@@ -6,7 +6,7 @@
   "private": true,
   "scripts": {
     "analyze": "ANALYZE=true pnpm build",
-    "build": "rm -rf .next && next build",
+    "build": "next build",
     "clean": "rimraf .next .turbo",
     "debug": "NODE_OPTIONS='--inspect' next dev",
     "dev": "next",

examples/swr-site/pages/en/docs/change-log.mdx

@@ -1,14 +1,14 @@
 # Change Log
 
-import { useSSG } from 'nextra/data'
+import { useData } from 'nextra/data'
 
 export const ReleasesRenderer = () => {
-  const releases = useSSG()
+  const releases = useData()
   return <i>{releases}</i>
 }
 
 export const getStaticProps = () => {
-  return { props: { ssg: 'Test SSG ' + Date.now() }, revalidate: 10 }
+  return { props: { ssg: 'Test SSG ' + Date.now() } }
 }
 
 <ReleasesRenderer />

examples/swr-site/pages/es/docs/change-log.mdx

@@ -1,20 +1,19 @@
 import Markdown from 'markdown-to-jsx'
-import { useSSG } from 'nextra/data'
+import { useData } from 'nextra/data'
 
 export function getStaticProps() {
   return (
     fetch('https://api.github.com/repos/vercel/swr/releases')
       .then(res => res.json())
       // we keep the most recent 5 releases here
       .then(releases => ({
-        props: { ssg: Array.isArray(releases) ? releases.slice(0, 5) : [] },
-        revalidate: 10
+        props: { ssg: Array.isArray(releases) ? releases.slice(0, 5) : [] }
       }))
   )
 }
 
 export function ReleasesRenderer() {
-  const releases = useSSG()
+  const releases = useData()
   return (
     <Markdown>
       {releases