Merge pull request #136 from stedman/optimize

Optimize code to achieve 4 Hundos

Author: stedman

.eleventy.js

@@ -1,8 +1,11 @@
 const fs = require('fs');
 const pluginRss = require('@11ty/eleventy-plugin-rss');
+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');
 
@@ -68,9 +71,32 @@ 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);
+
   // PLUGIN: RSS feed
   eleventyConfig.addPlugin(pluginRss);
 
+  // TRANSFORM: minify HTML
+  eleventyConfig.addTransform('htmlmin', (content, outputPath) => {
+    if (typeof outputPath === 'string' && outputPath.endsWith('.html')) {
+      const minified = htmlmin.minify(content, {
+        useShortDoctype: true,
+        removeComments: true,
+        collapseWhitespace: true,
+        minifyCSS: true,
+        minifyJS: true,
+      });
+
+      return minified;
+    }
+
+    return content;
+  });
+
   // BROWSERSYNC: add ability to see 404.html in dev mode
   eleventyConfig.setBrowserSyncConfig({
     callbacks: {

_includes/shortcodes/meetup-details.js

@@ -33,7 +33,13 @@ const fullDate = (dateValue) => {
 module.exports = function meetupDetails(meetDate, venue, after, msgHeader, meetTitle, meetUrl) {
   const header = msgHeader || 'Meetup details';
 
-  const meetHeader = meetTitle && meetUrl
+  const svgBlock = `<svg display="none">
+    <g id="alarm"><path d='M153.59,110.46A21.41,21.41,0,0,0,152.48,79h0A62.67,62.67,0,0,0,112,64l-3.27.09-.48,0C74.4,66.15,48,95.55,48.07,131c0,19,8,29.06,14.32,37.11a20.61,20.61,0,0,0,14.7,7.8c.26,0,.7.05,2,.05a19.06,19.06,0,0,0,13.75-5.89Z'/><path d='M403.79,64.11l-3.27-.1H400a62.67,62.67,0,0,0-40.52,15,21.41,21.41,0,0,0-1.11,31.44l60.77,59.65A19.06,19.06,0,0,0,432.93,176c1.28,0,1.72,0,2-.05a20.61,20.61,0,0,0,14.69-7.8c6.36-8.05,14.28-18.08,14.32-37.11C464,95.55,437.6,66.15,403.79,64.11Z'/><path d='M256.07,96c-97,0-176,78.95-176,176a175.23,175.23,0,0,0,40.81,112.56L84.76,420.69a16,16,0,1,0,22.63,22.62l36.12-36.12a175.63,175.63,0,0,0,225.12,0l36.13,36.12a16,16,0,1,0,22.63-22.62l-36.13-36.13A175.17,175.17,0,0,0,432.07,272C432.07,175,353.12,96,256.07,96Zm16,176a16,16,0,0,1-16,16h-80a16,16,0,0,1,0-32h64V160a16,16,0,0,1,32,0Z'/></g>
+    <g id="calendar"><path d='M416,64H400V48.45c0-8.61-6.62-16-15.23-16.43A16,16,0,0,0,368,48V64H144V48.45c0-8.61-6.62-16-15.23-16.43A16,16,0,0,0,112,48V64H96a64,64,0,0,0-64,64V416a64,64,0,0,0,64,64H416a64,64,0,0,0,64-64V128A64,64,0,0,0,416,64ZM136,416a24,24,0,1,1,24-24A24,24,0,0,1,136,416Zm0-80a24,24,0,1,1,24-24A24,24,0,0,1,136,336Zm80,80a24,24,0,1,1,24-24A24,24,0,0,1,216,416Zm0-80a24,24,0,1,1,24-24A24,24,0,0,1,216,336Zm80,80a24,24,0,1,1,24-24A24,24,0,0,1,296,416Zm0-80a24,24,0,1,1,24-24A24,24,0,0,1,296,336Zm0-80a24,24,0,1,1,24-24A24,24,0,0,1,296,256Zm80,80a24,24,0,1,1,24-24A24,24,0,0,1,376,336Zm0-80a24,24,0,1,1,24-24A24,24,0,0,1,376,256Zm72-120v16a8,8,0,0,1-8,8H72a8,8,0,0,1-8-8V128A32.09,32.09,0,0,1,96,96H416a32.09,32.09,0,0,1,32,32Z'/></g>
+    <g id="location-sharp"><path d='M256,32C167.67,32,96,96.51,96,176c0,128,160,304,160,304S416,304,416,176C416,96.51,344.33,32,256,32Zm0,224a64,64,0,1,1,64-64A64.07,64.07,0,0,1,256,256Z'/></g>
+  </svg>`;
+
+  const meetHeaderBlock = meetTitle && meetUrl
     ? `<div class="title is-size-4">
         <a href="${meetUrl}">${meetTitle}</a>
       </div>`
@@ -62,25 +68,26 @@ module.exports = function meetupDetails(meetDate, venue, after, msgHeader, meetT
   }
 
   return `<div class="message flex-item flex-item-0">
+  ${svgBlock}
   <div class="message-header">
     ${header}
   </div>
 
   <div class="message-body">
-    ${meetHeader}
+    ${meetHeaderBlock}
 
     <div>
       DATE
       <span class="icon has-text-grey-dark">
-        <ion-icon src="/assets/ionicon/calendar.svg"></ion-icon>
+        <svg class="icon-item" viewBox="0 0 512 512"><use xlink:href="#calendar"></use></svg>
       </span>
       <time class="has-text-primary has-text-weight-bold" dateTime="${meetDate.toISOString().substring(0, 10)}">${fullDate(meetDate)}</time>
     </div>
 
     <div>
       TIME
       <span class="icon has-text-grey-dark">
-        <ion-icon src="/assets/ionicon/alarm.svg"></ion-icon>
+        <svg class="icon-item" viewBox="0 0 512 512"><use xlink:href="#alarm"></use></svg>
       </span>
       <time class="has-text-primary has-text-weight-bold" dateTime="15:30">7:30PM</time> -
       <time class="has-text-primary has-text-weight-bold" dateTime="21:00">9:00PM</time>
@@ -89,7 +96,7 @@ module.exports = function meetupDetails(meetDate, venue, after, msgHeader, meetT
     <div>
       LOCATION
       <span class="icon has-text-grey-dark">
-        <ion-icon src="/assets/ionicon/location-sharp.svg"></ion-icon>
+        <svg class="icon-item" viewBox="0 0 512 512"><use xlink:href="#location-sharp"></use></svg>
       </span>
       <strong class="has-text-primary">${venueOrg.name}</strong>
       ${venueLocation}

_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">`;
+  }
+};

_includes/shortcodes/social-svg.js

@@ -1,29 +1,31 @@
+{%- socialSvg -%}
+
 {%- if person.email %}
-<a class="icon tooltip" href="mailto:{{ person.email }}" title="Email: {{ person.email }}">
-  <ion-icon class="is-size-3" src="{{ '/assets/ionicon/at-circle.svg' | url }}"><i class="is-sr-only">email</i></ion-icon>
+<a class="icon tooltip" href="mailto:{{ person.email }}" aria-label="Email: {{ person.email }}">
+  <svg class="icon-item" viewBox="0 0 512 512"><use xlink:href="#at-circle"></use></svg>
 </a>
 {% endif -%}
 
 {%- if person.homepage %}
-<a class="icon tooltip" href="{{ person.homepage }}" title="Home: {{ person.homepage }}">
-  <ion-icon class="is-size-3" src="{{ '/assets/ionicon/home.svg' | url }}"><i class="is-sr-only">homepage</i></ion-icon>
+<a class="icon tooltip" href="{{ person.homepage }}" aria-label="Home: {{ person.homepage }}">
+  <svg class="icon-item" viewBox="0 0 512 512"><use xlink:href="#home"></use></svg>
 </a>
 {% endif -%}
 
 {%- if person.twitter %}
-<a class="icon tooltip" href="https://twitter.com/{{ person.twitter }}" title="Twitter: {{ person.twitter }}">
-  <ion-icon class="is-size-3" src="{{ '/assets/ionicon/logo-twitter.svg' | url }}"><i class="is-sr-only">Twitter</i></ion-icon>
+<a class="icon tooltip" href="https://twitter.com/{{ person.twitter }}" aria-label="Twitter: {{ person.twitter }}">
+  <svg class="icon-item" viewBox="0 0 512 512"><use xlink:href="#logo-twitter"></use></svg>
 </a>
 {% endif -%}
 
 {%- if person.github %}
-<a class="icon tooltip" href="https://github.com/{{ person.github }}" title="GitHub: {{ person.github }}">
-  <ion-icon class="is-size-3" src="{{ '/assets/ionicon/logo-github.svg' | url }}"><i class="is-sr-only">GitHub</i></ion-icon>
+<a class="icon tooltip" href="https://github.com/{{ person.github }}" aria-label="GitHub: {{ person.github }}">
+  <svg class="icon-item" viewBox="0 0 512 512"><use xlink:href="#logo-github"></use></svg>
 </a>
 {% endif -%}
 
 {%- if person.linkedin %}
-<a class="icon tooltip" href="https://www.linkedin.com/in/{{ person.linkedin }}" title="LinkedIn: {{ person.linkedin }}">
-  <ion-icon class="is-size-3" src="{{ '/assets/ionicon/logo-linkedin.svg' | url }}"><i class="is-sr-only">LinkedIn</i></ion-icon>
+<a class="icon tooltip" href="https://www.linkedin.com/in/{{ person.linkedin }}" aria-label="LinkedIn: {{ person.linkedin }}">
+  <svg class="icon-item" viewBox="0 0 512 512"><use xlink:href="#logo-linkedin"></use></svg>
 </a>
 {% endif -%}

_includes/social-links.liquid

@@ -24,12 +24,16 @@
   <title>{{ pageTitle }}</title>
   <link rel=alternate type=application/atom+xml href="{{ site.url }}{{ '/feed.xml' | url }}" title="{{ site.title }} Atom feed" />
   <link rel="stylesheet" href="{{ '/assets/css/main.css' | url }}">
-  <script type="module" src="https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.esm.js"></script>
-  <script nomodule="" src="https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.js"></script>
 </head>
 <body>
-  <header class="page-header hero is-primary">
-    <div class="hero-body is-paddingless">
+  <svg display="none">
+    <g id="logo-github"><path d='M256,32C132.3,32,32,134.9,32,261.7c0,101.5,64.2,187.5,153.2,217.9a17.56,17.56,0,0,0,3.8.4c8.3,0,11.5-6.1,11.5-11.4,0-5.5-.2-19.9-.3-39.1a102.4,102.4,0,0,1-22.6,2.7c-43.1,0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1,1.4-14.1h.1c22.5,2,34.3,23.8,34.3,23.8,11.2,19.6,26.2,25.1,39.6,25.1a63,63,0,0,0,25.6-6c2-14.8,7.8-24.9,14.2-30.7-49.7-5.8-102-25.5-102-113.5,0-25.1,8.7-45.6,23-61.6-2.3-5.8-10-29.2,2.2-60.8a18.64,18.64,0,0,1,5-.5c8.1,0,26.4,3.1,56.6,24.1a208.21,208.21,0,0,1,112.2,0c30.2-21,48.5-24.1,56.6-24.1a18.64,18.64,0,0,1,5,.5c12.2,31.6,4.5,55,2.2,60.8,14.3,16.1,23,36.6,23,61.6,0,88.2-52.4,107.6-102.3,113.3,8,7.1,15.2,21.1,15.2,42.5,0,30.7-.3,55.5-.3,63,0,5.4,3.1,11.5,11.4,11.5a19.35,19.35,0,0,0,4-.4C415.9,449.2,480,363.1,480,261.7,480,134.9,379.7,32,256,32Z'/></g>
+    <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">
+    <div class="hero-body is-primary is-paddingless">
       <div class="container">
         <div class="navbar" role="navigation" aria-label="main navigation">
           <div class="navbar-brand">
@@ -53,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">
@@ -99,20 +99,20 @@
           </div>
           <div class="navbar-end">
             <a class="navbar-item is-inline-block-tablet" href="https://twitter.com/{{ site.author.twitter }}">
-              <span class="icon tooltip" title="&ldquo;@{{ site.author.twitter }}&rdquo; on Twitter">
-                <ion-icon class="is-size-3" src="{{ '/assets/ionicon/logo-twitter.svg' | url }}"></ion-icon>
+              <span class="icon tooltip" aria-label="&ldquo;@{{ site.author.twitter }}&rdquo; on Twitter">
+                <svg class="icon-item" viewBox="0 0 512 512"><use xlink:href="#logo-twitter"></use></svg>
               </span>
               <span class="is-sr-only-desktop">Twitter: @{{ site.author.twitter }}</span>
             </a>
             <a class="navbar-item is-inline-block-tablet" href="https://{{ site.author.slack }}.slack.com">
-              <span class="icon tooltip" title="&ldquo;{{ site.author.slack }}&rdquo; on Slack">
-                <ion-icon class="is-size-3" src="{{ '/assets/ionicon/logo-slack.svg' | url }}"></ion-icon>
+              <span class="icon tooltip" aria-label="&ldquo;{{ site.author.slack }}&rdquo; on Slack">
+                <svg class="icon-item" viewBox="0 0 512 512"><use xlink:href="#logo-slack"></use></svg>
               </span>
               <span class="is-hidden-desktop">Slack: {{ site.author.slack }}</span>
             </a>
             <a class="navbar-item is-inline-block-tablet" href="https://github.com/{{ site.author.github }}">
-              <span class="icon tooltip" title="&ldquo;{{ site.author.github }}&rdquo; on GitHub">
-                <ion-icon class="is-size-3" src="{{ '/assets/ionicon/logo-github.svg' | url }}"></ion-icon>
+              <span class="icon tooltip" aria-label="&ldquo;{{ site.author.github }}&rdquo; on GitHub">
+                <svg class="icon-item" viewBox="0 0 512 512"><use xlink:href="#logo-github"></use></svg>
               </span>
               <span class="is-hidden-desktop">GitHub: {{ site.author.github }}</span>
             </a>

_layouts/base.liquid

@@ -1,6 +1,6 @@
 ---
 layout: meetup
-title: Alex Sexton talks about client-side "security"
+title: Alex Sexton talks about client-side "security"
 author: astacy
 when: 2016-01-19T19:30:00-06:00
 speakers:

_meetups/2016-01-19-meetup.md

@@ -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/_main.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;