htmlhost-cli 1.2.0 → 1.4.0

package/README.md

@@ -31,14 +31,33 @@ htmlhost upload logo.png
 ### `htmlhost login`
 Authenticate with an API token. Generate one at [htmlhost.co/settings#keys](https://htmlhost.co/settings#keys).
 
-### `htmlhost deploy <file> [options]`
-Deploy an HTML file and get a live URL.
+### `htmlhost deploy [file|dir] [options]`
+Deploy an HTML file — or an entire directory of HTML files — and get live URLs.
+
+```bash
+# Single file
+htmlhost deploy index.html
+
+# All .html files in the current directory
+htmlhost deploy .
+```
+
+Local assets (scripts, CSS, images, fonts) referenced in the HTML are
+automatically uploaded to your media library and the references are rewritten
+to point at the hosted URLs. Files over 10 MB are skipped.
+
+**Directory deploy:** When you pass a directory (or `.`), every `*.html` file is
+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.
 
 | Option | Description |
 |---|---|
 | `--ttl <value>` | Set expiry: `1d`, `7d`, `30d`, `never` |
-| `--slug <slug>` | Re-deploy to an existing site |
-| `--title <title>` | Set the site title |
+| `--slug <slug>` | Re-deploy to an existing site (single file only) |
+| `--title <title>` | Set the site title (single file only) |
+| `--new` | Force new sites (ignore .htmlhost link) |
+| `--no-assets` | Skip automatic asset uploading |
 
 ### `htmlhost list`
 List all your sites with URLs, sizes, and expiry.

package/package.json

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

package/src/assets.mjs

@@ -0,0 +1,245 @@
+/**
+ * Asset inlining — scan HTML for local asset references, upload them,
+ * and rewrite the HTML to point at the hosted URLs.
+ *
+ * Handles:  <script src>, <link href>, <img src>, <img srcset>,
+ *           <source src/srcset>, <video src/poster>, <audio src>,
+ *           CSS url() inside <style> blocks and inline style attributes.
+ *
+ * Skips:    external URLs (http/https/data://), protocol-relative (//),
+ *           anchors (#), and files > 10 MB.
+ */
+import { readFileSync, statSync, existsSync } from "node:fs";
+import { resolve, dirname, basename } from "node:path";
+import { uploadFile } from "./api.mjs";
+import { getApi } from "./config.mjs";
+import { ok, warn, dim, cyan, formatBytes, mimeFromExt } from "./ui.mjs";
+
+const MAX_ASSET_BYTES = 10 * 1024 * 1024; // 10 MB
+
+/**
+ * Returns true for references we should NOT try to upload.
+ */
+function isExternal(ref) {
+  if (!ref || !ref.trim()) return true;
+  const r = ref.trim();
+  return (
+    r.startsWith("http://") ||
+    r.startsWith("https://") ||
+    r.startsWith("//") ||
+    r.startsWith("data:") ||
+    r.startsWith("#") ||
+    r.startsWith("javascript:") ||
+    r.startsWith("mailto:")
+  );
+}
+
+/**
+ * Given a base directory and a relative path, resolve it and check
+ * it exists, is a file, and is under the size limit.
+ *
+ * Returns { filePath, skip, reason } — if skip is true, reason explains why.
+ */
+function resolveAsset(baseDir, ref) {
+  const cleaned = ref.split("?")[0].split("#")[0]; // strip query/hash
+  if (!cleaned) return { skip: true, reason: "empty" };
+
+  const filePath = resolve(baseDir, cleaned);
+
+  if (!existsSync(filePath)) {
+    return { filePath, skip: true, reason: "not found" };
+  }
+
+  let stat;
+  try {
+    stat = statSync(filePath);
+  } catch {
+    return { filePath, skip: true, reason: "cannot stat" };
+  }
+
+  if (!stat.isFile()) {
+    return { filePath, skip: true, reason: "not a file" };
+  }
+
+  if (stat.size > MAX_ASSET_BYTES) {
+    return { filePath, skip: true, reason: `exceeds 10 MB (${formatBytes(stat.size)})` };
+  }
+
+  return { filePath, size: stat.size, skip: false };
+}
+
+/**
+ * Scan HTML string for local asset references.
+ * Returns an array of { original, ref } entries where `original` is the
+ * exact attribute value substring and `ref` is the cleaned path.
+ */
+function findAssetRefs(html) {
+  const refs = new Set();
+  const entries = [];
+
+  function add(original) {
+    const ref = original.trim();
+    if (isExternal(ref)) return;
+    if (refs.has(ref)) return; // dedupe
+    refs.add(ref);
+    entries.push({ original, ref });
+  }
+
+  // Match src="…" and href="…" on relevant tags.
+  // Capture: <script src="x">, <img src="x">, <source src="x">,
+  //          <video src="x" poster="x">, <audio src="x">,
+  //          <link href="x"> (only stylesheets/icons/preloads)
+  // We intentionally use a broad regex and then filter.
+
+  // --- Tag attributes: src, href, poster ---
+  const attrRe = /<(?:script|img|source|video|audio|link|embed|track)\b[^>]*?\b(?:src|href|poster)\s*=\s*(?:"([^"]*)"|'([^']*)')/gi;
+  let m;
+  while ((m = attrRe.exec(html)) !== null) {
+    const val = m[1] ?? m[2];
+    if (val) add(val);
+  }
+
+  // --- srcset attributes (img, source) ---
+  const srcsetRe = /<(?:img|source)\b[^>]*?\bsrcset\s*=\s*(?:"([^"]*)"|'([^']*)')/gi;
+  while ((m = srcsetRe.exec(html)) !== null) {
+    const srcset = m[1] ?? m[2];
+    if (!srcset) continue;
+    // srcset is comma-separated: "path 2x, path2 300w"
+    for (const part of srcset.split(",")) {
+      const src = part.trim().split(/\s+/)[0];
+      if (src) add(src);
+    }
+  }
+
+  // --- CSS url() in <style> blocks ---
+  const styleBlockRe = /<style[^>]*>([\s\S]*?)<\/style>/gi;
+  while ((m = styleBlockRe.exec(html)) !== null) {
+    extractCssUrls(m[1], add);
+  }
+
+  // --- CSS url() in inline style="…" attributes ---
+  const inlineStyleRe = /\bstyle\s*=\s*(?:"([^"]*)"|'([^']*)')/gi;
+  while ((m = inlineStyleRe.exec(html)) !== null) {
+    const css = m[1] ?? m[2];
+    if (css) extractCssUrls(css, add);
+  }
+
+  return entries;
+}
+
+/**
+ * Extract url(…) references from a CSS string.
+ */
+function extractCssUrls(css, add) {
+  const urlRe = /url\(\s*(?:"([^"]*)"|'([^']*)'|([^)]*?))\s*\)/gi;
+  let m;
+  while ((m = urlRe.exec(css)) !== null) {
+    const val = (m[1] ?? m[2] ?? m[3] ?? "").trim();
+    if (val) add(val);
+  }
+}
+
+/**
+ * Main entry: process HTML, upload local assets, return rewritten HTML.
+ *
+ * @param {string} html         The original HTML content
+ * @param {string} baseDir      Directory the HTML file lives in (for resolving relative paths)
+ * @param {Map<string, string>} [sharedCache]  Optional cache of filePath → hostedUrl for batch deploys
+ * @returns {Promise<string>}   Rewritten HTML with hosted asset URLs
+ */
+export async function processAssets(html, baseDir, sharedCache) {
+  const entries = findAssetRefs(html);
+
+  if (entries.length === 0) return html;
+
+  const api = getApi();
+
+  // Collect unique refs → upload once, build a replacement map
+  /** @type {Map<string, string>} ref → hosted URL */
+  const urlMap = new Map();
+
+  // Count how many actually need uploading (not already cached)
+  let needsUpload = 0;
+  for (const { ref } of entries) {
+    if (urlMap.has(ref)) continue;
+    const asset = resolveAsset(baseDir, ref);
+    if (asset.skip) continue;
+    if (sharedCache && sharedCache.has(asset.filePath)) {
+      urlMap.set(ref, sharedCache.get(asset.filePath));
+    } else {
+      needsUpload++;
+    }
+  }
+
+  const cachedCount = urlMap.size;
+  const totalLocal = cachedCount + needsUpload;
+
+  if (totalLocal > 0) {
+    console.log("");
+    const label = totalLocal === 1 ? "local asset" : "local assets";
+    if (cachedCount > 0 && needsUpload > 0) {
+      ok(`Found ${cyan(String(totalLocal))} ${label} (${cachedCount} cached, ${needsUpload} to upload)`);
+    } else if (cachedCount > 0) {
+      ok(`Found ${cyan(String(totalLocal))} ${label} (all cached)`);
+    } else {
+      ok(`Found ${cyan(String(totalLocal))} ${label} to upload`);
+    }
+    console.log("");
+  }
+
+  for (const { ref } of entries) {
+    if (urlMap.has(ref)) continue; // already resolved (from cache or previous ref)
+
+    const asset = resolveAsset(baseDir, ref);
+    if (asset.skip) {
+      warn(`Skipping ${cyan(ref)} — ${asset.reason}`);
+      continue;
+    }
+
+    const fileName = basename(asset.filePath);
+    const mime = mimeFromExt(fileName);
+
+    try {
+      const data = await uploadFile("/api/media", asset.filePath, fileName, mime);
+      const hostedUrl = `${api}${data.url}`;
+      urlMap.set(ref, hostedUrl);
+      // Store in shared cache by absolute path for cross-file dedup
+      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}`);
+    }
+  }
+
+  if (urlMap.size === 0) return html;
+
+  // Replace all occurrences.
+  // We do a simple, safe string replacement — find all attribute values matching
+  // our refs and swap them with the hosted URL.
+  let result = html;
+
+  for (const [ref, hostedUrl] of urlMap) {
+    // Replace in attribute values: ="ref" and ='ref'
+    // Use a function replacer so we handle all occurrences correctly.
+    result = replaceAll(result, `"${ref}"`, `"${hostedUrl}"`);
+    result = replaceAll(result, `'${ref}'`, `'${hostedUrl}'`);
+
+    // Replace in CSS url(): url(ref), url("ref"), url('ref')
+    // The quoted forms are handled above. Handle the unquoted form too.
+    result = replaceAll(result, `url(${ref})`, `url(${hostedUrl})`);
+  }
+
+  console.log("");
+
+  return result;
+}
+
+/**
+ * Replace all occurrences of `search` in `str` with `replacement`.
+ */
+function replaceAll(str, search, replacement) {
+  // Use split/join for safe literal replacement (no regex escaping needed)
+  return str.split(search).join(replacement);
+}

package/src/cli.mjs

@@ -4,13 +4,13 @@
 import { bold, dim, cyan, err } from "./ui.mjs";
 import { ApiError } from "./api.mjs";
 
-const VERSION = "1.2.0";
+const VERSION = "1.4.0";
 
 const HELP = `
   ${bold("htmlhost")} ${dim(`v${VERSION}`)} — deploy HTML from the terminal
 
   ${bold("Usage:")}
-    ${cyan("htmlhost deploy")} [file] [options]  Deploy (defaults to index.html)
+    ${cyan("htmlhost deploy")} [file|dir] [opts]  Deploy file or directory
     ${cyan("htmlhost list")}                     List your sites
     ${cyan("htmlhost delete")} <slug>            Delete a site
     ${cyan("htmlhost upload")} <file|dir>        Upload media assets
@@ -23,6 +23,7 @@ const HELP = `
     --slug <slug>     Re-deploy to a specific site
     --title <title>   Set the site title
     --new             Force a new site (ignore .htmlhost link)
+    --no-assets       Skip auto-uploading local assets
 
   ${bold("Delete options:")}
     --force, -f       Skip confirmation prompt
@@ -30,12 +31,16 @@ const HELP = `
   ${bold("How deploy works:")}
     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
+    Local scripts, CSS, and images are auto-uploaded
+    and rewritten to hosted URLs (files >10 MB are skipped)
 
   ${bold("Examples:")}
     ${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 --ttl 30d      ${dim("# deploy with 30-day TTL")}
-    ${dim("$")} htmlhost deploy --new          ${dim("# force a new site")}
+    ${dim("$")} htmlhost deploy --new          ${dim("# force new sites")}
     ${dim("$")} htmlhost upload logo.png
     ${dim("$")} htmlhost delete old-project --force
 

package/src/commands/deploy.mjs

@@ -1,8 +1,9 @@
-import { readFileSync, writeFileSync, statSync, existsSync } from "node:fs";
+import { readFileSync, writeFileSync, statSync, existsSync, readdirSync } from "node:fs";
 import { basename, resolve, dirname, join } from "node:path";
 import { createInterface } from "node:readline";
 import { post } from "../api.mjs";
-import { ok, err, info, cyan, dim, bold, yellow, formatBytes } from "../ui.mjs";
+import { ok, err, info, cyan, dim, bold, yellow, green, formatBytes } from "../ui.mjs";
+import { processAssets } from "../assets.mjs";
 
 const LINK_FILE = ".htmlhost";
 
@@ -49,15 +50,34 @@ function promptChoice(question, options) {
 }
 
 /**
- * htmlhost deploy [file] [--ttl 7d] [--slug existing-slug] [--title "My Site"] [--new]
+ * htmlhost deploy [file|dir] [--ttl 7d] [--slug existing-slug] [--title "My Site"] [--new] [--no-assets]
  *
  * - Defaults to index.html in the current directory
- * - Remembers the site via .htmlhost file (auto re-deploy)
- * - Use --new to force a fresh deploy
+ * - If a directory (or ".") is given, deploys all *.html files as separate linked sites
+ * - Remembers the site(s) via .htmlhost file (auto re-deploy)
+ * - Use --new to force fresh deploys
  */
 export async function deploy(args) {
   let file = args.find((a) => !a.startsWith("--"));
 
+  const ttl = getFlag(args, "--ttl");
+  const title = getFlag(args, "--title");
+  const forceNew = args.includes("--new");
+  const skipAssets = args.includes("--no-assets");
+
+  // Check if the target is a directory
+  if (file) {
+    const filePath = resolve(file);
+    try {
+      const stat = statSync(filePath);
+      if (stat.isDirectory()) {
+        return deployDirectory(filePath, { ttl, forceNew, skipAssets });
+      }
+    } catch {
+      // Will be caught below in single-file flow
+    }
+  }
+
   // Default to index.html in the current directory
   if (!file) {
     const defaultFile = resolve("index.html");
@@ -66,35 +86,35 @@ export async function deploy(args) {
       info(`No file specified, using ${cyan("index.html")}`);
     } else {
       err("No file specified and no index.html found in the current directory.");
-      console.log(`  ${dim("Usage: htmlhost deploy [file.html] [--ttl 7d]")}`);
+      console.log(`  ${dim("Usage: htmlhost deploy [file.html|dir] [--ttl 7d]")}`);
       process.exit(1);
     }
   }
 
-  const ttl = getFlag(args, "--ttl");
-  const title = getFlag(args, "--title");
-  const forceNew = args.includes("--new");
+  // Single-file deploy
+  await deploySingleFile(file, { ttl, title, forceNew, skipAssets, slug: getFlag(args, "--slug") });
+}
 
+/**
+ * Deploy a single HTML file.
+ */
+async function deploySingleFile(file, { ttl, title, forceNew, skipAssets, slug }) {
   const filePath = resolve(file);
   const projectDir = dirname(filePath);
 
-  // Resolve slug: explicit --slug > .htmlhost link > new deploy
-  let slug = getFlag(args, "--slug");
   let isLinked = false;
 
   if (!slug && !forceNew) {
     const link = readLink(projectDir);
-    if (link?.slug) {
-      // Check if user has a saved preference
+    // Only use single-file link format (has slug at top level, not sites map)
+    if (link?.slug && !link.sites) {
       if (link.onRedeploy === "overwrite") {
         slug = link.slug;
         isLinked = true;
         info(`Linked to ${cyan(slug)} ${dim("(auto-overwrite)")}`);
       } else if (link.onRedeploy === "new") {
         info(`Creating new site ${dim("(auto-new)")}`);
-        // slug stays null → new deploy
       } else {
-        // Ask the user
         const choice = await promptChoice(
           `This project is linked to ${cyan(bold(link.slug + ".htmlhost.co"))}`,
           [
@@ -107,24 +127,24 @@ export async function deploy(args) {
         );
 
         switch (choice) {
-          case 0: // Overwrite
+          case 0:
             slug = link.slug;
             isLinked = true;
             break;
-          case 1: // New
+          case 1:
             break;
-          case 2: // Cancel
+          case 2:
           case -1:
             console.log("  Cancelled.");
             process.exit(0);
             break;
-          case 3: // Always overwrite
+          case 3:
             slug = link.slug;
             isLinked = true;
             writeLink(projectDir, { ...link, onRedeploy: "overwrite" });
             info(`Saved preference: ${dim("always overwrite")}`);
             break;
-          case 4: // Always new
+          case 4:
             writeLink(projectDir, { ...link, onRedeploy: "new" });
             info(`Saved preference: ${dim("always create new")}`);
             break;
@@ -143,14 +163,20 @@ export async function deploy(args) {
   }
 
   if (stat.isDirectory()) {
-    err("Directory deploy is not supported yet. Provide an HTML file.");
+    err("Expected an HTML file, got a directory.");
     process.exit(1);
   }
 
-  const html = readFileSync(filePath, "utf8");
+  let html = readFileSync(filePath, "utf8");
   const name = basename(filePath);
 
   info(`Reading ${cyan(name)} ${dim(`(${formatBytes(stat.size)})`)}`);
+
+  // Upload local assets (scripts, css, images) and rewrite references
+  if (!skipAssets) {
+    html = await processAssets(html, projectDir);
+  }
+
   info(slug ? `Re-deploying to ${cyan(slug)}…` : "Deploying new site…");
 
   const body = { html };
@@ -185,6 +211,146 @@ export async function deploy(args) {
   console.log("");
 }
 
+/**
+ * Deploy all *.html files in a directory as separate linked sites.
+ */
+async function deployDirectory(dirPath, { ttl, forceNew, skipAssets }) {
+  // Find all .html files in the directory (non-recursive, skip dotfiles)
+  const htmlFiles = readdirSync(dirPath)
+    .filter((f) => f.endsWith(".html") && !f.startsWith("."))
+    .sort((a, b) => {
+      // index.html first, then alphabetical
+      if (a === "index.html") return -1;
+      if (b === "index.html") return 1;
+      return a.localeCompare(b);
+    });
+
+  if (htmlFiles.length === 0) {
+    err("No .html files found in this directory.");
+    process.exit(1);
+  }
+
+  // Read existing link data
+  const link = readLink(dirPath);
+  const existingSites = link?.sites || {};
+  const onRedeploy = link?.onRedeploy || null;
+
+  const isRelink = Object.keys(existingSites).length > 0 && !forceNew;
+
+  console.log("");
+  info(`Found ${cyan(bold(String(htmlFiles.length)))} HTML file${htmlFiles.length > 1 ? "s" : ""} in ${cyan(basename(dirPath) || ".")}`);
+
+  // Show what we're about to do
+  for (const f of htmlFiles) {
+    const linked = existingSites[f];
+    if (linked && !forceNew) {
+      console.log(`   ${dim("↻")} ${f} → ${dim(linked.slug + ".htmlhost.co")}`);
+    } else {
+      console.log(`   ${dim("+")} ${f} → ${dim("new site")}`);
+    }
+  }
+  console.log("");
+
+  // If relinking, ask for confirmation (unless auto-overwrite)
+  if (isRelink && onRedeploy !== "overwrite") {
+    const linkedCount = htmlFiles.filter((f) => existingSites[f]).length;
+    const newCount = htmlFiles.length - linkedCount;
+
+    let desc = `${linkedCount} site${linkedCount > 1 ? "s" : ""} will be overwritten`;
+    if (newCount > 0) desc += `, ${newCount} new`;
+
+    const choice = await promptChoice(
+      `${desc}. Continue?`,
+      [
+        "Yes, deploy all",
+        "Cancel",
+        `Always overwrite ${dim("(remember for this project)")}`,
+      ]
+    );
+
+    switch (choice) {
+      case 0:
+        break;
+      case 1:
+      case -1:
+        console.log("  Cancelled.");
+        process.exit(0);
+        break;
+      case 2:
+        // Save preference so it auto-deploys next time
+        writeLink(dirPath, { sites: existingSites, onRedeploy: "overwrite" });
+        info(`Saved preference: ${dim("always overwrite")}`);
+        break;
+    }
+  }
+
+  // Deploy each file
+  const results = {};
+  let successCount = 0;
+
+  // 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();
+
+  for (const fileName of htmlFiles) {
+    const filePath = join(dirPath, fileName);
+    const stat = statSync(filePath);
+
+    console.log("");
+    info(`${bold(fileName)} ${dim(`(${formatBytes(stat.size)})`)}`);
+
+    let html = readFileSync(filePath, "utf8");
+
+    // Upload local assets with shared cache
+    if (!skipAssets) {
+      html = await processAssets(html, dirPath, assetCache);
+    }
+
+    // Determine slug
+    const slug = (!forceNew && existingSites[fileName]?.slug) || null;
+
+    info(slug ? `Re-deploying to ${cyan(slug)}…` : "Deploying new site…");
+
+    const body = { html };
+    if (ttl) body.ttl = ttl;
+    if (slug) body.slug = slug;
+    // No --title for batch; each site auto-titles from <title> tag
+
+    try {
+      const data = await post("/api/sites", body);
+      results[fileName] = { slug: data.slug, url: data.url };
+      successCount++;
+      ok(`${cyan(fileName)} → ${cyan(`https://${data.url}`)}`);
+    } catch (e) {
+      err(`${fileName}: ${e.message}`);
+      // Keep the old link if we had one
+      if (existingSites[fileName]) {
+        results[fileName] = existingSites[fileName];
+      }
+    }
+  }
+
+  // Save all links to .htmlhost
+  writeLink(dirPath, {
+    sites: { ...existingSites, ...results },
+    ...(onRedeploy ? { onRedeploy } : {}),
+  });
+
+  // Summary
+  console.log("");
+  console.log(`  ${green("━".repeat(40))}`);
+  ok(`${bold(String(successCount))}/${htmlFiles.length} sites deployed`);
+  console.log("");
+  for (const [fileName, site] of Object.entries(results)) {
+    if (site.url) {
+      console.log(`   ${dim(fileName)} → ${cyan(`https://${site.url}`)}`);
+    }
+  }
+  console.log("");
+  console.log(`   ${dim("Linked → .htmlhost")}`);
+  console.log("");
+}
+
 function getFlag(args, flag) {
   const idx = args.indexOf(flag);
   if (idx === -1 || idx >= args.length - 1) return null;