Merge pull request #129 from stedman/avatar

Replace Nunjucks with LiquidJS, add avatar cache

Author: stedman

.eleventy.js

@@ -1,10 +1,9 @@
 const fs = require('fs');
 const pluginRss = require('@11ty/eleventy-plugin-rss');
 const sassWatch = require('./_includes/sass-watch');
-const filterFullDate = require('./_includes/filters/full-date');
-const filterLimitTo = require('./_includes/filters/limit-to');
 const filterMarkdown = require('./_includes/filters/markdown');
 const filterRegexReplace = require('./_includes/filters/regex-replace');
+const scAvatar = require('./_includes/shortcodes/avatar');
 const scMeetupDetails = require('./_includes/shortcodes/meetup-details');
 const scVideoPlayer = require('./_includes/shortcodes/video-player');
 
@@ -52,12 +51,6 @@ module.exports = (eleventyConfig) => {
     return addFileDates(posts);
   });
 
-  // FILTER: Convert dates to MMMM D, YYYY format.
-  eleventyConfig.addFilter('fullDate', filterFullDate);
-
-  // FILTER: Limit collection length.
-  eleventyConfig.addFilter('limitTo', filterLimitTo);
-
   // FILTER: Run content thru Markdown-it.
   eleventyConfig.addFilter('markdown', filterMarkdown);
 
@@ -70,6 +63,9 @@ module.exports = (eleventyConfig) => {
   // SHORTCODE: Embed video players for event replay.
   eleventyConfig.addShortcode('videoPlayer', scVideoPlayer);
 
+  // SHORTCODE: Resize and cache images.
+  eleventyConfig.addLiquidShortcode('avatar', scAvatar);
+
   // PLUGIN: RSS feed
   eleventyConfig.addPlugin(pluginRss);
 
@@ -98,12 +94,12 @@ module.exports = (eleventyConfig) => {
       layouts: './_layouts',
     },
     templateFormats: [
-      'njk',
       'liquid',
+      'njk',
       'md',
       'html',
     ],
-    htmlTemplateEngine: 'njk',
-    dataTemplateEngine: 'njk',
+    htmlTemplateEngine: 'liquid',
+    dataTemplateEngine: 'liquid',
   };
 };

.eleventyignore

@@ -0,0 +1,3 @@
+README.md
+CONTRIBUTING-POSTS.md
+_drafts/

.gitignore

@@ -11,3 +11,4 @@
 _site
 node_modules
 tmp
+.cache

_includes/business-card.njk _includes/business-card.liquid_includes/business-card.njk renamed to _includes/business-card.liquid

@@ -3,25 +3,25 @@
     <div class="media">
       <div class="media-left">
         <figure class="image is-96x96 has-background-grey-lighter">
-          <img src="{{ person.avatar }}" alt="{{ person.name }}" loading="lazy">
+          {%- avatar person.avatar, person.name -%}
         </figure>
       </div>
       <div class="media-content">
         <p class="title is-size-5">{{ person.name }}</p>
         <p class="subtitle is-6 has-text-weight-semibold is-marginless-bottom">{{ person.title | markdown | safe }}</p>
         <div>
-          {% include 'social-links.njk' %}
+          {%- include social-links.liquid -%}
         </div>
       </div>
     </div>
   </div>
-  {% if person.bio %}
+  {%- if person.bio -%}
   <div class="card-footer">
     <div class="card-footer-item">
       <div class="content">
         {{ person.bio | markdown | safe }}
       </div>
     </div>
   </div>
-  {% endif %}
+  {%- endif -%}
 </div>

_includes/filters/full-date.js

@@ -8,6 +8,8 @@
  *
  */
 module.exports = (content, rePattern, replacement) => {
+  if (!(replacement && rePattern)) return content;
+
   const re = new RegExp(rePattern, 'g');
 
   return content.replace(re, replacement);

_includes/filters/limit-to.js

@@ -0,0 +1,13 @@
+<div class="columns is-variable is-8 has-offset-top">
+  <div class="column">
+    {%- if previousPost -%}
+    <a href="{{ previousPost.url | url }}">← {{ previousPost.data.title }}</a>
+    {%- endif -%}
+  </div>
+
+  <div class="column has-text-right">
+    {%- if nextPost -%}
+    <a href="{{ nextPost.url | url }}">{{ nextPost.data.title }} →</a>
+    {%- endif -%}
+  </div>
+</div>

_includes/filters/regex-replace.js

@@ -0,0 +1,20 @@
+const Image = require('@11ty/eleventy-img');
+
+module.exports = async (src, alt, className, outputFormat = 'jpeg') => {
+  const stats = await Image(src, {
+    cacheDuration: '12w',
+    formats: [outputFormat],
+    outputDir: '_site/assets/avatar/',
+    widths: [96],
+  });
+
+  const classAttr = className ? `class="${className}"` : '';
+
+  const props = stats[outputFormat].pop();
+
+  if (alt === undefined) {
+    throw new Error(`Missing ALT attribute from: ${src}`);
+  }
+
+  return `<img ${classAttr} src="${props.outputPath.replace('_site', '')}" alt="${alt}" loading="lazy">`;
+};

_includes/nav-posts.liquid

@@ -1,6 +1,22 @@
 const organizations = require('../../_data/organizations.json');
 const siteData = require('../../_data/site.json');
-const filterFullDate = require('../filters/full-date');
+
+/**
+ * Filter date output to follow pattern MMMM D, YYYY
+ *
+ * @param  {object}   dateValue  Date object
+ *
+ * @return {string}   Formatted date string.
+ */
+const fullDate = (dateValue) => {
+  const monthNames = [
+    'January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December',
+  ];
+  const newDate = new Date(dateValue);
+
+  return `${monthNames[newDate.getMonth()]} ${newDate.getDate()}, ${newDate.getFullYear()}`;
+};
 
 /**
  * Provide template for meeting details.
@@ -58,7 +74,7 @@ module.exports = function meetupDetails(meetDate, venue, after, msgHeader, meetT
       <span class="icon has-text-grey-dark">
         <ion-icon src="/assets/ionicon/calendar.svg"></ion-icon>
       </span>
-      <time class="has-text-primary has-text-weight-bold" dateTime="${meetDate.toISOString().substring(0, 10)}">${filterFullDate(meetDate)}</time>
+      <time class="has-text-primary has-text-weight-bold" dateTime="${meetDate.toISOString().substring(0, 10)}">${fullDate(meetDate)}</time>
     </div>
 
     <div>