Initial commit

.env-sample

@@ -0,0 +1 @@
+URL=http://localhost:8080

.gitignore

@@ -0,0 +1,13 @@
+# Node modules
+node_modules
+
+# generated files
+dist
+src/_includes/css
+src/_includes/scripts
+
+# cache
+.cache
+
+# secret data
+.env

.prettierignore

@@ -0,0 +1 @@
+src/common/*

.prettierrc

@@ -0,0 +1,18 @@
+{
+  "printWidth": 90,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "bracketSpacing": false,
+  "quoteProps": "consistent",
+  "trailingComma": "none",
+  "arrowParens": "avoid",
+  "plugins": ["prettier-plugin-jinja-template"],
+  "overrides": [
+    {
+      "files": "*.njk",
+      "options": {
+        "parser": "jinja-template"
+      }
+    }
+  ]
+}

LICENSE.MD

@@ -0,0 +1,7 @@
+ISC License
+
+Copyright (c) 2022 Lene Saile
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

config/collections/index.js

@@ -0,0 +1,28 @@
+/** All blog posts as a collection. */
+const getAllPosts = collection => {
+  const posts = collection.getFilteredByGlob('./src/posts/**/*.md');
+  return posts.reverse();
+};
+
+/** All markdown files as a collection for sitemap.xml */
+const onlyMarkdown = collection => {
+  return collection.getFilteredByGlob('./src/**/*.md');
+};
+
+/** All tags from all posts as a collection. */
+const tagList = collection => {
+  const tagsSet = new Set();
+  collection.getAll().forEach(item => {
+    if (!item.data.tags) return;
+    item.data.tags
+      .filter(tag => !['posts', 'all'].includes(tag))
+      .forEach(tag => tagsSet.add(tag));
+  });
+  return Array.from(tagsSet).sort();
+};
+
+module.exports = {
+  getAllPosts,
+  onlyMarkdown,
+  tagList
+};

config/events/index.js

@@ -0,0 +1,37 @@
+// https://bnijenhuis.nl/notes/automatically-generate-open-graph-images-in-eleventy/
+// https://github.com/sophiekoonin/localghost/blob/main/src/plugins/og-to-png.js
+// converts SVG to JPEG for open graph images
+
+const fsPromises = require('fs/promises');
+const fs = require('fs');
+const path = require('path');
+const Image = require('@11ty/eleventy-img');
+const ogImagesDir = './src/assets/og-images';
+
+const svgToJpeg = async function () {
+  const socialPreviewImagesDir = 'dist/assets/og-images/';
+  const files = await fsPromises.readdir(socialPreviewImagesDir);
+  if (files.length > 0) {
+    files.forEach(function (filename) {
+      const outputFilename = filename.substring(0, filename.length - 4);
+      if (
+        filename.endsWith('.svg') & !fs.existsSync(path.join(ogImagesDir, outputFilename))
+      ) {
+        const imageUrl = socialPreviewImagesDir + filename;
+        Image(imageUrl, {
+          formats: ['jpeg'],
+          outputDir: ogImagesDir,
+          filenameFormat: function (id, src, width, format, options) {
+            return `${outputFilename}.${format}`;
+          }
+        });
+      }
+    });
+  } else {
+    console.log('⚠ No social images found');
+  }
+};
+
+module.exports = {
+  svgToJpeg
+};

config/filters/index.js

@@ -0,0 +1,90 @@
+const dayjs = require('dayjs');
+const CleanCSS = require('clean-css');
+const site = require('../../src/_data/meta');
+const {throwIfNotType} = require('../utils');
+const esbuild = require('esbuild');
+
+/** Removes all tags from an HTML string. */
+const stripHtml = str => {
+  throwIfNotType(str, 'string');
+  return str.replace(/<[^>]+>/g, '');
+};
+
+/** Formats the given string as an absolute url. */
+const toAbsoluteUrl = url => {
+  throwIfNotType(url, 'string');
+  // Replace trailing slash, e.g., site.com/ => site.com
+  const siteUrl = site.url.replace(/\/$/, '');
+  // Replace starting slash, e.g., /path/ => path/
+  const relativeUrl = url.replace(/^\//, '');
+
+  return `${siteUrl}/${relativeUrl}`;
+};
+
+/** Converts the given date string to ISO8610 format. */
+const toISOString = dateString => dayjs(dateString).toISOString();
+
+/** Formats a date using dayjs's conventions: https://day.js.org/docs/en/display/format */
+const formatDate = (date, format) => dayjs(date).format(format);
+
+const minifyCss = code => new CleanCSS({}).minify(code).styles;
+
+const minifyJs = async (code, ...rest) => {
+  const callback = rest.pop();
+  const cacheKey = rest.length > 0 ? rest[0] : null;
+
+  try {
+    if (cacheKey && jsminCache.hasOwnProperty(cacheKey)) {
+      const cacheValue = await Promise.resolve(jsminCache[cacheKey]); // Wait for the data, wrapped in a resolved promise in case the original value already was resolved
+      callback(null, cacheValue.code); // Access the code property of the cached value
+    } else {
+      const minified = esbuild.transform(code, {
+        minify: true
+      });
+      if (cacheKey) {
+        jsminCache[cacheKey] = minified; // Store the promise which has the minified output (an object with a code property)
+      }
+      callback(null, (await minified).code); // Await and use the return value in the callback
+    }
+  } catch (err) {
+    console.error('jsmin error: ', err);
+    callback(null, code); // Fail gracefully.
+  }
+};
+
+// source: https://github.com/bnijenhuis/bnijenhuis-nl/blob/main/.eleventy.js
+const splitlines = (input, maxCharLength) => {
+  const parts = input.split(' ');
+  const lines = parts.reduce(function (acc, cur) {
+    if (!acc.length) {
+      return [cur];
+    }
+
+    let lastOne = acc[acc.length - 1];
+
+    if (lastOne.length + cur.length > maxCharLength) {
+      return [...acc, cur];
+    }
+
+    acc[acc.length - 1] = lastOne + ' ' + cur;
+
+    return acc;
+  }, []);
+
+  return lines;
+};
+
+const shuffleArray = array => {
+  return array.sort(() => Math.random() - 0.5);
+};
+
+module.exports = {
+  toISOString,
+  formatDate,
+  toAbsoluteUrl,
+  stripHtml,
+  minifyCss,
+  minifyJs,
+  splitlines,
+  shuffleArray
+};

config/plugins/markdown.js

@@ -0,0 +1,88 @@
+const markdownIt = require('markdown-it');
+const markdownItPrism = require('markdown-it-prism');
+const markdownItAnchor = require('markdown-it-anchor');
+const markdownItClass = require('@toycode/markdown-it-class');
+const markdownItLinkAttributes = require('markdown-it-link-attributes');
+const markdownItEmoji = require('markdown-it-emoji').full;
+const markdownItEleventyImg = require('markdown-it-eleventy-img');
+const markdownItFootnote = require('markdown-it-footnote');
+const markdownitMark = require('markdown-it-mark');
+const markdownitAbbr = require('markdown-it-abbr');
+const {slugifyString} = require('../utils');
+const path = require('path');
+
+const markdownLib = markdownIt({
+  html: true,
+  breaks: true,
+  linkify: true,
+  typographer: true
+})
+  .disable('code')
+  .use(markdownItPrism, {
+    defaultLanguage: 'plaintext'
+  })
+  .use(markdownItAnchor, {
+    slugify: slugifyString,
+    tabIndex: false,
+    permalink: markdownItAnchor.permalink.headerLink({
+      class: 'heading-anchor'
+    })
+  })
+  .use(markdownItClass, {
+    ol: 'list',
+    ul: 'list'
+  })
+  .use(markdownItLinkAttributes, [
+    {
+      // match external links
+      matcher(href) {
+        return href.match(/^https?:\/\//);
+      },
+      attrs: {
+        rel: 'noopener'
+      }
+    }
+  ])
+  .use(markdownItEmoji)
+  .use(markdownItEleventyImg, {
+    imgOptions: {
+      widths: [440, 880, 1024],
+      urlPath: '/assets/images/',
+      outputDir: './dist/assets/images/',
+      formats: ['webp', 'jpeg']
+    },
+    globalAttributes: {
+      loading: 'lazy',
+      decoding: 'async',
+      sizes: '90vw'
+    },
+    // prepend src for markdown images
+    resolvePath: (filepath, env) => {
+      return path.join('src', filepath);
+    },
+    renderImage(image, attributes) {
+      const [Image, options] = image;
+      const [src, attrs] = attributes;
+
+      Image(src, options);
+
+      const metadata = Image.statsSync(src, options);
+      const imageMarkup = Image.generateHTML(metadata, attrs, {
+        whitespaceMode: 'inline'
+      });
+
+      const imageElement = attrs.title
+        ? `<figure class="flow">
+			${imageMarkup}
+					<figcaption>${attrs.title}</figcaption>
+				</figure>`
+        : `${imageMarkup}`;
+
+      return imageElement;
+    }
+  })
+  .use(markdownItFootnote)
+  .use(markdownitMark)
+  .use(markdownitAbbr);
+
+module.exports = markdownLib;

config/scripts/generate-screenshots.mjs

@@ -0,0 +1,45 @@
+import fetch from '@11ty/eleventy-fetch';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+
+const dataPath = './src/_data/builtwith.json';
+const screenshotDir = path.join(
+  path.dirname(new URL(import.meta.url).pathname),
+  '../../src/assets/images/screenshots'
+);
+
+async function fetchScreenshot(url, filePath) {
+  const waitCondition = 'wait:2';
+  const timeout = 'timeout:5';
+  const apiUrl = `https://v1.screenshot.11ty.dev/${encodeURIComponent(url)}/opengraph/_${waitCondition}_${timeout}/`;
+
+  const buffer = await fetch(apiUrl, {
+    duration: '1d',
+    type: 'buffer'
+  });
+
+  await fs.writeFile(filePath, buffer);
+  console.log(`Screenshot saved to ${filePath}`);
+}
+
+async function generateScreenshots() {
+  const jsonData = JSON.parse(await fs.readFile(dataPath, 'utf-8'));
+
+  try {
+    await fs.access(screenshotDir);
+  } catch {
+    await fs.mkdir(screenshotDir, {recursive: true});
+  }
+
+  for (const item of jsonData) {
+    const {name, link, filename} = item;
+    const filePath = path.join(screenshotDir, `${filename}.jpg`);
+    try {
+      await fetchScreenshot(link, filePath);
+    } catch (error) {
+      console.error(`Error processing ${name}: ${error.message}`);
+    }
+  }
+}
+
+generateScreenshots();