From 60bbe0de59894433ea8b92d4d78a659d50e7ee2c Mon Sep 17 00:00:00 2001 From: Jayesh Date: Sun, 3 May 2026 16:45:43 +0530 Subject: [PATCH 1/2] fix: onthispage navbar --- src/client/routes/wiki-route.tsx | 49 ++++++++++++++++++++++++++++---- src/lib/markdown.ts | 7 ++++- 2 files changed, 50 insertions(+), 6 deletions(-) diff --git a/src/client/routes/wiki-route.tsx b/src/client/routes/wiki-route.tsx index afc7d31..6a12ea2 100644 --- a/src/client/routes/wiki-route.tsx +++ b/src/client/routes/wiki-route.tsx @@ -15,17 +15,56 @@ import { useWikiConfig } from "@/client/wiki-config"; import { getTopicColor, type TopicAliasConfig } from "@/lib/wiki-config"; import type { WikiHeading, WikiNeighbor, WikiPageData } from "@/lib/wiki-shared"; import { usePersonImage } from "@/client/use-person-image"; +import { createHeadingId } from "@/lib/markdown"; import { fetchJson, isSetupRequiredResponse } from "../api"; import { RouteErrorBoundary } from "../route-error-boundary"; const remarkPlugins = [remarkGfm]; const rehypePlugins = [rehypeHighlight]; + +/** Extracts plain text from React children to use for ID generation */ +function getTextContent(children: React.ReactNode): string { + if (typeof children === "string") return children; + if (Array.isArray(children)) return children.map(getTextContent).join(""); + // @ts-ignore - children might be a ReactElement with props + if (children?.props?.children) return getTextContent(children.props.children); + return ""; +} + const markdownComponents = { - h1: ({ ...props }) =>

, - h2: ({ ...props }) =>

, - h3: ({ ...props }) =>

, - h4: ({ ...props }) =>

, + h1: ({ children, ...props }: any) => { + const id = createHeadingId(getTextContent(children)); + return ( +

+ {children} +

+ ); + }, + h2: ({ children, ...props }: any) => { + const id = createHeadingId(getTextContent(children)); + return ( +

+ {children} +

+ ); + }, + h3: ({ children, ...props }: any) => { + const id = createHeadingId(getTextContent(children)); + return ( +

+ {children} +

+ ); + }, + h4: ({ children, ...props }: any) => { + const id = createHeadingId(getTextContent(children)); + return ( +

+ {children} +

+ ); + }, p: ({ ...props }) =>

, ul: ({ ...props }) =>