updated htmx-hyperscript and refactored index.html

nicobako · Dec 12, 2023 · 885d830 · 885d830
1 parent 9bf11a3
commit 885d830
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -25,6 +25,10 @@ I'm using *htmx* for replacing content on pages to simulate an SPA.
 Hyperscript plays very well with htmx and adds
 JavaScript-y functionality directly in HTML!
 
+Honestly, since this is a static site,
+I've been replacing more and more of the _htmx_ with _hyperscript_,
+and have really enjoyed how simple the code has become.
+
 ### Development
 
 [Vscode](https://code.visualstudio.com/) and [Live Server Extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer).
diff --git a/index.html b/index.html
@@ -6,13 +6,13 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>nicobako.dev</title>
+    <title>nicobako.github.io</title>
 
     <!-- md-block : markdown rendering -->
     <script type="module" src="https://md-block.verou.me/md-block.js"></script>
 
     <!-- htmx : SPA-like functionality -->
-    <script src="https://unpkg.com/[email protected].2"></script>
+    <script src="https://unpkg.com/[email protected].9"></script>
 
     <!-- hyperscript : JavaScript, hold the JavaScript -->
     <script src="https://unpkg.com/[email protected]"></script>
@@ -33,12 +33,21 @@
 </head>
 
 <body class="column">
+    <script type="text/hyperscript">
+        def render_markdown(src)
+            set templ to `<md-block src=${src}>Failed to load ${src}</md-block>`
+            then put templ into #content.innerHTML
+        end
+    </script>
 
     <h1><a href="/">Nico Bako</a></h1>
     <button _="on click toggle @data-theme='light' on <:root/>">Dark/Light</button>
     <div class="row">
-        <button hx-get="/pages/about_me/index.html" hx-target="#content" hx-trigger="load,click">About Me</button>
-        <button hx-get="./pages/about_site/index.html" hx-target="#content">About Site</button>
+        <button
+            _= "on click or load render_markdown('/pages/about_me.md')"
+        >About Me</button>
+        <button 
+            _= "on click render_markdown('/README.md')">About Site</button>
     </div>
     <div id="content"></div>
 

diff --git a/pages/about_me/about_me.md → pages/about_me.md b/pages/about_me/about_me.md → pages/about_me.md
diff --git a/sw.js b/sw.js
@@ -16,8 +16,8 @@ self.addEventListener("install", (event) => {
           "/pages/about_me/index.html",
           "/pages/about_site/index.html",
           "https://md-block.verou.me/md-block.js",
-          "https://unpkg.com/[email protected].2",
-          "https://unpkg.com/[email protected].8",
+          "https://unpkg.com/[email protected].9",
+          "https://unpkg.com/[email protected].12",
         ]),
       ),
   );