htmlhost-cli 1.2.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.2.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,7 +4,7 @@
 import { bold, dim, cyan, err } from "./ui.mjs";
 import { ApiError } from "./api.mjs";
 
-const VERSION = "1.2.0";
+const VERSION = "1.3.0";
 
 const HELP = `
   ${bold("htmlhost")} ${dim(`v${VERSION}`)} — deploy HTML from the terminal
@@ -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,6 +31,8 @@ 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
+    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")}

package/src/commands/deploy.mjs

@@ -3,6 +3,7 @@ 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 { processAssets } from "../assets.mjs";
 
 const LINK_FILE = ".htmlhost";
 
@@ -147,10 +148,17 @@ 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)})`)}`);
+
+  // 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 };