From 89afffd565efdb5e977f40cb315a34799e8268cb Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Mon, 23 Jan 2023 14:39:36 -0600 Subject: [PATCH] More tweaks and CSS instructions --- _includes/layouts/base.njk | 27 ++++++++++++++++++++++++--- blog/fourthpost/fourthpost.md | 2 +- eleventy.config.js | 21 +++++++++++++++------ package.json | 13 ++++++++++--- public/css/message-box.css | 4 ++-- 5 files changed, 52 insertions(+), 15 deletions(-) diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk index 1eb00fa..03f3766 100644 --- a/_includes/layouts/base.njk +++ b/_includes/layouts/base.njk @@ -6,15 +6,36 @@ {{ 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! #} {#- #} +{#- + Choices for CSS: + + 1. External files (best with local dev server live reload) +#} - + {# addPassthroughCopy file #} - - +{#- + 2. Inlined (speediest in production) + + 3. Concatenate CSS to one file (slower than 2 but faster than 1): + https://www.11ty.dev/docs/quicktips/concatenate/ + 4. Use a bundler + e.g. Vite https://www.11ty.dev/docs/server-vite/ + Or search for additional community plugins for esbuild, rollup, webpack, etc. +#} diff --git a/blog/fourthpost/fourthpost.md b/blog/fourthpost/fourthpost.md index 2f2e9c7..8149f7c 100644 --- a/blog/fourthpost/fourthpost.md +++ b/blog/fourthpost/fourthpost.md @@ -8,7 +8,7 @@ Leverage agile frameworks to provide a robust synopsis for high level overviews. 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. -{% imageOptimized "./possum.png", "A possum parent and two possum kids hanging from the iconic red balloon" %} +{% image "./possum.png", "A possum parent and two possum kids hanging from the iconic red balloon" %} ## Section Header diff --git a/eleventy.config.js b/eleventy.config.js index 6175ab0..0522f67 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -15,6 +15,8 @@ function relativeToInputPath(inputPath, relativeFilePath) { } module.exports = function(eleventyConfig) { + // Don’t process these files + // https://www.11ty.dev/docs/ignores/#configuration-api eleventyConfig.ignores.add("README.md"); // Copy the contents of the `public` folder to the output folder @@ -24,21 +26,28 @@ module.exports = function(eleventyConfig) { "./node_modules/prismjs/themes/prism-okaidia.css": "/css/prism-okaidia.css" }); + // Run Eleventy when these files change: + // https://www.11ty.dev/docs/watch-serve/#add-your-own-watch-targets + + // Process content images to the image pipeline. + eleventyConfig.addWatchTarget("**/*.(png|jpeg)"); + // Plugins eleventyConfig.addPlugin(pluginRss); eleventyConfig.addPlugin(pluginSyntaxHighlight); eleventyConfig.addPlugin(pluginNavigation); eleventyConfig.addPlugin(EleventyHtmlBasePlugin); - // Shortcodes + // Eleventy Image shortcode + // https://www.11ty.dev/docs/plugins/image/ eleventyConfig.addPlugin(eleventyConfig => { - eleventyConfig.addAsyncShortcode("imageOptimized", async function imageShortcode(src, alt, sizes) { + eleventyConfig.addAsyncShortcode("image", async function imageShortcode(src, alt, sizes) { let file = relativeToInputPath(this.page.inputPath, src); let metadata = await eleventyImage(file, { widths: ["auto"], - // Can add "avif" or "jpeg" here if you’d like! + // You can add "avif" or "jpeg" here if you’d like! formats: ["webp", "png"], - outputDir: path.join(eleventyConfig.dir.output, "img"), + outputDir: path.join(eleventyConfig.dir.output, "img"), // Advanced usage note: `eleventyConfig.dir` works here because we’re using addPlugin. }); let imageAttributes = { alt, @@ -48,7 +57,7 @@ module.exports = function(eleventyConfig) { }; return eleventyImage.generateHTML(metadata, imageAttributes); }); - }) + }); // Filters eleventyConfig.addFilter("readableDate", (dateObj, format = "dd LLLL yyyy") => { @@ -103,7 +112,7 @@ module.exports = function(eleventyConfig) { }); }); - // Features to make your build faster (as you need them) + // Features to make your build faster (when you need them) // If your passthrough copy gets heavy and cumbersome, add this line // to emulate the file copy on the dev server. Learn more: diff --git a/package.json b/package.json index 9f20dae..77228e8 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "eleventy-base-blog", - "version": "7.0.0", - "description": "A starter repository for a blog web site using the Eleventy static site generator.", + "version": "8.0.0", + "description": "A starter repository for a blog web site using the Eleventy site generator.", "scripts": { "build": "npx @11ty/eleventy", "build-ghpages": "npx @11ty/eleventy --pathprefix=/eleventy-base-blog/", @@ -20,11 +20,18 @@ "url": "https://zachleat.com/" }, "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/11ty" + }, "bugs": { "url": "https://github.com/11ty/eleventy-base-blog/issues" }, "homepage": "https://github.com/11ty/eleventy-base-blog#readme", - "dependencies": { + "devDependencies": { "@11ty/eleventy": "2.0.0-beta.1", "@11ty/eleventy-img": "^2.0.1", "@11ty/eleventy-navigation": "^0.3.5", diff --git a/public/css/message-box.css b/public/css/message-box.css index dd3ddac..d81b9af 100644 --- a/public/css/message-box.css +++ b/public/css/message-box.css @@ -7,8 +7,8 @@ color: var(--color-gray-90); padding: 1em 0.625em; /* 16px 10px /16 */ } -.message-box ol:only-child { - margin: 0; +.message-box ol { + margin-top: 0; } @media (prefers-color-scheme: dark) {