Shoot for four hundos Lighthouse score

Author: stedman

.eleventy.js

@@ -4,6 +4,7 @@ const htmlmin = require('html-minifier');
 const sassWatch = require('./_includes/sass-watch');
 const filter = require('./_includes/filter');
 const scAvatar = require('./_includes/shortcodes/avatar');
+const scResponsiveImage = require('./_includes/shortcodes/responsive-image');
 const scSocialSvg = require('./_includes/shortcodes/social-svg');
 const scMeetupDetails = require('./_includes/shortcodes/meetup-details');
 const scVideoPlayer = require('./_includes/shortcodes/video-player');
@@ -70,6 +71,9 @@ module.exports = (eleventyConfig) => {
   // SHORTCODE: Resize and cache images.
   eleventyConfig.addLiquidShortcode('avatar', scAvatar);
 
+  // SHORTCODE: Generate responsive image.
+  eleventyConfig.addLiquidShortcode('responsiveImage', scResponsiveImage);
+
   // SHORTCODE: Add social icon SVG block.
   eleventyConfig.addLiquidShortcode('socialSvg', scSocialSvg);
 

_includes/shortcodes/responsive-image.js

@@ -0,0 +1,30 @@
+const Image = require('@11ty/eleventy-img');
+
+module.exports = async (src, alt, outputFormat = 'jpeg') => {
+  if (alt === undefined) {
+    throw new Error(`Responsive Image: missing ALT attribute from: ${src}`);
+  }
+
+  try {
+    const stats = await Image(src, {
+      formats: [outputFormat],
+      urlPath: '/assets/img/',
+      outputDir: '_site/assets/img/',
+      widths: [400, 800, null],
+    });
+
+    const lowestSrc = stats[outputFormat][0];
+    const sizes = '(max-width: 400px) 400px, (max-width: 800px) 800px, 100vw';
+    const sourceBlock = Object.values(stats).map((imageFormat) => `<source type="image/${imageFormat[0].format}" srcset="${imageFormat.map((entry) => `${entry.url} ${entry.width}w`).join(', ')}" sizes="${sizes}">`).join('\n');
+
+    return `<picture class="image">
+      ${sourceBlock}
+      <img src="${lowestSrc.url}" width="${lowestSrc.width}" height="${lowestSrc.height}" alt="${alt}" loading="lazy">`;
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.error('Responsive Image: eleventy-img error:', err);
+
+    // load empty img src (as placeholder)
+    return `<img src="" alt="${alt}" loading="lazy">`;
+  }
+};

_layouts/base.liquid

@@ -31,8 +31,9 @@
     <g id="logo-slack"><path d='M126.12,315.1A47.06,47.06,0,1,1,79.06,268h47.06Z'/><path d='M149.84,315.1a47.06,47.06,0,0,1,94.12,0V432.94a47.06,47.06,0,1,1-94.12,0Z'/><path d='M196.9,126.12A47.06,47.06,0,1,1,244,79.06v47.06Z'/><path d='M196.9,149.84a47.06,47.06,0,0,1,0,94.12H79.06a47.06,47.06,0,0,1,0-94.12Z'/><path d='M385.88,196.9A47.06,47.06,0,1,1,432.94,244H385.88Z'/><path d='M362.16,196.9a47.06,47.06,0,0,1-94.12,0V79.06a47.06,47.06,0,1,1,94.12,0Z'/><path d='M315.1,385.88A47.06,47.06,0,1,1,268,432.94V385.88Z'/><path d='M315.1,362.16a47.06,47.06,0,0,1,0-94.12H432.94a47.06,47.06,0,1,1,0,94.12Z'/></g>
     <g id="logo-twitter"><path d='M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z'/></g>
   </svg>
-  <header class="page-header hero is-primary">
-    <div class="hero-body is-paddingless">
+
+  <header class="page-header hero">
+    <div class="hero-body is-primary is-paddingless">
       <div class="container">
         <div class="navbar" role="navigation" aria-label="main navigation">
           <div class="navbar-brand">
@@ -56,15 +57,11 @@
         </div>
       </div>
     </div>
-  </header>
 
-  {%- if page.url == '/' -%}
-  <section class="hero">
-    <figure class="image">
-      <img src="{{ '/assets/img/carlos-alfonso-AlBgcDfDG_s-unsplash_3by1-prog1.jpg' | url }}" alt="Austin skyline" title="Photo by Carlos Alfonso on Unsplash" loading="lazy">
-    </figure>
-  </section>
-  {%- endif -%}
+    {%- if page.url == '/' -%}
+      {% responsiveImage "./assets/img/carlos-alfonso-AlBgcDfDG_s-unsplash_min.jpg", "Austin Skyline by Carlos Alfonso on Unsplash" %}
+    {%- endif -%}
+  </header>
 
   <main class="page-main section has-background-white">
     <div class="container">

_sass/_main.scss

@@ -1,8 +1,8 @@
 @charset "utf-8";
 
 // tetradic harmony via https://color.joelb.dev/hex/ED1878
-$tetradic0: hsl(333, 85%, 50%);
-$tetradic1: hsl(213, 85%, 50%);
+$tetradic0: hsl(333, 85%, 45%); // darkened 5% for a11y contrast
+$tetradic1: hsl(213, 85%, 45%); // darkened 5% for a11y contrast
 $tetradic2: hsl(153, 85%, 40%); // lightness reduced by 10%
 $tetradic3: hsl(33, 85%, 50%);
 
@@ -14,6 +14,7 @@ $info: $tetradic1;
 // @import "../node_modules/bulma/sass/utilities/_all.sass";
 @import "../node_modules/bulma/sass/utilities/initial-variables.sass";
 
+$link: darken($blue, 3%); // darkened 3% for a11y contrast
 $scheme-main: $white-ter;
 $footer-background-color: $white-ter;
 
@@ -78,19 +79,31 @@ $footer-background-color: $white-ter;
  * BULMA CUSTOMIZATIONS
  */
 
-.hero.is-primary {
+.hero-body.is-primary {
+  background-color: $primary;
+
   .navbar-item,
   .navbar-link {
     // reduce opacity for a11y color contrast
     color: hsla(0, 100%, 100%, 0.8);
+
+    &:hover,
+    &:focus {
+      background-color: darken($primary, 5%);
+    }
   }
 }
 
+.content li + li {
+  margin-top: 0.5em;
+}
+
 .icon {
   vertical-align: bottom;
 
   .card & {
     margin-top: 2px;
+    width: 2em;
   }
 
   @media screen and (min-width: $desktop) {
@@ -100,6 +113,15 @@ $footer-background-color: $white-ter;
   }
 }
 
+.icon-item {
+  fill: currentColor;
+  width: 84%;
+
+  .message-body & {
+    width: 71%;
+  }
+}
+
 .page-main {
   a {
     text-decoration: underline;

_sass/_tooltips.scss

@@ -2,7 +2,7 @@
  * TOOLTIP
  */
 
-.tooltip[title] {
+.tooltip[aria-label] {
   position: relative;
 
   .pic & {
@@ -27,7 +27,7 @@
     background-color: hsla(0, 0%, 20%, 0.95);
     border-radius: 3px;
     color: #fff;
-    content: attr(title);
+    content: attr(aria-label);
     font-size: 14px;
     line-height: 1.2;
     margin-bottom: 5px;

assets/img/carlos-alfonso-AlBgcDfDG_s-unsplash_min.jpg

@@ -14,6 +14,15 @@ <h1 class="is-sr-only">{{ title }}</h1>
         {%- meetupDetails meet.date, meet.data.venue, meet.data.after, 'Upcoming meetup details', meet.data.title, meet.url -%}
 
         <meta id="meet-date" time="{{ meet.date }}">
+<script>
+(function () {
+  const meetDate = document.getElementById('meet-date').getAttribute('time');
+  if (new Date(meetDate) < new Date()) {
+    // We may want to post an alternate message, but for now just delete the upcoming meetup.
+    document.querySelector('.meetup-details').remove();
+  }
+}());
+</script>
       </section>
 
       <section class="section">
@@ -22,12 +31,12 @@ <h1 class="is-sr-only">{{ title }}</h1>
       </section>
 
       <section class="section">
-        <h3>Past speakers and talks</h3>
+        <h2 class="is-size-4">Past speakers and talks</h2>
         {%- for meetup in collections.meetups reversed -%}
         {%- for speaker in meetup.data.speakers -%}
         {%- if speaker.name and speaker.avatar -%}
         <figure class="pic">
-          <a class="tooltip" href="{{ meetup.url | url }}" title="{{ speaker.name }}: &quot;{{ meetup.data.title }}&quot;">
+          <a class="tooltip" href="{{ meetup.url | url }}" aria-label="{{ speaker.name }}: &quot;{{ meetup.data.title }}&quot;">
             {%- avatar speaker.avatar, speaker.name, 'is-rounded' -%}
           </a>
         </figure>