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

Update page.tsx

Browse Source
This commit is contained in:
MacRimi 2025-02-15 15:20:18 +01:00 committed by GitHub
parent 55adaae2a9
commit e87f7c0074
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,10 @@ 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"
import parse from "html-react-parser"
// Importamos `CopyableCode` de forma dinámica para evitar problemas de SSR
const CopyableCode = dynamic(() => import("@/components/CopyableCode"), { ssr: false }) const CopyableCode = dynamic(() => import("@/components/CopyableCode"), { ssr: false })
async function getGuideContent(slug: string) { async function getGuideContent(slug: string) {
@ -23,23 +26,27 @@ export async function generateStaticParams() {
function wrapCodeBlocksWithCopyable(content: string) { function wrapCodeBlocksWithCopyable(content: string) {
return content.replace( return parse(content, {
/<pre><code class="language-(.*?)">([\s\S]*?)<\/code><\/pre>/g, replace: (domNode: any) => {
(match, lang, code) => if (domNode.name === "pre" && domNode.children.length > 0) {
`<div class="copyable-code-container"><CopyableCode code="${encodeURIComponent( const codeElement = domNode.children.find((child: any) => child.name === "code")
code.trim() if (codeElement) {
)}" /></div>` const codeContent = codeElement.children[0]?.data?.trim() || ""
) return <CopyableCode code={codeContent} />
}
}
}
})
} }
export default async function GuidePage({ params }: { params: { slug: string } }) { export default async function GuidePage({ params }: { params: { slug: string } }) {
let guideContent = await getGuideContent(params.slug) const guideContent = await getGuideContent(params.slug)
guideContent = wrapCodeBlocksWithCopyable(guideContent) const parsedContent = 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" dangerouslySetInnerHTML={{ __html: guideContent }} /> <div className="prose max-w-none">{parsedContent}</div>
</div> </div>
</div> </div>
) )