Mirrors/ProxMenux
1
0
Fork 0
mirror of https://github.com/MacRimi/ProxMenux.git synced 2025-07-03 06:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update page.tsx

Browse Source
This commit is contained in:
MacRimi 2025-02-15 10:21:28 +01:00 committed by GitHub
parent 52c1e60c2c
commit a659b20af9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
web/app/guides/[slug]/page.tsx
View File

@ -2,6 +2,9 @@ import fs from "fs"
import path from "path" 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"
const CopyableCode = dynamic(() => import("@/components/CopyableCode"), { ssr: false })
const guidesDirectory = path.join(process.cwd(), "..", "guides") 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 } }) { 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 ( return (
<div className="container mx-auto px-4 py-16 max-w-3xl"> <div className="container mx-auto px-4 py-16 max-w-3xl bg-white">
<div className="prose prose-lg" dangerouslySetInnerHTML={{ __html: guideContent }} /> <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> </div>
) )
} }