Tag navigation, better directory layout

.vscode/settings.json

@@ -14,5 +14,5 @@
   "prettier.documentSelectors": ["**/*.astro"],
   "markdownlint.config": {
     "MD033": false // Since we use components in our markdown files, we disable this rule that prevents HTML
-  }
+  },
 }

src/components/articleList/ArticleListAside.astro

@@ -0,0 +1,28 @@
+---
+import { Article } from "$data/articles"
+
+const articles = (await Astro.fetchContent("/content/articles/**/*.md")) as Article[]
+const tags: Array<[string, number]> = [
+  ...articles
+    .flatMap((article) => [...article.tags])
+    .reduce((acc, e) => acc.set(e, (acc.get(e) || 0) + 1), new Map()),
+].sort((a, b) => {
+  return b[1] - a[1]
+})
+---
+
+<aside class="sm:w-[20%]">
+  <section>
+    <h2>Tags</h2>
+    <ul>
+      {tags.map((tag) => (
+        <li>
+          <a href={"/articles/tags/" + tag[0]}>{tag[0]}</a> ({tag[1]})
+        </li>
+      ))}
+    </ul>
+  </section>
+  <section>
+    <h2>Year</h2>
+  </section>
+</aside>

src/components/Header.astro → src/components/layout/Header.astro

@@ -1,5 +1,5 @@
 ---
-import Socials from "$components/Socials.astro"
+import Socials from "$components/layout/Socials.astro"
 const menu = ["Projects", "Articles", "Wiki", "Catalogue"]
 ---
 

src/components/ArticlePreview.astro → src/components/shared/ArticlePreview.astro

@@ -1,6 +1,6 @@
 ---
 import { Article } from "$data/articles"
-import { readableDate } from "../utils"
+import { readableDate } from "$utils"
 
 export interface Props {
   article: Article

src/layouts/ArticleLayout.astro

@@ -1,6 +1,6 @@
 ---
 import BaseLayout from "$layouts/BaseLayout.astro"
-import ContentHeader from "$components/ContentHeader.astro"
+import ContentHeader from "$components/shared/ContentHeader.astro"
 
 const { article } = Astro.props
 ---

src/layouts/ArticleListLayout.astro

@@ -0,0 +1,26 @@
+---
+import BaseLayout from "$layouts/BaseLayout.astro"
+import ArticlePreview from "$components/shared/ArticlePreview.astro"
+import ArticleListAside from "$components/articleList/ArticleListAside.astro"
+
+const { page, title } = Astro.props
+---
+
+<BaseLayout {title}>
+  <article class="w-articleList mx-auto flex flex-col md:flex-row">
+    <div class="sm:w-[80%]">
+      <h2>{title}</h2>
+      {page.data.map((item) => <ArticlePreview article={item} />)}
+      <div>
+        {page.url.prev && <a href={page.url.prev}>Newer posts</a>}
+        {page.url.next && (
+          <a class="float-right" href={page.url.next}>
+            Older posts
+          </a>
+        )}
+      </div>
+    </div>
+
+    <ArticleListAside />
+  </article>
+</BaseLayout>

src/layouts/BaseLayout.astro

@@ -1,6 +1,6 @@
 ---
-import Header from "$components/Header.astro"
-import Socials from "$components/Socials.astro"
+import Header from "$components/layout/Header.astro"
+import Socials from "$components/layout/Socials.astro"
 import { Sprite } from "astro-icon"
 import { generateSocialImage } from "astro-social-images"
 

src/layouts/WikiLayout.astro

@@ -1,8 +1,8 @@
 ---
 import BaseLayout from "$layouts/BaseLayout.astro"
-import WikiNavigation from "$components/WikiNavigation.astro"
-import ContentHeader from "$components/ContentHeader.astro"
-import WikiTOC from "$components/WikiTOC.astro"
+import WikiNavigation from "$components/wiki/WikiNavigation.astro"
+import ContentHeader from "$components/shared/ContentHeader.astro"
+import WikiTOC from "$components/wiki/WikiTOC.astro"
 import { readableDate } from "$utils"
 
 const { wikiItem } = Astro.props

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

@@ -1,10 +1,9 @@
 ---
-import BaseLayout from "$layouts/BaseLayout.astro"
-import ArticlePreview from "$components/ArticlePreview.astro"
-import { postProcessArticle } from "$data/articles"
+import ArticleListLayout from "$layouts/ArticleListLayout.astro"
+import { postProcessArticle, Article } from "$data/articles"
 
 export async function getStaticPaths({ paginate }) {
-  let articles = await Astro.fetchContent("/content/articles/**/*.md")
+  let articles = (await Astro.fetchContent("/content/articles/**/*.md")) as Article[]
   articles = articles
     .map((article) => postProcessArticle(article))
     .sort((a, b) => {
@@ -17,29 +16,4 @@ export async function getStaticPaths({ paginate }) {
 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>
-        {page.url.prev && <a href={page.url.prev}>Newer posts</a>}
-        {page.url.next && (
-          <a class="float-right" href={page.url.next}>
-            Older posts
-          </a>
-        )}
-      </div>
-    </div>
-
-    <aside class="sm:w-[20%]">
-      <section>
-        <h2>Tags</h2>
-        <ul></ul>
-      </section>
-      <section>
-        <h2>Year</h2>
-      </section>
-    </aside>
-  </article>
-</BaseLayout>
+<ArticleListLayout {page} title="Articles" />

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

@@ -1,10 +1,9 @@
 ---
-import BaseLayout from "$layouts/BaseLayout.astro"
-import ArticlePreview from "$components/ArticlePreview.astro"
-import { postProcessArticle } from "$data/articles"
+import ArticleListLayout from "$layouts/ArticleListLayout.astro"
+import { postProcessArticle, Article } from "$data/articles"
 
 export async function getStaticPaths({ paginate }) {
-  let articles = await Astro.fetchContent("/content/articles/**/*.md")
+  let articles = (await Astro.fetchContent("/content/articles/**/*.md")) as Article[]
   articles = articles
     .map((article) => postProcessArticle(article))
     .sort((a, b) => {
@@ -25,31 +24,7 @@ export async function getStaticPaths({ paginate }) {
 }
 
 const { page } = Astro.props
+const tag = Astro.request.params.tag
 ---
 
-<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>
-        {page.url.prev && <a href={page.url.prev}>Newer posts</a>}
-        {page.url.next && (
-          <a class="float-right" href={page.url.next}>
-            Older posts
-          </a>
-        )}
-      </div>
-    </div>
-
-    <aside class="sm:w-[20%]">
-      <section>
-        <h2>Tags</h2>
-        <ul></ul>
-      </section>
-      <section>
-        <h2>Year</h2>
-      </section>
-    </aside>
-  </article>
-</BaseLayout>
+<ArticleListLayout {page} title={"Articles tagged " + tag} />

src/pages/index.astro

@@ -1,6 +1,6 @@
 ---
 import BaseLayout from "$layouts/BaseLayout.astro"
-import ArticlePreview from "$components/ArticlePreview.astro"
+import ArticlePreview from "$components/shared/ArticlePreview.astro"
 import { postProcessArticle } from "$data/articles"
 import { postProcessWikiItem } from "$data/wiki"
 import { postProcessProject } from "$data/projects"

tsconfig.json

@@ -13,5 +13,5 @@
     },
     "types": ["vite/client", "node"]
   },
-  "exclude": ["node_modules", "**/node_modules/*", ".vscode"]
+  "exclude": ["node_modules", "**/node_modules/*", ".vscode", "dist"]
 }