fix issues after upgrade

Author: noxify

content/test-collection/components/stepper.mdx

@@ -3,7 +3,7 @@ title: Stepper
 ---
 
 import { Preview } from "@/components/preview"
-import { APIReference } from "renoun/components"
+import { Reference } from "renoun/components"
 
 ## Source
 
@@ -41,4 +41,4 @@ The component uses
 
 ## API Reference
 
-<APIReference source="./src/components/ui/stepper.tsx" />
+<Reference source="./src/components/ui/stepper.tsx" />

next.config.mjs

@@ -1,5 +1,5 @@
 import createMDXPlugin from "@next/mdx"
-import rehypeRenoun from "@renoun/mdx/rehype"
+import { rehypePlugins } from "@renoun/mdx"
 import remarkRenounAddHeadings from "@renoun/mdx/remark/add-headings"
 import remarkRenounRemoveParagraphs from "@renoun/mdx/remark/remove-immediate-paragraphs"
 import remarkRenounRelativeLinks from "@renoun/mdx/remark/transform-relative-links"
@@ -22,7 +22,7 @@ const withMDX = createMDXPlugin({
       remarkRenounRelativeLinks,
       remarkGfm,
     ],
-    rehypePlugins: [rehypeRenoun, rehypeMdxImportMedia],
+    rehypePlugins: [...rehypePlugins, rehypeMdxImportMedia],
   },
 })
 

package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "build": "renoun next build && pnpm generate-pagefind",
+    "build2": "next build",
     "create:pages": "node create-test-collections.js",
     "deps:check": "pnpm outdated -r",
     "deps:update": "pnpm update -i -L -r",
@@ -61,6 +62,7 @@
     "renoun": "9.3.0",
     "tailwind-merge": "3.3.1",
     "tailwindcss-animate": "1.0.7",
+    "tm-grammars": "1.24.3",
     "tm-themes": "1.10.7",
     "ts-dot-prop": "2.1.4",
     "zod": "4.0.17",

pnpm-lock.yaml

@@ -13,18 +13,18 @@
   },
   "languages": [
     "css",
-    "javascript",
+    "js",
     "jsx",
-    "typescript",
+    "ts",
     "tsx",
-    "markdown",
+    "md",
     "mdx",
-    "shellscript",
+    "bash",
     "json",
     "html",
-    "python",
-    "graphql",
-    "yaml",
+    "py",
+    "gql",
+    "yml",
     "sql",
     "xml",
     "docker"

renoun.json

@@ -145,6 +145,23 @@ export function useMDXComponents() {
         />
       )
     },
+    CodeInline: (props) => {
+      return (
+        <CodeInline
+          {...props}
+          allowErrors
+          css={{
+            backgroundColor: "hsl(var(--secondary))",
+            color: "auto",
+            boxShadow: "none",
+            display: "inline",
+          }}
+          paddingX="auto"
+          paddingY="auto"
+          className="border px-2 py-0.5 text-xs"
+        />
+      )
+    },
     // Code block
     pre: (props: CodeBlockProps) => {
       if (props.language === "mermaid") {
@@ -158,6 +175,18 @@ export function useMDXComponents() {
 
       return <CodeBlock {...props} className={{ container: "my-4!" }} />
     },
+    CodeBlock: (props: CodeBlockProps) => {
+      if (props.language === "mermaid") {
+        return <MermaidWrapper chart={props.children as string} />
+      }
+
+      // @ts-expect-error railroad is not a valid language
+      if (props.language === "railroad") {
+        return <RailroadWrapper content={props.children as string} />
+      }
+
+      return <CodeBlock {...props} className={{ container: "my-4!" }} />
+    },
     Note: ({ title, children }: { title?: string; children: ReactNode }) => {
       return (
         <Alert variant={"default"} className="my-4">