Install the same version of GitHub Slugger as Nextra

Author: hasparus

package.json

@@ -33,6 +33,7 @@
     "codemirror-graphql": "1.3.2",
     "date-fns": "^2.30.0",
     "fast-glob": "^3.3.3",
+    "github-slugger": "2.0.0",
     "graphql": "16.10.0",
     "gray-matter": "^4.0.3",
     "hast-util-to-string": "3.0.1",

pnpm-lock.yaml

@@ -15,6 +15,32 @@ export const metadata: Metadata = {
   title: "Code of Conduct | GraphQLConf 2025",
 }
 
+const components = {
+  a: (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
+    return (
+      <Anchor
+        {...props}
+        href={props.href ?? ""}
+        className={clsx(props.className, "typography-link")}
+      />
+    )
+  },
+  ul: (props: React.HTMLAttributes<HTMLUListElement>) => {
+    return <ul {...props} className={clsx(props.className, "-mt-6")} />
+  },
+  Callout: (props: React.HTMLAttributes<HTMLDivElement>) => {
+    return (
+      <div
+        {...props}
+        className={clsx(
+          props.className,
+          "gql-prose-inner -mx-4 w-fit border border-neu-300 bg-neu-50 p-4 dark:border-neu-100 dark:bg-neu-50/50 max-md:border-x-0 xl:my-4",
+        )}
+      />
+    )
+  },
+}
+
 export default function ResourcesPage() {
   return (
     <>
@@ -39,19 +65,19 @@ export default function ResourcesPage() {
         </Button>
       </Hero>
       <main className="gql-all-anchors-focusable gql-conf-navbar-strip text-neu-900 before:bg-white/40 before:dark:bg-blk/30">
-        <div className="gql-conf-container gql-conf-section gql-prose xl:mb-16 xl:mt-8">
+        <div className="gql-conf-container gql-conf-section xl:mb-16 xl:mt-8">
           <ServerComponentMarkdown
             markdown={markdown}
             extractToc
-            Wrapper={({ children, data }) => {
+            render={({ mdx, data }) => {
               return (
-                <div>
-                  <aside className="gql-sticky-aside row-span-8 -mt-1 w-fit sm:max-xl:grid sm:max-xl:grid-cols-2 sm:max-xl:bg-neu-100 sm:max-xl:p-4 dark:sm:max-xl:bg-neu-50/50">
+                <div className="gql-prose md:max-lg:[&>:not(:first-child)]:mx-4">
+                  <aside className="gql-sticky-aside row-span-8 -mt-1 w-fit sm:max-xl:grid sm:max-xl:grid-cols-2 sm:max-xl:bg-neu-100 sm:max-xl:p-4 dark:sm:max-xl:bg-neu-50/50 xl:max-w-[284px]">
                     {data.toc.map(({ value, id, depth }) => (
                       <a
                         key={id}
                         data-depth={depth}
-                        className="raw typography-menu block p-4 py-2 text-neu-800 hover:bg-neu-100 hover:text-neu-900 data-[depth=2]:font-semibold dark:hover:bg-neu-50 max-xl:-ml-4 xl:data-[depth=2]:text-lg"
+                        className="raw typography-menu block p-4 py-2 text-neu-800 hover:bg-neu-100 hover:text-neu-900 dark:hover:bg-neu-50 max-xl:-ml-4"
                         style={{
                           paddingLeft: (depth - 2) * 16 + 16,
                         }}
@@ -61,37 +87,10 @@ export default function ResourcesPage() {
                       </a>
                     ))}
                   </aside>
-                  {children}
+                  {mdx({ components })}
                 </div>
               )
             }}
-            components={{
-              a: (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
-                return (
-                  <Anchor
-                    {...props}
-                    href={props.href ?? ""}
-                    className={clsx(props.className, "typography-link")}
-                  />
-                )
-              },
-              ul: (props: React.HTMLAttributes<HTMLUListElement>) => {
-                return (
-                  <ul {...props} className={clsx(props.className, "-mt-6")} />
-                )
-              },
-              Callout: (props: React.HTMLAttributes<HTMLDivElement>) => {
-                return (
-                  <div
-                    {...props}
-                    className={clsx(
-                      props.className,
-                      "gql-prose-inner -mx-4 w-fit border border-neu-300 bg-neu-50 p-4 dark:border-neu-100 dark:bg-neu-50/50 xl:my-4",
-                    )}
-                  />
-                )
-              },
-            }}
           />
         </div>
       </main>

src/app/conf/2025/code-of-conduct/page.tsx

@@ -6,7 +6,6 @@ import * as runtime from "react/jsx-runtime"
 import { Root, Element } from "hast"
 import { visit } from "unist-util-visit"
 import { toString } from "hast-util-to-string"
-// @ts-expect-error
 import Slugger from "github-slugger"
 
 /**
@@ -18,17 +17,19 @@ import Slugger from "github-slugger"
  */
 export async function ServerComponentMarkdown({
   markdown,
-  components = {},
   extractToc = false,
-  Wrapper = ({ children }) => children,
+  render = ({ mdx }) => mdx({}),
 }: {
   markdown: string
-  components?: Record<string, React.ComponentType>
   extractToc?: boolean
-  Wrapper?: React.ComponentType<{
-    children: React.ReactNode
+  render?: (props: {
+    mdx: ({
+      components,
+    }: {
+      components?: MdxComponents
+    }) => React.AwaitedReactNode
     data: { toc: TableOfContents }
-  }>
+  }) => React.AwaitedReactNode
 }) {
   try {
     const rehypePlugins = extractToc ? [rehypeExtractTableOfContents] : []
@@ -40,12 +41,12 @@ export async function ServerComponentMarkdown({
       recmaPlugins: [],
     })
 
-    const { default: Mdx } = await run(String(vfile), {
+    const { default: mdx } = await run(vfile, {
       ...runtime,
       baseUrl: import.meta.url,
     })
 
-    return <Wrapper data={vfile.data}>{Mdx({ components })}</Wrapper>
+    return render({ data: vfile.data, mdx })
   } catch (error) {
     console.error(error)
     return (
@@ -55,6 +56,7 @@ export async function ServerComponentMarkdown({
 }
 
 type TableOfContents = Array<{ value: string; id: string; depth: number }>
+type MdxComponents = Record<string, React.ComponentType>
 
 /**
  * Nextra has a built-in plugin like this, but it also steals the heading contents