Update page.tsx

This commit is contained in:
MacRimi 2025-02-15 15:17:01 +01:00 committed by GitHub
parent fb47e65b5f
commit 55adaae2a9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -3,8 +3,6 @@ import path from "path"
import { remark } from "remark" import { remark } from "remark"
import html from "remark-html" import html from "remark-html"
import dynamic from "next/dynamic" import dynamic from "next/dynamic"
import React from "react"
const CopyableCode = dynamic(() => import("@/components/CopyableCode"), { ssr: false }) const CopyableCode = dynamic(() => import("@/components/CopyableCode"), { ssr: false })
@ -25,24 +23,23 @@ export async function generateStaticParams() {
function wrapCodeBlocksWithCopyable(content: string) { function wrapCodeBlocksWithCopyable(content: string) {
return content.split(/(<pre><code>[\s\S]*?<\/code><\/pre>)/g).map((segment, index) => { return content.replace(
const match = segment.match(/<pre><code>([\s\S]*?)<\/code><\/pre>/) /<pre><code class="language-(.*?)">([\s\S]*?)<\/code><\/pre>/g,
if (match) { (match, lang, code) =>
const codeContent = match[1].trim() `<div class="copyable-code-container"><CopyableCode code="${encodeURIComponent(
return React.createElement(CopyableCode, { code: codeContent, key: index }) code.trim()
} )}" /></div>`
return segment )
})
} }
export default async function GuidePage({ params }: { params: { slug: string } }) { export default async function GuidePage({ params }: { params: { slug: string } }) {
const guideContent = await getGuideContent(params.slug) let guideContent = await getGuideContent(params.slug)
const wrappedContent = wrapCodeBlocksWithCopyable(guideContent) guideContent = wrapCodeBlocksWithCopyable(guideContent)
return ( return (
<div className="min-h-screen bg-white text-gray-900"> <div className="min-h-screen bg-white text-gray-900">
<div className="container mx-auto px-4 py-16 max-w-3xl"> <div className="container mx-auto px-4 py-16 max-w-3xl">
<div className="prose max-w-none">{wrappedContent}</div> <div className="prose max-w-none" dangerouslySetInnerHTML={{ __html: guideContent }} />
</div> </div>
</div> </div>
) )