blog: post layout improvements

.eleventy.js

@@ -1,5 +1,6 @@
 const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight')
 const pluginRss = require('@11ty/eleventy-plugin-rss');
+const timeToRead = require('eleventy-plugin-time-to-read');
 
 module.exports = function (eleventyConfig) {
   const parseDate = (str) => {
@@ -12,8 +13,9 @@ module.exports = function (eleventyConfig) {
   const formatPart = (part, date) =>
   new Intl.DateTimeFormat("en", part).format(date);
 
-  eleventyConfig.addPlugin(pluginRss)
+  eleventyConfig.addPlugin(pluginRss);
-  eleventyConfig.addPlugin(syntaxHighlight)
+  eleventyConfig.addPlugin(syntaxHighlight);
+  eleventyConfig.addPlugin(timeToRead);
 
   eleventyConfig.addPassthroughCopy({ "src/static": "/" });
 

package-lock.json

@@ -10,7 +10,8 @@
             "dependencies": {
                 "@11ty/eleventy": "^v2.0.0-beta.1",
                 "@11ty/eleventy-plugin-rss": "^1.2.0",
-                "@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0"
+                "@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
+                "eleventy-plugin-time-to-read": "^1.3.0"
             }
         },
         "node_modules/@11ty/dependency-tree": {
@@ -705,6 +706,22 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/eleventy-plugin-time-to-read": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/eleventy-plugin-time-to-read/-/eleventy-plugin-time-to-read-1.3.0.tgz",
+            "integrity": "sha512-EefxYZJviQbClwoQ+pXW0YsVoi3gzXJ3prJoOLO1g3n5dM17KyZh81/yyq5Inrdc2pxBz3CXsyo21kk43gK/Gg==",
+            "engines": {
+                "node": ">=13.0.0"
+            },
+            "peerDependencies": {
+                "@11ty/eleventy": "*"
+            },
+            "peerDependenciesMeta": {
+                "@11ty/eleventy": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/encodeurl": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@@ -2795,6 +2812,12 @@
                 "jake": "^10.8.5"
             }
         },
+        "eleventy-plugin-time-to-read": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/eleventy-plugin-time-to-read/-/eleventy-plugin-time-to-read-1.3.0.tgz",
+            "integrity": "sha512-EefxYZJviQbClwoQ+pXW0YsVoi3gzXJ3prJoOLO1g3n5dM17KyZh81/yyq5Inrdc2pxBz3CXsyo21kk43gK/Gg==",
+            "requires": {}
+        },
         "encodeurl": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",

package.json

@@ -10,6 +10,7 @@
     "dependencies": {
         "@11ty/eleventy": "^v2.0.0-beta.1",
         "@11ty/eleventy-plugin-rss": "^1.2.0",
-        "@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0"
+        "@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
+        "eleventy-plugin-time-to-read": "^1.3.0"
     }
 }

src/_includes/layouts/post.njk

@@ -13,7 +13,11 @@ subhead: blog
                 {% if changed_date %}
                     <small class="updated">(updated <time datetime="{{changed_date | date_to_datetime }}">{{ changed_date | date_formatted }}</time>)</small>
                 {% endif %}
+                <span class="middot"></span>
+                <span class="readtime">{{ content | timeToRead }} to read</span>
+                <span class="middot"></span>
                 <span>by <span class="author by" id="author">{{ site.name }}</span></span>
+                <span class="middot"></span>
                 {% if tags %}
                     <span>in 
                         {% for tag in tags %}

src/posts.njk

@@ -11,8 +11,27 @@ permalink: /posts/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
 {% block main %}
   <ul>
     {% for entry in pagination.items %}
-    <li>
+    <li class="list-entry">
-      <span><a href="{{ entry.url }}">{{ entry.data.title }}</a> on <span><time datetime="{{ entry.page.date | date_to_datetime }}">{{ entry.page.date | date_formatted }}</time></span></span>
+      <a href="{{ entry.url }}"><h2>{{ entry.data.title }}</h2></a>
+      <div class="byline">
+        <time datetime="{{ entry.page.date | date_to_datetime }}">{{ entry.page.date | date_formatted }}</time>
+        {% if entry.data.changed_date %}
+            <small class="updated">(updated <time datetime="{{ entry.data.changed_date | date_to_datetime }}">{{ entry.data.changed_date | date_formatted }}</time>)</small>
+        {% endif %}
+        <span class="middot"></span>
+        <span class="readtime">{{ entry.content | timeToRead }} to read</span>
+        <span class="middot"></span>
+        <span>by <span class="author by" id="author">{{ site.name }}</span></span>
+        <span class="middot"></span>
+        {% if entry.data.tags %}
+            <span>in 
+                {% for tag in entry.data.tags %}
+                    <span class="tag"><a href="/posts/tagged/{{ tag | slugify }}/">{{ tag }}</a></span>{% if not loop.last %}, {% endif %}
+                {% endfor %}
+            </span>
+        {% endif %}
+        </div>
+        <span class="lead"><strong>{{ entry.data.description }}</strong></span>
     </li>
     {% endfor %}
   </ul>

src/static/style.css

@@ -41,6 +41,14 @@ footer,
   text-align: center;
 }
 
+.list-entry {
+  list-style-type: none;
+}
+
+.list-entry h2 {
+  margin-bottom: 0;
+}
+
 #content {
   max-width: 900px;
   margin-left: auto;
@@ -53,6 +61,11 @@ footer,
   font-size: 0.75rem;
 }
 
+.middot::after {
+  content: '\00B7';
+  display: inline-block;
+}
+
 time,
 .author,
 .updated {

src/tagged.njk

@@ -20,9 +20,26 @@ date: git Last Modified
   <ul>
     {% set taglist = collections[ tag ] %}
     {% for entry in taglist | reverse %}
-    <li>
+      <li class="list-entry">
-      <span><a href="{{ entry.url }}">{{ entry.data.title }}</a> on <span><time datetime="{{ entry.page.date | date_to_datetime }}">{{ entry.page.date | date_formatted }}</time></span></span>
+          <a href="{{ entry.url }}"><h2>{{ entry.data.title }}</h2></a>
-    </li>
+          <div class="byline">
+          <time datetime="{{ entry.page.date | date_to_datetime }}">{{ entry.page.date | date_formatted }}</time>
+          {% if entry.data.changed_date %}
+              <small class="updated">(updated <time datetime="{{ entry.data.changed_date | date_to_datetime }}">{{ entry.data.changed_date | date_formatted }}</time>)</small>
+          {% endif %}
+          <span class="middot"></span>
+          <span>by <span class="author by" id="author">{{ site.name }}</span></span>
+          <span class="middot"></span>
+          {% if entry.data.tags %}
+              <span>in 
+                  {% for tag in entry.data.tags %}
+                      <span class="tag"><a href="/posts/tagged/{{ tag | slugify }}/">{{ tag }}</a></span>{% if not loop.last %}, {% endif %}
+                  {% endfor %}
+              </span>
+          {% endif %}
+          </div>
+          <span class="lead"><strong>{{ entry.data.description }}</strong></span>
+      </li>
     {% endfor %}
   </ul>
 {% endblock %}