Add last updated timestamp to articles

center-key · Aug 13, 2024 · 497f242 · 497f242
1 parent a039f11
commit 497f242
Show file tree

Hide file tree

Showing 21 changed files with 67 additions and 32 deletions.
diff --git a/README.md b/README.md
@@ -44,7 +44,7 @@ You can help by contributing anything from minor typo fixes to writing new artic
    - 🪺 [recursive-exec](https://github.com/center-key/recursive-exec):&nbsp; _Run a command on each file in a folder and its subfolders_
    - 🔍 [replacer-util](https://github.com/center-key/replacer-util):&nbsp; _Find and replace strings or template outputs in text files_
    - 🔢 [rev-web-assets](https://github.com/center-key/rev-web-assets):&nbsp; _Revision web asset filenames with cache busting content hash fingerprints_
-   - 🚆 [run-scripts-util](https://github.com/center-key/run-scripts-util):&nbsp; _Organize npm package.json scripts into named groups of easy to manage commands_
+   - 🚆 [run-scripts-util](https://github.com/center-key/run-scripts-util):&nbsp; _Organize npm package.json scripts into groups of easy to manage commands_
    - 🚦 [w3c-html-validator](https://github.com/center-key/w3c-html-validator):&nbsp; _Check the markup validity of HTML files using the W3C validator_
 
 [CC0 License](LICENSE.txt)
diff --git a/src/templates/doc-begin.html b/src/templates/doc-begin.html
@@ -40,7 +40,7 @@
 </head>
 <body>
 
-<header>
+<header class=responsive-avatar>
    <nav id=link-menu>
       <a href={{webRoot}}>Home</a>
       <a href={{webRoot}}/products>Products</a>

diff --git a/src/templates/metrication-checklist.html b/src/templates/metrication-checklist.html
@@ -11,19 +11,19 @@
    <li id=car>          <p>Set the display in your car to Celsius (&deg;C)</p>                                    <label><input type=checkbox><b></b></label></li>
    <li id=home>         <p>Set your home thermostat to Celsius (&deg;C)</p>                                       <label><input type=checkbox><b></b></label></li>
    <li id=refrigerator> <p>Set your refrigerator to Celsius (&deg;C)</p>                                          <label><input type=checkbox><b></b></label></li>
-   <li id=tape-measure> <p>Buy a metric-only <a href={{tapeMeasure}}>tape measure</a></p>                         <label><input type=checkbox><b></b></label></li>
-   <li id=kitchen-scale><p>Buy a <a href=products#scales>kitchen scale</a> that displays grams (g)</p>            <label><input type=checkbox><b></b></label></li>
    <li id=bathroom>     <p>Set your bathroom scale to kilograms (kg)</p>                                          <label><input type=checkbox><b></b></label></li>
-   <li id=printer>      <p>Load your printer with <a href=products#office-supplies>A4 size paper</a></p>          <label><input type=checkbox><b></b></label></li>
-   <li id=helpful>      <p>Click "Helpful" for a review of a good metric-only product</p>                         <label><input type=checkbox><b></b></label></li>
+   <li id=labeling>     <p>Purchase a product for its better metric labeling</p>                                  <label><input type=checkbox><b></b></label></li>
+   <li id=kitchen-scale><p>Buy a <a href=products#scales>kitchen scale</a> that displays grams (g)</p>            <label><input type=checkbox><b></b></label></li>
+   <li id=tape-measure> <p>Buy a metric-only <a href={{tapeMeasure}}>tape measure</a></p>                         <label><input type=checkbox><b></b></label></li>
    <li id=5-star>       <p>Leave a <a href={{metricReview}}>5-star review</a> for a good metric-only product</p>  <label><input type=checkbox><b></b></label></li>
-   <li id=recipe>       <p>Follow a <a href={{metricRecipe}}>metric recipe</a> to prepare a dish</p>              <label><input type=checkbox><b></b></label></li>
-   <li id=diy>          <p>Complete a DIY project using only metric</p>                                           <label><input type=checkbox><b></b></label></li>
+   <li id=photo-review> <p>Post a <a href={{photoReview}}>product review</a> showing a metric reference</p>       <label><input type=checkbox><b></b></label></li>
+   <li id=helpful>      <p>Click "Helpful" for a review of a good metric-only product</p>                         <label><input type=checkbox><b></b></label></li>
    <li id=video>        <p>Up vote a video on social media that uses only metric</p>                              <label><input type=checkbox><b></b></label></li>
-   <li id=labeling>     <p>Purchase a product for its better metric labeling</p>                                  <label><input type=checkbox><b></b></label></li>
-   <li id=family-recipe><p><a href=calculator>Convert</a> a family recipe to metric and share</p>                 <label><input type=checkbox><b></b></label></li>
    <li id=comment>      <p>Use metric units in a social media comment</p>                                         <label><input type=checkbox><b></b></label></li>
-   <li id=photo-review> <p>Post a <a href={{photoReview}}>product review</a> showing a metric reference</p>       <label><input type=checkbox><b></b></label></li>
+   <li id=printer>      <p>Load your printer with <a href=products#office-supplies>A4 size paper</a></p>          <label><input type=checkbox><b></b></label></li>
+   <li id=recipe>       <p>Follow a <a href={{metricRecipe}}>metric recipe</a> to prepare a dish</p>              <label><input type=checkbox><b></b></label></li>
+   <li id=family-recipe><p><a href=calculator>Convert</a> a family recipe to metric and share</p>                 <label><input type=checkbox><b></b></label></li>
+   <li id=diy>          <p>Complete a DIY project using only metric</p>                                           <label><input type=checkbox><b></b></label></li>
    <li id=github>       <p>Star the <a href={{githubHome}}>think-metric</a> project on GitHub</p>                 <label><input type=checkbox><b></b></label></li>
    <li id=reddit>       <p>Join <a href={{redditSub}}>r/ThinkMetric</a> on Reddit</p>                             <label><input type=checkbox><b></b></label></li>
 </ol>
diff --git a/src/website/article/a-pint-is-not-a-unit-of-measurement/index.html b/src/website/article/a-pint-is-not-a-unit-of-measurement/index.html
@@ -7,6 +7,7 @@
 
    <section>
       <h2>{{articleTitle}}</h2>
+      <sup>Updated <time datetime={{file.timestamp}}>{{file.modified}}</time></sup>
       <p>
          Someday in the future, the word "pint" will lose all meaning as a unit of
          measurement.&nbsp;

diff --git a/src/website/article/create-product-reviews-showing-metric-references/index.html b/src/website/article/create-product-reviews-showing-metric-references/index.html
@@ -7,6 +7,7 @@
 
    <section>
       <h2>{{articleTitle}}</h2>
+      <sup>Updated <time datetime={{file.timestamp}}>{{file.modified}}</time></sup>
       <p>
          A small but simple way to advance metrication is to communicate using metric units.&nbsp;
          The more our fellow Americans are exposed to metric, the sooner we will all gain an

diff --git a/src/website/article/fractions-are-a-royal-pain-in-imperial/index.html b/src/website/article/fractions-are-a-royal-pain-in-imperial/index.html
@@ -7,6 +7,7 @@
 
    <section>
       <h2>{{articleTitle}}</h2>
+      <sup>Updated <time datetime={{file.timestamp}}>{{file.modified}}</time></sup>
       <figure class=small-picture>
          <img src={{heroImage}} alt=fractions data-license=public-domain>
          <figcaption>{{heroCaption}}</figcaption>
@@ -144,11 +145,13 @@ <h2>The Proof Is in the Pudding</h2>
 
    <section>
       <h2>Denominators are Sneaky</h2>
+      <blockquote>
+         How many inches is:<br>
+         <code>(7 3/4" + 5 7/8") &times; 2</code>
+      </blockquote>
       <p>
-         Doing basic math operations with fractional inches, such as
-         <code>(11 3/4" + 5 7/8") &times; 2</code>,
-         is cumbersome, but denominators can be quite sneaky even if you're not doing math
-         operations.&nbsp;
+         Doing basic math operations with fractional inches, is cumbersome, but denominators can be
+         quite sneaky even if you're not doing math operations.&nbsp;
       </p>
       <p>
          How many times have you made a measurement like <code>9 5/16"</code> and then gone to make
@@ -157,7 +160,7 @@ <h2>Denominators are Sneaky</h2>
       </p>
       <figure>
          <img src=reddit-32nd-64th.png alt=reddit data-license=fair-use>
-         <figcaption>Even Redditors cannot agree on which imperial denominator to use</figcaption>
+         <figcaption>Redditors cannot agree on which imperial denominator to use 🤣</figcaption>
       </figure>
       <p>
          Because of the small extra cognitive load dedicated to remembering the denominators,

diff --git a/src/website/article/go-fast-with-high-contrast-metric-only-tape-measures/index.html b/src/website/article/go-fast-with-high-contrast-metric-only-tape-measures/index.html
@@ -7,6 +7,7 @@
 
    <section>
       <h2>{{articleTitle}}</h2>
+      <sup>Updated <time datetime={{file.timestamp}}>{{file.modified}}</time></sup>
       <p>
          Traditional tape measures have scales with small numeric markings that continually
          increase over the length of the scale.&nbsp;

diff --git a/src/website/article/how-to-switch-your-mobile-device-to-metric/index.html b/src/website/article/how-to-switch-your-mobile-device-to-metric/index.html
@@ -7,6 +7,7 @@
 
    <section>
       <h2>{{articleTitle}}</h2>
+      <sup>Updated <time datetime={{file.timestamp}}>{{file.modified}}</time></sup>
       <figure class=medium-picture>
          <img src={{heroImage}} alt=iphone data-license=cc0>
          <figcaption>{{heroCaption}}</figcaption>

diff --git a/src/website/article/liberty-units-ftw/index.html b/src/website/article/liberty-units-ftw/index.html
@@ -7,6 +7,7 @@
 
    <section>
       <h2>{{articleTitle}}</h2>
+      <sup>Updated <time datetime={{file.timestamp}}>{{file.modified}}</time></sup>
       <figure>
          <img src={{heroImage}} alt=fireworks data-author=ny.gov data-license=public-domain>
          <figcaption>{{heroCaption}}</figcaption>

diff --git a/src/website/article/metric-poetry/index.html b/src/website/article/metric-poetry/index.html
@@ -7,6 +7,7 @@
 
    <section>
       <h2>{{articleTitle}}</h2>
+      <sup>Updated <time datetime={{file.timestamp}}>{{file.modified}}</time></sup>
       <h3>Common words for SI</h3>
       <p>
          It's been said that metric is good for accuracy but imperial is better for poetry.&nbsp;

diff --git a/src/website/article/metrication-is-the-path-of-least-resistance/index.html b/src/website/article/metrication-is-the-path-of-least-resistance/index.html
@@ -7,6 +7,7 @@
 
    <section>
       <h2>{{articleTitle}}</h2>
+      <sup>Updated <time datetime={{file.timestamp}}>{{file.modified}}</time></sup>
       <p>
          Metric is showing up in unexpected places.&nbsp;
          Major American sports broadcasters used to diligently convert international sport events

diff --git a/src/website/article/millimeter-standard-war/index.html b/src/website/article/millimeter-standard-war/index.html
@@ -7,6 +7,7 @@
 
    <section>
       <h2>{{articleTitle}}</h2>
+      <sup>Updated <time datetime={{file.timestamp}}>{{file.modified}}</time></sup>
       <figure>
          <img src={{heroImage}} alt=ww1 data-author=us-army data-license=public-domain>
          <figcaption>{{heroCaption}}</figcaption>

diff --git a/src/website/article/review-a-quality-metric-only-product/index.html b/src/website/article/review-a-quality-metric-only-product/index.html
@@ -7,9 +7,10 @@
 
    <section>
       <h2>{{articleTitle}}</h2>
+      <sup>Updated <time datetime={{file.timestamp}}>{{file.modified}}</time></sup>
       <p>
          Metric-only <a href={{webRoot}}/products>products</a> have cleaner more intuitive designs
-         than equivalent dual unit and imperial products.&nbsp;
+         than equivalent dual-unit and imperial products.&nbsp;
          If you want to contribute to promoting metric-only products, take a few minutes to post a
          positive online review highlighting the good design of a quality metric-only product that
          you've purchased and enjoy.&nbsp;
@@ -73,17 +74,17 @@ <h2>Sample Product Reviews</h2>
    </section>
 
    <section id=dual-units>
-      <h2>Dual Units are Evil</h2>
+      <h2>Dual-Units are Evil</h2>
       <figure class=medium-picture>
          <img src=dual-unit-scale.jpg alt=gauge data-license=fair-use>
          <figcaption>An ugly cluttered mess</figcaption>
       </figure>
       <p>
-         Dual units sound like the best of both worlds, but unfortunately having two disjoint
+         Dual-units sound like the best of both worlds, but unfortunately having two disjoint
          numbers for a single measurement is
          <a href=https://ukma.org.uk/practical-help/home-diy/dual-measuring-tapes
             class=external-site>inconvenient and messy</a>.&nbsp;
-         Dual units literally harm intuition and learning.&nbsp;
+         Dual-units literally harm intuition and learning.&nbsp;
          Numeracy is improved by keeping it clean and just using metric.&nbsp;
       </p>
       <p>

diff --git a/src/website/article/rules/index.html b/src/website/article/rules/index.html
@@ -7,6 +7,7 @@
 
    <section>
       <h2>{{articleTitle}}</h2>
+      <sup>Updated <time datetime={{file.timestamp}}>{{file.modified}}</time></sup>
       <figure>
          <img src={{heroImage}} alt=supercarrier
             data-author=jeffrey-g-katz-on-navy.mil data-license=public-domain>

diff --git a/src/website/assets/cc0-license.png b/src/website/assets/cc0-license.png
diff --git a/src/website/assets/si-wheel.png b/src/website/assets/si-wheel.png
diff --git a/src/website/css/layout.less b/src/website/css/layout.less
@@ -25,6 +25,10 @@
          margin-bottom: -0.2em;
          }
       }
+   >h2+sup {
+      display: block;
+      margin-top: -10px;
+      }
    >p, >div {
       text-align: left;
       li {

diff --git a/src/website/do-not-learn-metric/index.html b/src/website/do-not-learn-metric/index.html
@@ -61,7 +61,7 @@ <h2>Steps</h2>
                <b>Tools</b> &mdash;
                Buy some
                <a href={{webRoot}}/products/#tape-measures>metric-only measuring devices</a>
-               (avoid dual units like the plague because dual units kills intuition).&nbsp;
+               (avoid dual-units like the plague because dual-units kill intuition).&nbsp;
                Sadly, you'll have to purchase online as retail stores mostly sell imperial.&nbsp;
             </li>
             <li>

diff --git a/src/website/elsewhere/wip/index.html b/src/website/elsewhere/wip/index.html
@@ -7,6 +7,7 @@
 
    <section>
       <h2>{{articleTitle}}</h2>
+      <sup>Updated <time datetime={{file.timestamp}}>{{file.modified}}</time></sup>
       <p>
          Text goes here...&nbsp;
       </p>

diff --git a/src/website/index.html b/src/website/index.html
@@ -45,19 +45,10 @@ <h2>Your Personal Metrication Checklist</h2>
       {% render 'src/templates/metrication-checklist.html' %}
    </section>
 
-   <section>
-      <h2>Metric Poetry</h2>
-      <h3>Common words for SI</h3>
-      <p><i>"A journey of a thousand kays begins with a single step."</i></p>
+   <section id=articles>
       <figure class=small-picture>
-         <a href={{webRoot}}/poetry><img src={{webRoot}}/article/metric-poetry/si-wheel.png alt=si></a>
+         <img src={{webRoot}}/assets/si-wheel.png alt=si>
       </figure>
-      <p>
-         <a href={{webRoot}}/poetry>think-metric.org/poetry</a>
-      </p>
-   </section>
-
-   <section id=articles>
       <h2>Articles</h2>
       <div>
          <ul class=plain-list>
@@ -66,6 +57,31 @@ <h2>Articles</h2>
       </div>
    </section>
 
+   <section id=about>
+      <h2>About the Project</h2>
+      <p>
+         <b>Think Metric</b> is an
+         <a href=https://github.com/center-key/think-metric>Open Source project</a>,
+         and the content we create is published under the CC0 license.&nbsp;
+         CC0 is the permissive Creative Commons License for public domain work with
+         "No&nbsp;Rights&nbsp;Reserved".&nbsp;
+      </p>
+      <figure class=small-picture>
+         <a href=https://creativecommons.org/public-domain/cc0 class=external-site>
+            <img src={{webRoot}}/assets/cc0-license.png alt=cc0>
+         </a>
+      </figure>
+      <p>
+         We promote metric units for casual everyday use in America.&nbsp;
+         Our goal is to speed up metrication in order to boost America's economic competitiveness
+         and generate more good jobs.&nbsp;
+      </p>
+      <p>
+         Everyone interested in advocating for metrication is welcome to participate in the
+         <b>Think Metric</b> project.&nbsp;
+      </p>
+   </section>
+
 </main>
 
 {% render 'src/templates/doc-end.html' %}
diff --git a/src/website/products/index.html b/src/website/products/index.html
@@ -38,6 +38,7 @@ <h2>Table of Contents</h2>
 
    <section id=list>
       <h2>Buy Metric-Only</h2>
+      <sup>Updated <time datetime={{file.timestamp}}>{{file.modified}}</time></sup>
       <p>
          🏆: Favorite product
       </p>