npm - create-gardener - Versions diffs - 2.0.8 → 2.1.0 - Mend

create-gardener 2.0.8 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (82) hide show

package/template/build/frontend/tailwind.css ADDED Viewed

	@@ -0,0 +1 @@
1	+ @import "tailwindcss"

package/template/build/frontend/views/_.ejs ADDED Viewed

@@ -0,0 +1,121 @@
+<!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='hidden' id='fileName'><%=fileName%></div>
+    <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>
+  <script type='module' src='/static/pages/pages._.js'> </script>
+</html>

package/template/build/frontend/views/partials/icons/clipboard.ejs ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-clipboard"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" /><path d="M9 5a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2" /></svg>

package/template/build/frontend/views/partials/icons/clipboardok.ejs ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-clipboard-check"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" /><path d="M9 5a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2" /><path d="M9 14l2 2l4 -4" /></svg>

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

@@ -13,41 +13,47 @@ const templateDir = path.join(frontendDir, 'template');
 async function findTemplate(fileName: string) {
-  while (fileName.length !== 0) {
-    console.log(fileName)
-    const searchFile = `template.${fileName}.ejs`;
-    console.log(searchFile)
-    const searchPath = path.join(templateDir, searchFile);
-    console.log(searchPath)
-    try {
-      await access(searchPath); // ✅ checks if file exists
-      return searchPath;        // return full path immediately
-    } catch {
-      // file does not exist → continue
-    }
+  try {
+    while (fileName.length !== 0) {
-    const lastUnderscore = fileName.lastIndexOf('_');
-    if (lastUnderscore === -1) break;
+      console.log(fileName)
+      const searchFile = `template.${fileName}.ejs`;
+      console.log(searchFile)
+      const searchPath = path.join(templateDir, searchFile);
-    fileName = fileName.substring(0, lastUnderscore + 1);
-    console.log(fileName);
-  }
+      console.log(searchPath)
+      try {
+        await access(searchPath); // ✅ checks if file exists
+        return searchPath;        // return full path immediately
+      } catch {
+        // file does not exist → continue
+      }
+      let lastUnderscore = fileName.lastIndexOf('_');
+      if (lastUnderscore === -1) break;
+      if (lastUnderscore === 0) lastUnderscore += 1;
+      fileName = fileName.substring(0, lastUnderscore);
+      console.log(fileName);
+    }
+  }
+  catch (error) {
+    throw new Error("Template not found");
+  }
   // ❗ explicit failure instead of silent bug
-  throw new Error("Template not found");
 }
 export async function addPage(req: Request, res: Response) {
   try {
-    const name: string = req.body.page;
-    // const name = pagename.replaceAll('/', '_');
+    const pagename: string = req.body.page;
+    const name = pagename.replaceAll('/', '_');
-    const templatePath = await findTemplate(name + '.ejs');//path.join(frontendDir, findTemplate(name)); //path.join(frontendDir, 'frontendtemplate.ejs');
+    const templatePath = await findTemplate(name);//path.join(frontendDir, findTemplate(name)); //path.join(frontendDir, 'frontendtemplate.ejs');
+    if (!templatePath) throw new Error('no template found');
@@ -61,7 +67,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/createStatic.ts CHANGED Viewed

@@ -35,6 +35,7 @@ export async function createStatic(req: Request, res: Response) {
       const html = await ejs.renderFile(
         inputPath,
         {
+          fileName: inputPath
         },
         {
           // async: true,

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

@@ -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/libs/generateWebp.ts CHANGED Viewed

@@ -11,8 +11,6 @@ export default async function generateWebP(
   const cacheDir = path.dirname(outputPath);
   await fsp.mkdir(cacheDir, { recursive: true });
-  console.log(`Processing image: ${inputPath}`);
-  console.log(`Output path: ${outputPath}`);
   await sharp(inputPath)
     .resize(width, height, {

package/template/src/frontend/static/cache/gardener_100x100.webp ADDED Viewed

Binary file

package/template/src/frontend/static/components/copybtn.js CHANGED Viewed

@@ -1,9 +1,25 @@
 import { gardener, fetchElement, replaceElement } from '../gardener.js'
+import addNotification from './notification.js';
 export function copybtn() {
   return gardener({
     "t": "button",
+    events: {
+      click: () => {
+        try {
+          navigator.clipboard.writeText(fetchElement('.initCommand').innerText)
+          replaceElement('.copybtn', copybtn());
+          addNotification({ status: 'success', message: 'Copied' })
+        }
+        catch (err) {
+          addNotification({
+            status: 'failure', message: "Couldn't Copy"
+          });
+        }
+      }
+    },
     "cn": [
       "copybtn",
       "flex",
@@ -18,9 +34,6 @@ export function copybtn() {
       "duration-200",
       "active:scale-95"
     ],
-    "attr": {
-      "title": "Copy to clipboard"
-    },
     "children": [
       {
         "t": "span",

package/template/src/frontend/static/components/footer.js ADDED Viewed

@@ -0,0 +1,33 @@
+import { gardener, fetchElement, replaceElement } from '../gardener.js'
+export function footer({mystery}) {
+  return gardener({
+  "t": "footer",
+  "cn": [
+    "bg-green-900",
+    "text-green-100",
+    "py-12",
+    "text-center"
+  ],
+  "children": [
+    {
+      "t": "p",
+      "cn": [
+        "text-xl",
+        "italic"
+      ],
+      "txt": "\"Because sometimes you don't need a forest. Just a garden.\""
+    },
+    {
+      "t": "div",
+      "cn": [
+        "mt-6",
+        "text-sm",
+        "opacity-70"
+      ],
+      "txt": "MIT Licensed | Built on Express & EJS "+mystery+""
+    }
+  ]
+})
+}

package/template/src/frontend/static/components/gardener/errorBox.js ADDED Viewed

@@ -0,0 +1,47 @@
+import { gardener, fetchElement, appendElement } from '../../gardener.js'
+const body = fetchElement('body');
+export function gardenerError(error) {
+  appendElement(body, gardener({
+    t: 'div',
+    // Added: centering, shadow, border-left for "alert" feel, and high z-index
+    cn: [
+      'fixed', 'top-1/2', 'left-1/2', '-translate-x-1/2', '-translate-y-1/2',
+      'w-11/12', 'max-w-md', 'bg-white', 'text-gray-800', 'shadow-2xl',
+      'border-l-8', 'border-red-600', 'rounded-r-lg', 'z-[100]', 'p-0', 'overflow-hidden'
+    ],
+    children: [
+      {
+        t: 'div',
+        cn: ['bg-red-50', 'p-4', 'flex', 'items-center', 'gap-3'],
+        children: [
+          {
+            t: 'h2',
+            cn: ['text-red-700', 'font-bold', 'text-lg', 'uppercase', 'tracking-wider'],
+            txt: '⚠️ System Error'
+          }
+        ]
+      },
+      {
+        t: 'div',
+        cn: ['p-6', 'bg-white'],
+        children: [
+          {
+            t: 'p',
+            cn: ['font-mono', 'text-sm', 'bg-gray-100', 'p-3', 'rounded', 'border', 'border-gray-200', 'break-words'],
+            txt: error
+          },
+          {
+            t: 'button',
+            cn: ['mt-4', 'w-full', 'py-2', 'bg-gray-800', 'text-white', 'rounded', 'hover:bg-black', 'transition-colors', 'cursor-pointer'],
+            txt: 'Dismiss',
+            events: {
+              click: (e) => e.target.closest('.fixed').remove()
+            }
+          }
+        ]
+      }
+    ]
+  }))
+}

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

@@ -0,0 +1,82 @@
+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);
+  }
+  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'
+          }
+        }]
+      }
+    ]
+  })
+}

package/template/src/frontend/static/components/gardener/pageOverlayBtn.js ADDED Viewed

@@ -0,0 +1,138 @@
+import { gardener, fetchElement, appendElement } from '../../gardener.js'
+const body = fetchElement('body');
+function opnPagedialog(btn = true) {
+  if (btn) {
+    const dialog = gardener({
+      t: 'form', cn: ['addpageform', 'fixed', 'left-2/5', 'bg-gray-200', 'rounded-lg', 'block', 'top-2/5', 'p-2', 'flex', 'flex-col', 'p-5', 'gap-2'], events: {
+        submit: async (e) => {
+          try {
+            e.preventDefault()
+            const data = new FormData(e.target);
+            const input = Object.fromEntries(data.entries());
+            const response = await fetch('/addpage', {
+              method: 'POST',
+              headers: {
+                "Content-Type": 'application/json'
+              },
+              body: JSON.stringify(input)
+            }).then(res => res.json())
+            opnPagedialog(false)
+            window.location.href = `${input.page}`
+          }
+          catch (err) {
+            console.log(err)
+          }
+        }
+      }, children: [{
+        t: 'label',
+        txt: 'ENTER PATH FOR NEW PAGE'
+      }, { t: 'input', attr: { name: 'page' }, cn: ['pathinput'] }]
+    })
+    appendElement(body, dialog);
+    fetchElement('.pathinput').focus();
+  }
+  else {
+    fetchElement('.addpageform').remove();
+  }
+}
+const pagebtns = gardener({
+  t: 'div',
+  cn: [
+    'fixed',
+    'bottom-20',
+    'right-4',
+    'flex',
+    'flex-col',
+    'gap-2',
+    'bg-white',
+    'shadow-lg',
+    'rounded-xl',
+    'p-3',
+    'z-50'
+  ],
+  children: [
+    {
+      t: 'button',
+      cn: [
+        'px-4',
+        'py-2',
+        'bg-blue-500',
+        'text-white',
+        'rounded-lg',
+        'hover:bg-blue-600',
+        'transition'
+      ],
+      children: [{ t: 'span', txt: 'New Page' }],
+      events: {
+        click: opnPagedialog
+      }
+    },
+    {
+      t: 'button',
+      cn: [
+        'px-4',
+        'py-2',
+        'bg-gray-800',
+        'text-white',
+        'rounded-lg',
+        'hover:bg-gray-900',
+        'transition'
+      ],
+      children: [{ t: 'span', txt: 'Save Template' }],
+      events: {
+        click: async () => {
+          const result = await fetch('/savetemplate', {
+            method: 'POST',
+            headers: { "Content-Type": 'application/json' },
+            body: JSON.stringify({ path: fetchElement('#fileName').innerText })
+          });
+          const data = await result.json(); // ✅ fix
+          alert(data.message);
+        }
+      }
+    }
+  ]
+});
+export const addPagebtn = gardener({
+  t: 'div',
+  cn: ['fixed', 'bottom-4', 'right-4', 'z-50'],
+  events: {
+    mouseenter: () => appendElement(addPagebtn, pagebtns),
+    mouseleave: () => pagebtns.remove()
+  },
+  children: [
+    {
+      t: 'span',
+      // cn: ['pb-1.5', 'flex', 'items-center', 'justify-center', 'h-15', 'w-15', 'bg-black', 'text-white', 'fixed', 'bottom-22', 'right-2'],
+      cn: [
+        'flex',
+        'items-center',
+        'justify-center',
+        'h-14',
+        'w-14',
+        'bg-black',
+        'text-white',
+        'fixed',
+        'bottom-22',
+        'right-2',
+        'rounded-full',
+        'shadow-lg',
+        'cursor-pointer',
+      ],
+      txt: 'GR'
+    }
+  ]
+});