From d82df8795f7be14d046f2aefae6bbfb0fadcda43 Mon Sep 17 00:00:00 2001
From: MacRimi <123239993+MacRimi@users.noreply.github.com>
Date: Sat, 15 Feb 2025 11:49:53 +0100
Subject: [PATCH] Update page.tsx

---
 web/app/guides/[slug]/page.tsx | 64 +++++++++++++++++++++-------------
 1 file changed, 40 insertions(+), 24 deletions(-)

diff --git a/web/app/guides/[slug]/page.tsx b/web/app/guides/[slug]/page.tsx
index 0a5a2e6..5ba3862 100644
--- a/web/app/guides/[slug]/page.tsx
+++ b/web/app/guides/[slug]/page.tsx
@@ -1,10 +1,11 @@
+"use client"
+
+import { useState, useEffect } from "react"
 import fs from "fs"
 import path from "path"
 import { remark } from "remark"
 import html from "remark-html"
-import dynamic from "next/dynamic"
-
-const CopyableCode = dynamic(() => import("@/components/CopyableCode"), { ssr: false })
+import CopyableCode from "@/components/CopyableCode"
 
 const guidesDirectory = path.join(process.cwd(), "..", "guides")
 
@@ -37,34 +38,49 @@ export async function generateStaticParams() {
   }
 }
 
-function wrapCodeBlocksWithCopyable(content: string) {
+function processContent(content: string) {
   const codeBlockRegex = /<pre><code>([\s\S]*?)<\/code><\/pre>/g
   return content.replace(codeBlockRegex, (match, code) => {
-    return `<CopyableCode code={\`${code.replace(/`/g, "\\`")}\`} />`
+    return `<CopyableCodePlaceholder code="${encodeURIComponent(code)}" />`
   })
 }
 
-export default async function GuidePage({ params }: { params: { slug: string } }) {
-  let guideContent = await getGuideContent(params.slug)
-  guideContent = wrapCodeBlocksWithCopyable(guideContent)
+export default function GuidePage({ params }: { params: { slug: string } }) {
+  const [guideContent, setGuideContent] = useState<string>("")
+
+  useEffect(() => {
+    async function fetchContent() {
+      const content = await getGuideContent(params.slug)
+      setGuideContent(processContent(content))
+    }
+    fetchContent()
+  }, [params.slug])
+
+  useEffect(() => {
+    const placeholders = document.querySelectorAll("CopyableCodePlaceholder")
+    placeholders.forEach((placeholder, index) => {
+      // Added index for key
+      const code = decodeURIComponent(placeholder.getAttribute("code") || "")
+      const codeElement = <CopyableCode key={index} code={code} /> // Added key prop
+      placeholder.replaceWith(codeElement)
+    })
+  }, []) // Removed guideContent from dependencies
 
   return (
-    <div className="min-h-screen bg-white">
-      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8 text-gray-900">
-        <div
-          className="prose prose-gray max-w-none
-            [&>h1]:text-3xl [&>h1]:sm:text-4xl [&>h1]:font-bold [&>h1]:mb-6
-            [&>h2]:text-2xl [&>h2]:font-semibold [&>h2]:mt-8 [&>h2]:mb-4
-            [&>h3]:text-xl [&>h3]:font-medium [&>h3]:mt-6 [&>h3]:mb-3
-            [&>p]:mb-4 [&>p]:text-gray-600
-            [&>ul]:list-disc [&>ul]:pl-5 [&>ul]:mb-4
-            [&>ul>li]:text-gray-600 [&>ul>li]:mb-2
-            [&>ol]:list-decimal [&>ol]:pl-5 [&>ol]:mb-4
-            [&>ol>li]:text-gray-600 [&>ol>li]:mb-2
-            [&>a]:text-blue-600 [&>a:hover]:underline"
-          dangerouslySetInnerHTML={{ __html: guideContent }}
-        />
-      </div>
+    <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8 text-gray-900">
+      <div
+        className="prose prose-gray max-w-none
+          [&>h1]:text-3xl [&>h1]:sm:text-4xl [&>h1]:font-bold [&>h1]:mb-6
+          [&>h2]:text-2xl [&>h2]:font-semibold [&>h2]:mt-8 [&>h2]:mb-4
+          [&>h3]:text-xl [&>h3]:font-medium [&>h3]:mt-6 [&>h3]:mb-3
+          [&>p]:mb-4 [&>p]:text-gray-600
+          [&>ul]:list-disc [&>ul]:pl-5 [&>ul]:mb-4
+          [&>ul>li]:text-gray-600 [&>ul>li]:mb-2
+          [&>ol]:list-decimal [&>ol]:pl-5 [&>ol]:mb-4
+          [&>ol>li]:text-gray-600 [&>ol>li]:mb-2
+          [&>a]:text-blue-600 [&>a:hover]:underline"
+        dangerouslySetInnerHTML={{ __html: guideContent }}
+      />
     </div>
   )
 }