migrate: Add frontend Javascript; Add <site-busy-spinner> WebC (#75)

* JS custom elements: <my-feed>, <my-search>, <my-analytics>
nfreear · Mar 18, 2023 · 99993f1 · 99993f1
1 parent 8814aac
commit 99993f1
Show file tree

Hide file tree

Showing 11 changed files with 120 additions and 22 deletions.
diff --git a/_components/site-analytics.webc b/_components/site-analytics.webc
@@ -12,7 +12,12 @@
 </script>
 
 <img
-  webc:if="analytics.enable"
+  webc:if="analytics.enableGoatCounter"
   :src="`https://${analytics.gcId}.goatcounter.com/count?p=${_enc(analytics.host + page.url)}&t=${_enc(title)}&b=0`"
   alt=""
 />
+
+<my-analytics
+  webc:if="analytics.enableGoogleAnalytics"
+  :analytics-id="analytics.googleAID"
+></my-analytics>
diff --git a/_components/site-busy-spinner.webc b/_components/site-busy-spinner.webc
@@ -0,0 +1,36 @@
+
+<div class="site-busy-spinner">
+  <div class="spinner-text">
+    <slot>
+      <p> Loading &hellip; </p>
+    </slot>
+  </div>
+  <div class="spinner-animation"></div>
+</div>
+
+<style>
+.site-busy-spinner {
+  margin: 2rem auto;
+  text-align: center;
+}
+.site-busy-spinner .spinner-animation {
+  border: 2.5vh solid teal;
+  border-bottom-color: #ddd;
+  border-radius: 50%;
+  margin: 1rem auto;
+  height: 35vh;
+  width: 35vh;
+
+  animation-direction: normal;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear; /* << +1 ! */
+  animation-play-state: running;
+  animation-name: Rotate;
+}
+
+@keyframes Rotate {
+  0%   { transform: rotateZ(0deg);  }
+  100% { transform: rotateZ(360deg); }
+}
+</style>
diff --git a/_data/analytics.js b/_data/analytics.js
@@ -1,13 +1,15 @@
 /**
- * Site analytics.
+ * Site analytics settings.
  *
  * @see _components/site-analytics.webc
  */
 
 // console.log('analytics.js:', process.env, this, global);
 
 module.exports = {
-  "enable": true,
-	"gcId": "ndf812",
-	"host": process.env.CI ? "nfreear.github.io" : "localhost:8080"
+  "enableGoatCounter": true,
+  "gcId": "ndf812",
+  "enableGoogleAnalytics": true,
+  "googleAID": "UA-8330079-6",
+  "host": process.env.CI ? "nfreear.github.io" : "localhost:8080"
 };
diff --git a/_data/site.js b/_data/site.js
@@ -1,10 +1,16 @@
 /**
- * Site settings.
- *
- * @legacy Carried from Jekyll.
+ * General site settings.
  */
 
+const frontendJavascript = () => process.env.JS === '1';
+
 module.exports = {
-	date_format: "%-d %B %Y",
+  frontendJavascript: frontendJavascript(),
+  googSearchId: '001222343498871500969:-u73i2qfu2s',
+
+  /** @legacy Carried from Jekyll. */
+  date_format: "%-d %B %Y",
   excerpt_truncate: 28
 };
+
+console.debug('[11ty]', 'Javascript (env):', frontendJavascript()); // typeof process.env.JS;
diff --git a/_includes/layouts/base.webc b/_includes/layouts/base.webc
@@ -1,5 +1,5 @@
 <!doctype html>
-<html :lang="metadata.language">
+<html :lang="metadata.language" class="no-js">
 	<head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -40,5 +40,11 @@
     <site-analytics webc:nokeep></site-analytics>
   </footer>
 
+  <script
+    webc:if="site.frontendJavascript"
+    webc:keep
+    :src="url('/lib/app.mjs')"
+    type="module"
+  ></script>
   </body>
 </html>
diff --git a/_pages/links.html b/_pages/links.html
@@ -1,7 +1,8 @@
 ---
 layout: page
-title: Links & Bookmarks
-permalink: /links
+title: Bookmarks
+# title: Links & Bookmarks
+permalink: /links/
 x-nav-class: sr-only
 x-created:   2022-12-09
 ---
@@ -12,7 +13,11 @@
   include="accessibility,disability,usability,research,security,youtube"
   href="https://nfreear.github.io/bookmarks/feed.json"
   >
-  <my-busy-spinner class="loading-container">
-    <p> Loading bookmarks … </p>
-  </my-busy-spinner>
+  <site-busy-spinner webc:nokeep>
+    <p> Loading bookmarks … (Javascript) </p>
+  </site-busy-spinner>
 </my-feed>
+
+<p webc:if="!site.enableJavascript">
+  [Site search & Javascript disabled.]
+</p>
diff --git a/_pages/search.html b/_pages/search.html
@@ -10,8 +10,20 @@
 
   <h1 class="page-heading"><label for="gsc-i-id1">Search</label></h1>
 
-
-  <script>
+  <my-search
+    webc:keep
+    :cx="site.googSearchId"
+  >
+    <site-busy-spinner webc:nokeep>
+      <p id="x-cse-loading"> Loading search … (Javascript) </p>
+    </site-busy-spinner>
+  </my-search>
+
+  <p webc:if="!site.enableJavascript">
+    [Site search & Javascript disabled.]
+  </p>
+
+  <script webc:nokeep>
   (function (document, L) {
     if (L.search.match(/[\?&]q=\w+/)) {
       var cx = '001222343498871500969:-u73i2qfu2s';
@@ -26,7 +38,12 @@ <h1 class="page-heading"><label for="gsc-i-id1">Search</label></h1>
   })(window.document, window.location);
   </script>
 
-  <gcse:search><form><p id="x-cse-loading"> Search loading ... </p></form></gcse:search>
+  <!-- <gcse:search>
+    <form>
+      <p id="x-cse-loading"> Loading search … (Javascript) </p>
+      <site-busy-spinner webc:nokeep></site-busy-spinner>
+    </form>
+  </gcse:search> -->
 
 
   <p id="plugin"></p>

diff --git a/css/style.css b/css/style.css
@@ -79,11 +79,21 @@ p:last-child {
 	margin-bottom: 0;
 }
 
+my-feed {
+	display: block;
+	margin: 2rem 0;
+}
+
 p,
 li {
 	line-height: 1.5;
 }
 
+my-feed::part(a) {
+	line-height: 2;
+}
+
+my-feed::part(a),
 a[href] {
 	color: var(--text-color-link);
 }

diff --git a/eleventy.config.js b/eleventy.config.js
@@ -22,6 +22,7 @@ module.exports = (eleventyConfig) => {
   // eleventyConfig.addPassthroughCopy('assets/fonts');
 
   eleventyConfig.addPassthroughCopy('css');
+  eleventyConfig.addPassthroughCopy('lib'); // Was: 'js'
   eleventyConfig.addPassthroughCopy('favicon.ico');
 
   layoutAlias.forEach(alias => {
@@ -31,7 +32,7 @@ module.exports = (eleventyConfig) => {
 
   eleventyConfig.on('eleventy.after', async ({ dir, results, runMode, outputMode }) => {
     // console.debug('> 11ty.CFG:', eleventyConfig);
-    console.debug('> 11ty.After:', dir, runMode, outputMode); // Not: results;
+    console.debug('[11ty]', 'After:', dir, runMode, outputMode); // Not: results;
   });
 
   return {

diff --git a/lib/app.mjs b/lib/app.mjs
@@ -0,0 +1,9 @@
+
+import customImport from 'https://nfreear.github.io/elements/custom.js';
+
+await customImport('my-analytics, my-feed, my-search');
+
+document.documentElement.classList.remove('no-js');
+document.documentElement.classList.add('js');
+
+console.debug('app.mjs');
diff --git a/package.json b/package.json
@@ -12,10 +12,11 @@
     "luxon": "^3.2.1"
   },
   "scripts": {
-    "build": "npx @11ty/eleventy",
+    "build": "JS=1 npx @11ty/eleventy",
     "clean": "rm -rf _site",
-    "start:debug": "DEBUG=Eleventy* npx @11ty/eleventy --serve",
-    "start": "npx @11ty/eleventy --serve --quiet"
+    "start:debug": "JS=1 DEBUG=Eleventy* npx @11ty/eleventy --serve",
+    "start:nojs": "JS=0 npx @11ty/eleventy --serve --quiet",
+    "start": "JS=1 npx @11ty/eleventy --serve --quiet"
   },
   "repository": {
     "type": "git",