From 979462fd97e4066e507887de6d30ae704f289a90 Mon Sep 17 00:00:00 2001
From: Maciej Jur <maciej@kamoshi.org>
Date: Sat, 8 Apr 2023 14:20:28 +0200
Subject: [PATCH] Render page lists for AoC

---
 src/components/headers/Article.astro | 10 ++++----
 src/components/headers/Base.astro    | 12 ++++++++++
 src/content/aoc/2021/01.md           |  1 -
 src/content/aoc/2021/02.md           |  1 -
 src/content/aoc/2021/03.md           |  1 -
 src/content/aoc/2021/04.md           |  1 -
 src/content/aoc/2021/05.md           |  1 -
 src/content/aoc/2021/06.md           |  1 -
 src/content/aoc/2021/07.md           |  1 -
 src/content/aoc/2021/08.md           |  1 -
 src/content/aoc/2021/09.md           |  1 -
 src/content/aoc/2021/10.md           |  1 -
 src/content/aoc/2021/11.md           |  1 -
 src/content/aoc/2021/12.md           |  1 -
 src/content/aoc/2021/13.md           |  1 -
 src/content/aoc/2021/14.md           |  1 -
 src/content/aoc/2021/15.md           |  1 -
 src/content/aoc/2021/16.md           |  1 -
 src/content/config.ts                |  1 -
 src/layouts/List.astro               | 36 ++++++++++++++++++++++++++++
 src/pages/aoc/[year].astro           | 21 +++++++++-------
 src/pages/aoc/index.astro            | 26 ++++++++++----------
 src/styles/partials/_pagelist.scss   | 35 +++------------------------
 23 files changed, 82 insertions(+), 75 deletions(-)
 create mode 100644 src/components/headers/Base.astro
 create mode 100644 src/layouts/List.astro

diff --git a/src/components/headers/Article.astro b/src/components/headers/Article.astro
index 1e73249..7a78300 100644
--- a/src/components/headers/Article.astro
+++ b/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>
diff --git a/src/components/headers/Base.astro b/src/components/headers/Base.astro
new file mode 100644
index 0000000..8475d5d
--- /dev/null
+++ b/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>
diff --git a/src/content/aoc/2021/01.md b/src/content/aoc/2021/01.md
index af5fede..92ddd94 100644
--- a/src/content/aoc/2021/01.md
+++ b/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
 ---
diff --git a/src/content/aoc/2021/02.md b/src/content/aoc/2021/02.md
index dc1437c..8f18483 100644
--- a/src/content/aoc/2021/02.md
+++ b/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
 ---
diff --git a/src/content/aoc/2021/03.md b/src/content/aoc/2021/03.md
index 2f86fa2..715d72d 100644
--- a/src/content/aoc/2021/03.md
+++ b/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
 ---
diff --git a/src/content/aoc/2021/04.md b/src/content/aoc/2021/04.md
index 075542d..2e6989b 100644
--- a/src/content/aoc/2021/04.md
+++ b/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
diff --git a/src/content/aoc/2021/05.md b/src/content/aoc/2021/05.md
index 2a6f7ca..bc7f40f 100644
--- a/src/content/aoc/2021/05.md
+++ b/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
 ---
diff --git a/src/content/aoc/2021/06.md b/src/content/aoc/2021/06.md
index f63bab1..dff0383 100644
--- a/src/content/aoc/2021/06.md
+++ b/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
 ---
diff --git a/src/content/aoc/2021/07.md b/src/content/aoc/2021/07.md
index 7b611e3..9ea98e3 100644
--- a/src/content/aoc/2021/07.md
+++ b/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
diff --git a/src/content/aoc/2021/08.md b/src/content/aoc/2021/08.md
index 5118eb6..d0247b4 100644
--- a/src/content/aoc/2021/08.md
+++ b/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
 ---
diff --git a/src/content/aoc/2021/09.md b/src/content/aoc/2021/09.md
index 22f5f94..6ab5f37 100644
--- a/src/content/aoc/2021/09.md
+++ b/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
 ---
diff --git a/src/content/aoc/2021/10.md b/src/content/aoc/2021/10.md
index d1f4ba9..745a360 100644
--- a/src/content/aoc/2021/10.md
+++ b/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
 ---
diff --git a/src/content/aoc/2021/11.md b/src/content/aoc/2021/11.md
index 9663b09..bb788c9 100644
--- a/src/content/aoc/2021/11.md
+++ b/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
diff --git a/src/content/aoc/2021/12.md b/src/content/aoc/2021/12.md
index 1060090..91e640d 100644
--- a/src/content/aoc/2021/12.md
+++ b/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
 ---
diff --git a/src/content/aoc/2021/13.md b/src/content/aoc/2021/13.md
index 4824a7d..758494d 100644
--- a/src/content/aoc/2021/13.md
+++ b/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
 ---
diff --git a/src/content/aoc/2021/14.md b/src/content/aoc/2021/14.md
index 7e676f2..c19b95b 100644
--- a/src/content/aoc/2021/14.md
+++ b/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
 ---
diff --git a/src/content/aoc/2021/15.md b/src/content/aoc/2021/15.md
index 1d8e1ff..e89b198 100644
--- a/src/content/aoc/2021/15.md
+++ b/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
 ---
diff --git a/src/content/aoc/2021/16.md b/src/content/aoc/2021/16.md
index f6ffe88..58e3ef2 100644
--- a/src/content/aoc/2021/16.md
+++ b/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
 ---
diff --git a/src/content/config.ts b/src/content/config.ts
index 2937206..385d996 100644
--- a/src/content/config.ts
+++ b/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()
diff --git a/src/layouts/List.astro b/src/layouts/List.astro
new file mode 100644
index 0000000..411f500
--- /dev/null
+++ b/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>
diff --git a/src/pages/aoc/[year].astro b/src/pages/aoc/[year].astro
index fc28336..046e220 100644
--- a/src/pages/aoc/[year].astro
+++ b/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} />
diff --git a/src/pages/aoc/index.astro b/src/pages/aoc/index.astro
index 969f0e9..d910248 100644
--- a/src/pages/aoc/index.astro
+++ b/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} />
diff --git a/src/styles/partials/_pagelist.scss b/src/styles/partials/_pagelist.scss
index ae19107..0a87cd2 100644
--- a/src/styles/partials/_pagelist.scss
+++ b/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;
   }
 }