create-gardener 2.0.9 → 2.1.1

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

@@ -7,7 +7,10 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
+    --color-red-50: oklch(97.1% 0.013 17.38);
     --color-red-300: oklch(80.8% 0.114 19.571);
+    --color-red-600: oklch(57.7% 0.245 27.325);
+    --color-red-700: oklch(50.5% 0.213 27.518);
     --color-green-100: oklch(96.2% 0.044 156.743);
     --color-green-200: oklch(92.5% 0.084 155.995);
     --color-green-300: oklch(87.1% 0.15 154.449);
@@ -34,6 +37,7 @@
     --color-slate-700: oklch(37.2% 0.044 257.287);
     --color-slate-800: oklch(27.9% 0.041 260.031);
     --color-slate-900: oklch(20.8% 0.042 265.755);
+    --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-300: oklch(87.2% 0.01 258.338);
     --color-gray-400: oklch(70.7% 0.022 261.325);
@@ -71,6 +75,7 @@
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --tracking-wide: 0.025em;
+    --tracking-wider: 0.05em;
     --leading-relaxed: 1.625;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
@@ -248,6 +253,9 @@
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
+  .top-1\/2 {
+    top: calc(1 / 2 * 100%);
+  }
   .top-1\/4 {
     top: calc(1 / 4 * 100%);
   }
@@ -281,6 +289,9 @@
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
+  .left-1\/2 {
+    left: calc(1 / 2 * 100%);
+  }
   .left-1\/4 {
     left: calc(1 / 4 * 100%);
   }
@@ -302,6 +313,9 @@
   .z-100 {
     z-index: 100;
   }
+  .z-\[100\] {
+    z-index: 100;
+  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -335,6 +349,9 @@
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
+  .mt-4 {
+    margin-top: calc(var(--spacing) * 4);
+  }
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
@@ -401,6 +418,9 @@
   .w-5 {
     width: calc(var(--spacing) * 5);
   }
+  .w-11\/12 {
+    width: calc(11 / 12 * 100%);
+  }
   .w-14 {
     width: calc(var(--spacing) * 14);
   }
@@ -434,6 +454,14 @@
   .flex-1 {
     flex: 1;
   }
+  .-translate-x-1\/2 {
+    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
@@ -480,6 +508,9 @@
       margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .overflow-hidden {
+    overflow: hidden;
+  }
   .overflow-scroll {
     overflow: scroll;
   }
@@ -508,6 +539,10 @@
     border-top-left-radius: var(--radius-lg);
     border-top-right-radius: var(--radius-lg);
   }
+  .rounded-r-lg {
+    border-top-right-radius: var(--radius-lg);
+    border-bottom-right-radius: var(--radius-lg);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -524,9 +559,16 @@
     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;
+  }
   .border-black {
     border-color: var(--color-black);
   }
+  .border-gray-200 {
+    border-color: var(--color-gray-200);
+  }
   .border-gray-700 {
     border-color: var(--color-gray-700);
   }
@@ -539,6 +581,9 @@
   .border-green-700 {
     border-color: var(--color-green-700);
   }
+  .border-red-600 {
+    border-color: var(--color-red-600);
+  }
   .border-slate-700 {
     border-color: var(--color-slate-700);
   }
@@ -560,6 +605,9 @@
   .bg-blue-500 {
     background-color: var(--color-blue-500);
   }
+  .bg-gray-100 {
+    background-color: var(--color-gray-100);
+  }
   .bg-gray-200 {
     background-color: var(--color-gray-200);
   }
@@ -581,6 +629,9 @@
   .bg-green-900 {
     background-color: var(--color-green-900);
   }
+  .bg-red-50 {
+    background-color: var(--color-red-50);
+  }
   .bg-red-300 {
     background-color: var(--color-red-300);
   }
@@ -599,6 +650,9 @@
   .object-contain {
     object-fit: contain;
   }
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
@@ -693,6 +747,13 @@
     --tw-tracking: var(--tracking-wide);
     letter-spacing: var(--tracking-wide);
   }
+  .tracking-wider {
+    --tw-tracking: var(--tracking-wider);
+    letter-spacing: var(--tracking-wider);
+  }
+  .break-words {
+    overflow-wrap: break-word;
+  }
   .text-black {
     color: var(--color-black);
   }
@@ -708,6 +769,9 @@
   .text-gray-400 {
     color: var(--color-gray-400);
   }
+  .text-gray-800 {
+    color: var(--color-gray-800);
+  }
   .text-green-100 {
     color: var(--color-green-100);
   }
@@ -726,6 +790,9 @@
   .text-green-900 {
     color: var(--color-green-900);
   }
+  .text-red-700 {
+    color: var(--color-red-700);
+  }
   .text-slate-500 {
     color: var(--color-slate-500);
   }
@@ -753,6 +820,10 @@
   .opacity-70 {
     opacity: 70%;
   }
+  .shadow-2xl {
+    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -780,6 +851,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .duration-200 {
     --tw-duration: 200ms;
     transition-duration: 200ms;
@@ -788,6 +864,13 @@
     -webkit-user-select: all;
     user-select: all;
   }
+  .hover\:bg-black {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-black);
+      }
+    }
+  }
   .hover\:bg-blue-600 {
     &:hover {
       @media (hover: hover) {
@@ -856,6 +939,21 @@
     }
   }
 }
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false;
@@ -1017,6 +1115,9 @@
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
       --tw-rotate-x: initial;
       --tw-rotate-y: initial;
       --tw-rotate-z: initial;

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

@@ -6,10 +6,10 @@
 transform:translateY(0px);
 }
 20%{
-transform:translateY(80px);
+transform:translateY(100px);
 }
 80%{
-transform:translateY(80px);
+transform:translateY(100px);
 }
 100%{
 transform:translateY(0px);

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

@@ -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>
+
+</html>