Update page.tsx

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

View File

@ -6,7 +6,7 @@ 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 })
async function getGuideContent(slug: string) {
@ -26,12 +26,12 @@ export async function generateStaticParams() {
function cleanInlineCode(content: string) {
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>`
})
}
// 🔹 Envuelve los bloques de código en <CopyableCode />
function wrapCodeBlocksWithCopyable(content: string) {
return parse(content, {
replace: (domNode: any) => {
@ -48,13 +48,13 @@ function wrapCodeBlocksWithCopyable(content: string) {
export default async function GuidePage({ params }: { params: { slug: string } }) {
const guideContent = await getGuideContent(params.slug)
const cleanedInlineCode = cleanInlineCode(guideContent) // 🔹 Primero limpiamos código en línea
const parsedContent = wrapCodeBlocksWithCopyable(cleanedInlineCode) // 🔹 Luego aplicamos JSX a bloques de código
const cleanedInlineCode = cleanInlineCode(guideContent)
const parsedContent = wrapCodeBlocksWithCopyable(cleanedInlineCode)
return (
<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="prose max-w-none text-[16px]">{parsedContent}</div> {/* Tamaño de texto 16px */}
<div className="container mx-auto px-4 py-16 max-w-4xl">
<div className="prose max-w-none text-[16px]">{parsedContent}</div>
</div>
</div>
)