minor content changes, adding hash to js

.eleventy.js

@@ -17,16 +17,22 @@ const {
   toAbsoluteUrl,
   stripHtml,
   minifyCss,
+  minifyJs,
   mdInline
 } = require('./config/filters/index.js');
 
 // module import shortcodes
-const {imageShortcodePlaceholder, liteYoutube} = require('./config/shortcodes/index.js');
+const {
+  imageShortcodePlaceholder,
+  includeRaw,
+  liteYoutube
+} = require('./config/shortcodes/index.js');
 
 // module import collections
 const {getAllPosts} = require('./config/collections/index.js');
 
-// module import transforms
+// module import events
+const {before} = require('./config/events/before.js');
 
 // plugins
 const markdownLib = require('./config/plugins/markdown.js');
@@ -38,9 +44,6 @@ const pluginRss = require('@11ty/eleventy-plugin-rss');
 const inclusiveLangPlugin = require('@11ty/eleventy-plugin-inclusive-language');
 
 module.exports = eleventyConfig => {
-  // Tell 11ty to use the .eleventyignore and ignore our .gitignore file
-  eleventyConfig.setUseGitIgnore(false);
-
   // 	--------------------- Custom Watch Targets -----------------------
   eleventyConfig.addWatchTarget('./src/assets');
   eleventyConfig.addWatchTarget('./utils/*.js');
@@ -65,6 +68,7 @@ module.exports = eleventyConfig => {
   eleventyConfig.addFilter('toJson', JSON.stringify);
   eleventyConfig.addFilter('fromJson', JSON.parse);
   eleventyConfig.addFilter('cssmin', minifyCss);
+  eleventyConfig.addNunjucksAsyncFilter('jsmin', minifyJs);
   eleventyConfig.addFilter('md', mdInline);
   eleventyConfig.addFilter('keys', Object.keys);
   eleventyConfig.addFilter('values', Object.values);
@@ -73,17 +77,19 @@ module.exports = eleventyConfig => {
   // 	--------------------- Custom shortcodes ---------------------
   eleventyConfig.addNunjucksAsyncShortcode('imagePlaceholder', imageShortcodePlaceholder);
   eleventyConfig.addShortcode('youtube', liteYoutube);
+  eleventyConfig.addShortcode('include_raw', includeRaw);
   eleventyConfig.addShortcode('year', () => `${new Date().getFullYear()}`); // current year, stephanie eckles
 
   // 	--------------------- Custom transforms ---------------------
-
   eleventyConfig.addPlugin(require('./config/transforms/html-config.js'));
 
   // 	--------------------- Custom Template Languages ---------------------
-
   eleventyConfig.addPlugin(require('./config/template-languages/css-config.js'));
   eleventyConfig.addPlugin(require('./config/template-languages/js-config.js'));
 
+  // 	--------------------- Custom events ---------------------
+  // eleventyConfig.addPlugin(require('./config/events/before.js'));
+
   // 	--------------------- Custom collections -----------------------
   eleventyConfig.addCollection('posts', getAllPosts);
 
@@ -95,28 +101,35 @@ module.exports = eleventyConfig => {
   eleventyConfig.addPlugin(inclusiveLangPlugin);
 
   // 	--------------------- Passthrough File Copy -----------------------
-
   // same path
   ['src/assets/fonts/', 'src/assets/images/'].forEach(path =>
     eleventyConfig.addPassthroughCopy(path)
   );
 
-  //  social icons to root directory
+  // social icons to root directory
   eleventyConfig.addPassthroughCopy({
     'src/assets/images/favicon/*': '/'
   });
 
-  // 	--------------------- general config -----------------------
+  eleventyConfig.addPassthroughCopy({
+    'src/assets/css/global.css': 'src/_includes/global.css'
+  });
 
+  // 	--------------------- general config -----------------------
   return {
+    // Pre-process *.md, *.html and global data files files with: (default: `liquid`)
+    markdownTemplateEngine: 'njk',
+    htmlTemplateEngine: 'njk',
+    dataTemplateEngine: 'njk',
+
+    // Optional (default is set): If your site deploys to a subdirectory, change `pathPrefix`, for example with with GitHub pages
+    pathPrefix: '/',
+
     dir: {
-      input: 'src',
       output: 'dist',
+      input: 'src',
       includes: '_includes',
       layouts: '_layouts'
-    },
-    markdownTemplateEngine: 'njk',
-    dataTemplateEngine: 'njk',
-    htmlTemplateEngine: 'njk'
+    }
   };
 };

.eleventyignore

@@ -1 +0,0 @@
-node_modules

.gitignore

@@ -1,16 +1,14 @@
-# Misc
-*.log
-npm-debug.*
-*.scssc
-*.log
-*.swp
-.DS_Store
-Thumbs.db
-.sass-cache
-.env
-.cache
-
-# Node modules and output
+# Node modules
 node_modules
+
+# generated files
 dist
 src/_includes/css
+src/_includes/scripts
+
+# cache
+.cache
+
+# secret data
+.env
+

config/events/before.js

@@ -0,0 +1,9 @@
+var fs = require('fs');
+
+module.exports = eleventyConfig => {
+  eleventyConfig.on('eleventy.before', async () => {
+    fs.copyFile('src/assets/scripts/app.js', 'src/_includes/app-min.js', err => {
+      if (err) throw err;
+    });
+  });
+};

config/filters/index.js

@@ -48,6 +48,29 @@ const formatDate = (date, format) => dayjs(date).format(format);
 
 const minifyCss = code => new CleanCSS({}).minify(code).styles;
 
+const minifyJs = async (code, ...rest) => {
+  const callback = rest.pop();
+  const cacheKey = rest.length > 0 ? rest[0] : null;
+
+  try {
+    if (cacheKey && jsminCache.hasOwnProperty(cacheKey)) {
+      const cacheValue = await Promise.resolve(jsminCache[cacheKey]); // Wait for the data, wrapped in a resolved promise in case the original value already was resolved
+      callback(null, cacheValue.code); // Access the code property of the cached value
+    } else {
+      const minified = esbuild.transform(code, {
+        minify: true
+      });
+      if (cacheKey) {
+        jsminCache[cacheKey] = minified; // Store the promise which has the minified output (an object with a code property)
+      }
+      callback(null, (await minified).code); // Await and use the return value in the callback
+    }
+  } catch (err) {
+    console.error('jsmin error: ', err);
+    callback(null, code); // Fail gracefully.
+  }
+};
+
 /**
  * Render content as inline markdown if single line, or full
  * markdown if multiline. for md in yaml
@@ -85,5 +108,6 @@ module.exports = {
   toAbsoluteUrl,
   stripHtml,
   minifyCss,
+  minifyJs,
   mdInline
 };

config/shortcodes/includeRaw/index.js

@@ -0,0 +1,17 @@
+// Because Nunjucks's include doesn't like CSS with "{#". Source: https://github.com/nhoizey/pack11ty/blob/781248b92480701208f69e2161165e58d79a23ee/src/_11ty/shortcodes/include_raw.js
+
+const fs = require('fs');
+
+let memoizedIncludes = {};
+
+const includeRaw = file => {
+  if (file in memoizedIncludes) {
+    return memoizedIncludes[file];
+  } else {
+    let content = fs.readFileSync(file, 'utf8');
+    memoizedIncludes[file] = content;
+    return content;
+  }
+};
+
+module.exports = includeRaw;

config/shortcodes/index.js

@@ -1,6 +1,8 @@
 const imageShortcodePlaceholder = require('./imagePlaceholder');
+const includeRaw = require('./includeRaw');
 const liteYoutube = require('./youtube-lite');
 module.exports = {
   imageShortcodePlaceholder,
+  includeRaw,
   liteYoutube
 };

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "eleventy-excellent",
-  "version": "1.1.7",
+  "version": "1.2.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "eleventy-excellent",
-      "version": "1.1.7",
+      "version": "1.2.0",
       "license": "ISC",
       "dependencies": {
         "@11ty/eleventy": "^2.0.0-canary.23",

postcss.config.js

@@ -1,8 +0,0 @@
-module.exports = {
-  plugins: [
-    require('postcss-import-ext-glob'),
-    require('postcss-import'),
-    require('tailwindcss'),
-    require('cssnano')
-  ]
-};

src/_layouts/base.njk

@@ -58,7 +58,7 @@
     {% endif %}
 
     <!-- defered js  -->
-    <script type="module" src="/assets/scripts/app.js" defer></script>
+    <script type="module" src="/assets/scripts/app.js?{{ assetHash }}" defer></script>
 
     <!-- everything else: meta tags, icons, open graph etc.  -->
     {% include "partials/meta-info.njk" %}

src/assets/scripts/app.js

@@ -1,36 +1,4 @@
-// ------------------- cards redundant click, accessible whole card clickable solution by Heydon Pickering
-
-// const cards = [...document.querySelectorAll('.card')];
-// cards.forEach(card => {
-//   card.style.cursor = 'pointer';
-//   let down,
-//     up,
-//     link = card.querySelector('a');
-//   card.onmousedown = () => (down = +new Date());
-//   card.onmouseup = () => {
-//     up = +new Date();
-//     if (up - down < 200) {
-//       link.click();
-//     }
-//   };
-// });
-
-const cards = document.querySelectorAll('.card');
-Array.prototype.forEach.call(cards, card => {
-  let down,
-    up,
-    link = card.querySelector(':is(h1, h2, h3, h4, h5, h6) a');
-  card.style.cursor = 'pointer';
-  card.onmousedown = () => (down = +new Date());
-  card.onmouseup = () => {
-    up = +new Date();
-    if (up - down < 200) {
-      link.click();
-    }
-  };
-});
-
-// ------------------- responsive accessible nav
+// ------------------- responsive accessible nav by Manuel Matuzović: https://web.dev/website-navigation/
 
 const nav = document.querySelector('nav');
 const list = nav.querySelector('ul');
@@ -65,3 +33,20 @@ document.addEventListener('click', e => {
 });
 
 nav.insertBefore(burgerClone, list);
+
+// ------------------- accessible clickable cards solution by Heydon Pickering: https://inclusive-components.design/cards/
+
+const cards = [...document.querySelectorAll('.card')];
+cards.forEach(card => {
+  card.style.cursor = 'pointer';
+  let down,
+    up,
+    link = card.querySelector('a');
+  card.onmousedown = () => (down = +new Date());
+  card.onmouseup = () => {
+    up = +new Date();
+    if (up - down < 200) {
+      link.click();
+    }
+  };
+});

src/pages/about.md

@@ -6,9 +6,9 @@ layout: page
 youtube: true
 ---
 
-Based on the companion website of Andy Bell's talk 'Be the browser’s mentor, not its micromanager'. It takes over the core functionality, which is using Tailwind CSS to generate CSS variables based on design tokens.
+Based on the [companion website](https://buildexcellentwebsit.es/) of Andy Bell's talk 'Be the browser’s mentor, not its micromanager'. It takes over a core functionality: Using Tailwind CSS to generate CSS variables based on design tokens.
 
-Just like the original and role model, this starter uses modern CSS, fluid type & space, flexible Layouts and Progressive Enhancement, wrapped in a basic template, ideal for personal websites and other small projects.
+Like buildexcellentwebsit.es, this starter uses modern CSS, fluid type & space, flexible Layouts and Progressive Enhancement, wrapped in a basic template, ideal for personal websites and other small projects.
 
 The aim is to hopefully spread the use of this _excellent_ workflow. To work with it efficiently you should be familiar with [cube.fyi](https://cube.fyi/), [utopia.fyi](https://utopia.fyi/) and [every-layout.dev](https://every-layout.dev/).
 
@@ -19,4 +19,4 @@ Edit your preferences (colors, fonts, fluid text sizes etc.) in `src/assets/css/
 
 ## Watch the talk
 
-{% youtube '5uhIiI9Ld5M', 'Andy Bell – Be the browser’s mentor, not its micromanager' %}
+{% youtube 'JqnMI1AXl6w', 'Andy Bell – Be the browser’s mentor, not its micromanager' %}