diff --git a/web/app/guides/[slug]/page.tsx b/web/app/guides/[slug]/page.tsx index d89bdad..a30d53a 100644 --- a/web/app/guides/[slug]/page.tsx +++ b/web/app/guides/[slug]/page.tsx @@ -7,37 +7,38 @@ import matter from "gray-matter" import dynamic from "next/dynamic" import React from "react" import parse from "html-react-parser" +import Footer from "@/components/footer2" const CopyableCode = dynamic(() => import("@/components/CopyableCode"), { ssr: false }) const guidesDirectory = path.join(process.cwd(), "..", "guides") -// 🔹 Encuentra todos los archivos Markdown dentro de `/guides` + function getMarkdownFiles() { return fs .readdirSync(guidesDirectory) .filter((file) => file.endsWith(".md")) .map((file) => ({ - slug: file.replace(/\.md$/, ""), // 🔹 Quitamos la extensión .md + slug: file.replace(/\.md$/, ""), path: path.join(guidesDirectory, file), })) } -// 🔹 Obtiene el contenido de una guía específica + async function getGuideContent(slug: string) { try { const markdownFiles = getMarkdownFiles() const guideFile = markdownFiles.find((file) => file.slug === slug) if (!guideFile) { - console.error(`❌ No se encontró la guía: ${slug}`) - return { content: "
Error: No se encontró la guía solicitada.
", metadata: null } + console.error(`Guide not found.: ${slug}`) + return { content: "Error: Guide not found.
", metadata: null } } const fileContents = fs.readFileSync(guideFile.path, "utf8") - const { content, data } = matter(fileContents) // 🔹 Extrae metadata y contenido del `.md` + const { content, data } = matter(fileContents) - // 🔹 Convertimos el Markdown a HTML con soporte para imágenes y tablas + const result = await remark() .use(gfm.default || gfm) .use(html) @@ -50,7 +51,7 @@ async function getGuideContent(slug: string) { } } -// 🔹 Generamos rutas estáticas asegurando que Next.js las acepte + export async function generateStaticParams() { try { const markdownFiles = getMarkdownFiles() @@ -61,14 +62,14 @@ export async function generateStaticParams() { } } -// 🔹 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) => {
@@ -83,7 +84,7 @@ function wrapCodeBlocksWithCopyable(content: string) {
})
}
-// 🔹 Página principal de cada guía
+
export default async function GuidePage({ params }: { params: { slug: string } }) {
const { content, metadata } = await getGuideContent(params.slug)
const cleanedInlineCode = cleanInlineCode(content)
@@ -96,6 +97,7 @@ export default async function GuidePage({ params }: { params: { slug: string } }
{metadata?.description && {metadata.description}
}
{parsedContent}
+
)
}
diff --git a/web/app/guides/page.tsx b/web/app/guides/page.tsx
index ebe15d5..1df26bb 100644
--- a/web/app/guides/page.tsx
+++ b/web/app/guides/page.tsx
@@ -3,7 +3,7 @@ import fs from "fs"
import path from "path"
import matter from "gray-matter"
import Link from "next/link"
-import Footer from "@/components/footer"
+import Footer from "@/components/footer2"
const guidesDirectory = path.join(process.cwd(), "..", "guides")
@@ -64,7 +64,7 @@ export default function GuidesPage() {
))}
-
+
)
}
diff --git a/web/components/footer2.tsx b/web/components/footer2.tsx
new file mode 100644
index 0000000..5339585
--- /dev/null
+++ b/web/components/footer2.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import Link from "next/link"
+import { MessageCircle } from "lucide-react"
+import Image from "next/image"
+
+export default function Footer() {
+ return (
+
+ )
+}
+