Render page lists for AoC

src/components/headers/Article.astro

@@ -1,5 +1,6 @@
 ---
 import type { Dayjs } from "dayjs";
+import Base from "./Base.astro";
 
 interface Props {
   title: string;
@@ -10,12 +11,12 @@ interface Props {
 
 const { title, date, tags = [], github } = Astro.props;
 ---
-<header class="p-header">
-  <h1 class="p-header__heading">{title}</h1>
+
+<Base title={title}>
   <div class="p-header__meta">
     <span class="p_date">
       <img class="p_date__icon" width="120" height="123" src="/static/svg/calendar.svg" alt="">
-      &nbsp;{date.format("MMM DD, YYYY")}
+      <time datetime={date.toISOString()}>{date.format("MMM DD, YYYY")}</time>
     </span>
 
     <!-- {%- include "partials/tags.html" -%} -->
@@ -39,5 +40,4 @@ const { title, date, tags = [], github } = Astro.props;
       </svg>
     </a>
   )}
-  
-</header>
+</Base>

src/components/headers/Base.astro

@@ -0,0 +1,12 @@
+---
+interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<header class="p-header">
+  <h1 class="p-header__heading">{title}</h1>
+  <slot />
+</header>

src/content/aoc/2021/01.md

@@ -1,7 +1,6 @@
 ---
 title: "Advent of Code 2021 - Day 1"
 date: 2021-12-01T23:25:56+01:00
-year: 2021
 day: 1
 stars: 2
 ---

src/content/aoc/2021/02.md

@@ -1,7 +1,6 @@
 ---
 title: "Advent of Code 2021 - Day 2"
 date: 2021-12-02T19:46:19+01:00
-year: 2021
 day: 2
 stars: 2
 ---

src/content/aoc/2021/03.md

@@ -1,7 +1,6 @@
 ---
 title: "Advent of Code 2021 - Day 3"
 date: 2021-12-03T16:51:41+01:00
-year: 2021
 day: 3
 stars: 2
 ---

src/content/aoc/2021/04.md

@@ -1,7 +1,6 @@
 ---
 title: "Advent of Code 2021 - Day 4"
 date: 2021-12-04T11:23:18+01:00
-year: 2021
 day: 4
 stars: 2
 math: true

src/content/aoc/2021/05.md

@@ -1,7 +1,6 @@
 ---
 title: "Advent of Code 2021 - Day 5"
 date: 2021-12-05T13:51:01+01:00
-year: 2021
 day: 5
 stars: 2
 ---

src/content/aoc/2021/06.md

@@ -1,7 +1,6 @@
 ---
 title: "Advent of Code 2021 - Day 6"
 date: 2021-12-06T19:40:20+01:00
-year: 2021
 day: 6
 stars: 2
 ---

src/content/aoc/2021/07.md

@@ -1,7 +1,6 @@
 ---
 title: "Advent of Code 2021 - Day 7"
 date: 2021-12-07T22:07:00+01:00
-year: 2021
 math: true
 day: 7
 stars: 2

src/content/aoc/2021/08.md

@@ -1,7 +1,6 @@
 ---
 title: "Advent of Code 2021 - Day 8"
 date: 2021-12-14T23:42:27+01:00
-year: 2021
 day: 8
 stars: 2
 ---

src/content/aoc/2021/09.md

@@ -1,7 +1,6 @@
 ---
 title: "Advent of Code 2021 - Day 9"
 date: 2021-12-14T23:42:35+01:00
-year: 2021
 day: 9
 stars: 2
 ---

src/content/aoc/2021/10.md

@@ -1,7 +1,6 @@
 ---
 title: "Advent of Code 2021 - Day 10"
 date: 2021-12-14T23:42:39+01:00
-year: 2021
 day: 10
 stars: 2
 ---

src/content/aoc/2021/11.md

@@ -1,7 +1,6 @@
 ---
 title: "Advent of Code 2021 - Day 11"
 date: 2021-12-11T09:09:14+01:00
-year: 2021
 math: true
 day: 11
 stars: 2

src/content/aoc/2021/12.md

@@ -1,7 +1,6 @@
 ---
 title: "Advent of Code 2021 - Day 12"
 date: 2021-12-14T23:42:43+01:00
-year: 2021
 day: 12
 stars: 2
 ---

src/content/aoc/2021/13.md

@@ -1,7 +1,6 @@
 ---
 title: "Advent of Code 2021 - Day 13"
 date: 2021-12-14T23:42:45+01:00
-year: 2021
 day: 13
 stars: 2
 ---

src/content/aoc/2021/14.md

@@ -1,7 +1,6 @@
 ---
 title: "Advent of Code 2021 - Day 14"
 date: 2021-12-14T23:42:47+01:00
-year: 2021
 day: 14
 stars: 2
 ---

src/content/aoc/2021/15.md

@@ -1,7 +1,6 @@
 ---
 title: "Advent of Code 2021 - Day 15"
 date: 2021-12-17T00:28:20+01:00
-year: 2021
 day: 15
 stars: 2
 ---

src/content/aoc/2021/16.md

@@ -1,7 +1,6 @@
 ---
 title: "Advent of Code 2021 - Day 16"
 date: 2021-12-18T01:44:09+01:00
-year: 2021
 day: 16
 stars: 0
 ---

src/content/config.ts

@@ -6,7 +6,6 @@ export const collections = {
     schema: z.object({
       title: z.string(),
       date: z.date(),
-      year: z.number(),
       day: z.number(),
       stars: z.number(),
       math: z.boolean().optional()

src/layouts/List.astro

@@ -0,0 +1,36 @@
+---
+import type { Dayjs } from "dayjs";
+import Base from "./Base.astro";
+import Header from "../components/headers/Base.astro";
+
+interface Props {
+  title: string;
+  pages: Array<{
+    title: string;
+    slug: string;
+    date?: Dayjs;
+  }>;
+}
+
+const { title, pages } = Astro.props;
+const dates = pages.every(page => page.date);
+---
+
+<Base>
+  <main class="l-pages">
+    <article class="l-pages__list readable">
+      <Header title={title} />
+      <div class="p-pagelist" class:list={{dates}}>
+        {pages.map(page => (<>
+          {dates && (
+            <time class="date" datetime={page.date!.toISOString()}>
+              {page.date!.format("MMM DD, YYYY")}
+            </time>
+          )}
+          <a href={page.slug}>{page.title}</a>
+        </>
+        ))}
+      </div>
+    </article>
+  </main>
+</Base>

src/pages/aoc/[year].astro

@@ -1,6 +1,7 @@
 ---
-import Base from '../../layouts/Base.astro';
+import List from '../../layouts/List.astro';
 import { getCollection } from 'astro:content';
+import dayjs from 'dayjs';
 
 
 export async function getStaticPaths () {
@@ -9,13 +10,15 @@ export async function getStaticPaths () {
 }
 
 const { year } = Astro.props;
-const pages = await getCollection('aoc', (entry) => entry.id.startsWith(year));
+const content = await getCollection('aoc', (entry) => entry.id.startsWith(year));
+
+const pages = content
+  .map(doc => ({
+    title: `Day ${doc.data.day}`,
+    slug: `/aoc/${doc.slug}/`,
+    date: dayjs(doc.data.date),
+  }));
+
 ---
 
-<Base>
-  {pages.map(entry => (
-    <div>
-      <a href={entry.slug.split('/')[1]}>{entry.id}</a>
-    </div>
-  ))}
-</Base>
+<List title={year} pages={pages} />

src/pages/aoc/index.astro

@@ -1,19 +1,21 @@
 ---
+import List from '../../layouts/List.astro';
 import { getCollection } from 'astro:content';
-import Base from '../../layouts/Base.astro';
 
 
-const posts = await getCollection('aoc');
+const content = await getCollection('aoc');
+const occ: {[key: string]: number} = {}
 
-const map = posts.reduce((acc, next) => {
-    const year = next.slug.slice(0, 4);
-    (year in acc) ? acc[year] += 1 : acc[year] = 1;
-    return acc;
-  }, {} as {[key: string]: number})
+for (const doc of content) {
+  const year = doc.slug.slice(0, 4);
+  (year in occ) ? occ[year] += 1 : occ[year] = 1;
+}
+
+const pages = Object.entries(occ)
+  .map(([year, occ]) => ({
+    title: `${year} - ${occ} days`,
+    slug: `/aoc/${year}/`,
+  }));
 ---
 
-<Base>
-  {Object.entries(map).map(([year, count]) => (
-    <div><a href={year}>{year} - {count}</a></div>
-  ))}
-</Base>
+<List title="Advent of Code" pages={pages} />

src/styles/partials/_pagelist.scss

@@ -1,39 +1,10 @@
 .p-pagelist {
   display: grid;
-  grid-template-columns: 8em 1fr;
-  column-gap: 0.3em;
   row-gap: 0.3em;
   margin-top: 1em;
 
-  &-tech {
-    grid-template-columns: 8em 1fr auto;
-
-    .tech {
-      display: flex;
-      align-items: center;
-      flex-direction: row;
-      gap: 0.3em;
-    }
-
-    img {
-      height: 1em;
-      margin: 0;
-    }
-  }
-
-  &-aoc {
-    grid-template-columns: 3em 1fr auto;
-
-    .tech {
-      display: flex;
-      align-items: center;
-      flex-direction: row;
-      gap: 0.3em;
-    }
-
-    img {
-      height: 1em;
-      margin: 0;
-    }
+  &.dates {
+    grid-template-columns: 8em 1fr;
+    column-gap: 0.3em;
   }
 }