Group books by year

johanbrook · Dec 30, 2023 · 74fe5d2 · 74fe5d2
1 parent 555d476
commit 74fe5d2
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 42 deletions.
diff --git a/_config.ts b/_config.ts
@@ -75,6 +75,29 @@ site
 
 		return curr == test;
 	})
+	.filter('groupBooksByYear', <T>(arr: Array<T>) => {
+	    const current = new Date().getUTCFullYear();
+		const groups: Record<string | number, T[]> = {
+			[current]: []
+		};
+
+		for (const a of arr) {
+		    const date = a.finishedAt;
+
+			if (!date) {
+			    if (!a.finished) groups[current].push(a);
+			    continue;
+			}
+			if (date instanceof Date == false) throw new Error(`"finishedAt" is not a date: ${date} on ${JSON.stringify(a)}`);
+
+			const group = (date as Date).getFullYear();
+
+			if (groups[group]) groups[group].push(a);
+			else groups[group] = [a];
+		}
+
+		return groups;
+	})
 	// Data
 	.data('pageSlug', function (this: { ctx: { url: string } }) {
 		return this.ctx.url.replaceAll('/', '');

diff --git a/src/_data/books.yml b/src/_data/books.yml
@@ -449,6 +449,7 @@
   location: Stockholm, Sweden
   notes: "The autobiography of Keith Richards (guitarist in Rolling Stones)."
   finished: true
+  finishedAt: 2022-07-01T00:00:00
 
 - title: Häng City
   slug: hang-city
@@ -464,6 +465,7 @@
 - title: Jack
   slug: jack
   author: Ulf Lundell
+  finishedAt: 2022-10-01T00:00:00
   notes: >-
     _The_ generational novel of the Swedish 1970s. Dropped it because it didn't really speak to me. I understand
     it must've been cool in the 70s, but not so now.
@@ -495,6 +497,7 @@
   author: Oliver Burkeman
   location: Stockholm, Sweden
   dropped: true
+  finishedAt: 2022-12-01T00:00:00
   notes: >-
     Too much "self help book" so far. I constantly feel: "this could've been a blog post" and "why did I buy this".
 
@@ -504,6 +507,7 @@
   location: Kalk Bay, South Africa
   dropped: true
   notes: Just didn't like it. The short stories weren't captivating enough, and the prose was elegant but unnecessarily complex.
+  finishedAt: 2022-12-01T00:00:00
 
 - title: David Bowie — A Life
   slug: david-bowie-a-life
@@ -532,6 +536,7 @@
   author: William MacAskill
   notes: Philosopher philosophising about the future.
   paused: true
+  finishedAt: 2023-02-01T00:00:00
 
 - title: Kent – Texter om Sveriges största rockband
   slug: kent
@@ -609,6 +614,7 @@
   slug: the-honourable-schoolboy
   author: John le Carré
   dropped: true
+  finishedAt: 2023-09-01T00:00:00
 
 - title: Berlin
   slug: berlin
@@ -624,6 +630,7 @@
   slug: secret-pilgrim
   author: John le Carré
   dropped: true
+  finishedAt: 2023-10-01T00:00:00
 
 - title: Tunnel 29 — The True Story of an Extraordinary Escape Beneath the Berlin Wall
   author: Helena Merriman

diff --git a/src/reading.njk b/src/reading.njk
@@ -12,51 +12,59 @@ menu:
   <article class="page">
 	<h1 class="title">{{ title }}.</h1>
 
-	<p class="mb2 subhead measure mb4">
+	<p class="subhead measure mb4">
   		Non-exhaustive list of books I've read and am reading, in reverse chronological order. You can also check out what I <a href="/to-read">want to read next.</a>
 	</p>
 
-    <table class="textual f5">
-    	<tr>
-    		<th>Title</th>
-    		<th>Author</th>
-    		<th>Notes</th>
-    		<th title="Status"></th>
-    	</tr>
-      {% for book in books | reverse %}
-        <tr id="{{ book.slug }}">
-        	<td>
-				{{ book.title }}
-        	</td>
-        	<td>
-        		{{ book.author }}
-        	</td>
-        	<td>
-				{{ book.notes | md(true) | safe }}
-        	</td>
-        	<td class="no-wrap font-sans f6 fw6 {% if book.dropped %}align-middle font-sans muted{% else %}{% if book.paused %}align-middle comp-yellow{% else %}{% if not book.finished%}align-middle font-sans comp-neon{% endif %}{% endif %}{% endif %}">
-            	{% if book.dropped %}
-              		Dropped
-              	{% else %}
-              		{% if book.paused %}
-	            		Paused
-		            {% else %}
-	              		{% if book.finished %}
-	              			{% if book.finishedAt %}
-	              				<time title="Finished at" datetime="{{ book.finishedAt }}">{{ book.finishedAt | date }}</time><br>
-	              			{% endif %}
-	              			{% if book.location %}
-	              				<small class="font-sans fw4" title="Finished in">{{ book.location }}</small>
-	              			{% endif %}
-	              		{% else %}
-		              		Reading
-		            	{% endif %}
-	            	{% endif %}
-            	{% endif %}
-        	</td>
-        </tr>
-      {% endfor %}
-    </table>
+	{% for year, bookz in books | groupBooksByYear | dictsort | reverse %}
+	   <section>
+    	    <header class="mt4 mb2 flex justify-between items-center">
+                <h1 class="mv0">{{ year }}</h1>
+                <p class="muted mb0 font-sans f5">{{ bookz.length }} books</p>
+            </header>
+    		<table class="textual f5">
+               	<tr>
+              		<th>Title</th>
+              		<th>Author</th>
+              		<th>Notes</th>
+              		<th title="Status"></th>
+               	</tr>
+                {% for book in bookz | reverse %}
+                    <tr id="{{ book.slug }}">
+                   	<td>
+           					{{ book.title }}
+                   	</td>
+                   	<td>
+                  		{{ book.author }}
+                   	</td>
+                   	<td>
+           					{{ book.notes | md(true) | safe }}
+                   	</td>
+                   	<td class="no-wrap font-sans f6 fw6 {% if book.dropped %}align-middle font-sans muted{% else %}{% if book.paused %}align-middle comp-yellow{% else %}{% if not book.finished%}align-middle font-sans comp-neon{% endif %}{% endif %}{% endif %}">
+                       	{% if book.dropped %}
+                          		Dropped
+                       	{% else %}
+                          		{% if book.paused %}
+            		            		Paused
+         			            {% else %}
+          		              		{% if book.finished %}
+         		              			{% if book.finishedAt %}
+            		              				<time title="Finished at" datetime="{{ book.finishedAt }}">{{ book.finishedAt | date }}</time><br>
+         		              			{% endif %}
+         		              			{% if book.location %}
+            		              				<small class="font-sans fw4" title="Finished in">{{ book.location }}</small>
+         		              			{% endif %}
+          		              		{% else %}
+         			              		Reading
+            			            	{% endif %}
+         		            	{% endif %}
+                       	{% endif %}
+                   	</td>
+                    </tr>
+                {% endfor %}
+            </table>
+	   </section>
+	{% endfor %}
 
     <p class="mt4">{{ books.length }} books <span class="mx1">|</span> <a href="/reading.xml">Feed{{ comp.icon({ class: "ml2" }) | safe }}</a></p>
   </article>