create-gardener 2.0.7 → 2.0.9

package/package.json

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

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

@@ -28,10 +28,12 @@ async function findTemplate(fileName: string) {
       // file does not exist → continue
     }
 
-    const lastUnderscore = fileName.lastIndexOf('_');
+    let lastUnderscore = fileName.lastIndexOf('_');
     if (lastUnderscore === -1) break;
 
-    fileName = fileName.substring(0, lastUnderscore + 1);
+    if (lastUnderscore === 0) lastUnderscore += 1;
+
+    fileName = fileName.substring(0, lastUnderscore);
     console.log(fileName);
   }
 
@@ -61,7 +63,7 @@ export async function addPage(req: Request, res: Response) {
 
     await replaceLastOccurrence(viewPath, '<script', `<script src="/static/pages/pages.${name}.js" type='module'></script>`);
 
-    const routeEntry = `router.route("${pagename}").get((req: Request, res: Response) => res.render("${name}"));\n`;
+    const routeEntry = `router.route("${pagename}").get((req: Request, res: Response) => res.render("${name}",{fileName:"${name}"}));\n`;
     await fsp.appendFile(routePath, routeEntry, "utf8");
 
     await fsp.mkdir(jsDir, { recursive: true });

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

@@ -13,7 +13,7 @@ export async function saveTemplate(req: Request, res: Response) {
   try {
     const { path: reqPath } = req.body; // ✅ renamed
 
-    const name = reqPath.replaceAll("/", "_");
+    const name = reqPath;
 
     const sourceFile = path.join(frontendDir, 'views', `${name}.ejs`);
 

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

@@ -21,4 +21,4 @@ if (process.env.NODE_ENV !== 'production') {
 
 
 
-router.route('/').get((req: Request, res: Response) => res.render('_'));
+router.route('/').get((req: Request, res: Response) => res.render('_', { fileName: '_' }));

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

@@ -78,7 +78,7 @@ const pagebtns = gardener({
           const result = await fetch('/savetemplate', {
             method: 'POST',
             headers: { "Content-Type": 'application/json' },
-            body: JSON.stringify({ path: window.location.pathname })
+            body: JSON.stringify({ path: fetchElement('#fileName').innerText })
           });
 
           const data = await result.json(); // ✅ fix

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

@@ -13,7 +13,6 @@
     --color-green-300: oklch(87.1% 0.15 154.449);
     --color-green-400: oklch(79.2% 0.209 151.711);
     --color-green-500: oklch(72.3% 0.219 149.579);
-    --color-green-600: oklch(62.7% 0.194 149.214);
     --color-green-700: oklch(52.7% 0.154 150.069);
     --color-green-800: oklch(44.8% 0.119 151.328);
     --color-green-900: oklch(39.3% 0.095 152.535);
@@ -273,9 +272,6 @@
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
-  .bottom-6 {
-    bottom: calc(var(--spacing) * 6);
-  }
   .bottom-20 {
     bottom: calc(var(--spacing) * 20);
   }
@@ -306,6 +302,24 @@
   .z-100 {
     z-index: 100;
   }
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
   .m-2 {
     margin: calc(var(--spacing) * 2);
   }
@@ -351,6 +365,9 @@
   .grid {
     display: grid;
   }
+  .hidden {
+    display: none;
+  }
   .inline {
     display: inline;
   }
@@ -369,9 +386,6 @@
   .h-15 {
     height: calc(var(--spacing) * 15);
   }
-  .h-35 {
-    height: calc(var(--spacing) * 35);
-  }
   .h-96 {
     height: calc(var(--spacing) * 96);
   }
@@ -393,12 +407,6 @@
   .w-15 {
     width: calc(var(--spacing) * 15);
   }
-  .w-35 {
-    width: calc(var(--spacing) * 35);
-  }
-  .w-50 {
-    width: calc(var(--spacing) * 50);
-  }
   .w-96 {
     width: calc(var(--spacing) * 96);
   }
@@ -555,9 +563,6 @@
   .bg-gray-200 {
     background-color: var(--color-gray-200);
   }
-  .bg-gray-400 {
-    background-color: var(--color-gray-400);
-  }
   .bg-gray-500 {
     background-color: var(--color-gray-500);
   }
@@ -570,9 +575,6 @@
   .bg-green-300 {
     background-color: var(--color-green-300);
   }
-  .bg-green-500 {
-    background-color: var(--color-green-500);
-  }
   .bg-green-700 {
     background-color: var(--color-green-700);
   }
@@ -793,13 +795,6 @@
       }
     }
   }
-  .hover\:bg-gray-800 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-gray-800);
-      }
-    }
-  }
   .hover\:bg-gray-900 {
     &:hover {
       @media (hover: hover) {
@@ -807,13 +802,6 @@
       }
     }
   }
-  .hover\:bg-green-600 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-green-600);
-      }
-    }
-  }
   .hover\:bg-green-800 {
     &:hover {
       @media (hover: hover) {

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

@@ -10,6 +10,7 @@
   </head>
   <body class="bg-slate-50 text-slate-900 font-sans">
 
+    <div class='hidden' id='fileName'><%=fileName%></div>
     <div class='loader w-screen h-screen bg-white fixed z-2'> </div>
     <div class='notification'></div>
 

package/template/src/frontend/static/pages/pages._al.js

@@ -1,2 +0,0 @@
-import { gardener, fetchElement, replaceElement, appendElement } from "/static/gardener.js";
- import {log, parser, addEl, State} from "/static/gardenerDev.js"

package/template/src/frontend/static/pages/pages._new.js

@@ -1,2 +0,0 @@
-import { gardener, fetchElement, replaceElement, appendElement } from "/static/gardener.js";
- import {log, parser, addEl, State} from "/static/gardenerDev.js"

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

@@ -1,120 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <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>Gardener: The Mini Web Framework</title>
-  </head>
-  <body class="bg-slate-50 text-slate-900 font-sans">
-
-    <div class='loader w-screen h-screen bg-white fixed z-2'> </div>
-    <div class='notification'></div>
-
-    <div id='main'>
-
-
-      <!-- hero -->
-      <div class='hero flex-wrap w-full h-screen bg-green-200 flex justify-center items-center px-10'>
-        <div class='w-200'>
-          <a href="https://ritish.site">Home</a> > <a href="https://ritish.site/projects">Projects</a> > <a href="/">Gardener</a>
-          <h1 class='text-6xl my-10 font-bold text-green-900'>Gardener</h1>
-          <h2 class='text-2xl font-bold text-green-800 mb-4'>Develop With No Bloat</h2>
-          <p class="text-lg mb-6 max-w-md">Gardener is a lightweight, DOM-first front-end library. No virtual DOM, no JSX, and no compilation step. Just the real DOM.</p>
-          <div class='flex gap-2 m-2'>
-          <a class="block bg-green-700 text-white px-8 py-3 rounded-lg font-bold hover:bg-green-800 transition" href='/get-started'>Get Started</a>
-          <a class="block border border-green-700 text-black px-8 py-3 rounded-lg font-bold hover:text-white hover:bg-green-800 transition" href='/documentation/#introduction'>Documentation</a>
-          </div>
-          <div class='flex gap-2 m-2'>
-          <a class="block border border-green-700 text-black px-8 py-3 rounded-lg font-bold hover:text-white hover:bg-green-800 transition" href='https://github.com/ritishDas/Gardener'>View On Github</a>
-          <a class="block border border-green-700 text-black px-8 py-3 rounded-lg font-bold hover:text-white hover:bg-green-800 transition" 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">
-      </div>
-
-      <!-- Copy command -->
-<div class="flex w-1/4 items-center mx-auto my-15 justify-between gap-4 bg-[#1e1e1e] border border-gray-700 rounded-lg px-4 py-3 font-mono shadow-sm group">
-  <span class="text-sm md:text-base text-gray-300 select-all">
-    <span class="text-emerald-400 mr-2">$</span><span class='initCommand'>pnpm create gardener app</span>
-  </span>
-  
-  <button class="copybtn flex items-center justify-center p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded transition-all duration-200 active:scale-95" title="Copy to clipboard">
-    <span class="w-5 h-5" >
-      <%- include('partials/icons/clipboard') %>
-    </span>
-  </button>
-</div>
-      <!-- Philosophy -->
-      <div class="max-w-5xl mx-auto py-20 px-6 grid md:grid-cols-2 gap-12">
-        <div>
-          <h3 class="text-3xl font-bold mb-4 text-green-900">✨ Philosophy</h3>
-          <ul class="space-y-3 text-slate-700">
-            <li><strong>DOM-First:</strong> Renders directly to the real DOM.</li>
-            <li><strong>Deterministic:</strong> If you can inspect it, you can understand it.</li>
-            <li><strong>Native:</strong> Works in the browser via ES modules.</li>
-            <li><strong>Zero Build:</strong> No bundlers or magic required.</li>
-          </ul>
-        </div>
-
-        <!-- Features -->
-        <div>
-          <h3 class="text-3xl font-bold mb-4 text-green-900">🚀 Features</h3>
-          <div class="grid grid-cols-2 gap-4">
-            <div class="p-4 bg-white shadow-sm border border-green-100 rounded">Declarative UI</div>
-            <div class="p-4 bg-white shadow-sm border border-green-100 rounded">SVG Namespace Support</div>
-            <div class="p-4 bg-white shadow-sm border border-green-100 rounded">Hot Reload</div>
-            <div class="p-4 bg-white shadow-sm border border-green-100 rounded">Image Optimization</div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Api Example -->
-      <div class="bg-slate-900 py-20 text-white">
-        <div class="max-w-5xl mx-auto px-6">
-          <h3 class="text-3xl font-bold mb-8 text-center text-green-400">The Core API</h3>
-          <div class="bg-slate-800 p-6 rounded-xl border border-slate-700 font-mono text-sm overflow-x-auto">
-<pre class="text-blue-300">
-gardener({
-  t: <span class="text-green-300">'div'</span>,
-  cn: [<span class="text-green-300">'p-6'</span>, <span class="text-green-300">'flex'</span>],
-  attr: { id: <span class="text-green-300">'hero'</span> },
-  txt: <span class="text-green-300">'Welcome to the Garden'</span>,
-  events: {
-    click: () => console.log(<span class="text-green-300">'Growth!'</span>)
-  },
-  children: [
-    { t: <span class="text-green-300">'span'</span>, txt: <span class="text-green-300">'Pure DOM nodes.'</span> }
-  ]
-})
-</pre>
-          </div>
-        </div>
-      </div>
-
-      <div class="max-w-5xl mx-auto py-20 px-6 text-center">
-        <h3 class="text-3xl font-bold mb-4 text-green-900">🧠 Simple State</h3>
-        <p class="mb-8 text-slate-600">No proxies. No diffing. Just clean, reactive callbacks.</p>
-        <div class="inline-block text-left bg-white p-6 rounded shadow-lg border-t-4 border-green-500 font-mono text-sm">
-          <p class="text-slate-500">// Initialize</p>
-          <p>const count = new State(0);</p>
-          <p class="text-slate-500 mt-2">// React</p>
-          <p>count.registerCb(val => updateUI(val));</p>
-        </div>
-      </div>
-
-      <!-- Footer -->
-      <footer class="bg-green-900 text-green-100 py-12 text-center">
-        <p class="text-xl italic">"Because sometimes you don't need a forest. Just a garden."</p>
-        <div class="mt-6 text-sm opacity-70">
-          MIT Licensed | Built on Express & EJS
-        </div>
-      </footer>
-    </div>
-
-  </body>
-  <script type='module' src='/static/global.js'> </script>
-
-</html>