adding clojurescript to replace hand written javascript

I hate javascript...

assets/css/compiled/main.css

@@ -1979,6 +1979,10 @@ select {
   height: 24rem;
 }
 
+.h-48 {
+  height: 12rem;
+}
+
 .h-64 {
   height: 16rem;
 }
@@ -1999,10 +2003,6 @@ select {
   height: 9rem;
 }
 
-.h-48 {
-  height: 12rem;
-}
-
 .h-8 {
   height: 2rem;
 }

layouts/shortcodes/health-form.html

@@ -1,5 +1,6 @@
 {{ $formClasses := "bg-neutral-500 text-neutral-50 placeholder-neutral-300 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-neutral-500 checked:text-neutral-500" }}
 
+<script src="/js/forms.js"></script>
 <script>
  function submitForm(e) {
      e.preventDefault();
@@ -88,7 +89,7 @@
      }
      else {
          document.getElementById('policy').hidden = true;
-         console.log(document.getElementById('policy'))
+         /* console.log(document.getElementById('policy')) */
          console.log("NEGATORY");
      }
      document.getElementById('warning').style.visibility = 'hidden';

package.json

@@ -6,5 +6,8 @@
     "server": "hugo server --noHTTPCache ",
     "dev": "NODE_ENV=development ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit -w",
     "build": "rm -rf public && NODE_ENV=production ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit && hugo --gc --minify"
+  },
+  "devDependencies": {
+    "shadow-cljs": "^2.23.3"
   }
 }

shadow-cljs.edn

@@ -0,0 +1,6 @@
+{:source-paths ["src"]
+ :dependencies [[clj-http "3.12.3"]]
+ :builds {:app {:target :browser
+                :output-dir "static/js"
+                :asset-path "/js"
+                :modules {:forms {:entries [forms]}}}}}

shell.nix

@@ -10,6 +10,9 @@ mkShell rec {
     hugo
     go
     nodejs
+    clojure
+    clojure-lsp
+    clj-kondo
   ];
   
   shellHook = ''

src/forms.cljs

@@ -0,0 +1,19 @@
+(ns forms
+  (:require [clj-http.client :as client]))
+(def log (.-log js/console))
+
+(defn calc-age [dob]
+  (let [diff-ms (- js/Date.now dob.getTime)
+        age-dt (js/Date. diff-ms)]
+    (js/Math.abs (- age-dt.getUTCFullyYear 1970))))
+
+(defn submit-form [e]
+  ;; (e.preventDefault)
+  (let [form (js/document.getElementById "form")
+        data (js/FormData. form)
+        birthdate (js/Date. (get data "birthdate"))
+        age (calc-age birthdate)]
+    (data.append "age" age)
+    (log data)))
+
+(js/document.addEventListener "DOMContentLoaded" submit-form)

src/health-form.cljs

@@ -0,0 +1,3 @@
+(ns health-form)
+(+ 1 9)
+(println "hello-world")

static/js/manifest.edn

@@ -0,0 +1 @@
+[{:module-id :forms, :name :forms, :output-name "forms.js", :entries [shadow.cljs.devtools.client.console shadow.cljs.devtools.client.browser shadow.cljs.devtools.client.env forms], :depends-on nil, :sources ["goog/base.js" "goog/debug/error.js" "goog/dom/nodetype.js" "goog/asserts/asserts.js" "goog/reflect/reflect.js" "goog/math/long.js" "goog/math/integer.js" "goog/dom/htmlelement.js" "goog/dom/tagname.js" "goog/dom/element.js" "goog/asserts/dom.js" "goog/dom/asserts.js" "goog/functions/functions.js" "goog/string/typedstring.js" "goog/string/const.js" "goog/html/trustedtypes.js" "goog/html/safescript.js" "goog/fs/url.js" "goog/fs/blob.js" "goog/html/trustedresourceurl.js" "goog/string/internal.js" "goog/html/safeurl.js" "goog/html/safestyle.js" "goog/object/object.js" "goog/html/safestylesheet.js" "goog/flags/flags.js" "goog/labs/useragent/useragent.js" "goog/labs/useragent/util.js" "goog/labs/useragent/highentropy/highentropyvalue.js" "goog/labs/useragent/highentropy/highentropydata.js" "goog/labs/useragent/browser.js" "goog/array/array.js" "goog/dom/tags.js" "goog/html/safehtml.js" "goog/html/uncheckedconversions.js" "goog/dom/safe.js" "goog/string/string.js" "goog/collections/maps.js" "goog/structs/structs.js" "goog/uri/utils.js" "goog/uri/uri.js" "goog/string/stringbuffer.js" "cljs/core.cljs" "clojure/string.cljs" "shadow/cljs/devtools/client/console.cljs" "goog/labs/useragent/engine.js" "goog/labs/useragent/platform.js" "goog/useragent/useragent.js" "goog/dom/browserfeature.js" "goog/math/math.js" "goog/math/coordinate.js" "goog/math/size.js" "goog/dom/dom.js" "goog/useragent/product.js" "shadow/json.cljs" "clojure/set.cljs" "shadow/cljs/devtools/client/env.cljs" "goog/dom/inputtype.js" "goog/collections/iters.js" "goog/debug/errorcontext.js" "goog/debug/debug.js" "goog/iter/iter.js" "goog/iter/es6.js" "goog/structs/map.js" "goog/window/window.js" "goog/dom/forms.js" "goog/dom/classlist.js" "goog/dom/vendor.js" "goog/math/box.js" "goog/math/irect.js" "goog/math/rect.js" "goog/style/style.js" "goog/style/transition.js" "cljs/core/async/impl/protocols.cljs" "cljs/core/async/impl/buffers.cljs" "goog/debug/entrypointregistry.js" "goog/async/nexttick.js" "cljs/core/async/impl/dispatch.cljs" "cljs/core/async/impl/channels.cljs" "cljs/core/async/impl/timers.cljs" "cljs/core/async/impl/ioc_helpers.cljs" "cljs/core/async.cljs" "shadow/dom.cljs" "clojure/data.cljs" "shadow/util.cljs" "shadow/object.cljs" "shadow/animate.cljs" "com/cognitect/transit/util.js" "com/cognitect/transit/delimiters.js" "com/cognitect/transit/caching.js" "com/cognitect/transit/eq.js" "com/cognitect/transit/types.js" "com/cognitect/transit/impl/decoder.js" "com/cognitect/transit/impl/reader.js" "com/cognitect/transit/handlers.js" "com/cognitect/transit/impl/writer.js" "com/cognitect/transit.js" "cognitect/transit.cljs" "shadow/remote/runtime/api.cljc" "shadow/remote/runtime/shared.cljc" "clojure/core/protocols.cljs" "shadow/remote/runtime/cljs/js_builtins.cljs" "clojure/datafy.cljs" "cljs/pprint.cljs" "clojure/walk.cljs" "cljs/spec/gen/alpha.cljs" "cljs/spec/alpha.cljs" "shadow/remote/runtime/writer.cljs" "goog/string/stringformat.js" "cljs/repl.cljs" "shadow/remote/runtime/obj_support.cljc" "shadow/remote/runtime/tap_support.cljc" "shadow/remote/runtime/eval_support.cljs" "shadow/cljs/devtools/client/shared.cljs" "shadow/cljs/devtools/client/hud.cljs" "shadow/cljs/devtools/client/websocket.cljs" "shadow/cljs/devtools/client/browser.cljs" "forms.cljs" "shadow/module/forms/append.js"]}]