Portfolio Presentation

Dynamically Static Service Worker Cache Name

2024-02-17T19:00:00-05:00

Dynamic Cache Name As A Static Value

Published: Feb 17, 2024
Updated: Dec 13, 2024

If you have ever engineered a Progressive Web App (PWA), you're well aware that the service-worker.js file is at the heart of this effort. It really does control the offline-capable aspects of your PWA.

The beating heart inside this beating heart is the Cache Storage functionality. The files you want available, even though there's no network connection. Logic tells us that when you update/re-build your site/app, this browser cache should be updated as well, and a versioned cacheName does just that.

On To The Show

To begin this discussion, you could ideally update the cacheName, which is declared right away in your service-worker.js file sent to the browser.

service-worker.js

let cacheName = "myAppCache-v1";

But updating the cacheName version string manually every time there's an update is a giant opportunity to forget all about it. How about a dynamic version name, something like this?

service-worker.js

let cacheName = "myAppCache-qkGOtAv";

Sure seems like a good practice, and with three lines of code, easy and painless:

service-worker.js

let result = Math.random().toString(36).substring(2,9);
result.toString();
let cacheName = `cacheName-${result}`;

Done, right? Oh no! For you see, the browser starts executing your service-worker.js file from the top every time it has service worker lifecycle stuff to do (install, activate, fetch), so it follows that a new cacheName, per the above code, is generated on every service worker type execution in the browser, not just every time you build your site.

The latter being your desired behavior seems to me.

Eleventy and NodeJS are quite capable of generating a dynamic cacheName, but sending to the browser a static cacheName, nonetheless re-versioned. Let's start by creating in the directory of your choosing/creation a file called cache-name.js, and filling it thusly:

cache-name.js

let newName = () => {
  // declare all characters
  const characters ='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
  let result = ' ';
  const charactersLength = characters.length;
  for ( let i = 0; i < 7; i++ ) {
      result += characters.charAt(Math.floor(Math.random() * charactersLength));
  };

  // just to be safe
  result.toString();

  // very curious, but the generated string has a leading whitespace
  // so....
  // get rid of it!
  let resultOne = result.trimStart();
  
  let cacheName = 'myAppCache-' + resultOne;
  return cacheName
};

// this thing is now importable from another file
module.exports = newName();

In the same directory, create a file called service-worker-base.js. This is where you define all the service worker behavior typically used. I'll just outline it here as the details are a dark and scary rabbit hole.

service-worker-base.js

.
.
self.addEventListener('install', event => {});
.
.
self.addEventListener('activate', event => {});
.
.
self.addEventListener('fetch', event => {});
.
.

Now we're set to bring this all together and create a service worker file that's usuable by the browser. Finally, in the same directory, create a NodeJS file called service-worker-create.js.

service-worker-create.js

const fs = require('fs');
// your location here
const cache = require('./cache-name.js');

function dealWithContent(callback) {

  // read the service-worker-base file contents
  fs.readFile('src/my/path/service-worker-base.js', 'utf8', (err, data) => { 
    if(err) { 
      throw err; 
    } else {
      // if all's well, send the file content with this callback function
      // to be put to use below
      callback(null, data);
    };
  });
};

dealWithContent((err, content) => {

  // a template literal to mash the two data sources into one document:
  // the dynamically created but now static versioned cacheName
  // and the service worker lifecycle instructions retreived from service-worker-base.js
  let newServiceWorkerFile = `
    (() => {
    "use strict";

    let cacheName = ${cache};

    ${content};

    })();
    `;
  
  // write the new service worker file to your root directory, or wherever you want
  // tell .eleventy.js where to find it, with an addPassthroughCopy to get it into your production directory
  fs.writeFile('./my-service-worker.js', newServiceWorkerFile, (err) => {
    if (err) {
      console.log('error writing:', err);
    } else {
      console.log('success writing');
    }
  });
});

NodeJS and npm will do the heavy lifting for you when you build the updated version of your site.

package.json

"scripts": {
  "serviceworker:create": "node src/my/path/service-worker-create.js",
  "serviceworker:min": "terser my-service-worker.js -o my-service-worker-min.js",
  "build:start": "rm -rf dist && ELEVENTY_RUN_MODE=build npx @11ty/eleventy",
  "build": "run-s serviceworker:create serviceworker:min build:start"
}

And presto! A dynamically generated cachName value shipped to the browser as a static value in your service worker file. Send it!

So To Recap

The service worker technology is full of dark and mysterious gotchas
A few simple javascript files helps solve one of them
A well-oiled PWA is worth it
Eleventy and NodeJS are a powerful problem-solving duo.

Clean Up Your Configuration File In Eleventy

2023-10-22T20:00:00-04:00

Clean Up Your Config File

Published: Oct 22, 2023
Updated: Apr 19, 2024

Your Eleventy configuration file is, from a certain point of view, the heart and soul of your site. It directs all the build functions to produce the beauty you're proud of. There's a problem with this though isn't there? It does so so much that this one file can become unruly, unreadable, crowded and a mile long.

I was inspired by this very talented developer to explore what they did not: cleaning up your filters and shortcodes in pursuit of easier work through superior organization.

On To The Show

Conceptually, here's where you're going. All those functions in your config file can be pulled out into a directory structure of your making. Specifically, adding a new directory within your src directory. I've called it _eleventy, originally enough, but you're free to go where your talents take you.

Directory Structure

│
├── src
│  │
│  ├── _data
|  ├── _eleventy
|       ├── filters
|       ├── shortcodes
│  ├── _includes
│  ├── js
│  ├── pages
│  ├── posts
│  ├── sass
│

You are changing the config file from a workhorse to a true configuration file, pulling in work from other sources: easier to maintain and easier to read.

I'm a huge fan of in-lining my vanilla javascripts into the resulting html files, less network requests and all that, but it needs to be minified when printed to the html documents. My previous, and not untypical, .eleventy.js function looked like this:

.eleventy.js

const { minify } = require("terser");

module.exports = function(eleventyConfig) {

  // minify inline js codes on the fly
  eleventyConfig.addNunjucksAsyncFilter("jsmin", async function (code, callback) {
    try {
      const minified = await minify(code);
      callback(null, minified.code);
    } catch (err) {
      console.error("Terser error: ", err);
      // Fail gracefully.
      callback(null, code);
    }
  });

};

And its use:

footer.njk

<!-- scroll button behavior -->
{% set js %}
  {% include "../../js/inline/scroll-top.js" %}
{% endset %}
<script>
  {{ js | jsmin | safe }}
</script>

Let us create a new file within src/_eleventy/filters/ named minify-javascript.js. Copy and paste the working code within your configuration function addNunjucksAsyncFilter into your new file thusly:

minify-javascript.js

const { minify } = require("terser");

module.exports = async function(code, callback) {
  try {
    const minified = await minify(code);
    callback(null, minified.code);
  } catch (err) {
    console.error("Terser error: ", err);
    // Fail gracefully.
    callback(null, code);
  }
};

And change the .eleventy.js like so:

.eleventy.js

const jsMinifier = require("./src/_eleventy/filters/minify-javascript.js");

module.exports = function(eleventyConfig) {

  // minify inline js codes on the fly
  eleventyConfig.addNunjucksAsyncFilter("jsmin", jsMinifier);

};

This simple example only takes 9 lines of code down to 1, an 11% reduction, but the big picture seems clear. Apply these few steps to all your filters and shortcodes, and marvel at the simplicity of your Eleventy configuration file. I've used this to reduce this file from ~200 lines of code down to ~90, a 45% reduction!! With zero disruption to the build process.

So To Recap

Your configuration file is pretty darned ginormous, largely unreadable and difficult to maintain
Let javascript modules rescue your sanity by reducing the amount of code in just one file
Your creation and maintenance tasks become easier with less friction
It may even end up looking like this one

Multiple Google Maps In One Element

2023-06-24T20:00:00-04:00

Multiple Google Maps In One Element

Published: Jun 24, 2023
Updated: Apr 19, 2024

Submitted for your consideration: several different Google maps, of different areas, with different markers, each dynamically displayed on the click of a button. You are about to enter another dimension. A dimension not only of sight and sound, but of mind. A journey into a wondrous land of imagination (felt obliged to do that, sorry not sorry :) ).

Here's a decent mock-up of the upcoming markup:

Let's start, as one always should, with some HTML, which Eleventy is wonderfully capable of, so...

On To The Show

regional-maps.njk

<section class="regional-maps">
    <div id="map0" class="regional-map"></div>
    <div id="map1" class="regional-map"></div>
    <div id="map2" class="regional-map"></div>
    <div id="map3" class="regional-map"></div>
  </section>

Note that by saying "in one element", I have meant the "section" element above. Each regional map is destined for the appropriate "div" element. Still, quite reasonable markup for the best performance.

Let's start examinnig this with arguably the simplest part, the CSS. The first class defines the height of the containing "section", the second class defines the height of the map-containing "div". Note Google requires you do declare an explicit height for it's targeted map divs, or the browser displays nothing. This is why there is no change in visibility for each map div, as the not showing it has been handled for us by changing the height.

regional-maps.css

.regional-maps {
    height: 95%;
  }
  .regional-map-active {
    height: 100%;
  }

Next to define is the data that goes into placing the markers for each location in the map. I use a json file that holds all the data I need. As you can see on my cider-trail, there's more than a few entries, so here I'll pare down the json file for demonstration purposes.

cider-data.json

[
    {
      "name": "Stowe Cider",
      "latitude": 44.475908081446896,
      "longitude": -72.70179481660405,
      "region": "northcentral"
    },
    {
      "name": "Champlain Orchards",
      "latitude": 43.85703964139849,
      "longitude": -73.35300664546972,
      "region": "southcentral"
    },
    {
      "name": "Eden Ciders",
      "latitude": 44.93614295874543,
      "longitude": -72.2091493435647,
      "region": "north"
    },
    {
      "name": "Little City Cider Company",
      "latitude": 42.89612480654151,
      "longitude": -73.19045707461014,
      "region": "south",
    }
  ]

The heart of this matter moving forward is the javscript. And bonus, no outside help is needed as it's all vanilla javascript. It's broken into two main efforts: (1) handling stuff for and with Google, and (2) handling the button clicking

regional-maps-google-stuff.js

// the name of this function must match the name provided to Google Maps as the callback in your script element 
// everything happens inside here

function initMap() {

  // retreive the json data needed
  async function getCider() {
    const response = await fetch('/data/cider.json');
    const ciderData = await response.json();
    return ciderData;
  };

  // deal with the json data to create the maps
  async function handleCiders() {
    // here's the data
    let ciders = await getCider();
    // let's establish some Google related stuff here
    let map, marker, count;
    let infoWindow = new google.maps.InfoWindow({});

    // on to our vanilla javascript manipulating our data

    // initialize each region
    let northMap = [];
    let northCentralMap = [];
    let southCentralMap = [];
    let southMap = [];

    // state-wide array of regional arrays
    let bigArray = [];

    // loop through the json data to fill the individual regional arrays
    // created above
    for (let i = 0; i < ciders.length; i++) {
      switch(ciders[i].region) {
        case 'north':
          northMap.push(ciders[i]);
        break;
        case 'northcentral':
          northCentralMap.push(ciders[i]);
        break;
        case 'southcentral':
          southCentralMap.push(ciders[i]);
        break;
        case 'south':
          southMap.push(ciders[i]);
        break;
      };      
    }; // end for

    // bring each regional array into a state-wide bigArray
    bigArray.push(
      northMap,
      northCentralMap,
      southCentralMap,
      southMap
    );

    //
    // loop through the big array of regional arrays to put together everything google needs
    // to have four maps on one page in the same <section>
    //

    for (let i = 0; i < bigArray.length; i++) {

      // by establishing a different mapTarget on each iteration, we are creating a different map/mapTarget for each <div id="mapX">
      const mapTarget = document.getElementById('map' + i);
      const mapOptions = {
        // this happens to be the center of Vermont, yours will be different of course
        center: {lat: 44.0407, lng: -72.7093},
        zoom: 8,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        zoomControl: true,
        streetViewControl: false,
        mapTypeId: google.maps.MapTypeId.TERRAIN,

        // this is optional, but it's possible to define your own map styles, this resource is pretty cool:
        //styles courtesy: https://snazzymaps.com/style/61/blue-essence
        styles:[]
      };

      // create new map for each region on each trip through the bigArray
      // this is mostly magic by Google
      map = new google.maps.Map(mapTarget, mapOptions);

      //
      // inner for...loop to go through each regional array
      // note the index variable is a different letter!
      //

      for (let j = 0; j < bigArray[i].length; j++) {

        // establish each establishment as an object to be used
        let ciderObject = bigArray[i][j];

        //create content for Google's marker popup infowindow
        function windowContent() {

          var content = document.createElement('div');
          content.setAttribute('class', 'cideries-map-infoslider');

          // all the data here, ${object.xyz} comes from the json file,
          // but for this purpose I truncated that out of the demo json file above
          content.innerHTML = `<div class="cideries-map-infoslider-image">
              <img src=".${ciderObject.cider100}" alt="${ciderObject.selector}-logo"/>
            </div>
            <div class="cideries-map-infoslider-details">
              <p class="cideries-map-infoslider-name">${ciderObject.name}</p>
              <p class="cideries-map-infoslider-address">${ciderObject.address}</p>
              <p class="cideries-map-infoslider-address">${ciderObject.city}, VT</p>
              <a class="cideries-map-infoslider-link" href="./cideries/${ciderObject.selector}">View Cidery Details</a>
            </div>`;

            return content;

        }; // end create windowContent function

        // create markers for each of the maps
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(
            ciderObject.latitude,
            ciderObject.longitude
          ),
          map:map,
          icon: {url: "https://maps.google.com/mapfiles/ms/icons/blue-dot.png"},
          title: 'Cidery Info:'
        }); // end marker creation

        // then add listener for click on marker to pop up info window
        let markerCount = [i][j];

        google.maps.event.addListener(marker, 'click',
          (function (marker, markerCount) {
            return function () {
              infoWindow.setContent(windowContent(
                ciderObject.name,
                ciderObject.address,
                ciderObject.city,
                ciderObject.selector,
                ciderObject.cider100
              ));
              infoWindow.open(map, marker);
            }
          })(marker, markerCount),{passive:true});
      };// end inner for..loop (j)
    }; //end bigArray for loop (i)
  }; // end handleCider

  handleCiders();

}; // end initMap

Nothing to say here as the javascript is fully documented and explained above. So now we'll move on to handling the region buttons I mocked up above. I've put it in the same file as above.

regional-maps-google-stuff.js

// let's start with an iife, so fun, so safe
(() => {
'use strict';

// everything happens inside here
const buttonBehavior = {

  // first things first
  init() {
    let mapChoose = document.querySelector('.regional-choose');
    let mapSection = document.querySelector('.regional-maps');
    let mapElements = mapSection.querySelectorAll('.regional-map');

    // note the event listener is not on each button, but on the section (.regional-choose) they're in
    // the click is captured during the act of bubbling
    // that's javascript magic to you and me
    mapChoose.addEventListener('click', (event) => {
      // sending the information collected to be used in the named function
      buttonBehavior.initializeTargetMap(event.target, mapElements);
    });
  },

  // find exactly which button was clicked
  initializeTargetMap (clickedButton, mapElements) {

    const buttonClasses = clickedButton.classList;

    // extract the class name string to be used by the switch expression
    // I happen to know that the class name I'm looking for is the second one in the classList
    // your situation may well be different
    let region = buttonClasses.item(1);

    // switch for the win
    // each case sends data to adjust the final on-screen render:
    // note each mapElement[] matches our markup, specifically the id for each target div
    // and the entire nodeList of target divs
    switch (region) {
      case 'north':
        buttonBehavior.adjustClasses(mapElements[0], mapElements);
      break;
      case 'north-central':
        buttonBehavior.adjustClasses(mapElements[1], mapElements);
      break;
      case 'south-central':
        buttonBehavior.adjustClasses(mapElements[2], mapElements);
      break;
      case 'south':
        buttonBehavior.adjustClasses(mapElements[3], mapElements);
      break;
    };
  },

  // un-render and render the appropriate target divs
  adjustClasses(mapElement, mapElements) {

    // run through all the target divs in the nodeList
    mapElements.forEach(mapItem => {

      // remove active class if it exists
      if (mapItem.classList.contains('regional-map-active')) {
        mapItem.classList.remove('regional-map-active');        
      }
    });

    // add active class to proscribed map div element
    mapElement.classList.add('regional-map-active');
  }
} // end buttonBehavior const

  buttonBehavior.init();
})();

Again, the above javascript should be fully documented.

There's one last item to take care of here, and that is to involve Google herself. The script element in your footer:

footer.njk

<script async
    src="https://maps.googleapis.com/maps/api/js?key=ABCXYZ&callback=initMap">
  </script>

So To Recap

A counter-intuitive problem to solve
Plain ol' javascript is your friend
All kinds of maps, all in one place!

Find File Last Modified In Eleventy

2023-06-08T20:00:00-04:00

File Last Modified Is Available

Published: Jun 8, 2023
Updated: Apr 19, 2024

This is a long-standing standalone feature-wish in Eleventy, publishing directly to a file both the date published and the date last updated. I'm biased, but I almost always look for this info at the top of any blog post I'm about to read. Context like this is important if I'm to read further.

As referenced in another article of mine, I have come up with a solution that works for each individual post, so...

On To The Show

NB that I use a base layout for blog posts stashed up in Eleventy's _includes/layouts directory. The front matter in this file is primarily focused on the JSON-LD aspect:

/_includes/layouts/blog.njk

---
eleventyComputed:
  meta:
    "@type": "Website"
    "name": "Selfless Studios"
    "description": "Web Development For You"
    "url": "https://selfless.com{{ page.url }}"
    "logo": "https://selfless.com/img/selfless-logo.png"
    "contactPoint":
      "@type": "ContactPoint"
      "name": "Seam McLovin"
      "email": "sean@selfless.com"
      "telephone": "+1802697231"
      "contactType": "Web Developer"
---

...and is thus included in the final built file for every single blog post. Moving ahead, let's look at...

Shortcode Magic

Of course, shortcodes are created in your .eleventy.js file. Let's use the power of Node JS to query your operating system, which does store the last modified metadata.

.eleventy.js

//
  // find the last modified file info to publish as "Updated" on a blog list page or on the post itself
  //
  eleventyConfig.addNunjucksShortcode("lastModifiedShortCode", function(fileNameWithPath) {

    //
    // let's use Node JS to find all the file's OS specific metadata
    //
    let stats = fs.statSync(fileNameWithPath);

    //
    // zero in on a date object
    //
    let statsDate = stats.mtime;

    //
    // and format said date object
    //
    let formattedDate = `${statsDate.getUTCMonth()+1}/${statsDate.getUTCDate()}/${statsDate.getUTCFullYear()}`;

    //
    // and send the formatted date off to be published via shortcode
    //
    return `${formattedDate}`;
  });

All that's left is to propagate your desired information out into your files. For example, let's start with the blog list page:

my-list-of-blog-posts.njk

<section class="blog-list-items">
    {% for post in posts %}
      <div class="blog-list-item">
        <a href="{{ post.url | url }}" class="blog-list-item-link">{{ post.data.title }}</a>
        <p class="blog-list-item-dates">Published: {{ post.data.date | dateFormat }}</p>
        <p class="blog-list-item-dates">Updated: {% lastModifiedShortCode post.inputPath %}</p>
        <p class="blog-list-item-excerpt">{{ post.data.excerpt }}</p>
      </div>
    {% endfor %}
  </section>

And the quick implementation on any blog post:

my-enlightening-blog-post.njk

<section class="blog-dates">
    <small class="blog-small">Published: {{ date | dateFormat }}</small>
    <small class="blog-small">Updated: {% lastModifiedShortCode page.inputPath %}</small>
  </section>

And moving ahead, a little extra must be done to get this valuable information into the JSON-LD data for each blog post. The problem is that the final formatted date is different from what one publishes to a web page. Specifically, it must be of the format yyyy-mm-dd. So we need to create a copy of the above shortcode in your .eleventy.js but with a different name, and a different date format:

.eleventy.js

// let's call this shortcode "lastModifiedShortCode"
//
// this one line below being the only difference with the previous "lastModifiedShortCode" shortcode
//
// let formattedDate = `${statsDate.getUTCMonth()+1}/${statsDate.getUTCDate()}/${statsDate.getUTCFullYear()}`;
//
let otherFormattedDate = `${otherStatsDate.getUTCFullYear()}-${otherStatsDate.getUTCMonth()+1}-${otherStatsDate.getUTCDate()}`;

And the frontmatter for each blog post contains the following:

my-enlightening-blog-post.njk

---
eleventyComputed:
  meta:
    "datePublished": "2023-06-04"
    "dateModified": "{% lastModifiedShortCode page.inputPath %}"
---

And finally, it's entirely feasable to incorporate this data into a sitemap.xml file in eleventy.

sitemap.njk

<?xml version="1.0" encoding="utf-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  {% for page in collections.all %}
    {% if not page.data.draft %}
    <url>
      <loc>https://moosedog.io{{ page.url | url }}</loc>
      <lastmod>{% lastModifiedShortCode page.inputPath %}</lastmod>
      <changefreq>{{ page.data.changeFreq if page.data.changeFreq else "monthly" }}</changefreq>
    </url>
    {% endif %}
  {% endfor %}
</urlset>

So To Recap

A frustrating gap in Eleventy's metadata
Your OS though has this figured out, and Node JS can return the answer
Eleventy's powerful shortcode functionality can be easily deployed to display Last Modified all over your website

JSON-LD In Eleventy

2023-06-03T20:00:00-04:00

Integrating JSON-LD Into Your Eleventy Pages

Published: Jun 3, 2023
Updated: Apr 19, 2024

Well you ask excitedly, just what is this LD-JSON, and what can it do for me? For years, the major search engines, we mean primarily Google of course, have been trying to figure out a way to describe the unimaginable mountains of data they retrieve in indexing internet sites. There have been several different efforts at composing a language, or schema, that could be quickly integrated into a web page's HTML file. To wit: MicroData, RDFa, and finally the Google recommended JSON-LD

What they're looking for, and asking your help with, is what the ancient Greeks called meta-information, or information about the information. Known as more data (meta) about the existing data (your HTML file) in this instance.

This meta-data is referred to by an array of different names, such as "linked data", "structured data", "rich results", and Google bribes you to provide it to them with promises of improved SEO and SERP page presentations. And the "vocabulary" of this meta-data can get very obtuse very quickly.

It was an uphill struggle to be sure trying to understand this vocabulary, until I found this JSON-LD Playground. Copy the sample code below and paste it into their text area. Directly below that, click on the tab "Visualized", and a lightbulb should go on for you. It sure did for me. Whoever came up with this tool deserves a Nobel Prize for Data Visualization.

End result JSON-LD demo

{
    "@context":"https://schema.org",
    "@type":"Website",
    "name":"Selfless Studios",
    "description":"Web Development Where You Come First",
    "datePublished":"3/29/2023 - 3:16 PM",
    "dateModified":"5/10/2023 - 8:30 PM",
    "url":"https://mysite.com/",
    "logo":"https://mysite.com/img/mysite-logo.png",
    "contactPoint":
      {
        "@type":"ContactPoint",
        "name":"Sean McLovin",
        "email":"sean@mysite.com",
        "telephone":"+18421236521",
        "contactType":"Web Developer"
      }
    }

Note that the above code is nothing more than our familiar and friendly JSON and is what will, by the end of this article, be written directly into each page within your Eleventy generated site.

On To The Show

That JSON string posted above, so where did that come from? Follow along as we learn how Eleventy did that all by herself. Let's start with Eleventy's frontmatter, that configuration stuff at the top of all of your templates. I prefer to place the below data in all of my base layouts. Your data will differ of course. It's really quite simple:

/includes/layouts/base.njk

---
  eleventyComputed:
    meta:
      "@type": "Website"
      "name": "Selfless Studios"
      "description": "Web Development Where You Come First"
      # this must be hard coded as thus
      "datePublished": "2023-27-05"
      # this actually doesn't go in a base template, unless it's the only one you have
      # ideally place it in a more granular template for specific page/post types
      "dateModified": "{% lastModifiedSchemaShortCode page.inputPath %}"
      "url": "https://mysite.com{{ page.url }}"
      "logo": "https://mysite.com/img/mysite-logo.png"
      "contactPoint":
        "@type": "ContactPoint"
        "name": "Sean McLovin"
        "email": "sean@mysite.com"
        "telephone": "+18421236521"
        "contactType": "Web Developer"
  ---

Dates and URLs

I like to include some date and url information in this frontmatter, so it's included inside a Nunjucks double curly braces variable to be computed by Eleventy. In the code above, you will notice some extra data: "datePublished", "dateModified", and "url".

The "url" data comes straight from Eleventy's supplied data. The dates come to us through some....

Shortcode Magic

As you may have noticed, the "datePublished" has to be hand-written as it's otherwise impossible to know when the built file was uploaded/published to your server. The "dateModified" is a short code referencing your OS last modified data for a particular file. Here you go:

.eleventy.js

//
  // find the last modified file info to publish as 'dateModified' in schema data
  //
  eleventyConfig.addNunjucksShortcode("lastModifiedSchemaShortCode", function(fileNameWithPath) {

    // let's use Node JS to find all the file's OS specific meta-data
    let stats = fs.statSync(fileNameWithPath);

    // zero in on a date object
    let statsDate = stats.mtime;

    // and format said date object
    let formattedDate = `${statsDate.getUTCFullYear()}-${statsDate.getUTCMonth()+1}-${statsDate.getUTCDate()}`;

    return `${formattedDate}`;
  });

And finally, a shortcode to create the JSON-LD data in your 'head' element.

.eleventy.js

//
  // grab your custimized frontmatter from the "meta" object you've created in your template(s)
  // and inject it as a function parameter in your shortcode creator
  //

  eleventyConfig.addNunjucksShortcode("schemaDataShortCode", function(meta) {

    // the spread syntax for the win: https://gomakethings.com/the-spread-syntax-operator-in-vanilla-js/
    // to create a JS object you want, note the first line is included here as it must always be present in the final JSON

    let structuredData = {"@context": "https://schema.org", ...meta,};

    // send this off to be printed in your final HTML file
    // while simultainesly changing your JS object into valid JSON

    return `${JSON.stringify(structuredData)}`;
  });

And the last step, integrating JSON-LD into your HTML file, specifically in the 'head' element:

<script type="application/ld+json">
      {% schemaDataShortCode meta %} 
    </script>

And there you have it, structured data on every single page, specific to that page, generated by you and Eleventy.

So To Recap

An obtuse vocabulary for a familiar data format
Eleventy Frontmatter and Computations From That And Within That
File Preparations
Printing Page Specific JSON-LD To HTML Files

Easy CSS Revisioned Files In Eleventy

2023-06-03T20:00:00-04:00

Fast and Easy CSS Revisioning

Published: Jun 3, 2023
Updated: Apr 19, 2024

There's lots of information available out there on this subject, as it's been a long-standing concern, but fortunately for you, the process of versioning a proper browser cache-busting CSS file in Eleventy has boiled down to just a few lines of code. Let's start with some installation:

Terminal

npm install eleventy-sass --save-dev
npm install eleventy-plugin-rev --save-dev

These two plugins were created by one very talented person, and can be found on Github if you're looking for some more documentation.

Eleventy-Sass and Eleventy Plugin Rev

On To The Show

Up next is configuring them to work in your .eleventy.js file, as such:

eleventy.js

const pluginRev = require("eleventy-plugin-rev");
const eleventySass = require("eleventy-sass");

module.exports = function(eleventyConfig) {

  // revision the css filename
  eleventyConfig.addPlugin(pluginRev);

  // let eleventy handle compiling sass
  eleventyConfig.addPlugin(eleventySass, {
    compileOptions: {
      permalink: function(contents, inputPath) {
        // ignore the critical scss files
        // or others you don't wish to be treated here
        let parsed = path.parse(inputPath);
        if (parsed.name.startsWith('critical')) {
          return false
        }
        // directory instructions, changes your input directory (/sass/) to your output directory (/css/) and adds the file extension
        return (data) => data.page.filePathStem.replace(/^\/sass\//, "/css/") + ".css";
      }
    },
    sass: {
      style: "compressed"
    },
    rev: true
  });
};

And in your 'head' element, a very recognizable link tag. Note the presence of the Nunjucks variable referencing the revision plugin.

head element

<link rel="stylesheet" type="text/css"  href="{{ "/css/style.css" | rev }}" media="tty" onload="this.media='screen'"/>

So To Recap

A plugin author who has done the heavy lifting for you
So few lines of custom code
A bullet-proof style-689ceb89.css cache-busting file name every time!