create-gardener 2.1.4 → 2.1.6

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

@@ -14,14 +14,14 @@ 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;
+  // 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);
+  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…`);
@@ -30,5 +30,5 @@ console.log(`[gardener] watching ${watchTarget} for changes…`);
 // GET /__gardener/hot-reload
 // Returns { version: <number> }
 export function hotReloadHandler(req: Request, res: Response) {
-    res.json({ version });
+  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,7 +1,6 @@
 import type { Request, Response } from 'express';
 import { Router } from "express";
-import { addComponent, addPage, imageOptimiser, saveTemplate } from "../controllers/gardener/index.js";
-import { hotReloadHandler } from "../controllers/gardener/hotReload.js";
+import { addComponent, addPage, imageOptimiser, saveTemplate, hotReloadHandler } from "../controllers/gardener/index.js";
 
 const router: Router = Router();
 export default router;

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, () => {