@daz4126/swifty 2.12.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,10 +20,11 @@ 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
-- **Optional [Turbo](https://turbo.hotwired.dev/)** for SPA-like transitions
+- **Idiomorph navigation** with optional intent prefetching for SPA-like transitions
 
 ## Quickstart
 
@@ -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": "2.12.0",
+  "version": "3.1.0",
   "main": "index.js",
   "type": "module",
   "bin": {

package/src/assets.js

@@ -1,9 +1,18 @@
+import crypto from "crypto";
 import fs from "fs/promises";
-import fsExtra from "fs-extra";
 import path from "path";
+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);
+const clientAssetsDir = path.join(__dirname, "client");
 
 // Get file modification timestamp for cache busting
 const getFileMtime = async (filePath) => {
@@ -18,8 +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 {
@@ -42,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);
@@ -71,15 +193,48 @@ 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 {
     console.log(`No ${path.basename(source)} found in ${source}`);
   }
 };
+
+const copyNavigationAssets = async (outputDir = dirs.dist) => {
+  if (!navigationEnabled()) return;
+  if (!(await fsExtra.pathExists(clientAssetsDir))) return;
+
+  const destination = path.join(outputDir, "swifty");
+  await fsExtra.ensureDir(destination);
+
+  const files = await fs.readdir(clientAssetsDir);
+  await mapLimit(
+    files,
+    async (file) => {
+      const sourcePath = path.join(clientAssetsDir, 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 ${destinationFilename}`);
+      }
+    },
+    getBuildConcurrency(),
+  );
+};
+
 const copyAssets = async (outputDir = dirs.dist) => {
   await ensureAndCopy(
     dirs.css,
@@ -87,8 +242,11 @@ const copyAssets = async (outputDir = dirs.dist) => {
     validExtensions.css,
   );
   await ensureAndCopy(dirs.js, path.join(outputDir, "js"), validExtensions.js);
+  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}`);
@@ -117,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(),
@@ -187,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;
 };
@@ -210,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/client/IDIOMORPH-LICENSE.txt

@@ -0,0 +1,13 @@
+Zero-Clause BSD
+=============
+
+Permission to use, copy, modify, and/or distribute this software for
+any purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED “AS IS” AND THE AUTHOR DISCLAIMS ALL
+WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES
+OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE
+FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY
+DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN
+AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT
+OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.