Add tag pages

src/components/ArticlePreview.astro

@@ -1,5 +1,6 @@
 ---
-import Article from "$data/articles"
+import { Article } from "$data/articles"
+import { readableDate } from "../utils"
 
 export interface Props {
   article: Article
@@ -9,12 +10,12 @@ const { article } = Astro.props
 ---
 
 <section class="mb-3">
-  <a href={`/article/${article.slug}`}>
+  <a href={article.url}>
     <h4 class="inline-block m-0 text-xl">{article.title}</h4>
   </a>
 
   <div class="mb-2 text-creative-work text-sm">
-    {article.dateString}
+    {readableDate(article.date)}
     ·
     {article.tags
       .map((tag) => <a href="{ '/articles/tags/' + tag}">{tag}</a>)

src/data/articles.ts

@@ -1,12 +1,10 @@
 import type { BaseObject } from "./shared"
 import { postProcessBase } from "./shared"
-import { readableDate } from "../utils"
 
 interface Article extends BaseObject {
   title: string
   tagline?: string
   date: Date
-  dateString?: string
   tags: string[]
 }
 
@@ -16,7 +14,13 @@ interface Article extends BaseObject {
 
 function postProcessArticle(article: Article): Article {
   article = postProcessBase(article) as Article
-  article.dateString = readableDate(new Date(article.date)) // NOTE: For some reason, our date become a string, weird
+
+  article.url = new URL(`/article/${article.slug}`, "http://localhost:3000")
+
+  // NOTE: For some reason, Astro transform our dates into string so let's check for that and return a proper date
+  if (typeof article.date === "string") {
+    article.date = new Date(article.date)
+  }
 
   return article
 }

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

@@ -5,7 +5,11 @@ import { postProcessArticle } from "$data/articles"
 
 export async function getStaticPaths({ paginate }) {
   let articles = await Astro.fetchContent("../../content/articles/**/*.md")
-  articles = articles.map((article) => postProcessArticle(article))
+  articles = articles
+    .map((article) => postProcessArticle(article))
+    .sort((a, b) => {
+      return b.date.getTime() - a.date.getTime()
+    })
 
   return paginate(articles, { pageSize: 5 })
 }

src/pages/articles/tags/[tag]/[...page].astro

@@ -0,0 +1,45 @@
+---
+import BaseLayout from "$layouts/BaseLayout.astro"
+import ArticlePreview from "$components/ArticlePreview.astro"
+import { postProcessArticle } from "$data/articles"
+
+export async function getStaticPaths({ paginate }) {
+  let articles = await Astro.fetchContent("../../../../content/articles/**/*.md")
+  articles = articles
+    .map((article) => postProcessArticle(article))
+    .sort((a, b) => {
+      return b.date.getTime() - a.date.getTime()
+    })
+
+  const tagList = new Array()
+  articles.forEach((article) => {
+    tagList.push(...article.tags)
+  })
+
+  return tagList.map((tag) => {
+    const filteredArticles = articles.filter((article) => article.tags.includes(tag))
+    return paginate(filteredArticles, { params: { tag }, pageSize: 5 })
+  })
+}
+
+const { page } = Astro.props
+---
+
+<BaseLayout title="Articles">
+  <article class="w-articleList mx-auto flex flex-col md:flex-row">
+    <div class="sm:w-[80%]">
+      <h2>Articles</h2>
+      {page.data.map((item) => <ArticlePreview article={item} />)}
+    </div>
+
+    <aside class="sm:w-[20%]">
+      <section>
+        <h2>Tags</h2>
+        <ul></ul>
+      </section>
+      <section>
+        <h2>Year</h2>
+      </section>
+    </aside>
+  </article>
+</BaseLayout>