Witch of Git - web/blog/blob - .eleventy.js

   1 const pluginRss = require("@11ty/eleventy-plugin-rss");
   2 const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
   3 const Nunjucks = require("nunjucks");
   4 const dateFilter = require("nunjucks-date-filter");
   5 const md = require("markdown-it")();
   6 const CleanCSS = require("clean-css");
   7 const htmlMinifier = require("html-minifier");
   8
   9 module.exports = (eleventyConfig) => {
  10     eleventyConfig.addNunjucksFilter('date', dateFilter);
  11     eleventyConfig.addPlugin(pluginRss);
  12     eleventyConfig.addPlugin(pluginSyntaxHighlight);
  13
  14     eleventyConfig.addTransform("html-minifier", htmlMinifierTransform);
  15
  16     eleventyConfig.addPassthroughCopy("img");
  17     eleventyConfig.addPassthroughCopy("static");
  18
  19     eleventyConfig.addNunjucksShortcode("youtube", youtubeShortcode);
  20     eleventyConfig.addPairedNunjucksShortcode("tweet", tweetShortcode);
  21     eleventyConfig.addPairedShortcode("aside", asideShortcode);
  22     eleventyConfig.addPairedShortcode("figure", figureShortcode);
  23
  24     eleventyConfig.addFilter("markdown", value => md.renderInline(value));
  25     eleventyConfig.addFilter("groupby", groupbyFilter);
  26     eleventyConfig.addFilter("cssmin", css =>
  27         new CleanCSS({}).minify(css).styles);
  28
  29     eleventyConfig.addCollection("years", collection => {
  30         const posts = collection.getFilteredByTag("posts");
  31         const items = groupby(posts, item => item.date.getFullYear());
  32         return items.reduce((obj, [k, v]) => (obj[k] = v, obj), {});
  33     });
  34
  35     return {
  36         markdownTemplateEngine: "njk",
  37     };
  38 };
  39
  40 function access(item, path) {
  41     const segments = path.split(".");
  42     for (const seg of segments) {
  43         if (item === undefined) { return null; }
  44         if (seg.endsWith("()")) {
  45             const method = item[seg.slice(0, -2)];
  46             if (method === undefined) { return null; }
  47             item = method.bind(item)();
  48         } else {
  49             item = item[seg];
  50         }
  51     }
  52     return item;
  53 }
  54
  55 function groupby(items, keyFn) {
  56     const results = [];
  57     for (const item of items) {
  58         const key = keyFn(item);
  59         if (results.length == 0 || key != results[results.length-1][0]) {
  60             results.push([key, [item]]);
  61         } else {
  62             results[results.length-1][1].push(item);
  63         }
  64     }
  65     return results;
  66 }
  67
  68 function groupbyFilter(items, path) {
  69     return groupby(items, item => access(item, path));
  70 }
  71
  72 function youtubeShortcode(items, inWidth = 560, inHeight = 315) {
  73     const width = items.width || inWidth;
  74     const height = items.height || inHeight;
  75     const allow = items.allow || "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  76     const border = items.border || "0";
  77     const video = items.video || items;
  78     if (!video) {
  79         throw "Required argument 'video'.";
  80     }
  81     const src = "https://www.youtube.com/embed/" + video;
  82     return `<div class="row flex-center">
  83  <iframe width="${width}" height="${height}" src="${src}"
  84   frameborder="${border}" allow="${allow}" allowfullscreen></iframe>
  85 </div>`;
  86 }
  87
  88 function tweetShortcode(content, items) {
  89     // @TODO: Handle parsing date
  90     return `<div class="row flex-center">
  91  <blockquote class="twitter-tweet">
  92   <p lang="en" dir="ltr">${content}</p> &mdash; ${items.name} (@${items.at})
  93   <a href="${items.link}">${items.date}</a>
  94  </blockquote>
  95  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8">
  96  </script>
  97 </div>`;
  98 }
  99
 100 function asideShortcode(content, style='') {
 101     const html = md.render(content);
 102     if (style) {
 103         return `<aside class="${style}">${html}</aside>`;
 104     } else {
 105         return `<aside>${html}</aside>`;
 106     }
 107 }
 108
 109 function figureShortcode(content, { src, alt }) {
 110     const captionHtml = md.render(content);
 111     return `<figure class="col hcenter">
 112   <img src="${src}" alt="${alt}">
 113   <figcaption>${captionHtml}</figcaption>
 114 </figure>`;
 115 }
 116
 117 function htmlMinifierTransform(content, outputPath) {
 118     if (outputPath.endsWith(".html")) {
 119         return htmlMinifier.minify(content, {
 120             useShortDoctype: true,
 121             removeComments: true,
 122             collapseWhitespace: true,
 123         });
 124     }
 125     return content;
 126 }