feat: add download-all-fonts ZIP button, proxy fonts locally via /api/font

package.json

@@ -23,6 +23,7 @@
     "bcryptjs": "^3.0.2",
     "croner": "^10.0.1",
     "hash-wasm": "^4.12.0",
+    "jszip": "^3.10.1",
     "lucide-react": "^1.23.0",
     "next": "^16.2.10",
     "next-auth": "5.0.0-beta.31",

pnpm-lock.yaml

@@ -23,6 +23,9 @@ importers:
       hash-wasm:
         specifier: ^4.12.0
         version: 4.12.0
+      jszip:
+        specifier: ^3.10.1
+        version: 3.10.1
       lucide-react:
         specifier: ^1.23.0
         version: 1.23.0([email protected])
@@ -1697,6 +1700,9 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==}
 
+  [email protected]:
+    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
+
   [email protected]:
     resolution: {integrity: sha512-ixNtAJndqh173VQ4KodSdJEI6nuioBWI0V1ITNKhZZsO0pEMoDxz539T4FTTbSZ/xIOSuDnzxLVRqBVSvPNE2g==}
     engines: {node: '>=18.0'}
@@ -2003,6 +2009,12 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-nFYW2im0WJ3RUVZwabd71J8QTZRtkK1xxZBY7klg7a6KS/os17LZSj9q1VhbRSnk3S8Mv2I7F1izr/aEJ6cUsw==}
 
+  [email protected]:
+    resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
+
+  [email protected]:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
   [email protected]:
     resolution: {integrity: sha512-cGzymZerpDhVXRKjKLgXKda9gI29TU2o88L7gwNMHp3WZVxA/0c5tX52udXbW9JklDApolvMXZG6Dhhdz5eirA==}
 
@@ -2021,6 +2033,9 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-Ks/IoX00TtClbGQr4TWXemAnktAQvYB7HzcCxDGqEZU6oCmb2INHuOoKxbtR+HFkmYWBKv/dOZtGRiAjDhj92g==}
 
+  [email protected]:
+    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
+
   [email protected]:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
@@ -2038,9 +2053,15 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
 
+  [email protected]:
+    resolution: {integrity: sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==}
+
   [email protected]:
     resolution: {integrity: sha512-mU6WRz5EusL9ZZuiZ5SO4Y6C0P9PAUR9iwdb6bzj4KDihm28DiHFw+/yk9DBH4f+Pv1wuzQ4e2jV3oQ7mkIqvw==}
 
+  [email protected]:
+    resolution: {integrity: sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==}
+
   [email protected]:
     resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
     engines: {node: '>= 12.0.0'}
@@ -2236,6 +2257,9 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-xDGvUOQjop7RDgxTQ+o4pOol0/3xSZzawTiPKRrHnQWAy0WjhNs/5HdIDJCrqC4MBynmjXgULc6YfioaxZeFgg==}
 
+  [email protected]:
+    resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
+
   [email protected]:
     resolution: {integrity: sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==}
 
@@ -2310,6 +2334,9 @@ packages:
       typescript:
         optional: true
 
+  [email protected]:
+    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
+
   [email protected]:
     resolution: {integrity: sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==}
 
@@ -2328,6 +2355,9 @@ packages:
     resolution: {integrity: sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==}
     engines: {node: '>=0.10.0'}
 
+  [email protected]:
+    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
+
   [email protected]:
     resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==}
     engines: {node: '>= 20.19.0'}
@@ -2351,6 +2381,9 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
+  [email protected]:
+    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
+
   [email protected]:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
@@ -2368,6 +2401,9 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-hr3Wtp/GZIc/6DAGPDcV4/9WoZhjrkXsi5B/07QgX8tsdc6ilr7BFM6PM6rbdAX1kFSDYeZGLipIZZKyQP0O5Q==}
 
+  [email protected]:
+    resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==}
+
   [email protected]:
     resolution: {integrity: sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
@@ -2419,6 +2455,9 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==}
 
+  [email protected]:
+    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
+
   [email protected]:
     resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
     engines: {node: '>= 12.0.0'}
@@ -3657,6 +3696,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]:
@@ -3938,6 +3979,10 @@ snapshots:
     dependencies:
       '@formatjs/icu-messageformat-parser': 3.5.12
 
+  [email protected]: {}
+
+  [email protected]: {}
+
   [email protected]:
     dependencies:
       '@formatjs/fast-memoize': 3.1.6
@@ -3953,6 +3998,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]: {}
@@ -3963,10 +4010,21 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]:
+    dependencies:
+      lie: 3.3.0
+      pako: 1.0.11
+      readable-stream: 2.3.8
+      setimmediate: 1.0.5
+
   [email protected]:
     dependencies:
       dayjs: 1.11.21
 
+  [email protected]:
+    dependencies:
+      immediate: 3.0.6
+
   [email protected]:
     optional: true
 
@@ -4141,6 +4199,8 @@ snapshots:
       '@otplib/preset-default': 12.0.1
       '@otplib/preset-v11': 12.0.1
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]: {}
@@ -4213,6 +4273,8 @@ snapshots:
       - react
       - react-dom
 
+  [email protected]: {}
+
   [email protected]:
     dependencies:
       graceful-fs: 4.2.11
@@ -4233,6 +4295,16 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]:
+    dependencies:
+      core-util-is: 1.0.3
+      inherits: 2.0.4
+      isarray: 1.0.0
+      process-nextick-args: 2.0.1
+      safe-buffer: 5.1.2
+      string_decoder: 1.1.1
+      util-deprecate: 1.0.2
+
   [email protected]: {}
 
   [email protected]: {}
@@ -4274,6 +4346,8 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.62.2
       fsevents: 2.3.3
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]:
@@ -4292,6 +4366,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]:
     dependencies:
       '@img/colour': 1.1.0
@@ -4355,6 +4431,10 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]:
+    dependencies:
+      safe-buffer: 5.1.2
+
   [email protected]([email protected]):
     dependencies:
       client-only: 0.0.1

src/components/public/logo-generator.tsx

@@ -52,6 +52,47 @@ export default function LogoGenerator() {
     });
   }, [gifUrl, startTransition]);
 
+  const [zipping, setZipping] = useState(false);
+  const allFonts = useMemo(
+    () => HABBO_FONT_GROUPS.flatMap((g) => g.fonts),
+    [],
+  );
+
+  const handleDownloadAll = useCallback(async () => {
+    if (zipping) return;
+    setZipping(true);
+    try {
+      const JSZip = (await import("jszip")).default;
+      const zip = new JSZip();
+
+      const folder = zip.folder(safeText.replace(/[^a-z0-9]+/gi, "_") || "logo")!;
+      const results = await Promise.allSettled(
+        allFonts.map(async (font) => {
+          const url = buildFontUrl(font.styleName, safeText);
+          const res = await fetch(url);
+          if (!res.ok) throw new Error(`HTTP ${res.status}`);
+          const blob = await res.blob();
+          folder.file(`${font.styleName}.gif`, blob);
+        }),
+      );
+
+      const failed = results.filter((r) => r.status === "rejected").length;
+      const content = await zip.generateAsync({ type: "blob" });
+      const a = document.createElement("a");
+      a.href = URL.createObjectURL(content);
+      a.download = `${safeText.replace(/[^a-z0-9]+/gi, "_") || "logo"}-all-fonts.zip`;
+      a.click();
+      URL.revokeObjectURL(a.href);
+      if (failed > 0) {
+        alert(`${allFonts.length - failed}/${allFonts.length} fonts downloaded. ${failed} failed.`);
+      }
+    } catch {
+      alert("Failed to create ZIP.");
+    } finally {
+      setZipping(false);
+    }
+  }, [safeText, allFonts, zipping]);
+
   return (
     <div className="card-grid md-2" style={{ alignItems: "start" }}>
       <ContentCard icon="⚙️" title="Design" subtitle="Pick a Habbo font and type your text.">
@@ -122,6 +163,14 @@ export default function LogoGenerator() {
                   ? "❌ Error"
                   : "💾 Save as site logo"}
           </button>
+          <button
+            type="button"
+            className="btn btn-secondary"
+            onClick={handleDownloadAll}
+            disabled={zipping}
+          >
+            {zipping ? "⏳ Creating ZIP..." : "📦 Download all fonts"}
+          </button>
         </div>
       </ContentCard>
 
@@ -146,11 +195,11 @@ export default function LogoGenerator() {
           />
         </div>
         <p className="muted" style={{ marginBottom: 0, marginTop: "0.85rem", wordBreak: "break-all" }}>
-          Generated via{" "}
+          Fonts rendered via{" "}
           <a href="https://habbofont.net" target="_blank" rel="noopener noreferrer">
             habbofont.net
           </a>
-          . The GIF is loaded from their server.
+          {" "}and served locally.
         </p>
       </ContentCard>
     </div>