Remove Hyperscript from Tailwind migration

- Menu toggle is handled by custom JS

Author: davidfischer

assets/src/main.js

@@ -0,0 +1,5 @@
+// Toggle the navigation menu on small screens
+document.getElementById("navigation-toggle").addEventListener("click", function () {
+    const navMenu = document.querySelector("#navigation-menu");
+    navMenu.classList.toggle("hidden");
+});

config/settings/base.py

@@ -111,7 +111,6 @@
     os.path.join(BASE_DIR, "pythonsd", "static"),
     # Only available after running `npm install`
     os.path.join(BASE_DIR, "node_modules/htmx.org/dist"),
-    os.path.join(BASE_DIR, "node_modules/hyperscript.org/dist"),
 ]
 
 STORAGES = {

package.json

@@ -3,9 +3,9 @@
   "version": "0.2.0",
   "description": "San Diego Python Website - sandiegopython.org",
   "scripts": {
-    "dist": "tailwindcss -i ./assets/src/input.css -o ./assets/dist/main.css --minify",
-    "build": "tailwindcss -i ./assets/src/input.css -o ./assets/dist/main.css",
-    "watch": "tailwindcss -i ./assets/src/input.css -o ./assets/dist/main.css --watch"
+    "dist": "cp ./assets/src/main.js ./assets/dist/ && tailwindcss -i ./assets/src/input.css -o ./assets/dist/main.css --minify",
+    "build": "cp ./assets/src/main.js ./assets/dist/ && tailwindcss -i ./assets/src/input.css -o ./assets/dist/main.css",
+    "watch": "cp ./assets/src/main.js ./assets/dist/ && tailwindcss -i ./assets/src/input.css -o ./assets/dist/main.css --watch"
   },
   "repository": {
     "type": "git",
@@ -22,8 +22,7 @@
   },
   "homepage": "https://github.com/sandiegopython/pythonsd-django#readme",
   "dependencies": {
-    "htmx.org": "^1.9.12",
-    "hyperscript.org": "^0.9.12"
+    "htmx.org": "^1.9.12"
   },
   "devDependencies": {
     "tailwindcss": "^3.4.3"

pythonsd/templates/pythonsd/base.html

@@ -29,7 +29,7 @@
         </a>
 
         <!-- Navigation menu toggle -->
-        <div id="navigation-toggle" class="h-6 w-6 cursor-pointer md:hidden block text-slate-100" _="on click toggle .hidden on #navigation-menu">
+        <div id="navigation-toggle" class="h-6 w-6 cursor-pointer md:hidden block text-slate-100">
           <svg xmlns="http://www.w3.org/2000/svg" id="menu-button" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
           </svg>
@@ -107,7 +107,7 @@
     </footer>
 
     <script src="{% static 'htmx.min.js' %}"></script>
-    <script src="{% static '_hyperscript.min.js' %}"></script>
+    <script src="{% static 'main.js' %}"></script>
 
   </body>
 </html>