finally fix blog images, disable dark mode

_includes/layouts/post.njk

@@ -1,6 +1,8 @@
 ---
 layout: layouts/base.njk
 ---
+{%- css %}{% include "public/css/blog.css" %}{%- endcss %}
+
 {# Only include the syntax highlighter CSS on blog posts #}
 {%- css %}{% include "node_modules/prismjs/themes/prism-okaidia.css" %}{% endcss %}
 {%- css %}{% include "public/css/prism-diff.css" %}{%- endcss %}

content/blog/hello-world/hello-world.md

@@ -7,7 +7,7 @@ tags: website updates
 
 Several years ago, I bought the domain for this website planning of turning it into some sort of a personal portfolio and blogging website. Then I quickly made a very simple page with my face, name and link to my social accounts. It's very crude and has no useful content whatsoever, but I'm still quite satisfied with what I've managed to accomplish that time. I just have slowly add more functionality and content over time to turn it into an awesome blog, right? ...Right?
 
-{% image "./initial-website.png", "What this website looks like before." %}
+{% blogImage "./initial-website.png", "What this website looks like before." %}
 
 Well, it should be obvious by now that I haven't made any improvements to it since its initial creation. It's not because I am a perfectionist who eventually got overwhelmed trying to make the perfect blog site, or a super-busy individual who has a lot of responsibilities in life. I just somehow lost interest in it and moved on to other things that hold my interest more. Also, I vaguely felt that I don't have anything to show for yet. I don't have stories that other people might find interesting to read.
 

eleventy.config.images.js

@@ -11,24 +11,52 @@ module.exports = eleventyConfig => {
 
 	// Eleventy Image shortcode
 	// https://www.11ty.dev/docs/plugins/image/
-	eleventyConfig.addAsyncShortcode("image", async function imageShortcode(src, alt) {
+	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 metadata = await eleventyImage(file, {
-			widths: [316, 460, 768],
+			widths: widths || ["auto"],
 			formats,
 			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 = {
 			alt,
-			sizes: "(max-width: 768px) 100vw, 768px",
+			sizes,
 			loading: "lazy",
 			decoding: "async",
 		};
 		return eleventyImage.generateHTML(metadata, imageAttributes);
 	});
+
+  eleventyConfig.addAsyncShortcode('blogImage', async function imageShortcode(src, caption) {
+		let file = relativeToInputPath(this.page.inputPath, src)
+
+		let metadata = await eleventyImage(file, {
+			widths: [360, 576, 768, 992, 'auto'],
+			formats: ['auto'],
+			outputDir: path.join(eleventyConfig.dir.output, 'img'),
+		})
+
+    const [ format ] = Object.keys(metadata)
+    const images = metadata[format]
+    const srcUrl = images[images.length - 1].url
+    const srcset = metadata[format].map(m => m.srcset).join(', ')
+
+    return `
+      <figure class="blog-figure">
+        <img
+          loading="lazy"
+          decoding="async"
+          src="${srcUrl}"
+          srcset="${srcset}"
+          sizes="(max-width: 800px) 90vw, 40em"
+        />
+        <figcaption>${caption}</figcaption>
+      </figure>
+    `
+	})
 };

public/css/blog.css

@@ -0,0 +1,9 @@
+.blog-figure {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.blog-figure figcaption {
+  text-align: center;
+  font-size: smaller;
+}

public/css/index.css

@@ -20,20 +20,19 @@
 	--syntax-tab-size: 2;
 }
 
-@media (prefers-color-scheme: dark) {
+/*@media (prefers-color-scheme: dark) {
 	:root {
 		--color-gray-20: #e0e0e0;
 		--color-gray-50: #C0C0C0;
 		--color-gray-90: #dad8d8;
 
-		/* --text-color is assigned to --color-gray-_ above */
 		--text-color-link: #1493fb;
 		--text-color-link-active: #6969f7;
 		--text-color-link-visited: #a6a6f8;
 
 		--background-color: #15202b;
 	}
-}
+}*/
 
 
 /* Global stylesheet */