Merge pull request #262 from photogabble/patch/update-article-template

Iterative changes to design

Author: carbontwelve

.eleventy.js

@@ -43,12 +43,15 @@ module.exports = function (eleventyConfig) {
     lastXDays: 180,
   });
 
+  const numberFormat = new Intl.NumberFormat('en-GB');
+
   eleventyConfig.addPlugin(require('@photogabble/eleventy-plugin-word-stats'), {
     output: (stats) => {
+      const words = numberFormat.format(stats.words);
       return {
         words: stats.words,
         time: stats.text,
-        text: `${stats.words} words, ${stats.text}`
+        text: `~${words} words, about a ${stats.text}`
       };
     }
   });

_includes/components/growth.njk

@@ -15,4 +15,4 @@
     {% set growthTitle = 'Evergreens are ideas that I have invested a lot of work in. They are in a finished state and unlikely to change over time.' %}
     {% set growthText = 'Evergreen' %}
 {% endif %}
-{{ growthIcon }} <abbr title="{{ growthTitle }}">{{ growthText }}<sup><a href="/glossary/growth/">(?)</a></sup></abbr>
+{{ growthIcon }} <abbr title="{{ growthTitle }}">{{ growthText }}</abbr>

_includes/layouts/book.njk

@@ -1,20 +1,15 @@
 {% extends "./page.njk" %}
 {% set ogtype = 'article' %}
+{% set headingClass = 'book' %}
+{% set title = book.title %}
+{% set titlePrefix = 'Book' %}
+{% set subTitle = book.subtitle %}
 
-{% block content %}
-<article class="book">
-    <header>
-        <h1>{{ title }}</h1>
-        {% if book.subtitle  %}
-        <h2>{{ book.subtitle }}</h2>
-        {% endif %}
-        <p><small>{% for author in book.authors %}
-            {{ author.name }}{{ "," if not loop.last }}
-        {% endfor %}</small></p>
-    </header>
-    <span>
-        &mdash;
-    </span>
+{% block pageHeader %}
+    <p><small>{% for author in book.authors %}{{ author.name }}{{ "," if not loop.last }}{% endfor %}</small></p>
+{% endblock %}
+
+{% block pageContent %}
     <section>
         <aside class="margin-note">
             {% if book.cover %}
@@ -41,8 +36,5 @@
         </aside>
         {{ content | safe }}
     </section>
-
     {% include "components/backlinks.njk" %}
-</article>
-
 {% endblock %}

_includes/layouts/page-post.njk

@@ -0,0 +1,36 @@
+{% extends "./page.njk" %}
+{% set ogtype = 'article' %}
+{% set readingTime = content | wordStats %}
+{% set headingClass = 'note' %}
+{% set titlePrefix %}
+    {% include "../components/growth.njk" %} {{ contentType }}
+{% endset %}
+
+{% set subTitle %}
+    planted on <time datetime="{{ page.date.toISOString() }}">{{ page.date | dateToFormat("DDD") }}</time> in: {% for tag in tags | formatTagList %}<a href="/topic/{{ tag.slug }}" title="Visit {{ tag.name }} index">{{ tag.name }}</a>{{ ' and ' if loop.revindex == 2 }}{{ ', ' if loop.revindex > 2 }}{% endfor %}.<br/>{{ readingTime.text if readingTime.words > 0 }}.
+{% endset %}
+
+{% block pageHeader %}
+
+{% endblock %}
+
+{% block pageContent %}
+    {% if growthStage === 'stub' %}
+    <section>
+        <blockquote>
+            <p>Note: This is a stub post to be filled out in the future. It has been created for the purpose of interlinking feel free to check out what links here from the list below to find related pages.</p>
+        </blockquote>
+    </section>
+    {% endif %}
+
+    <section>
+        {{ content | safe }}
+    </section>
+
+    {% if tags | includesTag('wayback machine') %}
+        <hr/>
+        {% include "components/wayback-machine.njk" %}
+    {% endif %}
+
+    {% include "components/backlinks.njk" %}
+{% endblock %}

_includes/layouts/page.njk

@@ -13,11 +13,10 @@
 {% block content %}
     <article {{ ('class="'+ headingClass +'"') | safe if headingClass }}>
         <header>
-        {% block pageHeader %}
-            {% if titlePrefix %}<small><span>{{ titlePrefix | safe }}</span></small>{% endif %}
-            {% if title or headerTitle %}<h1>{{ (title or headerTitle) | safe }}</h1>{% endif %}
-            {% if subTitle %}<h2>{{ subTitle | safe }}</h2>{% endif %}
-        {% endblock %}
+        {% if titlePrefix %}<small><span>{{ titlePrefix | safe }}</span></small>{% endif %}
+        {% if title or headerTitle %}<h1>{{ (title or headerTitle) | safe }}</h1>{% endif %}
+        {% if subTitle %}<h2>{{ subTitle | safe }}</h2>{% endif %}
+        {% block pageHeader %}{% endblock %}
         </header>
 
         <span>&mdash;</span>

_includes/layouts/post.njk

@@ -4,7 +4,7 @@ module.exports = {
   featured: false,
   draft: false,
   excludeFromFeed: false,
-  layout: 'layouts/post.njk',
+  layout: 'layouts/page-post.njk',
   growthStage: 'seedling', // seedling, budding, evergreen
   contentType: 'thought', // thought, noteworthy, essay, tutorial, project
   folder: ['writing'],

content/content.11tydata.js

@@ -146,10 +146,20 @@ main > header > *:first-child{
 
 main > header a {
     text-decoration: none;
+    padding: 0 0.25rem;
+}
+
+main > header a:first-child {
+    padding-left: 0;
 }
 
 article > header {
     padding: 2em 0 1em 0;
+
+}
+
+article > header h1 {
+    line-height: 1.1;
 }
 
 article > header h1,
@@ -173,7 +183,10 @@ article > header small span{
 article > header small + h1 {
     margin: 0.67rem 0;
     font-size: 3rem;
-    line-height: 3rem;
+}
+
+article.note > header h1 {
+    font-size: 6rem;
 }
 
 article.book > header h1 + h2 {