Add "latest" area to the weeknotes page

fragments/subject-index/all/all/weeknotes/body_body_posts_index.html

@@ -0,0 +1,44 @@
+<h2>Latest weeknotes.</h2>
+<ol id='latest'>
+  {% for page in pages|reverse %}
+    {% if loop.index < 5 %}
+    <li>
+      <a href='{{page.path}}'>
+        <img src='{{page.thumbnail.chips}}' width=400 height=150>
+        <span>{{page.title}}</span>
+      </a>
+      {% if page.published.year == 2021 %}
+        <em>{{page.published.strftime('%B %d')}}</em>
+      {% else %}
+        <em>{{page.published.strftime('%B %d, %Y')}}</em>
+      {% endif %}
+      — {{page.summary}}
+    </li>
+    {% endif %}
+  {% endfor %}
+</ol>
+
+<h2>All weeknotes, in published order.</h2>
+<ol>
+  {% for page in pages %}
+    {% if loop.changed(page.published.month) %}
+      {% if not loop.first %}
+          </li>
+        </ol>
+      {% endif %}
+        <li>
+          <h3>{{page.published.strftime('%B %Y')}}</h3>
+          <ol>
+    {% endif %}
+
+          <li>
+            {{page.published.day}}{{page.published.day|ordinal}}
+            {{page.published.strftime('%H:%M')}} <a href='{{page.path}}'>{{page.title}}</a>
+          </li>
+
+    {% if loop.last %}
+        </ol>
+      </li>
+    {% endif %}
+  {% endfor %}
+</ol>

fragments/subject-index/all/all/weeknotes/body_class

@@ -0,0 +1 @@
+page-index weeknotes

sass/pieces/_indexes.scss

@@ -0,0 +1,73 @@
+.page-index {
+    ol {
+        margin: 0 0 1em;
+        padding: 0;
+
+        li {
+            list-style: none;
+        }
+
+        ol {
+            margin-left: 3em;
+
+            li {
+                list-style: disc;
+            }
+        }
+    }
+
+    h3 {
+        font-size: 1.2em;
+        margin: 0;
+    }
+}
+
+.page-index.weeknotes {
+    h2 {
+        margin-bottom: 0;
+    }
+
+    #latest {
+        margin: 0;
+        padding: 0;
+        display: grid;
+        grid-template-columns: auto auto;
+        column-gap: 30px;
+
+        li {
+            list-style: none;
+            margin: 0 0 2em;
+            padding: 0;
+            max-width: 400px;
+        }
+
+        em {
+            font-weight: bold;
+            font-style: normal;
+        }
+
+        a {
+            position: relative;
+            color: $desert_storm;
+            text-decoration: none;
+            display: block;
+
+            img {
+                display: block;
+                max-width: 100%;
+                height: auto;
+            }
+
+            span {
+                display: block;
+                padding: 2px 5px;
+                background: rgba(0, 0, 0, 0.5);
+                outline: 1px solid $eerie_black;
+                position: absolute;
+                bottom: 10px;
+                left: 10px;
+                font-weight: bold;
+            }
+        }
+    }
+}

sass/site.scss

@@ -8,6 +8,7 @@
 
 // common pieces of pages
 @import "pieces/splash";
+@import "pieces/indexes";
 
 // page types
 @import "pages/about";