@daz4126/swifty 2.11.0 → 3.0.0

package/src/client/swifty-navigation.js

@@ -0,0 +1,399 @@
+import { Idiomorph } from "./idiomorph.esm.js";
+
+if (typeof window !== "undefined") window.Idiomorph ||= Idiomorph;
+
+class NavigationFallback extends Error {
+  constructor(url, message) {
+    super(message);
+    this.url = url;
+  }
+}
+
+export class SwiftyNavigation {
+  constructor(options = {}) {
+    this.targetSelector = options.target || "main";
+    this.prefetching = options.prefetching !== false;
+    this.cacheSize = Number(options.cacheSize || 20);
+    this.cacheTTL = Number(options.cacheTTL || 15) * 1000;
+    this.cache = new Map();
+    this.sequence = 0;
+    this.controller = null;
+    this.prefetchTimer = null;
+    this.boundClick = (event) => this.handleClick(event);
+    this.boundPopState = (event) => this.handlePopState(event);
+    this.boundPrefetchIntent = (event) => this.handlePrefetchIntent(event);
+    this.boundInvalidate = () => this.clearCache();
+  }
+
+  start() {
+    if (this.started) return;
+    this.started = true;
+
+    history.scrollRestoration = "manual";
+    this.rememberScroll();
+    document.addEventListener("click", this.boundClick);
+    window.addEventListener("popstate", this.boundPopState);
+    document.addEventListener("mouseover", this.boundPrefetchIntent);
+    document.addEventListener("focusin", this.boundPrefetchIntent);
+    document.addEventListener("touchstart", this.boundPrefetchIntent, { passive: true });
+    document.addEventListener("swifty:invalidate", this.boundInvalidate);
+    requestAnimationFrame(() => {
+      this.dispatch("swifty:load", {
+        url: window.location.href,
+        navigationType: "initial",
+        prefetched: false,
+        target: document.querySelector(this.targetSelector),
+      });
+    });
+  }
+
+  stop() {
+    if (!this.started) return;
+
+    document.removeEventListener("click", this.boundClick);
+    window.removeEventListener("popstate", this.boundPopState);
+    document.removeEventListener("mouseover", this.boundPrefetchIntent);
+    document.removeEventListener("focusin", this.boundPrefetchIntent);
+    document.removeEventListener("touchstart", this.boundPrefetchIntent);
+    document.removeEventListener("swifty:invalidate", this.boundInvalidate);
+    clearTimeout(this.prefetchTimer);
+    this.controller?.abort();
+    this.started = false;
+  }
+
+  handleClick(event) {
+    const link = this.eligibleLink(event.target);
+    if (!link || !this.eligibleClick(event, link)) return;
+
+    const url = new URL(link.href, window.location.href);
+    if (this.onlyChangesHash(url)) return;
+
+    const detail = { url: url.href, link, navigationType: "link" };
+    if (!this.dispatch("swifty:before-navigate", detail, true)) return;
+
+    event.preventDefault();
+    this.rememberScroll();
+    this.navigate(url.href, { historyMode: "push", navigationType: "link" });
+  }
+
+  handlePopState(event) {
+    const detail = { url: window.location.href, navigationType: "popstate" };
+    if (!this.dispatch("swifty:before-navigate", detail, true)) {
+      window.location.reload();
+      return;
+    }
+
+    const scroll = event.state?.swifty?.scroll;
+    this.navigate(window.location.href, {
+      historyMode: "pop",
+      navigationType: "popstate",
+      scroll,
+    });
+  }
+
+  handlePrefetchIntent(event) {
+    if (!this.prefetchEnabled()) return;
+
+    const link = this.eligibleLink(event.target);
+    if (!link || !this.eligibleURL(new URL(link.href, window.location.href))) return;
+    if (link.closest('[data-swifty-prefetch="off"]')) return;
+    if (event.type === "mouseover" && link.contains(event.relatedTarget)) return;
+
+    clearTimeout(this.prefetchTimer);
+    const delay = event.type === "mouseover" ? 75 : 0;
+    this.prefetchTimer = setTimeout(() => this.prefetch(link.href), delay);
+  }
+
+  async navigate(url, options = {}) {
+    const sequence = ++this.sequence;
+    this.controller?.abort();
+    this.controller = null;
+    this.setLoading(true, { url, navigationType: options.navigationType });
+
+    try {
+      let prefetched = false;
+      let page = await this.takePrefetch(url);
+      if (page?.cacheable) {
+        prefetched = true;
+      } else {
+        this.controller = new AbortController();
+        page = await this.fetchPage(url, { signal: this.controller.signal });
+      }
+
+      if (sequence !== this.sequence) return;
+
+      const beforeMorph = {
+        url: page.url,
+        navigationType: options.navigationType,
+        prefetched,
+        newTarget: page.target,
+      };
+      if (!this.dispatch("swifty:before-morph", beforeMorph, true)) {
+        throw new NavigationFallback(page.url, "morph was cancelled");
+      }
+
+      this.morph(page);
+      this.updateHistory(page.url, options.historyMode);
+      await this.nextFrame();
+      if (sequence !== this.sequence) return;
+      this.restoreScroll(page.url, options);
+      this.manageFocus(page.url, options.navigationType);
+
+      this.dispatch("swifty:load", {
+        url: page.url,
+        navigationType: options.navigationType,
+        prefetched,
+        target: document.querySelector(this.targetSelector),
+      });
+    } catch (error) {
+      if (error.name === "AbortError" || sequence !== this.sequence) return;
+
+      const fallbackURL = error instanceof NavigationFallback ? error.url : url;
+      this.dispatch("swifty:navigation-error", { url: fallbackURL, error });
+      this.fullLoad(fallbackURL, options.historyMode === "pop");
+    } finally {
+      if (sequence === this.sequence) {
+        this.setLoading(false, { url, navigationType: options.navigationType });
+      }
+    }
+  }
+
+  async fetchPage(url, { prefetch = false, signal } = {}) {
+    const response = await fetch(url, {
+      method: "GET",
+      credentials: "same-origin",
+      redirect: "follow",
+      signal,
+      headers: {
+        Accept: "text/html",
+        "X-Swifty-Navigation": "true",
+        ...(prefetch ? { "X-Swifty-Prefetch": "true" } : {}),
+      },
+    });
+
+    const finalURL = response.url || url;
+    if (!response.ok) throw new NavigationFallback(finalURL, `HTTP ${response.status}`);
+    if (!this.eligibleURL(new URL(finalURL, window.location.href))) {
+      throw new NavigationFallback(finalURL, "redirected outside the current origin");
+    }
+
+    const contentType = response.headers.get("content-type") || "";
+    if (!contentType.includes("text/html")) {
+      throw new NavigationFallback(finalURL, "response is not HTML");
+    }
+
+    const source = await response.text();
+    const parsed = new DOMParser().parseFromString(source, "text/html");
+    const target = parsed.querySelector(this.targetSelector);
+    if (!target) throw new NavigationFallback(finalURL, "navigation target is missing");
+
+    const cacheControl = response.headers.get("cache-control") || "";
+    return {
+      url: finalURL,
+      target,
+      title: parsed.title,
+      cacheable: !cacheControl.includes("no-store"),
+    };
+  }
+
+  morph(page) {
+    const current = document.querySelector(this.targetSelector);
+    if (!current) throw new NavigationFallback(page.url, "current navigation target is missing");
+
+    Idiomorph.morph(current, page.target, {
+      morphStyle: "outerHTML",
+      restoreFocus: false,
+      callbacks: {
+        beforeNodeMorphed: (oldNode) => {
+          if (oldNode.nodeType === Node.ELEMENT_NODE && oldNode.hasAttribute("data-swifty-permanent")) {
+            return false;
+          }
+        },
+      },
+    });
+
+    if (page.title) document.title = page.title;
+  }
+
+  async prefetch(url) {
+    const key = this.cacheKey(url);
+    const existing = this.cache.get(key);
+    if (existing && existing.expiresAt > Date.now()) return existing.promise;
+    if (existing) this.cache.delete(key);
+
+    const promise = this.fetchPage(key, { prefetch: true })
+      .then((page) => {
+        if (!page.cacheable) this.cache.delete(key);
+        return page;
+      })
+      .catch((error) => {
+        this.cache.delete(key);
+        if (!(error instanceof NavigationFallback)) console.debug("Swifty prefetch failed", error);
+        return null;
+      });
+
+    this.cache.set(key, { promise, expiresAt: Date.now() + this.cacheTTL });
+    this.pruneCache();
+    return promise;
+  }
+
+  async takePrefetch(url) {
+    const key = this.cacheKey(url);
+    const entry = this.cache.get(key);
+    if (!entry) return null;
+
+    this.cache.delete(key);
+    if (entry.expiresAt <= Date.now()) return null;
+    return entry.promise;
+  }
+
+  pruneCache() {
+    const now = Date.now();
+    for (const [key, entry] of this.cache) {
+      if (entry.expiresAt <= now) this.cache.delete(key);
+    }
+    while (this.cache.size > this.cacheSize) this.cache.delete(this.cache.keys().next().value);
+  }
+
+  clearCache() {
+    this.cache.clear();
+  }
+
+  eligibleClick(event, link) {
+    return event.button === 0 &&
+      !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey &&
+      !event.defaultPrevented &&
+      (!link.target || link.target === "_self");
+  }
+
+  eligibleLink(node) {
+    const link = node instanceof Element ? node.closest("a[href]") : null;
+    if (!link || link.hasAttribute("download")) return null;
+    if (link.closest('[data-swifty-navigation="off"]')) return null;
+    if (link.relList.contains("external")) return null;
+
+    const url = new URL(link.href, window.location.href);
+    return this.eligibleURL(url) ? link : null;
+  }
+
+  eligibleURL(url) {
+    return url.origin === window.location.origin && ["http:", "https:"].includes(url.protocol);
+  }
+
+  onlyChangesHash(url) {
+    return url.pathname === window.location.pathname &&
+      url.search === window.location.search &&
+      url.hash &&
+      url.hash !== window.location.hash;
+  }
+
+  prefetchEnabled() {
+    const connection = navigator.connection;
+    return this.prefetching &&
+      !connection?.saveData &&
+      !["slow-2g", "2g"].includes(connection?.effectiveType);
+  }
+
+  cacheKey(url) {
+    const value = new URL(url, window.location.href);
+    value.hash = "";
+    return value.href;
+  }
+
+  rememberScroll() {
+    const state = history.state || {};
+    history.replaceState({
+      ...state,
+      swifty: {
+        ...(state.swifty || {}),
+        url: window.location.href,
+        scroll: { x: window.scrollX, y: window.scrollY },
+      },
+    }, "", window.location.href);
+  }
+
+  updateHistory(url, mode) {
+    const state = { swifty: { url, scroll: { x: 0, y: 0 } } };
+    if (mode === "push") history.pushState(state, "", url);
+    else if (mode === "pop" && url !== window.location.href) history.replaceState(state, "", url);
+  }
+
+  restoreScroll(url, options) {
+    if (options.historyMode === "pop" && options.scroll) {
+      window.scrollTo(options.scroll.x || 0, options.scroll.y || 0);
+      return;
+    }
+
+    const hash = new URL(url, window.location.href).hash;
+    const anchor = this.anchorFor(hash);
+    if (anchor) anchor.scrollIntoView();
+    else window.scrollTo(0, 0);
+  }
+
+  manageFocus(url, navigationType) {
+    if (navigationType === "popstate") return;
+
+    const hash = new URL(url, window.location.href).hash;
+    const target = this.anchorFor(hash) ||
+      document.querySelector(`${this.targetSelector} [autofocus]`) ||
+      document.querySelector(this.targetSelector);
+    if (!target) return;
+
+    const addedTabIndex = !target.hasAttribute("tabindex") && !target.matches("a,button,input,select,textarea");
+    if (addedTabIndex) target.setAttribute("tabindex", "-1");
+    target.focus({ preventScroll: true });
+    if (addedTabIndex) target.addEventListener("blur", () => target.removeAttribute("tabindex"), { once: true });
+  }
+
+  anchorFor(hash) {
+    if (!hash) return null;
+    try {
+      return document.getElementById(decodeURIComponent(hash.slice(1)));
+    } catch {
+      return null;
+    }
+  }
+
+  nextFrame() {
+    return new Promise((resolve) => requestAnimationFrame(resolve));
+  }
+
+  setLoading(loading, detail) {
+    const root = document.documentElement;
+    const target = document.querySelector(this.targetSelector);
+    if (loading) {
+      root.setAttribute("data-swifty-navigating", "");
+      target?.setAttribute("aria-busy", "true");
+      this.dispatch("swifty:navigation-start", detail);
+    } else {
+      root.removeAttribute("data-swifty-navigating");
+      target?.removeAttribute("aria-busy");
+      this.dispatch("swifty:navigation-end", detail);
+    }
+  }
+
+  dispatch(name, detail, cancelable = false) {
+    return document.dispatchEvent(new CustomEvent(name, { detail, cancelable }));
+  }
+
+  fullLoad(url, replace = false) {
+    if (replace) window.location.replace(url);
+    else window.location.assign(url);
+  }
+}
+
+const script = document.querySelector("script[data-swifty-navigation]");
+if (script) {
+  const navigation = new SwiftyNavigation({
+    target: script.dataset.target,
+    prefetching: script.dataset.prefetching !== "off",
+    cacheSize: script.dataset.cacheSize,
+    cacheTTL: script.dataset.cacheTtl,
+  });
+  window.SwiftyNavigation = navigation;
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => navigation.start(), { once: true });
+  } else {
+    navigation.start();
+  }
+}

package/src/concurrency.js

@@ -0,0 +1,25 @@
+const DEFAULT_CONCURRENCY = 16;
+
+const getConcurrencyLimit = (value = DEFAULT_CONCURRENCY) => {
+  const limit = Number(value);
+  return Number.isInteger(limit) && limit > 0 ? limit : DEFAULT_CONCURRENCY;
+};
+
+const mapLimit = async (items, mapper, concurrency = DEFAULT_CONCURRENCY) => {
+  const limit = Math.min(getConcurrencyLimit(concurrency), items.length || 1);
+  const results = new Array(items.length);
+  let index = 0;
+
+  const workers = Array.from({ length: limit }, async () => {
+    while (index < items.length) {
+      const currentIndex = index;
+      index += 1;
+      results[currentIndex] = await mapper(items[currentIndex], currentIndex);
+    }
+  });
+
+  await Promise.all(workers);
+  return results;
+};
+
+export { getConcurrencyLimit, mapLimit };

package/src/config.js

@@ -16,6 +16,7 @@ const dirs = {
   css: path.join(baseDir, "css"),
   js: path.join(baseDir, "js"),
   partials: path.join(baseDir, "partials"),
+  data: path.join(baseDir, "data"),
 };
 
 async function loadConfig(dir) {
@@ -31,6 +32,39 @@ async function loadConfig(dir) {
   return {};
 }
 
-const defaultConfig = await loadConfig(baseDir);
+// Hardcoded defaults (used if not specified in config file)
+const builtInDefaults = {
+  default_layout_name: 'default',
+  // Reading time calculation
+  words_per_minute: 200,
+  // Image optimization settings
+  max_image_width: 800,
+  image_quality: 80,
+  // LiveReload and watcher settings
+  livereload_port: 35729,
+  watcher_delay: 100,
+  watcher_interval: 500,
+  // Pagination
+  default_page_count: 2,
+  // Build safety
+  build_concurrency: 16,
+  // Navigation
+  morphing: true,
+  prefetching: true,
+  morph_target: 'main',
+  navigation_cache_size: 20,
+  navigation_cache_ttl: 15,
+};
+
+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 };
+export { baseDir, dirs, defaultConfig, loadConfig };

package/src/data.js

@@ -0,0 +1,70 @@
+import fs from "fs/promises";
+import path from "path";
+import yaml from "js-yaml";
+import fsExtra from "fs-extra";
+import { dirs } from "./config.js";
+
+let dataCache = null;
+
+/**
+ * Load all data files from the data/ folder
+ * Supports .json and .yaml/.yml files
+ * File name becomes the key: data/team.json -> data.team
+ */
+async function loadData() {
+  if (dataCache !== null) {
+    return dataCache;
+  }
+
+  const data = {};
+
+  // Check if data directory exists
+  if (!(await fsExtra.pathExists(dirs.data))) {
+    dataCache = data;
+    return data;
+  }
+
+  try {
+    const files = await fs.readdir(dirs.data);
+
+    for (const file of files) {
+      const filePath = path.join(dirs.data, file);
+      const stat = await fs.stat(filePath);
+
+      // Skip directories
+      if (stat.isDirectory()) continue;
+
+      const ext = path.extname(file).toLowerCase();
+      const name = path.basename(file, ext);
+
+      // Only process JSON and YAML files
+      if (!['.json', '.yaml', '.yml'].includes(ext)) continue;
+
+      try {
+        const content = await fs.readFile(filePath, 'utf-8');
+
+        if (ext === '.json') {
+          data[name] = JSON.parse(content);
+        } else {
+          data[name] = yaml.load(content);
+        }
+      } catch (error) {
+        console.warn(`Error loading data file ${file}: ${error.message}`);
+      }
+    }
+  } catch (error) {
+    console.warn(`Error reading data directory: ${error.message}`);
+  }
+
+  dataCache = data;
+  return data;
+}
+
+/**
+ * Clear the data cache (useful for watch mode)
+ */
+function clearDataCache() {
+  dataCache = null;
+}
+
+export { loadData, clearDataCache };

package/src/init.js

@@ -2,62 +2,55 @@
 
 import fs from "fs";
 import path from "path";
-import { fileURLToPath } from "url";
-import { dirname } from "path";
 
-// Needed to emulate __dirname in ES modules
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-// Define the structure
-const structure = {
-  "pages/index.md": "This my home page.",
-  "layouts/": null,
-  "partials/": null,
-  "css/": null,
-  "js/": null,
-  "images/": null,
-  "config.yaml": `sitename: Swifty
+function getStructure(sitename) {
+  return {
+    "pages/index.md": `# Welcome to ${sitename}\n\nThis is my home page.`,
+    "layouts/": null,
+    "partials/": null,
+    "css/": null,
+    "js/": null,
+    "images/": null,
+    "data/": null,
+    "config.yaml": `sitename: ${sitename}
 breadcrumb_separator: "»"
 breadcrumb_class: swifty_breadcrumb
 link_class: swifty_link
-tag_class: tag
-default_layout_name: site
+tag_class: swifty_tag
+default_layout_name: default
 default_link_name: links
 max_image_size: 800
+morphing: true
+prefetching: true
+morph_target: main
 
-dateFormat: 
+dateFormat:
   weekday: short
   month: short
   day: numeric
   year: numeric`,
-  "template.html": `<!DOCTYPE html>
+    "template.html": `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="icon" href="favicon.ico" sizes="48x48" type="image/x-icon">
-  <link rel="icon" href="favicon-16x16.png" sizes="16x16" type="image/x-icon">
-  <link rel="icon" href="favicon-32x32.png" sizes="32x32" type="image/png">
-  <link rel="apple-touch-icon" href="path/to/apple-touch-icon.png">
-  <link rel="icon" sizes="192x192" href="android-chrome-192x19.png">
-  <link rel="icon" sizes="512x512" href="android-chrome-512x512.png">
-  <title>{{ sitename }} || {{ title }}</title>
+  <title><%= sitename %> | <%= title %></title>
 </head>
 <body>
   <header>
-      <h1>Swifty</h1>
+      <h1>${sitename}</h1>
   </header>
     <main>
-    {{ content }}
+    <%= content %>
   </main>
     <footer>
     <p>This site was built with Swifty, the super speedy static site generator.</p>
   </footer>
 </body>
 </html>
-  `
-};
+  `,
+  };
+}
 
 function createStructure(basePath, structure) {
   Object.entries(structure).forEach(([filePath, content]) => {
@@ -71,7 +64,20 @@ function createStructure(basePath, structure) {
   });
 }
 
-const projectRoot = process.cwd();
-createStructure(projectRoot, structure);
+export default function init(sitename) {
+  const projectRoot = path.join(process.cwd(), sitename);
+
+  // Check if folder already exists
+  if (fs.existsSync(projectRoot)) {
+    console.error(`Error: Folder "${sitename}" already exists.`);
+    process.exit(1);
+  }
 
-console.log("✅ Swifty project initialized successfully!");
+  const structure = getStructure(sitename);
+  createStructure(projectRoot, structure);
+
+  console.log(`Site "${sitename}" created successfully!`);
+  console.log(`\nNext steps:`);
+  console.log(`  cd ${sitename}`);
+  console.log(`  npx swifty start`);
+}