diff --git a/web/app/changelog/page.tsx b/web/app/changelog/page.tsx index 10e276f..4e03454 100644 --- a/web/app/changelog/page.tsx +++ b/web/app/changelog/page.tsx @@ -1,29 +1,60 @@ import fs from "fs" import path from "path" +import { remark } from "remark" +import html from "remark-html" +import dynamic from "next/dynamic" +import React from "react" +import parse from "html-react-parser" -async function getChangelog() { - const changelogPath = path.join(process.cwd(), "..", "CHANGELOG.md") +// 🔹 Importamos `CopyableCode` dinámicamente para evitar problemas de SSR +const CopyableCode = dynamic(() => import("@/components/CopyableCode"), { ssr: false }) + +async function getChangelogContent() { try { - return fs.readFileSync(changelogPath, "utf8") + const changelogPath = path.join(process.cwd(), "..", "CHANGELOG.md") + const fileContents = fs.readFileSync(changelogPath, "utf8") + + const result = await remark().use(html).process(fileContents) + return result.toString() } catch (error) { - console.error("Error reading changelog file:", error) - return "
Changelog content not found.
" + console.error("❌ Error al leer el archivo CHANGELOG.md", error) + return "Error: No se pudo cargar el contenido del changelog.
" } } +// 🔹 Limpia las comillas invertidas en fragmentos de código en línea +function cleanInlineCode(content: string) { + return content.replace(/(.*?)<\/code>/g, (_, codeContent) => {
+ return `${codeContent.replace(/^`|`$/g, "")}
`
+ })
+}
+
+// 🔹 Envuelve los bloques de código en
+function wrapCodeBlocksWithCopyable(content: string) {
+ return parse(content, {
+ replace: (domNode: any) => {
+ if (domNode.name === "pre" && domNode.children.length > 0) {
+ const codeElement = domNode.children.find((child: any) => child.name === "code")
+ if (codeElement) {
+ const codeContent = codeElement.children[0]?.data?.trim() || ""
+ return
+ }
+ }
+ }
+ })
+}
+
export default async function ChangelogPage() {
- const changelogContent = await getChangelog()
+ const changelogContent = await getChangelogContent()
+ const cleanedInlineCode = cleanInlineCode(changelogContent) // 🔹 Primero limpiamos código en línea
+ const parsedContent = wrapCodeBlocksWithCopyable(cleanedInlineCode) // 🔹 Luego aplicamos JSX a bloques de código
return (
-
+
- Changelog
-
+ Changelog
+ {parsedContent} {/* 📌 Texto ajustado a 16px */}
)
}
-