Add fallback image

GaiwanTeam · Aug 28, 2024 · caae1bf · caae1bf
1 parent 5b9a1a7
commit caae1bf
Show file tree

Hide file tree

Showing 10 changed files with 102 additions and 91 deletions.
diff --git a/resources/co/gaiwan/compass/config.edn b/resources/co/gaiwan/compass/config.edn
@@ -1,6 +1,8 @@
-{:port            8099
- :tito/event-slug "heart-of-clojure/2024"
- :uploads/dir     "uploads"
- :dynamic-routes? false
+{:port                       8099
+ :tito/event-slug            "heart-of-clojure/2024"
+ :uploads/dir                "uploads"
+ :http/asset-path            "/uploads"
+ :dynamic-routes?            false
  :tito/sync-interval-seconds 900 ;; every 15 minutes
+ :image/fallback             "/hoc-logo-2024-avatar.png"
  }
diff --git a/resources/public/css/styles.css b/resources/public/css/styles.css
@@ -42,6 +42,13 @@
 
 }
 
+.notifier-dot {
+  border-radius: 9999px;
+  background-color: var(--red-8);
+  width: 0.6rem;
+  height: 0.6rem;
+}
+
 body.menu-open .co_gaiwan_compass_html_navigation__menu_panel {
   transform: translate(0, 0);
 }
@@ -113,13 +120,6 @@ body {
   font-family: Open Sans, sans-serif;
 }
 
-.notifier-dot {
-  border-radius: 9999px;
-  background-color: var(--red-8);
-  width: 0.6rem;
-  height: 0.6rem;
-}
-
 .graphics-compass_logo path {
   fill: var(--hoc-pink);
 }
@@ -152,6 +152,29 @@ body {
   animation: dash 1s linear forwards;
 }
 
+.co_gaiwan_compass_html_auth__discord_button {
+  padding-bottom: var(--size-3);
+  --_ink-shadow: none;
+  text-align: center;
+  margin-bottom: var(--size-4);
+  background-color: #7289da;
+  padding-right: var(--size-4);
+  border-radius: var(--radius-2);
+  color: var(--gray-0);
+  padding-left: var(--size-4);
+  padding-top: var(--size-3);
+}
+
+.co_gaiwan_compass_html_auth__discord_button:hover {
+  text-decoration: none;
+}
+
+.co_gaiwan_compass_html_auth__discord_button .graphics-discord {
+  height: 2rem;
+  width: 2rem;
+  --_logo-color: var(--gray-0);
+}
+
 .co_gaiwan_compass_html_auth__popup {
   display: flex;
   flex-direction: column;
@@ -177,6 +200,47 @@ body {
   --_icon-color: var(--text-1);
 }
 
+.co_gaiwan_compass_html_components__toggle_button {
+  color: var(--text-2);
+}
+
+.co_gaiwan_compass_html_components__toggle_button input {
+  display: none;
+}
+
+.co_gaiwan_compass_html_components__toggle_button >.btn {
+  width: 100%;
+  border-top-left-radius: var(--co-gaiwan-compass-html-components--toggle-radius-left);
+  border-bottom-left-radius: var(--co-gaiwan-compass-html-components--toggle-radius-left);
+  border-top-right-radius: var(--co-gaiwan-compass-html-components--toggle-radius-right);
+  border-bottom-right-radius: var(--co-gaiwan-compass-html-components--toggle-radius-right);
+}
+
+.co_gaiwan_compass_html_components__toggle_button input:checked ~ .btn {
+  font-weight: 600;
+  color: var(--text-1);
+  background-color: var(--highlight);
+}
+
+.co_gaiwan_compass_html_components__toggle_group {
+  display: flex;
+  flex-direction: row;
+  --co-gaiwan-compass-html-components--toggle-radius-left: 0;
+  --co-gaiwan-compass-html-components--toggle-radius-right: 0;
+}
+
+.co_gaiwan_compass_html_components__toggle_group :first-child > .btn {
+  --co-gaiwan-compass-html-components--toggle-radius-left: 0.5em;
+}
+
+.co_gaiwan_compass_html_components__toggle_group :last-child > .btn {
+  --co-gaiwan-compass-html-components--toggle-radius-right: 0.5em;
+}
+
+.co_gaiwan_compass_html_components__avatar {
+  border-radius: 9999px;
+}
+
 .co_gaiwan_compass_html_navigation__nav_bar {
   display: flex;
   align-items: center;
@@ -303,43 +367,6 @@ body {
   opacity: 0.5;
 }
 
-.co_gaiwan_compass_html_components__toggle_button {
-  color: var(--text-2);
-}
-
-.co_gaiwan_compass_html_components__toggle_button input {
-  display: none;
-}
-
-.co_gaiwan_compass_html_components__toggle_button >.btn {
-  width: 100%;
-  border-top-left-radius: var(--co-gaiwan-compass-html-components--toggle-radius-left);
-  border-bottom-left-radius: var(--co-gaiwan-compass-html-components--toggle-radius-left);
-  border-top-right-radius: var(--co-gaiwan-compass-html-components--toggle-radius-right);
-  border-bottom-right-radius: var(--co-gaiwan-compass-html-components--toggle-radius-right);
-}
-
-.co_gaiwan_compass_html_components__toggle_button input:checked ~ .btn {
-  font-weight: 600;
-  color: var(--text-1);
-  background-color: var(--highlight);
-}
-
-.co_gaiwan_compass_html_components__toggle_group {
-  display: flex;
-  flex-direction: row;
-  --co-gaiwan-compass-html-components--toggle-radius-left: 0;
-  --co-gaiwan-compass-html-components--toggle-radius-right: 0;
-}
-
-.co_gaiwan_compass_html_components__toggle_group :first-child > .btn {
-  --co-gaiwan-compass-html-components--toggle-radius-left: 0.5em;
-}
-
-.co_gaiwan_compass_html_components__toggle_group :last-child > .btn {
-  --co-gaiwan-compass-html-components--toggle-radius-right: 0.5em;
-}
-
 .filters-filter_section {
   display: flex;
   flex-wrap: wrap;
@@ -641,31 +668,4 @@ body {
 .sessions-session_form div.date-time {
   display: flex;
   gap: var(--size-2);
-}
-
-.co_gaiwan_compass_html_components__avatar {
-  border-radius: 9999px;
-}
-
-.co_gaiwan_compass_html_auth__discord_button {
-  padding-bottom: var(--size-3);
-  --_ink-shadow: none;
-  text-align: center;
-  margin-bottom: var(--size-4);
-  background-color: #7289da;
-  padding-right: var(--size-4);
-  border-radius: var(--radius-2);
-  color: var(--gray-0);
-  padding-left: var(--size-4);
-  padding-top: var(--size-3);
-}
-
-.co_gaiwan_compass_html_auth__discord_button:hover {
-  text-decoration: none;
-}
-
-.co_gaiwan_compass_html_auth__discord_button .graphics-discord {
-  height: 2rem;
-  width: 2rem;
-  --_logo-color: var(--gray-0);
 }
diff --git a/resources/public/hoc-logo-2024-avatar.png b/resources/public/hoc-logo-2024-avatar.png
diff --git a/src/co/gaiwan/compass.clj b/src/co/gaiwan/compass.clj
@@ -49,7 +49,8 @@
   ([]
    (set-prep! :default))
   ([profile]
-   (ig-repl/set-prep! #(doto (ig-config profile) ig/load-namespaces))))
+   (ig-repl/set-prep! #(doto (ig-config profile) ig/load-namespaces))
+   (co.gaiwan.compass.css/spit-styles)))
 
 (defn- add-shutdown-hook [f]
   (.addShutdownHook (java.lang.Runtime/getRuntime) (Thread. f)))

diff --git a/src/co/gaiwan/compass/html/components.clj b/src/co/gaiwan/compass/html/components.clj
@@ -60,7 +60,7 @@
               :value anti-forgery/*anti-forgery-token*}]]
     children)))
 
-(o/defstyled avatar :img
+(o/defstyled avatar :div.img
   :rounded-full
-  ([css-val]
-   [:<> {:src css-val}]))
+  ([image]
+   [:<> {:style {:background-image image}}]))
diff --git a/src/co/gaiwan/compass/html/layout.clj b/src/co/gaiwan/compass/html/layout.clj
@@ -8,6 +8,8 @@
    [lambdaisland.ornament :as o]
    [ring.middleware.anti-forgery :as anti-forgery]))
 
+(require 'co.gaiwan.compass.css.components)
+
 (o/defrules layout
   [:body
    {:max-width "100vw"}

diff --git a/src/co/gaiwan/compass/html/navigation.clj b/src/co/gaiwan/compass/html/navigation.clj
@@ -78,7 +78,7 @@
      [:div.user
       (when user
         [:<>
-         [c/avatar (assets/asset-url (:public-profile/avatar-url user))]
+         [c/avatar (user/avatar-css-value user)]
          "Signed in as " (:public-profile/name user) "." [:a {:href "/logout"} "Sign out"]])]
      [:button {:cx-toggle "menu-open" :cx-target "body"}
       [graphics/cross]]]

diff --git a/src/co/gaiwan/compass/model/assets.clj b/src/co/gaiwan/compass/model/assets.clj
@@ -3,7 +3,19 @@
    [clojure.string :as str]
    [co.gaiwan.compass.config :as config]))
 
-(defn asset-url [url]
-  (if (str/starts-with? url "http")
+(defn image-url
+  "Coerce to a valid image URL
+  - blank/nil - show fallback image
+  - absolute (or scheme-relative) - keep as is
+  - relative - prefix with asset-path, which should match your web server config"
+  [url]
+  (cond
+    (str/blank? url)
+    (config/value :image/fallback)
+
+    (or (str/starts-with? url "http")
+        (str/starts-with? url "//"))
     url
-    (str (config/value :uploads/dir) "/" url)))
+
+    :else
+    (str (config/value :http/asset-path) "/" url)))
diff --git a/src/co/gaiwan/compass/model/session.clj b/src/co/gaiwan/compass/model/session.clj
@@ -115,10 +115,4 @@
    (merge default-filters filters)))
 
 (defn session-image-css-value [session]
-  (if-let [url (:session/image session)]
-    (let [asset-url (assets/asset-url url)
-          asset-url (if (str/starts-with? asset-url "http")
-                      asset-url
-                      (str "/" asset-url))]
-      (str "url(" asset-url ")"))
-    (str "var(--gradient-" (inc (mod (:db/id session) 7)) ")")))
+  (str "url(" (assets/image-url (:session/image session)) ")"))
diff --git a/src/co/gaiwan/compass/model/user.clj b/src/co/gaiwan/compass/model/user.clj
@@ -29,7 +29,7 @@
 
 (defn avatar-css-value [user]
   (if-let [url (:public-profile/avatar-url user)]
-    (str "url(" (assets/asset-url url) ")")
+    (str "url(" (assets/image-url url) ")")
     (str "var(--gradient-" (inc (mod (:db/id user) 7)) ")")))
 
 (defn download-avatar [url]