create-gardener 2.1.3 → 2.1.5

package/template/src/backend/controllers/gardener/hotReload.ts

@@ -0,0 +1,34 @@
+import fs from 'fs';
+import path from 'path';
+import type { Request, Response } from 'express';
+
+// ── Version token ─────────────────────────────────────────────
+// Monotonically-increasing timestamp updated whenever a file
+// in src/frontend/ changes. The frontend stores the first value
+// it sees and reloads as soon as it receives a different one.
+let version: number = Date.now();
+
+// ── File watcher ──────────────────────────────────────────────
+const watchTarget = path.resolve('src', 'frontend');
+
+let debounce: ReturnType<typeof setTimeout> | null = null;
+
+fs.watch(watchTarget, { recursive: true }, (_event, filename) => {
+  // Ignore hidden files and node_modules
+  if (!filename || filename.startsWith('.')) return;
+
+  if (debounce) clearTimeout(debounce);
+  debounce = setTimeout(() => {
+    version = Date.now();
+    // console.log(`[gardener] file changed: ${filename} → version ${version}`);
+  }, 100);
+});
+
+console.log(`[gardener] watching ${watchTarget} for changes…`);
+
+// ── Route handler ─────────────────────────────────────────────
+// GET /__gardener/hot-reload
+// Returns { version: <number> }
+export function hotReloadHandler(req: Request, res: Response) {
+  res.json({ version });
+}

package/template/src/backend/controllers/gardener/imageOptimiser.ts

@@ -3,30 +3,87 @@ import fsp from "fs/promises";
 import path from "path";
 import generateWebP from "../../libs/generateWebp.js";
 
-
 import { fileURLToPath } from "url";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
+// Whitelist of allowed remote image domains.
+// Set GARDENER_IMAGE_DOMAINS=example.com,cdn.mysite.com in your .env
+function getAllowedDomains(): string[] {
+  const raw = process.env.GARDENER_IMAGE_DOMAINS ?? "";
+  return raw
+    .split(",")
+    .map((d) => d.trim().toLowerCase())
+    .filter(Boolean);
+}
+
+function isAllowedUrl(rawUrl: string): { ok: true } | { ok: false; reason: string } {
+  let parsed: URL;
+  try {
+    parsed = new URL(rawUrl);
+  } catch {
+    return { ok: false, reason: "Malformed URL." };
+  }
+
+  if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
+    return { ok: false, reason: "Only http/https URLs are allowed." };
+  }
+
+  const allowedDomains = getAllowedDomains();
+  if (allowedDomains.length === 0) {
+    return { ok: false, reason: "No allowed image domains configured. Set GARDENER_IMAGE_DOMAINS in your .env" };
+  }
+
+  const hostname = parsed.hostname.toLowerCase();
+  const isAllowed = allowedDomains.some(
+    (domain) => hostname === domain || hostname.endsWith(`.${domain}`)
+  );
+
+  if (!isAllowed) {
+    return { ok: false, reason: `Domain '${hostname}' is not in the allowed list.` };
+  }
+
+  return { ok: true };
+}
+
+async function downloadRemoteImage(
+  remoteUrl: string,
+  destPath: string
+): Promise<void> {
+  const response = await fetch(remoteUrl);
+
+  if (!response.ok) {
+    throw new Error(`Remote fetch failed: ${response.status} ${response.statusText}`);
+  }
+
+  const contentType = response.headers.get("content-type") ?? "";
+  if (!contentType.startsWith("image/")) {
+    throw new Error(`Remote URL did not return an image (got: ${contentType})`);
+  }
+
+  const buffer = await response.arrayBuffer();
+  await fsp.writeFile(destPath, Buffer.from(buffer));
+}
 
 export async function imageOptimiser(req: Request, res: Response) {
   try {
     const { name } = req.params;
 
-    if (typeof name !== 'string') return res.status(400).json({ success: false, message: "invalid path" });
-    // name format: test_500x300.webp
-    const match = name.match(/^(.+?)_(\d+)x(\d+)\.webp$/);
+    if (typeof name !== "string") {
+      return res.status(400).json({ success: false, message: "invalid path" });
+    }
 
+    // name format: baseName_{width}x{height}.webp
+    const match = name.match(/^(.+?)_(\d+)x(\d+)\.webp$/);
     if (!match) {
-      return res.status(400).json({ error: "Invalid image format" });
+      return res.status(400).json({ error: "Invalid image format. Expected: name_{w}x{h}.webp" });
     }
 
     const [, baseName, widthStr, heightStr] = match;
+    const width = parseInt(widthStr!, 10);
+    const height = parseInt(heightStr!, 10);
 
-    if (!widthStr || !heightStr) return;
-    const width = parseInt(widthStr, 10);
-    const height = parseInt(heightStr, 10);
-
+    // ── 1. Serve from cache if already converted ────────────────────────────
     const cacheDir = path.join(__dirname, "..", "..", "..", "frontend", "static", "cache");
     await fsp.mkdir(cacheDir, { recursive: true });
 
@@ -34,34 +91,66 @@ export async function imageOptimiser(req: Request, res: Response) {
 
     try {
       await fsp.access(outputPath);
-      return res.sendFile(path.basename(outputPath), {
-        root: path.dirname(outputPath),
-      });
+      return res.sendFile(path.basename(outputPath), { root: path.dirname(outputPath) });
     } catch {
       // not cached → continue
     }
 
-    const assetsDir = path.resolve(__dirname, '..', '..', '..', "frontend", "assets");
-    const files = await fsp.readdir(assetsDir);
+    // ── 2. Locate source image in assets/ (local) ───────────────────────────
+    const assetsDir = path.resolve(__dirname, "..", "..", "..", "frontend", "assets");
+    await fsp.mkdir(assetsDir, { recursive: true });
 
-    const sourceFile = files.find((file) => {
-      const parsed = path.parse(file);
-      return parsed.name === baseName;
-    });
+    let inputPath: string | null = null;
 
-    if (!sourceFile) {
-      return res.status(404).json({ error: "Source image not found" });
+    const localFiles = await fsp.readdir(assetsDir);
+    const localMatch = localFiles.find((file) => path.parse(file).name === baseName);
+    if (localMatch) {
+      inputPath = path.join(assetsDir, localMatch);
     }
 
-    const inputPath = path.join(assetsDir, sourceFile);
+    // ── 3. Check assets/remote/ if not found locally ────────────────────────
+    const remoteAssetsDir = path.join(assetsDir, "remote");
+    await fsp.mkdir(remoteAssetsDir, { recursive: true });
+
+    if (!inputPath) {
+      const remoteFiles = await fsp.readdir(remoteAssetsDir);
+      const remoteMatch = remoteFiles.find((file) => path.parse(file).name === baseName);
+      if (remoteMatch) {
+        inputPath = path.join(remoteAssetsDir, remoteMatch);
+      }
+    }
+
+    // ── 4. Download from remote URL if provided and still not found ──────────
+    if (!inputPath) {
+      const remoteUrl = req.query.url;
+
+      if (typeof remoteUrl !== "string" || !remoteUrl) {
+        return res.status(404).json({
+          error: "Source image not found. Provide ?url=<imageUrl> to use a remote source.",
+        });
+      }
+
+      const urlCheck = isAllowedUrl(remoteUrl);
+      if (!urlCheck.ok) {
+        return res.status(400).json({ error: urlCheck.reason });
+      }
+
+      // Infer extension from URL (fallback to .jpg)
+      const urlPathname = new URL(remoteUrl).pathname;
+      const remoteExt = path.extname(urlPathname) || ".jpg";
+      const destFilename = `${baseName}${remoteExt}`;
+      const destPath = path.join(remoteAssetsDir, destFilename);
+
+      await downloadRemoteImage(remoteUrl, destPath);
+      inputPath = destPath;
+    }
 
+    // ── 5. Convert & cache ───────────────────────────────────────────────────
     await generateWebP(inputPath, outputPath, width, height);
 
-    return res.sendFile(path.basename(outputPath), {
-      root: path.dirname(outputPath),
-    });
+    return res.sendFile(path.basename(outputPath), { root: path.dirname(outputPath) });
   } catch (err) {
     console.error(err);
-    return res.status(500).json({ error: "Image optimisation failed" });
+    return res.status(500).json({ error: "Image optimisation failed", detail: String(err) });
   }
 }

package/template/src/backend/controllers/gardener/index.ts

@@ -2,3 +2,4 @@ export * from './imageOptimiser.js';
 export * from './addPage.js';
 export * from './addComponent.js';
 export * from './saveTemplate.js';
+export * from './hotReload.js'

package/template/src/backend/routes/gardener.route.ts

@@ -1,6 +1,6 @@
 import type { Request, Response } from 'express';
 import { Router } from "express";
-import { addComponent, addPage, imageOptimiser, saveTemplate } from "../controllers/gardener/index.js";
+import { addComponent, addPage, imageOptimiser, saveTemplate, hotReloadHandler } from "../controllers/gardener/index.js";
 
 const router: Router = Router();
 export default router;
@@ -14,6 +14,7 @@ if (process.env.NODE_ENV !== 'production') {
   router.route('/addcomponent').post(addComponent);
   router.route('/addpage').post(addPage);
   router.route('/savetemplate').post(saveTemplate);
+  router.route('/__gardener/hot-reload').get(hotReloadHandler);
 }
 
 

package/template/src/backend/server.ts

@@ -1,7 +1,9 @@
 // server.ts
+import type { Request, Response, NextFunction } from 'express';
 import 'dotenv/config';
 import express from 'express';
 import frontendRoute from './routes/gardener.route.js'
+
 import path from "path";
 
 const app = express();
@@ -15,10 +17,26 @@ const staticFiles = path.resolve(__dirname, '..', 'frontend')
 
 app.set('views', path.join(staticFiles, 'views'));
 app.set("view engine", "ejs");
-app.use(express.static(staticFiles));
+app.use(express.static(staticFiles,
+  {
+    maxAge: '1y', // 1 year
+    immutable: true
+  }
+));
+
 app.use(express.json());
 app.use(frontendRoute);
 
+
+app.use((err: Error & { status: number }, req: Request, res: Response, next: NextFunction) => {
+  console.error(err.stack);
+
+  res.status(err.status || 500).json({
+    success: false,
+    message: err.message || "Internal Server Error",
+  });
+});
+
 const PORT = process.env.PORT || 3000;
 
 app.listen(PORT, () => {

package/template/src/frontend/static/components/gardener/hotReloadbtn.js

@@ -1,82 +1,29 @@
-import { gardener, fetchElement, appendElement } from '../../gardener.js'
-import { gardenerError } from './errorBox.js';
-
-const config = {
-  hotreload: false
-}
-
-let hotReload;
-let hotReloadtimeout;
-const localStore = localStorage.getItem('hotreload');
-
-if (localStore === null) hotReload = config.hotreload;
-else if (localStore === 'true') hotReload = true
-else if (localStore === 'false') hotReload = false
-
-
-export function togglehotreload() {
-  const hr = hotReload;
-  const hrcheck = fetchElement('#hrcheckbox');
-
-  localStorage.setItem('hotreload', hr);
-
-  hotReload = !hotReload;
-
-  if (hr) {
-    hrcheck.style.background = '#66e666';
-    fetchElement('.hrcheckbox').checked = true;
-    localStorage.setItem('hotreload', 'true');
-    hotReloadtimeout = setTimeout(() => window.location.reload(), 1000);
+const POLL_INTERVAL = 500;   // ms
+const ENDPOINT = '/__gardener/hot-reload';
+
+let knownVersion = null;
+
+async function poll() {
+  try {
+    const res = await fetch(ENDPOINT);
+    if (!res.ok) return;
+    const { version } = await res.json();
+
+    if (knownVersion === null) {
+      knownVersion = version;   // capture baseline on first poll
+      return;
+    }
+
+    if (version !== knownVersion) {
+      window.location.reload();
+    }
+  } catch {
+    // network hiccup — retry next tick
   }
-  else {
-    hrcheck.style.background = 'red';
-    fetchElement('.hrcheckbox').checked = false;
-    localStorage.setItem('hotreload', 'false');
-    clearTimeout(hotReloadtimeout);
-  }
-
-  //localStorage.setItem('hotreload', hotReload);
 }
 
-export function hotReloadBtn() {
-  return gardener({
-    t: 'p',
-    cn: ['bg-gray-200', 'fixed', 'bottom-0', 'z-100', 'right-0', 'border-b-1', 'p-2', 'rounded-md'],
-    children: [
-      {
-        t: 'span',
-        txt: 'Press '
-      },
-      {
-        t: 'span',
-        cn: ['text-green-500', 'font-bold'],
-        txt: 'Alt+h'
-      },
-      {
-        t: 'span',
-        txt: ' to toggle Hot Reload'
-      },
-      {
-        t: 'form',
-        attr: {
-          id: 'hrcheckbox',
-        },
-        events: {
-          click: () => togglehotreload()
-        },
-        cn: ['p-2', 'bg-red-300'],
-        children: [{
-          t: 'label',
-          txt: 'Hot Reload ',
-        }
-          , {
-          t: 'input',
-          cn: ['hrcheckbox'],
-          attr: {
-            type: 'checkbox'
-          }
-        }]
-      }
-    ]
-  })
+export function startHotReload() {
+  poll();   // immediate check
+  setInterval(poll, POLL_INTERVAL);
 }
+

package/template/src/frontend/static/gardenerDev.js

@@ -2,7 +2,7 @@ import { mode } from './gardenerConfig.js'
 import { gardener, appendElement, fetchElement } from './gardener.js'
 import { addPagebtn } from './components/gardener/pageOverlayBtn.js';
 import { parserWindow as parserWindowComponent } from './components/gardener/parserWindow.js';
-import { hotReloadBtn, togglehotreload } from './components/gardener/hotReloadbtn.js';
+import { startHotReload } from './components/gardener/hotReloadbtn.js';
 import { gardenerError } from './components/gardener/errorBox.js';
 
 const body = fetchElement('body');
@@ -20,28 +20,12 @@ const body = fetchElement('body');
 
 if (mode === 'dev') {
   appendElement(body, addPagebtn);
-
-
-  appendElement(body, hotReloadBtn())
-
-  togglehotreload();
+  startHotReload();
 }
 
 
 
 
-document.addEventListener('keydown', function(e) {
-  // Detect Ctrl + H
-  if (e.altKey && e.key.toLowerCase() === 'h') {
-    e.preventDefault();   // Stop browser from opening history
-    // Your logic here...
-    togglehotreload();
-  }
-});
-
-
-
-
 
 
 export function parserWindow(text) {

package/template/src/frontend/static/style.css

@@ -250,18 +250,12 @@
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
-  .top-1 {
-    top: calc(var(--spacing) * 1);
-  }
   .top-1\/2 {
     top: calc(1 / 2 * 100%);
   }
   .top-1\/4 {
     top: calc(1 / 4 * 100%);
   }
-  .top-2 {
-    top: calc(var(--spacing) * 2);
-  }
   .top-2\/5 {
     top: calc(2 / 5 * 100%);
   }
@@ -277,9 +271,6 @@
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
-  .bottom-0 {
-    bottom: calc(var(--spacing) * 0);
-  }
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
@@ -292,18 +283,12 @@
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
-  .left-1 {
-    left: calc(var(--spacing) * 1);
-  }
   .left-1\/2 {
     left: calc(1 / 2 * 100%);
   }
   .left-1\/4 {
     left: calc(1 / 4 * 100%);
   }
-  .left-2 {
-    left: calc(var(--spacing) * 2);
-  }
   .left-2\/5 {
     left: calc(2 / 5 * 100%);
   }
@@ -319,9 +304,6 @@
   .z-90 {
     z-index: 90;
   }
-  .z-100 {
-    z-index: 100;
-  }
   .z-\[100\] {
     z-index: 100;
   }
@@ -379,12 +361,6 @@
   .inline-block {
     display: inline-block;
   }
-  .table {
-    display: table;
-  }
-  .h-2 {
-    height: calc(var(--spacing) * 2);
-  }
   .h-2\/4 {
     height: calc(2 / 4 * 100%);
   }
@@ -403,24 +379,15 @@
   .h-screen {
     height: 100vh;
   }
-  .w-1 {
-    width: calc(var(--spacing) * 1);
-  }
   .w-1\/4 {
     width: calc(1 / 4 * 100%);
   }
-  .w-2 {
-    width: calc(var(--spacing) * 2);
-  }
   .w-2\/4 {
     width: calc(2 / 4 * 100%);
   }
   .w-5 {
     width: calc(var(--spacing) * 5);
   }
-  .w-11 {
-    width: calc(var(--spacing) * 11);
-  }
   .w-11\/12 {
     width: calc(11 / 12 * 100%);
   }
@@ -457,21 +424,10 @@
   .flex-1 {
     flex: 1;
   }
-  .border-collapse {
-    border-collapse: collapse;
-  }
-  .-translate-x-1 {
-    --tw-translate-x: calc(var(--spacing) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  .-translate-y-1 {
-    --tw-translate-y: calc(var(--spacing) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -482,9 +438,6 @@
   .cursor-pointer {
     cursor: pointer;
   }
-  .resize {
-    resize: both;
-  }
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -546,9 +499,6 @@
   .rounded-lg {
     border-radius: var(--radius-lg);
   }
-  .rounded-md {
-    border-radius: var(--radius-md);
-  }
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
@@ -572,10 +522,6 @@
     border-top-style: var(--tw-border-style);
     border-top-width: 4px;
   }
-  .border-b-1 {
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 1px;
-  }
   .border-l-8 {
     border-left-style: var(--tw-border-style);
     border-left-width: 8px;
@@ -709,9 +655,6 @@
   .py-20 {
     padding-block: calc(var(--spacing) * 20);
   }
-  .pb-1 {
-    padding-bottom: calc(var(--spacing) * 1);
-  }
   .pb-1\.5 {
     padding-bottom: calc(var(--spacing) * 1.5);
   }
@@ -797,9 +740,6 @@
   .text-green-400 {
     color: var(--color-green-400);
   }
-  .text-green-500 {
-    color: var(--color-green-500);
-  }
   .text-green-800 {
     color: var(--color-green-800);
   }
@@ -830,9 +770,6 @@
   .italic {
     font-style: italic;
   }
-  .underline {
-    text-decoration-line: underline;
-  }
   .opacity-70 {
     opacity: 70%;
   }
@@ -852,19 +789,11 @@
     --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .outline {
-    outline-style: var(--tw-outline-style);
-    outline-width: 1px;
-  }
   .backdrop-blur-md {
     --tw-backdrop-blur: blur(var(--blur-md));
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
-  .backdrop-filter {
-    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1081,11 +1010,6 @@
   inherits: false;
   initial-value: 0 0 #0000;
 }
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
 @property --tw-backdrop-blur {
   syntax: "*";
   inherits: false;
@@ -1170,7 +1094,6 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
-      --tw-outline-style: solid;
       --tw-backdrop-blur: initial;
       --tw-backdrop-brightness: initial;
       --tw-backdrop-contrast: initial;