diff --git a/resources/co/gaiwan/compass/config.edn b/resources/co/gaiwan/compass/config.edn index 7843864..b20ef25 100644 --- 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 index 4df5503..8440594 100644 --- 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); } \ No newline at end of file diff --git a/resources/public/hoc-logo-2024-avatar.png b/resources/public/hoc-logo-2024-avatar.png new file mode 100644 index 0000000..d7e85cc Binary files /dev/null and b/resources/public/hoc-logo-2024-avatar.png differ diff --git a/src/co/gaiwan/compass.clj b/src/co/gaiwan/compass.clj index e3a801d..03eff41 100644 --- 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 index 1259385..980bc92 100644 --- 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 index 7cc5165..634eec7 100644 --- 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 index d71fc32..66360b9 100644 --- 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 index 5c009a1..1318144 100644 --- 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 index 74443a3..ad967ae 100644 --- 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 index 2f4fe00..b200b2e 100644 --- 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]