Feat: Add dates to blog (#58)

* add date to top of blog posts

* also style footer

assets/css/main.css

@@ -308,6 +308,10 @@ img.home-img {
     margin-bottom: 1.6em;
   }
 
+  .date {
+    font-family: "Jura Regular"
+  }
+
   .centered-children {
     display: flex;
     flex-direction: column;

blog/__template/blog.template.html

@@ -32,10 +32,12 @@
         <a class="nav-link" href="../../projects">projects</a> |
         <a class="nav-link" href="..">blog</a>
       </nav>
+
       <h1>$title$</h1>
+      <div class="date">{{ BLOG_DATE }}</div>
 $body$
       <hr />
-      <ul>
+      <ul class="date">
         <li>Created: $created$</li>
         <li>Last updated: $updated$</li>
         <li>Type: $type$</li>

blog/autobibliography-1/index.html

@@ -26,7 +26,9 @@
         <a class="nav-link" href="../..">home</a> | <a class="nav-link" href="../../projects">projects</a> |
         <a class="nav-link" href="..">blog</a>
       </nav>
+
       <h1>Autobibliography: January 2025</h1>
+      <div class="date">15 Jan 2025</div>
       <p>
         <em
           >I love a good highly-curated, lightly-annotated list of recommendations: Evil Mad Scientist’s periodic <a target="_blank" rel="noreferrer noopener" href="https://www.evilmadscientist.com/tag/linkdump/">linkdump posts</a> are a
@@ -673,7 +675,7 @@ <h3 id="footnotes-title">Footnotes</h3>
         </ol>
       </section>
       <hr />
-      <ul>
+      <ul class="date">
         <li>Created: 2025-01-15</li>
         <li>Last updated: 2025-01-15</li>
         <li>Type: Link round-up</li>

blog/clapping-music-2/index.html

@@ -213,9 +213,11 @@
         <a class="nav-link" href="../..">home</a> | <a class="nav-link" href="../../projects">projects</a> |
         <a class="nav-link" href="..">blog</a>
       </nav>
+
       <h1>
         <strong><em>Clapping Music</em></strong> for one flip-disc display: Byte and variations
       </h1>
+      <div class="date">18 Oct 2024</div>
       <p>
         In response to previous post <a href="../clapping-music-for-flip-disc-displays/"><em>Clapping Music</em> for two flip-disc displays</a>, a reader
         <a target="_blank" rel="noreferrer noopener" href="https://lobste.rs/s/70ipvr/blog_clapping_music_for_two_flip_disc">commented</a>
@@ -605,7 +607,7 @@ <h3 id="footnotes-title">Footnotes</h3>
         </ol>
       </section>
       <hr />
-      <ul>
+      <ul class="date">
         <li>Created: 2024-10-18</li>
         <li>Last updated: 2024-10-18</li>
         <li>Type: Project write-up</li>

blog/clapping-music-for-flip-disc-displays/index.html

@@ -213,9 +213,11 @@
         <a class="nav-link" href="../..">home</a> | <a class="nav-link" href="../../projects">projects</a> |
         <a class="nav-link" href="..">blog</a>
       </nav>
+
       <h1>
         <strong><em>Clapping Music</em></strong> for two flip-disc displays
       </h1>
+      <div class="date">14 Sep 2024</div>
       <p>
         I present unto you: Steve Reich’s <strong><em>Clapping Music</em></strong
         >, as performed by a pair of flip-disc displays:
@@ -677,7 +679,7 @@ <h3 id="footnotes-title">Footnotes</h3>
         </ol>
       </section>
       <hr />
-      <ul>
+      <ul class="date">
         <li>Created: 2024-09-14</li>
         <li>Last updated: 2024-09-14</li>
         <li>Type: Project write-up</li>

blog/cuttle-obsession/index.html

@@ -33,7 +33,9 @@
         <a class="nav-link" href="../..">home</a> | <a class="nav-link" href="../../projects">projects</a> |
         <a class="nav-link" href="..">blog</a>
       </nav>
+
       <h1>Obsessed with Cuttle: Parametric CAD for prototyping, producing, and procrastinating</h1>
+      <div class="date">27 Sep 2024</div>
       <p>
         One of my primary creative outlets this year has been playing with the CNC laser cutter<a href="#fn1" class="footnote-ref" id="fnref1" role="doc-noteref"><sup>1</sup></a> at my library’s makerspace. It is the first CNC (“computer
         numerical control”, i.e., computer-programmable) shop tool I’ve gotten comfortable and fluent with: while I’ve worked informally with plenty of <em>manual</em> shop tools for wood and metal, I’ve never previously bridged that
@@ -346,7 +348,7 @@ <h3 id="footnotes-title">Footnotes</h3>
         </ol>
       </section>
       <hr />
-      <ul>
+      <ul class="date">
         <li>Created: 2024-09-27</li>
         <li>Last updated: 2024-09-27</li>
         <li>Type: Project write-up</li>

blog/driven-developments/index.html

@@ -33,7 +33,9 @@
         <a class="nav-link" href="../..">home</a> | <a class="nav-link" href="../../projects">projects</a> |
         <a class="nav-link" href="..">blog</a>
       </nav>
+
       <h1>Dopamine-driven development (DDD), spite-driven development (SDD), and other DDs</h1>
+      <div class="date">20 Sep 2024</div>
       <p>
         A few weeks ago, <a target="_blank" rel="noreferrer noopener" href="https://www.recurse.com/about">Recurser</a> friend Nicole Tietz-Sokolskaya published
         <a target="_blank" rel="noreferrer noopener" href="https://ntietz.com/blog/making-progress-with-content-driven-development">Making progress on side projects with content-driven development</a>, an excellent write-up about Doing
@@ -195,7 +197,7 @@ <h3 id="footnotes-title">Footnotes</h3>
         </ol>
       </section>
       <hr />
-      <ul>
+      <ul class="date">
         <li>Created: 2024-09-20</li>
         <li>Last updated: 2024-09-20</li>
         <li>Type: Musing</li>

blog/future-blog-posts/index.html

@@ -33,7 +33,9 @@
         <a class="nav-link" href="../..">home</a> | <a class="nav-link" href="../../projects">projects</a> |
         <a class="nav-link" href="..">blog</a>
       </nav>
+
       <h1>Titles of blog posts I might never write</h1>
+      <div class="date">18 Sep 2024</div>
       <p>…but maybe I will!</p>
       <p>My tech writing these days follows DDD (<a href="../driven-developments/">Dopamine-Driven Development</a>), which means that if you tell me what you want to read from me, I will be that much more likely to write it.</p>
       <p>
@@ -131,7 +133,7 @@ <h3 id="footnotes-title">Footnotes</h3>
         </ol>
       </section>
       <hr />
-      <ul>
+      <ul class="date">
         <li>Created: 2024-09-18</li>
         <li>Last updated: 2024-10-11</li>
         <li>Type: Musing</li>

blog/make-a-list/index.html

@@ -33,7 +33,9 @@
         <a class="nav-link" href="../..">home</a> | <a class="nav-link" href="../../projects">projects</a> |
         <a class="nav-link" href="..">blog</a>
       </nav>
+
       <h1>First things first: Make a list</h1>
+      <div class="date">21 Sep 2024</div>
       <p>To-do list:</p>
       <ul class="task-list">
         <li>
@@ -63,7 +65,7 @@ <h1>First things first: Make a list</h1>
         I am a big fan of Making A List, whether on paper or digitally.<a href="#fn1" class="footnote-ref" id="fnref1" role="doc-noteref"><sup>1</sup></a>
       </p>
       <p>
-        As taught to me by <a target="_blank" rel="noreferrer noopener" href="https://futurestatesband.ca/">Chuck</a><a href="#fn2" class="footnote-ref" id="fnref2" role="doc-noteref"><sup>2</sup></a
+        As taught to me by <a href="https://futurestatesband.ca/">Chuck</a><a href="#fn2" class="footnote-ref" id="fnref2" role="doc-noteref"><sup>2</sup></a
         >, <strong>the most important thing about a to-do list is that the first item on it is “Make a list”</strong>. Then, when you’ve finished adding tasks to your list, you can check it off immediately. Bam,
         <a href="../driven-developments/">dopamine</a>. Happy day, you’re already partly done with your list! Look at you, so much progress already! My notebook is filled with (partially-completed 😅) daily to-do lists, each of which starts
         with “make a list”.
@@ -91,7 +93,7 @@ <h3 id="footnotes-title">Footnotes</h3>
         </ol>
       </section>
       <hr />
-      <ul>
+      <ul class="date">
         <li>Created: 2024-09-21</li>
         <li>Last updated: 2024-09-21</li>
         <li>Type: Musing</li>

blog/meme-making/index.html

@@ -33,7 +33,9 @@
         <a class="nav-link" href="../..">home</a> | <a class="nav-link" href="../../projects">projects</a> |
         <a class="nav-link" href="..">blog</a>
       </nav>
+
       <h1>Quick ’n hacky meme making, for fun and no profit</h1>
+      <div class="date">11 Oct 2024</div>
       <p>
         <em>Adapted from a non-programming talk given while at the <a target="_blank" rel="noreferrer noopener" href="https://www.recurse.com/">Recurse Center</a>.</em>
       </p>
@@ -231,7 +233,7 @@ <h3 id="footnotes-title">Footnotes</h3>
         </ol>
       </section>
       <hr />
-      <ul>
+      <ul class="date">
         <li>Created: 2024-10-11</li>
         <li>Last updated: 2024-10-11</li>
         <li>Type: Tutorial</li>

blog/seagull-fliposcope-animation-with-cuttle/index.html

@@ -35,7 +35,9 @@
         <a class="nav-link" href="../..">home</a> | <a class="nav-link" href="../../projects">projects</a> |
         <a class="nav-link" href="..">blog</a>
       </nav>
+
       <h1>Scurrying seagull: CAD-assisted Fliposcope animation</h1>
+      <div class="date">31 Oct 2024</div>
       <figure>
         <img src="./assets/forward-gull.gif" alt="“Moving image of seagull running forwards down the beach”" />
       </figure>
@@ -287,7 +289,7 @@ <h3 id="footnotes-title">Footnotes</h3>
         </ol>
       </section>
       <hr />
-      <ul>
+      <ul class="date">
         <li>Created: 2024-10-31</li>
         <li>Last updated: 2024-10-31</li>
         <li>Type: Project write-up</li>

blog/site-structure/index.html

@@ -213,7 +213,9 @@
         <a class="nav-link" href="../..">home</a> | <a class="nav-link" href="../../projects">projects</a> |
         <a class="nav-link" href="..">blog</a>
       </nav>
+
       <h1>This website’s structure: A meta post</h1>
+      <div class="date">17 May 2024</div>
       <p>While doing a batch at the <a target="_blank" rel="noreferrer noopener" href="https://www.recurse.com">Recurse Center</a>, I revived my personal website—the very site you are almost certainly looking at Right Now!</p>
       <p><img style="border: none" src="/assets/img/emojis/surprise-pikachu.png" alt="surprise-pikachu" /></p>
       <h2 id="motivation">Motivation</h2>
@@ -324,7 +326,7 @@ <h2 id="thats-all-folks">That’s all, folks!</h2>
         >
       </p>
       <hr />
-      <ul>
+      <ul class="date">
         <li>Created: 2024-05-17</li>
         <li>Last updated: 2024-05-17</li>
         <li>Type: Project write-up</li>

blog/slide-whistle-trombone-champ-controller/index.html

@@ -34,7 +34,9 @@
         <a class="nav-link" href="../..">home</a> | <a class="nav-link" href="../../projects">projects</a> |
         <a class="nav-link" href="..">blog</a>
       </nav>
+
       <h1>Slidey doots: Slide whistle as Trombone Champ controller</h1>
+      <div class="date">10 Jan 2025</div>
       <p>My initial response to the 2022 video game <a target="_blank" rel="noreferrer noopener" href="https://www.trombonechamp.com/">Trombone Champ</a> was a simple HELL. YES.</p>
       <div class="centered-children">
         <iframe
@@ -356,7 +358,7 @@ <h3 id="footnotes-title">Footnotes</h3>
         </ol>
       </section>
       <hr />
-      <ul>
+      <ul class="date">
         <li>Created: 2025-1-10</li>
         <li>Last updated: 2025-1-10</li>
         <li>Type: Project-write-up</li>

blog/yellow-scream-2024/index.html

@@ -29,9 +29,11 @@
         <a class="nav-link" href="../..">home</a> | <a class="nav-link" href="../../projects">projects</a> |
         <a class="nav-link" href="..">blog</a>
       </nav>
+
       <h1>
         <strong><em>Yellow Scream</em></strong> (2024)
       </h1>
+      <div class="date">6 Nov 2024</div>
       <figure>
         <img src="./assets/still-1.png" alt="Screenshot of artist in front of yellow-painted canvas with caption “First let’s put some screams of unbearable confusion in the unpainted areas of the canvas”" />
       </figure>
@@ -105,7 +107,7 @@ <h3 id="footnotes-title">Footnotes</h3>
         </ol>
       </section>
       <hr />
-      <ul>
+      <ul class="date">
         <li>Created: 2024-11-06</li>
         <li>Last updated: 2024-11-06</li>
         <li>Type: Project write-up</li>

build-site/run.jl

@@ -25,10 +25,18 @@ function convert_to_html(file, outfile; template=BLOG_TEMPLATE, overwrite_existi
     @debug "About to run pandoc" cmd
     run(pipeline(cmd))
 
+    # Get date and format it 
+    date_pretty = let
+        yaml_dict = YAML.load_file(file)
+        str = string(yaml_dict["created"])
+        Dates.format(Date(str), dateformat"d u yyyy")
+    end
+
     # For now, do a very brittle tuning of properties!
     # In future, turn this into a pandoc plugin 
     str = read(outfile, String)
     str = replace(str, "{{ BLOG_DIR }}" => basename(dirname(file)))
+    str = replace(str, "{{ BLOG_DATE }}" => date_pretty)
     str = tweak_html!!(str)
     write(outfile, str)