From 87f15a24bdcfff79c9556a9b3c221c67215e527f Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Mon, 23 Jan 2023 12:34:39 -0600 Subject: [PATCH] A few more tweaks --- README.md | 4 +-- blog/{ => fourthpost}/fourthpost.md | 2 +- eleventy.config.js | 55 ++++++++++++++++------------- package.json | 6 ++-- 4 files changed, 35 insertions(+), 32 deletions(-) rename blog/{ => fourthpost}/fourthpost.md (89%) diff --git a/README.md b/README.md index 7dfd105..482bfbf 100644 --- a/README.md +++ b/README.md @@ -15,9 +15,9 @@ A starter repository showing how to build a blog with the [Eleventy](https://git 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! - [Get your own Eleventy web site on Vercel](https://vercel.com/import/project?template=11ty%2Feleventy-base-blog) - -Or, read more about [Deploying an Eleventy project](https://www.11ty.dev/docs/deployment/). +- Read more about [Deploying an Eleventy project](https://www.11ty.dev/docs/deployment/) to the web. ## Getting Started diff --git a/blog/fourthpost.md b/blog/fourthpost/fourthpost.md similarity index 89% rename from blog/fourthpost.md rename to blog/fourthpost/fourthpost.md index e44ece8..2f2e9c7 100644 --- a/blog/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 "./fourthpost/possum.png", "A possum parent and two possum kids hanging from the iconic red balloon" %} +{% imageOptimized "./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 f72e4a8..6175ab0 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -5,8 +5,8 @@ const markdownItAnchor = require("markdown-it-anchor"); const pluginRss = require("@11ty/eleventy-plugin-rss"); const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight"); const pluginNavigation = require("@11ty/eleventy-navigation"); -const { EleventyHtmlBasePlugin } = require("@11ty/eleventy"); const eleventyImage = require("@11ty/eleventy-img"); +const { EleventyHtmlBasePlugin } = require("@11ty/eleventy"); function relativeToInputPath(inputPath, relativeFilePath) { let split = inputPath.split(path.sep); @@ -24,10 +24,6 @@ module.exports = function(eleventyConfig) { "./node_modules/prismjs/themes/prism-okaidia.css": "/css/prism-okaidia.css" }); - // If your passthrough copy gets heavy and cumbersome, add this line - // to emulate the file copy on the dev server. Learn more: https://www.11ty.dev/docs/copy/#emulate-passthrough-copy-during-serve - // eleventyConfig.setServerPassthroughCopyBehavior("passthrough"); - // Plugins eleventyConfig.addPlugin(pluginRss); eleventyConfig.addPlugin(pluginSyntaxHighlight); @@ -35,21 +31,24 @@ module.exports = function(eleventyConfig) { eleventyConfig.addPlugin(EleventyHtmlBasePlugin); // Shortcodes - eleventyConfig.addAsyncShortcode("imageOptimized", async function imageShortcode(src, alt, sizes) { - let file = relativeToInputPath(this.page.inputPath, src); - let metadata = await eleventyImage(file, { - widths: ["auto"], - formats: ["webp", "png"], // Can add "avif" or "jpeg" here - outputDir: "_site/img/" + eleventyConfig.addPlugin(eleventyConfig => { + eleventyConfig.addAsyncShortcode("imageOptimized", 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! + formats: ["webp", "png"], + outputDir: path.join(eleventyConfig.dir.output, "img"), + }); + let imageAttributes = { + alt, + sizes, + loading: "lazy", + decoding: "async", + }; + return eleventyImage.generateHTML(metadata, imageAttributes); }); - let imageAttributes = { - alt, - sizes, - loading: "lazy", - decoding: "async", - }; - return eleventyImage.generateHTML(metadata, imageAttributes); - }); + }) // Filters eleventyConfig.addFilter("readableDate", (dateObj, format = "dd LLLL yyyy") => { @@ -104,6 +103,14 @@ module.exports = function(eleventyConfig) { }); }); + // Features to make your build faster (as 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: + // https://www.11ty.dev/docs/copy/#emulate-passthrough-copy-during-serve + + // eleventyConfig.setServerPassthroughCopyBehavior("passthrough"); + return { // Control which files Eleventy will process // e.g.: *.md, *.njk, *.html, *.liquid @@ -126,10 +133,11 @@ module.exports = function(eleventyConfig) { includes: "_includes", data: "_data", output: "_site" - } + }, // ----------------------------------------------------------------- - // Optional: + // Optional items: + // ----------------------------------------------------------------- // If your site deploys to a subdirectory, change `pathPrefix`. // Read more: https://www.11ty.dev/docs/config/#deploy-to-a-subdirectory-with-a-path-prefix @@ -137,9 +145,6 @@ module.exports = function(eleventyConfig) { // When paired with the HTML plugin https://www.11ty.dev/docs/plugins/html-base/ // it will transform any absolute URLs in your HTML to include this // folder name and does **not** affect where things go in the output folder. - - // Optional (default is shown) - // pathPrefix: "/", - // ----------------------------------------------------------------- + pathPrefix: "/", }; }; diff --git a/package.json b/package.json index efe838a..9f20dae 100644 --- a/package.json +++ b/package.json @@ -5,12 +5,10 @@ "scripts": { "build": "npx @11ty/eleventy", "build-ghpages": "npx @11ty/eleventy --pathprefix=/eleventy-base-blog/", - "bench": "DEBUG=Eleventy:Benchmark* npx @11ty/eleventy", - "watch": "npx @11ty/eleventy --watch", "serve": "npx @11ty/eleventy --serve", "start": "npx @11ty/eleventy --serve --quiet", - "start-ghpages": "npx @11ty/eleventy --serve --quiet --pathprefix=/eleventy-base-blog/", - "debug": "DEBUG=Eleventy* npx @11ty/eleventy" + "debug": "DEBUG=Eleventy* npx @11ty/eleventy", + "benchmark": "DEBUG=Eleventy:Benchmark* npx @11ty/eleventy" }, "repository": { "type": "git",