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

create RSS page

Browse Source
This commit is contained in:
MacRimi
2025-05-27 17:16:44 +02:00
parent 32bd9aa678
commit a8c287d021
4 changed files with 160 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
web/app/changelog/page.tsx
View File

@@ -2,13 +2,13 @@ import fs from "fs"
import path from "path"
import { remark } from "remark"
import html from "remark-html"
import * as gfm from "remark-gfm" // ✅ Asegura la correcta importación de `remark-gfm`
import * as gfm from "remark-gfm"
import dynamic from "next/dynamic"
import React from "react"
import parse from "html-react-parser"
import Footer from "@/components/footer"
import RSSLink from "@/components/rss-link"
// 🔹 Importamos `CopyableCode` dinámicamente para evitar problemas de SSR
// Import CopyableCode dynamically to avoid SSR issues
const CopyableCode = dynamic(() => import("@/components/CopyableCode"), { ssr: false })
async function getChangelogContent() {
@@ -16,33 +16,33 @@ async function getChangelogContent() {
const changelogPath = path.join(process.cwd(), "..", "CHANGELOG.md")
if (!fs.existsSync(changelogPath)) {
console.error("❌ Archivo CHANGELOG.md no encontrado.")
return "<p class='text-red-600'>Error: No se encontró el archivo CHANGELOG.md</p>"
console.error("❌ CHANGELOG.md file not found.")
return "<p class='text-red-600'>Error: CHANGELOG.md file not found</p>"
}
const fileContents = fs.readFileSync(changelogPath, "utf8")
// ✅ Agregamos `remark-gfm` para permitir imágenes, tablas y otros elementos avanzados de Markdown
// Add remark-gfm to support images, tables and other advanced Markdown elements
const result = await remark()
.use(gfm.default || gfm) // ✅ Manejo seguro de `remark-gfm`
.use(gfm.default || gfm) // Safe handling of remark-gfm
.use(html)
.process(fileContents)
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 reading CHANGELOG.md file", error)
return "<p class='text-red-600'>Error: Could not load changelog content.</p>"
}
}
// 🔹 Limpia las comillas invertidas en fragmentos de código en línea
// Clean backticks in inline code fragments
function cleanInlineCode(content: string) {
return content.replace(/<code>(.*?)<\/code>/g, (_, codeContent) => {
return `<code class="bg-gray-200 text-gray-900 px-1 rounded">${codeContent.replace(/^`|`$/g, "")}</code>`
})
}
// 🔹 Envuelve los bloques de código en <CopyableCode />
// Wrap code blocks with CopyableCode component
function wrapCodeBlocksWithCopyable(content: string) {
return parse(content, {
replace: (domNode: any) => {
@@ -53,20 +53,24 @@ function wrapCodeBlocksWithCopyable(content: string) {
return <CopyableCode code={codeContent} />
}
}
}
},
})
}
export default async function ChangelogPage() {
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
const cleanedInlineCode = cleanInlineCode(changelogContent) // First clean inline code
const parsedContent = wrapCodeBlocksWithCopyable(cleanedInlineCode) // Then apply JSX to code blocks
return (
<div className="min-h-screen bg-white text-gray-900">
<div className="container mx-auto px-4 py-16" style={{ maxWidth: "980px" }}> {/* 📌 Ajuste exacto como GitHub */}
<div className="container mx-auto px-4 py-16" style={{ maxWidth: "980px" }}>
{" "}
{/* Exact adjustment like GitHub */}
<h1 className="text-4xl font-bold mb-8">Changelog</h1>
<div className="prose max-w-none text-[16px]">{parsedContent}</div> {/* 📌 Texto ajustado a 16px */}
{/* RSS Link Component */}
<RSSLink />
<div className="prose max-w-none text-[16px]">{parsedContent}</div> {/* Text adjusted to 16px */}
</div>
<Footer />
</div>