Merge pull request #1 from patrickpatrickpatrick/upgrade-11ty

Upgrade 11ty

Author: patrickpatrickpatrick

.DS_Store

@@ -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

LICENSE

@@ -1,3 +1,116 @@
-# My personal site
+# eleventy-base-blog v9
 
-It uses [eleventy-base-blog](https://github.com/11ty/eleventy-base-blog) and it is hosted on [Github Pages](https://pages.github.com/).
+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
+
+* [Want a more generic/detailed getting started guide?](https://www.11ty.dev/docs/getting-started/)
+
+1. Make a directory and navigate to it:
+
+```
+mkdir my-blog-name
+cd my-blog-name
+```
+
+2. Clone this Repository
+
+```
+git clone https://github.com/11ty/eleventy-base-blog.git .
+```
+
+_Optional:_ Review `eleventy.config.js` and `_data/metadata.js` to configure the site’s options and data.
+
+3. Install dependencies
+
+```
+npm install
+```
+
+4. Run Eleventy
+
+Generate a production-ready build to the `_site` folder:
+
+```
+npx @11ty/eleventy
+```
+
+Or build and host on a local development server:
+
+```
+npx @11ty/eleventy --serve
+```
+
+Or you can run [debug mode](https://www.11ty.dev/docs/debugging/) to see all the internals.
+
+## Features
+
+- 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!
+	- _0 Cumulative Layout Shift_
+	- _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/)
+- 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 `<img>` markup if possible (single image format) but switches automatically to `<picture>` for multiple image formats.
+	- Automated `<picture>` 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.
+- 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
+	- Automated next/previous links
+	- Accessible deep links to headings
+- Generated Pages
+	- Home, Archive, and About pages.
+	- [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
+
+## Demos
+
+- [Netlify](https://eleventy-base-blog.netlify.app/)
+- [Vercel](https://demo-base-blog.11ty.dev/)
+- [Cloudflare Pages](https://eleventy-base-blog-d2a.pages.dev/)
+- [GitHub Pages](https://11ty.github.io/eleventy-base-blog/)
+
+## Deploy this to your own site
+
+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**](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
+
+- `content/about/index.md` is an example of a content page.
+- `content/blog/` has the blog posts but really they can live in any directory. They need only the `posts` tag to be included in the blog posts [collection](https://www.11ty.dev/docs/collections/).
+- 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.
+- 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`)
+	- `_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.
+
+#### Content Security Policy
+
+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 `<style>{% getBundle "css" %}</style>` and uncomment `<link rel="stylesheet" href="{% getBundleFileUrl "css" %}">`
+2. Configure the server with the CSP directive `style-src: 'unsafe-inline'` (less secure).

README.md

@@ -0,0 +1,53 @@
+import { DateTime } from "luxon";
+
+export default function(eleventyConfig) {
+	eleventyConfig.addFilter("readableDate", (dateObj, format, zone) => {
+		// Formatting tokens for Luxon: https://moment.github.io/luxon/#/formatting?id=table-of-tokens
+		return DateTime.fromJSDate(dateObj, { zone: zone || "utc" }).toFormat(format || "dd LLLL yyyy");
+	});
+
+	eleventyConfig.addFilter("htmlDateString", (dateObj) => {
+		// dateObj input: https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
+		return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat('yyyy-LL-dd');
+	});
+
+	// Get the first `n` elements of a collection.
+	eleventyConfig.addFilter("head", (array, n) => {
+		if(!Array.isArray(array) || array.length === 0) {
+			return [];
+		}
+		if( n < 0 ) {
+			return array.slice(n);
+		}
+
+		return array.slice(0, n);
+	});
+
+	// Return the smallest number argument
+	eleventyConfig.addFilter("min", (...numbers) => {
+		return Math.min.apply(null, numbers);
+	});
+
+	// Return the keys used in an object
+	eleventyConfig.addFilter("getKeys", target => {
+		return Object.keys(target);
+	});
+
+	eleventyConfig.addFilter("filterTagList", function filterTagList(tags) {
+		return (tags || []).filter(tag => ["all", "posts"].indexOf(tag) === -1);
+	});
+
+	eleventyConfig.addFilter("sortAlphabetically", strings =>
+		(strings || []).sort((b, a) => b.localeCompare(a))
+	);
+
+	// Return all the tags used in a collection
+	eleventyConfig.addFilter("getAllTags", collection => {
+		let tagSet = new Set();
+		for(let item of collection) {
+			(item.data.tags || []).forEach(tag => tagSet.add(tag));
+		}
+		return Array.from(tagSet);
+	});
+	
+};

_config/filters.js

@@ -0,0 +1,17 @@
+import { z } from "zod";
+import { fromZodError } from 'zod-validation-error';
+
+// Draft content, validate `draft` front matter
+export default function() {
+	return function(data) {
+		// Note that drafts may be skipped in a preprocessor (see eleventy.config.js)
+		// when doing a standard build (not --serve or --watch)
+		let result = z.object({
+			draft: z.boolean().or(z.undefined()),
+		}).safeParse(data);
+
+		if(result.error) {
+			throw fromZodError(result.error);
+		}
+	}
+}

_data/eleventyDataSchema.js

@@ -1,11 +1,11 @@
-module.exports = {
-	title: "Patrick's Pages",
+export default {
+	title: "Eleventy Base Blog v9",
 	url: "https://example.com/",
 	language: "en",
-	description: "It's Patrick's website",
+	description: "I am writing about my experiences as a naval navel-gazer.",
 	author: {
-		name: "Patrick",
-		email: "",
-		url: "https://patrickpatrickpatrick.github.io/about/"
+		name: "Your Name Here",
+		email: "youremailaddress@example.com",
+		url: "https://example.com/about-me/"
 	}
 }

_data/metadata.js

@@ -1,4 +1,3 @@
-<!doctype html>
 <html lang="en">
 
 <head>
@@ -22,12 +21,13 @@
     <link href="/atamaca/css/main.50075e15.css" rel="stylesheet">
 </head>
 
-<body><noscript>You need to enable JavaScript to run this app.</noscript>
+<body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <script src="/atamaca/js/main.js"></script>
+    <script eleventy:ignore type="text/javascript">
+        (() => fetch("/atamaca/references.json").then(e => e.json()).then(e => { window.renderGarden(e, '/works/atamaca-garden') }))()
+    </script>    
 </body>
-<script type="text/javascript">
-fetch("/atamaca/references.json").then(e => e.json()).then(e => { window.renderGarden(e, '/works/atamaca-garden') })
-</script>
 
 </html>

_includes/layouts/atamaca.njk

@@ -1,4 +1,3 @@
-<!doctype html>
 <html lang="{{ metadata.language }}">
 	<head>
 		<meta charset="utf-8">