create-gardener 1.1.2 → 1.1.4

package/Readme.md

@@ -63,7 +63,10 @@ src/
 │   ├── assets/             # original images
 │   ├── components/
 │   ├── gardener.js
-│   └── styles/
+│   ├── styles/
+│   └── frontendtemplate.ejs    #starter file to create new page
+│
+│
 │
 ├── frontendStatic/          # final static output (generated)
 └── tempfrontend/            # temporary build output (deleted after build)
@@ -103,12 +106,8 @@ pnpm run dev
 ## Image Optimization & Caching
 
 Gardener provides a **deterministic image optimization endpoint**.
+put your images in ./src/frontend/assets and use /cache/[imagename]_[width]x[height].webp in img tag.
 
-### Route
-
-```
-GET /cache/:name
-```
 
 ### Filename format
 
@@ -308,6 +307,7 @@ Creates an EJS page and registers a route.
 
 ⚠️ **Important**
 
+* Gardener doesn't support <span>hi<span>rohan</span></span> use <span><span>hi</span><span>rohan</span></span> basically text node elements shouldn't have siblings.
 * `/addcomponent` and `/addpage` mutate files and routes
 * Intended for **local development only**
 * Do NOT expose publicly without authentication and sanitization

package/package.json

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

package/template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-gardener",
-  "version": "1.0.0",
+  "version": "1.1.4",
   "description": "A dom gardener converting dom elements into json and vice versa",
   "main": "index.js",
   "bin": {

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

@@ -17,3 +17,4 @@ router.route('/addpage').post(addPage);
 
 
 router.route('/').get((req, res) => res.render('_'));
+router.route('/login').get((req, res) => res.render('_login'));

package/template/src/frontend/components/emailsvg.js

@@ -0,0 +1,55 @@
+
+import { gardener, fetchElement, replaceElement } from '../gardener.js'
+
+export default function thisfun() {
+  return gardener({
+  "t": "span",
+  "cn": [
+    "emailsvg"
+  ],
+  "children": [
+    {
+      "t": "svg",
+      "cn": [
+        "icon",
+        "icon-tabler",
+        "icons-tabler-outline",
+        "icon-tabler-mail"
+      ],
+      "attr": {
+        "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"
+      },
+      "children": [
+        {
+          "t": "path",
+          "attr": {
+            "stroke": "none",
+            "d": "M0 0h24v24H0z",
+            "fill": "none"
+          }
+        },
+        {
+          "t": "path",
+          "attr": {
+            "d": "M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10"
+          }
+        },
+        {
+          "t": "path",
+          "attr": {
+            "d": "M3 7l9 6l9 -6"
+          }
+        }
+      ]
+    }
+  ]
+})
+}

package/template/src/frontend/components/eyeoff.js

@@ -0,0 +1,50 @@
+
+import { gardener } from '../gardener.js'
+
+export default function () {
+  return gardener({
+  "t": "svg",
+  "cn": [
+    "eye"
+  ],
+  "attr": {
+    "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"
+  },
+  "children": [
+    {
+      "t": "path",
+      "attr": {
+        "stroke": "none",
+        "d": "M0 0h24v24H0z",
+        "fill": "none"
+      }
+    },
+    {
+      "t": "path",
+      "attr": {
+        "d": "M10.585 10.587a2 2 0 0 0 2.829 2.828"
+      }
+    },
+    {
+      "t": "path",
+      "attr": {
+        "d": "M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87"
+      }
+    },
+    {
+      "t": "path",
+      "attr": {
+        "d": "M3 3l18 18"
+      }
+    }
+  ]
+})
+}

package/template/src/frontend/components/eyeon.js

@@ -0,0 +1,44 @@
+
+import { gardener } from '../gardener.js'
+
+export default function () {
+  return gardener({
+  "t": "svg",
+  "cn": [
+    "eye"
+  ],
+  "attr": {
+    "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"
+  },
+  "children": [
+    {
+      "t": "path",
+      "attr": {
+        "stroke": "none",
+        "d": "M0 0h24v24H0z",
+        "fill": "none"
+      }
+    },
+    {
+      "t": "path",
+      "attr": {
+        "d": "M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"
+      }
+    },
+    {
+      "t": "path",
+      "attr": {
+        "d": "M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"
+      }
+    }
+  ]
+})
+}

package/template/src/frontend/components/nonui/api.js

@@ -0,0 +1,22 @@
+async function postFetch(path, body) {
+  try {
+    const data = await fetch(path, {
+      credentials: 'include',
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(body)
+    });
+
+    return await data.json();
+  }
+  catch (err) {
+    console.error('error while requesting', err);
+  }
+}
+
+export async function userlogin(email, password) {
+  const result = await postFetch('/login', { email, password });
+  console.log(result);
+}

package/template/src/frontend/components/notification.js

@@ -0,0 +1,67 @@
+import { gardener, replaceElement, fetchElement } from '/gardener.js';
+
+export default function addNotification(noti) {
+  console.log('clicked');
+  replaceElement(fetchElement('.notification'), Notification(noti));
+}
+
+function Notification(notification) {
+  if (!notification) return null;
+
+  const statusStyles = {
+    success: "bg-[#2e7d32]",
+    warning: "bg-[#ed6c02]",
+    failure: "bg-[#d32f2f]",
+  };
+
+
+  return gardener({
+    "t": "div",
+    "cn": [
+      "notification",
+      "fixed",
+      "top-[-60px]",
+      "left-0",
+      "md:left-auto",
+      "md:right-[60px]",
+      "right-0",
+      "z-50",
+      "flex",
+      "justify-center",
+      "min-w-100",
+      "px-4",
+      "box-border"
+    ],
+    "children": [
+      {
+        "t": "div",
+        "cn": [
+          "flex",
+          "items-center",
+          "w-full",
+          "max-w-sm",
+          "p-4",
+          "rounded-2xl",
+          "shadow-xl",
+          "text-white",
+          "backdrop-blur-md",
+          "bg-opacity-95",
+          statusStyles[notification.status]
+        ],
+        "children": [
+          {
+            "t": "div",
+            "cn": [
+              "flex-1",
+              "text-sm",
+              "font-medium",
+              "tracking-wide"
+            ],
+            "txt": notification.message
+          }
+        ]
+      }
+    ]
+  });
+}
+

package/template/src/frontend/components/passwordBox.js

@@ -0,0 +1,105 @@
+import { gardener, replaceElement, fetchElement } from '/gardener.js'
+import eyeoff from '/components/eyeoff.js'
+import eyeon from '/components/eyeon.js'
+export default function thisfun(visible) {
+
+  const svg = visible ? eyeoff() : eyeon();
+
+  return gardener({
+    "t": "div",
+    "cn": [
+      "w-full",
+      "passwordbox"
+    ],
+    "children": [
+      {
+        "t": "label",
+        "cn": [
+          "my-1",
+          "block"
+        ],
+        "txt": "Password"
+      },
+      {
+        "t": "span",
+        "cn": [
+          "border",
+          "border-gray-900",
+          "flex",
+          "space-x-1",
+          "items-center",
+          "h-8",
+          "p-1",
+          "rounded-md"
+        ],
+        "children": [
+          {
+            "t": "svg",
+            "cn": [
+              "icon",
+              "icon-tabler",
+              "icons-tabler-outline",
+              "icon-tabler-key"
+            ],
+            "attr": {
+              "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"
+            },
+            "children": [
+              {
+                "t": "path",
+                "attr": {
+                  "stroke": "none",
+                  "d": "M0 0h24v24H0z",
+                  "fill": "none"
+                }
+              },
+              {
+                "t": "path",
+                "attr": {
+                  "d": "M16.555 3.843l3.602 3.602a2.877 2.877 0 0 1 0 4.069l-2.643 2.643a2.877 2.877 0 0 1 -4.069 0l-.301 -.301l-6.558 6.558a2 2 0 0 1 -1.239 .578l-.175 .008h-1.172a1 1 0 0 1 -.993 -.883l-.007 -.117v-1.172a2 2 0 0 1 .467 -1.284l.119 -.13l.414 -.414h2v-2h2v-2l2.144 -2.144l-.301 -.301a2.877 2.877 0 0 1 0 -4.069l2.643 -2.643a2.877 2.877 0 0 1 4.069 0"
+                }
+              },
+              {
+                "t": "path",
+                "attr": {
+                  "d": "M15 9h.01"
+                }
+              }
+            ]
+          },
+          {
+            "t": "input",
+            "cn": [
+              "outline-none",
+              "inputbox",
+              "w-full"
+            ],
+            "attr": {
+              "type": visible ? 'text' : 'password',
+              "name": "password",
+              value: fetchElement('.inputbox').value,
+              "required": "",
+            }
+          },
+          {
+            t: 'span',
+            events: {
+              click: () => replaceElement(fetchElement(".passwordbox"), thisfun(!visible)),
+            },
+            children: [
+              svg
+            ]
+          }
+        ]
+      },
+    ]
+  })
+}

package/template/src/{backend → frontend}/frontendtemplate.ejs

@@ -4,23 +4,30 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="/style.css">
-    <title>Gardener</title>
+    <link rel="stylesheet" href="/style2.css">
+    <title>Redvent:Login</title>
   </head>
   <body>
-    <div id='body'>
+    <div class='notification'></div>
+    <div class="bg-gray-200 w-screen h-screen flex justify-center items-center" id='body'>
       <%- include('partials/loader') %>
+
+<!-- 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='/global.js' type="module"></script>
-    <script type="module">
+<script type="module">
 
-    </script>
+  import { parser, fetchElement, replaceElement, appendElement } from "/gardener.js";
+</script>
   </body>
 </html>
 
+

package/template/src/frontend/gardener.js

@@ -333,10 +333,7 @@ export function gardener(Dom) {
 
 export function parser(element, isParent = true) {
   if (typeof element === 'string') {
-    // If user passes raw HTML string
-    const temp = document.createElement('div');
-    temp.innerHTML = element.trim();
-    element = temp.firstElementChild;
+    element = fetchElement(element);
   }
 
   const obj = {

package/template/src/frontend/style2.css

@@ -0,0 +1 @@
+/* your custom styles */

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

@@ -9,8 +9,11 @@
   <link href="/style.css" rel="stylesheet"/>
 </head>
 
-<body class="bg-slate-50 text-slate-900 antialiased">
+<body>
 
+    <div id='body'>
+
+      <%- include('partials/loader') %>
   <div class="max-w-7xl mx-auto px-6 py-12 space-y-20">
 
     <!-- Hero / Introduction -->
@@ -32,6 +35,8 @@
           class="w-64 lg:w-80 rounded-2xl shadow-2xl"
         />
       </div>
+
+          <a href="/login" class='p-3 rounded-md bg-blue-400 inline-block'>Check A Demo Login Page</a>
     </section>
 
     <!-- Design Philosophy -->
@@ -212,5 +217,8 @@ replaceElement(
     import { parser, fetchElement } from "/gardener.js";
     // parser(fetchElement("#some-selector")); // uncomment when needed
   </script>
+      <div>
+        
 </body>
 </html>
+

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

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="/style2.css">
+    <title>Redvent:Login</title>
+  </head>
+  <body>
+    <div class='notification'></div>
+    <div class="bg-gray-200 w-screen h-screen flex justify-center items-center" id='body'>
+
+      <%- include('partials/loader') %>
+      <div class="bg-white rounded-xl w-90 min-h-100 flex items-center flex-col">
+
+        <h1 class="text-center text-4xl p-5">Login</h1>
+        <form class="w-3/4 flex flex-col space-y-5 loginform" >
+
+          <div>
+
+          <label class="my-1 block">Email</label>
+          <span class="border border-gray-900 flex space-x-1 items-center h-8 p-1 rounded-md">
+              <span class='emailsvg'> </span>
+              <input type="email" class="outline-none w-full" name="email" required>
+          </span>
+          </div>
+
+
+          <div class="w-full">
+            <div class="passwordbox">
+              <input class='inputbox' value=""/>
+            </div>
+              <a href='/forgotpass' class="text-right block text-sm text-blue-800 mt-3">Forgot Password?</a>
+          </div>
+
+
+          <button type="submit" class="w-full bg-green-200 rounded-xl p-2 mt-5 hover:bg-green-300 hover:cursor-pointer transition-all">Submit</button>
+        </form>
+
+      </div>
+    </div>
+    <script src='/global.js' type="module"></script>
+<script type="module">
+
+  import { parser, fetchElement, replaceElement, appendElement } from "/gardener.js";
+  import addNotification from "/components/notification.js";
+  import emailsvg from '/components/emailsvg.js';
+  import passwordbox from "/components/passwordBox.js";
+  import { userlogin } from "/components/nonui/api.js";
+
+  // mount password input
+  replaceElement(fetchElement(".passwordbox"), passwordbox(false));
+
+
+  fetchElement(".loginform").addEventListener("submit", async (e) => {
+    e.preventDefault();
+
+    const formdata = new FormData(e.target);
+    const result = Object.fromEntries(formdata);
+
+
+    const { email, password } = result;
+    await userlogin(email, password);
+
+addNotification({status:'success',message:'Login SuccessFull'})
+  });
+
+    replaceElement(fetchElement('.emailsvg'),emailsvg());
+</script>
+  </body>
+</html>
+

package/template/src/frontendStatic/components/test.js

@@ -1,54 +0,0 @@
-
-import { gardener, fetchElement, replaceElement } from '../gardener.js'
-
-export default function thisfun() {
-  return gardener({
-  "t": "div",
-  "attr": {
-    "id": "body"
-  },
-  "children": [
-    {
-      "t": "div",
-      "cn": [
-        "h-screen",
-        "w-screen",
-        "bg-white",
-        "loader",
-        "absolute"
-      ],
-      "attr": {
-        "style": "transition: 0.4s; opacity: 0;"
-      },
-      "txt": ""
-    },
-    {
-      "t": "div",
-      "cn": [
-        "hero",
-        "flex",
-        "justify-around",
-        "items-center",
-        "p-5",
-        "h-[90vh]"
-      ],
-      "children": [
-        {
-          "t": "p",
-          "cn": [
-            "p-5"
-          ],
-          "txt": "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 timely reload and on-the-fly component creation from existing HTML. The server also provides dynamic image resizing and caching."
-        },
-        {
-          "t": "img",
-          "attr": {
-            "src": "/cache/gardener_500x500.webp",
-            "alt": "logo"
-          }
-        }
-      ]
-    }
-  ]
-})
-}