@daz4126/swifty 2.5.0 → 2.6.0

package/README.md

@@ -2,19 +2,56 @@
 
 ## Super Speedy Static Site Generator
 
-Swifty is the next generation of static site generator.
+Swifty uses convention over configuration to make it super simple to build blazingly fast static sites.
 
-It uses the power of Turbo and morphing to build sites that are blazingly fast.
+## Features
 
-It also uses convention over configuration to make is super simple to build sites.
+- **Markdown pages** with YAML front matter
+- **Automatic image optimization** to WebP
+- **Layouts and partials** for reusable templates
+- **Auto-injected CSS/JS** from your css/ and js/ folders
+- **Code syntax highlighting** via highlight.js
+- **Tags and navigation** generated automatically
+- **Optional [Turbo](https://turbo.hotwired.dev/)** for SPA-like transitions
 
 ## Quickstart
 
-1. `npm install @daz4126/swifty`
-2. `npx swifty init` to create a new site
-3. Edit the `template.html` file to match your default layout
-4. Change the `sitename` in `config.yaml`
-5. Add some markdown files to the 'pages' directory
-3. `npx swifty build` to build the site
-7. `npx swifty start` to start the server
-8. Visit [http://localhost:3000](http://localhost:3000) to see your site
+```bash
+npm install @daz4126/swifty
+npx swifty init
+npx swifty start
+```
+
+Then visit [http://localhost:3000](http://localhost:3000)
+
+## Project Structure
+
+```
+your-site/
+├── pages/          # Markdown content (folder structure = URLs)
+├── layouts/        # HTML layout templates
+├── partials/       # Reusable content snippets
+├── css/            # Stylesheets (auto-injected)
+├── js/             # JavaScript (auto-injected)
+├── images/         # Images (auto-optimized to WebP)
+├── template.html   # Base HTML template
+└── config.yaml     # Site configuration
+```
+
+## Commands
+
+```bash
+npx swifty init             # Create new project structure
+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
+```
+
+### 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.
+
+## Documentation
+
+See the [full documentation](https://swifty-oo3v.onrender.com/docs) for details on configuration, layouts, partials, and more.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@daz4126/swifty",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "main": "index.js",
   "type": "module",
   "bin": {
@@ -30,15 +30,14 @@
     "gray-matter": "^4.0.3",
     "highlight.js": "^11.11.1",
     "js-yaml": "^4.1.0",
+    "livereload": "^0.10.3",
     "marked": "^14.1.3",
     "marked-highlight": "^2.2.1",
     "serve": "^14.2.4",
     "sharp": "^0.33.5"
   },
   "devDependencies": {
-    "chokidar-cli": "^3.0.0",
-    "mocha": "^11.1.0",
-    "npm-run-all": "^4.1.5"
+    "mocha": "^11.1.0"
   },
   "directories": {
     "test": "test"

package/src/assets.js

@@ -102,4 +102,57 @@ const getJsImports = () =>
     validExtensions.js,
   );
 
-export { copyAssets, optimizeImages, getCssImports, getJsImports };
+// Copy a single asset file (CSS or JS)
+const copySingleAsset = async (filePath, outputDir = dirs.dist) => {
+  const filename = path.basename(filePath);
+  const ext = path.extname(filePath).toLowerCase();
+
+  let destDir;
+  if (validExtensions.css.includes(ext)) {
+    destDir = path.join(outputDir, "css");
+  } else if (validExtensions.js.includes(ext)) {
+    destDir = path.join(outputDir, "js");
+  } else {
+    return false;
+  }
+
+  await fsExtra.ensureDir(destDir);
+  await fsExtra.copy(filePath, path.join(destDir, filename));
+  console.log(`Copied ${filename}`);
+  return true;
+};
+
+// Process a single image
+const optimizeSingleImage = async (filePath, outputDir = dirs.dist) => {
+  const IMAGE_EXTENSIONS = [".jpg", ".jpeg", ".png"];
+  const filename = path.basename(filePath);
+  const ext = path.extname(filePath).toLowerCase();
+  const imagesFolder = path.join(outputDir, "images");
+
+  await fsExtra.ensureDir(imagesFolder);
+
+  // For non-optimizable images (svg, webp, gif), just copy
+  if (!IMAGE_EXTENSIONS.includes(ext)) {
+    await fsExtra.copy(filePath, path.join(imagesFolder, filename));
+    console.log(`Copied ${filename}`);
+    return true;
+  }
+
+  // Optimize jpg/jpeg/png to webp
+  const optimizedPath = path.join(imagesFolder, `${path.basename(filename, ext)}.webp`);
+  const image = sharp(filePath);
+  const metadata = await image.metadata();
+  const originalWidth = metadata.width || 0;
+  const maxWidth = defaultConfig.max_image_size || 800;
+  const resizeWidth = Math.min(originalWidth, maxWidth);
+
+  await image
+    .resize({ width: resizeWidth })
+    .toFormat("webp", { quality: 80 })
+    .toFile(optimizedPath);
+
+  console.log(`Optimized ${filename} -> ${path.basename(optimizedPath)}`);
+  return true;
+};
+
+export { copyAssets, optimizeImages, getCssImports, getJsImports, copySingleAsset, optimizeSingleImage };

package/src/cli.js

@@ -29,6 +29,9 @@ async function main() {
       break;
     }
     case "start": {
+      // Set watch mode so livereload script is injected into pages
+      process.env.SWIFTY_WATCH = "true";
+
       const build = await import("./build.js");
       if (typeof build.default === "function") {
         await build.default(outDir);

package/src/layout.js

@@ -1,7 +1,7 @@
 import fs from "fs/promises";
 import fsExtra from "fs-extra";
 import path from "path";
-import { dirs, baseDir } from "./config.js";
+import { dirs, baseDir, defaultConfig } from "./config.js";
 import { getCssImports, getJsImports } from "./assets.js";
 
 const layoutCache = new Map();
@@ -23,19 +23,25 @@ const createTemplate = async () => {
   // Read the template from pages folder
   const templatePath = path.join(baseDir, 'template.html');
   const templateContent = await fs.readFile(templatePath, 'utf-8');
-  const turboScript = `<script type="module">import * as Turbo from 'https://esm.sh/@hotwired/turbo';</script>`;
+  const turboScript = defaultConfig.turbo
+    ? `<script type="module">import * as Turbo from 'https://esm.sh/@hotwired/turbo';</script>`
+    : '';
+  const livereloadScript = process.env.SWIFTY_WATCH
+    ? `<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>`
+    : '';
   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 template = templateContent.replace('</head>', `${turboScript}\n${highlightCSS}\n${imports}\n</head>`);
+  const template = templateContent.replace('</head>', `${turboScript}\n${highlightCSS}\n${imports}\n${livereloadScript}\n</head>`);
   return template;
 };
 
 const applyLayoutAndWrapContent = async (page,content) => {
     const layoutContent = await getLayout(page.data.layout !== undefined ? page.data.layout : page.layout);
     if (!layoutContent) return content;
-    return layoutContent.replace(/\{\{\s*content\s*\}\}/g, content);
+    // Use function to avoid $` special replacement patterns in content
+    return layoutContent.replace(/\{\{\s*content\s*\}\}/g, () => content);
   };
 
 const template = await createTemplate();

package/src/pages.js

@@ -199,9 +199,10 @@ const render = async (page) => {
   const replacedContent = await replacePlaceholders(page.content, page);
   const htmlContent = marked.parse(replacedContent); // Markdown processed once
   const wrappedContent = await applyLayoutAndWrapContent(page, htmlContent);
+  // Use function to avoid $` special replacement patterns in content
   const htmlWithTemplate = template.replace(
     /\{\{\s*content\s*\}\}/g,
-    wrappedContent,
+    () => wrappedContent,
   );
   const finalContent = await replacePlaceholders(htmlWithTemplate, page);
   return finalContent;

package/src/watcher.js

@@ -1,39 +1,143 @@
 import chokidar from "chokidar";
+import livereload from "livereload";
 import path from "path";
+import fs from "fs";
 
-// Define files to watch, resolving relative to the current working directory
-const filesToWatch = [
-  "pages/**/*.{md,html}",
-  "layouts/**/*.html",
-  "images/**/*",
-  "css/**/*.css",
-  "js/**/*.js",
-  "partials/**/*.{md,html}",
-  "template.html",
-  "config.yaml",
-  "config.yml",
-  "config.json",
-].map((pattern) => path.join(process.cwd(), pattern));
+// Directory to extension mapping for filtering
+const dirExtensions = {
+  pages: [".md", ".html"],
+  layouts: [".html"],
+  images: null, // null means all files
+  css: [".css"],
+  js: [".js"],
+  partials: [".md", ".html"],
+};
+
+// Build watch paths
+function getWatchPaths() {
+  const cwd = process.cwd();
+  const watchPaths = [];
+
+  // Add directories that exist
+  for (const dir of Object.keys(dirExtensions)) {
+    const dirPath = path.join(cwd, dir);
+    if (fs.existsSync(dirPath)) {
+      watchPaths.push(dirPath);
+    }
+  }
+
+  // Add specific config files that exist
+  const configFiles = ["template.html", "config.yaml", "config.yml", "config.json"];
+  for (const file of configFiles) {
+    const filePath = path.join(cwd, file);
+    if (fs.existsSync(filePath)) {
+      watchPaths.push(filePath);
+    }
+  }
+
+  return watchPaths;
+}
+
+// Check if a file should trigger a rebuild
+function shouldTriggerBuild(filePath) {
+  const cwd = process.cwd();
+  const relativePath = path.relative(cwd, filePath);
+  const parts = relativePath.split(path.sep);
+  const topDir = parts[0];
+
+  // Config files at root level
+  if (parts.length === 1) {
+    return true;
+  }
+
+  // Check against directory extension mapping
+  if (dirExtensions[topDir] !== undefined) {
+    const allowedExts = dirExtensions[topDir];
+    // null means all files allowed
+    if (allowedExts === null) {
+      return true;
+    }
+    const ext = path.extname(filePath).toLowerCase();
+    return allowedExts.includes(ext);
+  }
+
+  return false;
+}
+
+// Determine what type of change this is
+function getChangeType(filePath) {
+  const cwd = process.cwd();
+  const relativePath = path.relative(cwd, filePath);
+  const parts = relativePath.split(path.sep);
+  const topDir = parts[0];
+
+  if (topDir === "css") return "css";
+  if (topDir === "js") return "js";
+  if (topDir === "images") return "image";
+  return "full"; // pages, layouts, partials, config files
+}
 
 export default async function watch(outDir = "dist") {
   const build = await import("./build.js");
+  const { copySingleAsset, optimizeSingleImage } = await import("./assets.js");
+  const watchPaths = getWatchPaths();
 
-  // Initialize watcher
-  const watcher = chokidar.watch(filesToWatch, {
+  if (watchPaths.length === 0) {
+    console.log("No directories or files to watch.");
+    return;
+  }
+
+  // Start livereload server
+  const lrServer = livereload.createServer({
+    usePolling: true,
+    delay: 100,
+  });
+  const outPath = path.join(process.cwd(), outDir);
+  lrServer.watch(outPath);
+  console.log("LiveReload server started on port 35729");
+
+  // Initialize watcher (chokidar 4.x)
+  // usePolling needed for network/cloud drives that don't emit native fs events
+  const watcher = chokidar.watch(watchPaths, {
     persistent: true,
     ignoreInitial: true,
+    usePolling: true,
+    interval: 500,
     awaitWriteFinish: {
       stabilityThreshold: 200,
       pollInterval: 100,
     },
   });
 
-  // Rebuild function
-  async function triggerBuild(event, filePath) {
-    console.log(`File ${event}: ${filePath}. Running build...`);
+  // Handle file changes with incremental builds where possible
+  async function handleFileChange(event, filePath) {
+    if (!shouldTriggerBuild(filePath)) {
+      return;
+    }
+
+    const changeType = getChangeType(filePath);
+    const filename = path.basename(filePath);
+
     try {
-      await build.default(outDir);
-      console.log("Build complete.");
+      if (event === "deleted") {
+        // For deletions, do a full rebuild to clean up
+        console.log(`File deleted: ${filename}. Running full build...`);
+        await build.default(outDir);
+      } else if (changeType === "css" || changeType === "js") {
+        // Incremental: just copy the changed asset
+        console.log(`Asset ${event}: ${filename}`);
+        await copySingleAsset(filePath, outDir);
+      } else if (changeType === "image") {
+        // Incremental: just process the changed image
+        console.log(`Image ${event}: ${filename}`);
+        await optimizeSingleImage(filePath, outDir);
+      } else {
+        // Full rebuild for pages, layouts, partials, config
+        console.log(`File ${event}: ${filename}. Running full build...`);
+        await build.default(outDir);
+      }
+      // Trigger browser refresh
+      lrServer.refresh("/");
     } catch (error) {
       console.error(`Build failed: ${error.message}`);
     }
@@ -41,9 +145,10 @@ export default async function watch(outDir = "dist") {
 
   // Set up event listeners
   watcher
-    .on("change", (filePath) => triggerBuild("changed", filePath))
-    .on("add", (filePath) => triggerBuild("added", filePath))
-    .on("unlink", (filePath) => triggerBuild("deleted", filePath));
+    .on("change", (filePath) => handleFileChange("changed", filePath))
+    .on("add", (filePath) => handleFileChange("added", filePath))
+    .on("unlink", (filePath) => handleFileChange("deleted", filePath))
+    .on("error", (error) => console.error("Watcher error:", error));
 
   console.log("Watching for file changes...");
 }