htmlhost-cli 1.1.0 → 1.3.0

package/README.md

@@ -34,11 +34,16 @@ Authenticate with an API token. Generate one at [htmlhost.co/settings#keys](http
 ### `htmlhost deploy <file> [options]`
 Deploy an HTML file and get a live URL.
 
+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.
+
 | Option | Description |
 |---|---|
 | `--ttl <value>` | Set expiry: `1d`, `7d`, `30d`, `never` |
 | `--slug <slug>` | Re-deploy to an existing site |
 | `--title <title>` | Set the site title |
+| `--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.1.0",
+  "version": "1.3.0",
   "description": "Deploy HTML files from the terminal — htmlhost.co CLI",
   "type": "module",
   "bin": {

package/src/assets.mjs

@@ -0,0 +1,216 @@
+/**
+ * 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)
+ * @returns {Promise<string>} Rewritten HTML with hosted asset URLs
+ */
+export async function processAssets(html, baseDir) {
+  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();
+
+  console.log("");
+  const label = entries.length === 1 ? "local asset" : "local assets";
+  ok(`Found ${cyan(String(entries.length))} ${label} to upload`);
+  console.log("");
+
+  for (const { ref } of entries) {
+    if (urlMap.has(ref)) continue; // already uploaded
+
+    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);
+      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,34 +4,42 @@
 import { bold, dim, cyan, err } from "./ui.mjs";
 import { ApiError } from "./api.mjs";
 
-const VERSION = "1.1.0";
+const VERSION = "1.3.0";
 
 const HELP = `
   ${bold("htmlhost")} ${dim(`v${VERSION}`)} — deploy HTML from the terminal
 
   ${bold("Usage:")}
-    ${cyan("htmlhost login")}                    Authenticate with an API token
-    ${cyan("htmlhost deploy")} <file> [options]  Deploy an HTML file
+    ${cyan("htmlhost deploy")} [file] [options]  Deploy (defaults to index.html)
     ${cyan("htmlhost list")}                     List your sites
     ${cyan("htmlhost delete")} <slug>            Delete a site
     ${cyan("htmlhost upload")} <file|dir>        Upload media assets
+    ${cyan("htmlhost login")}                    Authenticate with an API token
     ${cyan("htmlhost whoami")}                   Show current user
     ${cyan("htmlhost logout")}                   Remove saved token
 
   ${bold("Deploy options:")}
     --ttl <value>     Set TTL: 1d, 7d, 30d, never
-    --slug <slug>     Re-deploy to an existing site
+    --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
 
+  ${bold("How deploy works:")}
+    1st deploy: creates a site, saves slug to ${dim(".htmlhost")}
+    2nd deploy: reads ${dim(".htmlhost")}, updates the same site
+    Local scripts, CSS, and images are auto-uploaded
+    and rewritten to hosted URLs (files >10 MB are skipped)
+
   ${bold("Examples:")}
-    ${dim("$")} htmlhost deploy index.html
-    ${dim("$")} htmlhost deploy index.html --ttl 30d --title "My Portfolio"
-    ${dim("$")} htmlhost deploy build/index.html --slug my-project
+    ${dim("$")} htmlhost deploy                ${dim("# deploys ./index.html")}
+    ${dim("$")} htmlhost deploy page.html      ${dim("# deploys a specific file")}
+    ${dim("$")} htmlhost deploy --ttl 30d      ${dim("# deploy with 30-day TTL")}
+    ${dim("$")} htmlhost deploy --new          ${dim("# force a new site")}
     ${dim("$")} htmlhost upload logo.png
-    ${dim("$")} htmlhost upload ./assets/
     ${dim("$")} htmlhost delete old-project --force
 
   ${dim(`Docs: https://htmlhost.co/docs`)}
@@ -41,7 +49,7 @@ export async function run(argv) {
   const command = argv[0];
   const args = argv.slice(1);
 
-  if (!command || command === "--help" || command === "-h") {
+  if (!command || command === "help" || command === "--help" || command === "-h") {
     console.log(HELP);
     return;
   }

package/src/commands/deploy.mjs

@@ -1,11 +1,60 @@
-import { readFileSync, statSync, existsSync } from "node:fs";
-import { basename, resolve } from "node:path";
+import { readFileSync, writeFileSync, statSync, existsSync } 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, formatBytes } from "../ui.mjs";
+import { ok, err, info, cyan, dim, bold, yellow, formatBytes } from "../ui.mjs";
+import { processAssets } from "../assets.mjs";
+
+const LINK_FILE = ".htmlhost";
+
+/**
+ * Read the project link from .htmlhost
+ */
+function readLink(dir) {
+  const linkPath = join(dir, LINK_FILE);
+  if (!existsSync(linkPath)) return null;
+  try {
+    return JSON.parse(readFileSync(linkPath, "utf8"));
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Save project link to .htmlhost
+ */
+function writeLink(dir, data) {
+  const linkPath = join(dir, LINK_FILE);
+  writeFileSync(linkPath, JSON.stringify(data, null, 2) + "\n", "utf8");
+}
+
+/**
+ * Interactive menu prompt — returns the index of the selected option.
+ */
+function promptChoice(question, options) {
+  return new Promise((resolve) => {
+    const rl = createInterface({ input: process.stdin, output: process.stdout });
+    console.log("");
+    console.log(`  ${yellow("?")} ${question}`);
+    console.log("");
+    options.forEach((opt, i) => {
+      console.log(`    ${bold(String(i + 1))}. ${opt}`);
+    });
+    console.log("");
+    rl.question(`  Enter choice (1-${options.length}): `, (answer) => {
+      rl.close();
+      const idx = parseInt(answer.trim(), 10) - 1;
+      resolve(idx >= 0 && idx < options.length ? idx : -1);
+    });
+  });
+}
 
 /**
- * htmlhost deploy [file] [--ttl 7d] [--slug existing-slug] [--title "My Site"]
- * Defaults to index.html in the current directory.
+ * htmlhost deploy [file] [--ttl 7d] [--slug existing-slug] [--title "My Site"] [--new]
+ *
+ * - Defaults to index.html in the current directory
+ * - Remembers the site via .htmlhost file (auto re-deploy)
+ * - Use --new to force a fresh deploy
  */
 export async function deploy(args) {
   let file = args.find((a) => !a.startsWith("--"));
@@ -18,16 +67,72 @@ 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] [--slug my-site]")}`);
+      console.log(`  ${dim("Usage: htmlhost deploy [file.html] [--ttl 7d]")}`);
       process.exit(1);
     }
   }
 
   const ttl = getFlag(args, "--ttl");
-  const slug = getFlag(args, "--slug");
   const title = getFlag(args, "--title");
+  const forceNew = args.includes("--new");
 
   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
+      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"))}`,
+          [
+            "Overwrite existing site",
+            "Create a new site instead",
+            "Cancel",
+            `Always overwrite ${dim("(remember for this project)")}`,
+            `Always create new ${dim("(remember for this project)")}`,
+          ]
+        );
+
+        switch (choice) {
+          case 0: // Overwrite
+            slug = link.slug;
+            isLinked = true;
+            break;
+          case 1: // New
+            break;
+          case 2: // Cancel
+          case -1:
+            console.log("  Cancelled.");
+            process.exit(0);
+            break;
+          case 3: // Always overwrite
+            slug = link.slug;
+            isLinked = true;
+            writeLink(projectDir, { ...link, onRedeploy: "overwrite" });
+            info(`Saved preference: ${dim("always overwrite")}`);
+            break;
+          case 4: // Always new
+            writeLink(projectDir, { ...link, onRedeploy: "new" });
+            info(`Saved preference: ${dim("always create new")}`);
+            break;
+        }
+      }
+    }
+  }
 
   // Verify file exists
   let stat;
@@ -43,11 +148,18 @@ export async function deploy(args) {
     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)})`)}`);
-  info("Deploying…");
+
+  // Upload local assets (scripts, css, images) and rewrite references
+  const skipAssets = args.includes("--no-assets");
+  if (!skipAssets) {
+    html = await processAssets(html, projectDir);
+  }
+
+  info(slug ? `Re-deploying to ${cyan(slug)}…` : "Deploying new site…");
 
   const body = { html };
   if (ttl) body.ttl = ttl;
@@ -56,12 +168,23 @@ export async function deploy(args) {
 
   const data = await post("/api/sites", body);
 
+  // Save/update the link (preserve onRedeploy preference)
+  const existingLink = readLink(projectDir);
+  writeLink(projectDir, {
+    slug: data.slug,
+    url: data.url,
+    ...(existingLink?.onRedeploy ? { onRedeploy: existingLink.onRedeploy } : {}),
+  });
+
   console.log("");
   ok(`${bold("Live")} at ${cyan(`https://${data.url}`)}`);
   if (data.version > 1) {
     console.log(`   ${dim(`Version ${data.version} · ${data.ttl} TTL`)}`);
   } else {
     console.log(`   ${dim(`${data.slug} · ${data.ttl} TTL`)}`);
+    if (!isLinked) {
+      console.log(`   ${dim(`Linked → .htmlhost`)}`);
+    }
   }
   if (data.expiresAt) {
     const d = new Date(data.expiresAt);