Update topics to categories

src/layouts/BlogPost.astro

@@ -5,7 +5,7 @@ import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
 import FormattedDate from "../components/FormattedDate.astro";
 import AuthorList from "../components/AuthorList.astro";
-import TopicList from "../components/TopicList.astro";
+import CategorieList from "../components/CategorieList.astro";
 import { Image } from "astro:assets";
 import { ViewTransitions } from "astro:transitions";
 import EmojiReactions from "../components/backend-services/EmojiReactions.astro";
@@ -20,7 +20,7 @@ const {
   updatedDate,
   heroImage,
   authors,
-  topics,
+  categories,
 } = Astro.props;
 ---
 
@@ -55,10 +55,10 @@ const {
         <footer>
           <EmojiReactions id={id} />
           {
-            topics.length > 0 && (
+            categories.length > 0 && (
               <>
-                <h2>Temas</h2>
-                <TopicList topics={topics} />
+                <h2>Categorías</h2>
+                <CategorieList categories={categories} />
               </>
             )
           }

src/pages/404.astro

@@ -3,8 +3,8 @@ import Layout from "../layouts/Page.astro";
 ---
 
 <Layout
-  title="Temas"
-  description="Una visión general de todos los temas en este blog."
+  title="Error 404"
+  description="Página no encontrada."
 >
   <h1>404 - no encontrado :(</h1>
   <div class="not-prose">

src/pages/blog/[...page].astro

@@ -46,7 +46,7 @@ const { page } = Astro.props;
   <h1>Blog</h1>
   <p>
     Buscar entradas del blog por {" "}
-    <a href="/topics" class="text-link no-underline"> tema</a>.
+    <a href="/categories" class="text-link no-underline"> categoría</a>.
   </p>
   {
     !!import.meta.env.SECRET_APPWRITE_API_KEY && (

src/pages/categories/[...slug].astro

@@ -0,0 +1,44 @@
+---
+import PostList from "../../components/PostList.astro";
+import Layout from "../../layouts/Page.astro";
+import { type CollectionEntry, getCollection } from "astro:content";
+
+export async function getStaticPaths() {
+  const categories = await getCollection("categorie");
+  return categories
+    .filter((categorie) => (categorie.slug as string) !== "uncategorized")
+    .map((categorie) => ({
+      params: { slug: categorie.slug },
+      props: categorie,
+    }));
+}
+type Props = CollectionEntry<"categorie">;
+
+const categorie = Astro.props;
+const { Content } = await categorie.render();
+
+const posts = await getCollection("blog");
+const categoriePosts = posts
+  .filter((post) => post.data.draft === false)
+  .filter((post) => post.data.categories.includes(categorie.slug))
+  .sort((a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf());
+
+const title = categorie.data.title;
+const description = `Todas las entradas sobre ${title}`;
+---
+
+<Layout title={title} description={description}>
+  <section>
+    <h1>{categorie.data.title}</h1>
+    <Content />
+    {categoriePosts.length === 0 && <p>Aún no hay entradas.</p>}
+    {
+      categoriePosts.length > 0 && (
+        <>
+          <h2>Entradas sobre {categorie.data.title.toLowerCase()}</h2>
+          <PostList posts={categoriePosts} />
+        </>
+      )
+    }
+  </section>
+</Layout>

src/pages/categories/index.astro

@@ -0,0 +1,12 @@
+---
+import Layout from "../../layouts/Page.astro";
+import CategorieList from "../../components/CategorieList.astro";
+---
+
+<Layout
+  title="Categorías"
+  description="Una visión general de todos las categorías en este blog."
+>
+  <h1>Todos las categorías de este blog</h1>
+  <CategorieList categories="all" />
+</Layout>

src/pages/topics/uncategorized.astro → src/pages/categories/uncategorized.astro

@@ -6,11 +6,11 @@ import { getCollection } from "astro:content";
 const posts = await getCollection("blog");
 const uncategorizedPost = posts
   .filter((post) => post.data.draft === false)
-  .filter((post) => post.data.topics.length === 0)
+  .filter((post) => post.data.categories.length === 0)
   .sort((a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf());
 
 const title = "Sin categoría";
-const description = "Entradas de blog sin tema asociado";
+const description = "Entradas de blog sin categoría asociada";
 ---
 
 <Layout title={title} description={description}>