cobweb/xmitter-11ty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

A few more features and cleanup

Browse Source
This commit is contained in:
Zach Leatherman 2023-01-24 08:41:50 -06:00
parent 91c45f84b9
commit 1f49621084
2 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
View File

@ -10,7 +10,12 @@ A starter repository showing how to build a blog with the [Eleventy](https://www
- Easily [deploy](#deploy-this-to-your-own-site) to various hosting providers. - Easily [deploy](#deploy-this-to-your-own-site) to various hosting providers.
- Live reload provided by [Eleventy Dev Server](https://www.11ty.dev/docs/dev-server/). - Live reload provided by [Eleventy Dev Server](https://www.11ty.dev/docs/dev-server/).
- Content-driven [hierarchical navigation](https://www.11ty.dev/docs/plugins/navigation/) - Content-driven [hierarchical navigation](https://www.11ty.dev/docs/plugins/navigation/)
- Automated [image optimization](https://www.11ty.dev/docs/plugins/image/) via the `{% image %}` shortcode (images can be co-located with posts) (with zero-JavaScript output). - [Image optimization](https://www.11ty.dev/docs/plugins/image/) (including modern formats AVIF and WebP) via the `{% image %}` shortcode (images can be co-located with posts) (with zero-JavaScript output).
- Prefers `<img>` 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)
- Built-in [syntax highlighter](https://www.11ty.dev/docs/plugins/syntaxhighlight/) (with zero-JavaScript output). - Built-in [syntax highlighter](https://www.11ty.dev/docs/plugins/syntaxhighlight/) (with zero-JavaScript output).
- 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. - 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.
- Automated next/previous links on blog posts. - Automated next/previous links on blog posts.

12
eleventy.config.images.js
View File

@ -11,14 +11,18 @@ module.exports = eleventyConfig => {
// Eleventy Image shortcode // Eleventy Image shortcode
// https://www.11ty.dev/docs/plugins/image/ // https://www.11ty.dev/docs/plugins/image/
eleventyConfig.addAsyncShortcode("image", async function imageShortcode(src, alt, sizes) { eleventyConfig.addAsyncShortcode("image", async function imageShortcode(src, alt, widths, sizes) {
// Full list of formats here: https://www.11ty.dev/docs/plugins/image/#output-formats
// Warning: Avif can be resource-intensive so take care!
let formats = ["avif", "webp", "auto"];
let file = relativeToInputPath(this.page.inputPath, src); let file = relativeToInputPath(this.page.inputPath, src);
let metadata = await eleventyImage(file, { let metadata = await eleventyImage(file, {
widths: ["auto"], widths: widths || ["auto"],
// You can add "avif" or "jpeg" here if you’d like! formats,
formats: ["webp", "png"],
outputDir: path.join(eleventyConfig.dir.output, "img"), // Advanced usage note: `eleventyConfig.dir` works here because we’re using addPlugin. outputDir: path.join(eleventyConfig.dir.output, "img"), // Advanced usage note: `eleventyConfig.dir` works here because we’re using addPlugin.
}); });
// TODO loading=eager and fetchpriority=high
let imageAttributes = { let imageAttributes = {
alt, alt,
sizes, sizes,