test

Author: LadyBluenotes

src/components/Doc.tsx

@@ -14,10 +14,12 @@ import { GamHeader } from './Gam'
 import { Toc } from './Toc'
 import { TocMobile } from './TocMobile'
 import { DocFeedbackProvider } from './DocFeedbackProvider'
+import { MarkdownHeading } from '~/utils/markdown'
 
 type DocProps = {
   title: string
   content: string
+  html: { markup: string; headings: Array<MarkdownHeading> }
   repo: string
   branch: string
   filePath: string
@@ -33,6 +35,7 @@ type DocProps = {
 function DocContent({
   title,
   content,
+  html,
   repo,
   branch,
   filePath,
@@ -43,9 +46,16 @@ function DocContent({
   libraryVersion,
   pagePath,
 }: DocProps) {
-  const { headings } = useMarkdownHeadings()
+  const { headings, setHeadings } = useMarkdownHeadings()
 
-  const isTocVisible = shouldRenderToc && headings && headings.length > 1
+  React.useEffect(() => {
+    if (html?.headings?.length) {
+      setHeadings(html.headings)
+    }
+  }, [html?.headings, setHeadings])
+
+  const isTocVisible =
+    shouldRenderToc && (html?.headings?.length ?? headings.length) > 1
 
   const markdownContainerRef = React.useRef<HTMLDivElement>(null)
   const [activeHeadings, setActiveHeadings] = React.useState<Array<string>>([])
@@ -169,10 +179,18 @@ function DocContent({
                 libraryId={libraryId}
                 libraryVersion={libraryVersion}
               >
-                <Markdown rawContent={content} />
+                <Markdown
+                  htmlMarkup={html?.markup ?? ''}
+                  headingsOverride={html?.headings}
+                  rawContent={content}
+                />
               </DocFeedbackProvider>
             ) : (
-              <Markdown rawContent={content} />
+              <Markdown
+                htmlMarkup={html?.markup ?? ''}
+                headingsOverride={html?.headings}
+                rawContent={content}
+              />
             )}
           </div>
           <div className="h-12" />

src/components/FeedEntry.tsx

@@ -14,6 +14,10 @@ export interface FeedEntry {
   title: string
   content: string
   excerpt?: string | null
+  html?: {
+    markup: string
+    headings: Array<{ id: string; text: string; level: number }>
+  }
   publishedAt: number
   createdAt: number
   updatedAt?: number
@@ -415,7 +419,11 @@ export function FeedEntry({
 
               {/* Content */}
               <div className="text-xs text-gray-900 dark:text-gray-100 leading-snug mb-3">
-                <Markdown rawContent={entry.content} />
+                <Markdown
+                  htmlMarkup={entry.html?.markup ?? ''}
+                  headingsOverride={entry.html?.headings}
+                  rawContent={entry.content}
+                />
               </div>
 
               {/* External Link */}

src/components/FeedEntryTimeline.tsx

@@ -332,7 +332,11 @@ export function FeedEntryTimeline({
             !expanded && 'line-clamp-6',
           )}
         >
-          <Markdown rawContent={entry.content} />
+          <Markdown
+            htmlMarkup={entry.html?.markup ?? ''}
+            headingsOverride={entry.html?.headings}
+            rawContent={entry.content}
+          />
         </div>
 
         {/* Show more/less button */}

src/components/Markdown.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react'
 import { MarkdownLink } from '~/components/MarkdownLink'
 import type { HTMLProps } from 'react'
-import { createHighlighter, type HighlighterGeneric } from 'shiki/bundle/web'
-import { transformerNotationDiff } from '@shikijs/transformers'
 import parse, {
   attributesToProps,
   domToReact,
@@ -13,10 +11,13 @@ import type { Mermaid } from 'mermaid'
 import { useToast } from '~/components/ToastProvider'
 import { twMerge } from 'tailwind-merge'
 import { useMarkdownHeadings } from '~/components/MarkdownHeadingContext'
-import { renderMarkdown } from '~/utils/markdown'
 import { getNetlifyImageUrl } from '~/utils/netlifyImage'
 import { Tabs } from '~/components/Tabs'
 import { Copy } from 'lucide-react'
+import type {
+  MarkdownHeading,
+  MarkdownRenderResult,
+} from '~/utils/markdown/processor'
 
 type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 
@@ -384,29 +385,35 @@ const options: HTMLReactParserOptions = {
 
 type MarkdownProps = {
   htmlMarkup: string
+  headingsOverride?: MarkdownHeading[]
   rawContent?: string
 }
 
-export function Markdown({ rawContent, htmlMarkup }: MarkdownProps) {
+export function Markdown({ rawContent, htmlMarkup, headingsOverride }: MarkdownProps) {
   const { setHeadings } = useMarkdownHeadings()
 
-  const rendered = React.useMemo(() => {
-    if (rawContent) {
-      return renderMarkdown(rawContent)
-    }
-
-    return { markup: htmlMarkup, headings: [] }
-  }, [rawContent, htmlMarkup])
-
   React.useEffect(() => {
-    setHeadings(rendered.headings)
-  }, [rendered.headings, setHeadings])
+    if (headingsOverride) {
+      setHeadings(headingsOverride)
+    } else {
+      const { headings } = renderMarkdown(htmlMarkup || rawContent || '')
+      setHeadings(headings)
+    }
+  }, [headingsOverride, htmlMarkup, rawContent, setHeadings])
 
-  return React.useMemo(() => {
-    if (!rendered.markup) {
-      return null
+  const markup = React.useMemo(() => {
+    if (htmlMarkup) {
+      return htmlMarkup
     }
+    if (rawContent) {
+      return renderMarkdown(rawContent).markup
+    }
+    return ''
+  }, [htmlMarkup, rawContent])
+
+  if (!markup) {
+    return null
+  }
 
-    return parse(rendered.markup, options)
-  }, [rendered.markup])
+  return React.useMemo(() => parse(markup, options), [markup])
 }

src/components/admin/FeedEntryEditor.tsx

@@ -483,7 +483,10 @@ export function FeedEntryEditor({
                       {excerpt}
                     </p>
                   )}
-                  <Markdown rawContent={content || '*No content yet*'} />
+                  <Markdown
+                    htmlMarkup=""
+                    rawContent={content || '*No content yet*'}
+                  />
                 </div>
               ) : (
                 <div className="text-center py-12 text-gray-400 dark:text-gray-500">

src/routes/_libraries/feed.$id.tsx

@@ -364,7 +364,11 @@ function FeedEntryView({ entry }: { entry: FeedEntry }) {
 
           {/* Content */}
           <div className="prose prose-sm dark:prose-invert max-w-none mb-4 prose-headings:mt-4 prose-headings:mb-2 prose-p:my-2 prose-ul:my-2 prose-ol:my-2 prose-li:my-0">
-            <Markdown rawContent={entry.content} />
+            <Markdown
+              htmlMarkup={entry.html?.markup ?? ''}
+              headingsOverride={entry.html?.headings}
+              rawContent={entry.content}
+            />
           </div>
 
           {/* External Link */}

src/utils/docs.ts

@@ -8,6 +8,7 @@ import { notFound } from '@tanstack/react-router'
 import { createServerFn } from '@tanstack/react-start'
 import { z } from 'zod'
 import { setResponseHeader } from '@tanstack/react-start/server'
+import { renderMarkdown } from '~/utils/markdown'
 
 export const loadDocs = async ({
   repo,
@@ -59,12 +60,15 @@ export const fetchDocs = createServerFn({ method: 'GET' })
       'max-age=300, stale-while-revalidate=300, durable',
     )
 
+    const html = renderMarkdown(frontMatter.content)
+
     return {
       title: frontMatter.data?.title,
       description,
       filePath,
       content: frontMatter.content,
       frontmatter: frontMatter.data,
+      html,
     }
   })
 

src/utils/feed.functions.ts

@@ -11,9 +11,12 @@ import {
   buildFeedQueryConditions,
   filterByReleaseLevel,
 } from './feed.server'
+import { renderMarkdown } from '~/utils/markdown'
 
 // Transform database entry to API response format
 function transformFeedEntry(entry: typeof feedEntries.$inferSelect) {
+  const html = renderMarkdown(entry.content ?? '')
+
   return {
     _id: entry.entryId,
     id: entry.entryId,
@@ -32,6 +35,7 @@ function transformFeedEntry(entry: typeof feedEntries.$inferSelect) {
     featured: entry.featured ?? false,
     autoSynced: entry.autoSynced,
     lastSyncedAt: entry.lastSyncedAt?.getTime(),
+    html,
   }
 }