@daz4126/swifty 3.0.0 → 3.1.0

package/README.md

@@ -7,7 +7,8 @@ Swifty uses convention over configuration to make it super simple to build blazi
 ## Features
 
 - **Markdown pages** with YAML front matter
-- **Automatic image optimization** to WebP
+- **Automatic image optimization** to responsive WebP images with `srcset`
+- **HTML, CSS, and JS minification** during production builds
 - **Layouts and partials** for reusable templates
 - **Auto-injected CSS/JS** from your css/ and js/ folders
 - **Code syntax highlighting** via highlight.js
@@ -19,6 +20,7 @@ Swifty uses convention over configuration to make it super simple to build blazi
 - **Pagination** for folders with many pages
 - **Data files** - Load JSON/YAML data and use in templates
 - **Open Graph tags** - Auto-generated social sharing meta tags
+- **404 page convention** - `pages/404.md` builds to `dist/404.html`
 - **Word count & reading time** - Auto-calculated for blog posts
 - **Previous/next navigation** - Auto-generated links between sibling pages
 - **[Eta templating](https://eta.js.org/)** - Full JavaScript in templates with EJS syntax
@@ -45,7 +47,7 @@ your-site/
 ├── data/           # JSON/YAML data files
 ├── css/            # Stylesheets (auto-injected)
 ├── js/             # JavaScript (auto-injected)
-├── images/         # Images (auto-optimized to WebP)
+├── images/         # Images (auto-optimized to responsive WebP)
 ├── template.html   # Base HTML template
 └── config.yaml     # Site configuration
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@daz4126/swifty",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "main": "index.js",
   "type": "module",
   "bin": {

package/src/assets.js

@@ -1,10 +1,14 @@
+import crypto from "crypto";
 import fs from "fs/promises";
-import fsExtra from "fs-extra";
 import path from "path";
-import sharp from "sharp";
 import { fileURLToPath } from "url";
+
+import fsExtra from "fs-extra";
+import sharp from "sharp";
+
 import { dirs, defaultConfig } from "./config.js";
 import { mapLimit } from "./concurrency.js";
+import { minifyCss, minifyJs } from "./minify.js";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -23,9 +27,72 @@ const validExtensions = {
 };
 
 const optimizableImageExtensions = [".jpg", ".jpeg", ".png"];
+const responsiveImageMap = new Map();
 
 const getBuildConcurrency = () => defaultConfig.build_concurrency || 16;
 const navigationEnabled = () => defaultConfig.morphing !== false;
+const minificationEnabled = (type) =>
+  defaultConfig.minify !== false && defaultConfig[`minify_${type}`] !== false;
+const normalizeImageUrl = (url) => (url || "").split(/[?#]/)[0];
+
+const getResponsiveWidths = (originalWidth) => {
+  const maxWidth = defaultConfig.max_image_width || 800;
+  const configuredWidths = Array.isArray(defaultConfig.responsive_image_widths)
+    ? defaultConfig.responsive_image_widths
+    : [320, 640, maxWidth];
+  const outputWidth =
+    originalWidth > 0 ? Math.min(originalWidth, maxWidth) : maxWidth;
+  const widths = configuredWidths
+    .map((width) => Number(width))
+    .filter((width) => Number.isInteger(width) && width > 0)
+    .map((width) => Math.min(width, maxWidth));
+
+  widths.push(outputWidth);
+
+  return [...new Set(widths)]
+    .filter((width) => !originalWidth || width <= originalWidth)
+    .sort((a, b) => a - b);
+};
+
+const variantFilename = (filename, ext, width, outputWidth) =>
+  width === outputWidth
+    ? `${path.basename(filename, ext)}.webp`
+    : `${path.basename(filename, ext)}-${width}.webp`;
+
+const registerResponsiveImage = (filename, ext, variants) => {
+  const basename = path.basename(filename, ext);
+  const entry = {
+    src: `/images/${basename}.webp`,
+    srcset: variants
+      .map((variant) => `${variant.url} ${variant.width}w`)
+      .join(", "),
+    sizes: defaultConfig.responsive_image_sizes || "100vw",
+    variants,
+  };
+
+  responsiveImageMap.set(normalizeImageUrl(`/images/${filename}`), entry);
+  responsiveImageMap.set(normalizeImageUrl(entry.src), entry);
+};
+
+const getResponsiveImage = (url) =>
+  responsiveImageMap.get(normalizeImageUrl(url)) || null;
+
+const getNavigationAssetName = async (filename = "swifty-navigation.js") => {
+  const sourcePath = path.join(clientAssetsDir, filename);
+  const content = await fs.readFile(sourcePath);
+  const hash = crypto
+    .createHash("sha256")
+    .update(content)
+    .digest("hex")
+    .slice(0, 10);
+  const ext = path.extname(filename);
+  return `${path.basename(filename, ext)}.${hash}${ext}`;
+};
+
+const getNavigationScriptSrc = async () => {
+  if (!navigationEnabled()) return "";
+  return `/swifty/${await getNavigationAssetName()}`;
+};
 
 const isDestinationFresh = async (source, destination) => {
   try {
@@ -48,27 +115,76 @@ const copyIfStale = async (source, destination) => {
   return true;
 };
 
-const optimizeImageToWebp = async (source, destination) => {
+const optimizeImageVariantToWebp = async (source, destination, width) => {
   if (await isDestinationFresh(source, destination)) {
     return false;
   }
 
-  const image = sharp(source);
-  const metadata = await image.metadata();
-  const originalWidth = metadata.width || 0;
-  const maxWidth = defaultConfig.max_image_width || 800;
   const imageQuality = defaultConfig.image_quality || 80;
-  const resizeOptions =
-    originalWidth > 0 ? { width: Math.min(originalWidth, maxWidth) } : {};
 
-  await image
-    .resize(resizeOptions)
+  await sharp(source)
+    .resize({ width })
     .toFormat("webp", { quality: imageQuality })
     .toFile(destination);
 
   return true;
 };
 
+const optimizeImageToWebp = async (source, imagesFolder, filename, ext) => {
+  const metadata = await sharp(source).metadata();
+  const originalWidth = metadata.width || 0;
+  const maxWidth = defaultConfig.max_image_width || 800;
+  const outputWidth =
+    originalWidth > 0 ? Math.min(originalWidth, maxWidth) : maxWidth;
+  const variants = getResponsiveWidths(originalWidth).map((width) => {
+    const file = variantFilename(filename, ext, width, outputWidth);
+    return {
+      width,
+      file,
+      url: `/images/${file}`,
+      destination: path.join(imagesFolder, file),
+    };
+  });
+
+  const results = await Promise.all(
+    variants.map((variant) =>
+      optimizeImageVariantToWebp(source, variant.destination, variant.width),
+    ),
+  );
+
+  registerResponsiveImage(
+    filename,
+    ext,
+    variants.map(({ width, file, url }) => ({ width, file, url })),
+  );
+
+  return results.some(Boolean);
+};
+
+const processTextAsset = async (source, destination, type) => {
+  const content = await fs.readFile(source, "utf-8");
+  const nextContent =
+    type === "css" && minificationEnabled("css")
+      ? minifyCss(content)
+      : type === "js" && minificationEnabled("js")
+        ? minifyJs(content)
+        : content;
+
+  try {
+    const currentContent = await fs.readFile(destination, "utf-8");
+    if (
+      currentContent === nextContent &&
+      (await isDestinationFresh(source, destination))
+    ) {
+      return false;
+    }
+  } catch (err) {}
+
+  await fsExtra.ensureDir(path.dirname(destination));
+  await fs.writeFile(destination, nextContent);
+  return true;
+};
+
 const ensureAndCopy = async (source, destination, validExts) => {
   if (await fsExtra.pathExists(source)) {
     await fsExtra.ensureDir(destination);
@@ -77,9 +193,15 @@ const ensureAndCopy = async (source, destination, validExts) => {
     await Promise.all(
       files
         .filter((file) => validExts.includes(path.extname(file).toLowerCase()))
-        .map((file) =>
-          fsExtra.copy(path.join(source, file), path.join(destination, file)),
-        ),
+        .map((file) => {
+          const ext = path.extname(file).toLowerCase();
+          const type = validExtensions.css.includes(ext) ? "css" : "js";
+          return processTextAsset(
+            path.join(source, file),
+            path.join(destination, file),
+            type,
+          );
+        }),
     );
     console.log(`Copied valid files from ${source} to ${destination}`);
   } else {
@@ -99,10 +221,14 @@ const copyNavigationAssets = async (outputDir = dirs.dist) => {
     files,
     async (file) => {
       const sourcePath = path.join(clientAssetsDir, file);
-      const destinationPath = path.join(destination, file);
+      const destinationFilename =
+        file === "swifty-navigation.js"
+          ? await getNavigationAssetName(file)
+          : file;
+      const destinationPath = path.join(destination, destinationFilename);
       const copied = await copyIfStale(sourcePath, destinationPath);
       if (copied) {
-        console.log(`Copied Swifty navigation asset ${file}`);
+        console.log(`Copied Swifty navigation asset ${destinationFilename}`);
       }
     },
     getBuildConcurrency(),
@@ -119,6 +245,8 @@ const copyAssets = async (outputDir = dirs.dist) => {
   await copyNavigationAssets(outputDir);
 };
 async function optimizeImages(outputDir = dirs.dist) {
+  responsiveImageMap.clear();
+
   try {
     if (!(await fsExtra.pathExists(dirs.images))) {
       console.log(`No ${path.basename(dirs.images)} found in ${dirs.images}`);
@@ -147,14 +275,14 @@ async function optimizeImages(outputDir = dirs.dist) {
           return;
         }
 
-        const optimizedPath = path.join(
+        const optimized = await optimizeImageToWebp(
+          filePath,
           imagesFolder,
-          `${path.basename(file, ext)}.webp`,
+          file,
+          ext,
         );
-
-        const optimized = await optimizeImageToWebp(filePath, optimizedPath);
         if (optimized) {
-          console.log(`Optimized ${file} -> ${optimizedPath}`);
+          console.log(`Optimized ${file}`);
         }
       },
       getBuildConcurrency(),
@@ -217,8 +345,11 @@ const copySingleAsset = async (filePath, outputDir = dirs.dist) => {
     return false;
   }
 
-  await fsExtra.ensureDir(destDir);
-  await fsExtra.copy(filePath, path.join(destDir, filename));
+  await processTextAsset(
+    filePath,
+    path.join(destDir, filename),
+    validExtensions.css.includes(ext) ? "css" : "js",
+  );
   console.log(`Copied ${filename}`);
   return true;
 };
@@ -240,13 +371,27 @@ const optimizeSingleImage = async (filePath, outputDir = dirs.dist) => {
     return true;
   }
 
-  // Optimize jpg/jpeg/png to webp
-  const optimizedPath = path.join(imagesFolder, `${path.basename(filename, ext)}.webp`);
-  const optimized = await optimizeImageToWebp(filePath, optimizedPath);
+  const optimized = await optimizeImageToWebp(
+    filePath,
+    imagesFolder,
+    filename,
+    ext,
+  );
   if (optimized) {
-    console.log(`Optimized ${filename} -> ${path.basename(optimizedPath)}`);
+    console.log(`Optimized ${filename}`);
   }
   return true;
 };
 
-export { copyAssets, optimizeImages, getCssImports, getJsImports, getCssPreloads, getJsPreloads, copySingleAsset, optimizeSingleImage };
+export {
+  copyAssets,
+  optimizeImages,
+  getCssImports,
+  getJsImports,
+  getCssPreloads,
+  getJsPreloads,
+  copySingleAsset,
+  optimizeSingleImage,
+  getNavigationScriptSrc,
+  getResponsiveImage,
+};

package/src/build.js

@@ -1,3 +1,5 @@
+import { argv } from "process";
+import { fileURLToPath } from "url";
 import { copyAssets, optimizeImages } from "./assets.js";
 import { generatePages, createPages, addLinks } from "./pages.js";
 import { generateRssFeeds } from "./rss.js";
@@ -67,3 +69,12 @@ export default async function build(outputDir = dirs.dist) {
     process.stdout.write('\n');
   }
 }
+
+// Run the build when invoked directly (e.g. `npm run build`, `npm start`),
+// not when imported as a module (e.g. by cli.js).
+if (argv[1] && fileURLToPath(import.meta.url) === argv[1]) {
+  build().catch((error) => {
+    console.error("Build failed:", error);
+    process.exit(1);
+  });
+}

package/src/config.js

@@ -40,6 +40,14 @@ const builtInDefaults = {
   // Image optimization settings
   max_image_width: 800,
   image_quality: 80,
+  responsive_image_widths: [320, 640, 800],
+  responsive_image_sizes: '100vw',
+  default_og_image: '',
+  // Output minification
+  minify: true,
+  minify_html: true,
+  minify_css: true,
+  minify_js: true,
   // LiveReload and watcher settings
   livereload_port: 35729,
   watcher_delay: 100,

package/src/init.js

@@ -19,7 +19,14 @@ link_class: swifty_link
 tag_class: swifty_tag
 default_layout_name: default
 default_link_name: links
-max_image_size: 800
+max_image_width: 800
+responsive_image_widths:
+  - 320
+  - 640
+  - 800
+responsive_image_sizes: 100vw
+default_og_image: ""
+minify: true
 morphing: true
 prefetching: true
 morph_target: main

package/src/layout.js

@@ -2,7 +2,13 @@ import fs from "fs/promises";
 import fsExtra from "fs-extra";
 import path from "path";
 import { dirs, baseDir, defaultConfig } from "./config.js";
-import { getCssImports, getJsImports, getCssPreloads, getJsPreloads } from "./assets.js";
+import {
+  getCssImports,
+  getJsImports,
+  getCssPreloads,
+  getJsPreloads,
+  getNavigationScriptSrc,
+} from "./assets.js";
 
 const layoutCache = new Map();
 let template = null;
@@ -14,8 +20,6 @@ const escapeAttr = (value) =>
     .replace(/</g, "&lt;")
     .replace(/>/g, "&gt;");
 
-const navigationEnabled = () => defaultConfig.morphing !== false;
-
 const getLayout = async (layoutName) => {
   if (!layoutName) return null;
   if (!layoutCache.has(layoutName)) {
@@ -41,8 +45,9 @@ const createTemplate = async () => {
     '<link rel="dns-prefetch" href="https://cdnjs.cloudflare.com">',
   ].join('\n');
 
-  const navigationScript = navigationEnabled()
-    ? `<script type="module" src="/swifty/swifty-navigation.js" data-swifty-navigation data-target="${escapeAttr(defaultConfig.morph_target || "main")}" data-prefetching="${defaultConfig.prefetching === false ? "off" : "intent"}" data-cache-size="${escapeAttr(defaultConfig.navigation_cache_size || 20)}" data-cache-ttl="${escapeAttr(defaultConfig.navigation_cache_ttl || 15)}"></script>`
+  const navigationScriptSrc = await getNavigationScriptSrc();
+  const navigationScript = navigationScriptSrc
+    ? `<script type="module" src="${navigationScriptSrc}" data-swifty-navigation data-target="${escapeAttr(defaultConfig.morph_target || "main")}" data-prefetching="${defaultConfig.prefetching === false ? "off" : "intent"}" data-cache-size="${escapeAttr(defaultConfig.navigation_cache_size || 20)}" data-cache-ttl="${escapeAttr(defaultConfig.navigation_cache_ttl || 15)}"></script>`
     : '';
   const livereloadScript = process.env.SWIFTY_WATCH
     ? `<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':${defaultConfig.livereload_port || 35729}/livereload.js?snipver=1"></' + 'script>')</script>`
@@ -56,7 +61,7 @@ const createTemplate = async () => {
   const css = await getCssImports();
   const js = await getJsImports();
   const imports = css + js;
-  const highlightCSS = `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/monokai-sublime.min.css">`;
+  const highlightCSS = `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/monokai-sublime.min.css">`;
 
   // Order: preconnect hints -> preloads -> actual assets -> scripts
   const template = templateContent.replace('</head>', `${preconnectHints}\n${preloads}\n${navigationScript}\n${highlightCSS}\n${imports}\n${livereloadScript}\n</head>`);

package/src/markdown.js

@@ -0,0 +1,20 @@
+// markdown.js
+// Central marked instance with syntax highlighting wired up via highlight.js.
+// Importing marked from here (instead of "marked" directly) guarantees the
+// highlight extension is configured before any markdown is parsed.
+import { marked } from "marked";
+import { markedHighlight } from "marked-highlight";
+import hljs from "highlight.js";
+
+marked.use(
+  markedHighlight({
+    emptyLangClass: "hljs",
+    langPrefix: "hljs language-",
+    highlight(code, lang) {
+      const language = hljs.getLanguage(lang) ? lang : "plaintext";
+      return hljs.highlight(code, { language }).value;
+    },
+  }),
+);
+
+export { marked };

package/src/minify.js

@@ -0,0 +1,129 @@
+const protectBlocks = (content, pattern) => {
+  const blocks = [];
+  const protectedContent = content.replace(pattern, (match) => {
+    const token = `__SWIFTY_MINIFY_BLOCK_${blocks.length}__`;
+    blocks.push(match);
+    return token;
+  });
+
+  return {
+    content: protectedContent,
+    restore: (value) =>
+      value.replace(/__SWIFTY_MINIFY_BLOCK_(\d+)__/g, (_, index) => blocks[index]),
+  };
+};
+
+const protectCssValues = (css) => {
+  const blocks = [];
+  let content = "";
+
+  const protect = (start, end) => {
+    const token = `__SWIFTY_MINIFY_BLOCK_${blocks.length}__`;
+    blocks.push(css.slice(start, end));
+    content += token;
+    return end;
+  };
+
+  const readStringEnd = (start) => {
+    const quote = css[start];
+    let index = start + 1;
+
+    while (index < css.length) {
+      if (css[index] === "\\") {
+        index += 2;
+        continue;
+      }
+      if (css[index] === quote) return index + 1;
+      index += 1;
+    }
+
+    return css.length;
+  };
+
+  const readUrlEnd = (start) => {
+    let index = start + 4;
+
+    while (index < css.length) {
+      const char = css[index];
+      if (char === "\"" || char === "'") {
+        index = readStringEnd(index);
+        continue;
+      }
+      if (char === "\\") {
+        index += 2;
+        continue;
+      }
+      if (char === ")") return index + 1;
+      index += 1;
+    }
+
+    return css.length;
+  };
+
+  for (let index = 0; index < css.length; ) {
+    const char = css[index];
+    const isUrl = css.slice(index, index + 4).toLowerCase() === "url(";
+
+    if (char === "/" && css[index + 1] === "*") {
+      const commentEnd = css.indexOf("*/", index + 2);
+      const end = commentEnd === -1 ? css.length : commentEnd + 2;
+      content += css.slice(index, end);
+      index = end;
+    } else if (char === "\"" || char === "'") {
+      index = protect(index, readStringEnd(index));
+    } else if (isUrl) {
+      index = protect(index, readUrlEnd(index));
+    } else {
+      content += char;
+      index += 1;
+    }
+  }
+
+  return {
+    content,
+    restore: (value) =>
+      value.replace(/__SWIFTY_MINIFY_BLOCK_(\d+)__/g, (_, index) => blocks[index]),
+  };
+};
+
+const minifyCss = (css) => {
+  const values = protectCssValues(css);
+
+  const minified = values.content
+    .replace(/\/\*[\s\S]*?\*\//g, "")
+    .replace(/\s+/g, " ")
+    .replace(/\s*([{}:;,])\s*/g, "$1")
+    .replace(/;}/g, "}")
+    .trim();
+
+  return values.restore(minified);
+};
+
+const minifyJs = (js) => {
+  const strings = protectBlocks(js, /(["'`])(?:\\[\s\S]|(?!\1)[^\\])*\1/g);
+
+  const minified = strings.content
+    .split("\n")
+    .map((line) => line.trim())
+    .filter(Boolean)
+    .join("\n");
+
+  return strings.restore(minified);
+};
+
+const minifyHtml = (html) => {
+  const blocks = protectBlocks(
+    html,
+    /<(pre|code|textarea|script|style)\b[^>]*>[\s\S]*?<\/\1>/gi,
+  );
+
+  const minified = blocks.content
+    .replace(/<!--(?!\[if|<!|>)[\s\S]*?-->/g, "")
+    .replace(/\s{2,}/g, " ")
+    .replace(/>\s+</g, "><")
+    .trim();
+
+  return blocks.restore(minified);
+};
+
+export { minifyCss, minifyHtml, minifyJs };

package/src/pages.js

@@ -1,14 +1,17 @@
 // pages.js
+import fs from "fs/promises";
+import path from "path";
+
+import fsExtra from "fs-extra";
+import matter from "gray-matter";
+
 import { replacePlaceholders } from "./partials.js";
 import { dirs, defaultConfig, loadConfig } from "./config.js";
 import { getTemplate, applyLayoutAndWrapContent } from "./layout.js";
 import { chunkPages, generatePaginationNav } from "./pagination.js";
-import { marked } from "marked";
-import matter from "gray-matter";
-import fs from "fs/promises";
-import fsExtra from "fs-extra";
-import path from "path";
+import { marked } from "./markdown.js";
 import { mapLimit } from "./concurrency.js";
+import { minifyHtml } from "./minify.js";
 
 // Returns stats if valid (directory or .md file), null otherwise
 const getValidStats = async (filePath) => {
@@ -47,6 +50,8 @@ const pageIndexUrls = new Set();
 const partialExtensions = [".md", ".html"];
 
 const getBuildConcurrency = () => defaultConfig.build_concurrency || 16;
+const minificationEnabled = () =>
+  defaultConfig.minify !== false && defaultConfig.minify_html !== false;
 
 const addToTagMap = (tag, page) => {
   if (!tagsMap.has(tag)) tagsMap.set(tag, []);
@@ -78,6 +83,7 @@ const generatePages = async (sourceDir, baseDir = sourceDir, parent) => {
 
         const root = file.name === "index.md" && !parent;
         const relativePath = path.relative(baseDir, filePath).replace(/\\/g, "/");
+        const notFound = relativePath === "404.md" && !parent;
         const finalPath = `/${relativePath.replace(/\.md$/, "")}`;
         const name = root
           ? "Home"
@@ -99,11 +105,12 @@ const generatePages = async (sourceDir, baseDir = sourceDir, parent) => {
           filePath,
           filename: file.name.replace(/\.md$/, ""),
           url: root ? "/" : finalPath,
-          nav: !parent && !root,
+          nav: !parent && !root && !notFound,
           parent: parent
             ? { title: parent.meta.title, url: parent.url }
             : undefined,
           folder: isDirectory,
+          notFound,
           title: name,
           createdAtObj: stats.birthtime,
           updatedAtObj: stats.mtime,
@@ -126,6 +133,9 @@ const generatePages = async (sourceDir, baseDir = sourceDir, parent) => {
           const markdownContent = await fs.readFile(filePath, "utf-8");
           const { data, content } = matter(markdownContent);
           Object.assign(page, { meta: { ...page.meta, ...data }, content });
+          if (notFound && data.sitemap === undefined) {
+            page.meta.sitemap = false;
+          }
           page.title = page.meta.title || page.title;
           page.name = page.meta.title || page.name;
 
@@ -342,9 +352,12 @@ const createPages = async (pages, distDir = dirs.dist) => {
   await mapLimit(
     pages,
     async (page) => {
-      const html = await render(page);
-      const pageDir = path.join(distDir, page.url);
-      const pagePath = path.join(distDir, page.url, "index.html");
+      const renderedHtml = await render(page);
+      const html = minificationEnabled() ? minifyHtml(renderedHtml) : renderedHtml;
+      const pageDir = page.notFound ? distDir : path.join(distDir, page.url);
+      const pagePath = page.notFound
+        ? path.join(distDir, "404.html")
+        : path.join(distDir, page.url, "index.html");
       await fsExtra.ensureDir(pageDir);
       await fs.writeFile(pagePath, html);
       if (page.folder) {
@@ -360,8 +373,9 @@ const createPages = async (pages, distDir = dirs.dist) => {
 };
 
 const addLinks = async (pages, parent) => {
+  const linkablePages = pages.filter((p) => !p.notFound);
   // Filter out folders and index pages for prev/next calculation (only content pages)
-  const contentPages = pages.filter((p) => !p.folder && p.filename !== 'index');
+  const contentPages = linkablePages.filter((p) => !p.folder && p.filename !== 'index');
 
   await mapLimit(
     pages,
@@ -388,7 +402,7 @@ const addLinks = async (pages, parent) => {
       const linkClass = defaultConfig.prev_next_class || defaultConfig.link_class || '';
       const classAttr = linkClass ? ` class="${linkClass}"` : '';
 
-      if (!page.folder && page.filename !== 'index') {
+      if (!page.folder && page.filename !== 'index' && !page.notFound) {
         const pageIndex = contentPages.indexOf(page);
         const prevSibling = pageIndex > 0 ? contentPages[pageIndex - 1] : null;
         const nextSibling = pageIndex < contentPages.length - 1 ? contentPages[pageIndex + 1] : null;
@@ -414,9 +428,9 @@ const addLinks = async (pages, parent) => {
             : Promise.resolve(""),
           generateLinkList(
             page.parent?.filename || "pages",
-            pages.filter((p) => p.url !== page.url),
+            linkablePages.filter((p) => p.url !== page.url),
           ),
-          generateLinkList(page.parent?.filename || "pages", pages),
+          generateLinkList(page.parent?.filename || "pages", linkablePages),
           generateLinkList("nav", pageIndex.filter((p) => p.nav)),
         ]);
 

package/src/partials.js

@@ -1,10 +1,13 @@
 import fs from "fs/promises";
-import fsExtra from "fs-extra";
 import path from "path";
-import { dirs, defaultConfig } from "./config.js";
-import { marked } from "marked";
+
+import fsExtra from "fs-extra";
 import { Eta } from "eta";
+
+import { dirs, defaultConfig } from "./config.js";
+import { marked } from "./markdown.js";
 import { loadData } from "./data.js";
+import { getResponsiveImage } from "./assets.js";
 
 const partialCache = new Map();
 const imageExtensionRegex = /\.(png|jpe?g|webp)(?=([?#]|$))/i;
@@ -51,7 +54,15 @@ const generateOgTags = (values) => {
   const description = meta.description || meta.summary || '';
   const url = values.url || '';
   const siteUrl = (meta.site_url || values.site_url || '').replace(/\/$/, '');
-  const image = meta.image || meta.og_image || '';
+  // Rewrite local image paths to .webp so they match the optimized output on disk
+  const image = rewriteImageUrl(
+    meta.image ||
+      meta.og_image ||
+      meta.default_og_image ||
+      values.default_og_image ||
+      defaultConfig.default_og_image ||
+      '',
+  );
   const type = meta.og_type || (values.folder ? 'website' : 'article');
   const author = meta.author || values.author || '';
 
@@ -148,6 +159,36 @@ const rewriteSrcset = (srcset) =>
     })
     .join(", ");
 
+const getAttributeValue = (tag, name) => {
+  const match = tag.match(new RegExp(`\\s${name}=(["'])(.*?)\\1`, "i"));
+  return match ? match[2] : "";
+};
+
+const hasAttribute = (tag, name) =>
+  new RegExp(`\\s${name}(?:=|\\s|>|/)`, "i").test(tag);
+
+const appendAttribute = (tag, name, value) =>
+  tag.replace(/\s*\/?>$/, (ending) => {
+    const close = ending.includes("/") ? " />" : ">";
+    return ` ${name}="${escapeAttr(value)}"${close}`;
+  });
+
+const addResponsiveImageAttributes = (tag) => {
+  const imageUrl = getAttributeValue(tag, "src");
+  const responsiveImage = getResponsiveImage(imageUrl);
+
+  if (!responsiveImage || responsiveImage.variants.length < 2) return tag;
+
+  let nextTag = tag;
+  if (!hasAttribute(nextTag, "srcset")) {
+    nextTag = appendAttribute(nextTag, "srcset", responsiveImage.srcset);
+  }
+  if (!hasAttribute(nextTag, "sizes")) {
+    nextTag = appendAttribute(nextTag, "sizes", responsiveImage.sizes);
+  }
+  return nextTag;
+};
+
 const rewriteLocalImageReferences = (html) =>
   html.replace(/<([a-z][\w:-]*)(\s[^<>]*?)?>/gi, (tag, tagName) => {
     const normalizedTagName = tagName.toLowerCase();
@@ -155,7 +196,7 @@ const rewriteLocalImageReferences = (html) =>
       return tag;
     }
 
-    return tag.replace(
+    const rewrittenTag = tag.replace(
       /\s(src|href|srcset)=(["'])(.*?)\2/gi,
       (attribute, attributeName, quote, value) => {
         const nextValue =
@@ -165,6 +206,10 @@ const rewriteLocalImageReferences = (html) =>
         return ` ${attributeName}=${quote}${nextValue}${quote}`;
       },
     );
+
+    return normalizedTagName === "img"
+      ? addResponsiveImageAttributes(rewrittenTag)
+      : rewrittenTag;
   });
 
 const replacePlaceholders = async (template, values) => {