feat: style keywords page

Signed-off-by: João Augusto Costa Branco Marado Torres <torres.dev@disroot.org>

1 files changed, 29 insertions, 5 deletions

diff --git a/src/pages/blog/keywords/[...slug].astro b/src/pages/blog/keywords/[keyword].astro
index 724e8b7..8f0494b 100644
--- a/src/pages/blog/keywords/[...slug].astro
+++ b/src/pages/blog/keywords/[keyword].astro
@@ -2,6 +2,7 @@
 import { type CollectionEntry, getCollection } from "astro:content";
 import Base from "@layouts/Base.astro";
 import BlogCard from "@components/BlogCard.astro";
+import SimplePostList from "@components/templates/SimplePostList.astro";
 
 type Props = { posts: CollectionEntry<"blog">[] };
 
@@ -15,7 +16,7 @@ export async function getStaticPaths() {
     ).values(),
   ];
   return keywords.map((k) => ({
-    params: { slug: k },
+    params: { keyword: k },
     props: {
       posts: posts.filter((post) =>
         post.data.keywords.some((i) => i.localeCompare(k) === 0)
@@ -24,8 +25,8 @@ export async function getStaticPaths() {
   }));
 }
 
-const title = "Blog";
-const description = "Latest articles.";
+const title = `Blogue &ndash ${Astro.params.keyword}`;
+const description = `Últimas postagens da categoria ${Astro.params.keyword}.`;
 
 const posts = Astro.props.posts.sort((a, b) =>
   new Date(b.data.dateCreated).valueOf() -
@@ -34,7 +35,30 @@ const posts = Astro.props.posts.sort((a, b) =>
 ---
 
 <Base {title} {description}>
-  <main>
-    <h2>Blogue</h2> {posts.map((post) => <BlogCard {...post} />)}
+  <main
+    itemprop="mainContentOfPage"
+    itemscope
+    itemtype="https://schema.org/WebPageElement"
+  >
+    <section
+      id="posts"
+      itemprop="citation"
+      itemscope
+      itemtype="http://schema.org/Blog"
+    >
+      <h2 itemprop="name description" set:html={title} />
+      <SimplePostList
+        {posts}
+        dateOptions={{
+          weekday: "long",
+          year: "numeric",
+          month: "long",
+          day: "numeric",
+          hour: "2-digit",
+          minute: "2-digit",
+          timeZoneName: "long",
+        }}
+      />
+    </section>
   </main>
 </Base>