create-gardener 2.1.4 → 2.1.5

package/README.md

@@ -1,360 +1,165 @@
-# 🌱 Gardener
+# Gardener — DOM-First Mini Framework
 
-A full-stack web framework that combines Express.js backend with EJS templating and a unique DOM-to-JSON component system. Build web apps with a visual-first approach where you can convert any DOM element into reusable components with a single function call.
+Gardener is a lightweight web framework built on top of Express and EJS. It enables building web applications without React or heavy frontend frameworks by using a DOM-first approach with reusable components.
 
-## 🚀 Quick Start
-
-Create a new Gardener app:
-
-```bash
-pnpm create gardener app
-```
-
-Install dependencies and start development:
-
-```bash
-pnpm install
-pnpm dev
-```
-
-Your app will be running with hot reload enabled!
-
-## 🌟 Core Features
-
-### Backend
-- **Express.js**: Familiar Node.js backend with full Express capabilities
-- **TypeScript Ready**: Built-in TypeScript support for type-safe development
-- **Static Site Generation**: Export your dynamic app to static HTML with one API call
-
-### Frontend
-- **EJS Templating**: Server-side rendering with EJS views
-- **Tailwind CSS**: Integrated with watch mode for rapid styling
-- **Gardener Component System**: Unique DOM-to-JSON conversion for reusable components
-- **Live Development Tools**: Browser-based route and component creation
-
-### Developer Experience
-- **Hot Reload**: Toggle with `Alt + H` for instant CSS updates
-- **Visual Component Parser**: Convert DOM elements to JSON components in the browser
-- **Browser-Based Routing**: Create new routes without touching your code
-- **Image Optimization**: Automatic WebP conversion with smart sizing
-
-## 📖 Complete Workflow
-
-### 1. Backend Development
-
-Write familiar Express.js code in TypeScript:
-
-```typescript
-// src/backend/server.ts
-app.get('/api/posts', (req, res) => {
-  res.json({ posts: [] });
-});
-```
-
-### 2. Creating Pages & Routes
-
-**Two ways to create routes:**
+---
 
-#### Browser Method (Recommended for Development)
-1. Click the "**New Page**" button that appears in development mode
-2. Enter your route path (e.g., `/about`, `/blog/post`)
-3. Press Enter - the route and EJS file are created automatically!
+## What it does
 
-#### Manual Method
-Create an EJS file in `src/frontend/views/` and add the Express route manually.
+Gardener lets you:
 
-### 3. Working with Components
+- Build UI using plain HTML, CSS, and JavaScript
+- Convert DOM elements into reusable components
+- Serve lightweight pages with minimal runtime overhead
 
-Gardener has **two component types**:
+---
 
-#### A. EJS Partials (Traditional)
-Static components that render once:
-```ejs
-<%- include('partials/header') %>
-```
+## Why it exists
 
-#### B. Gardener Components (Dynamic)
-JSON-based components with the Gardener system:
-
-**Creating a Component:**
-1. Write your HTML structure in an EJS file or browser
-2. In your JavaScript file, call:
-   ```javascript
-   import { parser } from '/static/gardenerDev.js';
-   
-   parser('.my-component-selector');
-   ```
-3. A window appears in the browser with the JSON representation
-4. Name and save the component
-5. The component is now reusable!
-
-**Using a Component:**
-```javascript
-import { myComponent } from '/static/components/myComponent.js';
-import { gardener, appendElement } from '/static/gardener.js';
-
-// Render the component
-const element = gardener(myComponent);
-appendElement('#container', element);
-```
+Modern frameworks introduce significant abstraction and bundle size overhead.
 
-**Component Structure:**
-```javascript
-// Gardener components are JSON objects
-export const button = {
-  t: 'button',              // tag
-  cn: ['btn', 'primary'],   // classNames
-  txt: 'Click me',          // text content
-  attr: { id: 'submit' },   // attributes
-  events: { click: handleClick }, // event handlers
-  children: [...]           // nested components
-};
-```
+Gardener focuses on:
 
-### 4. Parameterized Components
+- Minimal runtime (~300 lines core)
+- Direct DOM control
+- Simplicity over abstraction
 
-Create dynamic components with parameters using `??`:
+---
 
-```javascript
-// In your component definition, wrap dynamic parts with ??
-const card = {
-  t: 'div',
-  cn: ['card'],
-  children: [
-    { t: 'h2', txt: '??title??' },
-    { t: 'p', txt: '??description??' }
+## Example
+
+Define a component using JSON:
+
+```
+{
+  "t": "div",
+  "cn": ["flex", "justify-center", "items-center", "target"],
+  "children": [
+    {
+      "t": "span",
+      "cn": ["text-xl", "font-bold"],
+      "txt": "Hello World"
+    },
+    {
+      "t": "button",
+      "txt": "click",
+      "events": {
+        "click": "() => console.log('button clicked')"
+      }
+    }
   ]
-};
-
-// Use with parameters
-const myCard = gardener(card, { 
-  title: 'Hello', 
-  description: 'World' 
-});
-```
-
-### 5. Template System
-
-**Save Current Page as Template:**
-- Click "**Save Template**" button in the browser
-- This saves the current page structure as a template
-- Used automatically for deeper routes (e.g., `/blog/` template for `/blog/post-1`)
-
-### 6. Dynamic Routes & Parameters
-
-For parameterized routes like `/post/:id`:
-
-**Backend:**
-```javascript
-app.get('/post/:id', (req, res) => {
-  res.render('post', { 
-    id: req.params.id,
-    title: 'My Post'
-  });
-});
+}
 ```
 
-**Frontend (EJS):**
-```ejs
-<h1>Post <%= id %></h1>
-<p><%= title %></p>
-```
-
-**Query Parameters:**
-```javascript
-// Backend
-app.get('/search', (req, res) => {
-  const query = req.query.q;
-  res.render('search', { query });
-});
-
-// Frontend EJS
-<p>Searching for: <%= query %></p>
-```
+You don’t need to write JSON manually.
 
-### 7. Hot Reload for Styling
+Instead:
 
-Press **`Alt + H`** to toggle hot reload mode:
-- Automatically refreshes CSS changes
-- No page reload needed
-- Perfect for rapid styling iterations
-
-### 8. Image Optimization
-
-Use the built-in image optimizer:
-
-```html
-<img src="/static/image_800x600.webp" alt="Optimized">
-```
+1. Write standard HTML
+2. Select an element (id/class)
+3. Run the parser → generates reusable component
 
-Format: `/static/image_{width}x{height}.webp`
+---
 
-The server automatically:
-- Converts to WebP format
-- Resizes to specified dimensions
-- Caches for performance
+## Key Features
 
-### 9. Static Site Generation
+- Lightweight (~300 lines core, bundled with esbuild)
+- No frontend framework dependency
+- Reusable components (DOM → JSON)
+- Server-side rendering via EJS
+- Hot reloading
+- Image optimization (Sharp + caching)
+- Static build support
+- One-command page creation
 
-Generate a static version of your entire app:
+---
 
-```javascript
-// Make a GET request
-fetch('/createStatic')
-```
+## Architecture
 
-Or visit `http://localhost:3000/createStatic` in your browser.
+Gardener follows a simple request → render → enhance flow:
 
-Your static site is generated in the `/build` directory!
+- Express handles routing and backend logic
+- EJS renders templates into HTML
+- Frontend library enhances DOM with:
+  - component system
+  - state handling
+  - dev tooling
 
-## 🧩 API Reference
+---
 
-### Gardener Core (`/static/gardener.js`)
+## Components
 
-```javascript
-import { 
-  gardener,        // Convert JSON to DOM elements
-  fetchElement,    // Query selector wrapper
-  appendElement,   // Append child with error handling
-  createElement,   // Create element with classes
-  insertText,      // Set text content
-  replaceElement   // Replace element in DOM
-} from '/static/gardener.js';
+### Two types:
 
-// Create element from JSON
-const el = gardener({
-  t: 'div',
-  cn: ['container'],
-  attr: { id: 'main' },
-  children: [...]
-});
-```
+1. Static Components
 
-### Gardener Dev Tools (`/static/gardenerDev.js`)
-
-```javascript
-import { 
-  parser,          // Convert DOM to JSON
-  parserWindow,    // Show parser UI
-  State,           // Reactive state management
-  addEl            // Add event listener helper
-} from '/static/gardenerDev.js';
-
-// Reactive State
-const count = new State(0);
-count.registerCb((value) => {
-  console.log('Count:', value);
-});
-count.setTo(1); // Triggers callback
-```
+- EJS partials
+- Require full page reload
 
-### Navigation (`/static/components/nonui/navigation.js`)
+2. Dynamic Components
 
-```javascript
-import { 
-  nextPage,         // Navigate with animation
-  nextPagehandler,  // Set up link handlers
-  pageloader        // Handle page loader
-} from '/static/components/nonui/navigation.js';
-```
+- Generated from DOM → JSON
+- Reusable and parameterized
 
-### API Utilities (`/static/components/nonui/api.js`)
+Example parameter:
 
-```javascript
-import { Fetch } from '/static/components/nonui/api.js';
+<span>?title?</span>
 
-// Make API requests
-const response = await Fetch('/api/data', { key: 'value' }, 'POST');
-const data = await response.json();
-```
+This creates a dynamic variable "title".
 
-## 📁 Project Structure
+---
 
-```
-your-app/
-├── src/
-│   ├── backend/
-│   │   ├── server.ts           # Main server file
-│   │   ├── routes/             # Express routes
-│   │   └── controllers/        # Route controllers
-│   └── frontend/
-│       ├── views/              # EJS templates
-│       │   └── partials/       # EJS partials
-│       ├── static/             # Client-side JS
-│       │   ├── gardener.js     # Core framework
-│       │   ├── gardenerDev.js  # Dev tools
-│       │   ├── components/     # Gardener components
-│       │   └── pages/          # Page-specific JS
-│       ├── template/           # Page templates
-│       ├── style.css           # Compiled Tailwind
-│       └── tailwind.css        # Tailwind source
-├── build/                      # Static site output
-└── package.json
-```
+## Image Optimization
 
-## 🎯 Key Concepts
+- Uses Sharp for processing
+- Cached images served via:
 
-### 1. DOM-to-JSON Parser
-The `parser()` function converts any DOM element into a JSON representation that can be saved as a reusable component. This allows you to:
-- Build UI visually in the browser
-- Extract components without manual coding
-- Create a library of reusable elements
+/static/[image_name]_[width]x[height].webp
 
-### 2. Component Composition
-Components are composable JSON objects. Build complex UIs by nesting components:
+---
 
-```javascript
-const page = {
-  t: 'div',
-  children: [
-    header,
-    mainContent,
-    footer
-  ]
-};
-```
+## Hot Reloading
 
-### 3. Development vs Production
-- **Development**: Full dev tools, component parser, hot reload
-- **Production**: Minimal runtime, optimized assets, static export option
+- Backend watches file changes
+- Generates hash updates
+- Frontend polls reload endpoint
+- Full page reload triggered on change
 
-## 🔧 Configuration
+---
 
-Edit `src/frontend/static/gardenerConfig.js`:
+## Tech Stack
 
-```javascript
-export const mode = 'dev'; // or 'production'
-```
+- TypeScript
+- Express
+- EJS
+- esbuild
+- Sharp
 
-## 📚 Documentation
+---
 
-Visit [gardener.ritish.site](https://gardener.ritish.site) for full documentation and examples.
+## Setup
 
-## 💡 Examples
+npm create gardener <project-name>
 
-### Creating a Blog Post Component
+---
 
-```javascript
-// 1. Create HTML in your EJS file
-<div class="post">
-  <h2 class="title">?title?</h2>
-  <p class="content">?content?</p>
-</div>
+## Positioning
 
-<div class="post2">
- </div>
+Gardener is designed for:
 
-// 2. Parse it by calling 
-parser('.post');
+- Developers who prefer control over abstraction
+- Lightweight applications
+- Learning how frameworks work internally
 
-// 3. accept the component by giving a name in browser
+---
 
-// 4. Use it
+## Future Work
 
-replaceElement('.post2', component({title:'new component', content:'this is the new content'}))
-
-```
+- Partial DOM updates (instead of full reload)
+- Better state management primitives
+- Devtools / debugging layer
 
+---
 ## 🤝 Contributing
 
 Contributions are welcome! Visit the [GitHub repository](https://github.com/ritishDas/gardener).
@@ -373,3 +178,4 @@ MIT License - See LICENSE file for details.
 ---
 
 Built with ❤️ for developers who want to move fast without breaking things.
+

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/ritishDas/gardener"
   },
-  "version": "2.1.4",
+  "version": "2.1.5",
   "description": "A dom gardener converting dom elements into json and vice versa",
   "main": "index.js",
   "bin": {

package/template/.env

@@ -0,0 +1,3 @@
+# Comma-separated list of allowed domains (subdomains are included automatically)
+GARDENER_IMAGE_DOMAINS=images.unsplash.com,cdn.mysite.com,example.com
+PORT=3000

package/template/README.md

@@ -0,0 +1,181 @@
+# Gardener — DOM-First Mini Framework
+
+Gardener is a lightweight web framework built on top of Express and EJS. It enables building web applications without React or heavy frontend frameworks by using a DOM-first approach with reusable components.
+
+---
+
+## What it does
+
+Gardener lets you:
+
+- Build UI using plain HTML, CSS, and JavaScript
+- Convert DOM elements into reusable components
+- Serve lightweight pages with minimal runtime overhead
+
+---
+
+## Why it exists
+
+Modern frameworks introduce significant abstraction and bundle size overhead.
+
+Gardener focuses on:
+
+- Minimal runtime (~300 lines core)
+- Direct DOM control
+- Simplicity over abstraction
+
+---
+
+## Example
+
+Define a component using JSON:
+
+```
+{
+  "t": "div",
+  "cn": ["flex", "justify-center", "items-center", "target"],
+  "children": [
+    {
+      "t": "span",
+      "cn": ["text-xl", "font-bold"],
+      "txt": "Hello World"
+    },
+    {
+      "t": "button",
+      "txt": "click",
+      "events": {
+        "click": "() => console.log('button clicked')"
+      }
+    }
+  ]
+}
+```
+
+You don’t need to write JSON manually.
+
+Instead:
+
+1. Write standard HTML
+2. Select an element (id/class)
+3. Run the parser → generates reusable component
+
+---
+
+## Key Features
+
+- Lightweight (~300 lines core, bundled with esbuild)
+- No frontend framework dependency
+- Reusable components (DOM → JSON)
+- Server-side rendering via EJS
+- Hot reloading
+- Image optimization (Sharp + caching)
+- Static build support
+- One-command page creation
+
+---
+
+## Architecture
+
+Gardener follows a simple request → render → enhance flow:
+
+- Express handles routing and backend logic
+- EJS renders templates into HTML
+- Frontend library enhances DOM with:
+  - component system
+  - state handling
+  - dev tooling
+
+---
+
+## Components
+
+### Two types:
+
+1. Static Components
+
+- EJS partials
+- Require full page reload
+
+2. Dynamic Components
+
+- Generated from DOM → JSON
+- Reusable and parameterized
+
+Example parameter:
+
+<span>?title?</span>
+
+This creates a dynamic variable "title".
+
+---
+
+## Image Optimization
+
+- Uses Sharp for processing
+- Cached images served via:
+
+/static/[image_name]_[width]x[height].webp
+
+---
+
+## Hot Reloading
+
+- Backend watches file changes
+- Generates hash updates
+- Frontend polls reload endpoint
+- Full page reload triggered on change
+
+---
+
+## Tech Stack
+
+- TypeScript
+- Express
+- EJS
+- esbuild
+- Sharp
+
+---
+
+## Setup
+
+npm create gardener <project-name>
+
+---
+
+## Positioning
+
+Gardener is designed for:
+
+- Developers who prefer control over abstraction
+- Lightweight applications
+- Learning how frameworks work internally
+
+---
+
+## Future Work
+
+- Partial DOM updates (instead of full reload)
+- Better state management primitives
+- Devtools / debugging layer
+
+---
+## 🤝 Contributing
+
+Contributions are welcome! Visit the [GitHub repository](https://github.com/ritishDas/gardener).
+
+## 📄 License
+
+MIT License - See LICENSE file for details.
+
+## 👤 Author
+
+**ritishDas**
+
+- GitHub: [@ritishDas](https://github.com/ritishDas)
+- Website: [gardener.ritish.site](https://gardener.ritish.site)
+
+---
+
+Built with ❤️ for developers who want to move fast without breaking things.
+

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

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

@@ -271,9 +271,6 @@
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
-  .bottom-0 {
-    bottom: calc(var(--spacing) * 0);
-  }
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
@@ -307,9 +304,6 @@
   .z-90 {
     z-index: 90;
   }
-  .z-100 {
-    z-index: 100;
-  }
   .z-\[100\] {
     z-index: 100;
   }
@@ -505,9 +499,6 @@
   .rounded-lg {
     border-radius: var(--radius-lg);
   }
-  .rounded-md {
-    border-radius: var(--radius-md);
-  }
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
@@ -531,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;
@@ -753,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);
   }

package/template/src/frontend/views/_.ejs

@@ -12,9 +12,7 @@
 
 <body class="bg-slate-50 text-slate-900 font-sans">
 
-  <div class='hidden' id='fileName'>
-    <%=fileName%>
-  </div>
+  <div class='hidden' id='fileName'><%=fileName%></div>
   <div class='loader w-screen h-screen bg-white fixed z-2'> </div>
   <div class='notification'></div>
 
@@ -43,7 +41,7 @@
             href='https://www.npmjs.com/package/create-gardener'>View On npm</a>
         </div>
       </div>
-      <img src="/static/cache/gardener_500x500.webp" alt="Gardener Logo" class="w-96 h-96 object-contain ml-10">
+      <img src="/static/cache/betterway_200x200.webp?url=https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIc-V0t9zqjdPUe6IoI4M7U4jSW6yY6dhhtw&s" alt="Gardener Logo" class="w-96 h-96 object-contain ml-10">
     </div>
 
     <!-- Copy command -->
@@ -136,4 +134,4 @@ gardener({
     <script type='module' src='/static/pages/pages._.js'></script>
     <% } %>
 
-</html>
+</html>