feat: added now page history functionality and a page about how I did so

_includes/layouts/now.njk

@@ -0,0 +1,43 @@
+{% extends "./page.njk" %}
+
+{% block content %}
+    <article>
+        <h1 class="with-sub-title">/now</h1>
+        {% if isNow %}
+            <p>Last updated {{ page.date | dateToFormat("dd LLL yyyy") }}</p>
+        {% else %}
+            <p>Published {{ page.date | dateToFormat("dd LLL yyyy") }}, this is an older now page.</p>
+        {% endif %}
+
+        <section>
+            <p>
+                This “now page” offers a big picture glimpse into my what I’m focused on at this point in my life.
+                <a href="http://nownownow.com/about">What is a now page?</a>
+            </p>
+
+            {{ content | safe }}
+
+            <p>
+                You can see my bookshelf at <a href="https://bookwyrm.social/user/carbontwelve">bookwyrm.social</a> or
+                at <a href="https://openlibrary.org/people/carbontwelve">openlibrary.org</a>.
+            </p>
+        </section>
+
+        <nav>
+            <h3>Update History</h3>
+            <ul>
+                {% set current = collections.nowUpdates | reverse | first %}
+                {% for update in collections.nowUpdates | reverse %}
+                    {% if update.fileSlug == current.fileSlug %}
+                        <li><a href="/now" title="Go to current now page">Current</a></li>
+                    {% else %}
+                        {% set updateTitle = update.date | dateToFormat("dd LLL yyyy") %}
+                        <li><a href="{{ update.url }}" title="Read {{ updateTitle }}">{{ updateTitle }}</a></li>
+                    {% endif %}
+                {% endfor %}
+            </ul>
+        </nav>
+
+    </article>
+
+{% endblock %}

now.njk

@@ -1,46 +1,6 @@
-{% extends "_includes/layouts/page.njk" %}
+{% extends "_includes/layouts/now.njk" %}
 
 {% set title = '/now' %}
-
-{% block content %}
-    <h1 class="with-sub-title">/now</h1>
-    <p>Last updated March 19th, 2021.</p>
-
-    <section>
-        <p>
-            This “now page” offers a big picture glimpse into my what I’m focused on at this point in my life.
-            <a href="http://nownownow.com/about">What is a now page?</a>
-        </p>
-
-        <h2>What am I currently focused on?</h2>
-        <ul>
-            <li>Building my garden office, it's been the most fun I have had in a long time</li>
-            <li>Reinvigorating my blog, there have been <em>many</em> attempts made in the past</li>
-            <li>Fedicast, a federated podcast publishing platform</li>
-        </ul>
-
-        <h2>What am I watching?</h2>
-        <ul>
-            <li><a href="https://www.imdb.com/title/tt3230854/">The Expanse</a> on Amazon Prime</li>
-            <li><a href="https://www.imdb.com/title/tt0060028">Star Trek: The Original Series</a> on Netflix</li>
-        </ul>
-
-        <h2>What am I reading?</h2>
-        <ul>
-            <li>
-                <a href="https://openlibrary.org/books/OL4554882M/Game_playing_with_BASIC">
-                    Game Playing With BASIC by Donald D. Spencer
-                </a>
-            </li>
-            <li>
-                <a href="https://openlibrary.org/works/OL18199539W/PEOPLE_VS_TECH_THE">
-                    The People Vs Tech by Jamie Bartlett
-                </a>
-            </li>
-        </ul>
-        <p>
-            You can see my bookshelf at <a href="https://bookwyrm.social/user/carbontwelve">bookwyrm.social</a> or
-            at <a href="https://openlibrary.org/people/carbontwelve">openlibrary.org here</a>.
-        </p>
-    </section>
-{% endblock %}
+{% set isNow = true %}
+{% set page = collections.nowUpdates | reverse | first %}
+{% set content = page.templateContent %}

now/2021-03-19.md

@@ -0,0 +1,15 @@
+## What am I currently focused on?
+
+- Building my garden office, it's been the most fun I have had in a long time
+- Reinvigorating my blog, there have been _many_ attempts made in the past
+- Fedicast, a federated podcast publishing platform
+
+## What am I watching?
+
+- [The Expanse](https://www.imdb.com/title/tt3230854) on Amazon Prime
+- [Star Trek: The Original Series](https://www.imdb.com/title/tt0060028) on Netflix
+
+## What am I reading?
+
+- [Game Playing With BASIC by Donald D. Spencer](https://openlibrary.org/books/OL4554882M/Game_playing_with_BASIC)
+- [The People Vs Tech by Jamie Bartlett](https://openlibrary.org/works/OL18199539W/PEOPLE_VS_TECH_THE)

now/2022-05-17.md

@@ -0,0 +1,13 @@
+## What am I currently focused on?
+
+- Moon Miner, a browser based space exploration game - think Eve Online without the fancy graphics
+- Maintaining this blog by slowly converting it into a Digital Garden 
+
+## What am I watching?
+
+- [GeminiTay's Minecraft Videos](https://www.youtube.com/channel/UCUBsjvdHcwZd3ztdY1Zadcw) on YouTube
+- [CuriousMarc's Apollo Comms Series](https://www.youtube.com/c/CuriousMarc) on YouTube
+
+## What am I reading?
+
+- A backlog of the past years _New Scientist_ magazine, which I haven't found time to go through

now/now.11tydata.js

@@ -0,0 +1,6 @@
+module.exports = function() {
+  return {
+    "draft": false,
+    "layout": "layouts/now.njk"
+  };
+};

posts/2022-05-17-creating-a-now-page-archive-in-11ty.md

@@ -0,0 +1,70 @@
+---
+title: Creating a now page archive with 11ty
+categories:
+    - tutorials
+tags:
+    - JavaScript
+    - 11ty
+growthStage: budding
+---
+
+I first added a `/now` page[^1] to PhotoGabble in March 2021, and in the tradition that is blogging I promptly forgot about it and failed to update its content until today. In an attempt at keeping this section of my website updated I have set a monthly timer to at least prompt me to give it a fresh look twelve times a year.
+
+With more regular updates I would like to keep a history of what I have been focused on (or at least what I say I am focusing on) and so I used [11ty's collections](https://www.11ty.dev/docs/collections/) functionality:
+
+```javascript
+const nowUpdates = (collection) => {
+    return [...collection.getFilteredByGlob('./now/*.md').filter((post) => !post.data.draft)];
+}
+```
+
+Within the `/now` folder I placed `now.json`:
+
+```json
+{
+  "draft": false,
+  "layout": "layouts/now.njk"
+}
+```
+
+I then converted the previous now page html into a `2021-03-19.md` file and created a new `2021-05-17.md` file for today.
+
+In order to make sure that the most recent now page content is displayed at `/now` I used the following nunjucks template for `/now.njk`:
+
+```twig
+{% raw %}{% extends "_includes/layouts/now.njk" %}
+
+{% set title = '/now' %}
+{% set page = collections.nowUpdates | reverse | first %}
+{% set content = page.templateContent %}{% endraw %}
+```
+
+This sets the `page` variable to equal the most recent now page content from the `nowUpdates` collection and then sets the `content` variable to be that pages `templateContent`. My layout can then function as it would normally for both the `/now.njk` page and any of the archive pages.
+
+To the visitor there are no noticeable changes, this is because while 11ty is now generating pages for the now archive, they aren't linked from anywhere.
+
+I added a history list navigation to my now page template using the following nunjucks code:
+
+```twig
+{% raw %}<nav>
+    <h3>Update History</h3>
+    <ul>
+        {% set current = collections.nowUpdates | reverse | first %}
+        {% for update in collections.nowUpdates | reverse %}
+            {% if update.fileSlug == current.fileSlug %}
+                <li><a href="/now" title="Go to current now page">Current</a></li>
+            {% else %}
+                {% set updateTitle = update.date | dateToFormat("dd LLL yyyy") %}
+                <li><a href="{{ update.url }}" title="Read {{ updateTitle }}">{{ updateTitle }}</a></li>
+            {% endif %}
+        {% endfor %}
+    </ul>
+</nav>{% endraw %}
+```
+
+If you have been following along, you should now have your most recent now update visible via `/now` with you history of
+updates navigable via `/now/{YYYY-MM-DD}`. There is a minor snag with this method, Eleventy will generate a history page for the current now entry. This means your current now entry will exist at two navigable pages, however so long as you remember not to link to the current one as seen in the above code example then it can be ignored.
+
+The [source code for this website](https://github.com/photogabble/website) is open source, feel free to browse and ask questions if you would like to know more about how I have achieved functionality you would like to replicate in your own projects. 
+
+[^1]: [What is a now page?](https://nownownow.com/about)

utils/collections.js

@@ -79,9 +79,15 @@ const projects = (collection) => {
     return [...collection.getFilteredByGlob('./projects/*.md').filter((post) => !post.data.draft)];
 }
 
+const nowUpdates = (collection) => {
+
+    return [...collection.getFilteredByGlob('./now/*.md').filter((post) => !post.data.draft)];
+}
+
 module.exports = {
     post,
     postCategories,
     postByCategories,
-    projects
+    projects,
+    nowUpdates
 }