Add last commit to posts when they changed, dim aside on posts' pages

.eleventy.js

@@ -9,7 +9,6 @@ module.exports = function (config) {
   config.addPassthroughCopy("src/assets/ibm-plex/IBM-Plex-Mono/fonts/**/*")
 
   // template filters
-  config.addFilter('toJSON', obj => JSON.stringify(obj))
   config.addFilter('toISODate', date => DateTime.fromJSDate(date).toISODate())
   config.addFilter('header', header)
 

package.json

@@ -19,6 +19,7 @@
   "devDependencies": {
     "@11ty/eleventy": "^1.0.0",
     "@thi.ng/hiccup": "3.6.22",
+    "glob": "^7.2.0",
     "lodash": "^4.17.21",
     "luxon": "^2.3.0",
     "seedrandom": "^3.0.5"

pnpm-lock.yaml

@@ -3,6 +3,7 @@ lockfileVersion: 5.3
 specifiers:
   '@11ty/eleventy': ^1.0.0
   '@thi.ng/hiccup': 3.6.22
+  glob: ^7.2.0
   lodash: ^4.17.21
   luxon: ^2.3.0
   seedrandom: ^3.0.5
@@ -10,6 +11,7 @@ specifiers:
 devDependencies:
   '@11ty/eleventy': 1.0.0
   '@thi.ng/hiccup': 3.6.22
+  glob: 7.2.0
   lodash: 4.17.21
   luxon: 2.3.0
   seedrandom: 3.0.5

src/_includes/posts.njk

@@ -2,8 +2,13 @@
 
 {% block sidebar %}
 <dl>
-<dt>Last updated on</dt>
+<dt>Published on</dt>
 <dd><time datetime="{{page.date}}">{{page.date | toISODate}}</time></dd>
+{% if commit.date and ((commit.date | toISODate) !== (page.date | toISODate)) %}
+<dt>Last updated on</dt>
+<dd><a href="https://git.arnes.space/arne/arnes.space/commit/{{commit.hash}}"><time datetime="{{commit.date}}">{{commit.date | toISODate}}</time></a></dd>
+{% endif %}
 </dl>
+
 <a href="{{ "/" | url }}">← Home</a>
 {% endblock %}

src/assets/style.scss

@@ -36,6 +36,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
+  color: #222;
   font-size: 24px;
   line-height: 24px;
   padding: 0 0 32px;
@@ -153,11 +154,6 @@ aside {
       margin: 0;
     }
   }
-
-  a {
-    display: inline-block;
-    margin-left: .3em;
-  }
 }
 
 article {
@@ -175,18 +171,8 @@ article {
 
 footer {
   grid-area: footer;
-  color: #aaa;
   padding-top: 48px;
   border-top: 1px dotted #aaa;
-
-  a {
-    color: #888;
-    border-bottom: 1px dotted #888;
-
-    &:hover {
-      background: #88888822;
-    }
-  }
 }
 
 // special page styling
@@ -202,11 +188,6 @@ footer {
       padding-bottom: 16px;
     }
 
-    a {
-      // let post titles break
-      display: inline;
-    }
-
     ul {
       list-style: inside;
       padding: 0 0 0 16px;
@@ -220,3 +201,17 @@ footer {
 
   article { display: none; }
 }
+
+footer,
+.posts aside {
+  color: #aaa;
+
+  a {
+    color: #888;
+    border-bottom: 1px dotted #888;
+
+    &:hover {
+      background: #88888822;
+    }
+  }
+}

src/posts/posts.11tydata.js

@@ -0,0 +1,30 @@
+const { promisify } = require('util')
+const exec = promisify(require('child_process').exec)
+
+const commitFromLog = message => {
+  if (message === '') return {}
+
+  const [ commit, author, date, _, msg ] = message.split('\n')
+
+  return {
+    hash: commit.replace(/^commit /, ''),
+    author: author.replace(/^Author:\s*/, ''),
+    date: new Date(date.replace(/^Date:\s*/, '')),
+    message: msg.trim()
+  }
+}
+
+const lastCommitFor = async file => {
+  const { stdout } = await exec(`git log -n 1 --pretty=medium --date=iso -- ${file}`)
+  return commitFromLog(stdout)
+}
+
+module.exports = async (_) => {
+  return {
+    tags: "posts",
+    layout: "posts.njk",
+    eleventyComputed: {
+      commit: async data => await lastCommitFor(data.page.inputPath)
+    }
+  }
+}

src/posts/posts.json

@@ -1,4 +0,0 @@
-{
-  "tags": "posts",
-  "layout": "posts.njk"
-}