New article about online product reviews

src/templates/generated/articles.html

@@ -1,4 +1,6 @@
+<li><a href={{webRoot}}/article/create-product-reviews-showing-metric-references>Create Product Reviews Showing Metric References</a></li>
 <li><a href={{webRoot}}/article/go-fast-with-high-contrast-metric-only-tape-measures>Go Fast With High Contrast Metric Only Tape Measures</a></li>
+<li><a href={{webRoot}}/article/liberty-units-ftw>Liberty Units FTW!</a></li>
 <li><a href={{webRoot}}/article/metric-poetry>Metric Poetry</a></li>
 <li><a href={{webRoot}}/article/metrication-is-the-path-of-least-resistance>Metrication is the Path of Least Resistance</a></li>
 <li><a href={{webRoot}}/article/rules>Rules</a></li>

src/templates/to-do-checklist.html

@@ -1,19 +1,26 @@
+{% assign tapeMeasure = webRoot | append: '/article/go-fast-with-high-contrast-metric-only-tape-measures' %}
+{% assign photoReview = webRoot | append: '/article/create-product-reviews-showing-metric-references' %}
+{% assign recipe =      'https://pilafian.org/dem/pilaf' %}
+{% assign github =      'https://github.com/center-key/think-metric' %}
+{% assign reddit =      'https://www.reddit.com/r/ThinkMetric' %}
+
 <ol class=to-do-checklist data-on-click=app.saveChecklist>
    <li id=phone>        <p>Set your mobile device to metric</p>                                                   <label><input type=checkbox><b></b></label></li>
    <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={{webRoot}}/article/go-fast-with-high-contrast-metric-only-tape-measures>tape measure</a></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={{webRoot}}/products>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=helpful>      <p>Click "Helpful" for a review of a good metric product</p>                              <label><input type=checkbox><b></b></label></li>
-   <li id=review>       <p>Leave a positive review for a good metric product</p>                                  <label><input type=checkbox><b></b></label></li>
-   <li id=recipe>       <p>Follow a <a href=https://pilafian.org/dem/pilaf>metric recipe</a> to prepare a dish</p><label><input type=checkbox><b></b></label></li>
+   <li id=5-star>       <p>Leave a 5 star review for a good metric product</p>                                    <label><input type=checkbox><b></b></label></li>
+   <li id=recipe>       <p>Follow a <a href={{recipe}} class=external-site>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=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>Convert 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=github>       <p>Star the <a href=https://github.com/center-key/think-metric>think-metric</a> project on GitHub</p> <label><input type=checkbox><b></b></label></li>
-   <li id=reddit>       <p>Join <a href=https://www.reddit.com/r/ThinkMetric>r/ThinkMetric</a> on Reddit</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=github>       <p>Star the <a href={{github}}>think-metric</a> project on GitHub</p>                     <label><input type=checkbox><b></b></label></li>
+   <li id=reddit>       <p>Join <a href={{reddit}}>r/ThinkMetric</a> on Reddit</p>                                <label><input type=checkbox><b></b></label></li>
 </ol>

src/website/article/create-product-reviews-showing-metric-references/index.html

@@ -0,0 +1,63 @@
+{% assign articleTitle = 'Create Product Reviews Showing Metric References' %}
+{% assign heroImage =    'metric-almonds.jpg' %}
+{% assign heroCaption =  '10 cinnamon roasted almonds are about 20 grams' %}
+{% render 'src/templates/doc-begin.html', articleTitle: articleTitle, heroImage: heroImage, heroCaption: heroCaption %}
+
+<main>
+
+   <section>
+      <h2>{{articleTitle}}</h2>
+      <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
+         intuitive sense of metric.&nbsp;
+      </p>
+      <figure>
+         <img src={{heroImage}} data-author=dem-pilafian data-license=cc0 alt=almonds>
+         <figcaption>{{heroCaption}}</figcaption>
+      </figure>
+      <p>
+         As the saying goes, <i>"A picture is worth a thousand words"</i> (not 5,280 words but
+         1,000).&nbsp;
+      </p>
+      <p>
+         You can leverage the power of a picture by taking a photo of a product you love that you
+         purchased online.&nbsp;
+         Take the photo while the product is being measured with a metric only ruler or scale, and
+         include the photo in a review of the product you submit to the online shopping
+         website.&nbsp;
+      </p>
+   </section>
+
+   <section>
+      <h2>Tips for product photography</h2>
+      <div>
+         <ol>
+            <li>Be sure the product is brightly lit</li>
+            <li>Check that the product is in sharp focus</li>
+            <li>Crop the image to draw attention to the product</li>
+            <li>Resize the image to be no more than 1,000 pixels wide or tall</li>
+            <li>Increase the "sharpness" and "exposure" a bit to improve contrast</li>
+         </ol>
+      </div>
+   </section>
+
+   <section>
+      <p>
+         The visual reference in your product review will help other shoppers by providing
+         measurement information, and it will also give everyone a frame of reference for visually
+         understanding metric units.&nbsp;
+         For example, a great way to learn that an almond is about 3 cm long is to see a photo of
+         a centimeter ruler measuring the very type of almond you're just about to put in your
+         shopping cart.&nbsp;
+      </p>
+      <p>
+         Whenever you stumble upon a helpful product review that shows a metric reference, be sure
+         to smash that <i>"Helpful"</i> button.
+      </p>
+      <figure>📷 📷 📷</figure>
+   </section>
+
+</main>
+
+{% render 'src/templates/doc-end.html' %}

src/website/article/go-fast-with-high-contrast-metric-only-tape-measures/index.html

@@ -17,14 +17,18 @@ <h2>{{articleTitle}}</h2>
 
    <section>
       <figure>
-         <img src={{heroImage}} data-author=dem-pilafian data-license=cc0 alt=-tape-measure>
+         <img src={{heroImage}} data-author=dem-pilafian data-license=cc0 alt=tape-measure>
          <figcaption>{{heroCaption}}</figcaption>
       </figure>
       <p>
          A newer high contrast design uses big bold digits that repeat from 1 to 9 on a white background.&nbsp;
          Red boxes spaced every 10 centimeters show the total number of centimeters.&nbsp;
          This vivid scale is super easy to read and makes measuring blazing fast.&nbsp;
       </p>
+      <figure>
+         <img src=cm-rulers.jpg data-author=dem-pilafian data-license=cc0 alt=rulers>
+         <figcaption>Some cm rulers also incorporate scales with repeating 1 to 9 digits</figcaption>
+      </figure>
       <p>
          If you want to speed up your work with a high contrast tape measure, take a look at the
          <a href={{webRoot}}/products>Timesaving Metric Products</a>

src/website/article/liberty-units-ftw/index.html

@@ -0,0 +1,43 @@
+{% assign articleTitle = 'Liberty Units FTW!' %}
+{% assign heroImage =    'statue-of-liberty-on-4th-of-july.jpg' %}
+{% assign heroCaption =  'Statue of Liberty on 4th of July' %}
+{% render 'src/templates/doc-begin.html', articleTitle: articleTitle, heroImage: heroImage, heroCaption: heroCaption %}
+
+<main>
+
+   <section>
+      <h2>{{articleTitle}}</h2>
+      <figure>
+         <img src={{heroImage}} data-author=ny.gov data-license=public-domain alt=fireworks>
+         <figcaption>{{heroCaption}}</figcaption>
+      </figure>
+      <p>
+         Fahrenheit, miles, pounds, and gallons are imperial units from the days
+         <b><i>before</i></b> our freedom when we were ruled over by a foreign king.&nbsp;
+         The king pressed his <b>foot</b> onto our neck, but the Founding Fathers rebelled.&nbsp;
+      </p>
+      <p>
+         Antiquated imperial units are submissive and cowardly.&nbsp;
+         Stop licking the boots of a dead king.&nbsp;
+         Stand for liberty and use metric.&nbsp;
+      </p>
+      <p>
+         <b>Liberty Units FTW!</b>
+      </p>
+      <figure>
+         <img src=washington-crossing-the-delaware.jpg data-author=emanuel-leutze data-license=public-domain alt=painting>
+         <figcaption>Washington Crossing the Delaware by Emanuel Leutze</figcaption>
+      </figure>
+   </section>
+
+   <section>
+      <p>
+         The copper part of the Statue of Liberty stands 46 meters tall, and the top of the torch
+         is 93 meters above ground level.
+      </p>
+      <figure>🇺🇸 🗽 🇺🇸</figure>
+   </section>
+
+</main>
+
+{% render 'src/templates/doc-end.html' %}

src/website/article/rules/index.html

@@ -25,20 +25,30 @@ <h2>Don't be whiny</h2>
    <section>
       <h2>America, Fuck Yeah</h2>
       <p>
-         We do not tolerate whining about Americans being too this or that to understand
-         metric.&nbsp;
+         We do not tolerate whimpering and sniveling about Americans being too this or that to
+         understand metric.&nbsp;
          Ain't nobody got time to listen to tankies, bootlickers, and jihadists cry about the
          U.S.&nbsp;
       </p>
       <p>
-         By the way, NASA used metric for the Apollo flight calculations, so America is the only
-         country on earth to use metric to land a human on the moon.&nbsp;
+         NASA used metric for the Apollo flight calculations thus making America the one and only
+         nation on earth to use metric to land a human on the moon.&nbsp;
       </p>
       <p>
          America, Fuck Yeah! 🇺🇸🗽🇺🇸&nbsp;
       </p>
    </section>
 
+   <section>
+      <h2>No unit conversion tips</h2>
+      <p>
+         Doing unit conversions is like driving a rusted out Yugo or Trabant.&nbsp;
+         Sure, you can do it, but why?&nbsp;
+         Unit conversions hamper intuitive understanding of measurements and harm numeracy.&nbsp;
+         Unit conversions are a distracting waste of time.&nbsp;
+      </p>
+   </section>
+
    <section>
       <h2>Do not debate spelling or pronunciation</h2>
       <p>
@@ -48,15 +58,21 @@ <h2>Do not debate spelling or pronunciation</h2>
          Do not debate spelling and pronunciation.&nbsp;
          Being pedantic and annoying makes all metric advocates seem like dweeby jerks.&nbsp;
       </p>
-   </section>
-
-   <section>
-      <h2>No unit conversion tips</h2>
+      <figure>
+         <img src=whipshots-50ml.jpg data-author=whipshots data-license=fair-use alt=50ml>
+         <figcaption>Omitting the space in "50ml" looks yummy!</figcaption>
+      </figure>
       <p>
-         Doing unit conversions is like driving a rusted out Yugo or Trabant.&nbsp;
-         Sure, you can do it, but why?&nbsp;
-         Unit conversions hamper intuitive understanding of measurements and harm numeracy.&nbsp;
-         Unit conversions are a distracting waste of time.&nbsp;
+         The same goes for spaces and commas.&nbsp;
+         Official science and engineering documents should put a space between the numerical
+         value and unit symbol in order to consistently adher to SI rules.&nbsp;
+         In casual writing, however, dropping the space often looks better and is perfectly
+         acceptable.&nbsp;
+      </p>
+      <p>
+         Also, we Americans use a comma as the thousands separator, and this is great for clarity.&nbsp;
+         1 234 is confusing and causes formatting errors.&nbsp;
+         1,234 is clear.&nbsp;
       </p>
    </section>
 
@@ -98,8 +114,8 @@ <h2>Metric clock gibberish is prohibited</h2>
          Metric clocks are a goofy idea that have nothing to do with metrication.&nbsp;
          A tenth of a day is a useless time interval, so the whole idea of a metric clock can
          never catch on.&nbsp;
-         The second is a base SI unit, and other units of time, like the hour, are just
-         convenient derivations of the second.&nbsp;
+         The base SI unit for time is the second, and the other units of time, like minute and hour, are
+         just convenient derivations of the second.&nbsp;
       </p>
       <figure>⚖️ ⚖️ ⚖️</figure>
    </section>

src/website/elsewhere/index.html

@@ -14,9 +14,10 @@ <h3>Resources and interesting stuff</h3>
             <li><a href=https://www.snoqap.com/posts/2019/2/22/conversion-to-the-metric-system-what-would-it-cost>📊 What Would It Cost?</a></li>
             <li><a href=https://www.nist.gov/pml/owm/chocolate-chip-cookies>🍪 Sweeter!</a></li>
             <li><a href=https://pilafian.org/dem/pilaf>🌾 Tastes better!</a></li>
-            <li><a href=https://youtu.be/X98cIRlEI2k>🌡️ How to Learn Celsius</a> (amazing video by polýMATHY)</li>
-            <li><a href=https://youtu.be/hid7EJkwDNk>📐 Is The Metric System Actually Better?</a> (excellent video by Real Engineering)</li>
-            <li><a href=https://youtu.be/hPfbZxXcG54>💬 Short 3-Minute Essay</a> (persuasive overview video by PBS)</li>
+            <li><a href=https://youtu.be/Z_1Q0XB4X0Y>🦠 You Are The Center of The Universe, Literally</a> (video by Kurzgesagt)</li>
+            <li><a href=https://youtu.be/X98cIRlEI2k>🌡️ How to Learn Celsius</a> (video by polýMATHY)</li>
+            <li><a href=https://youtu.be/hid7EJkwDNk>📐 Is The Metric System Actually Better?</a> (video by Real Engineering)</li>
+            <li><a href=https://youtu.be/hPfbZxXcG54>💬 Short 3-Minute Essay</a> (video by PBS)</li>
             <li><a href=https://www.christianitytoday.com/behemoth/2016/issue-39-january-7-2016/why-god-delights-in-metric-system.html>🕯️ Why God Delights in the Metric System</a></li>
          </ol>
       </div>

src/website/style.less

@@ -71,6 +71,7 @@ body {
                margin-bottom: 15px;
                }
             }
+            >figure { padding: 0px 10px; }  //temporary until v2.1.4
          }
       }
    >footer {