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

Update page.tsx

Browse Source
This commit is contained in:
MacRimi 2025-02-15 15:49:44 +01:00 committed by GitHub
parent 58e55fa1d9
commit 2428e3bea2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@ import dynamic from "next/dynamic"
import React from "react" import React from "react"
import parse from "html-react-parser" 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) {
@ -26,12 +26,12 @@ export async function generateStaticParams() {
function cleanInlineCode(content: string) { function cleanInlineCode(content: string) {
return content.replace(/<code>(.*?)<\/code>/g, (_, codeContent) => { return content.replace(/<code>(.*?)<\/code>/g, (_, codeContent) => {
const cleanedCode = codeContent.replace(/^`|`$/g, "") // 🔹 Elimina las comillas invertidas alrededor del código const cleanedCode = codeContent.replace(/^`|`$/g, "")
return `<code class="bg-gray-200 text-gray-900 px-1 rounded">${cleanedCode}</code>` return `<code class="bg-gray-200 text-gray-900 px-1 rounded">${cleanedCode}</code>`
}) })
} }
// 🔹 Envuelve los bloques de código en <CopyableCode />
function wrapCodeBlocksWithCopyable(content: string) { function wrapCodeBlocksWithCopyable(content: string) {
return parse(content, { return parse(content, {
replace: (domNode: any) => { replace: (domNode: any) => {
@ -48,13 +48,13 @@ function wrapCodeBlocksWithCopyable(content: string) {
export default async function GuidePage({ params }: { params: { slug: string } }) { export default async function GuidePage({ params }: { params: { slug: string } }) {
const guideContent = await getGuideContent(params.slug) const guideContent = await getGuideContent(params.slug)
const cleanedInlineCode = cleanInlineCode(guideContent) // 🔹 Primero limpiamos código en línea const cleanedInlineCode = cleanInlineCode(guideContent)
const parsedContent = wrapCodeBlocksWithCopyable(cleanedInlineCode) // 🔹 Luego aplicamos JSX a bloques de código const parsedContent = wrapCodeBlocksWithCopyable(cleanedInlineCode)
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-4xl"> {/* Aumentado a `max-w-4xl` */} <div className="container mx-auto px-4 py-16 max-w-4xl">
<div className="prose max-w-none text-[16px]">{parsedContent}</div> {/* Tamaño de texto 16px */} <div className="prose max-w-none text-[16px]">{parsedContent}</div>
</div> </div>
</div> </div>
) )