Fix collection reversing

Author: stedman

.eleventy.js

@@ -1,8 +1,7 @@
 const fs = require('fs');
 const pluginRss = require('@11ty/eleventy-plugin-rss');
 const sassWatch = require('./_includes/sass-watch');
-const filterMarkdown = require('./_includes/filters/markdown');
-const filterRegexReplace = require('./_includes/filters/regex-replace');
+const filter = require('./_includes/filter');
 const scAvatar = require('./_includes/shortcodes/avatar');
 const scMeetupDetails = require('./_includes/shortcodes/meetup-details');
 const scVideoPlayer = require('./_includes/shortcodes/video-player');
@@ -51,11 +50,14 @@ module.exports = (eleventyConfig) => {
     return addFileDates(posts);
   });
 
+  // FILTER: Reverse array without mutating original.
+  eleventyConfig.addFilter('flip', filter.flip);
+
   // FILTER: Run content thru Markdown-it.
-  eleventyConfig.addFilter('markdown', filterMarkdown);
+  eleventyConfig.addFilter('markdown', filter.markdown);
 
   // FILTER: Replace text with regex capabilities.
-  eleventyConfig.addFilter('regexReplace', filterRegexReplace);
+  eleventyConfig.addFilter('regexReplace', filter.regexReplace);
 
   // SHORTCODE: Format meeting details message block.
   eleventyConfig.addShortcode('meetupDetails', scMeetupDetails);

_includes/filter.js

@@ -0,0 +1,54 @@
+module.exports = {
+  /**
+   * Reverse array without mutating the original.
+   * (The 'reverse' filter in LiquidJS v6 mutates the original array.)
+   *
+   * @param   {Array}  collection   Array to be reversed.
+   *
+   * @return  {Array}  Reversed array.
+   */
+  flip: (collection) => {
+    if (!Array.isArray(collection)) return collection;
+
+    return [...collection].reverse();
+  },
+
+  /**
+   * Parse Markdown content to HTML.
+   *
+   * @param   {string}  content   Incoming content (expecting Markdown).
+   *
+   * @return  {string}  Content rendered as HTML.
+   */
+  markdown: (content) => {
+    const md = require('markdown-it')({
+      html: true,
+      linkify: true,
+      typographer: true,
+    });
+
+    if (content) {
+      return md.render(content);
+    }
+
+    return '';
+  },
+
+  /**
+   * Allow regex in replace filter. Global flag set by default,
+   *
+   * @param {string}  content     Content to search/replace.
+   * @param {string}  rePattern   RegExp patter to use.
+   * @param {string}  replacement Replacement text.
+   * @return {string}             Replaced content.
+   *
+   */
+  regexReplace: (content, rePattern, replacement) => {
+    if (replacement === undefined || rePattern === undefined) return content;
+
+    const re = new RegExp(rePattern, 'g');
+
+
+    return content.replace(re, replacement);
+  },
+};

_includes/filters/markdown.js

@@ -1,13 +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>
+    <a class="arrow-left" 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>
+    <a class="arrow-right" href="{{ nextPost.url | url }}">{{ nextPost.data.title }}</a>
     {%- endif -%}
   </div>
 </div>

_includes/filters/regex-replace.js

@@ -246,6 +246,14 @@ $footer-background-color: $white-ter;
   margin-bottom: -2rem;
 }
 
+.arrow-left:before {
+  content: '← ';
+}
+
+.arrow-right:after {
+  content: ' →';
+}
+
 /*
  * THE REST
  */

_includes/nav-posts.liquid

@@ -31,10 +31,9 @@ <h1 class="is-sr-only">{{ title }}</h1>
         <p>We work hard to build a community that treats people with excellence. We've formalized this in the <a href="{{ '/code-of-conduct/' | url }}">Austin JavaScript Code of Conduct</a>.</p>
       </section>
 
-      {%- assign meetups = collections.meetups | reverse -%}
       <section class="section">
         <h3>Past speakers and talks</h3>
-        {%- for meetup in meetups -%}
+        {%- for meetup in collections.meetups reversed -%}
         {%- for speaker in meetup.data.speakers -%}
         {%- if speaker.name and speaker.avatar -%}
         <figure class="pic">
@@ -53,6 +52,7 @@ <h3>Past speakers and talks</h3>
     <div class="content">
       <h3>Recent meetups</h3>
       <ul>
+        {%- assign meetups = collections.meetups | flip -%}
         {%- for post in meetups limit: 5 -%}
         <li><a href="{{ post.url | url }}">{{ post.data.title }}</a></li>
         {%- endfor -%}

_sass/_main.scss

@@ -9,8 +9,7 @@ <h1>{{ title }}</h1>
   <p>{{ meta.description }}</p>
 
   <ul>
-    {%- assign meetups = collections.meetups -%}
-    {%- for post in meetups -%}
+    {%- for post in collections.meetups reversed -%}
     <li>
       <a href="{{ post.url | url }}">
         {{ post.inputPath | slice: 11, 10 }}: