Deploy billsprig to the hub

billsprig/app.js

@@ -4,7 +4,12 @@
   "use strict";
   var C = window.BillCalc, P = window.BillPDF, X = window.CMXPro;
   var KEY = "billsprig:v1";
-  var HUB = "https://cybermax-tools-cybermax.static.hf.space/billsprig/index.html?utm_source=pdf-credit";
+  /* Recipient-facing credit on free output (Pro removes it): links to the app's page on cybermaxtools.com, tagged so the
+   * page's view counter records it (utm_source=billsprig-share, utm_campaign=pdf|print). */
+  var SITE = "https://cybermaxtools.com/apps/free-invoice-generator/";
+  var CREDIT_LEAD = "Made with Billsprig by CyberMax", CREDIT_ASK = "make your own free: cybermaxtools.com/apps/free-invoice-generator";
+  var CREDIT = CREDIT_LEAD + " \u2014 " + CREDIT_ASK;
+  function creditUrl(ch) { return SITE + "?utm_source=billsprig-share&utm_medium=made-with&utm_campaign=" + ch; }
   var FREE_PDFS = 5;
   var $ = function (id) { return document.getElementById(id); };
   var app = $("app"), form = $("editor");
@@ -247,7 +252,7 @@
       '<section class="d-bottom"><div class="d-left">' + (payOk ? '<a class="d-pay" href="' + esc(d.payLink) + '" target="_blank" rel="noopener">Pay online</a><span class="d-paylink">' + esc(d.payLink) + "</span>" : "") +
       (d.notes ? '<div class="d-label">Notes</div><div class="d-notes">' + esc(d.notes) + "</div>" : "") + "</div>" +
       '<table class="d-totals">' + tot.map(function (r) { return "<tr><td>" + r[0] + "</td><td>" + r[1] + "</td></tr>"; }).join("") + '<tr class="t-total"><td>' + totalLabel + "</td><td>" + m(T.total) + "</td></tr></table></section>" +
-      '<footer class="d-credit">Made with Billsprig · free invoice generator by CyberMax</footer>';
+      (pro() ? "" : '<footer class="d-credit">' + CREDIT_LEAD + ' \u2014 <a href="' + creditUrl("print") + '" target="_blank" rel="noopener">' + CREDIT_ASK + "</a></footer>");
     fit();
   }
   function fit() {
@@ -284,7 +289,7 @@
   function pdfBytes() {
     var d = C.clone(doc); d.template = tplFor();
     var logo = pro() && S.logo && S.logo.data ? { bytes: b64ToBytes(S.logo.data), w: S.logo.w, h: S.logo.h } : null;
-    return P.build(d, { credit: !pro(), creditUrl: HUB, logo: logo, accent: accentFor() });
+    return P.build(d, { credit: !pro(), creditText: CREDIT, creditUrl: creditUrl("pdf"), logo: logo, accent: accentFor() });
   }
   $("btn-pdf").addEventListener("click", function () {
     var q = X.quota("pdf", FREE_PDFS);
@@ -499,9 +504,54 @@
   }
   applyPreset();
 
+  /* ---------- "Use this template": guide pages show the app's own worked examples; each table gets a button that loads
+   * that example into the editor above as the visitor's own copy. Also #example=<kind> (invoice, contractor, freelancer,
+   * receipt) opens the app pre-filled with one, so a guide or a shared link can say "start from this". Nothing leaves
+   * the browser. ---------- */
+  var KINDS = Array.prototype.map.call($("example-kind").options, function (o) { return o.value; });
+  function ownDraft() {
+    var cur = S.doc; if (!cur || !cur.to || !String(cur.to.name || "").trim()) return false;
+    return !/\.example\b/.test([cur.to.email, cur.from && cur.from.email, cur.payLink].join(" ")); // the built-in examples use .example addresses
+  }
+  function useTemplate(kind, quiet) {
+    if (KINDS.indexOf(kind) < 0) return false;
+    if (ownDraft() && !window.confirm("Replace your current draft with this template? Save it to history first if you need it.")) return false;
+    $("example-kind").value = kind;
+    S.doc = doc = C.example(kind);
+    save();
+    if (!quiet) {
+      toForm(); changed(); renderPreview();
+      toast("Template loaded as your own copy. Change anything; it saves in this browser.");
+      $("app").scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+    return true;
+  }
+  function templateButtons() {
+    Array.prototype.forEach.call(document.querySelectorAll(".g-guide .g-tw"), function (box) {
+      var td = box.querySelector("tbody td"), first = td ? td.textContent.trim() : "";
+      var kind = KINDS.filter(function (k) { return C.example(k).items[0].desc === first; })[0];
+      if (!kind || (box.nextElementSibling && box.nextElementSibling.classList.contains("g-use"))) return;
+      var p = document.createElement("p");
+      p.className = "g-use";
+      p.innerHTML = '<button type="button" class="btn sm" data-use="' + kind + '">Use this template</button> <span>Opens it in the editor above as your own copy to edit. Nothing is uploaded.</span>';
+      box.parentNode.insertBefore(p, box.nextSibling);
+    });
+  }
+  document.addEventListener("click", function (e) {
+    var b = e.target.closest && e.target.closest("[data-use]");
+    if (b) useTemplate(b.getAttribute("data-use"));
+  });
+  (function exampleFromHash() {
+    var m = /[#&]example=([a-z]+)/.exec(location.hash || "");
+    if (!m) return;
+    history.replaceState(null, "", location.pathname + location.search);
+    if (useTemplate(m[1], true)) setTimeout(function () { toast("Template loaded as your own copy. Change anything; it saves in this browser."); }, 400);
+  })();
+
   /* ---------- start ---------- */
   fillSelects();
   toForm();
+  templateButtons();
   X.onChange(onPro);
-  window.Billsprig = { state: function () { return S; }, doc: function () { return doc; }, pdf: pdfBytes };
+  window.Billsprig = { state: function () { return S; }, doc: function () { return doc; }, pdf: pdfBytes, useTemplate: useTemplate, CREDIT: CREDIT, creditUrl: creditUrl };
 })();

billsprig/index.html

@@ -267,5 +267,5 @@
 <script src="lib/calc.js"></script>
 <script src="lib/pdf.js"></script>
 <script src="app.js"></script>
-<!-- cybermax-count:start --><script>(function(){try{var u="https://data.cybermaxtools.com/v?p="+encodeURIComponent(location.host+location.pathname)+"&r="+encodeURIComponent((document.referrer||"").split("/")[2]||"")+(function(){var q=new URLSearchParams(location.search),s=q.get("utm_source");return s?"&us="+encodeURIComponent(s)+"&uc="+encodeURIComponent(q.get("utm_campaign")||""):""})();navigator.sendBeacon?navigator.sendBeacon(u):(new Image).src=u}catch(e){}})()</script><!-- cybermax-count:end --></body>
+</body>
 </html>

billsprig/lib/pdf.js

@@ -177,7 +177,7 @@
   function pct(v) { return String(C.round(v, 3)) + "%"; }
 
   /**
-   * Build the PDF for a document. opts: { credit: bool, creditUrl, logo: {bytes, w, h}, accent, date: Date }
+   * Build the PDF for a document. opts: { credit: bool, creditText, creditUrl, logo: {bytes, w, h}, accent, date: Date }
    * Returns a Uint8Array.
    */
   function build(doc, opts) {
@@ -342,7 +342,7 @@
     for (var i = 0; i < n; i++) {
       wr.on(i);
       if (opts.credit) {
-        var credit = "Made with Billsprig · free invoice generator by CyberMax";
+        var credit = opts.creditText || CREDIT;
         var cw = wr.text(L, H - 28, credit, { size: 7.5, color: "#8A8F9C" });
         if (opts.creditUrl) wr.link(L, H - 36, cw, 11, opts.creditUrl);
       }
@@ -353,6 +353,9 @@
     return serialize(wr, { title: ty.title + (doc.number ? " " + doc.number : "") + (to.name ? " - " + to.name : ""), author: from.name || "", date: stamp }, opts.logo && opts.logo.bytes ? opts.logo : null);
   }
 
+  /** Default footer credit on free PDFs (app.js passes the same text plus a tagged creditUrl). */
+  var CREDIT = "Made with Billsprig by CyberMax \u2014 make your own free: cybermaxtools.com/apps/free-invoice-generator";
+
   /** Suggested file name: Invoice-INV-0042-Harbor-Pine-Bakery.pdf */
   function fileName(doc) {
     var ty = (C.TYPES[doc.type] || C.TYPES.invoice).title;
@@ -360,6 +363,6 @@
     return parts.normalize("NFD").replace(/[̀-ͯ]/g, "").replace(/[^A-Za-z0-9._-]+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "").slice(0, 90) + ".pdf";
   }
 
-  var api = { build: build, fileName: fileName, encode: encode, canEncode: canEncode, width: width, wrap: wrap, STYLES: STYLES, pageSize: pageSize };
+  var api = { build: build, fileName: fileName, encode: encode, canEncode: canEncode, width: width, wrap: wrap, STYLES: STYLES, pageSize: pageSize, CREDIT: CREDIT };
   if (typeof module === "object" && module.exports) module.exports = api; else root.BillPDF = api;
 })(typeof self !== "undefined" ? self : this);

billsprig/style.css

@@ -171,6 +171,8 @@ input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;
 .d-totals tr.t-total td:last-child{color:var(--acc);font-size:17px}
 .d-credit{position:absolute;left:61px;bottom:30px;font-size:10px;color:#8A8F9C}
 html.cmx-pro .d-credit{display:none}
+.d-credit a{color:inherit;text-decoration:none}
+.d-credit a:hover{text-decoration:underline}
 /* modern */
 .tpl-modern{padding-top:0}
 .tpl-modern .d-band{display:flex;justify-content:space-between;align-items:center;background:var(--acc);color:#fff;margin:0 -61px 32px;padding:26px 61px;min-height:128px}
@@ -292,3 +294,7 @@ footer.more{border-top:1px solid var(--line);margin-top:30px;padding:22px 0 40px
   #doc .d-credit{position:fixed;bottom:8mm}
   .d-items tr{break-inside:avoid}
 }
+
+/* "Use this template" under a guide's worked example */
+.g-use{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:4px 0 14px;font-size:13.5px;opacity:.95}
+.g-use span{opacity:.8}

billsprig/sw.js

@@ -1,5 +1,5 @@
 /* Billsprig offline cache. © 2026 CyberMax. All rights reserved. */
-var CACHE = "billsprig-v2";
+var CACHE = "billsprig-v3";
 var FILES = ["./", "index.html", "style.css", "pro.js", "lib/calc.js", "lib/pdf.js", "app.js", "manifest.webmanifest", "icon.svg", "icon-192.png", "icon-512.png"];
 self.addEventListener("install", function (e) {
   e.waitUntil(caches.open(CACHE).then(function (c) { return c.addAll(FILES); }).then(function () { return self.skipWaiting(); }));