Fix/doc code (#78)

* fix: DocCodeBlock

* fix: code-block

* fix: dark mode color install code block

Author: ibelick

components/app/doc-code-block.tsx

@@ -1,9 +1,4 @@
-"use client"
-
-import { readFileContent } from "@/lib/actions"
 import { codeToHtml } from "@/lib/shiki"
-import { useTheme } from "next-themes"
-import { useEffect, useState } from "react"
 import { ClientCodeWrapper } from "./client-code-wrapper"
 
 type DocCodeBlockProps = {
@@ -12,62 +7,20 @@ type DocCodeBlockProps = {
   filePath?: string
 } & React.HTMLAttributes<HTMLDivElement>
 
-const themeName: Record<string, string> = {
-  light: "github-light",
-  dark: "github-dark",
-  system: "github-dark",
-}
-
-export function DocCodeBlock({
+export async function DocCodeBlock({
   language,
   code,
-  filePath,
   ...props
 }: DocCodeBlockProps) {
-  const [highlightedHtml, setHighlightedHtml] = useState<string | null>(null)
-  const [fileContent, setFileContent] = useState<string>(code || "")
-  const { theme } = useTheme()
-
-  useEffect(() => {
-    async function highlight() {
-      const content = filePath ? await readFileContent(filePath) : code || ""
-
-      setFileContent(content)
-
-      if (!content) {
-        setHighlightedHtml("<pre><code></code></pre>")
-        return
-      }
-
-      const html = await codeToHtml({
-        code: content,
-        lang: language,
-        theme: themeName[theme as keyof typeof themeName],
-      })
-      setHighlightedHtml(html)
-    }
-    highlight()
-  }, [code, language, theme, filePath])
+  const html = await codeToHtml({ code, lang: language })
 
-  // SSR fallback: render plain code if not hydrated yet
   return (
-    <ClientCodeWrapper code={fileContent}>
-      {highlightedHtml ? (
-        <div
-          dangerouslySetInnerHTML={{ __html: highlightedHtml }}
-          className="not-prose bg-background border-border [&_pre]:!bg-background overflow-auto rounded-md border p-2 text-[13px]"
-          {...props}
-        />
-      ) : (
-        <div
-          className="not-prose bg-background border-border overflow-auto rounded-md border p-2 text-[13px]"
-          {...props}
-        >
-          <pre>
-            <code>{fileContent}</code>
-          </pre>
-        </div>
-      )}
+    <ClientCodeWrapper code={code}>
+      <div
+        dangerouslySetInnerHTML={{ __html: html }}
+        className="not-prose bg-background border-border overflow-auto rounded-md border p-2 text-[13px] dark:[&_pre]:!bg-transparent dark:[&_span]:!text-white"
+        {...props}
+      />
     </ClientCodeWrapper>
   )
 }

mdx-components.tsx

@@ -3,6 +3,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { cn } from "@/lib/utils"
 import type { MDXComponents } from "mdx/types"
 import Link from "next/link"
+import { extractCodeFromFilePath } from "./lib/code"
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
@@ -12,9 +13,8 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
         {children}
       </code>
     ),
-    // @ts-ignore
-    a: (props: React.ComponentProps<typeof Link>) => (
-      <Link {...props} href={props.href || ""}>
+    a: (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
+      <Link {...props} href={props.href || "#"}>
         {props.children}
       </Link>
     ),
@@ -23,8 +23,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
         {children}
       </Link>
     ),
-    // @ts-ignore
-    CodeBlock: async ({
+    CodeBlock: ({
       language,
       code,
       filePath,
@@ -34,14 +33,11 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
       code: string
       filePath?: string
     } & React.HTMLAttributes<HTMLDivElement>) => {
-      return (
-        <DocCodeBlock
-          language={language}
-          code={code}
-          filePath={filePath}
-          {...props}
-        />
-      )
+      const fileContent = filePath
+        ? extractCodeFromFilePath(filePath)
+        : code || ""
+
+      return <DocCodeBlock language={language} code={fileContent} {...props} />
     },
     Step: ({ className, children, ...props }: React.ComponentProps<"h3">) => (
       <h3 className={cn("step", className)} data-heading="3" {...props}>