@daz4126/swifty 3.0.0 → 3.2.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
 ```
@@ -57,14 +59,14 @@ npx swifty my-site          # Create new site in my-site/ folder
 npx swifty build            # Build static site to dist/ (for production)
 npx swifty start            # Build, watch, and serve at localhost:3000 (for development)
 npx swifty build --out dir  # Build to custom output directory
-npx swifty deploy "message" # Build, git add, commit, and push (message optional)
+npx swifty deploy "message" # Build, commit the output folder, and push
 ```
 
 ### Development vs Production
 
 - **`swifty start`** - For development. Includes live reload (auto-refreshes browser on file changes) and file watching with incremental builds for CSS/JS/images.
 - **`swifty build`** - For production deployment. Produces clean output without any development scripts.
-- **`swifty deploy "message"`** - Builds the site and commits/pushes to git in one command.
+- **`swifty deploy "message"`** - Builds the site, commits only the generated output folder, and pushes it to git.
 
 ## Documentation
 

package/package.json

@@ -1,11 +1,17 @@
 {
   "name": "@daz4126/swifty",
-  "version": "3.0.0",
-  "main": "index.js",
+  "version": "3.2.0",
+  "main": "./src/index.js",
   "type": "module",
+  "exports": {
+    ".": "./src/index.js"
+  },
   "bin": {
     "swifty": "./src/cli.js"
   },
+  "engines": {
+    "node": ">=18"
+  },
   "files": [
     "src/"
   ],
@@ -45,10 +51,10 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/daz4126/swifty.git"
+    "url": "git+https://github.com/daz-codes/swifty.git"
   },
   "bugs": {
-    "url": "https://github.com/daz4126/swifty/issues"
+    "url": "https://github.com/daz-codes/swifty/issues"
   },
-  "homepage": "https://github.com/daz4126/swifty#readme"
+  "homepage": "https://github.com/daz-codes/swifty#readme"
 }

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,20 +1,47 @@
+import { argv } from "process";
+import path from "path";
+import { fileURLToPath } from "url";
+
+import fsExtra from "fs-extra";
+
 import { copyAssets, optimizeImages } from "./assets.js";
 import { generatePages, createPages, addLinks } from "./pages.js";
 import { generateRssFeeds } from "./rss.js";
 import { generateSeoFiles } from "./sitemap.js";
-import { dirs } from "./config.js";
+import { baseDir, dirs } from "./config.js";
+import { clearDataCache } from "./data.js";
+import { resetCaches } from "./layout.js";
+import { clearCache as clearPartialCache } from "./partials.js";
+
+const prepareOutputDirectory = async (outputDir) => {
+  const projectPath = path.resolve(baseDir);
+  const outputPath = path.resolve(baseDir, outputDir);
+  const outputContainsProject =
+    projectPath === outputPath || projectPath.startsWith(`${outputPath}${path.sep}`);
+
+  if (outputContainsProject) {
+    throw new Error(`Refusing to empty unsafe output directory: ${outputPath}`);
+  }
+
+  await fsExtra.emptyDir(outputPath);
+  return outputPath;
+};
 
 export default async function build(outputDir = dirs.dist) {
   const startTime = performance.now();
   console.log("🚀 Starting build...");
+  const resolvedOutputDir = await prepareOutputDirectory(outputDir);
+  clearDataCache();
+  clearPartialCache();
   
   const copyStart = performance.now();
-  await copyAssets(outputDir);
+  await copyAssets(resolvedOutputDir);
   const copyTime = performance.now() - copyStart;
   console.log(`📁 Assets copied in ${(copyTime / 1000).toFixed(2)}s`);
+  await resetCaches();
   
   const imageStart = performance.now();
-  await optimizeImages(outputDir);
+  await optimizeImages(resolvedOutputDir);
   const imageTime = performance.now() - imageStart;
   console.log(`🖼️  Images optimized in ${(imageTime / 1000).toFixed(2)}s`);
   
@@ -29,17 +56,17 @@ export default async function build(outputDir = dirs.dist) {
   console.log(`🔗 Links added in ${(linksTime / 1000).toFixed(2)}s`);
   
   const createStart = performance.now();
-  await createPages(pages, outputDir);
+  await createPages(pages, resolvedOutputDir);
   const createTime = performance.now() - createStart;
   console.log(`✨ Pages created in ${(createTime / 1000).toFixed(2)}s`);
   
   const rssStart = performance.now();
-  await generateRssFeeds(pages, outputDir);
+  await generateRssFeeds(pages, resolvedOutputDir);
   const rssTime = performance.now() - rssStart;
   console.log(`📡 RSS feeds generated in ${(rssTime / 1000).toFixed(2)}s`);
 
   const seoStart = performance.now();
-  await generateSeoFiles(pages, outputDir);
+  await generateSeoFiles(pages, resolvedOutputDir);
   const seoTime = performance.now() - seoStart;
   console.log(`🧭 SEO files generated in ${(seoTime / 1000).toFixed(2)}s`);
   
@@ -67,3 +94,14 @@ export default async function build(outputDir = dirs.dist) {
     process.stdout.write('\n');
   }
 }
+
+export { prepareOutputDirectory };
+
+// 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/cli.js

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 
-import { spawn, execSync } from "child_process";
+import { execFileSync, spawn, spawnSync } from "child_process";
+import { fileURLToPath } from "url";
 
 const args = process.argv.slice(2);
 let outDir = "dist"; // default
@@ -14,7 +15,46 @@ if (outIndex !== -1 && args[outIndex + 1]) {
 // Pass outDir as an environment variable too (optional, still useful)
 process.env.OUT_DIR = outDir;
 
-const reservedCommands = ["build", "start", "watch", "deploy"];
+const commitAndPushOutput = (
+  outputDir,
+  commitMessage,
+  { execFile = execFileSync, spawnFile = spawnSync } = {},
+) => {
+  const existingDiff = spawnFile("git", ["diff", "--cached", "--quiet"], {
+    stdio: "ignore",
+  });
+  if (existingDiff.error) throw existingDiff.error;
+  if (existingDiff.status === 1) {
+    throw new Error("Refusing to deploy while unrelated changes are already staged.");
+  }
+  if (existingDiff.status !== 0) {
+    throw new Error(
+      `Unable to inspect staged changes (git exited ${existingDiff.status}).`,
+    );
+  }
+
+  console.log(`Adding generated output from ${outputDir} to git...`);
+  execFile("git", ["add", "--", outputDir], { stdio: "inherit" });
+
+  const diffResult = spawnFile("git", ["diff", "--cached", "--quiet"], {
+    stdio: "ignore",
+  });
+  if (diffResult.error) throw diffResult.error;
+  if (diffResult.status === 0) {
+    console.log("No generated output changes to deploy.");
+    return false;
+  }
+  if (diffResult.status !== 1) {
+    throw new Error(`Unable to inspect staged changes (git exited ${diffResult.status}).`);
+  }
+
+  console.log("Committing generated output...");
+  execFile("git", ["commit", "-m", commitMessage], { stdio: "inherit" });
+
+  console.log("Pushing to remote...");
+  execFile("git", ["push"], { stdio: "inherit" });
+  return true;
+};
 
 async function main() {
   const command = args[0];
@@ -64,7 +104,11 @@ async function main() {
       break;
     }
     case "deploy": {
-      const commitMessage = args[1] || "Deploying latest build";
+      const commandArgs = args.slice(1).filter((arg, index, values) => {
+        if (arg === "--out") return false;
+        return index === 0 || values[index - 1] !== "--out";
+      });
+      const commitMessage = commandArgs[0] || "Deploying latest build";
 
       // Build the site
       const build = await import("./build.js");
@@ -74,18 +118,8 @@ async function main() {
 
       // Git operations
       try {
-        console.log("Adding files to git...");
-        execSync("git add .", { stdio: "inherit" });
-
-        console.log("Committing changes...");
-        execSync(`git commit -m "${commitMessage.replace(/"/g, '\\"')}"`, {
-          stdio: "inherit",
-        });
-
-        console.log("Pushing to remote...");
-        execSync("git push", { stdio: "inherit" });
-
-        console.log("Deployed successfully!");
+        const deployed = commitAndPushOutput(outDir, commitMessage);
+        if (deployed) console.log("Deployed successfully!");
       } catch (error) {
         console.error("Deploy failed:", error.message);
         process.exit(1);
@@ -104,4 +138,8 @@ async function main() {
   }
 }
 
-main();
+if (process.argv[1] && fileURLToPath(import.meta.url) === process.argv[1]) {
+  main();
+}
+
+export { commitAndPushOutput, main };

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,
@@ -56,15 +64,27 @@ const builtInDefaults = {
   navigation_cache_ttl: 15,
 };
 
-const loadedConfig = await loadConfig(baseDir);
-const hasConfig = (key) => Object.prototype.hasOwnProperty.call(loadedConfig, key);
+const defaultConfig = {};
 
-if (hasConfig('turbo')) {
-  console.warn('The "turbo" config option is deprecated. Use "morphing" and "prefetching" instead.');
-  if (!hasConfig('morphing')) {
-    loadedConfig.morphing = loadedConfig.turbo;
+const reloadConfig = async () => {
+  const loadedConfig = await loadConfig(baseDir);
+  const hasConfig = (key) =>
+    Object.prototype.hasOwnProperty.call(loadedConfig, key);
+
+  if (hasConfig('turbo')) {
+    console.warn('The "turbo" config option is deprecated. Use "morphing" and "prefetching" instead.');
+    if (!hasConfig('morphing')) {
+      loadedConfig.morphing = loadedConfig.turbo;
+    }
   }
-}
-const defaultConfig = { ...builtInDefaults, ...loadedConfig };
 
-export { baseDir, dirs, defaultConfig, loadConfig };
+  for (const key of Object.keys(defaultConfig)) {
+    delete defaultConfig[key];
+  }
+  Object.assign(defaultConfig, builtInDefaults, loadedConfig);
+  return defaultConfig;
+};
+
+await reloadConfig();
+
+export { baseDir, dirs, defaultConfig, loadConfig, reloadConfig };

package/src/index.js

@@ -0,0 +1,3 @@
+export { default, default as build, prepareOutputDirectory } from "./build.js";
+export { defaultConfig, loadConfig, reloadConfig } from "./config.js";
+export { addLinks, createPages, generatePages } from "./pages.js";

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,138 @@
+let protectionSequence = 0;
+
+const protectBlocks = (content, pattern) => {
+  const blocks = [];
+  const tokenPrefix = `__SWIFTY_MINIFY_BLOCK_${protectionSequence++}_`;
+  const protectedContent = content.replace(pattern, (match) => {
+    const token = `${tokenPrefix}${blocks.length}__`;
+    blocks.push(match);
+    return token;
+  });
+
+  return {
+    content: protectedContent,
+    restore: (value) =>
+      value.replace(
+        new RegExp(`${tokenPrefix}(\\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 strings = protectBlocks(
+    blocks.content,
+    /(["'])(?:\\[\s\S]|(?!\1)[^\\])*\1/g,
+  );
+
+  const minified = strings.content
+    .replace(/<!--(?!\[if|<!|>)[\s\S]*?-->/g, "")
+    .replace(/\s+/g, " ")
+    .trim();
+
+  return blocks.restore(strings.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) => {
@@ -41,12 +44,62 @@ const parseDate = (dateValue) => {
   return isNaN(parsed.getTime()) ? null : parsed;
 };
 
+const applyMarkdownFileToPage = async (
+  page,
+  filePath,
+  { notFound = false, folderIndex = false } = {},
+) => {
+  const markdownContent = await fs.readFile(filePath, "utf-8");
+  const { data, content } = matter(markdownContent);
+  Object.assign(page, { meta: { ...page.meta, ...data }, content });
+
+  if (folderIndex) {
+    const stats = await fs.stat(filePath);
+    const { dateFormat } = page.meta;
+    page.hasIndexContent = true;
+    page.indexFilePath = filePath;
+    page.createdAtObj = stats.birthtime;
+    page.updatedAtObj = stats.mtime;
+    page.created_at = new Date(stats.birthtime).toLocaleDateString(
+      undefined,
+      dateFormat,
+    );
+    page.updated_at = new Date(stats.mtime).toLocaleDateString(
+      undefined,
+      dateFormat,
+    );
+    page.date = new Date(stats.birthtime).toLocaleDateString(undefined, dateFormat);
+  }
+
+  if (notFound && data.sitemap === undefined) {
+    page.meta.sitemap = false;
+  }
+
+  page.title = page.meta.title || page.title;
+  page.name = page.meta.title || page.name;
+
+  if (typeof data.nav === "boolean") {
+    page.nav = data.nav;
+  }
+
+  if (data.date) {
+    const parsedDate = parseDate(data.date);
+    if (parsedDate) {
+      page.dateObj = parsedDate;
+      page.date = parsedDate.toLocaleDateString(undefined, page.meta.dateFormat);
+      page.meta.date = page.date;
+    }
+  }
+};
+
 const tagsMap = new Map();
 const pageIndex = [];
 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, []);
@@ -73,11 +126,14 @@ const generatePages = async (sourceDir, baseDir = sourceDir, parent) => {
       files,
       async (file) => {
         const filePath = path.join(sourceDir, file.name);
+        if (parent && file.name === "index.md") return null;
+
         const stats = await getValidStats(filePath);
         if (!stats) return null;
 
         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 +155,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,
@@ -123,25 +180,11 @@ const generatePages = async (sourceDir, baseDir = sourceDir, parent) => {
         };
 
         if (path.extname(file.name) === ".md") {
-          const markdownContent = await fs.readFile(filePath, "utf-8");
-          const { data, content } = matter(markdownContent);
-          Object.assign(page, { meta: { ...page.meta, ...data }, content });
-          page.title = page.meta.title || page.title;
-          page.name = page.meta.title || page.name;
-
-          // Allow front matter to override nav (opt in or opt out)
-          if (typeof data.nav === "boolean") {
-            page.nav = data.nav;
-          }
-
-          // If front matter has a date, parse and format it
-          if (data.date) {
-            const parsedDate = parseDate(data.date);
-            if (parsedDate) {
-              page.dateObj = parsedDate;
-              page.date = parsedDate.toLocaleDateString(undefined, dateFormat);
-              page.meta.date = page.date;
-            }
+          await applyMarkdownFileToPage(page, filePath, { notFound });
+        } else if (isDirectory) {
+          const indexPath = path.join(filePath, "index.md");
+          if (await fsExtra.pathExists(indexPath)) {
+            await applyMarkdownFileToPage(page, indexPath, { folderIndex: true });
           }
         }
 
@@ -198,7 +241,9 @@ const generatePages = async (sourceDir, baseDir = sourceDir, parent) => {
           page.visiblePages = chunks[0];
 
           // First page content
-          page.content = await generateLinkList(page.filename, chunks[0]);
+          if (!page.hasIndexContent) {
+            page.content = await generateLinkList(page.filename, chunks[0]);
+          }
           page.meta.pagination = generatePaginationNav({
             currentPage: 1,
             totalPages,
@@ -232,7 +277,9 @@ const generatePages = async (sourceDir, baseDir = sourceDir, parent) => {
             page.paginatedPages.push(paginatedPage);
           }
         } else {
-          page.content = await generateLinkList(page.filename, page.pages);
+          if (!page.hasIndexContent) {
+            page.content = await generateLinkList(page.filename, page.pages);
+          }
           page.meta.pagination = '';
         }
       }
@@ -342,9 +389,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 +410,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 +439,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 +465,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) => {

package/src/watcher.js

@@ -2,7 +2,7 @@ import chokidar from "chokidar";
 import livereload from "livereload";
 import path from "path";
 import fs from "fs";
-import { defaultConfig } from "./config.js";
+import { defaultConfig, reloadConfig } from "./config.js";
 
 // Directory to extension mapping for filtering
 const dirExtensions = {
@@ -80,6 +80,14 @@ function getChangeType(filePath) {
   return "full"; // pages, layouts, partials, config files
 }
 
+const isRootConfigFile = (filePath) => {
+  const relativePath = path.relative(process.cwd(), filePath);
+  return (
+    !relativePath.includes(path.sep) &&
+    ["config.yaml", "config.yml", "config.json"].includes(relativePath)
+  );
+};
+
 export default async function watch(outDir = "dist") {
   const build = await import("./build.js");
   const { copySingleAsset, optimizeSingleImage } = await import("./assets.js");
@@ -94,12 +102,13 @@ export default async function watch(outDir = "dist") {
   }
 
   // Start livereload server
+  const livereloadPort = defaultConfig.livereload_port || 35729;
   const lrServer = livereload.createServer({
+    port: livereloadPort,
     usePolling: true,
     delay: defaultConfig.watcher_delay || 100,
   });
   const outPath = path.join(process.cwd(), outDir);
-  const livereloadPort = defaultConfig.livereload_port || 35729;
   lrServer.watch(outPath);
   console.log(`LiveReload server started on port ${livereloadPort}`);
 
@@ -128,6 +137,10 @@ export default async function watch(outDir = "dist") {
     const filename = path.basename(filePath);
 
     try {
+      if (isRootConfigFile(filePath)) {
+        await reloadConfig();
+      }
+
       if (event === "deleted") {
         // For deletions, do a full rebuild to clean up
         console.log(`🗑️  File deleted: ${filename}. Running full build...`);