From f30c79c0d9998355bfdb3e4f4988d4e986149771 Mon Sep 17 00:00:00 2001 From: Zearin Date: Thu, 4 May 2023 16:36:08 -0400 Subject: [PATCH 01/99] Add JSDoc (for completion) eleventy.config.js --- eleventy.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/eleventy.config.js b/eleventy.config.js index 3fba4b7..6a897fc 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -10,6 +10,7 @@ const { EleventyHtmlBasePlugin } = require("@11ty/eleventy"); const pluginDrafts = require("./eleventy.config.drafts.js"); const pluginImages = require("./eleventy.config.images.js"); +/** @param {import('@11ty/eleventy').UserConfig} eleventyConfig */ module.exports = function(eleventyConfig) { // Copy the contents of the `public` folder to the output folder // For example, `./public/css/` ends up in `_site/css/` From 21cddbf3a1eaf263d0bf86a5620b4d1864a5b940 Mon Sep 17 00:00:00 2001 From: Adam Wolf Date: Tue, 22 Aug 2023 10:25:11 -0500 Subject: [PATCH 02/99] Add GitLab Pages and Cloudflare Pages to inline 404 help I had to move an Eleventy site to Cloudflare Pages and was pleasantly surprised when 404.html worked the same as GitHub Pages and Netlify et al. I updated the website quicktip (11ty/11ty-website#1608). Updating the base blog, I noticed the inline link to GitLab Pages was missing, so I added that as well. --- content/404.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/content/404.md b/content/404.md index bd51f61..9dd2ce7 100644 --- a/content/404.md +++ b/content/404.md @@ -11,9 +11,10 @@ Go home. Read more: https://www.11ty.dev/docs/quicktips/not-found/ -This will work for both GitHub pages and Netlify: +This will work for GitHub pages, GitLab Pages, Netlify, and Cloudflare Pages: * https://help.github.com/articles/creating-a-custom-404-page-for-your-github-pages-site/ +* https://docs.gitlab.com/ee/user/project/pages/introduction.html#custom-error-codes-pages * https://www.netlify.com/docs/redirects/#custom-404 - +* https://developers.cloudflare.com/pages/platform/serving-pages/#not-found-behavior --> From fbbe632226aaba21aea5d7a0f780113bb846397a Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Wed, 20 Sep 2023 12:17:40 -0500 Subject: [PATCH 03/99] Stackblitz is working again with sharp support --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 927d5bb..53c170b 100644 --- a/README.md +++ b/README.md @@ -94,6 +94,7 @@ Deploy this Eleventy site in just a few clicks on these services: - [Get your own Eleventy web site on Netlify](https://app.netlify.com/start/deploy?repository=https://github.com/11ty/eleventy-base-blog) - If you run Eleventy locally you can drag your `_site` folder to [`drop.netlify.com`](https://drop.netlify.com/) to upload it without using `git`. - [Get your own Eleventy web site on Vercel](https://vercel.com/import/project?template=11ty%2Feleventy-base-blog) +- [Try it out on Stackblitz](https://stackblitz.com/github/11ty/eleventy-base-blog) - Read more about [Deploying an Eleventy project](https://www.11ty.dev/docs/deployment/) to the web. ### Implementation Notes From e1376f219c7a6e0d4bc3fdaa609df4c93a09fa84 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Fri, 22 Sep 2023 16:31:49 -0500 Subject: [PATCH 04/99] Upgrade dep --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2e08e19..e3340f0 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "homepage": "https://github.com/11ty/eleventy-base-blog#readme", "devDependencies": { "@11ty/eleventy": "^2.0.1", - "@11ty/eleventy-img": "^3.1.0", + "@11ty/eleventy-img": "^3.1.1", "@11ty/eleventy-navigation": "^0.3.5", "@11ty/eleventy-plugin-bundle": "^1.0.4", "@11ty/eleventy-plugin-rss": "^1.2.0", From 764f2c75613479668d73fa55813c31ac290c7949 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Thu, 5 Oct 2023 08:27:47 -0500 Subject: [PATCH 05/99] Add link to Cloudflare Pages demo --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index 53c170b..1744e81 100644 --- a/README.md +++ b/README.md @@ -2,8 +2,6 @@ A starter repository showing how to build a blog with the [Eleventy](https://www.11ty.dev/) site generator (using the [v2.0 release](https://www.11ty.dev/blog/eleventy-v2/)). -[![Netlify Status](https://api.netlify.com/api/v1/badges/802669dd-d5f8-4d49-963d-6d57b257c2a2/deploy-status)](https://app.netlify.com/sites/eleventy-base-blog/deploys) - ## Getting Started * [Want a more generic/detailed getting started guide?](https://www.11ty.dev/docs/getting-started/) @@ -86,6 +84,7 @@ Or you can run [debug mode](https://www.11ty.dev/docs/debugging/) to see all the - [Netlify](https://eleventy-base-blog.netlify.com/) - [GitHub Pages](https://11ty.github.io/eleventy-base-blog/) - [Remix on Glitch](https://glitch.com/~11ty-eleventy-base-blog) +- [Cloudflare Pages](https://eleventy-base-blog-d2a.pages.dev/) ## Deploy this to your own site From e27e4de9ebcc2dc6f44ad35663d94f975f1f4476 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Thu, 5 Oct 2023 08:32:15 -0500 Subject: [PATCH 06/99] Formatting on CSP section --- README.md | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 1744e81..a4b46ae 100644 --- a/README.md +++ b/README.md @@ -112,12 +112,9 @@ Deploy this Eleventy site in just a few clicks on these services: - `_includes/layouts/post.njk`: the blog post template (wrapped into `base.njk`) - `_includes/postslist.njk` is a Nunjucks include and is a reusable component used to display a list of all the posts. `content/index.njk` has an example of how to use it. -If your site enforces a Content Security Policy (as public-facing sites should), either, in `base.njk`, disable -```html - -``` -and enable -```html - -``` -or configure the server with the CSP directive `style-src: 'unsafe-inline'` (which is less secure). +#### Content Security Policy + +If your site enforces a Content Security Policy (as public-facing sites should), you have a few choices (pick one): + +1. In `base.njk`, remove `` and uncomment `` +2. Configure the server with the CSP directive `style-src: 'unsafe-inline'` (less secure). From d78b03ae1d059a8e69941e49fa0214595bcf828d Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Thu, 5 Oct 2023 08:32:54 -0500 Subject: [PATCH 07/99] Link to CSP --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a4b46ae..7177590 100644 --- a/README.md +++ b/README.md @@ -114,7 +114,7 @@ Deploy this Eleventy site in just a few clicks on these services: #### Content Security Policy -If your site enforces a Content Security Policy (as public-facing sites should), you have a few choices (pick one): +If your site enforces a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) (as public-facing sites should), you have a few choices (pick one): 1. In `base.njk`, remove `` and uncomment `` 2. Configure the server with the CSP directive `style-src: 'unsafe-inline'` (less secure). From 6d64bd2813e0d5db36fe4b6693db04043b2654a4 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Fri, 10 Nov 2023 16:41:13 -0600 Subject: [PATCH 08/99] v9 switches to ESM --- _data/metadata.js | 2 +- content/blog/blog.11tydata.js | 2 +- content/feed/feed.11tydata.js | 2 +- eleventy.config.drafts.js | 5 ++--- eleventy.config.images.js | 6 +++--- eleventy.config.js | 22 ++++++++++++---------- package.json | 3 ++- 7 files changed, 22 insertions(+), 20 deletions(-) diff --git a/_data/metadata.js b/_data/metadata.js index 5a5c99b..97faa8c 100644 --- a/_data/metadata.js +++ b/_data/metadata.js @@ -1,4 +1,4 @@ -module.exports = { +export default { title: "Eleventy Base Blog v8", url: "https://example.com/", language: "en", diff --git a/content/blog/blog.11tydata.js b/content/blog/blog.11tydata.js index 2d655b1..614f505 100644 --- a/content/blog/blog.11tydata.js +++ b/content/blog/blog.11tydata.js @@ -1,4 +1,4 @@ -module.exports = { +export default { tags: [ "posts" ], diff --git a/content/feed/feed.11tydata.js b/content/feed/feed.11tydata.js index ed3fec9..42ad826 100644 --- a/content/feed/feed.11tydata.js +++ b/content/feed/feed.11tydata.js @@ -1,3 +1,3 @@ -module.exports = { +export default { eleventyExcludeFromCollections: true } diff --git a/eleventy.config.drafts.js b/eleventy.config.drafts.js index 8eb92dc..daea903 100644 --- a/eleventy.config.drafts.js +++ b/eleventy.config.drafts.js @@ -24,10 +24,9 @@ function eleventyComputedExcludeFromCollections() { } }; -module.exports.eleventyComputedPermalink = eleventyComputedPermalink; -module.exports.eleventyComputedExcludeFromCollections = eleventyComputedExcludeFromCollections; +export { eleventyComputedPermalink, eleventyComputedExcludeFromCollections }; -module.exports = eleventyConfig => { +export default function(eleventyConfig) { eleventyConfig.addGlobalData("eleventyComputed.permalink", eleventyComputedPermalink); eleventyConfig.addGlobalData("eleventyComputed.eleventyExcludeFromCollections", eleventyComputedExcludeFromCollections); diff --git a/eleventy.config.images.js b/eleventy.config.images.js index 32a0269..b2c98b2 100644 --- a/eleventy.config.images.js +++ b/eleventy.config.images.js @@ -1,7 +1,7 @@ -const path = require("path"); -const eleventyImage = require("@11ty/eleventy-img"); +import path from "path"; +import eleventyImage from "@11ty/eleventy-img"; -module.exports = eleventyConfig => { +export default function(eleventyConfig) { function relativeToInputPath(inputPath, relativeFilePath) { let split = inputPath.split("/"); split.pop(); diff --git a/eleventy.config.js b/eleventy.config.js index 3fba4b7..807d26e 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -1,16 +1,18 @@ -const { DateTime } = require("luxon"); -const markdownItAnchor = require("markdown-it-anchor"); +import { DateTime } from "luxon"; +import markdownItAnchor from "markdown-it-anchor"; -const pluginRss = require("@11ty/eleventy-plugin-rss"); -const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight"); -const pluginBundle = require("@11ty/eleventy-plugin-bundle"); -const pluginNavigation = require("@11ty/eleventy-navigation"); -const { EleventyHtmlBasePlugin } = require("@11ty/eleventy"); +import pluginRss from "@11ty/eleventy-plugin-rss"; +import pluginSyntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight"; +import pluginBundle from "@11ty/eleventy-plugin-bundle"; +import pluginNavigation from "@11ty/eleventy-navigation"; -const pluginDrafts = require("./eleventy.config.drafts.js"); -const pluginImages = require("./eleventy.config.images.js"); +import pluginDrafts from "./eleventy.config.drafts.js"; +import pluginImages from "./eleventy.config.images.js"; + +/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */ +export default async function(eleventyConfig) { + const { EleventyHtmlBasePlugin } = await import("@11ty/eleventy"); -module.exports = function(eleventyConfig) { // Copy the contents of the `public` folder to the output folder // For example, `./public/css/` ends up in `_site/css/` eleventyConfig.addPassthroughCopy({ diff --git a/package.json b/package.json index e3340f0..118f343 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,8 @@ { "name": "eleventy-base-blog", - "version": "8.0.0", + "version": "9.0.0", "description": "A starter repository for a blog web site using the Eleventy site generator.", + "type": "module", "scripts": { "build": "npx @11ty/eleventy", "build-ghpages": "npx @11ty/eleventy --pathprefix=/eleventy-base-blog/", From 4c57a825da0de68dfdb9dad2ec7b7f448f825e27 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Sun, 14 Jan 2024 12:32:15 +1300 Subject: [PATCH 09/99] Status --- README.md | 2 +- _data/metadata.js | 2 +- _includes/layouts/base.njk | 4 ++-- content/404.md | 2 +- content/blog/fifthpost.md | 8 ++++---- content/blog/secondpost.md | 4 ++-- content/tag-pages.njk | 22 ++++++++++++++++++++++ content/tags-list.njk | 12 ------------ content/tags.njk | 25 +++++++------------------ eleventy.config.js | 14 ++++++++------ package.json | 8 ++++---- 11 files changed, 52 insertions(+), 51 deletions(-) create mode 100644 content/tag-pages.njk delete mode 100644 content/tags-list.njk diff --git a/README.md b/README.md index 7177590..5e21e4f 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# eleventy-base-blog v8 +# eleventy-base-blog v9 A starter repository showing how to build a blog with the [Eleventy](https://www.11ty.dev/) site generator (using the [v2.0 release](https://www.11ty.dev/blog/eleventy-v2/)). diff --git a/_data/metadata.js b/_data/metadata.js index 97faa8c..7e8b636 100644 --- a/_data/metadata.js +++ b/_data/metadata.js @@ -1,5 +1,5 @@ export default { - title: "Eleventy Base Blog v8", + title: "Eleventy Base Blog v9", url: "https://example.com/", language: "en", description: "I am writing about my experiences as a naval navel-gazer.", diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk index 3b3226f..1308e54 100644 --- a/_includes/layouts/base.njk +++ b/_includes/layouts/base.njk @@ -7,8 +7,8 @@ {#- Atom and JSON feeds included by default #} - - + + {#- Uncomment this if you’d like folks to know that you used Eleventy to build your site! #} {#- #} diff --git a/content/404.md b/content/404.md index bd51f61..c8be2df 100644 --- a/content/404.md +++ b/content/404.md @@ -5,7 +5,7 @@ eleventyExcludeFromCollections: true --- # Content not found. -Go home. +Go home. + diff --git a/eleventy.config.js b/eleventy.config.js index 3fba4b7..9f57b67 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -92,6 +92,10 @@ module.exports = function(eleventyConfig) { }); }); + eleventyConfig.addShortcode("currentBuildDate", () => { + return (new Date()).toISOString(); + }) + // Features to make your build faster (when you need them) // If your passthrough copy gets heavy and cumbersome, add this line From e441a3d0935447fbaa233bf61b189e070ee14d1f Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Thu, 7 Mar 2024 08:17:02 -0600 Subject: [PATCH 23/99] CI From 00a668b96b3aca1d73a953bdf6b40dc2f091e42b Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Thu, 7 Mar 2024 08:49:45 -0600 Subject: [PATCH 24/99] =?UTF-8?q?We=20don=E2=80=99t=20want=20this=20to=20b?= =?UTF-8?q?e=20enabled=20by=20default=20for=20everyone.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../workflows/{deploy-pages.yml => deploy-pages.yml.sample} | 3 +++ 1 file changed, 3 insertions(+) rename .github/workflows/{deploy-pages.yml => deploy-pages.yml.sample} (82%) diff --git a/.github/workflows/deploy-pages.yml b/.github/workflows/deploy-pages.yml.sample similarity index 82% rename from .github/workflows/deploy-pages.yml rename to .github/workflows/deploy-pages.yml.sample index 872d067..61f3a3c 100644 --- a/.github/workflows/deploy-pages.yml +++ b/.github/workflows/deploy-pages.yml.sample @@ -1,3 +1,6 @@ +# If you’d like to deploy this to GitHub pages, rename this +# file to `deploy-pages.yml` and read the mini-tutorial on +# https://www.11ty.dev/docs/deployment/#deploy-an-eleventy-project-to-github-pages name: Deploy to GitHub Pages on: From efeeeb60b53132c03d9a27725d49206408a8aa7f Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Thu, 7 Mar 2024 08:52:42 -0600 Subject: [PATCH 25/99] A few more GitHub pages tweaks --- .../{deploy-pages.yml.sample => gh-pages.yml.sample} | 2 +- README.md | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) rename .github/workflows/{deploy-pages.yml.sample => gh-pages.yml.sample} (95%) diff --git a/.github/workflows/deploy-pages.yml.sample b/.github/workflows/gh-pages.yml.sample similarity index 95% rename from .github/workflows/deploy-pages.yml.sample rename to .github/workflows/gh-pages.yml.sample index 61f3a3c..ac919a0 100644 --- a/.github/workflows/deploy-pages.yml.sample +++ b/.github/workflows/gh-pages.yml.sample @@ -1,5 +1,5 @@ # If you’d like to deploy this to GitHub pages, rename this -# file to `deploy-pages.yml` and read the mini-tutorial on +# file to `gh-pages.yml` and read the mini-tutorial on # https://www.11ty.dev/docs/deployment/#deploy-an-eleventy-project-to-github-pages name: Deploy to GitHub Pages diff --git a/README.md b/README.md index 7177590..9426f25 100644 --- a/README.md +++ b/README.md @@ -90,10 +90,11 @@ Or you can run [debug mode](https://www.11ty.dev/docs/debugging/) to see all the Deploy this Eleventy site in just a few clicks on these services: -- [Get your own Eleventy web site on Netlify](https://app.netlify.com/start/deploy?repository=https://github.com/11ty/eleventy-base-blog) +- [Deploy this to **Netlify**](https://app.netlify.com/start/deploy?repository=https://github.com/11ty/eleventy-base-blog) +- [Deploy this to **Vercel**](https://vercel.com/import/project?template=11ty%2Feleventy-base-blog) +- Look in `.github/workflows/gh-pages.yml.sample` for information on Deploying to **GitHub Pages**. +- [Try it out on **Stackblitz**](https://stackblitz.com/github/11ty/eleventy-base-blog) - If you run Eleventy locally you can drag your `_site` folder to [`drop.netlify.com`](https://drop.netlify.com/) to upload it without using `git`. -- [Get your own Eleventy web site on Vercel](https://vercel.com/import/project?template=11ty%2Feleventy-base-blog) -- [Try it out on Stackblitz](https://stackblitz.com/github/11ty/eleventy-base-blog) - Read more about [Deploying an Eleventy project](https://www.11ty.dev/docs/deployment/) to the web. ### Implementation Notes From 56d15576a223e83d37503501331cc23598f7f5d5 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Wed, 24 Apr 2024 17:04:24 -0500 Subject: [PATCH 26/99] Updates to use newest alpha release with on-request image optimization during --serve. Cleans up config and data --- README.md | 9 ++--- content/404.md | 1 - content/about/index.md | 1 - content/blog.njk | 1 - content/blog/blog.11tydata.js | 30 ++++++++++++++++ content/content.11tydata.js | 3 ++ content/feed/feed.11tydata.js | 4 +-- content/feed/feed.njk | 3 ++ content/index.njk | 1 - content/{sitemap => }/sitemap.xml.njk | 1 + content/tag-pages.njk | 31 +++++++++-------- content/tags.njk | 5 +-- eleventy.config.drafts.js | 49 --------------------------- eleventy.config.images.js | 20 ----------- eleventy.config.js | 36 +++++++++++--------- package.json | 9 +++-- 16 files changed, 87 insertions(+), 117 deletions(-) create mode 100644 content/content.11tydata.js rename content/{sitemap => }/sitemap.xml.njk (96%) delete mode 100644 eleventy.config.drafts.js delete mode 100644 eleventy.config.images.js diff --git a/README.md b/README.md index 2e3b478..39997b3 100644 --- a/README.md +++ b/README.md @@ -56,20 +56,20 @@ Or you can run [debug mode](https://www.11ty.dev/docs/debugging/) to see all the - _0ms Total Blocking Time_ - Local development live reload provided by [Eleventy Dev Server](https://www.11ty.dev/docs/dev-server/). - Content-driven [navigation menu](https://www.11ty.dev/docs/plugins/navigation/) -- [Image optimization](https://www.11ty.dev/docs/plugins/image/) via the `{% image %}` shortcode. +- Fully automated [Image optimization](https://www.11ty.dev/docs/plugins/image/) - Zero-JavaScript output. - Support for modern image formats automatically (e.g. AVIF and WebP) + - Processes images on-request during `--serve` for speedy local builds. - Prefers `` markup if possible (single image format) but switches automatically to `` for multiple image formats. - Automated `` syntax markup with `srcset` and optional `sizes` - Includes `width`/`height` attributes to avoid [content layout shift](https://web.dev/cls/). - Includes `loading="lazy"` for native lazy loading without JavaScript. - Includes [`decoding="async"`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding) - Images can be co-located with blog post files. - - View the [Image plugin source code](https://github.com/11ty/eleventy-base-blog/blob/main/eleventy.config.images.js) - Per page CSS bundles [via `eleventy-plugin-bundle`](https://github.com/11ty/eleventy-plugin-bundle). - Built-in [syntax highlighter](https://www.11ty.dev/docs/plugins/syntaxhighlight/) (zero-JavaScript output). - Blog Posts - - Draft posts: use `draft: true` to mark a blog post as a draft. Drafts are **only** included during `--serve`/`--watch` and are excluded from full builds. View the [Drafts plugin source code](https://github.com/11ty/eleventy-base-blog/blob/main/eleventy.config.drafts.js). + - Draft posts: use `draft: true` to mark a blog post as a draft. Drafts are **only** included during `--serve`/`--watch` and are excluded from full builds. This is driven by the `eleventyExcludeFromCollections` and `permalink` computed data in the `content/blog/blog.11tydata.js` directory data file. Schema validator will show an error if non-boolean value is set in data cascade. - Automated next/previous links - Accessible deep links to headings - Generated Pages @@ -82,9 +82,10 @@ Or you can run [debug mode](https://www.11ty.dev/docs/debugging/) to see all the ## Demos - [Netlify](https://eleventy-base-blog.netlify.com/) -- [GitHub Pages](https://11ty.github.io/eleventy-base-blog/) - [Remix on Glitch](https://glitch.com/~11ty-eleventy-base-blog) - [Cloudflare Pages](https://eleventy-base-blog-d2a.pages.dev/) +- [GitHub Pages](https://11ty.github.io/eleventy-base-blog/) +- [Vercel](https://eleventy-base-blog-snowy.vercel.app/) ## Deploy this to your own site diff --git a/content/404.md b/content/404.md index c8be2df..358aaa1 100644 --- a/content/404.md +++ b/content/404.md @@ -1,5 +1,4 @@ --- -layout: layouts/home.njk permalink: 404.html eleventyExcludeFromCollections: true --- diff --git a/content/about/index.md b/content/about/index.md index 18367d8..673fc8d 100644 --- a/content/about/index.md +++ b/content/about/index.md @@ -1,5 +1,4 @@ --- -layout: layouts/base.njk eleventyNavigation: key: About Me order: 3 diff --git a/content/blog.njk b/content/blog.njk index c7e04d6..1f7d876 100644 --- a/content/blog.njk +++ b/content/blog.njk @@ -1,5 +1,4 @@ --- -layout: layouts/home.njk eleventyNavigation: key: Archive order: 2 diff --git a/content/blog/blog.11tydata.js b/content/blog/blog.11tydata.js index 614f505..ea58351 100644 --- a/content/blog/blog.11tydata.js +++ b/content/blog/blog.11tydata.js @@ -1,6 +1,36 @@ +import { z } from "zod"; +import { fromZodError } from 'zod-validation-error'; + export default { tags: [ "posts" ], "layout": "layouts/post.njk", + eleventyDataSchema: function(data) { + let result = z.object({ + draft: z.boolean().or(z.undefined()), + }).safeParse(data); + + if(result.error) { + throw fromZodError(result.error); + } + }, + eleventyComputed: { + permalink: (data) => { + // Always skip during non-watch/serve builds + if(data.draft && process.env.ELEVENTY_RUN_MODE === "build") { + return false; + } + + return data.permalink; + }, + eleventyExcludeFromCollections: (data) => { + // Always exclude from non-watch/serve builds + if(data.draft && process.env.ELEVENTY_RUN_MODE === "build") { + return true; + } + + return data.eleventyExcludeFromCollections; + } + } }; diff --git a/content/content.11tydata.js b/content/content.11tydata.js new file mode 100644 index 0000000..8b0bb8e --- /dev/null +++ b/content/content.11tydata.js @@ -0,0 +1,3 @@ +export default { + layout: "layouts/home.njk", +}; diff --git a/content/feed/feed.11tydata.js b/content/feed/feed.11tydata.js index 42ad826..3c76e38 100644 --- a/content/feed/feed.11tydata.js +++ b/content/feed/feed.11tydata.js @@ -1,3 +1,3 @@ export default { - eleventyExcludeFromCollections: true -} + layout: false, +}; diff --git a/content/feed/feed.njk b/content/feed/feed.njk index a47a7e8..f3539e7 100755 --- a/content/feed/feed.njk +++ b/content/feed/feed.njk @@ -1,6 +1,9 @@ --- # Metadata comes from _data/metadata.js permalink: /feed/feed.xml +eleventyNavigation: + key: Feed + order: 3 --- diff --git a/content/index.njk b/content/index.njk index 9d3430a..260b20c 100644 --- a/content/index.njk +++ b/content/index.njk @@ -1,5 +1,4 @@ --- -layout: layouts/home.njk eleventyNavigation: key: Home order: 1 diff --git a/content/sitemap/sitemap.xml.njk b/content/sitemap.xml.njk similarity index 96% rename from content/sitemap/sitemap.xml.njk rename to content/sitemap.xml.njk index 4da684a..ec1716d 100644 --- a/content/sitemap/sitemap.xml.njk +++ b/content/sitemap.xml.njk @@ -1,5 +1,6 @@ --- permalink: /sitemap.xml +layout: false eleventyExcludeFromCollections: true --- diff --git a/content/tag-pages.njk b/content/tag-pages.njk index e5a5f70..9533be9 100644 --- a/content/tag-pages.njk +++ b/content/tag-pages.njk @@ -1,18 +1,19 @@ ---- -pagination: - data: collections - size: 1 - alias: tag - filter: - - all - - post - - posts - - tagList - addAllPagesToCollections: true -layout: layouts/home.njk -eleventyComputed: - title: Tagged “{{ tag }}” -permalink: /tags/{{ tag | slugify }}/ +---node +// diff --git a/eleventy.config.js b/eleventy.config.js index 45326ee..753bba8 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -1,6 +1,4 @@ -import markdownItAnchor from "markdown-it-anchor"; - -import { InputPathToUrlTransformPlugin, HtmlBasePlugin } from "@11ty/eleventy"; +import { IdAttributePlugin, InputPathToUrlTransformPlugin, HtmlBasePlugin } from "@11ty/eleventy"; import { feedPlugin } from "@11ty/eleventy-plugin-rss"; import pluginSyntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight"; import pluginNavigation from "@11ty/eleventy-navigation"; @@ -28,8 +26,8 @@ export default async function(eleventyConfig) { // Per-page bundles, see https://github.com/11ty/eleventy-plugin-bundle // Adds the {% css %} paired shortcode eleventyConfig.addBundle("css"); - // Do you want a {% js %} bundle shortcode too? - // eleventyConfig.addBundle("js"); + // Adds the {% js %} paired shortcode + eleventyConfig.addBundle("js"); // Official plugins eleventyConfig.addPlugin(pluginSyntaxHighlight, { @@ -84,20 +82,27 @@ export default async function(eleventyConfig) { // Filters eleventyConfig.addPlugin(pluginFilters); - // Customize Markdown library settings: - eleventyConfig.amendLibrary("md", mdLib => { - mdLib.use(markdownItAnchor, { - permalink: markdownItAnchor.permalink.ariaHidden({ - placement: "after", - class: "header-anchor", - symbol: "#", - ariaHidden: false, - }), - level: [1,2,3,4], - slugify: eleventyConfig.getFilter("slugify") - }); + eleventyConfig.addPlugin(IdAttributePlugin, { + // by default we use Eleventy’s built-in `slugify` filter: + // slugify: eleventyConfig.getFilter("slugify"), + // default: + // selector: "h1,h2,h3,h4,h5,h6", }); + // Customize Markdown library settings: + // eleventyConfig.amendLibrary("md", mdLib => { + // mdLib.use(markdownItAnchor, { + // permalink: markdownItAnchor.permalink.ariaHidden({ + // placement: "after", + // class: "header-anchor", + // symbol: "#", + // ariaHidden: false, + // }), + // level: [1,2,3,4], + // slugify: eleventyConfig.getFilter("slugify") + // }); + // }); + eleventyConfig.addShortcode("currentBuildDate", () => { return (new Date()).toISOString(); }); diff --git a/package.json b/package.json index ec9f28f..d25756c 100644 --- a/package.json +++ b/package.json @@ -35,14 +35,13 @@ }, "homepage": "https://github.com/11ty/eleventy-base-blog#readme", "devDependencies": { - "@11ty/eleventy": "3.0.0-alpha.16", + "@11ty/eleventy": "3.0.0-alpha.17", "@11ty/eleventy-img": "5.0.0-beta.5", "@11ty/eleventy-navigation": "^0.3.5", "@11ty/eleventy-plugin-rss": "2.0.0-beta.8", "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0", "cross-env": "^7.0.3", "luxon": "^3.4.4", - "markdown-it-anchor": "^8.6.7", "zod": "^3.23.8", "zod-validation-error": "^3.3.0" } diff --git a/public/css/index.css b/public/css/index.css index f38dda1..c48c8e4 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -257,25 +257,25 @@ header { } /* Direct Links / Markdown Headers */ -.header-anchor { +.heading-anchor { text-decoration: none; font-style: normal; font-size: 1em; margin-left: .1em; } -a[href].header-anchor, -a[href].header-anchor:visited { +a[href].heading-anchor, +a[href].heading-anchor:visited { color: transparent; } -a[href].header-anchor:focus, -a[href].header-anchor:hover { +a[href].heading-anchor:focus, +a[href].heading-anchor:hover { text-decoration: underline; } -a[href].header-anchor:focus, -:hover > a[href].header-anchor { +a[href].heading-anchor:focus, +:hover > a[href].heading-anchor { color: #aaa; } -h2 + .header-anchor { +h2 + .heading-anchor { font-size: 1.5em; } diff --git a/public/js/heading-anchors.js b/public/js/heading-anchors.js new file mode 100644 index 0000000..0c1b706 --- /dev/null +++ b/public/js/heading-anchors.js @@ -0,0 +1,37 @@ +// Thank you to https://github.com/daviddarnes/heading-anchors + +class HeadingAnchors extends HTMLElement { + static register(tagName) { + if ("customElements" in window) { + customElements.define(tagName || "heading-anchors", HeadingAnchors); + } + } + + connectedCallback() { + this.headings.forEach((heading) => { + if(!heading.querySelector("a.direct-link") || heading.hasAttribute("data-heading-anchors-optout")) { + heading.append(this.anchor(heading)); + } + }); + } + + anchor(heading) { + // TODO this would be good use case for shadow dom + let anchor = document.createElement("a"); + anchor.setAttribute("data-pagefind-ignore", ""); + anchor.href = `#${heading.id}`; + anchor.classList.add("heading-anchor"); + anchor.innerHTML = ``; + return anchor; + } + + get headings() { + return this.querySelectorAll(this.selector.split(",").map(entry => `${entry.trim()}[id]`)); + } + + get selector() { + return this.getAttribute("selector") || "h1,h2,h3,h4" + } +} + +HeadingAnchors.register(); From eb0e826cd93441e9f5b736f9568e59c6773dd17f Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Tue, 16 Jul 2024 15:46:26 -0500 Subject: [PATCH 45/99] Spacing tweak for heading-anchor --- public/css/index.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/css/index.css b/public/css/index.css index c48c8e4..cd9d0bf 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -256,12 +256,12 @@ header { margin-right: 1em; } -/* Direct Links / Markdown Headers */ +/* Direct Links / Headings */ .heading-anchor { text-decoration: none; font-style: normal; font-size: 1em; - margin-left: .1em; + margin-left: .25em; } a[href].heading-anchor, a[href].heading-anchor:visited { From 90ebe99c52e002787c1bcf7a11652be203dba887 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Thu, 25 Jul 2024 16:06:34 -0500 Subject: [PATCH 46/99] Upgrade dep, housekeeping --- content/blog/blog.11tydata.js | 4 ++++ eleventy.config.js | 14 -------------- package.json | 2 +- 3 files changed, 5 insertions(+), 15 deletions(-) diff --git a/content/blog/blog.11tydata.js b/content/blog/blog.11tydata.js index ea58351..1a1e976 100644 --- a/content/blog/blog.11tydata.js +++ b/content/blog/blog.11tydata.js @@ -6,6 +6,8 @@ export default { "posts" ], "layout": "layouts/post.njk", + + // Draft blog posts, validate `draft` front matter eleventyDataSchema: function(data) { let result = z.object({ draft: z.boolean().or(z.undefined()), @@ -15,6 +17,8 @@ export default { throw fromZodError(result.error); } }, + + // Draft blog posts, exclude from builds and collections eleventyComputed: { permalink: (data) => { // Always skip during non-watch/serve builds diff --git a/eleventy.config.js b/eleventy.config.js index 753bba8..e56ad2d 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -89,20 +89,6 @@ export default async function(eleventyConfig) { // selector: "h1,h2,h3,h4,h5,h6", }); - // Customize Markdown library settings: - // eleventyConfig.amendLibrary("md", mdLib => { - // mdLib.use(markdownItAnchor, { - // permalink: markdownItAnchor.permalink.ariaHidden({ - // placement: "after", - // class: "header-anchor", - // symbol: "#", - // ariaHidden: false, - // }), - // level: [1,2,3,4], - // slugify: eleventyConfig.getFilter("slugify") - // }); - // }); - eleventyConfig.addShortcode("currentBuildDate", () => { return (new Date()).toISOString(); }); diff --git a/package.json b/package.json index d25756c..3752045 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "@11ty/eleventy": "3.0.0-alpha.17", "@11ty/eleventy-img": "5.0.0-beta.5", "@11ty/eleventy-navigation": "^0.3.5", - "@11ty/eleventy-plugin-rss": "2.0.0-beta.8", + "@11ty/eleventy-plugin-rss": "^2.0.2", "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0", "cross-env": "^7.0.3", "luxon": "^3.4.4", From fb94d9a0528388285ee4d458ad5a37279b4feda6 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Tue, 30 Jul 2024 16:47:49 -0500 Subject: [PATCH 47/99] Update deps --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 3752045..de08ca6 100644 --- a/package.json +++ b/package.json @@ -35,8 +35,8 @@ }, "homepage": "https://github.com/11ty/eleventy-base-blog#readme", "devDependencies": { - "@11ty/eleventy": "3.0.0-alpha.17", - "@11ty/eleventy-img": "5.0.0-beta.5", + "@11ty/eleventy": "3.0.0-alpha.18", + "@11ty/eleventy-img": "5.0.0-beta.9", "@11ty/eleventy-navigation": "^0.3.5", "@11ty/eleventy-plugin-rss": "^2.0.2", "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0", From abcb5d723d0c24308ddaaeb203d842f5a3636a12 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Wed, 31 Jul 2024 15:42:28 -0500 Subject: [PATCH 48/99] Upgrade to 3.0 beta --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index de08ca6..5f7c21e 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ }, "homepage": "https://github.com/11ty/eleventy-base-blog#readme", "devDependencies": { - "@11ty/eleventy": "3.0.0-alpha.18", + "@11ty/eleventy": "^3.0.0-beta.1", "@11ty/eleventy-img": "5.0.0-beta.9", "@11ty/eleventy-navigation": "^0.3.5", "@11ty/eleventy-plugin-rss": "^2.0.2", From c69813304412f07062c7ce4cc34bffd67640c4a1 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Sat, 3 Aug 2024 19:56:43 -0500 Subject: [PATCH 49/99] Update Node version! --- .nvmrc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.nvmrc b/.nvmrc index b6a7d89..209e3ef 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -16 +20 From b3351bd600f8838fbcf060ec73401be26ae68954 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Thu, 8 Aug 2024 15:01:03 -0500 Subject: [PATCH 50/99] CI From 5ca43c3568122451b47e0460469f0799c9cf46a0 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Thu, 8 Aug 2024 15:28:59 -0500 Subject: [PATCH 51/99] Allow heading to take focus from anchor link --- public/js/heading-anchors.js | 1 + 1 file changed, 1 insertion(+) diff --git a/public/js/heading-anchors.js b/public/js/heading-anchors.js index 0c1b706..ea9d6cd 100644 --- a/public/js/heading-anchors.js +++ b/public/js/heading-anchors.js @@ -11,6 +11,7 @@ class HeadingAnchors extends HTMLElement { this.headings.forEach((heading) => { if(!heading.querySelector("a.direct-link") || heading.hasAttribute("data-heading-anchors-optout")) { heading.append(this.anchor(heading)); + heading.setAttribute("tabindex", "-1"); } }); } From b5a00fd77607cce83952c0e9c0969e506c41a310 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Fri, 9 Aug 2024 15:48:14 -0500 Subject: [PATCH 52/99] Updates to heading-anchors for accessibility. --- content/blog/thirdpost.md | 2 +- public/css/index.css | 23 ------------- public/js/heading-anchors.js | 64 ++++++++++++++++++++++++++++++++---- 3 files changed, 58 insertions(+), 31 deletions(-) diff --git a/content/blog/thirdpost.md b/content/blog/thirdpost.md index bdea878..7241473 100644 --- a/content/blog/thirdpost.md +++ b/content/blog/thirdpost.md @@ -25,7 +25,7 @@ function myCommand() { console.log('Test'); ``` -### Unstyled +### Heading with a [link](#code) Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring. diff --git a/public/css/index.css b/public/css/index.css index cd9d0bf..b75d493 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -256,26 +256,3 @@ header { margin-right: 1em; } -/* Direct Links / Headings */ -.heading-anchor { - text-decoration: none; - font-style: normal; - font-size: 1em; - margin-left: .25em; -} -a[href].heading-anchor, -a[href].heading-anchor:visited { - color: transparent; -} -a[href].heading-anchor:focus, -a[href].heading-anchor:hover { - text-decoration: underline; -} -a[href].heading-anchor:focus, -:hover > a[href].heading-anchor { - color: #aaa; -} - -h2 + .heading-anchor { - font-size: 1.5em; -} diff --git a/public/js/heading-anchors.js b/public/js/heading-anchors.js index ea9d6cd..03134af 100644 --- a/public/js/heading-anchors.js +++ b/public/js/heading-anchors.js @@ -1,4 +1,5 @@ // Thank you to https://github.com/daviddarnes/heading-anchors +// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/#what-are-anchor-links-exactly%3F class HeadingAnchors extends HTMLElement { static register(tagName) { @@ -7,22 +8,71 @@ class HeadingAnchors extends HTMLElement { } } + static defaultSelector = "h2,h3,h4"; + + static featureTest() { + return "replaceSync" in CSSStyleSheet.prototype; + } + + static css = ` +.heading-anchor { + text-decoration: none; +} +/* For headings that already have links */ +:is(h1, h2, h3, h4, h5, h6):has(a[href]:not(.heading-anchor)):is(:hover, :focus-within) .heading-anchor:after { + content: "#"; + content: "#" / ""; +} +.heading-anchor:focus:after, +.heading-anchor:hover:after { + content: "#"; + content: "#" / ""; +} +.heading-anchor:after { + margin-left: .25em; + color: #aaa; +}`; + + constructor() { + if (!HeadingAnchors.featureTest()) { + return; + } + + super(); + + let sheet = new CSSStyleSheet(); + sheet.replaceSync(HeadingAnchors.css); + document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet]; + } + connectedCallback() { + if (!HeadingAnchors.featureTest()) { + return; + } + this.headings.forEach((heading) => { - if(!heading.querySelector("a.direct-link") || heading.hasAttribute("data-heading-anchors-optout")) { - heading.append(this.anchor(heading)); - heading.setAttribute("tabindex", "-1"); + if(!heading.hasAttribute("data-heading-anchors-optout")) { + let anchor = this.getAnchorElement(heading); + if(heading.querySelector(":scope a[href]")) { + // Fallback if the heading already has a link + anchor.setAttribute("aria-label", `Jump to section: ${heading.textContent}`); + heading.appendChild(anchor); + } else { + // entire heading is a link + for(let child of heading.childNodes) { + anchor.appendChild(child); + } + heading.appendChild(anchor); + } } }); } - anchor(heading) { - // TODO this would be good use case for shadow dom + getAnchorElement(heading) { let anchor = document.createElement("a"); anchor.setAttribute("data-pagefind-ignore", ""); anchor.href = `#${heading.id}`; anchor.classList.add("heading-anchor"); - anchor.innerHTML = ``; return anchor; } @@ -31,7 +81,7 @@ class HeadingAnchors extends HTMLElement { } get selector() { - return this.getAttribute("selector") || "h1,h2,h3,h4" + return this.getAttribute("selector") || HeadingAnchors.defaultSelector; } } From c87bda3621ddb2772097793fc159df3d288215ef Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Fri, 9 Aug 2024 16:38:07 -0500 Subject: [PATCH 53/99] Fix issue with anchor links reflowing --- eleventy.config.js | 3 +-- public/js/heading-anchors.js | 10 +++++----- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/eleventy.config.js b/eleventy.config.js index e56ad2d..350ac9a 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -85,8 +85,7 @@ export default async function(eleventyConfig) { eleventyConfig.addPlugin(IdAttributePlugin, { // by default we use Eleventy’s built-in `slugify` filter: // slugify: eleventyConfig.getFilter("slugify"), - // default: - // selector: "h1,h2,h3,h4,h5,h6", + // selector: "h1,h2,h3,h4,h5,h6", // default }); eleventyConfig.addShortcode("currentBuildDate", () => { diff --git a/public/js/heading-anchors.js b/public/js/heading-anchors.js index 03134af..67debf6 100644 --- a/public/js/heading-anchors.js +++ b/public/js/heading-anchors.js @@ -20,17 +20,18 @@ class HeadingAnchors extends HTMLElement { } /* For headings that already have links */ :is(h1, h2, h3, h4, h5, h6):has(a[href]:not(.heading-anchor)):is(:hover, :focus-within) .heading-anchor:after { - content: "#"; - content: "#" / ""; + opacity: 1; } .heading-anchor:focus:after, .heading-anchor:hover:after { - content: "#"; - content: "#" / ""; + opacity: 1; } .heading-anchor:after { + content: "#"; + content: "#" / ""; margin-left: .25em; color: #aaa; + opacity: 0; }`; constructor() { @@ -70,7 +71,6 @@ class HeadingAnchors extends HTMLElement { getAnchorElement(heading) { let anchor = document.createElement("a"); - anchor.setAttribute("data-pagefind-ignore", ""); anchor.href = `#${heading.id}`; anchor.classList.add("heading-anchor"); return anchor; From cdd2fd7a424342ba1804a0ce984c70a1a9f652e9 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Mon, 26 Aug 2024 14:53:52 -0500 Subject: [PATCH 54/99] Upgrade accessibility of heading-anchors component to prefer sibling links (if anchor position available) --- public/css/index.css | 4 ++ public/js/heading-anchors.js | 106 ++++++++++++++++++++++++----------- 2 files changed, 78 insertions(+), 32 deletions(-) diff --git a/public/css/index.css b/public/css/index.css index b75d493..00f39b5 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -256,3 +256,7 @@ header { margin-right: 1em; } +/* Anchor links color */ +a[href]:is(:link, :visited).heading-a { + color: #aaa; +} diff --git a/public/js/heading-anchors.js b/public/js/heading-anchors.js index 67debf6..e630072 100644 --- a/public/js/heading-anchors.js +++ b/public/js/heading-anchors.js @@ -1,5 +1,5 @@ // Thank you to https://github.com/daviddarnes/heading-anchors -// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/#what-are-anchor-links-exactly%3F +// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/ class HeadingAnchors extends HTMLElement { static register(tagName) { @@ -8,61 +8,97 @@ class HeadingAnchors extends HTMLElement { } } + static attributes = { + exclude: "data-heading-anchors-exclude" + }; + + static classes = { + anchor: "heading-a", + heading: "heading-a-h", // only used for nested method + } + static defaultSelector = "h2,h3,h4"; static featureTest() { - return "replaceSync" in CSSStyleSheet.prototype; + return ; } static css = ` -.heading-anchor { +.${HeadingAnchors.classes.anchor} { text-decoration: none; -} -/* For headings that already have links */ -:is(h1, h2, h3, h4, h5, h6):has(a[href]:not(.heading-anchor)):is(:hover, :focus-within) .heading-anchor:after { - opacity: 1; -} -.heading-anchor:focus:after, -.heading-anchor:hover:after { - opacity: 1; -} -.heading-anchor:after { - content: "#"; - content: "#" / ""; - margin-left: .25em; - color: #aaa; + font-weight: 400; opacity: 0; + transition: opacity .15s; + padding-left: .25em; + padding-right: .25em; +} +/* nested */ +:is(h1,h2,h3,h4,h5,h6):is(:focus, :hover) .${HeadingAnchors.classes.anchor}, +/* sibling */ +:is(h1,h2,h3,h4,h5,h6) + .${HeadingAnchors.classes.anchor}:is(:focus, :hover), +:is(h1,h2,h3,h4,h5,h6):is(:focus,:hover) + .${HeadingAnchors.classes.anchor} { + opacity: 1; +} +@supports not (anchor-name: none) { + .${HeadingAnchors.classes.heading} { + position: relative; + } + .${HeadingAnchors.classes.anchor} { + position: absolute; + left: 0; + transform: translateX(-100%); + } +} +@supports (anchor-name: none) { + .${HeadingAnchors.classes.anchor} { + position: absolute; + right: anchor(left); + top: anchor(top); + } }`; + get supportsTest() { + return "replaceSync" in CSSStyleSheet.prototype; + } + + get supportsAnchorPosition() { + return CSS.supports("anchor-name: none"); + } + constructor() { - if (!HeadingAnchors.featureTest()) { + super(); + + if(!this.supportsTest) { return; } - super(); - let sheet = new CSSStyleSheet(); sheet.replaceSync(HeadingAnchors.css); document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet]; } connectedCallback() { - if (!HeadingAnchors.featureTest()) { + if (!this.supportsTest) { return; } - this.headings.forEach((heading) => { - if(!heading.hasAttribute("data-heading-anchors-optout")) { + this.headings.forEach((heading, index) => { + if(!heading.hasAttribute(HeadingAnchors.attributes.exclude)) { let anchor = this.getAnchorElement(heading); - if(heading.querySelector(":scope a[href]")) { - // Fallback if the heading already has a link - anchor.setAttribute("aria-label", `Jump to section: ${heading.textContent}`); - heading.appendChild(anchor); + + // Prefers anchor position approach for better accessibility + // https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/ + if(this.supportsAnchorPosition) { + let anchorName = `--h-a_${index}`; + heading.style.anchorName = anchorName; + anchor.style.positionAnchor = anchorName; + + let fontSize = parseInt(getComputedStyle(heading).getPropertyValue("font-size"), 10); + anchor.style.fontSize = `${(fontSize / 16).toFixed(3)}em`; + + heading.after(anchor); } else { - // entire heading is a link - for(let child of heading.childNodes) { - anchor.appendChild(child); - } + heading.classList.add(HeadingAnchors.classes.heading); heading.appendChild(anchor); } } @@ -72,7 +108,13 @@ class HeadingAnchors extends HTMLElement { getAnchorElement(heading) { let anchor = document.createElement("a"); anchor.href = `#${heading.id}`; - anchor.classList.add("heading-anchor"); + anchor.classList.add(HeadingAnchors.classes.anchor); + if(this.supportsAnchorPosition) { + anchor.innerHTML = ``; + } else { + anchor.innerHTML = ``; + } + return anchor; } From 6f64905ca6f428521b1e6607f43140d8f41efaf6 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Mon, 26 Aug 2024 15:06:38 -0500 Subject: [PATCH 55/99] Swap to focus-within for focus styles in FF --- public/js/heading-anchors.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/public/js/heading-anchors.js b/public/js/heading-anchors.js index e630072..f0bdccd 100644 --- a/public/js/heading-anchors.js +++ b/public/js/heading-anchors.js @@ -33,10 +33,10 @@ class HeadingAnchors extends HTMLElement { padding-right: .25em; } /* nested */ -:is(h1,h2,h3,h4,h5,h6):is(:focus, :hover) .${HeadingAnchors.classes.anchor}, +:is(h1,h2,h3,h4,h5,h6):is(:focus-within, :hover) .${HeadingAnchors.classes.anchor}, /* sibling */ -:is(h1,h2,h3,h4,h5,h6) + .${HeadingAnchors.classes.anchor}:is(:focus, :hover), -:is(h1,h2,h3,h4,h5,h6):is(:focus,:hover) + .${HeadingAnchors.classes.anchor} { +:is(h1,h2,h3,h4,h5,h6) + .${HeadingAnchors.classes.anchor}:is(:focus-within, :hover), +:is(h1,h2,h3,h4,h5,h6):is(:focus-within, :hover) + .${HeadingAnchors.classes.anchor} { opacity: 1; } @supports not (anchor-name: none) { From f7d1e3d2eeb8dd4b81bdba231a6a96663c976633 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Mon, 26 Aug 2024 16:44:53 -0500 Subject: [PATCH 56/99] A few minor cleanup tweaks to heading-anchors --- public/js/heading-anchors.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/public/js/heading-anchors.js b/public/js/heading-anchors.js index f0bdccd..5eff13f 100644 --- a/public/js/heading-anchors.js +++ b/public/js/heading-anchors.js @@ -10,7 +10,7 @@ class HeadingAnchors extends HTMLElement { static attributes = { exclude: "data-heading-anchors-exclude" - }; + } static classes = { anchor: "heading-a", @@ -25,6 +25,7 @@ class HeadingAnchors extends HTMLElement { static css = ` .${HeadingAnchors.classes.anchor} { + position: absolute; text-decoration: none; font-weight: 400; opacity: 0; @@ -44,14 +45,12 @@ class HeadingAnchors extends HTMLElement { position: relative; } .${HeadingAnchors.classes.anchor} { - position: absolute; left: 0; transform: translateX(-100%); } } @supports (anchor-name: none) { .${HeadingAnchors.classes.anchor} { - position: absolute; right: anchor(left); top: anchor(top); } @@ -89,12 +88,12 @@ class HeadingAnchors extends HTMLElement { // Prefers anchor position approach for better accessibility // https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/ if(this.supportsAnchorPosition) { - let anchorName = `--h-a_${index}`; + let anchorName = `--ha_${index}`; heading.style.anchorName = anchorName; anchor.style.positionAnchor = anchorName; let fontSize = parseInt(getComputedStyle(heading).getPropertyValue("font-size"), 10); - anchor.style.fontSize = `${(fontSize / 16).toFixed(3)}em`; + anchor.style.fontSize = `${fontSize / 16}em`; heading.after(anchor); } else { From dc5ab2ef6372de744be5484ada4958a4342073ea Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Mon, 26 Aug 2024 16:56:02 -0500 Subject: [PATCH 57/99] Move to position anchor after the heading to simplify base use case (no relative positioning at all) --- public/js/heading-anchors.js | 23 ++++++++++------------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/public/js/heading-anchors.js b/public/js/heading-anchors.js index 5eff13f..834ccfa 100644 --- a/public/js/heading-anchors.js +++ b/public/js/heading-anchors.js @@ -17,7 +17,7 @@ class HeadingAnchors extends HTMLElement { heading: "heading-a-h", // only used for nested method } - static defaultSelector = "h2,h3,h4"; + static defaultSelector = "h2,h3,h4,h5,h6"; static featureTest() { return ; @@ -33,6 +33,7 @@ class HeadingAnchors extends HTMLElement { padding-left: .25em; padding-right: .25em; } + /* nested */ :is(h1,h2,h3,h4,h5,h6):is(:focus-within, :hover) .${HeadingAnchors.classes.anchor}, /* sibling */ @@ -40,18 +41,14 @@ class HeadingAnchors extends HTMLElement { :is(h1,h2,h3,h4,h5,h6):is(:focus-within, :hover) + .${HeadingAnchors.classes.anchor} { opacity: 1; } -@supports not (anchor-name: none) { - .${HeadingAnchors.classes.heading} { - position: relative; - } - .${HeadingAnchors.classes.anchor} { - left: 0; - transform: translateX(-100%); - } -} @supports (anchor-name: none) { + /* purely for anchoring */ + .${HeadingAnchors.classes.heading}:after { + content: ""; + anchor-name: var(--ha_anchor); + } .${HeadingAnchors.classes.anchor} { - right: anchor(left); + left: anchor(right); top: anchor(top); } }`; @@ -89,15 +86,15 @@ class HeadingAnchors extends HTMLElement { // https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/ if(this.supportsAnchorPosition) { let anchorName = `--ha_${index}`; - heading.style.anchorName = anchorName; + heading.style.setProperty("--ha_anchor", anchorName); anchor.style.positionAnchor = anchorName; let fontSize = parseInt(getComputedStyle(heading).getPropertyValue("font-size"), 10); anchor.style.fontSize = `${fontSize / 16}em`; + heading.classList.add(HeadingAnchors.classes.heading); heading.after(anchor); } else { - heading.classList.add(HeadingAnchors.classes.heading); heading.appendChild(anchor); } } From 2b40c3c7a43d3d211d534e9e238b2bbf059e93ee Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Mon, 26 Aug 2024 17:23:06 -0500 Subject: [PATCH 58/99] Copy tweaks --- _includes/layouts/home.njk | 4 ++-- content/blog/fourthpost/fourthpost.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/_includes/layouts/home.njk b/_includes/layouts/home.njk index cfb97f6..6e75d04 100644 --- a/_includes/layouts/home.njk +++ b/_includes/layouts/home.njk @@ -1,11 +1,11 @@ --- layout: layouts/base.njk --- - + {%- css %}{% include "public/css/message-box.css" %}{% endcss %}
    -
  1. Edit the _data/metadata.js with your blog’s information.
    2. +
  2. Edit _data/metadata.js with your blog’s information.
  3. (Optional) Edit eleventy.config.js with your configuration preferences.
  4. Delete this message from _includes/layouts/home.njk.
diff --git a/content/blog/fourthpost/fourthpost.md b/content/blog/fourthpost/fourthpost.md index 8307e7b..776583a 100644 --- a/content/blog/fourthpost/fourthpost.md +++ b/content/blog/fourthpost/fourthpost.md @@ -1,5 +1,5 @@ --- -title: This is my fourth post! +title: This is my fourth post description: This is a post on My Blog about touchpoints and circling wagons. date: 2018-09-30 tags: second tag From 2df6143099c2457138e3e5b5dc9b30428fb3e14a Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Mon, 26 Aug 2024 17:33:39 -0500 Subject: [PATCH 59/99] Tweak to class names, allow override text content --- public/css/index.css | 2 +- public/js/heading-anchors.js | 17 ++++++++++++----- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/public/css/index.css b/public/css/index.css index 00f39b5..34799a2 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -257,6 +257,6 @@ header { } /* Anchor links color */ -a[href]:is(:link, :visited).heading-a { +a[href]:is(:link, :visited).ha { color: #aaa; } diff --git a/public/js/heading-anchors.js b/public/js/heading-anchors.js index 834ccfa..0b3b6d5 100644 --- a/public/js/heading-anchors.js +++ b/public/js/heading-anchors.js @@ -9,12 +9,13 @@ class HeadingAnchors extends HTMLElement { } static attributes = { - exclude: "data-heading-anchors-exclude" + exclude: "data-ha-exclude", + content: "data-ha-text" } static classes = { - anchor: "heading-a", - heading: "heading-a-h", // only used for nested method + anchor: "ha", + heading: "ha-h", // only used for nested method } static defaultSelector = "h2,h3,h4,h5,h6"; @@ -101,14 +102,20 @@ class HeadingAnchors extends HTMLElement { }); } + getText(heading) { + return heading.getAttribute(HeadingAnchors.attributes.content) || "#"; + } + getAnchorElement(heading) { let anchor = document.createElement("a"); anchor.href = `#${heading.id}`; anchor.classList.add(HeadingAnchors.classes.anchor); + + let text = this.getText(heading); if(this.supportsAnchorPosition) { - anchor.innerHTML = ``; + anchor.innerHTML = ``; } else { - anchor.innerHTML = ``; + anchor.innerHTML = ``; } return anchor; From d791163e123ee1f632859fd3bce9a56eee3cd8b5 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Thu, 29 Aug 2024 15:28:33 -0500 Subject: [PATCH 60/99] Swap to use zachleat/heading-anchors for heading anchor links. --- _includes/layouts/base.njk | 2 +- content/blog/thirdpost.md | 2 +- package.json | 3 + public/css/index.css | 4 -- public/js/heading-anchors.js | 133 ----------------------------------- 5 files changed, 5 insertions(+), 139 deletions(-) delete mode 100644 public/js/heading-anchors.js diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk index 8b7eea6..6e6eddd 100644 --- a/_includes/layouts/base.njk +++ b/_includes/layouts/base.njk @@ -33,7 +33,7 @@ {#- Renders the CSS bundle using a separate file, if you can't set CSP directive style-src: 'unsafe-inline' #} {#- #} - {%- js %}{% include "public/js/heading-anchors.js" %}{% endjs %} + {%- js %}{% include "node_modules/@zachleat/heading-anchors/heading-anchors.js" %}{% endjs %} diff --git a/content/blog/thirdpost.md b/content/blog/thirdpost.md index 7241473..e333b46 100644 --- a/content/blog/thirdpost.md +++ b/content/blog/thirdpost.md @@ -10,7 +10,7 @@ Leverage agile frameworks to provide a robust synopsis for high level overviews. ## Code -### Styled (with Syntax) +### This is a very long heading that I want to wrap This is a very long heading that I want to wrap This is a very long heading that I want to wrap This is a very long heading that I want to wrap Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring. diff --git a/package.json b/package.json index 5f7c21e..0881e8a 100644 --- a/package.json +++ b/package.json @@ -44,5 +44,8 @@ "luxon": "^3.4.4", "zod": "^3.23.8", "zod-validation-error": "^3.3.0" + }, + "dependencies": { + "@zachleat/heading-anchors": "^1.0.0" } } diff --git a/public/css/index.css b/public/css/index.css index 34799a2..b75d493 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -256,7 +256,3 @@ header { margin-right: 1em; } -/* Anchor links color */ -a[href]:is(:link, :visited).ha { - color: #aaa; -} diff --git a/public/js/heading-anchors.js b/public/js/heading-anchors.js deleted file mode 100644 index 0b3b6d5..0000000 --- a/public/js/heading-anchors.js +++ /dev/null @@ -1,133 +0,0 @@ -// Thank you to https://github.com/daviddarnes/heading-anchors -// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/ - -class HeadingAnchors extends HTMLElement { - static register(tagName) { - if ("customElements" in window) { - customElements.define(tagName || "heading-anchors", HeadingAnchors); - } - } - - static attributes = { - exclude: "data-ha-exclude", - content: "data-ha-text" - } - - static classes = { - anchor: "ha", - heading: "ha-h", // only used for nested method - } - - static defaultSelector = "h2,h3,h4,h5,h6"; - - static featureTest() { - return ; - } - - static css = ` -.${HeadingAnchors.classes.anchor} { - position: absolute; - text-decoration: none; - font-weight: 400; - opacity: 0; - transition: opacity .15s; - padding-left: .25em; - padding-right: .25em; -} - -/* nested */ -:is(h1,h2,h3,h4,h5,h6):is(:focus-within, :hover) .${HeadingAnchors.classes.anchor}, -/* sibling */ -:is(h1,h2,h3,h4,h5,h6) + .${HeadingAnchors.classes.anchor}:is(:focus-within, :hover), -:is(h1,h2,h3,h4,h5,h6):is(:focus-within, :hover) + .${HeadingAnchors.classes.anchor} { - opacity: 1; -} -@supports (anchor-name: none) { - /* purely for anchoring */ - .${HeadingAnchors.classes.heading}:after { - content: ""; - anchor-name: var(--ha_anchor); - } - .${HeadingAnchors.classes.anchor} { - left: anchor(right); - top: anchor(top); - } -}`; - - get supportsTest() { - return "replaceSync" in CSSStyleSheet.prototype; - } - - get supportsAnchorPosition() { - return CSS.supports("anchor-name: none"); - } - - constructor() { - super(); - - if(!this.supportsTest) { - return; - } - - let sheet = new CSSStyleSheet(); - sheet.replaceSync(HeadingAnchors.css); - document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet]; - } - - connectedCallback() { - if (!this.supportsTest) { - return; - } - - this.headings.forEach((heading, index) => { - if(!heading.hasAttribute(HeadingAnchors.attributes.exclude)) { - let anchor = this.getAnchorElement(heading); - - // Prefers anchor position approach for better accessibility - // https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/ - if(this.supportsAnchorPosition) { - let anchorName = `--ha_${index}`; - heading.style.setProperty("--ha_anchor", anchorName); - anchor.style.positionAnchor = anchorName; - - let fontSize = parseInt(getComputedStyle(heading).getPropertyValue("font-size"), 10); - anchor.style.fontSize = `${fontSize / 16}em`; - - heading.classList.add(HeadingAnchors.classes.heading); - heading.after(anchor); - } else { - heading.appendChild(anchor); - } - } - }); - } - - getText(heading) { - return heading.getAttribute(HeadingAnchors.attributes.content) || "#"; - } - - getAnchorElement(heading) { - let anchor = document.createElement("a"); - anchor.href = `#${heading.id}`; - anchor.classList.add(HeadingAnchors.classes.anchor); - - let text = this.getText(heading); - if(this.supportsAnchorPosition) { - anchor.innerHTML = ``; - } else { - anchor.innerHTML = ``; - } - - return anchor; - } - - get headings() { - return this.querySelectorAll(this.selector.split(",").map(entry => `${entry.trim()}[id]`)); - } - - get selector() { - return this.getAttribute("selector") || HeadingAnchors.defaultSelector; - } -} - -HeadingAnchors.register(); From ff7ca75a786e71166dac9ec08506df019f2f72ea Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Fri, 30 Aug 2024 10:33:12 -0500 Subject: [PATCH 61/99] Update dep --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0881e8a..f4d5b13 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,6 @@ "zod-validation-error": "^3.3.0" }, "dependencies": { - "@zachleat/heading-anchors": "^1.0.0" + "@zachleat/heading-anchors": "^1.0.1" } } From ca8c6893ccdd04f4728be12c9f8640ebf9c5ae41 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Thu, 5 Sep 2024 11:25:06 -0500 Subject: [PATCH 62/99] Upgrade dependencies --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index f4d5b13..337e197 100644 --- a/package.json +++ b/package.json @@ -35,15 +35,15 @@ }, "homepage": "https://github.com/11ty/eleventy-base-blog#readme", "devDependencies": { - "@11ty/eleventy": "^3.0.0-beta.1", + "@11ty/eleventy": "3.0.0-alpha.19", "@11ty/eleventy-img": "5.0.0-beta.9", "@11ty/eleventy-navigation": "^0.3.5", "@11ty/eleventy-plugin-rss": "^2.0.2", "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0", "cross-env": "^7.0.3", - "luxon": "^3.4.4", + "luxon": "^3.5.0", "zod": "^3.23.8", - "zod-validation-error": "^3.3.0" + "zod-validation-error": "^3.3.1" }, "dependencies": { "@zachleat/heading-anchors": "^1.0.1" From e23efa3569aa0ad1bf01bf6818c39e19e4ee49ef Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Thu, 5 Sep 2024 16:07:41 -0500 Subject: [PATCH 63/99] Adds barebones View Transition API --- public/css/index.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/public/css/index.css b/public/css/index.css index b75d493..1cfa083 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -41,6 +41,10 @@ box-sizing: border-box; } +@view-transition { + navigation: auto; +} + html, body { padding: 0; From ffa7c673cd4b9fb999596e97dc8b5b11073fa594 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Thu, 5 Sep 2024 16:10:34 -0500 Subject: [PATCH 64/99] Change the sample CSS string --- _includes/layouts/base.njk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk index 6e6eddd..00c55c6 100644 --- a/_includes/layouts/base.njk +++ b/_includes/layouts/base.njk @@ -22,7 +22,7 @@ #} {#- Add an arbitrary string to the bundle #} - {%- css %}* { box-sizing: border-box; }{% endcss %} + {%- css %}/* This is an arbitrary CSS string added to the bundle */{% endcss %} {#- Add the contents of a file to the bundle #} {%- css %}{% include "public/css/index.css" %}{% endcss %} {#- Or add from node_modules #} From 5eca0a303525922b8a5a46b595d106218fd306ae Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Wed, 11 Sep 2024 16:14:43 -0500 Subject: [PATCH 65/99] Upgrade deps, tweaks to bundle comments --- _includes/layouts/base.njk | 18 +++++++++++------- _includes/layouts/post.njk | 2 +- eleventy.config.js | 11 +++++++---- package.json | 2 +- 4 files changed, 20 insertions(+), 13 deletions(-) diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk index 00c55c6..537f398 100644 --- a/_includes/layouts/base.njk +++ b/_includes/layouts/base.njk @@ -14,25 +14,29 @@ {#- #} {#- - CSS bundles are provided via the `eleventy-plugin-bundle` plugin: - 1. You can add to them using `{% css %}` - 2. You can get from them using `{% getBundle "css" %}` or `{% getBundleFileUrl "css" %}` - 3. You can do the same for JS: {% js %}{% endjs %} and - 4. Learn more: https://github.com/11ty/eleventy-plugin-bundle + Plain-text bundles are provided via the `eleventy-plugin-bundle` plugin: + 1. CSS: + * Add to a per-page bundle using `{% css %}{% endcss %}` + * Retrieve bundle content using `{% getBundle "css" %}` or `{% getBundleFileUrl "css" %}` + 2. Or for JavaScript: + * Add to a per-page bundle using `{% js %}{% endjs %}` + * Retrieve via `{% getBundle "js" %}` or `{% getBundleFileUrl "js" %}` + 3. Learn more: https://github.com/11ty/eleventy-plugin-bundle #} {#- Add an arbitrary string to the bundle #} {%- css %}/* This is an arbitrary CSS string added to the bundle */{% endcss %} {#- Add the contents of a file to the bundle #} {%- css %}{% include "public/css/index.css" %}{% endcss %} - {#- Or add from node_modules #} + {#- Or you can add from node_modules #} {# {%- css %}{% include "node_modules/prismjs/themes/prism-okaidia.css" %}{% endcss %} #} - {#- Render the CSS bundle using Inlined CSS (for the fastest site performance in production) #} + {#- Render the CSS bundle using inlined CSS (for the fastest site performance in production) #} {#- Renders the CSS bundle using a separate file, if you can't set CSP directive style-src: 'unsafe-inline' #} {#- #} + {#- Add the heading-anchors web component to the JavaScript bundle #} {%- js %}{% include "node_modules/@zachleat/heading-anchors/heading-anchors.js" %}{% endjs %} diff --git a/_includes/layouts/post.njk b/_includes/layouts/post.njk index 78166f3..d1827cf 100644 --- a/_includes/layouts/post.njk +++ b/_includes/layouts/post.njk @@ -1,7 +1,7 @@ --- layout: layouts/base.njk --- -{# Only include the syntax highlighter CSS on blog posts #} +{# Only include the syntax highlighter CSS on blog posts, included with the CSS per-page bundle #} {%- css %}{% include "node_modules/prismjs/themes/prism-okaidia.css" %}{% endcss %} {%- css %}{% include "public/css/prism-diff.css" %}{%- endcss %}

{{ title }}

diff --git a/eleventy.config.js b/eleventy.config.js index 350ac9a..c73e75e 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -12,8 +12,7 @@ export default async function(eleventyConfig) { // For example, `./public/css/` ends up in `_site/css/` eleventyConfig .addPassthroughCopy({ - "./public/": "/", - "./node_modules/prismjs/themes/prism-okaidia.css": "/css/prism-okaidia.css" + "./public/": "/" }) .addPassthroughCopy("./content/feed/pretty-atom-feed.xsl"); @@ -25,9 +24,13 @@ export default async function(eleventyConfig) { // Per-page bundles, see https://github.com/11ty/eleventy-plugin-bundle // Adds the {% css %} paired shortcode - eleventyConfig.addBundle("css"); + eleventyConfig.addBundle("css", { + toFileDirectory: "dist", + }); // Adds the {% js %} paired shortcode - eleventyConfig.addBundle("js"); + eleventyConfig.addBundle("js", { + toFileDirectory: "dist", + }); // Official plugins eleventyConfig.addPlugin(pluginSyntaxHighlight, { diff --git a/package.json b/package.json index 337e197..ba2f26d 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ }, "homepage": "https://github.com/11ty/eleventy-base-blog#readme", "devDependencies": { - "@11ty/eleventy": "3.0.0-alpha.19", + "@11ty/eleventy": "3.0.0-alpha.20", "@11ty/eleventy-img": "5.0.0-beta.9", "@11ty/eleventy-navigation": "^0.3.5", "@11ty/eleventy-plugin-rss": "^2.0.2", From 4fad5c688899f555b58207ce77e448fa3b06ed13 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Wed, 11 Sep 2024 16:15:15 -0500 Subject: [PATCH 66/99] Remove Netlify plugins --- netlify.toml | 21 --------------------- 1 file changed, 21 deletions(-) diff --git a/netlify.toml b/netlify.toml index 5a8db0f..1bc23a7 100644 --- a/netlify.toml +++ b/netlify.toml @@ -1,24 +1,3 @@ [build] publish = "_site" command = "npm run build" - -[[plugins]] - - # Opt-in to the Netlify Lighthouse plugin (choose one): - - # 1. Go to your site on https://app.netlify.com and navigate to the Integrations tab, search for the `Lighthouse` plugin - # 2. Or via `npm install -D @netlify/plugin-lighthouse` - - # Read more: https://github.com/netlify/netlify-plugin-lighthouse - - package = "@netlify/plugin-lighthouse" - - # optional, fails build when a category is below a threshold - [plugins.inputs.thresholds] - performance = 1.0 - accessibility = 1.0 - best-practices = 1.0 - seo = 1.0 - - [plugins.inputs] - output_path = "reports/lighthouse/index.html" From 1ad494cfd2cbd80c4315c5698cfe91f136c91790 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Wed, 11 Sep 2024 16:34:56 -0500 Subject: [PATCH 67/99] Mitigate #171 by using `js` front matter type instead of YAML. --- content/about/index.md | 9 +++++---- content/blog.njk | 9 +++++---- content/blog/firstpost.md | 3 +-- content/blog/secondpost.md | 3 +-- content/blog/thirdpost.md | 4 +--- content/index.njk | 12 +++++++----- 6 files changed, 20 insertions(+), 20 deletions(-) diff --git a/content/about/index.md b/content/about/index.md index 8c673a8..fba58a9 100644 --- a/content/about/index.md +++ b/content/about/index.md @@ -1,7 +1,8 @@ ---- -eleventyNavigation: - key: About - order: 3 +---js +const eleventyNavigation = { + key: "About", + order: 3 +}; --- # About diff --git a/content/blog.njk b/content/blog.njk index 1f7d876..c11fdf8 100644 --- a/content/blog.njk +++ b/content/blog.njk @@ -1,7 +1,8 @@ ---- -eleventyNavigation: - key: Archive - order: 2 +---js +const eleventyNavigation = { + key: "Archive", + order: 2 +}; ---

Archive

diff --git a/content/blog/firstpost.md b/content/blog/firstpost.md index 0557716..97db357 100644 --- a/content/blog/firstpost.md +++ b/content/blog/firstpost.md @@ -2,8 +2,7 @@ title: This is my first post. description: This is a post on My Blog about agile frameworks. date: 2018-05-01 -tags: - - another tag +tags: another tag --- Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. diff --git a/content/blog/secondpost.md b/content/blog/secondpost.md index 008fdc8..b308bff 100644 --- a/content/blog/secondpost.md +++ b/content/blog/secondpost.md @@ -2,8 +2,7 @@ title: This is my second post with a much longer title. description: This is a post on My Blog about leveraging agile frameworks. date: 2018-07-04 -tags: - - number 2 +tags: number 2 --- Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. diff --git a/content/blog/thirdpost.md b/content/blog/thirdpost.md index e333b46..7a95dd6 100644 --- a/content/blog/thirdpost.md +++ b/content/blog/thirdpost.md @@ -2,9 +2,7 @@ title: This is my third post. description: This is a post on My Blog about win-win survival strategies. date: 2018-08-24 -tags: - - second tag - - posts with two tags +tags: ["second tag", "posts with two tags"] --- Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. diff --git a/content/index.njk b/content/index.njk index 260b20c..f7d17e1 100644 --- a/content/index.njk +++ b/content/index.njk @@ -1,8 +1,10 @@ ---- -eleventyNavigation: - key: Home - order: 1 -numberOfLatestPostsToShow: 3 +---js +const eleventyNavigation = { + key: "Home", + order: 1 +}; + +const numberOfLatestPostsToShow = 3; --- {% set postsCount = collections.posts | length %} {% set latestPostsCount = postsCount | min(numberOfLatestPostsToShow) %} From 31235827fc0ca93b4bb0372e3808d3ee218ce40b Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Tue, 24 Sep 2024 12:18:16 -0500 Subject: [PATCH 68/99] Drastically simplify the drafts workflow --- _data/eleventyDataSchema.js | 13 +++++++++++++ content/blog/blog.11tydata.js | 34 ---------------------------------- eleventy.config.js | 7 +++++++ 3 files changed, 20 insertions(+), 34 deletions(-) create mode 100644 _data/eleventyDataSchema.js diff --git a/_data/eleventyDataSchema.js b/_data/eleventyDataSchema.js new file mode 100644 index 0000000..ca764ec --- /dev/null +++ b/_data/eleventyDataSchema.js @@ -0,0 +1,13 @@ +import { z } from "zod"; +import { fromZodError } from 'zod-validation-error'; + +export default function(data) { + // Draft content, validate `draft` front matter + let result = z.object({ + draft: z.boolean().or(z.undefined()), + }).safeParse(data); + + if(result.error) { + throw fromZodError(result.error); + } +} diff --git a/content/blog/blog.11tydata.js b/content/blog/blog.11tydata.js index 1a1e976..614f505 100644 --- a/content/blog/blog.11tydata.js +++ b/content/blog/blog.11tydata.js @@ -1,40 +1,6 @@ -import { z } from "zod"; -import { fromZodError } from 'zod-validation-error'; - export default { tags: [ "posts" ], "layout": "layouts/post.njk", - - // Draft blog posts, validate `draft` front matter - eleventyDataSchema: function(data) { - let result = z.object({ - draft: z.boolean().or(z.undefined()), - }).safeParse(data); - - if(result.error) { - throw fromZodError(result.error); - } - }, - - // Draft blog posts, exclude from builds and collections - eleventyComputed: { - permalink: (data) => { - // Always skip during non-watch/serve builds - if(data.draft && process.env.ELEVENTY_RUN_MODE === "build") { - return false; - } - - return data.permalink; - }, - eleventyExcludeFromCollections: (data) => { - // Always exclude from non-watch/serve builds - if(data.draft && process.env.ELEVENTY_RUN_MODE === "build") { - return true; - } - - return data.eleventyExcludeFromCollections; - } - } }; diff --git a/eleventy.config.js b/eleventy.config.js index c73e75e..668f6ee 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -8,6 +8,13 @@ import pluginFilters from "./_config/filters.js"; /** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */ export default async function(eleventyConfig) { + // Drafts, see also _data/eleventyDataSchema.js + eleventyConfig.addPreprocessor("drafts", "*", (data, content) => { + if(data.draft && process.env.ELEVENTY_RUN_MODE === "build") { + return false; + } + }); + // Copy the contents of the `public` folder to the output folder // For example, `./public/css/` ends up in `_site/css/` eleventyConfig From 18b3f4927b441f7e8e4163f6180c76078f196fbc Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Fri, 27 Sep 2024 16:16:59 -0500 Subject: [PATCH 69/99] Try out no trailing slash urls --- eleventy.config.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/eleventy.config.js b/eleventy.config.js index 668f6ee..efb85cd 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -15,6 +15,16 @@ export default async function(eleventyConfig) { } }); + eleventyConfig.addUrlTransform((page) => { + if (page.url.endsWith(".html")) { + return page.url.slice(0, -1 * ".html".length); + } + }); + eleventyConfig.addGlobalData("permalink", () => { + return (data) => + `${data.page.filePathStem}.${data.page.outputFileExtension}`; + }); + // Copy the contents of the `public` folder to the output folder // For example, `./public/css/` ends up in `_site/css/` eleventyConfig From fd37a6ffac14d3091d8b03a190b5ba9e2ffb08b4 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Fri, 27 Sep 2024 16:18:39 -0500 Subject: [PATCH 70/99] Use trailingslash: false --- vercel.json | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 vercel.json diff --git a/vercel.json b/vercel.json new file mode 100644 index 0000000..e85d6c0 --- /dev/null +++ b/vercel.json @@ -0,0 +1,3 @@ +{ + "trailingSlash": false +} From 107e6ca8d0b0291703aef8a81bb4fb0b9d1a9eed Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Fri, 27 Sep 2024 16:19:55 -0500 Subject: [PATCH 71/99] One more test --- vercel.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vercel.json b/vercel.json index e85d6c0..1e9c7bc 100644 --- a/vercel.json +++ b/vercel.json @@ -1,3 +1,3 @@ { - "trailingSlash": false + "trailingSlash": true } From 7d0680976672915d43249275e6bf4b2679f62033 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Fri, 27 Sep 2024 16:21:14 -0500 Subject: [PATCH 72/99] Revert trailing slash tests --- eleventy.config.js | 10 ---------- vercel.json | 3 --- 2 files changed, 13 deletions(-) delete mode 100644 vercel.json diff --git a/eleventy.config.js b/eleventy.config.js index efb85cd..668f6ee 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -15,16 +15,6 @@ export default async function(eleventyConfig) { } }); - eleventyConfig.addUrlTransform((page) => { - if (page.url.endsWith(".html")) { - return page.url.slice(0, -1 * ".html".length); - } - }); - eleventyConfig.addGlobalData("permalink", () => { - return (data) => - `${data.page.filePathStem}.${data.page.outputFileExtension}`; - }); - // Copy the contents of the `public` folder to the output folder // For example, `./public/css/` ends up in `_site/css/` eleventyConfig diff --git a/vercel.json b/vercel.json deleted file mode 100644 index 1e9c7bc..0000000 --- a/vercel.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "trailingSlash": true -} From 26f58f9269b591ba64c75c4076ba6dbedc000c14 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Fri, 27 Sep 2024 16:29:57 -0500 Subject: [PATCH 73/99] One more test --- vercel.json | 1 + 1 file changed, 1 insertion(+) create mode 100644 vercel.json diff --git a/vercel.json b/vercel.json new file mode 100644 index 0000000..9861173 --- /dev/null +++ b/vercel.json @@ -0,0 +1 @@ +{ "trailingSlash": false } From ef4e52d57dcdbe13e1693de01b731951a49bf57c Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Fri, 27 Sep 2024 16:31:53 -0500 Subject: [PATCH 74/99] Remove trailing slash from URLs --- eleventy.config.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/eleventy.config.js b/eleventy.config.js index 668f6ee..cbb1cae 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -15,6 +15,16 @@ export default async function(eleventyConfig) { } }); + eleventyConfig.addUrlTransform((page) => { + if (page.url.endsWith(".html")) { + return page.url.slice(0, -1 * ".html".length); + } + }); + // eleventyConfig.addGlobalData("permalink", () => { + // return (data) => + // `${data.page.filePathStem}.${data.page.outputFileExtension}`; + // }); + // Copy the contents of the `public` folder to the output folder // For example, `./public/css/` ends up in `_site/css/` eleventyConfig From fb5caf353bed1384a9f38f0b24433b33b1d2a496 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Fri, 27 Sep 2024 16:32:47 -0500 Subject: [PATCH 75/99] Remove trailing slash from URLs --- eleventy.config.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/eleventy.config.js b/eleventy.config.js index cbb1cae..81cac4a 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -16,10 +16,15 @@ export default async function(eleventyConfig) { }); eleventyConfig.addUrlTransform((page) => { - if (page.url.endsWith(".html")) { - return page.url.slice(0, -1 * ".html".length); + if (page.url.endsWith("/")) { + return page.url.slice(0, -1); } }); + // eleventyConfig.addUrlTransform((page) => { + // if (page.url.endsWith(".html")) { + // return page.url.slice(0, -1 * ".html".length); + // } + // }); // eleventyConfig.addGlobalData("permalink", () => { // return (data) => // `${data.page.filePathStem}.${data.page.outputFileExtension}`; From f9522c3cb7f5f0d26d538ea5196eb7e13ea6c5da Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Fri, 27 Sep 2024 16:33:37 -0500 Subject: [PATCH 76/99] One more try --- eleventy.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/eleventy.config.js b/eleventy.config.js index 81cac4a..f465257 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -16,7 +16,7 @@ export default async function(eleventyConfig) { }); eleventyConfig.addUrlTransform((page) => { - if (page.url.endsWith("/")) { + if (page.outputPath?.endsWith(".html") && url.endsWith("/")) { return page.url.slice(0, -1); } }); From 644b1f09f036e96fa2e140b5825e0cc894c55bd5 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Fri, 27 Sep 2024 16:35:42 -0500 Subject: [PATCH 77/99] URL only --- eleventy.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/eleventy.config.js b/eleventy.config.js index f465257..985a8ca 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -16,7 +16,7 @@ export default async function(eleventyConfig) { }); eleventyConfig.addUrlTransform((page) => { - if (page.outputPath?.endsWith(".html") && url.endsWith("/")) { + if (page.url.length > 1 && page.url.endsWith("/")) { return page.url.slice(0, -1); } }); From 33f30bc106546e06c238c7f8f98249bd9b69ba20 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Fri, 27 Sep 2024 17:00:14 -0500 Subject: [PATCH 78/99] Revert --- eleventy.config.js | 15 --------------- vercel.json | 1 - 2 files changed, 16 deletions(-) delete mode 100644 vercel.json diff --git a/eleventy.config.js b/eleventy.config.js index 985a8ca..668f6ee 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -15,21 +15,6 @@ export default async function(eleventyConfig) { } }); - eleventyConfig.addUrlTransform((page) => { - if (page.url.length > 1 && page.url.endsWith("/")) { - return page.url.slice(0, -1); - } - }); - // eleventyConfig.addUrlTransform((page) => { - // if (page.url.endsWith(".html")) { - // return page.url.slice(0, -1 * ".html".length); - // } - // }); - // eleventyConfig.addGlobalData("permalink", () => { - // return (data) => - // `${data.page.filePathStem}.${data.page.outputFileExtension}`; - // }); - // Copy the contents of the `public` folder to the output folder // For example, `./public/css/` ends up in `_site/css/` eleventyConfig diff --git a/vercel.json b/vercel.json deleted file mode 100644 index 9861173..0000000 --- a/vercel.json +++ /dev/null @@ -1 +0,0 @@ -{ "trailingSlash": false } From 07bd6d8affed32629148ec4463b6ec09b1701d0b Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Fri, 27 Sep 2024 17:04:09 -0500 Subject: [PATCH 79/99] Always use trailingSlash: true on Vercel --- vercel.json | 1 + 1 file changed, 1 insertion(+) create mode 100644 vercel.json diff --git a/vercel.json b/vercel.json new file mode 100644 index 0000000..a9d5b12 --- /dev/null +++ b/vercel.json @@ -0,0 +1 @@ +{ "trailingSlash": true } From c8a2c186bcb67df46cdb78348490dff7bf2bcf37 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Tue, 1 Oct 2024 15:42:41 -0500 Subject: [PATCH 80/99] Upgrade a few deps, move a few things around. Remove the dual feeds (JSON still supported) --- README.md | 5 ++--- _includes/layouts/base.njk | 5 +---- content/{about/index.md => about.md} | 0 content/tag-pages.njk | 4 +++- eleventy.config.js | 2 +- package.json | 4 ++-- 6 files changed, 9 insertions(+), 11 deletions(-) rename content/{about/index.md => about.md} (100%) diff --git a/README.md b/README.md index 1e97ede..6001144 100644 --- a/README.md +++ b/README.md @@ -45,13 +45,12 @@ Or you can run [debug mode](https://www.11ty.dev/docs/debugging/) to see all the ## Features -- Using [Eleventy v2.0](https://www.11ty.dev/blog/eleventy-v2/) with zero-JavaScript output. +- Using [Eleventy v3](https://github.com/11ty/eleventy/releases/tag/v3.0.0) with zero-JavaScript output. - Content is exclusively pre-rendered (this is a static site). - Can easily [deploy to a subfolder without changing any content](https://www.11ty.dev/docs/plugins/html-base/) - All URLs are decoupled from the content’s location on the file system. - Configure templates via the [Eleventy Data Cascade](https://www.11ty.dev/docs/data-cascade/) - **Performance focused**: four-hundos Lighthouse score out of the box! - - [View the Lighthouse report for the latest build](https://eleventy-base-blog.netlify.app/reports/lighthouse/) courtesy of the [Netlify Lighthouse plugin](https://github.com/netlify/netlify-plugin-lighthouse). - _0 Cumulative Layout Shift_ - _0ms Total Blocking Time_ - Local development live reload provided by [Eleventy Dev Server](https://www.11ty.dev/docs/dev-server/). @@ -68,8 +67,8 @@ Or you can run [debug mode](https://www.11ty.dev/docs/debugging/) to see all the - Images can be co-located with blog post files. - Per page CSS bundles [via `eleventy-plugin-bundle`](https://github.com/11ty/eleventy-plugin-bundle). - Built-in [syntax highlighter](https://www.11ty.dev/docs/plugins/syntaxhighlight/) (zero-JavaScript output). +- Draft content: use `draft: true` to mark any template as a draft. Drafts are **only** included during `--serve`/`--watch` and are excluded from full builds. This is driven by the `addPreprocessor` configuration API in `eleventy.config.js`. Schema validator will show an error if non-boolean value is set in data cascade. - Blog Posts - - Draft posts: use `draft: true` to mark a blog post as a draft. Drafts are **only** included during `--serve`/`--watch` and are excluded from full builds. This is driven by the `eleventyExcludeFromCollections` and `permalink` computed data in the `content/blog/blog.11tydata.js` directory data file. Schema validator will show an error if non-boolean value is set in data cascade. - Automated next/previous links - Accessible deep links to headings - Generated Pages diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk index 537f398..57a29a2 100644 --- a/_includes/layouts/base.njk +++ b/_includes/layouts/base.njk @@ -5,10 +5,7 @@ {{ title or metadata.title }} - - {#- Atom and JSON feeds included by default #} - - + {#- Uncomment this if you’d like folks to know that you used Eleventy to build your site! #} {#- #} diff --git a/content/about/index.md b/content/about.md similarity index 100% rename from content/about/index.md rename to content/about.md diff --git a/content/tag-pages.njk b/content/tag-pages.njk index 33b7abf..a69aeef 100644 --- a/content/tag-pages.njk +++ b/content/tag-pages.njk @@ -5,9 +5,11 @@ const pagination = { size: 1, alias: "tag", filter: ["all", "posts"], - addAllPagesToCollections: true, + // addAllPagesToCollections: true, }; +const eleventyExcludeFromCollections = true; + const eleventyComputed = { title: "Tagged '{{ tag }}'", permalink: function(data) { diff --git a/eleventy.config.js b/eleventy.config.js index 668f6ee..6ebf287 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -47,8 +47,8 @@ export default async function(eleventyConfig) { eleventyConfig.addPlugin(HtmlBasePlugin); eleventyConfig.addPlugin(InputPathToUrlTransformPlugin); - // Atom Feed eleventyConfig.addPlugin(feedPlugin, { + type: "atom", // or "rss", "json" outputPath: "/feed/feed.xml", stylesheet: "pretty-atom-feed.xsl", templateData: { diff --git a/package.json b/package.json index ba2f26d..6a16961 100644 --- a/package.json +++ b/package.json @@ -35,8 +35,8 @@ }, "homepage": "https://github.com/11ty/eleventy-base-blog#readme", "devDependencies": { - "@11ty/eleventy": "3.0.0-alpha.20", - "@11ty/eleventy-img": "5.0.0-beta.9", + "@11ty/eleventy": "^3.0.0", + "@11ty/eleventy-img": "^5.0.0", "@11ty/eleventy-navigation": "^0.3.5", "@11ty/eleventy-plugin-rss": "^2.0.2", "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0", From a13b19d5c202ea853802beee9580580f12df6bfa Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Tue, 1 Oct 2024 15:47:38 -0500 Subject: [PATCH 81/99] Minor tweak to readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6001144..5d1c3fb 100644 --- a/README.md +++ b/README.md @@ -73,7 +73,7 @@ Or you can run [debug mode](https://www.11ty.dev/docs/debugging/) to see all the - Accessible deep links to headings - Generated Pages - Home, Archive, and About pages. - - [Feeds for Atom and JSON](https://www.11ty.dev/docs/plugins/rss/) + - [Feeds for Atom (with easy swap to RSS or JSON](https://www.11ty.dev/docs/plugins/rss/) - `sitemap.xml` - Zero-maintenance tag pages ([View on the Demo](https://eleventy-base-blog.netlify.app/tags/)) - Content not found (404) page From 0a5175f4f207ef11cf52d362de0c17681c768f18 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Tue, 1 Oct 2024 15:48:55 -0500 Subject: [PATCH 82/99] Yet another README copy tweak --- README.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/README.md b/README.md index cd00c02..b0cbba4 100644 --- a/README.md +++ b/README.md @@ -73,7 +73,7 @@ Or you can run [debug mode](https://www.11ty.dev/docs/debugging/) to see all the - Accessible deep links to headings - Generated Pages - Home, Archive, and About pages. - - [Feeds for Atom (with easy swap to RSS or JSON](https://www.11ty.dev/docs/plugins/rss/) + - [Atom feed included (with easy one-line swap to use RSS or JSON](https://www.11ty.dev/docs/plugins/rss/) - `sitemap.xml` - Zero-maintenance tag pages ([View on the Demo](https://eleventy-base-blog.netlify.app/tags/)) - Content not found (404) page @@ -104,9 +104,6 @@ Deploy this Eleventy site in just a few clicks on these services: - Use the `eleventyNavigation` key (via the [Eleventy Navigation plugin](https://www.11ty.dev/docs/plugins/navigation/)) in your front matter to add a template to the top level site navigation. This is in use on `content/index.njk` and `content/about/index.md`. - Content can be in _any template format_ (blog posts needn’t exclusively be markdown, for example). Configure your project’s supported templates in `eleventy.config.js` -> `templateFormats`. - The `public` folder in your input directory will be copied to the output folder (via `addPassthroughCopy` in the `eleventy.config.js` file). This means `./public/css/*` will live at `./_site/css/*` after your build completes. -- Provides two content feeds: - - `content/feed/feed.njk` - - `content/feed/json.njk` - This project uses three [Eleventy Layouts](https://www.11ty.dev/docs/layouts/): - `_includes/layouts/base.njk`: the top level HTML structure - `_includes/layouts/home.njk`: the home page template (wrapped into `base.njk`) From c79179c2bf5f0833e0934e74f5e60b9b44f7e077 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Tue, 1 Oct 2024 15:49:23 -0500 Subject: [PATCH 83/99] Deployment copy tweaks --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index b0cbba4..f3e2c21 100644 --- a/README.md +++ b/README.md @@ -90,12 +90,11 @@ Or you can run [debug mode](https://www.11ty.dev/docs/debugging/) to see all the Deploy this Eleventy site in just a few clicks on these services: +- Read more about [Deploying an Eleventy project](https://www.11ty.dev/docs/deployment/) to the web. - [Deploy this to **Netlify**](https://app.netlify.com/start/deploy?repository=https://github.com/11ty/eleventy-base-blog) - [Deploy this to **Vercel**](https://vercel.com/import/project?template=11ty%2Feleventy-base-blog) - Look in `.github/workflows/gh-pages.yml.sample` for information on Deploying to **GitHub Pages**. - [Try it out on **Stackblitz**](https://stackblitz.com/github/11ty/eleventy-base-blog) -- If you run Eleventy locally you can drag your `_site` folder to [`netlify.com/drop`](https://netlify.com/drop) to upload it without using `git`. -- Read more about [Deploying an Eleventy project](https://www.11ty.dev/docs/deployment/) to the web. ### Implementation Notes From 9b0cb972e0d1a6486cc7e388c87986ee8c63c2ae Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Tue, 1 Oct 2024 15:54:03 -0500 Subject: [PATCH 84/99] Change navigation order --- eleventy.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/eleventy.config.js b/eleventy.config.js index 6ebf287..09ee084 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -54,7 +54,7 @@ export default async function(eleventyConfig) { templateData: { eleventyNavigation: { key: "Feed", - order: 3 + order: 4 } }, collection: { From 0859827f6905a3e6aa3ac29cb8260eb436e69e58 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Tue, 1 Oct 2024 16:15:36 -0500 Subject: [PATCH 85/99] Reorder demos --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f3e2c21..72f2a6f 100644 --- a/README.md +++ b/README.md @@ -82,8 +82,8 @@ Or you can run [debug mode](https://www.11ty.dev/docs/debugging/) to see all the - [Netlify](https://eleventy-base-blog.netlify.app/) - [Vercel](https://demo-base-blog.11ty.dev/) -- [Remix on Glitch](https://glitch.com/~11ty-eleventy-base-blog) - [Cloudflare Pages](https://eleventy-base-blog-d2a.pages.dev/) +- [Remix on Glitch](https://glitch.com/~11ty-eleventy-base-blog) - [GitHub Pages](https://11ty.github.io/eleventy-base-blog/) ## Deploy this to your own site From e8f8a543de2e51544f365880014a2c09c7de7cc2 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Tue, 1 Oct 2024 16:25:05 -0500 Subject: [PATCH 86/99] Update link --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 72f2a6f..75f10e8 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # eleventy-base-blog v9 -A starter repository showing how to build a blog with the [Eleventy](https://www.11ty.dev/) site generator (using the [v2.0 release](https://www.11ty.dev/blog/eleventy-v2/)). +A starter repository showing how to build a blog with the [Eleventy](https://www.11ty.dev/) site generator (using the [v3.0 release](https://github.com/11ty/eleventy/releases/tag/v3.0.0)). ## Getting Started From e80ecf942bcd728edf4122995006815f562307c2 Mon Sep 17 00:00:00 2001 From: William Entriken Date: Thu, 3 Oct 2024 10:24:23 -0400 Subject: [PATCH 87/99] Bump dep, fix node issue --- .github/workflows/gh-pages.yml.sample | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/gh-pages.yml.sample b/.github/workflows/gh-pages.yml.sample index ac919a0..7aef331 100644 --- a/.github/workflows/gh-pages.yml.sample +++ b/.github/workflows/gh-pages.yml.sample @@ -17,7 +17,7 @@ jobs: concurrency: group: ${{ github.workflow }}-${{ github.ref }} steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - name: Setup Node uses: actions/setup-node@v3 From 287d4736bb0f99678b82accabb2797e070d21039 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Fri, 15 Nov 2024 16:53:23 -0600 Subject: [PATCH 88/99] Minor tweaks --- _includes/layouts/base.njk | 2 +- _includes/postslist.njk | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk index 57a29a2..7a54534 100644 --- a/_includes/layouts/base.njk +++ b/_includes/layouts/base.njk @@ -63,7 +63,7 @@

Built with {{ eleventy.generator }}

- + diff --git a/_includes/postslist.njk b/_includes/postslist.njk index 99272c5..7ff7c6b 100644 --- a/_includes/postslist.njk +++ b/_includes/postslist.njk @@ -1,9 +1,9 @@ {%- css %}.postlist { counter-reset: start-from {{ (postslistCounter or postslist.length) + 1 }} }{% endcss %}
    -{% for post in postslist | reverse %} +{%- for post in postslist | reverse %}
  1. {% if post.data.title %}{{ post.data.title }}{% else %}{{ post.url }}{% endif %}
    2. -{% endfor %} +{%- endfor %}
From 940e69d2bfd522654ceefb0495931049865b9b2d Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Fri, 15 Nov 2024 17:09:48 -0600 Subject: [PATCH 89/99] Add CSS for fluid width images --- LICENSE | 2 +- public/css/index.css | 13 +++++++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/LICENSE b/LICENSE index c97fe3d..5027c0d 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2017–2023 Zach Leatherman @zachleat +Copyright (c) 2017–2024 Zach Leatherman @zachleat Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/public/css/index.css b/public/css/index.css index 1cfa083..ee37c46 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -71,6 +71,19 @@ body { width: 1px; } +/* Fluid images via https://www.zachleat.com/web/fluid-images/ */ +img { + max-width: 100%; +} +img[width][height] { + height: auto; +} +img[src$=".svg"] { + width: 100%; + height: auto; + max-width: none; +} + p:last-child { margin-bottom: 0; } From 350c914dbc58749e96f4c8a19ab441e0a8a0e3a6 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Wed, 8 Jan 2025 13:17:10 -0600 Subject: [PATCH 90/99] Upgrade to latest Eleventy Image, support animated gif --- eleventy.config.js | 24 +++++++++++++----------- package.json | 2 +- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/eleventy.config.js b/eleventy.config.js index 09ee084..03d5b5d 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -6,7 +6,6 @@ import { eleventyImageTransformPlugin } from "@11ty/eleventy-img"; import pluginFilters from "./_config/filters.js"; -/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */ export default async function(eleventyConfig) { // Drafts, see also _data/eleventyDataSchema.js eleventyConfig.addPreprocessor("drafts", "*", (data, content) => { @@ -26,8 +25,8 @@ export default async function(eleventyConfig) { // Run Eleventy when these files change: // https://www.11ty.dev/docs/watch-serve/#add-your-own-watch-targets - // Watch content images for the image pipeline. - eleventyConfig.addWatchTarget("content/**/*.{svg,webp,png,jpeg}"); + // Watch images for the image pipeline. + eleventyConfig.addWatchTarget("content/**/*.{svg,webp,png,jpg,jpeg,gif}"); // Per-page bundles, see https://github.com/11ty/eleventy-plugin-bundle // Adds the {% css %} paired shortcode @@ -74,19 +73,22 @@ export default async function(eleventyConfig) { // Image optimization: https://www.11ty.dev/docs/plugins/image/#eleventy-transform eleventyConfig.addPlugin(eleventyImageTransformPlugin, { - // File extensions to process in _site folder - extensions: "html", - // Output formats for each image. formats: ["avif", "webp", "auto"], // widths: ["auto"], - defaultAttributes: { - // e.g. assigned on the HTML tag will override these values. - loading: "lazy", - decoding: "async", - } + htmlOptions: { + imgAttributes: { + // e.g. assigned on the HTML tag will override these values. + loading: "lazy", + decoding: "async", + } + }, + + sharpOptions: { + animated: true, + }, }); // Filters diff --git a/package.json b/package.json index 6a16961..db95617 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "homepage": "https://github.com/11ty/eleventy-base-blog#readme", "devDependencies": { "@11ty/eleventy": "^3.0.0", - "@11ty/eleventy-img": "^5.0.0", + "@11ty/eleventy-img": "^6.0.0", "@11ty/eleventy-navigation": "^0.3.5", "@11ty/eleventy-plugin-rss": "^2.0.2", "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0", From cc7ed78170c9afc23850df87fa546248fa961e52 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Wed, 8 Jan 2025 13:17:26 -0600 Subject: [PATCH 91/99] Fluid width video and iframes --- public/css/index.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/public/css/index.css b/public/css/index.css index ee37c46..c768de1 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -72,7 +72,9 @@ body { } /* Fluid images via https://www.zachleat.com/web/fluid-images/ */ -img { +img, +video, +iframe { max-width: 100%; } img[width][height] { From 8b53e14ffc2044175fea8e8ca767006e77caeaa4 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Fri, 10 Jan 2025 08:17:35 -0600 Subject: [PATCH 92/99] Restore config types --- eleventy.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/eleventy.config.js b/eleventy.config.js index 03d5b5d..ea6a25f 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -6,6 +6,7 @@ import { eleventyImageTransformPlugin } from "@11ty/eleventy-img"; import pluginFilters from "./_config/filters.js"; +/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */ export default async function(eleventyConfig) { // Drafts, see also _data/eleventyDataSchema.js eleventyConfig.addPreprocessor("drafts", "*", (data, content) => { From eea504a96176187f11381aa711360c208621a214 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Tue, 14 Jan 2025 15:23:55 -0600 Subject: [PATCH 93/99] Add 16/9 aspect ratio for video/iframe to default CSS --- eleventy.config.js | 1 + public/css/index.css | 10 +++++++--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/eleventy.config.js b/eleventy.config.js index ea6a25f..4c5e170 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -79,6 +79,7 @@ export default async function(eleventyConfig) { // widths: ["auto"], + failOnError: false, htmlOptions: { imgAttributes: { // e.g. assigned on the HTML tag will override these values. diff --git a/public/css/index.css b/public/css/index.css index c768de1..b8a97e1 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -72,9 +72,7 @@ body { } /* Fluid images via https://www.zachleat.com/web/fluid-images/ */ -img, -video, -iframe { +img{ max-width: 100%; } img[width][height] { @@ -85,6 +83,12 @@ img[src$=".svg"] { height: auto; max-width: none; } +video, +iframe { + max-width: 100%; + height: auto; + aspect-ratio: 16/9; +} p:last-child { margin-bottom: 0; From 64317cdcf5e98a4ab6a83c40eb738a4ef8ff5905 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Wed, 15 Jan 2025 11:20:26 -0600 Subject: [PATCH 94/99] Upgrade Eleventy Image dep --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index db95617..0fcf1aa 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "homepage": "https://github.com/11ty/eleventy-base-blog#readme", "devDependencies": { "@11ty/eleventy": "^3.0.0", - "@11ty/eleventy-img": "^6.0.0", + "@11ty/eleventy-img": "^6.0.1", "@11ty/eleventy-navigation": "^0.3.5", "@11ty/eleventy-plugin-rss": "^2.0.2", "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0", From 81bffcc20a71dfbbede56c64dc85a3f02d1d4bac Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Wed, 15 Jan 2025 11:20:55 -0600 Subject: [PATCH 95/99] Tweak to video/iframe default CSS --- public/css/index.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/public/css/index.css b/public/css/index.css index b8a97e1..55001ab 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -85,8 +85,10 @@ img[src$=".svg"] { } video, iframe { - max-width: 100%; + width: 100%; height: auto; +} +iframe { aspect-ratio: 16/9; } From 2819f9521e170ca37fbc34c130213cbdcff03e3a Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Wed, 22 Jan 2025 12:19:35 -0600 Subject: [PATCH 96/99] Fix feed href --- _includes/layouts/base.njk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk index 7a54534..81be55d 100644 --- a/_includes/layouts/base.njk +++ b/_includes/layouts/base.njk @@ -5,7 +5,7 @@ {{ title or metadata.title }} - + {#- Uncomment this if you’d like folks to know that you used Eleventy to build your site! #} {#- #} From 8ca5449efce9ea09aa077c512a880da4167eaa72 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Thu, 30 Jan 2025 12:04:09 -0600 Subject: [PATCH 97/99] CSS updates to simplify header --- public/css/index.css | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/public/css/index.css b/public/css/index.css index 55001ab..7be5b52 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -125,11 +125,6 @@ main :first-child { header { border-bottom: 1px dashed var(--color-gray-20); } -header:after { - content: ""; - display: table; - clear: both; -} .links-nextprev { display: flex; @@ -181,15 +176,16 @@ code { /* Header */ header { display: flex; - gap: 1em .5em; + gap: 1em; flex-wrap: wrap; + justify-content: space-between; align-items: center; padding: 1em; } .home-link { + flex-grow: 1; font-size: 1em; /* 16px /16 */ font-weight: 700; - margin-right: 2em; } .home-link:link:not(:hover) { text-decoration: none; @@ -198,13 +194,13 @@ header { /* Nav */ .nav { display: flex; + gap: .5em 1em; padding: 0; margin: 0; list-style: none; } .nav-item { display: inline-block; - margin-right: 1em; } .nav-item a[href]:not(:hover) { text-decoration: none; From d4bf6e8aa19a3ca3869864cf259a5e4208e3eef1 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Wed, 5 Feb 2025 14:22:31 -0600 Subject: [PATCH 98/99] GitHub Actions docs --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 75f10e8..8bfc363 100644 --- a/README.md +++ b/README.md @@ -93,7 +93,7 @@ Deploy this Eleventy site in just a few clicks on these services: - Read more about [Deploying an Eleventy project](https://www.11ty.dev/docs/deployment/) to the web. - [Deploy this to **Netlify**](https://app.netlify.com/start/deploy?repository=https://github.com/11ty/eleventy-base-blog) - [Deploy this to **Vercel**](https://vercel.com/import/project?template=11ty%2Feleventy-base-blog) -- Look in `.github/workflows/gh-pages.yml.sample` for information on Deploying to **GitHub Pages**. +- Look in `.github/workflows/gh-pages.yml.sample` for information on [Deploying to **GitHub Pages**](https://www.11ty.dev/docs/deployment/#deploy-an-eleventy-project-to-git-hub-pages). - [Try it out on **Stackblitz**](https://stackblitz.com/github/11ty/eleventy-base-blog) ### Implementation Notes From 63662c90f415659e5b799e988c3cdb14007550c6 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Wed, 5 Feb 2025 14:27:39 -0600 Subject: [PATCH 99/99] Adds Vercel --- content/404.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/content/404.md b/content/404.md index 315fdbf..50a3fa9 100644 --- a/content/404.md +++ b/content/404.md @@ -10,10 +10,11 @@ Go home. Read more: https://www.11ty.dev/docs/quicktips/not-found/ -This will work for GitHub pages, GitLab Pages, Netlify, and Cloudflare Pages: +This is compatible with: -* https://help.github.com/articles/creating-a-custom-404-page-for-your-github-pages-site/ -* https://docs.gitlab.com/ee/user/project/pages/introduction.html#custom-error-codes-pages -* https://www.netlify.com/docs/redirects/#custom-404 -* https://developers.cloudflare.com/pages/platform/serving-pages/#not-found-behavior +- GitHub Pages: https://help.github.com/articles/creating-a-custom-404-page-for-your-github-pages-site/ +- GitLab Pages: https://docs.gitlab.com/ee/user/project/pages/introduction.html#custom-error-codes-pages +- Netlify: https://www.netlify.com/docs/redirects/#custom-404 +- Cloudflare Pages: https://developers.cloudflare.com/pages/platform/serving-pages/#not-found-behavior +- Vercel: https://vercel.com/guides/custom-404-page#static-site-generator-ssg -->