Update page.tsx

This commit is contained in:
MacRimi 2025-02-15 16:03:36 +01:00 committed by GitHub
parent bbc8fe655c
commit 4c572fdefa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -2,6 +2,7 @@ import fs from "fs"
import path from "path"
import { remark } from "remark"
import html from "remark-html"
import gfm from "remark-gfm" // 🔹 Agregamos soporte para imágenes y tablas
import dynamic from "next/dynamic"
import React from "react"
import parse from "html-react-parser"
@ -9,16 +10,16 @@ import parse from "html-react-parser"
// 🔹 Importamos `CopyableCode` dinámicamente para evitar problemas de SSR
const CopyableCode = dynamic(() => import("@/components/CopyableCode"), { ssr: false })
async function getChangelogContent() {
async function getGuideContent(slug: string) {
try {
const changelogPath = path.join(process.cwd(), "..", "CHANGELOG.md")
const fileContents = fs.readFileSync(changelogPath, "utf8")
const guidePath = path.join(process.cwd(), "..", "guides", `${slug}.md`)
const fileContents = fs.readFileSync(guidePath, "utf8")
const result = await remark().use(html).process(fileContents)
const result = await remark().use(gfm).use(html).process(fileContents) // 🔹 Se añade `remark-gfm`
return result.toString()
} catch (error) {
console.error("❌ Error al leer el archivo CHANGELOG.md", error)
return "<p class='text-red-600'>Error: No se pudo cargar el contenido del changelog.</p>"
console.error(`❌ Error al leer el archivo: ${slug}.md`, error)
return "<p class='text-red-600'>Error: No se pudo cargar el contenido de la guía.</p>"
}
}
@ -44,16 +45,15 @@ function wrapCodeBlocksWithCopyable(content: string) {
})
}
export default async function ChangelogPage() {
const changelogContent = await getChangelogContent()
const cleanedInlineCode = cleanInlineCode(changelogContent) // 🔹 Primero limpiamos código en línea
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
return (
<div className="min-h-screen bg-white text-gray-900">
<div className="container mx-auto px-4 py-16 max-w-4xl">
<h1 className="text-4xl font-bold mb-8">Changelog</h1>
<div className="prose max-w-none text-[16px]">{parsedContent}</div> {/* 📌 Texto ajustado a 16px */}
<div className="prose max-w-none text-[16px]">{parsedContent}</div> {/* 📌 Ahora con imágenes */}
</div>
</div>
)