htmlhost-cli 1.5.1 → 1.7.0

package/README.md

@@ -38,8 +38,11 @@ Deploy an HTML file — or an entire directory of HTML files — and get live UR
 # Single file
 htmlhost deploy index.html
 
-# All .html files in the current directory
+# All .html files in the current directory (as separate sites)
 htmlhost deploy .
+
+# All .html files as ONE multi-page site
+htmlhost deploy . --pages
 ```
 
 Local assets (scripts, CSS, images, fonts) referenced in the HTML are
@@ -51,6 +54,19 @@ deployed as a separate linked site. The mapping is saved to `.htmlhost` so
 subsequent `htmlhost deploy .` updates all of them in place. Shared assets
 (e.g. a `styles.css` referenced by multiple pages) are uploaded once and reused.
 
+**Multi-page deploy:** Use `--pages` to deploy a directory as a single
+multi-page site. File names map to URL paths:
+
+```
+index.html       → /
+about.html       → /about
+contact.html     → /contact
+blog/index.html  → /blog
+blog/post-1.html → /blog/post-1
+```
+
+Add a `404.html` file and it will be served automatically for missing pages.
+
 | Option | Description |
 |---|---|
 | `--ttl <value>` | Set expiry: `1d`, `7d`, `30d`, `never` |
@@ -58,6 +74,7 @@ subsequent `htmlhost deploy .` updates all of them in place. Shared assets
 | `--title <title>` | Set the site title (single file only) |
 | `--new` | Force new sites (ignore .htmlhost link) |
 | `--no-assets` | Skip automatic asset uploading |
+| `--pages` | Deploy directory as one multi-page site |
 
 ### `htmlhost list`
 List all your sites with URLs, sizes, and expiry.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "htmlhost-cli",
-  "version": "1.5.1",
+  "version": "1.7.0",
   "description": "Deploy HTML files from the terminal — htmlhost.co CLI",
   "type": "module",
   "bin": {

package/src/api.mjs

@@ -2,6 +2,7 @@
  * HTTP client wrapper for the htmlhost API.
  */
 import { getToken, getApi } from "./config.mjs";
+import { dim, yellow } from "./ui.mjs";
 
 export class ApiError extends Error {
   constructor(message, status) {
@@ -10,6 +11,39 @@ export class ApiError extends Error {
   }
 }
 
+const MAX_RETRIES = 3;
+const BASE_DELAY_MS = 500;
+
+/**
+ * Retry wrapper with exponential backoff.
+ * Retries on network errors ("fetch failed", ECONNRESET, etc.)
+ * and 5xx server errors. Does NOT retry on 4xx client errors.
+ */
+async function withRetry(fn, label = "request") {
+  let lastError;
+  for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
+    try {
+      return await fn();
+    } catch (e) {
+      lastError = e;
+      const isNetworkError =
+        !(e instanceof ApiError) ||
+        (e.status >= 500 && e.status < 600);
+
+      if (!isNetworkError || attempt === MAX_RETRIES) {
+        throw e;
+      }
+
+      const delay = BASE_DELAY_MS * Math.pow(2, attempt - 1);
+      console.log(
+        `   ${yellow("↻")} ${label} failed (attempt ${attempt}/${MAX_RETRIES}), retrying in ${delay}ms… ${dim(e.message)}`
+      );
+      await new Promise((r) => setTimeout(r, delay));
+    }
+  }
+  throw lastError;
+}
+
 function headers(extra = {}) {
   const token = getToken();
   if (!token) throw new ApiError("Not logged in. Run: htmlhost login", 0);
@@ -20,52 +54,61 @@ function headers(extra = {}) {
 }
 
 export async function get(path) {
-  const res = await fetch(`${getApi()}${path}`, {
-    headers: headers(),
-  });
-  const data = await res.json();
-  if (!res.ok) throw new ApiError(data.error || `HTTP ${res.status}`, res.status);
-  return data;
+  return withRetry(async () => {
+    const res = await fetch(`${getApi()}${path}`, {
+      headers: headers(),
+    });
+    const data = await res.json();
+    if (!res.ok) throw new ApiError(data.error || `HTTP ${res.status}`, res.status);
+    return data;
+  }, `GET ${path}`);
 }
 
 export async function post(path, body) {
-  const res = await fetch(`${getApi()}${path}`, {
-    method: "POST",
-    headers: headers({ "Content-Type": "application/json" }),
-    body: JSON.stringify(body),
-  });
-  const data = await res.json();
-  if (!res.ok) throw new ApiError(data.error || `HTTP ${res.status}`, res.status);
-  return data;
+  return withRetry(async () => {
+    const res = await fetch(`${getApi()}${path}`, {
+      method: "POST",
+      headers: headers({ "Content-Type": "application/json" }),
+      body: JSON.stringify(body),
+    });
+    const data = await res.json();
+    if (!res.ok) throw new ApiError(data.error || `HTTP ${res.status}`, res.status);
+    return data;
+  }, `POST ${path}`);
 }
 
 export async function del(path) {
-  const res = await fetch(`${getApi()}${path}`, {
-    method: "DELETE",
-    headers: headers(),
-  });
-  const data = await res.json();
-  if (!res.ok) throw new ApiError(data.error || `HTTP ${res.status}`, res.status);
-  return data;
+  return withRetry(async () => {
+    const res = await fetch(`${getApi()}${path}`, {
+      method: "DELETE",
+      headers: headers(),
+    });
+    const data = await res.json();
+    if (!res.ok) throw new ApiError(data.error || `HTTP ${res.status}`, res.status);
+    return data;
+  }, `DELETE ${path}`);
 }
 
 /**
  * Upload a file via multipart/form-data.
  */
 export async function uploadFile(path, filePath, fileName, mimeType) {
-  const { readFileSync } = await import("node:fs");
-  const fileBuffer = readFileSync(filePath);
-  const blob = new Blob([fileBuffer], { type: mimeType });
+  return withRetry(async () => {
+    const { readFileSync } = await import("node:fs");
+    const fileBuffer = readFileSync(filePath);
+    const blob = new Blob([fileBuffer], { type: mimeType });
 
-  const form = new FormData();
-  form.append("file", blob, fileName);
+    const form = new FormData();
+    form.append("file", blob, fileName);
 
-  const res = await fetch(`${getApi()}${path}`, {
-    method: "POST",
-    headers: { Authorization: `Bearer ${getToken()}` },
-    body: form,
-  });
-  const data = await res.json();
-  if (!res.ok) throw new ApiError(data.error || `HTTP ${res.status}`, res.status);
-  return data;
+    const res = await fetch(`${getApi()}${path}`, {
+      method: "POST",
+      headers: { Authorization: `Bearer ${getToken()}` },
+      body: form,
+    });
+    const data = await res.json();
+    if (!res.ok) throw new ApiError(data.error || `HTTP ${res.status}`, res.status);
+    return data;
+  }, `upload ${fileName}`);
 }
+

package/src/assets.mjs

@@ -137,7 +137,14 @@ async function processCssContent(css, cssDir, sharedCache, urlMap) {
       if (sharedCache) sharedCache.set(asset.filePath, hostedUrl);
       ok(`  ${cyan(ref)} ${dim(`(${formatBytes(asset.size)})`)} → ${hostedUrl}`);
     } catch (e) {
-      warn(`  Failed to upload ${cyan(ref)}: ${e.message}`);
+      // Fall back to shared cache (which includes persisted entries)
+      if (sharedCache && sharedCache.has(asset.filePath)) {
+        const fallbackUrl = sharedCache.get(asset.filePath);
+        urlMap.set(ref, fallbackUrl);
+        warn(`  Upload failed for CSS asset ${cyan(ref)}, using cached URL`);
+      } else {
+        warn(`  Failed to upload ${cyan(ref)}: ${e.message}`);
+      }
     }
   }
 
@@ -232,12 +239,13 @@ function findAssetRefs(html) {
  * @param {string} html         The original HTML content
  * @param {string} baseDir      Directory the HTML file lives in
  * @param {Map<string, string>} [sharedCache]  Optional filePath → hostedUrl cache for batch deploys
- * @returns {Promise<string>}   Rewritten HTML with inlined/hosted assets
+ * @param {Map<string, string>} [persistedCache]  Optional filePath → hostedUrl cache from .htmlhost (survives between deploys)
+ * @returns {Promise<{html: string, resolvedCache: Map<string, string>}>}   Rewritten HTML + cache to persist
  */
-export async function processAssets(html, baseDir, sharedCache) {
+export async function processAssets(html, baseDir, sharedCache, persistedCache) {
   const entries = findAssetRefs(html);
 
-  if (entries.length === 0) return html;
+  if (entries.length === 0) return { html, resolvedCache: persistedCache || new Map() };
 
   const api = getApi();
 
@@ -283,13 +291,25 @@ export async function processAssets(html, baseDir, sharedCache) {
       continue;
     }
 
-    // Check shared cache first
+    // Check shared cache first (in-memory, within this deploy)
     if (sharedCache && sharedCache.has(asset.filePath)) {
       urlMap.set(ref, sharedCache.get(asset.filePath));
       ok(`${cyan(ref)} ${dim("(cached)")}`);
       continue;
     }
 
+    // Check persisted cache (from .htmlhost, across deploys)
+    if (persistedCache && persistedCache.has(asset.filePath)) {
+      const cached = persistedCache.get(asset.filePath);
+      // Invalidate cache if file size changed (file was modified)
+      if (cached.size === asset.size) {
+        urlMap.set(ref, cached.url);
+        if (sharedCache) sharedCache.set(asset.filePath, cached.url);
+        ok(`${cyan(ref)} ${dim("(previously uploaded)")}`);
+        continue;
+      }
+    }
+
     const ext = extname(asset.filePath).toLowerCase();
 
     // --- CSS file: inline (with nested url() processing) ---
@@ -325,14 +345,22 @@ export async function processAssets(html, baseDir, sharedCache) {
       const hostedUrl = `${api}${data.url}`;
       urlMap.set(ref, hostedUrl);
       if (sharedCache) sharedCache.set(asset.filePath, hostedUrl);
+      if (persistedCache) persistedCache.set(asset.filePath, { url: hostedUrl, size: asset.size });
       uploadCount++;
       ok(`${cyan(ref)} ${dim(`(${formatBytes(asset.size)})`)} → ${hostedUrl}`);
     } catch (e) {
-      warn(`Failed to upload ${cyan(ref)}: ${e.message}`);
+      // Fall back to persisted cache if available — don't lose previously working URLs
+      if (persistedCache && persistedCache.has(asset.filePath)) {
+        const fallback = persistedCache.get(asset.filePath);
+        urlMap.set(ref, fallback.url);
+        warn(`Upload failed for ${cyan(ref)}, using cached URL`);
+      } else {
+        warn(`Failed to upload ${cyan(ref)}: ${e.message}`);
+      }
     }
   }
 
-  if (urlMap.size === 0 && inlineMap.size === 0) return html;
+  if (urlMap.size === 0 && inlineMap.size === 0) return { html, resolvedCache: persistedCache || new Map() };
 
   // --- Phase 2: Rewrite the HTML ---
 
@@ -385,7 +413,17 @@ export async function processAssets(html, baseDir, sharedCache) {
     ok(`Uploaded ${cyan(String(uploadCount))} asset${uploadCount === 1 ? "" : "s"} to media library`);
   }
 
-  return result;
+  // Build the final resolved cache — merge persisted + newly uploaded
+  const resolvedCache = persistedCache || new Map();
+  for (const [ref, hostedUrl] of urlMap) {
+    const asset = resolveAsset(baseDir, ref);
+    if (asset.filePath && !resolvedCache.has(asset.filePath)) {
+      // Only add entries not already set (upload path sets {url, size} directly)
+      resolvedCache.set(asset.filePath, { url: hostedUrl, size: asset.size || 0 });
+    }
+  }
+
+  return { html: result, resolvedCache };
 }
 
 /**

package/src/cli.mjs

@@ -4,7 +4,7 @@
 import { bold, dim, cyan, err } from "./ui.mjs";
 import { ApiError } from "./api.mjs";
 
-const VERSION = "1.5.0";
+const VERSION = "1.7.0";
 
 const HELP = `
   ${bold("htmlhost")} ${dim(`v${VERSION}`)} — deploy HTML from the terminal
@@ -24,6 +24,7 @@ const HELP = `
     --title <title>   Set the site title
     --new             Force a new site (ignore .htmlhost link)
     --no-assets       Skip auto-uploading local assets
+    --pages           Deploy directory as one multi-page site
 
   ${bold("Delete options:")}
     --force, -f       Skip confirmation prompt
@@ -32,6 +33,7 @@ const HELP = `
     1st deploy: creates a site, saves slug to ${dim(".htmlhost")}
     2nd deploy: reads ${dim(".htmlhost")}, updates the same site
     Directory: deploys each .html as a separate linked site
+    ${cyan("--pages")}: deploys all .html as pages within ONE site
     Local scripts, CSS, and images are auto-uploaded
     and rewritten to hosted URLs (files >10 MB are skipped)
 
@@ -39,6 +41,7 @@ const HELP = `
     ${dim("$")} htmlhost deploy                ${dim("# deploys ./index.html")}
     ${dim("$")} htmlhost deploy page.html      ${dim("# deploys a specific file")}
     ${dim("$")} htmlhost deploy .              ${dim("# deploys all *.html in dir")}
+    ${dim("$")} htmlhost deploy . --pages      ${dim("# multi-page site from dir")}
     ${dim("$")} htmlhost deploy --ttl 30d      ${dim("# deploy with 30-day TTL")}
     ${dim("$")} htmlhost deploy --new          ${dim("# force new sites")}
     ${dim("$")} htmlhost upload logo.png

package/src/commands/deploy.mjs

@@ -50,10 +50,11 @@ function promptChoice(question, options) {
 }
 
 /**
- * htmlhost deploy [file|dir] [--ttl 7d] [--slug existing-slug] [--title "My Site"] [--new] [--no-assets]
+ * htmlhost deploy [file|dir] [--ttl 7d] [--slug existing-slug] [--title "My Site"] [--new] [--no-assets] [--pages]
  *
  * - Defaults to index.html in the current directory
  * - If a directory (or ".") is given, deploys all *.html files as separate linked sites
+ * - Use --pages with a directory to deploy all *.html files as pages within ONE multi-page site
  * - Remembers the site(s) via .htmlhost file (auto re-deploy)
  * - Use --new to force fresh deploys
  */
@@ -64,6 +65,7 @@ export async function deploy(args) {
   const title = getFlag(args, "--title");
   const forceNew = args.includes("--new");
   const skipAssets = args.includes("--no-assets");
+  const multiPage = args.includes("--pages");
 
   // Check if the target is a directory
   if (file) {
@@ -71,6 +73,9 @@ export async function deploy(args) {
     try {
       const stat = statSync(filePath);
       if (stat.isDirectory()) {
+        if (multiPage) {
+          return deployMultiPage(filePath, { ttl, title, forceNew, skipAssets });
+        }
         return deployDirectory(filePath, { ttl, forceNew, skipAssets });
       }
     } catch {
@@ -78,6 +83,11 @@ export async function deploy(args) {
     }
   }
 
+  // --pages without explicit dir defaults to cwd
+  if (multiPage && !file) {
+    return deployMultiPage(resolve("."), { ttl, title, forceNew, skipAssets });
+  }
+
   // Default to index.html in the current directory
   if (!file) {
     const defaultFile = resolve("index.html");
@@ -192,7 +202,15 @@ async function deploySingleFile(file, { ttl, title, forceNew, skipAssets, slug }
 
   // Upload local assets (scripts, css, images) and rewrite references
   if (!skipAssets) {
-    html = await processAssets(html, projectDir);
+    // Load persisted asset cache from .htmlhost
+    const existingLink = readLink(projectDir);
+    const persistedCache = new Map(Object.entries(existingLink?.assets || {}));
+    const result = await processAssets(html, projectDir, undefined, persistedCache);
+    html = result.html;
+    // Persist the asset cache for next deploy
+    const linkData = readLink(projectDir) || {};
+    linkData.assets = Object.fromEntries(result.resolvedCache);
+    writeLink(projectDir, linkData);
   }
 
   info(slug ? `Re-deploying to ${cyan(slug)}…` : "Deploying new site…");
@@ -317,6 +335,9 @@ async function deployDirectory(dirPath, { ttl, forceNew, skipAssets }) {
   // Shared asset cache across all files — avoids re-uploading the same CSS/JS/image
   /** @type {Map<string, string>} absolute file path → hosted URL */
   const assetCache = new Map();
+  // Load persisted asset cache from .htmlhost
+  const existingAssets = link?.assets || {};
+  const persistedCache = new Map(Object.entries(existingAssets));
 
   for (const fileName of htmlFiles) {
     const filePath = join(dirPath, fileName);
@@ -327,9 +348,10 @@ async function deployDirectory(dirPath, { ttl, forceNew, skipAssets }) {
 
     let html = readFileSync(filePath, "utf8");
 
-    // Upload local assets with shared cache
+    // Upload local assets with shared + persisted cache
     if (!skipAssets) {
-      html = await processAssets(html, dirPath, assetCache);
+      const result = await processAssets(html, dirPath, assetCache, persistedCache);
+      html = result.html;
     }
 
     // Determine slug
@@ -363,6 +385,7 @@ async function deployDirectory(dirPath, { ttl, forceNew, skipAssets }) {
   const finalOnRedeploy = freshLink?.onRedeploy || onRedeploy;
   writeLink(dirPath, {
     sites: { ...existingSites, ...results },
+    assets: Object.fromEntries(persistedCache),
     ...(finalOnRedeploy ? { onRedeploy: finalOnRedeploy } : {}),
   });
 
@@ -381,6 +404,148 @@ async function deployDirectory(dirPath, { ttl, forceNew, skipAssets }) {
   console.log("");
 }
 
+/**
+ * Deploy all *.html files in a directory as pages within a single multi-page site.
+ * Uses the --pages flag. File names map to URL paths:
+ *   index.html → /
+ *   about.html → /about
+ *   blog/index.html → /blog
+ *   blog/post.html → /blog/post
+ */
+async function deployMultiPage(dirPath, { ttl, title, forceNew, skipAssets }) {
+  // Find all .html files (recursive) — skip dotfiles
+  const htmlFiles = findHtmlFiles(dirPath, dirPath);
+
+  if (htmlFiles.length === 0) {
+    err("No .html files found in this directory.");
+    process.exit(1);
+  }
+
+  // Read existing link data
+  const link = readLink(dirPath);
+  const existingSlug = (!forceNew && link?.multipage?.slug) || null;
+
+  console.log("");
+  info(`Multi-page deploy: ${cyan(bold(String(htmlFiles.length)))} page${htmlFiles.length > 1 ? "s" : ""} in ${cyan(basename(dirPath) || ".")}`);
+  console.log("");
+
+  // Show page mapping
+  for (const { relativePath, pagePath } of htmlFiles) {
+    console.log(`   ${dim("📄")} ${relativePath} → ${cyan(pagePath)}`);
+  }
+  console.log("");
+
+  // If we have a linked slug, confirm overwrite
+  if (existingSlug) {
+    info(`Linked to ${cyan(existingSlug + ".htmlhost.co")} ${dim("(multi-page)")}`);
+  }
+
+  // Process assets and build page payloads
+  const assetCache = new Map();
+  const existingAssets = link?.assets || {};
+  const persistedCache = new Map(Object.entries(existingAssets));
+  const pagePayloads = [];
+
+  for (const { filePath, pagePath, relativePath } of htmlFiles) {
+    const stat = statSync(filePath);
+    info(`${bold(relativePath)} ${dim(`(${formatBytes(stat.size)})`)}`);  
+
+    let html = readFileSync(filePath, "utf8");
+
+    if (!skipAssets) {
+      const result = await processAssets(html, dirname(filePath), assetCache, persistedCache);
+      html = result.html;
+    }
+
+    pagePayloads.push({
+      path: pagePath,
+      html,
+    });
+  }
+
+  // Deploy all pages as one multi-page site
+  const body = { pages: pagePayloads };
+  if (ttl) body.ttl = ttl;
+  if (existingSlug) body.slug = existingSlug;
+  if (title) body.title = title;
+
+  info(existingSlug ? `Re-deploying to ${cyan(existingSlug)}…` : "Deploying new multi-page site…");
+
+  try {
+    const data = await post("/api/sites", body);
+
+    // Save link
+    writeLink(dirPath, {
+      multipage: {
+        slug: data.slug,
+        url: data.url,
+        pageCount: data.pageCount || pagePayloads.length,
+      },
+      assets: Object.fromEntries(persistedCache),
+    });
+
+    console.log("");
+    console.log(`  ${green("━".repeat(40))}`);
+    ok(`${bold("Live")} at ${cyan(`https://${data.url}`)}`);
+    console.log(`   ${dim(`${data.pageCount || pagePayloads.length} pages · ${data.ttl} TTL`)}`);
+    console.log("");
+
+    for (const { pagePath } of htmlFiles) {
+      const urlPath = pagePath === "/" ? "" : pagePath;
+      console.log(`   ${cyan(`https://${data.url}${urlPath}`)}`);
+    }
+    console.log("");
+    console.log(`   ${dim("Linked → .htmlhost (multipage)")}`);
+    console.log("");
+  } catch (e) {
+    err(`Deploy failed: ${e.message}`);
+    process.exit(1);
+  }
+}
+
+/**
+ * Recursively find all .html files and derive their page paths.
+ * Returns [{ filePath, relativePath, pagePath }]
+ */
+function findHtmlFiles(baseDir, currentDir) {
+  const entries = readdirSync(currentDir, { withFileTypes: true });
+  const results = [];
+
+  for (const entry of entries) {
+    if (entry.name.startsWith(".")) continue;
+
+    const fullPath = join(currentDir, entry.name);
+
+    if (entry.isDirectory()) {
+      results.push(...findHtmlFiles(baseDir, fullPath));
+    } else if (entry.name.endsWith(".html")) {
+      const relativePath = fullPath.slice(baseDir.length + 1); // e.g. "about.html" or "blog/post.html"
+
+      // Derive page path from file path
+      let pagePath;
+      if (entry.name === "index.html") {
+        // index.html → parent directory path (or "/" for root)
+        const dirRel = dirname(relativePath);
+        pagePath = dirRel === "." ? "/" : `/${dirRel}`;
+      } else {
+        // about.html → /about, blog/post.html → /blog/post
+        pagePath = "/" + relativePath.replace(/\.html$/, "");
+      }
+
+      results.push({ filePath: fullPath, relativePath, pagePath });
+    }
+  }
+
+  // Sort: root index first, then alphabetical
+  results.sort((a, b) => {
+    if (a.pagePath === "/") return -1;
+    if (b.pagePath === "/") return 1;
+    return a.pagePath.localeCompare(b.pagePath);
+  });
+
+  return results;
+}
+
 function getFlag(args, flag) {
   const idx = args.indexOf(flag);
   if (idx === -1 || idx >= args.length - 1) return null;