(page-list, temporal) initial page list template

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@astrojs/mdx": "^0.19.7",
     "@astrojs/solid-js": "^2.2.0",
+    "@js-temporal/polyfill": "^0.4.4",
     "astro": "^2.6.3",
     "astro-pagefind": "^1.2.0",
     "chart.js": "^4.3.0",

pnpm-lock.yaml

@@ -11,6 +11,9 @@ dependencies:
   '@astrojs/solid-js':
     specifier: ^2.2.0
     version: 2.2.0(@babel/core@7.22.5)(solid-js@1.7.6)
+  '@js-temporal/polyfill':
+    specifier: ^0.4.4
+    version: 0.4.4
   astro:
     specifier: ^2.6.3
     version: 2.6.3(sass@1.63.3)
@@ -721,6 +724,14 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.14
     dev: false
 
+  /@js-temporal/polyfill@0.4.4:
+    resolution: {integrity: sha512-2X6bvghJ/JAoZO52lbgyAPFj8uCflhTo2g7nkFzEQdXd/D8rEeD4HtmTEpmtGCva260fcd66YNXBOYdnmHqSOg==}
+    engines: {node: '>=12'}
+    dependencies:
+      jsbi: 4.3.0
+      tslib: 2.5.3
+    dev: false
+
   /@kurkle/color@0.3.2:
     resolution: {integrity: sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==}
     dev: false
@@ -2172,6 +2183,10 @@ packages:
       argparse: 2.0.1
     dev: false
 
+  /jsbi@4.3.0:
+    resolution: {integrity: sha512-SnZNcinB4RIcnEyZqFPdGPVgrg2AcnykiBy0sHVJQKHYeaLUvi3Exj+iaPpLnFVkDPZIV4U0yvgC9/R4uEAZ9g==}
+    dev: false
+
   /jsesc@2.5.2:
     resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
     engines: {node: '>=4'}

src/layouts/BetterList.astro

@@ -0,0 +1,64 @@
+---
+import Base from "./Base.astro";
+import { Temporal } from "@js-temporal/polyfill";
+
+
+interface Props {
+  title: string;
+  pages: Page[];
+}
+
+interface Page {
+  title: string;
+  path: string;
+  date: Temporal.ZonedDateTime;
+}
+
+interface YearlyPosts {
+  [key: number]: Page[];
+}
+
+
+const { title, pages } = Astro.props;
+
+const yearly = pages
+  .reduce((acc, next) => {
+      const year = next.date.year;
+      (year in acc)
+        ? acc[year].push(next)
+        : acc[year] = [next];
+      return acc;
+    }, {} as YearlyPosts);
+
+function sorter(
+  a: {date: Temporal.ZonedDateTime},
+  b: {date: Temporal.ZonedDateTime}
+) {
+  return Temporal.ZonedDateTime.compare(b.date, a.date);
+}
+---
+
+<Base>
+  <main class="page-list-main">
+    <article class="page-list">
+      <header class="markdown">
+        <h1>{title}</h1>
+      </header>
+      {Object.entries(yearly)
+        .sort(([a, _a], [b, _b]) => a > b ? -1 : 1)
+        .map(([year, pages]: [string, Page[]]) => (
+          <section class="page-list-year">
+            <h2>{year}</h2>
+            {pages.sort(sorter).map(page => (
+              <a class="page-list-item" href={page.path}>
+                <h3 class="page-list-item__heading">{page.title}</h3>
+                <time class="page-list-item__date" datetime={page.date.toPlainDate().toString()}>
+                  {page.date.toLocaleString("en", { month: "2-digit", day: "2-digit"})}
+                </time>
+              </a>
+            ))}
+          </section>
+        ))}
+    </article>
+  </main>
+</Base>

src/pages/posts/index.astro

@@ -1,17 +1,17 @@
 ---
-import dayjs from "dayjs";
-import List from "../../layouts/List.astro";
+import BetterList from "@layouts/BetterList.astro";
 import { getCollection } from 'astro:content';
+import { Temporal, toTemporalInstant } from "@js-temporal/polyfill";
 
 
 const posts = (await getCollection('posts'))
-  .sort((a, b) => a.data.date < b.data.date ? 1 : -1)
   .map(entry => ({
     title: entry.data.title,
-    slug: `/posts/${entry.slug}/`,
-    date: dayjs(entry.data.date),
+    path: `/posts/${entry.slug}/`,
+    date: toTemporalInstant.call(entry.data.date).toZonedDateTimeISO("Europe/Warsaw"),
   }))
+  .sort((a, b) => Temporal.ZonedDateTime.compare(a.date, b.date))
 
 ---
 
-<List title="Posts" pages={posts} />
+<BetterList title="Posts" pages={posts} />

src/styles/layouts/_page-list.scss

@@ -0,0 +1,31 @@
+.page-list-main {
+  padding: 2em;
+}
+
+.page-list {
+  max-width: 48em;
+  margin-inline: auto;
+}
+
+.page-list-year {
+  margin-block: 1em;
+}
+
+.page-list-item {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  text-decoration: unset;
+
+  &__heading {
+    color: var(--c-primary);
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+  
+  &__date {
+    color: var(--c-text-muted);
+    
+  }
+}

src/styles/partials/_nav.scss

@@ -75,6 +75,8 @@
     &-main {
       font-size: 2rem;
       line-height: 1em;
+      font-family: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;
+      margin-bottom: -0.15em;
     }
   
     &-sub {

src/styles/styles.scss

@@ -39,3 +39,4 @@
 @use 'layouts/songs';
 @use 'layouts/repos';
 @use 'layouts/wiki';
+@use 'layouts/page-list';

src/utils/splash.ts

@@ -40,6 +40,8 @@ const subtitles = [
   "You're looking at it!",
   "a2Ftb3NoaS5vcmc=",
   ":: (Thought a) => a -> String",
+  "Catch me if you can!",
+  "In the eye of the beholder",
 ];
 
 const chance = Math.round(1 / (subtitles.length + 1) * 10000) / 100;