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

Update page.tsx

Browse Source
This commit is contained in:
MacRimi 2025-02-15 11:49:53 +01:00 committed by GitHub
parent 56dc21fc77
commit d82df8795f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 40 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,11 @@
"use client"
import { useState, useEffect } from "react"
import fs from "fs" 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" import CopyableCode from "@/components/CopyableCode"
const CopyableCode = dynamic(() => import("@/components/CopyableCode"), { ssr: false })
const guidesDirectory = path.join(process.cwd(), "..", "guides") 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 const codeBlockRegex = /<pre><code>([\s\S]*?)<\/code><\/pre>/g
return content.replace(codeBlockRegex, (match, code) => { 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 } }) { export default function GuidePage({ params }: { params: { slug: string } }) {
let guideContent = await getGuideContent(params.slug) const [guideContent, setGuideContent] = useState<string>("")
guideContent = wrapCodeBlocksWithCopyable(guideContent)
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 ( 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="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8 text-gray-900"> <div
<div className="prose prose-gray max-w-none
className="prose prose-gray max-w-none [&>h1]:text-3xl [&>h1]:sm:text-4xl [&>h1]:font-bold [&>h1]:mb-6
[&>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
[&>h2]:text-2xl [&>h2]:font-semibold [&>h2]:mt-8 [&>h2]:mb-4 [&>h3]:text-xl [&>h3]:font-medium [&>h3]:mt-6 [&>h3]:mb-3
[&>h3]:text-xl [&>h3]:font-medium [&>h3]:mt-6 [&>h3]:mb-3 [&>p]:mb-4 [&>p]:text-gray-600
[&>p]:mb-4 [&>p]:text-gray-600 [&>ul]:list-disc [&>ul]:pl-5 [&>ul]:mb-4
[&>ul]:list-disc [&>ul]:pl-5 [&>ul]:mb-4 [&>ul>li]:text-gray-600 [&>ul>li]:mb-2
[&>ul>li]:text-gray-600 [&>ul>li]:mb-2 [&>ol]:list-decimal [&>ol]:pl-5 [&>ol]:mb-4
[&>ol]:list-decimal [&>ol]:pl-5 [&>ol]:mb-4 [&>ol>li]:text-gray-600 [&>ol>li]:mb-2
[&>ol>li]:text-gray-600 [&>ol>li]:mb-2 [&>a]:text-blue-600 [&>a:hover]:underline"
[&>a]:text-blue-600 [&>a:hover]:underline" dangerouslySetInnerHTML={{ __html: guideContent }}
dangerouslySetInnerHTML={{ __html: guideContent }} />
/>
</div>
</div> </div>
) )
} }