Migrate from Jekyll to Eleventy

tbroyer · Mar 12, 2023 · 1baabc3 · 1baabc3
1 parent 1740eb7
commit 1baabc3
Show file tree

Hide file tree

Showing 18 changed files with 4,827 additions and 166 deletions.
diff --git a/.github/workflows/github-pages.yml b/.github/workflows/github-pages.yml
@@ -0,0 +1,51 @@
+name: pages build and deployment
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: "lts/*"
+          cache: "npm"
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v3
+      - name: Install dependencies
+        run: npm ci
+      - name: Build
+        env:
+          PAGES_BASE_URL: ${{ steps.pages.outputs.base_url }}
+        run: npm run build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    needs: build
+    runs-on: ubuntu-latest
+    name: Deploy
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 _site
+node_modules
diff --git a/CNAME b/CNAME
diff --git a/_config.yml b/_config.yml
diff --git a/_data/site.js b/_data/site.js
@@ -0,0 +1,6 @@
+module.exports = {
+  title: "tbroyer's pages",
+  github: {
+    url: process.env.PAGES_BASE_URL ?? "",
+  },
+};
diff --git a/_drafts/_drafts.11tydata.js b/_drafts/_drafts.11tydata.js
@@ -0,0 +1,7 @@
+module.exports = {
+  date: "Last Modified",
+  layout: "post",
+  eleventyComputed: {
+    title: (data) => data.title || data.page.fileSlug
+  }
+}
diff --git a/_layouts/default.html b/_layouts/default.html
diff --git a/_layouts/default.liquid b/_layouts/default.liquid
@@ -0,0 +1,48 @@
+<!doctype html>
+<html>
+<head>
+<meta charset=utf-8>
+<title>{{ title }}</title>
+<link rel=stylesheet href=/style.css>
+<link rel=alternate href=https://feeds.feedburner.com/BlogLtgtNet type=application/atom+xml>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel=canonical href="{{ site.github.url }}{{ page.url }}">
+<link rel="me" href="https://piaille.fr/@tbroyer">
+<link rel="me" href="https://mastodon.social/@tbroyer">
+<link rel="me" href="https://twitter.com/@tbroyer">
+<link rel="me" href="https://github.com/tbroyer">
+<meta http-equiv="Content-Security-Policy" content="
+    default-src 'none';
+    img-src 'self' data:{% if discuss_url %} https://d2fltix0v2e0sb.cloudfront.net{% endif %}{% if has_embedded_tweets %} *.twitter.com *.twimg.com{% endif %}{{ additional_csp.img_src | prepend: " " }};
+    {%- if eleventy.env.runMode != "build" or has_playground_elements or has_embedded_tweets or additional_csp.script_src %}
+    script-src{% if eleventy.env.runMode != "build" or has_playground_elements %} 'self'{% endif %}{% if has_embedded_tweets %} https://*.twitter.com https://*.twimg.com{% endif %}{{ additional_csp.script_src | prepend: " " }};
+    {%- endif %}
+    {%- if has_playground_elements or has_embedded_tweets or additional_csp.script_src %}
+    child-src{% if has_playground_elements %} https://unpkg.com{% endif %}{% if has_embedded_tweets %} https://*.twitter.com{% endif %}{{ additional_csp.child_src | prepend: " " }};
+    {%- endif %}
+    style-src 'self'{% if has_embedded_tweets %} *.twitter.com{% endif %}{% if has_playground_elements %} 'unsafe-inline'{% endif %};
+    {%- if eleventy.env.runMode != "build" or has_playground_elements %}
+    connect-src 'self';
+    worker-src 'self';
+    {%- endif %}
+">
+{%- if has_playground_elements %}
+<script type=module src=/js/playground-elements.js></script>
+{%- endif %}
+{%- if has_embedded_tweets %}
+<meta name="twitter:widgets:csp" content="on">
+<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+{%- endif %}
+</head>
+<body>
+
+{{ content }}
+
+{% if discuss_url -%}
+<p class=discuss>Discuss: <a href="{{ discuss_url }}"><img src="https://d2fltix0v2e0sb.cloudfront.net/dev-badge.svg" alt="Dev.to" width=30 height=30></a></p>
+{% endif -%}
+<footer><small>
+Copyright © {{ "today" | date: "%Y" }} Thomas Broyer. Except as noted, {{ title }} by <a href="https://github.com/tbroyer">Thomas Broyer</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Unported License</a>.
+</small></footer>
+</body>
+</html>
diff --git a/_layouts/post.html b/_layouts/post.html
diff --git a/_layouts/post.liquid b/_layouts/post.liquid
@@ -0,0 +1,26 @@
+---js
+{
+  layout: "default",
+  eleventyComputed: {
+    permalink: (data) => data.published !== false ? `${data.page.fileSlug}/` : false,
+  },
+}
+---
+<header>
+<nav>
+{% assign olderPost = collections.posts | getNextCollectionItem -%}
+{% assign newerPost = collections.posts | getPreviousCollectionItem -%}
+{% if olderPost -%}
+  <a href="{{ olderPost.url }}" title="Older: {{ olderPost.data.title }}">←</a>
+{%- endif %}
+<a href="/">Home</a>
+{% if newerPost -%}
+  <a href="{{ newerPost.url }}" title="Newer: {{ newerPost.data.title }}">→</a>
+{%- endif %}
+</nav>
+<h1>{{ title }}</h1>
+<time datetime="{{ page.date | date: "%Y-%m-%d" }}" pubdate>{{ page.date | date: "%d %B %Y" }}</time>
+</header>
+<main>
+{{ content }}
+</main>
diff --git a/_posts/2013-05-06-in-quest-of-the-ultimate-build-tool.md b/_posts/2013-05-06-in-quest-of-the-ultimate-build-tool.md
@@ -205,7 +205,7 @@ java_library(
 
 is more or less equivalent to the following Make snippet:
 
-```make
+```makefile
 MY_LIBRARY_SRCS := $(shell find src/main/java -type f -name '*.java')
 MY_LIBRARY_RESOURCES := $(shell find src/main/resources -type f)
 my-library.jar: $(MY_LIBRARY_SRCS) $(MY_LIBRARY_RESOURCES) third-party/guava.jar

diff --git a/eleventy.config.cjs b/eleventy.config.cjs
@@ -0,0 +1,49 @@
+const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
+const markdownItAnchor = require("markdown-it-anchor");
+
+const includeDrafts = process.env.DRAFTS === "true";
+
+/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
+module.exports = (eleventyConfig) => {
+  eleventyConfig.addPlugin(syntaxHighlight)
+  eleventyConfig.amendLibrary("md", mdLib => mdLib.use(markdownItAnchor, {
+    tabIndex: false,
+    slugify(str) {
+      // mimick CommonMarkGhPages: https://github.com/github/jekyll-commonmark-ghpages/blob/17d4ffe88aa976e82dce5bd686bc85717601a37a/lib/jekyll-commonmark-ghpages.rb#L61-L78
+      return str.replace(/^[^a-zA-Z]+/, "").replaceAll(/[^a-zA-Z0-9 -]/g, "").replaceAll(" ", "-").toLowerCase() || "section";
+    }
+  }));
+  eleventyConfig.addCollection("posts", collectionApi => {
+    return collectionApi.getFilteredByGlob([
+      "_posts/*",
+      ...(includeDrafts ? ["_drafts/*"] : []),
+    ]).filter(p => p.data.published !== false).reverse();
+  });
+  if (!includeDrafts) {
+    eleventyConfig.ignores.add("_drafts");
+  }
+  eleventyConfig.addPassthroughCopy("googlea7c46ecf2eaab4db.html")
+  eleventyConfig.ignores.add("googlea7c46ecf2eaab4db.html");
+  eleventyConfig.addPassthroughCopy("image");
+  eleventyConfig.addPassthroughCopy("js");
+  eleventyConfig.addPassthroughCopy("wordle-elements");
+  eleventyConfig.ignores.add("wordle-elements");
+  eleventyConfig.addExtension("css", { key: "liquid" });
+  eleventyConfig.addExtension("xml", { key: "liquid" });
+  eleventyConfig.addLiquidTag("post_url", function () {
+    return {
+      parse(tagToken) {
+        // escaping taken from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#escaping
+        this.re = new RegExp(`/${tagToken.args.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}.\\w+$`);
+      },
+      *render(ctx) {
+        return ctx.environments.collections.posts.find(post => this.re.test(post.page.inputPath))?.page.url;
+      },
+    };
+  });
+  return {
+    dir: {
+      layouts: "_layouts",
+    },
+  };
+};
diff --git a/index.html b/index.html
@@ -1,30 +1,35 @@
 ---
-layout: default
-title: tbroyer's pages
+layout: "default.liquid"
+pagination:
+  data: collections.posts
+  size: 50
+permalink: "/{% if pagination.pageNumber > 0 %}page{{ pagination.pageNumber | plus: 1 }}/{% endif %}"
+eleventyComputed:
+  title: "{{ site.title }}"
 ---
-<h1>{{ page.title }}</h1>
+<h1>{{ title }}</h1>
 <main class=posts>
-{%- for post in paginator.posts %}
+{%- for post in pagination.items %}
   <div>
     <time datetime="{{ post.date | date: "%Y-%m-%d" }}">{{ post.date | date: "%d %b %Y" }}</time>
-    <a href="{{ post.url }}">{{ post.title }}</a></div>
+    <a href="{{ post.url }}">{{ post.data.title }}</a></div>
   </div>
 {%- endfor %}
 </main>
-{% if paginator.total_pages > 1 -%}
+{% if pagination.href.next || pagination.href.previous -%}
 <nav>
-{%- if paginator.next_page %}
-  <a href="/page{{ paginator.next_page }}/">← Older posts</a>
-  {% if paginator.page != 1 -%}
+{%- if pagination.href.next %}
+  <a href="{{ pagination.href.next }}">← Older posts</a>
+  {% if page.url != pagination.href.first -%}
     •
   {%- endif %}
 {% endif -%}
-{%- if paginator.page != 1 %}
+{%- if page.url != pagination.href.first %}
   <a href="/">Home</a>
 {% endif -%}
-{%- if paginator.previous_page > 1 %}
+{%- if pagination.href.previous %}
   •
-  <a href="/page{{ paginator.previous_page }}/">Newer posts →</a>
+  <a href="{{ pagination.href.previous }}">Newer posts →</a>
 {% endif -%}
 </nav>
 {%- endif -%}