create-gardener 1.1.13 → 2.0.1

package/Readme.md

@@ -1,5 +1,3 @@
----
-
 # 🌱 Gardener
 
 **Gardener** is a lightweight, DOM-first front-end library for building and manipulating HTML/SVG elements using a clean, declarative JavaScript object syntax.
@@ -13,6 +11,12 @@ Everything is explicit and inspectable directly in the browser.
 
 ---
 
+## Version: 2.0.0
+
+* lsp support on frontend
+* separate files for js logic inside /static/pages/(filename)
+* bug fixes in application and scripts
+
 ## ✨ Philosophy
 
 Gardener follows a **DOM-first, deterministic approach**:

package/package.json

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

package/starter.js

@@ -50,8 +50,11 @@ console.log(`
 
 Next steps:
   cd ${projectName}
-  pnpm install
-  pnpm dev
+
+  pnpm install / npm install
+  pnpm dev / npm run dev
+
+
 `);
 
 

package/template/buildHelper.js

@@ -6,6 +6,9 @@ async function buildHelper() {
   const dest = path.resolve('build', 'frontend');
 
   await fs.cp(src, dest, { recursive: true });
+
+  await fs.writeFile(path.join(dest, 'static', 'gardenerConfig.js'), "export const mode = 'prod';", 'utf8');
+
 }
 
 buildHelper();// const path = require('path');

package/template/jsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "nodenext",
+    "moduleResolution": "Bundler",
+    "checkJs": true,
+    "baseUrl": ".",
+    "paths": {
+      "/static/*.js": ["src/frontend/static/*.js"]
+    },
+
+
+    "sourceMap": true,
+    "declaration": true,
+    "declarationMap": true,
+
+
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "noUncheckedSideEffectImports": true,
+    "moduleDetection": "force",
+    "skipLibCheck": true
+  },
+  "include": ["src/frontend/static/**/*.js"]
+}

package/template/package.json

@@ -1,14 +1,13 @@
 {
   "name": "create-gardener",
-  "version": "1.1.11",
+  "version": "2.0.0",
   "description": "A dom gardener converting dom elements into json and vice versa",
-  "main": "src/build/server.js",
   "type": "module",
   "scripts": {
-    "start": "node src/build/server.js",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "concurrently \"tsx watch src/backend/server.ts\" \"tailwindcss -w -i src/frontend/tailwind.css -o src/frontend/static/style.css\"",
-    "build": "tailwindcss -i src/frontend/tailwind.css -o src/frontend/static/style.css --minify && tsc && node buildHelper.js"
+    "start": "cross-env NODE_ENV=production node build/backend/server.js",
+    "dev": "concurrently \"cross-env NODE_ENV=development tsx watch src/backend/server.ts\" \"tailwindcss -w -i src/frontend/tailwind.css -o src/frontend/static/style.css\"",
+    "build": "tailwindcss -i src/frontend/tailwind.css -o src/frontend/static/style.css --minify && tsc && node buildHelper.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "ritishDas",
@@ -18,17 +17,16 @@
     "ejs": "^3.1.10",
     "express": "^5.2.1",
     "sharp": "^0.34.5",
-    "types": "^0.1.1",
     "zod": "^4.3.6"
   },
   "devDependencies": {
-    "tailwindcss": "^4.1.18",
-    "tsx": "^4.21.0",
     "@types/ejs": "^3.1.5",
     "@types/express": "^5.0.6",
     "@types/node": "^25.0.2",
-    "typescript": "^5.9.3",
-    "concurrently": "^9.2.1"
+    "concurrently": "^9.2.1",
+    "tailwindcss": "^4.1.18",
+    "cross-env": "^10.1.0",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3"
   }
 }
-

package/template/pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      cross-env:
+        specifier: ^10.1.0
+        version: 10.1.0
       dotenv:
         specifier: ^17.2.3
         version: 17.3.1
@@ -54,6 +57,9 @@ packages:
   '@emnapi/runtime@1.8.1':
     resolution: {integrity: sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==}
 
+  '@epic-web/invariant@1.0.0':
+    resolution: {integrity: sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA==}
+
   '@esbuild/aix-ppc64@0.27.3':
     resolution: {integrity: sha512-9fJMTNFTWZMh5qwrBItuziu834eOCUcEqymSH7pY+zoMVEZg3gcPuBNxH1EvfVYe9h0x/Ptw8KBzv7qxb7l8dg==}
     engines: {node: '>=18'}
@@ -453,6 +459,15 @@ packages:
     resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
     engines: {node: '>= 0.6'}
 
+  cross-env@10.1.0:
+    resolution: {integrity: sha512-GsYosgnACZTADcmEyJctkJIoqAhHjttw7RsFrVoJNXbsWWqaq6Ym+7kZjq6mS45O0jij6vtiReppKQEtqWy6Dw==}
+    engines: {node: '>=20'}
+    hasBin: true
+
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+
   debug@4.4.3:
     resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
     engines: {node: '>=6.0'}
@@ -601,6 +616,9 @@ packages:
   is-promise@4.0.0:
     resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
 
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
   jake@10.9.4:
     resolution: {integrity: sha512-wpHYzhxiVQL+IV05BLE2Xn34zW1S223hvjtqk0+gsPrwd/8JNLXJgZZM/iPFsYc1xyphF+6M6EvdE5E9MBGkDA==}
     engines: {node: '>=10'}
@@ -652,6 +670,10 @@ packages:
     resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
     engines: {node: '>= 0.8'}
 
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
   path-to-regexp@8.3.0:
     resolution: {integrity: sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==}
 
@@ -711,6 +733,14 @@ packages:
     resolution: {integrity: sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
 
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
   shell-quote@1.8.3:
     resolution: {integrity: sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==}
     engines: {node: '>= 0.4'}
@@ -794,6 +824,11 @@ packages:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
   wrap-ansi@7.0.0:
     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
     engines: {node: '>=10'}
@@ -823,6 +858,8 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@epic-web/invariant@1.0.0': {}
+
   '@esbuild/aix-ppc64@0.27.3':
     optional: true
 
@@ -1119,6 +1156,17 @@ snapshots:
 
   cookie@0.7.2: {}
 
+  cross-env@10.1.0:
+    dependencies:
+      '@epic-web/invariant': 1.0.0
+      cross-spawn: 7.0.6
+
+  cross-spawn@7.0.6:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
   debug@4.4.3:
     dependencies:
       ms: 2.1.3
@@ -1299,6 +1347,8 @@ snapshots:
 
   is-promise@4.0.0: {}
 
+  isexe@2.0.0: {}
+
   jake@10.9.4:
     dependencies:
       async: 3.2.6
@@ -1337,6 +1387,8 @@ snapshots:
 
   parseurl@1.3.3: {}
 
+  path-key@3.1.1: {}
+
   path-to-regexp@8.3.0: {}
 
   picocolors@1.1.1: {}
@@ -1439,6 +1491,12 @@ snapshots:
       '@img/sharp-win32-ia32': 0.34.5
       '@img/sharp-win32-x64': 0.34.5
 
+  shebang-command@2.0.0:
+    dependencies:
+      shebang-regex: 3.0.0
+
+  shebang-regex@3.0.0: {}
+
   shell-quote@1.8.3: {}
 
   side-channel-list@1.0.0:
@@ -1520,6 +1578,10 @@ snapshots:
 
   vary@1.1.2: {}
 
+  which@2.0.2:
+    dependencies:
+      isexe: 2.0.0
+
   wrap-ansi@7.0.0:
     dependencies:
       ansi-styles: 4.3.0

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

@@ -0,0 +1,27 @@
+import type { Request, Response } from "express";
+import fsp from "fs/promises";
+import path from 'path';
+
+interface AddComponentBody {
+  path: string;
+  component: string;
+}
+
+import { fileURLToPath } from "url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const frontendDir = path.resolve(__dirname, '..', '..', '..', 'frontend');
+
+export async function addComponent(req: Request<{}, {}, AddComponentBody>, res: Response) {
+  try {
+    const { path: filePath, component } = req.body;
+    await fsp.mkdir(path.join(frontendDir, 'static', 'components'), { recursive: true });
+    await fsp.writeFile(path.join(frontendDir, `${filePath}`), component, "utf8");
+    res.json({ success: true });
+
+  } catch (err) {
+    const error = err as Error;
+    res.json({ success: false, msg: error.message });
+  }
+}

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

@@ -0,0 +1,60 @@
+import type { Request, Response } from "express";
+import fsp from "fs/promises";
+import path from 'path';
+
+import { fileURLToPath } from "url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const frontendDir = path.resolve(__dirname, '..', '..', '..', 'frontend');
+
+export async function addPage(req: Request, res: Response) {
+  try {
+    const pagename: string = req.body.page;
+    const name = pagename.replaceAll('/', '_');
+
+    const templatePath = path.join(frontendDir, 'frontendtemplate.ejs');
+    const viewPath = path.join(frontendDir, `views`, `${name}.ejs`);
+    const routePath = path.resolve(__dirname, '..', '..', 'routes', 'gardener.route.ts');
+    const jsDir = path.join(frontendDir, 'static/pages');
+    const jsFilePath = path.join(jsDir, `${name}.js`);
+
+    const templateContent = await fsp.readFile(templatePath, 'utf8');
+    await fsp.writeFile(viewPath, templateContent, "utf8");
+
+    await replaceLastOccurrence(viewPath, '<script', `<script src="/static/pages/${name}.js" type='module'></script>`);
+
+    const routeEntry = `router.route("${pagename}").get((req: Request, res: Response) => res.render("${name}"));\n`;
+    await fsp.appendFile(routePath, routeEntry, "utf8");
+
+    await fsp.mkdir(jsDir, { recursive: true });
+    const jsContent = 'import { gardener, fetchElement, replaceElement, appendElement } from "/static/gardener.js";\n import {log, parser, addEl, State} from "/static/gardenerDev.js"';
+    await fsp.writeFile(jsFilePath, jsContent, "utf8");
+
+    res.json({ success: true });
+  } catch (err) {
+    const error = err as Error;
+    res.json({ success: false, msg: error.message });
+  }
+}
+
+async function replaceLastOccurrence(filePath: string, searchPattern: string, replacementLine: string) {
+  const content = await fsp.readFile(filePath, 'utf8');
+  const lines = content.split('\n');
+  let found = false;
+
+  for (let i = lines.length - 1; i >= 0; i--) {
+
+    if (lines[i]!.includes(searchPattern)) {
+      lines[i] = `${replacementLine}\n${lines[i]}`;
+      found = true;
+      break;
+    }
+  }
+
+  if (found) {
+    await fsp.writeFile(filePath, lines.join('\n'), 'utf8');
+  } else {
+    console.warn(`Pattern "${searchPattern}" not found in ${filePath}`);
+  }
+}

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

@@ -0,0 +1,84 @@
+import type { Request, Response } from "express";
+import path from "path";
+import fsp from "fs/promises";
+import ejs from "ejs";
+
+import { fileURLToPath } from "url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const frontendDir = path.resolve(__dirname, '..', '..', '..', 'frontend');
+
+export async function createStatic(req: Request, res: Response) {
+  try {
+    const viewsDir = path.join(frontendDir, "views");
+    const outDir = path.resolve("src/tempfrontend");
+    const finalOut = path.resolve("src/frontendStatic");
+
+    await fsp.mkdir(outDir, { recursive: true });
+    await fsp.mkdir(finalOut, { recursive: true });
+
+    const entries = await fsp.readdir(viewsDir, { withFileTypes: true });
+
+    const rendered: string[] = [];
+
+
+    for (const entry of entries) {
+      // skip folders (partials, layouts, etc.)
+      if (!entry.isFile()) continue;
+      if (!entry.name.endsWith(".ejs")) continue;
+
+      const inputPath = path.join(viewsDir, entry.name);
+      const outputName = entry.name.replace(/\.ejs$/, ".html");
+      const outputPath = path.join(outDir, outputName);
+
+      const html = await ejs.renderFile(
+        inputPath,
+        {
+        },
+        {
+          // async: true,
+          views: [viewsDir], // needed for includes
+        }
+      );
+
+      await fsp.writeFile(outputPath, html, "utf8");
+      rendered.push(outputName);
+    }
+
+    const entries3 = await fsp.readdir(outDir, { withFileTypes: true });
+    for (const entry of entries3) {
+
+      // "_path1_path2_path3.html" -> ["path1", "path2", "path3"]
+      const parts = entry.name
+        .replace(/^_/, "")
+        .replace(/\.html$/, "")
+        .split("_");
+
+      const targetDir = path.join(finalOut, ...parts);
+      const targetFile = path.join(targetDir, "index.html");
+
+      // ensure directories exist
+      await fsp.mkdir(targetDir, { recursive: true });
+      console.log('done');
+      // copy file
+      await fsp.copyFile(path.join(outDir, entry.name), targetFile);
+
+    }
+    await fsp.rm(outDir, { recursive: true, force: true });
+    await fsp.cp(
+      path.join(frontendDir, "static"),
+      path.join(finalOut, 'static'),
+      { recursive: true }
+    );
+
+    return res.json({
+      success: true,
+      generated: rendered,
+      outDir,
+    });
+  } catch (err) {
+    console.error(err);
+    return res.status(500).json({ error: "Static build failed" });
+  }
+}

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

@@ -0,0 +1,67 @@
+import type { Request, Response } from "express";
+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);
+
+
+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 (!match) {
+      return res.status(400).json({ error: "Invalid image format" });
+    }
+
+    const [, baseName, widthStr, heightStr] = match;
+
+    if (!widthStr || !heightStr) return;
+    const width = parseInt(widthStr, 10);
+    const height = parseInt(heightStr, 10);
+
+    const cacheDir = path.join(__dirname, "..", "..", "..", "frontend", "static", "cache");
+    await fsp.mkdir(cacheDir, { recursive: true });
+
+    const outputPath = path.join(cacheDir, name);
+
+    try {
+      await fsp.access(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);
+
+    const sourceFile = files.find((file) => {
+      const parsed = path.parse(file);
+      return parsed.name === baseName;
+    });
+
+    if (!sourceFile) {
+      return res.status(404).json({ error: "Source image not found" });
+    }
+
+    const inputPath = path.join(assetsDir, sourceFile);
+
+    await generateWebP(inputPath, outputPath, width, height);
+
+    return res.sendFile(path.basename(outputPath), {
+      root: path.dirname(outputPath),
+    });
+  } catch (err) {
+    console.error(err);
+    return res.status(500).json({ error: "Image optimisation failed" });
+  }
+}

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

@@ -0,0 +1,4 @@
+export * from './imageOptimiser.js';
+export * from './addPage.js';
+export * from './createStatic.js';
+export * from './addComponent.js';

package/template/src/backend/libs/generateWebp.ts

@@ -24,3 +24,4 @@ export default async function generateWebP(
 
   console.log("✅ Image successfully generated");
 }
+

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, createStatic, imageOptimiser } from "../controllers/gardener.controller.js";
+import { addComponent, addPage, createStatic, imageOptimiser } from "../controllers/gardener/index.js";
 
 const router: Router = Router();
 export default router;
@@ -9,9 +9,12 @@ export default router;
 
 
 router.route("/static/cache/:name").get(imageOptimiser);
-router.route("/createstatic").get(createStatic);
-router.route('/addcomponent').post(addComponent);
-router.route('/addpage').post(addPage);
+
+if (process.env.NODE_ENV !== 'production') {
+  router.route("/createstatic").get(createStatic);
+  router.route('/addcomponent').post(addComponent);
+  router.route('/addpage').post(addPage);
+}
 
 
 
@@ -19,4 +22,11 @@ router.route('/addpage').post(addPage);
 
 router.route('/').get((req: Request, res: Response) => res.render('_'));
 router.route('/login').get((req: Request, res: Response) => res.render('_login'));
-
+router.route("/test").get((req: Request, res: Response) => res.render("_test"))
+router.route("/rd").get((req: Request, res: Response) => res.render("_rd"));
+router.route("/car").get((req: Request, res: Response) => res.render("_car"));
+router.route("/onemore").get((req: Request, res: Response) => res.render("_onemore"));
+
+router.route("/re").get((req: Request, res: Response) => res.render("_re"));
+router.route("/playground").get((req: Request, res: Response) => res.render("_playground"));
+router.route("/get-started").get((req: Request, res: Response) => res.render("_get-started"));

package/template/src/backend/server.ts

@@ -2,26 +2,24 @@
 import 'dotenv/config';
 import express from 'express';
 import frontendRoute from './routes/gardener.route.js'
+import path from "path";
 
 const app = express();
 
 
+import { fileURLToPath } from "url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
-app.set('views', './src/frontend/views');
+const staticFiles = path.resolve(__dirname, '..', 'frontend')
+
+app.set('views', path.join(staticFiles, 'views'));
 app.set("view engine", "ejs");
-app.use(express.static('./src/frontend'));
+app.use(express.static(staticFiles));
 app.use(express.json());
 app.use(frontendRoute);
 
 const PORT = process.env.PORT || 3000;
-//
-// initDB().then(
-//   () => {
-//     app.listen(PORT, () => {
-//       console.log("server listening 🚀🚀🚀 PORT:", PORT);
-//     });
-//   }
-// )
 
 app.listen(PORT, () => {
   console.log("server listening 🚀🚀🚀 PORT:", PORT);

package/template/src/frontend/frontendtemplate.ejs

@@ -3,33 +3,22 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/svg+xml" href="/static/cache/favicon_50x50.webp" />
   <link href="/static/style.css" rel="stylesheet"/>
   <link href="/static/style2.css" rel="stylesheet"/>
-    <title>Redvent:Login</title>
+    <title>Gardener: The Mini Web Framework</title>
   </head>
   <body>
     <div class='notification'></div>
-    <div class="bg-gray-200 w-screen h-screen flex justify-center items-center" id='body'>
-      <!-- Remove this line when you are using hot reload as it will cause delay -->
-      <%- include('partials/loader') %>
-      <!-- Remove this line when you are using hot reload as it will cause delay -->
+    <div class='loader w-screen h-screen bg-white fixed z-2'> </div>
+    <div id='main'>
 
-<!-- Main  Content-->
 
 
-      <div class="hero flex justify-around items-center p-5 h-[90vh]">
-        <p class='p-5'>
-          Gardener is a front-end library for creating and manipulating DOM elements using a declarative JavaScript object syntax. It includes a development server with features like hot-reloading and on-the-fly component creation from existing HTML. The server also provides dynamic image resizing and caching.
-        </p>
-        <img src="/cache/w_500x500.webp" alt="logo" class="w-500">
-      </div>
-    </div>
-    <script src='/static/global.js' type="module"></script>
-<script type="module">
 
-  import { parser, fetchElement, replaceElement, appendElement } from "/static/gardener.js";
-</script>
+    </div>
   </body>
+  <script type='module' src='/static/global.js'> </script>
 </html>