feat: componentize article lists

www/_includes/components/article-card.webc

@@ -0,0 +1,19 @@
+<article>
+  <time @text="article.date.toDateString()"></time>
+  <h1><a :href="article.url" @text="article.data.title"></a><br /></h1>
+  <p class="teaser" @html="article.data.teaser"></p>
+</article>
+
+<style webc:scoped>
+  :host h1 {
+    margin: 0;
+    font-size: inherit;
+  }
+
+  :host time {
+    display: block;
+    font-size: 0.8em;
+    --var-font-slnt: -10;
+    color: #666;
+  }
+</style>

www/_includes/components/article-list.webc

@@ -0,0 +1,25 @@
+<script webc:setup>
+  const sorts = {
+    chron: (a, b) => a.date - b.date,
+    'reverse-chron': (a, b) => b.date - a.date,
+  }
+
+  const collate = ({ articles, order = 'reverse-chron', limit = Infinity }) => {
+    limit = typeof limit === 'number' ? limit : parseInt(limit, 10)
+    return articles.slice().sort(sorts[order]).slice(0, limit)
+  }
+</script>
+
+<ol>
+  <li webc:for="article of collate({ articles, order, limit })">
+    <article-card :@article="article"></article-card>
+  </li>
+</ol>
+
+<style webc:scoped>
+  :host ol {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+</style>

www/penumbra/index.webc

@@ -25,32 +25,4 @@ Add these links somewhere:
 <li><a href="/feed.xml">RSS</a></li>
 -->
 
-<ol class="journal">
-  <li webc:for="entry of collections.journal.reverse()">
-    <article>
-      <time @text="entry.date.toDateString()"></time>
-      <h1><a :href="entry.url" @text="entry.data.title"></a><br /></h1>
-      <p class="teaser" @html="entry.data.teaser"></p>
-    </article>
-  </li>
-</ol>
-
-<style>
-  ol.journal {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  ol.journal h1 {
-    margin: 0;
-    font-size: inherit;
-  }
-
-  ol.journal time {
-    display: block;
-    font-size: 0.8em;
-    --var-font-slnt: -10;
-    color: #666;
-  }
-</style>
+<article-list :@articles="collections.journal"></article-list>

www/penumbra/journal/index.webc

@@ -0,0 +1,10 @@
+---
+title: Penumbra Development Journal
+layout: page
+---
+
+<header>
+  <h1>Penumbra Development Journal</h1>
+</header>
+
+<article-list :@articles="collections.journal"></article-list>