zudoku 0.0.0-fa903e7 → 0.0.0-fabd0c1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.0.0-fa903e7",
+  "version": "0.0.0-fabd0c1",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -54,6 +54,10 @@
       "import": "./lib/zudoku.plugin-api-keys.js",
       "types": "./dist/lib/plugins/api-keys/index.d.ts"
     },
+    "./plugins/api-catalog": {
+      "import": "./lib/zudoku.plugin-api-catalog.js",
+      "types": "./dist/lib/plugins/api-catalog/index.d.ts"
+    },
     "./plugins/markdown": {
       "import": "./lib/zudoku.plugin-markdown.js",
       "types": "./dist/lib/plugins/markdown/index.d.ts"
@@ -113,15 +117,14 @@
   "dependencies": {
     "@envelop/core": "5.0.2",
     "@graphql-typed-document-node/core": "3.2.0",
-    "@hiogawa/vite-plugin-ssr-css": "0.0.1",
     "@hookform/resolvers": "3.9.1",
     "@lekoarts/rehype-meta-as-attributes": "3.0.1",
-    "@mdx-js/react": "3.0.1",
-    "@mdx-js/rollup": "3.0.1",
+    "@mdx-js/react": "3.1.0",
+    "@mdx-js/rollup": "3.1.0",
     "@pothos/core": "3.41.0",
     "@radix-ui/react-accordion": "1.2.1",
-    "@radix-ui/react-alert-dialog": "1.1.2",
-    "@radix-ui/react-aspect-ratio": "1.1.0",
+    "@radix-ui/react-alert-dialog": "1.1.4",
+    "@radix-ui/react-aspect-ratio": "1.1.1",
     "@radix-ui/react-checkbox": "1.1.2",
     "@radix-ui/react-collapsible": "1.1.1",
     "@radix-ui/react-dialog": "1.1.2",
@@ -138,52 +141,54 @@
     "@radix-ui/react-switch": "1.1.1",
     "@radix-ui/react-tabs": "1.1.1",
     "@radix-ui/react-toggle": "1.1.0",
-    "@radix-ui/react-toggle-group": "1.1.0",
-    "@radix-ui/react-tooltip": "1.1.3",
+    "@radix-ui/react-toggle-group": "1.1.1",
+    "@radix-ui/react-tooltip": "1.1.4",
     "@radix-ui/react-visually-hidden": "1",
-    "@sentry/node": "8.34.0",
+    "@sentry/node": "8.42.0",
     "@sindresorhus/slugify": "2.2.1",
     "@stefanprobst/rehype-extract-toc": "2.2.0",
     "@tailwindcss/typography": "0.5.15",
-    "@tanstack/react-query": "5.61.0",
-    "@types/react": "18.3.11",
-    "@types/react-dom": "18.3.1",
+    "@tanstack/react-query": "5.62.3",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.1",
     "@vitejs/plugin-react": "4.3.4",
-    "@zudoku/config": "0.0.0-fa903e7",
     "@zudoku/httpsnippet": "10.0.9",
-    "@zudoku/react-helmet-async": "2.0.4",
+    "@zudoku/react-helmet-async": "2.0.5",
     "autoprefixer": "10.4.20",
     "chokidar": "3.6.0",
-    "class-variance-authority": "0.7.0",
+    "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "cmdk": "1.0.4",
-    "dotenv": "16.4.5",
-    "embla-carousel-react": "8.3.1",
+    "devlop": "^1.1.0",
+    "dotenv": "16.4.7",
+    "embla-carousel-react": "8.5.1",
     "estree-util-value-to-estree": "3.2.1",
-    "express": "4.21.1",
+    "express": "4.21.2",
     "glob": "11.0.0",
-    "graphql": "16.9.0",
+    "graphql": "16.10.0",
     "graphql-type-json": "0.3.2",
-    "graphql-yoga": "5.7.0",
+    "graphql-yoga": "5.10.4",
     "gray-matter": "4.0.3",
+    "hast-util-to-jsx-runtime": "^2.3.2",
+    "hast-util-to-string": "3.0.1",
+    "html-url-attributes": "^3.0.1",
     "http-terminator": "3.2.0",
     "loglevel": "1.9.2",
-    "lru-cache": "11.0.1",
-    "lucide-react": "0.452.0",
-    "next-themes": "0.4.3",
+    "lru-cache": "11.0.2",
+    "lucide-react": "0.468.0",
+    "next-themes": "0.4.4",
     "oauth4webapi": "2.17.0",
     "object-hash": "3.0.0",
     "openapi-types": "12.1.3",
-    "picocolors": "1.1.0",
-    "postcss": "8.4.47",
-    "posthog-node": "4.2.1",
+    "picocolors": "1.1.1",
+    "postcss": "8.4.49",
+    "posthog-node": "4.3.1",
     "prism-react-renderer": "2.4.0",
     "prismjs": "1.29.0",
     "react-error-boundary": "4.1.2",
-    "react-hook-form": "7.53.0",
-    "react-is": "18.3.1",
-    "react-markdown": "9.0.1",
-    "react-router-dom": "6.27.0",
+    "react-hook-form": "7.54.0",
+    "react-is": "19.0.0",
+    "react-router": "7.0.2",
     "rehype-raw": "7.0.0",
     "rehype-slug": "6.0.0",
     "remark-comment": "1.0.0",
@@ -192,58 +197,65 @@
     "remark-frontmatter": "5.0.0",
     "remark-gfm": "4.0.0",
     "remark-mdx-frontmatter": "5.0.0",
-    "rollup": "4.24.0",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.1",
+    "rollup": "4.28.1",
     "semver": "7.6.3",
     "sitemap": "8.0.0",
     "spin-delay": "2.0.1",
     "strip-ansi": "7.1.0",
-    "tailwind-merge": "2.5.4",
-    "tailwindcss": "3.4.13",
+    "tailwind-merge": "2.6.0",
+    "tailwindcss": "3.4.16",
+    "tsx": "^4.19.2",
     "ulidx": "2.4.1",
+    "unified": "^11.0.5",
     "unist-util-visit": "5.0.0",
-    "urql": "4.1.0",
-    "vaul": "1.1.0",
+    "urql": "4.2.1",
+    "vaul": "1.1.1",
     "vfile": "6.0.3",
-    "vite": "5.4.9",
-    "yaml": "2.6.0",
+    "vite": "6.0.3",
+    "yaml": "2.6.1",
     "yargs": "17.7.2",
     "zod": "3.23.8",
     "zod-validation-error": "3.4.0",
-    "zustand": "5.0.0"
+    "zustand": "5.0.2"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "5.0.3",
-    "@graphql-codegen/client-preset": "4.5.0",
+    "@graphql-codegen/client-preset": "4.5.1",
     "@types/estree": "1.0.6",
     "@types/express": "5.0.0",
-    "@types/har-format": "1.2.15",
+    "@types/har-format": "1.2.16",
+    "@types/hast": "^3.0.4",
     "@types/json-schema": "7.0.15",
     "@types/mdast": "4.0.4",
     "@types/mdx": "2.0.13",
     "@types/node": "20.16.11",
     "@types/object-hash": "3.0.6",
-    "@types/react-is": "18.3.0",
+    "@types/react-is": "19.0.0",
     "@types/semver": "7.5.8",
+    "@types/unist": "^3.0.3",
     "@types/yargs": "17.0.33",
     "@vitest/coverage-v8": "2.1.8",
     "mdast-util-mdx": "3.0.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "rollup-plugin-visualizer": "5.12.0",
     "typescript": "5.7.2",
     "vitest": "2.1.8"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18"
+    "react": ">=19",
+    "react-dom": ">=19"
   },
   "optionalDependencies": {
-    "@clerk/clerk-js": "5.11.0",
-    "@inkeep/widgets": "^0.2.289"
+    "@clerk/clerk-js": "^5.43.4",
+    "@sentry/react": "^8.45.1"
   },
   "scripts": {
     "build": "tsc --project tsconfig.json",
     "build:vite": "vite build",
+    "generate:icon-types": "tsx ./scripts/generate-icon-types.ts",
     "build:standalone:vite": "vite build --mode standalone --config vite.standalone.config.ts",
     "build:standalone:html": "cp ./src/app/standalone.html ./standalone/standalone.html && cp ./src/app/demo.html ./standalone/demo.html && cp ./src/app/demo-cdn.html ./standalone/index.html",
     "hack:fix-worker-paths": "node ./scripts/hack-worker.mjs",

package/src/app/demo.tsx

@@ -1,6 +1,6 @@
 import logger from "loglevel";
 import { createRoot } from "react-dom/client";
-import { createBrowserRouter } from "react-router-dom";
+import { createBrowserRouter } from "react-router";
 import { Bootstrap } from "zudoku/components";
 import type { ZudokuConfig } from "../config/validators/validate.js";
 import DemoAnnouncement from "../lib/demo/DemoAnnouncement.js";

package/src/app/entry.client.tsx

@@ -3,9 +3,10 @@ import {
   createBrowserRouter,
   matchRoutes,
   type RouteObject,
-} from "react-router-dom";
+} from "react-router";
 import config from "virtual:zudoku-config";
 import "virtual:zudoku-theme.css";
+import "vite/modulepreload-polyfill";
 import { Bootstrap } from "zudoku/components";
 import "./main.css";
 import { getRoutesByConfig } from "./main.js";
@@ -13,6 +14,12 @@ import { getRoutesByConfig } from "./main.js";
 const routes = getRoutesByConfig(config);
 const root = document.getElementById("root")!;
 
+if (process.env.SENTRY_DSN) {
+  void import("./sentry.js").then((mod) => {
+    mod.initSentry({ dsn: process.env.SENTRY_DSN as string });
+  });
+}
+
 if (root.childElementCount > 0) {
   void hydrate(routes);
 } else {
@@ -38,13 +45,6 @@ async function hydrateLazyRoutes(routes: RouteObject[]) {
 function render(routes: RouteObject[]) {
   const router = createBrowserRouter(routes, {
     basename: config.basePath,
-    future: {
-      v7_relativeSplatPath: true,
-      v7_fetcherPersist: true,
-      v7_partialHydration: true,
-      v7_skipActionErrorRevalidation: true,
-      v7_normalizeFormMethod: true,
-    },
   });
   createRoot(root).render(<Bootstrap router={router} />);
 }
@@ -53,14 +53,15 @@ async function hydrate(routes: RouteObject[]) {
   await hydrateLazyRoutes(routes);
   const router = createBrowserRouter(routes, {
     basename: config.basePath,
-    future: {
-      v7_relativeSplatPath: true,
-      v7_fetcherPersist: true,
-      v7_partialHydration: true,
-      v7_skipActionErrorRevalidation: true,
-      v7_normalizeFormMethod: true,
-    },
   });
 
   hydrateRoot(root, <Bootstrap hydrate router={router} />);
 }
+
+// This is a workaround to avoid version skewing
+// See https://vite.dev/guide/build.html#load-error-handling
+// TODO: Implement a more advanced solution if there are CDN urls or e.g. Vercel Skew Protection
+window.addEventListener("vite:preloadError", (e) => {
+  e.preventDefault();
+  window.location.reload();
+});

package/src/app/entry.server.tsx

@@ -4,12 +4,13 @@ import type express from "express";
 import logger from "loglevel";
 import { Transform } from "node:stream";
 import { renderToPipeableStream, renderToStaticMarkup } from "react-dom/server";
-import { isRouteErrorResponse } from "react-router-dom";
 import {
   createStaticHandler,
   createStaticRouter,
-} from "react-router-dom/server.js";
+  isRouteErrorResponse,
+} from "react-router";
 import "virtual:zudoku-theme.css";
+import "vite/modulepreload-polyfill";
 import { BootstrapStatic, ServerError } from "zudoku/components";
 import type { ZudokuConfig } from "../config/config.js";
 import type { FileWritingResponse } from "../vite/prerender.js";

package/src/app/main.tsx

@@ -1,6 +1,9 @@
-import { type RouteObject } from "react-router-dom";
+import { type RouteObject } from "react-router";
 import { configuredApiKeysPlugin } from "virtual:zudoku-api-keys-plugin";
-import { configuredApiPlugins } from "virtual:zudoku-api-plugins";
+import {
+  configuredApiCatalogPlugins,
+  configuredApiPlugins,
+} from "virtual:zudoku-api-plugins";
 import { configuredAuthProvider } from "virtual:zudoku-auth";
 import { configuredCustomPagesPlugin } from "virtual:zudoku-custom-pages-plugin";
 import { configuredDocsPlugins } from "virtual:zudoku-docs-plugins";
@@ -57,6 +60,7 @@ export const convertZudokuConfigToOptions = (
       ...(configuredRedirectPlugin ? [configuredRedirectPlugin] : []),
       ...(configuredApiKeysPlugin ? [configuredApiKeysPlugin] : []),
       ...(configuredCustomPagesPlugin ? [configuredCustomPagesPlugin] : []),
+      ...configuredApiCatalogPlugins,
       ...(configuredAuthProvider?.getAuthenticationPlugin
         ? [configuredAuthProvider.getAuthenticationPlugin()]
         : []),

package/src/app/sentry.ts

@@ -0,0 +1,24 @@
+import * as Sentry from "@sentry/react";
+import { useEffect } from "react";
+import {
+  createRoutesFromChildren,
+  matchRoutes,
+  useLocation,
+  useNavigationType,
+} from "react-router";
+
+export const initSentry = ({ dsn }: { dsn: string }) => {
+  Sentry.init({
+    dsn,
+    integrations: [
+      Sentry.reactRouterV6BrowserTracingIntegration({
+        useEffect,
+        useLocation,
+        useNavigationType,
+        createRoutesFromChildren,
+        matchRoutes,
+      }),
+      Sentry.replayIntegration(),
+    ],
+  });
+};

package/src/app/standalone.tsx

@@ -1,5 +1,5 @@
 import { createRoot } from "react-dom/client";
-import { createBrowserRouter } from "react-router-dom";
+import { createBrowserRouter } from "react-router";
 import { Bootstrap } from "zudoku/components";
 import type { ZudokuConfig } from "../config/validators/validate.js";
 import { openApiPlugin } from "../lib/plugins/openapi/index.js";

package/src/app/tailwind.ts

@@ -1,68 +1,83 @@
 import typographyPlugin from "@tailwindcss/typography";
 import type { Config } from "tailwindcss";
 import defaultTheme from "tailwindcss/defaultTheme.js";
+import type { LoadedConfig } from "../config/config.js";
 
 const content = [
   "./src/**/*.{js,ts,jsx,tsx,md,mdx}",
   "./node_modules/zudoku/dist/**/*.{js,ts,jsx,tsx,md,mdx}",
 ];
 
-const config: Omit<Config, "content"> = {
-  darkMode: "selector",
-  content,
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: [
-          ["Geist", ...defaultTheme.fontFamily.sans],
-          { fontFeatureSettings: '"rlig" 1, "calt" 0' },
-        ],
-      },
-      typography: () => ({
-        DEFAULT: {
-          css: {
-            blockquote: { quotes: "none" },
-          },
-        },
-      }),
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
+const config = (zudokuConfig?: LoadedConfig): Omit<Config, "content"> => {
+  const sans = zudokuConfig?.theme?.fonts?.sans
+    ? ([
+        zudokuConfig.theme.fonts.sans.fontFamily,
+        ...defaultTheme.fontFamily.sans,
+      ] as const)
+    : ([
+        ["Geist", ...defaultTheme.fontFamily.sans],
+        { fontFeatureSettings: '"rlig" 1, "calt" 0' },
+      ] as const);
+
+  const mono = zudokuConfig?.theme?.fonts?.mono
+    ? zudokuConfig.theme.fonts.mono.fontFamily
+    : defaultTheme.fontFamily.mono;
+
+  return {
+    darkMode: "selector",
+    content,
+    theme: {
+      extend: {
+        fontFamily: {
+          sans,
+          mono,
         },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
+        typography: () => ({
+          DEFAULT: {
+            css: {
+              blockquote: { quotes: "none" },
+            },
+          },
+        }),
+        colors: {
+          border: "hsl(var(--border))",
+          input: "hsl(var(--input))",
+          ring: "hsl(var(--ring))",
+          background: "hsl(var(--background))",
+          foreground: "hsl(var(--foreground))",
+          primary: {
+            DEFAULT: "hsl(var(--primary))",
+            foreground: "hsl(var(--primary-foreground))",
+          },
+          secondary: {
+            DEFAULT: "hsl(var(--secondary))",
+            foreground: "hsl(var(--secondary-foreground))",
+          },
+          destructive: {
+            DEFAULT: "hsl(var(--destructive))",
+            foreground: "hsl(var(--destructive-foreground))",
+          },
+          muted: {
+            DEFAULT: "hsl(var(--muted))",
+            foreground: "hsl(var(--muted-foreground))",
+          },
+          accent: {
+            DEFAULT: "hsl(var(--accent))",
+            foreground: "hsl(var(--accent-foreground))",
+          },
+          popover: {
+            DEFAULT: "hsl(var(--popover))",
+            foreground: "hsl(var(--popover-foreground))",
+          },
+          card: {
+            DEFAULT: "hsl(var(--card))",
+            foreground: "hsl(var(--card-foreground))",
+          },
         },
       },
     },
-  },
-  plugins: [typographyPlugin],
+    plugins: [typographyPlugin],
+  };
 };
 
 export default config;

package/src/lib/authentication/components/CallbackHandler.tsx

@@ -1,5 +1,5 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
-import { Navigate } from "react-router-dom";
+import { Navigate } from "react-router";
 import { ZudokuError } from "../../util/invariant.js";
 
 export function CallbackHandler({

package/src/lib/authentication/components/SignIn.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useSearchParams } from "react-router-dom";
+import { useSearchParams } from "react-router";
 import { useZudoku } from "../../components/context/ZudokuContext.js";
 
 export const SignIn = () => {

package/src/lib/authentication/components/SignOut.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { useZudoku } from "../../components/context/ZudokuContext.js";
 
 export const SignOut = () => {

package/src/lib/authentication/providers/openid.tsx

@@ -12,8 +12,9 @@ import { useAuthState, UserProfile } from "../state.js";
 
 const CODE_VERIFIER_KEY = "code-verifier";
 
-interface TokenState {
+export interface OpenIdProviderData {
   accessToken: string;
+  idToken?: string;
   refreshToken?: string;
   expiresOn: Date;
   tokenType: string;
@@ -101,9 +102,10 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       throw new AuthorizationError("No expires_in in response");
     }
 
-    const tokens: TokenState = {
+    const tokens: OpenIdProviderData = {
       accessToken: response.access_token,
       refreshToken: response.refresh_token,
+      idToken: response.id_token,
       expiresOn: new Date(Date.now() + response.expires_in * 1000),
       tokenType: response.token_type,
     };
@@ -201,11 +203,16 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     if (!providerData) {
       throw new AuthorizationError("User is not authenticated");
     }
-    const tokenState = providerData as TokenState;
+    const tokenState = providerData as OpenIdProviderData;
 
-    if (tokenState.expiresOn < new Date()) {
+    if (new Date(tokenState.expiresOn) < new Date()) {
       if (!tokenState.refreshToken) {
-        await this.signIn();
+        useAuthState.setState({
+          isAuthenticated: false,
+          isPending: false,
+          profile: null,
+          providerData: null,
+        });
         return "";
       }
 

package/src/lib/components/AnchorLink.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link, type LinkProps, useLocation } from "react-router-dom";
+import { Link, type LinkProps, useLocation } from "react-router";
 
 /**
  * Link that scrolls to anchor even if the hash is already set in the URL.

package/src/lib/components/Bootstrap.tsx

@@ -5,12 +5,13 @@ import {
 } from "@tanstack/react-query";
 import { type HelmetData, HelmetProvider } from "@zudoku/react-helmet-async";
 import { StrictMode } from "react";
-import { type createBrowserRouter, RouterProvider } from "react-router-dom";
 import {
+  type createBrowserRouter,
   type createStaticRouter,
   type StaticHandlerContext,
   StaticRouterProvider,
-} from "react-router-dom/server.js";
+} from "react-router";
+import { RouterProvider } from "react-router/dom";
 import { StaggeredRenderContext } from "../plugins/openapi/StaggeredRender.js";
 
 const queryClient = new QueryClient({
@@ -33,10 +34,7 @@ const Bootstrap = ({
       <HydrationBoundary state={hydrate ? (window as any).DATA : undefined}>
         <HelmetProvider>
           <StaggeredRenderContext.Provider value={{ stagger: !hydrate }}>
-            <RouterProvider
-              router={router}
-              future={{ v7_startTransition: true }}
-            />
+            <RouterProvider router={router} />
           </StaggeredRenderContext.Provider>
         </HelmetProvider>
       </HydrationBoundary>

package/src/lib/components/Header.tsx

@@ -1,5 +1,5 @@
 import { memo } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Button } from "zudoku/ui/Button.js";
 import { Skeleton } from "zudoku/ui/Skeleton.js";
 import { useAuth } from "../authentication/hook.js";
@@ -66,7 +66,7 @@ export const Header = memo(function HeaderInner() {
     <header className="sticky lg:top-0 z-10 bg-background/80 backdrop-blur w-full">
       <Banner />
       <div className="max-w-screen-2xl mx-auto">
-        <div className="grid grid-cols-2 lg:grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center border-b px-10 lg:px-12 h-[--top-header-height]">
+        <div className="grid grid-cols-[1fr_auto] lg:grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center border-b px-4 lg:px-12 h-[--top-header-height]">
           <div className="flex">
             <Link to="/">
               <div className="flex items-center gap-3.5">

package/src/lib/components/Heading.tsx

@@ -38,23 +38,22 @@ const getComponent = (level: number) => {
   }
 };
 
-export interface HeadingProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof heading> {
-  children: ReactNode;
-  className?: string;
-  id?: string;
-  level?: 1 | 2 | 3 | 4 | 5 | 6;
-  registerSidebarAnchor?: boolean;
-}
+export type HeadingProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof heading> & {
+    children: ReactNode;
+    className?: string;
+    id?: string;
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    registerSidebarAnchor?: boolean;
+  };
 
-export const Heading: React.FC<HeadingProps> = ({
+export const Heading = ({
   level,
   children,
   id,
   className,
   registerSidebarAnchor,
-}) => {
+}: HeadingProps) => {
   const Component = getComponent(level ?? 1);
   const { ref } = useRegisterAnchorElement();
 
@@ -67,10 +66,11 @@ export const Heading: React.FC<HeadingProps> = ({
       {id && (
         <a
           href={`#${id}`}
-          className="no-underline absolute text-primary -left-[0.8em] pr-2.5 opacity-0 group-hover:opacity-50 hover:!opacity-100 transition-opacity duration-200"
+          className="before:content-['#'] no-underline absolute text-primary -left-[0.8em] pr-2.5 opacity-0 group-hover:opacity-50 hover:!opacity-100 transition-opacity duration-200"
           aria-label={`Link to ${id}`}
         >
-          #
+          {/* Zero width space */}
+          &#8203;
         </a>
       )}
       {children}