[v3] show react components, variable interpolation and latex in toc (#…

…2359)
shuding · Sep 29, 2023 · e7e8e84 · e7e8e84
1 parent a6c3119
commit e7e8e84
Show file tree

Hide file tree

Showing 19 changed files with 911 additions and 400 deletions.
diff --git a/.changeset/brave-clocks-call.md b/.changeset/brave-clocks-call.md
@@ -0,0 +1,6 @@
+---
+'nextra-theme-docs': major
+'nextra': major
+---
+
+show react components, variable interpolation and latex in toc
diff --git a/examples/swr-site/pages/en/docs/getting-started.mdx b/examples/swr-site/pages/en/docs/getting-started.mdx
@@ -13,11 +13,23 @@ https://google.com/da;djaldhksagfugsufgasuyfgyuasgfuasgdjasbdjasdjkasfuydfasyrdy
 
 <Link href="https://google.com">Link</Link>
 
-export const myVar = 'Foo'
+export const myVar = '"I am from export const"'
 
 ## Foo {myVar}
 
-## Bar `Baz`
+### Bar `code`
+
+#### Latex $latex^2$
+
+###### <strong>Da</strong>
+
+###### _Ma_**Chi**<s>na</s>
+
+export const Test = props => <b>{props.someProp}</b>
+
+#### Qux <Test someProp="someVal" />
+
+##### My file is `<MyFile />{:js}`
 
 Inside your React project directory, run the following:
 

diff --git a/examples/swr-site/pages/en/remote/graphql-eslint/[[...slug]].mdx b/examples/swr-site/pages/en/remote/graphql-eslint/[[...slug]].mdx
@@ -13,12 +13,13 @@ export async function getStaticProps({ params }) {
   const response = await fetch(url)
   const data = await response.text()
   const { __nextra_pageMap } = await buildDynamicMeta('en')
+  const dynamicMdx = await buildDynamicMDX(data, {
+    defaultShowCopyCode: true
+  })
   return {
     props: {
       __nextra_pageMap,
-      ...(await buildDynamicMDX(data, {
-        defaultShowCopyCode: true
-      }))
+      ...dynamicMdx
     }
   }
 }

diff --git a/packages/nextra-theme-docs/src/index.tsx b/packages/nextra-theme-docs/src/index.tsx
@@ -187,34 +187,34 @@ function InnerLayout({
             asPopover={hideSidebar}
             includePlaceholder={themeContext.layout === 'default'}
           />
-          {tocEl}
-          <SkipNavContent />
-          <Body
-            themeContext={themeContext}
-            breadcrumb={
-              activeType !== 'page' && themeContext.breadcrumb ? (
-                <Breadcrumb activePath={activePath} />
-              ) : null
-            }
-            timestamp={timestamp}
-            navigation={
-              activeType !== 'page' && themeContext.pagination ? (
-                <NavLinks
-                  flatDirectories={flatDocsDirectories}
-                  currentIndex={activeIndex}
-                />
-              ) : null
-            }
+          <MDXProvider
+            components={getComponents({
+              isRawLayout: themeContext.layout === 'raw',
+              components: config.components
+            })}
           >
-            <MDXProvider
-              components={getComponents({
-                isRawLayout: themeContext.layout === 'raw',
-                components: config.components
-              })}
+            {tocEl}
+            <SkipNavContent />
+            <Body
+              themeContext={themeContext}
+              breadcrumb={
+                activeType !== 'page' && themeContext.breadcrumb ? (
+                  <Breadcrumb activePath={activePath} />
+                ) : null
+              }
+              timestamp={timestamp}
+              navigation={
+                activeType !== 'page' && themeContext.pagination ? (
+                  <NavLinks
+                    flatDirectories={flatDocsDirectories}
+                    currentIndex={activeIndex}
+                  />
+                ) : null
+              }
             >
               {children}
-            </MDXProvider>
-          </Body>
+            </Body>
+          </MDXProvider>
         </ActiveAnchorProvider>
       </div>
       {themeContext.footer &&

diff --git a/packages/nextra/__test__/__snapshots__/compile.test.ts.snap b/packages/nextra/__test__/__snapshots__/compile.test.ts.snap
@@ -1,127 +1,134 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Process heading > code-h1 1`] = `
-{
-  "frontMatter": {},
-  "result": "/*@jsxRuntime automatic @jsxImportSource react*/
-import {useMDXComponents as _provideComponents} from \\"nextra/mdx\\";
+"import { useMDXComponents as _provideComponents } from \\"nextra/mdx\\";
 export const frontMatter = {};
-export const toc = [];
-function _createMdxContent(props) {
-  const _components = Object.assign({
-    h1: \\"h1\\",
-    code: \\"code\\"
-  }, _provideComponents(), props.components);
-  return <_components.h1><_components.code>{\\"codegen.yml\\"}</_components.code></_components.h1>;
-}
-function MDXContent(props = {}) {
-  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
-  return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);
+export function useTOC(props) {
+  return [];
 }
-export default MDXContent;
-",
-  "title": "codegen.yml",
+function _createMdxContent(props) {
+  const { toc } = props;
+  const _components = Object.assign(
+    {
+      h1: \\"h1\\",
+      code: \\"code\\",
+    },
+    _provideComponents(),
+    props.components,
+  );
+  return (
+    <_components.h1>
+      <_components.code>{\\"codegen.yml\\"}</_components.code>
+    </_components.h1>
+  );
 }
+"
 `;
 
 exports[`Process heading > code-with-text-h1 1`] = `
-{
-  "frontMatter": {},
-  "result": "/*@jsxRuntime automatic @jsxImportSource react*/
-import {useMDXComponents as _provideComponents} from \\"nextra/mdx\\";
+"import { useMDXComponents as _provideComponents } from \\"nextra/mdx\\";
 export const frontMatter = {};
-export const toc = [];
-function _createMdxContent(props) {
-  const _components = Object.assign({
-    h1: \\"h1\\",
-    code: \\"code\\"
-  }, _provideComponents(), props.components);
-  return <_components.h1><_components.code>{\\"codegen.yml\\"}</_components.code>{\\" file\\"}</_components.h1>;
-}
-function MDXContent(props = {}) {
-  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
-  return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);
+export function useTOC(props) {
+  return [];
 }
-export default MDXContent;
-",
-  "title": "codegen.yml file",
+function _createMdxContent(props) {
+  const { toc } = props;
+  const _components = Object.assign(
+    {
+      h1: \\"h1\\",
+      code: \\"code\\",
+    },
+    _provideComponents(),
+    props.components,
+  );
+  return (
+    <_components.h1>
+      <_components.code>{\\"codegen.yml\\"}</_components.code>
+      {\\" file\\"}
+    </_components.h1>
+  );
 }
+"
 `;
 
 exports[`Process heading > dynamic-h1 1`] = `
 {
   "frontMatter": {},
   "hasJsxInH1": true,
-  "result": "/*@jsxRuntime automatic @jsxImportSource react*/
-import {useMDXComponents as _provideComponents} from \\"nextra/mdx\\";
+  "result": "import { useMDXComponents as _provideComponents } from \\"nextra/mdx\\";
 export const frontMatter = {};
-import {useRouter} from 'next/router';
+import { useRouter } from \\"next/router\\";
 export const TagName = () => {
-  const {tag} = useRouter().query;
+  const { tag } = useRouter().query;
   return tag || null;
 };
-export const toc = [];
-function _createMdxContent(props) {
-  const _components = Object.assign({
-    h1: \\"h1\\"
-  }, _provideComponents(), props.components);
-  return <_components.h1>{\\"Posts Tagged with “\\"}<TagName />{\\"”\\"}</_components.h1>;
+export function useTOC(props) {
+  return [];
 }
-function MDXContent(props = {}) {
-  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
-  return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);
+function _createMdxContent(props) {
+  const { toc } = props;
+  const _components = Object.assign(
+    {
+      h1: \\"h1\\",
+    },
+    _provideComponents(),
+    props.components,
+  );
+  return (
+    <_components.h1>
+      {\\"Posts Tagged with “\\"}
+      <TagName />
+      {\\"”\\"}
+    </_components.h1>
+  );
 }
-export default MDXContent;
 ",
   "title": "Posts Tagged with “”",
 }
 `;
 
 exports[`Process heading > no-h1 1`] = `
-{
-  "frontMatter": {},
-  "result": "/*@jsxRuntime automatic @jsxImportSource react*/
-import {useMDXComponents as _provideComponents} from \\"nextra/mdx\\";
+"import { useMDXComponents as _provideComponents } from \\"nextra/mdx\\";
 export const frontMatter = {};
-export const toc = [{
-  depth: 2,
-  value: \\"H2\\",
-  id: \\"h2\\"
-}];
-function _createMdxContent(props) {
-  const _components = Object.assign({
-    h2: \\"h2\\"
-  }, _provideComponents(), props.components);
-  return <_components.h2 id=\\"h2\\">{\\"H2\\"}</_components.h2>;
+export function useTOC(props) {
+  return [
+    {
+      value: \\"H2\\",
+      id: \\"h2\\",
+      depth: 2,
+    },
+  ];
 }
-function MDXContent(props = {}) {
-  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
-  return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);
-}
-export default MDXContent;
-",
+function _createMdxContent(props) {
+  const { toc } = props;
+  const _components = Object.assign(
+    {
+      h2: \\"h2\\",
+    },
+    _provideComponents(),
+    props.components,
+  );
+  return <_components.h2 id={toc[0].id}>{toc[0].value}</_components.h2>;
 }
+"
 `;
 
 exports[`Process heading > static-h1 1`] = `
-{
-  "frontMatter": {},
-  "result": "/*@jsxRuntime automatic @jsxImportSource react*/
-import {useMDXComponents as _provideComponents} from \\"nextra/mdx\\";
+"import { useMDXComponents as _provideComponents } from \\"nextra/mdx\\";
 export const frontMatter = {};
-export const toc = [];
+export function useTOC(props) {
+  return [];
+}
 function _createMdxContent(props) {
-  const _components = Object.assign({
-    h1: \\"h1\\"
-  }, _provideComponents(), props.components);
+  const { toc } = props;
+  const _components = Object.assign(
+    {
+      h1: \\"h1\\",
+    },
+    _provideComponents(),
+    props.components,
+  );
   return <_components.h1>{\\"Hello World\\"}</_components.h1>;
 }
-function MDXContent(props = {}) {
-  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
-  return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);
-}
-export default MDXContent;
-",
-  "title": "Hello World",
-}
+"
 `;