Merge pull request #13 from ernestmarcinko/dev

chore: added htmx-serverless
ernestmarcinko · Oct 16, 2023 · 593e5cd · 593e5cd
2 parents 053a8b4 + 6a8398e
commit 593e5cd
Show file tree

Hide file tree

Showing 13 changed files with 134 additions and 12 deletions.
diff --git a/dist/htmx-serverless.js b/dist/htmx-serverless.js
diff --git a/dist/style.css b/dist/style.css
diff --git a/package.json b/package.json
@@ -28,6 +28,8 @@
     "cssnano": "^6.0.1",
     "esc": "^0.0.3",
     "flappybird-ts": "^0.1.2",
+    "htmx.org": "^1.9.6",
+    "htmx-serverless": "^0.1.5",
     "nodemon": "^2.0.22",
     "postcss": "^8.4.23",
     "webpack": "^5.84.0",

diff --git a/server.js b/server.js
@@ -34,6 +34,16 @@ app.get('/typewriter', function(req, res) {
     });
 });
 
+app.get('/htmx-serverless', function(req, res) {
+    var att = {
+        title: 'HTMX without a Server',
+        description: 'HTMX Serverless is a small addon to define static HTMX request and responses without a Server'
+    };
+    res.render('pages/htmx-serverless',{
+        att: att,
+    });
+});
+
 app.get('/flappybird', function(req, res) {
     var att = {
         title: 'Flappy Bird in TypeScript by Ernest Marcinko',
@@ -58,6 +68,8 @@ app.get('/sitemap.xml', async function(req, res) {
 
         smstream.write({ url: '/', changefreq: 'monthly', priority: 1});
         smstream.write({ url: '/typewriter', changefreq: 'monthly', priority: 0.6});
+        smstream.write({ url: '/flappybird', changefreq: 'monthly', priority: 0.6});
+        smstream.write({ url: '/htmx-serverless', changefreq: 'monthly', priority: 0.6});
         smstream.write({ url: '/aicookieclicker', changefreq: 'monthly', priority: 0.6});
 
         // cache the response

diff --git a/src/htmx-serverless.js b/src/htmx-serverless.js
@@ -0,0 +1,35 @@
+import htmx from "htmx.org";
+import htmxServerless from "htmx-serverless";
+
+htmxServerless.init(htmx);
+
+htmxServerless.handlers.set('/clicked', 
+    `<button hx-get="/clicked2" hx-swap="outerHTML" hx-ext="serverless">
+        Hey!
+    </button>`
+);
+htmxServerless.handlers.set('/clicked2', 
+    `<button hx-get="/clicked3" hx-swap="outerHTML" hx-ext="serverless">
+        Okay then!
+    </button>`
+);
+htmxServerless.handlers.set('/clicked3', 
+    `<button hx-get="/clicked4" hx-swap="outerHTML" hx-ext="serverless">
+        Stop it now.
+    </button>`
+);
+htmxServerless.handlers.set('/clicked4', 
+    `<button hx-get="/clicked5" hx-swap="outerHTML" hx-ext="serverless">
+        Just stop pls..
+    </button>`
+);
+htmxServerless.handlers.set('/clicked5', 
+    `<button hx-get="/clicked6" hx-swap="outerHTML" hx-ext="serverless">
+        Sus.
+    </button>`
+);
+htmxServerless.handlers.set('/clicked6', 
+    `<button hx-get="/clicked" hx-swap="outerHTML" hx-ext="serverless">
+        I'm done.
+    </button>`
+);
diff --git a/src/style.css b/src/style.css
@@ -98,6 +98,11 @@ section.intro {
     margin: 10rem auto;
 }
 
+section.htmx-serverless {
+    background: #000000a8;
+    max-width: 640px;;
+}
+
 .socials a svg path {
     fill: white;
     transition: fill 0.2s;
@@ -113,6 +118,17 @@ section.intro {
     justify-content: center;
 }
 
+section.htmx-serverless button {
+    padding: 1em 2em;
+    color: white;
+    background: #1585ef;
+    border: none;
+    border-radius: 2em;
+    cursor: pointer;
+    font-size: 1em;
+    font-weight: 700;
+}
+
 .flexy {
     display: flex;
     flex-wrap: wrap;

diff --git a/src/tt.js b/src/tt.js
diff --git a/views/pages/flappybird.ejs b/views/pages/flappybird.ejs
@@ -8,7 +8,7 @@
         <section class="intro" style="width:auto">
             <h1 id="tw1">Flappy Bird TS</h1>
             <p>You can integrate this Flappy Bird game to your project</p>
-            <p><a href='https://youtu.be/3HwsIWoDhrU'>YouTube Video</a> | <a href='https://github.com/anag0/flappybird'>Github repository</a> | <a href="https://www.npmjs.com/package/flappybird-ts">npm</a></p>
+            <p><a href='https://youtu.be/3HwsIWoDhrU'>YouTube Video</a> | <a href='https://github.com/ernestmarcinko/flappybird'>Github repository</a> | <a href="https://www.npmjs.com/package/flappybird-ts">npm</a></p>
             <pre>npm i flappybird-ts --save-dev</pre>
             <p><canvas id="game"></canvas></p>
             <p><a href='../'><< Back Home</a></p>

diff --git a/views/pages/htmx-serverless.ejs b/views/pages/htmx-serverless.ejs
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <%- include('../parts/head'); %>
+    <script src="/dist/htmx-serverless.js"></script>
+</head>
+<body>
+    <main class="wrapper" role="main">
+        <section class="intro htmx-serverless">
+            <h1 id="tw1">HTMX Serverless</h1>
+            <p>
+                <h3>Click the button to do things</h3>
+                <button hx-get="/clicked" hx-swap="outerHTML" hx-ext="serverless">
+                    Click to change the buttons!
+                </button>
+                <p>The button changes via HTMX without server queries.</p>
+                <p><a href='https://github.com/ernestmarcinko/htmx-serverless'>Github repository</a> | <a href="https://www.npmjs.com/package/htmx-serverless">npm</a></p>
+
+            </p>
+        </section>
+        <section style="max-width: 640px;">
+            <h2>HTMX boosted</h2>
+            <p>
+                HTMX without a server? Yes, it is possible! Although HTMX is designed focusing on server-client connections,
+                in some cases it is convenient to define static responses to certain requests.
+            </p>
+            <p>
+                This is what the <a href="https://github.com/ernestmarcinko/htmx-serverless">htmx-serverless</a> library can do.
+            </p>
+            <p><a href='../'><< Back Home</a></p>
+        </section>
+    </main>
+
+    <%- include('../parts/footer'); %>
+</body>
+</html>
diff --git a/views/pages/index.ejs b/views/pages/index.ejs
@@ -17,7 +17,7 @@
                             c0-3.774,3.982-6.22,7.348-4.514l126.06,63.881C304.363,229.873,304.298,235.248,300.506,237.056z"/>
                     </svg>
                 </a>
-                <a target="_blank" href="https://github.com/anag0" title="Github" aria-label="Github">
+                <a target="_blank" href="https://github.com/ernestmarcinko" title="Github" aria-label="Github">
                     <svg id="github" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1024 1024" fill="none">
                         <path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="#1B1F23"/>
                     </svg>
@@ -31,6 +31,18 @@
             </p>
         </section>
         <section class="projects flexy">
+            <div class="project">
+                <a class="title" href="/htmx-serverless/">
+                    <h2>HTMX without a Server</h2>
+                </a>            
+                <p>The HTMX Serverless extensions adds a quick way to bypass certain requests.</p>
+                <p>With HTMX Serverless you can define your own responses on the frontend based on the request path.</p>
+                <ul>
+                    <li><a href='/htmx-serverless/'>Examle</a></li>
+                    <li><a href='https://github.com/ernestmarcinko/htmx-serverless' target="_blank">Github Repository</a></li>
+                    <li><a href='https://www.npmjs.com/package/htmx-serverless' target="_blank">npm Repository</a></li>
+                </ul>
+            </div>
             <div class="project">
                 <a class="title" href="/flappybird/">
                     <h2>Flappy Bird in TypeScript</h2>
@@ -40,7 +52,7 @@
                 <ul>
                     <li><a href='/flappybird/'>Play</a></li>
                     <li><a href='https://youtu.be/3HwsIWoDhrU'>YouTube Video</a></li>
-                    <li><a href='https://github.com/anag0/flappybird' target="_blank">Github Repository</a></li>
+                    <li><a href='https://github.com/ernestmarcinko/flappybird' target="_blank">Github Repository</a></li>
                     <li><a href='https://www.npmjs.com/package/flappybird-ts' target="_blank">npm Repository</a></li>
                 </ul>
             </div>
@@ -53,7 +65,7 @@
                 <p>Syntactically indentical to <strong>jQuery</strong>, but much smaller with only the essential features.</p>
                 <ul>
                     <li><a href='https://dominijs.com/' target="_blank">DoMini website</a></li>
-                    <li><a href='https://github.com/anag0/domini' target="_blank">Github Repository</a></li>
+                    <li><a href='https://github.com/ernestmarcinko/domini' target="_blank">Github Repository</a></li>
                     <li><a href='https://www.npmjs.com/package/domini' target="_blank">npm Repository</a></li>
                 </ul>
             </div>
@@ -64,7 +76,7 @@
                 <p>Using a javascript neural network (brain.js) to play Cookie Clicker, also experimenting with a Genetic alrorithm.</p>
                 <ul>
                     <li><a href='https://youtu.be/NdJI9k5WRao'>Youtube Video</a></li>
-                    <li><a href='https://github.com/anag0/cookieclicker'>Github Repository</a></li>
+                    <li><a href='https://github.com/ernestmarcinko/cookieclicker'>Github Repository</a></li>
                     <li><a href='https://brain.js.org/'>Brain.js</a> neural network for javascript</li>
                     <li><a href='https://www.thisdot.co/blog/quick-intro-to-genetic-algorithms-with-a-javascript-example'>Awesome Genetic algorithm tutorial</a> for javascript</li>
                 </ul>
@@ -77,7 +89,7 @@
                 <ul>
                     <li><a href='https://youtu.be/SKs-_MSlSsE'>Youtube Video</a></li>
                     <li><a href='https://ernestmarcinko.com/typewriter/'>Live Example</a></li>
-                    <li><a href='https://github.com/anag0/typewriter'>Github Repository</a></li>
+                    <li><a href='https://github.com/ernestmarcinko/typewriter'>Github Repository</a></li>
                     <li><a href='https://www.npmjs.com/package/@anag0/typewriter'>npm Repository</a></li>
                 </ul>
             </div>
@@ -102,11 +114,11 @@
                 </ul>
             </div>
             <div class="project">
-                <a class="title" href="https://github.com/anag0/ernestmarcinko.com">
+                <a class="title" href="https://github.com/ernestmarcinko/ernestmarcinko.com">
                     <h2>This website</h2>
                 </a>            
                 <p>It's a work of art, I know.</p>
-                <p>Feel free to use this as you template, the full site source can be found in the <a target="_blank" href='https://github.com/anag0/ernestmarcinko.com'>Github Repository</a></p>
+                <p>Feel free to use this as you template, the full site source can be found in the <a target="_blank" href='https://github.com/ernestmarcinko/ernestmarcinko.com'>Github Repository</a></p>
                 <p>Don't forget to remove or replace the Google Tag Manager codes in the index.html file</p>
             </div>
         </section>

diff --git a/views/pages/typewriter.ejs b/views/pages/typewriter.ejs
@@ -9,7 +9,7 @@
             <h1 id="tw1">Native javascript TypeWriter</h1>
             <p>This is a simple, small (~2.3kB) yet powerful TypeWriter effect written in native javascript.</p>
             <p>It can write, delete, clear, pause, can chain and also has events and many more.</p>
-            <p><a href='https://github.com/anag0/typewriter'>Github repository</a> | <a href="https://youtu.be/SKs-_MSlSsE">YouTube Video</a> | <a href="https://www.npmjs.com/package/@anag0/typewriter">npm</a></p>
+            <p><a href='https://github.com/ernestmarcinko/typewriter'>Github repository</a> | <a href="https://youtu.be/SKs-_MSlSsE">YouTube Video</a> | <a href="https://www.npmjs.com/package/@anag0/typewriter">npm</a></p>
             <pre>npm i @anag0/typewriter --save-dev</pre>
         </section>
         <section>