Add watcher to src folder for interactive mode

center-key · Apr 29, 2024 · 7b0752c · 7b0752c
1 parent 633bff8
commit 7b0752c
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-<img src=https://think-metric.org/graphics/think-metric-logo.png width=100 alt=logo>
+<img src=src/website/graphics/think-metric-logo.png width=100 alt=logo>
 
 # Think Metric
 ### 🇺🇸 Americans for Metrication 🇺🇸
@@ -15,22 +15,24 @@ https://think-metric.org/logo.html
 
 ## Practical Ways to Go Metric
 
-We promote metric units for casual everyday use in America.  The goal is to speed up metrication to boost America's economic competitiveness and champion good jobs.
+We promote metric units for casual everyday use in America.
+Our goal is to speed up metrication to boost America's economic competitiveness and champion good jobs.
 
 This project and the content published is free to reuse under a permissive Creative Commons license.
 
 ## Contributor Notes
 ```shell
 $ cd think-metric
 $ npm install
-$ npm test
 $ npm run interactive
 ```
+As you make edits to files in the *src* folder, your browser will automatically refresh to display the new changes.
 
-To push changes to the live website:<br>
-GitHub project page -> _Actions_ -> _Publish Website_ -> _Run workflow_
+To publish merges to the live website:<br>
+GitHub project page &#10132; _Actions_ &#10132; _Publish Website_ &#10132; _Run workflow_
 
-Pull requests welcome.  You can help by contributing anything from minor typo fixes to writing new articles.
+Pull requests welcome.
+You can help by contributing anything from minor typo fixes to writing new articles.
 
 <br>
 

diff --git a/package.json b/package.json
@@ -48,17 +48,21 @@
          "lessc       src/website/style.less  build/style.css",
          "replacer    src/website --ext=.html build",
          "rev-web-assets build docs --meta-content-base=https://think-metric.org"
+      ],
+      "interactive": [
+         "chokidar src --command 'run-scripts lint build'",
+         "browser-sync . --startPath docs --files docs"
       ]
    },
    "scripts": {
       "pretest": "run-scripts clean lint generated build",
       "test": "html-validator docs '--ignore=Section lacks heading.'",
-      "preinteractive": "npm test",
-      "interactive": "browser-sync . --startPath docs --files docs"
+      "interactive": "npm test && run-scripts interactive --parallel"
    },
    "dependencies": {
       "@fortawesome/fontawesome-free": "~6.5",
       "browser-sync": "~3.0",
+      "chokidar-cli": "~3.0",
       "copy-file-util": "~1.2",
       "copy-folder-util": "~1.1",
       "dna-engine": "~3.1",

diff --git a/src/templates/to-do-checklist.html b/src/templates/to-do-checklist.html
@@ -11,5 +11,5 @@
    <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=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 with metric labeling over one without</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>
 </ol>
diff --git a/src/website/style.less b/src/website/style.less
@@ -141,7 +141,7 @@ table.big-table {
       }
    }
 ol.to-do-checklist {
-   @rowHeight: 2.6rem;
+   @rowHeight: 3.0rem;
    list-style: none;
    margin-bottom: 40px;
    counter-reset: item;
@@ -168,6 +168,7 @@ ol.to-do-checklist {
          flex-grow: 1;
          text-align: left;
          font-size: @rowHeight * 0.4;
+         .MobileMode({ font-size: @rowHeight * 0.3; });
          padding: 0px (@rowHeight * 0.8) 0px 10px;
          margin: 0px;
          a:visited {
@@ -177,7 +178,7 @@ ol.to-do-checklist {
             color: white;
             }
          }
-      label {
+      label {  //checkbox
          display: flex;
          align-items: center;
          padding-right: 10px;  //checkbox right gap
@@ -216,7 +217,7 @@ ol.to-do-checklist {
    width: @height;
    height: @height;
    line-height: @height;
-   font-size: @rowHeight * 0.6;
+   font-size: @height * 0.5;
    font-weight: bold;
    text-align: center;
    color: white;