Progressive enhancement, fixes and improvements

.gitignore

@@ -12,4 +12,6 @@ resources/public/ui
 .store
 out
 .#*
-*.local.*
+*.local.*
+uploads
+

resources/co/gaiwan/compass/config.edn

@@ -1,3 +1,4 @@
-{:port               8099
- :tito/event-slug    "heart-of-clojure/2024"
- :uploads/dir        "uploads"}
+{:port            8099
+ :tito/event-slug "heart-of-clojure/2024"
+ :uploads/dir     "uploads"
+ :dynamic-routes? false}

resources/co/gaiwan/compass/dev.edn

@@ -13,6 +13,7 @@
  :discord/ticket-roles       {"crew"    "1274001163754143886"
                               "sponsor" "1274001246390587514"
                               "speaker" "1274001093080383548"}
+ :dynamic-routes?            true
  ;; confgure locally
  ;; :discord/client-secret ""
  ;; :discord/bot-token ""

resources/co/gaiwan/compass/prod.edn

@@ -12,5 +12,5 @@
  ;; confgure locally
  ;; :discord/client-secret ""
  ;; :discord/bot-token ""
-
+ :uploads/dir "/home/compass/uploads"
  }

resources/co/gaiwan/compass/system.edn

@@ -1,2 +1,5 @@
-{:compass/http {:port #config :port}
- :compass/db   {:url #config :datomic/url}}
+{:compass/http   {:port #config :port
+                  :router #ig/ref :compass/router
+                  :dynamic? #config :dynamic-routes?}
+ :compass/router {:dynamic? #config :dynamic-routes?}
+ :compass/db     {:url #config :datomic/url}}

resources/public/css/styles.css

@@ -59,6 +59,14 @@ body #app >main {
   padding: var(--size-2);
 }
 
+@keyframes fade-to-pale {
+
+  to {
+    opacity: 1;
+  }
+
+}
+
 ul, ol {
   list-style-type: none;
   margin: var(--size-0);
@@ -86,11 +94,15 @@ body {
   font-family: Open Sans, sans-serif;
 }
 
-@keyframes fade-to-pale {
+@keyframes session-card-pulse {
 
-  to {
+0%, 100% {
     opacity: 1;
   }
+
+50% {
+    opacity: 0.5;
+  }
 
 }
 
@@ -178,6 +190,23 @@ body {
   font-size: var(--font-size-3);
 }
 
+.co_gaiwan_compass_html_layout__flash_box {
+  border-width: 1px;
+  padding-bottom: var(--size-2);
+  border-color: var(--green-2);
+  animation: fade-to-pale linear 0.5s forwards;
+  margin-top: var(--size-3);
+  margin-bottom: var(--size-3);
+  font-weight: 600;
+  background-color: var(--green-1);
+  padding-right: var(--size-3);
+  border-radius: var(--radius-2);
+  color: var(--blue-12);
+  padding-left: var(--size-3);
+  padding-top: var(--size-2);
+  opacity: 0.5;
+}
+
 .co_gaiwan_compass_html_auth__popup {
   display: flex;
   flex-direction: column;
@@ -334,10 +363,10 @@ body {
   --icon-color: var(--hoc-green);
 }
 
-.sessions-participate_btn {
-  --_bg: var(--surface-3);
-  --_border: none;
-  --_text: var(--text-2);
+.sessions-participate_btn input {
+  color: var(--text-2);
+  background-color: var(--surface-3);
+  border-radius: var(--radius-2);
 }
 
 .sessions-session_card_actions {
@@ -426,6 +455,11 @@ body {
   display: block;
 }
 
+.sessions-session_card.htmx-request .left, .sessions-session_card.htmx-request .details {
+  opacity: 0.5;
+  animation: session-card-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
 .sessions-session_detail .sessions-capacity_gauge {
   width: 100px;
 }
@@ -526,21 +560,4 @@ body {
   display: grid;
   grid-template-columns: 10rem 1fr;
   gap: var(--size-2);
-}
-
-.co_gaiwan_compass_html_layout__flash_box {
-  border-width: 1px;
-  padding-bottom: var(--size-2);
-  border-color: var(--green-2);
-  animation: fade-to-pale linear 0.5s forwards;
-  margin-top: var(--size-3);
-  margin-bottom: var(--size-3);
-  font-weight: 600;
-  background-color: var(--green-1);
-  padding-right: var(--size-3);
-  border-radius: var(--radius-2);
-  color: var(--blue-12);
-  padding-left: var(--size-3);
-  padding-top: var(--size-2);
-  opacity: 0.5;
 }

src/co/gaiwan/compass/html/components.clj

@@ -2,7 +2,8 @@
   "Generic components"
   (:require
    [co.gaiwan.compass.css.tokens :as t]
-   [lambdaisland.ornament :as o]))
+   [lambdaisland.ornament :as o]
+   [ring.middleware.anti-forgery :as anti-forgery]))
 
 (o/defprop --toggle-radius-left t/--radius-2)
 (o/defprop --toggle-radius-right t/--radius-2)
@@ -47,3 +48,14 @@
                            :id (name k)
                            :type "radio"
                            :checked? (= (:value props) k)) v])))
+
+(o/defstyled form
+  :form
+  ([props & children]
+   (into
+    [:<>
+     props
+     [:input {:type "hidden"
+              :name  "__anti-forgery-token"
+              :value anti-forgery/*anti-forgery-token*}]]
+    children)))

src/co/gaiwan/compass/html/layout.clj

@@ -3,6 +3,7 @@
    [charred.api :as charred]
    [co.gaiwan.compass.config :as config]
    [co.gaiwan.compass.css.tokens :as t]
+   [co.gaiwan.compass.html.auth :as auth]
    [co.gaiwan.compass.html.navigation :as nav]
    [lambdaisland.ornament :as o]
    [ring.middleware.anti-forgery :as anti-forgery]))
@@ -57,7 +58,11 @@
            :hx-disinherit "hx-target hx-select"
            ;; CSRF
            :hx-headers (charred/write-json-str {"x-csrf-token" anti-forgery/*anti-forgery-token*})}
-    [:dialog#modal {} "keepme"]
+    (if (get-in request [:query-params "show-login-dialog"])
+      [:dialog {:open true :style {:z-index 1}}
+       [auth/popup "/"]]
+      [:dialog#modal {}
+       "keepme"])
     [:div#app
      [nav/menu-panel user]
      [:main

src/co/gaiwan/compass/html/sessions.clj

@@ -4,8 +4,10 @@
   (:require
    [clojure.string :as str]
    [co.gaiwan.compass.css.tokens :as t :refer :all]
+   [co.gaiwan.compass.html.components :as c]
    [co.gaiwan.compass.html.filters :as filters]
    [co.gaiwan.compass.html.graphics :as graphics]
+   [co.gaiwan.compass.http.routing :refer [url-for]]
    [co.gaiwan.compass.model.session :as session]
    [java-time.api :as time]
    [lambdaisland.ornament :as o]
@@ -61,17 +63,23 @@
 
 (declare session-card)
 
-(o/defstyled participate-btn :button
-  {:--_bg t/--surface-3
-   :--_border "none"
-   :--_text t/--text-2}
+(o/defstyled participate-btn c/form
+  [:input {:color t/--text-2
+           :background-color t/--surface-3
+           :border-radius t/--radius-2}]
   ([session user]
-   [:<> {:hx-post (str "/sessions/" (:db/id session) "/participate")
-         :hx-indicator (str ".c" (:db/id session))
-         :hx-swap "none"}
-    (if (session/participating? session user)
-      "Leave"
-      "Join")]))
+   ;; Progressive enhancement, without htmx the form submission will kick in
+   [:<>
+    {:method "POST"
+     :action (str "/sessions/" (:db/id session) "/participate")}
+    [:input {:type "submit"
+             :hx-post (str "/sessions/" (:db/id session) "/participate")
+             :hx-indicator (str "closest ." session-card)
+             :hx-swap "none"
+             :value
+             (if (session/participating? session user)
+               "Leave"
+               "Join")}]]))
 
 (o/defstyled session-card-actions :nav
   :flex :justify-end :w-full
@@ -128,6 +136,10 @@
   [session-card-actions :text-right]
   [:.expansion {:display "none"}]
   [:&.expanded [:.expansion {:display "block"}]]
+  [:&.htmx-request
+   [#{:.left :.details}
+    {:opacity "0.5"
+     :animation "session-card-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite"}]]
   ([{:session/keys [type title subtitle organized time
                     location image participants duration
                     capacity signup-count] :as session}
@@ -148,8 +160,6 @@
      [participate-btn session user]]
 
     [:div.details
-     {:class ["session-card-pulse" (str "c" (:db/id session))]}
-
      [:h2.title
       [:a {:href (str "/sessions/" (:db/id session))}
        [:span.datetime
@@ -161,6 +171,12 @@
      [:div.loc (fmt-dur duration) " @ " (:location/name location)]
      #_[:p.host "Organized by " organized]]]))
 
+(o/defrules session-card-pulse
+  (garden.stylesheet/at-keyframes
+   :session-card-pulse
+   ["0%, 100%" {:opacity 1}]
+   ["50%" {:opacity 0.5}]))
+
 (o/defstyled attendee :li
   ([participant]
    ;; (prn "debug datatype " (type participant))
@@ -234,7 +250,7 @@
    [:at-media {:min-width "40rem"} {:font-size t/--font-size-5}]]
   ([{:keys [user sessions]}]
    [:<>
-    {:hx-get     "/sessions"
+    {:hx-get     (url-for :sessions/index)
      :hx-trigger "filters-updated from:body"
      :hx-swap    "outerHTML"
      :hx-select  "#sessions"
@@ -265,7 +281,7 @@
   ([user]
    [:<>
     [:h2 "Create Activity"]
-    [:form {:method "POST" :action "/sessions"
+    [:form {:method "POST" :action (url-for :session/save)
             :enctype "multipart/form-data"}
      [:input {:type "hidden" :name "organizer-id" :value (:db/id user)}]
      [:label {:for "title"} "Name of Your Activity"]
@@ -310,7 +326,7 @@
      [:input {:id "capacity" :name "capacity" :type "number"
               :min 2 :value 5 :required true}]
 
-     [:label {:for "description"} "Description"]
+     [:label {:for "description"} "Description (supports Markdown)"]
      [:textarea {:id "description" :name "description"}]
 
      [:label {:for "ticket"}

src/co/gaiwan/compass/http.clj

@@ -96,7 +96,7 @@
    {:data {:middleware [ex-mw]}
     :conflicts nil}))
 
-(defn handler []
+(defn handler [router]
   (ring/ring-handler
    (router)
    (default-handler {})
@@ -107,14 +107,24 @@
                  [ring-defaults/wrap-defaults ring-default-config]
                  middleware/wrap-identity
                  middleware/wrap-render
+                 middleware/wrap-hx-responses
                  #_handler
                  ;; ^^^^^^^  Response goes up
                  ]}))
 
-(defmethod ig/init-key :compass/http [_ {:keys [port]}]
+(defmethod ig/init-key :compass/router [_ {:keys [dynamic?]}]
+  (if dynamic?
+    router
+    (constantly (router))))
+
+(defmethod ig/init-key :compass/http [_ {:keys [port router dynamic?]}]
   (log/info :http/starting {:port port})
-  (jetty/run-jetty #((handler) %) {:port port
-                                   :join? false}))
+  (jetty/run-jetty
+   (if dynamic?
+     #((handler router) %)
+     (handler router))
+   {:port port
+    :join? false}))
 
 (defmethod ig/halt-key! :compass/http [_ http]
   (.stop http))

src/co/gaiwan/compass/http/middleware.clj

@@ -3,6 +3,7 @@
    [clojure.string :as str]
    [co.gaiwan.compass.db :as db]
    [co.gaiwan.compass.html.layout :as layout]
+   [co.gaiwan.compass.http.routing :as routing]
    [lambdaisland.hiccup :as hiccup]
    [reitit.ring :as ring]))
 
@@ -54,7 +55,9 @@
             (assoc-in [:headers "content-type"] "text/html; charset=utf-8"))
         res))))
 
-(defn wrap-identity [handler]
+(defn wrap-identity
+  "Make `:identity` available in the request map when a user is logged in."
+  [handler]
   (fn [req]
     (handler
      (if-let [uuid (get-in req [:session :identity])]
@@ -65,3 +68,37 @@
                                (db/db)
                                uuid)))
        req))))
+
+(defn wrap-hx-responses
+  "Recognize certain keys and use them to generate HTMX-specific responses.
+
+  Currently handles:
+  - :hx/trigger - emit a HX-Trigger header
+  - :location - emit a HX-Redirect or Location header
+
+  Will recognize if a request came from HTMX, and respond accordingly. This
+  means that you can have both a :hx/trigger and a :location. In the case of a
+  HTMX request the hx-trigger will be used, in the case of a regular HTTP
+  request a redirect is returned.
+  "
+  [handler]
+  (fn [req]
+    (let [hx-request? (get-in req [:headers "hx-request"])]
+      (let [resp (handler req)]
+        (cond
+          (and hx-request? (:hx/trigger resp))
+          (-> resp
+              (assoc
+                :status (:status resp 200)
+                :body (:body resp ""))
+              (assoc-in [:headers "hx-trigger"] (:hx/trigger resp)))
+
+          (:location resp)
+          (-> resp
+              (assoc
+                :status (:status resp 302)
+                :body (:body resp ""))
+              (assoc-in [:headers (if hx-request? "hx-redirect" "location")] (routing/url-for (:location resp))))
+
+          :else
+          resp)))))