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

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

diff --git a/web/app/guides/[slug]/page.tsx b/web/app/guides/[slug]/page.tsx
index fe71495..baa4f51 100644
--- a/web/app/guides/[slug]/page.tsx
+++ b/web/app/guides/[slug]/page.tsx
@@ -2,6 +2,9 @@ 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 })
 
 const guidesDirectory = path.join(process.cwd(), "..", "guides")
 
@@ -34,14 +37,25 @@ export async function generateStaticParams() {
   }
 }
 
+function wrapCodeBlocksWithCopyable(content: string) {
+  const codeBlockRegex = /<pre><code>([\s\S]*?)<\/code><\/pre>/g
+  return content.replace(codeBlockRegex, (match, code) => {
+    return `<CopyableCode code={\`${code.replace(/`/g, "\\`")}\`} />`
+  })
+}
+
 export default async function GuidePage({ params }: { params: { slug: string } }) {
-  const guideContent = await getGuideContent(params.slug)
+  let guideContent = await getGuideContent(params.slug)
+  guideContent = wrapCodeBlocksWithCopyable(guideContent)
 
   return (
-    <div className="container mx-auto px-4 py-16 max-w-3xl">
-      <div className="prose prose-lg" dangerouslySetInnerHTML={{ __html: guideContent }} />
+    <div className="container mx-auto px-4 py-16 max-w-3xl bg-white">
+      <div
+        className="prose prose-gray max-w-none
+          [&>h1]:text-gray-900 [&>h2]:text-gray-800 [&>h3]:text-gray-700
+          [&>p]:text-gray-600 [&>ul>li]:text-gray-600 [&>ol>li]:text-gray-600"
+        dangerouslySetInnerHTML={{ __html: guideContent }}
+      />
     </div>
   )
 }
-
-