From 994b67b4f2824866fabc87be9854556eaddbfbaf Mon Sep 17 00:00:00 2001 From: Oliver Date: Wed, 5 Aug 2026 08:59:25 +0100 Subject: [PATCH] Add ui-tachyon component. --- components/ui-tachyon/deps.edn | 4 + .../com/oly/static_sites/ui_tachyon/core.cljc | 84 +++++++++++++++++++ .../static_sites/ui_tachyon/interface.cljc | 32 +++++++ .../ui_tachyon/interface_test.clj | 5 ++ 4 files changed, 125 insertions(+) create mode 100644 components/ui-tachyon/deps.edn create mode 100644 components/ui-tachyon/src/com/oly/static_sites/ui_tachyon/core.cljc create mode 100644 components/ui-tachyon/src/com/oly/static_sites/ui_tachyon/interface.cljc create mode 100644 components/ui-tachyon/test/com/oly/static_sites/ui_tachyon/interface_test.clj diff --git a/components/ui-tachyon/deps.edn b/components/ui-tachyon/deps.edn new file mode 100644 index 0000000..28d4733 --- /dev/null +++ b/components/ui-tachyon/deps.edn @@ -0,0 +1,4 @@ +{:paths ["src" "resources"] + :deps {} + :aliases {:test {:extra-paths ["test"] + :extra-deps {}}}} diff --git a/components/ui-tachyon/src/com/oly/static_sites/ui_tachyon/core.cljc b/components/ui-tachyon/src/com/oly/static_sites/ui_tachyon/core.cljc new file mode 100644 index 0000000..26b7698 --- /dev/null +++ b/components/ui-tachyon/src/com/oly/static_sites/ui_tachyon/core.cljc @@ -0,0 +1,84 @@ +(ns com.oly.static-sites.ui-tachyon.core + (:require [clojure.string :as str])) + +(defn slugify [s] + (when s + (-> s str/lower-case (str/replace #"[^\w]+" "-") (str/replace #"^-+|-+$" "")))) + +(defn navbar-link [{:keys [href title text key] :or {text nil title nil}}] + [:a.link.m-2 {:key (or key href) :class "hover:text-grey-200" :href href :title title} text]) + +(defn navbar [links] + [:header.text-white.bg-zinc-900.p-6.pl-12.w-full + (into [:nav.uppercase.font-medium.text-sm] (mapv navbar-link links))]) + +(defn footer [] + [:footer.bg-zinc-800.text-slate-400.p-8.m-auto.w-full + [:div.m-auto {:class "w-4/5"} + [:a.hover:text-slate-200 + {:target "_blank" :href "https://matrix.to/#/@oly:matrix.org"} + "Contact me"]]]) + +(defn article-card [{:keys [title description img-src]}] + [:article.bt.bb.b--black-10.border-b-2 + [:a {:href "#"} + [:div.flex.flex-column.flex-row-ns.p-4 + (when img-src + [:div.flex-none.w-32 + [:img.w-32.block {:src img-src :alt title}]]) + [:div.ml-4.flex-grow + [:h1.text-2xl title] + [:p description]]]]]) + +(defn articles-list [{:keys [title articles]}] + (into [:section.mw7.center.avenir + [:h2.text-4xl.mt-4.mb-4 title]] + (mapv article-card articles))) + +(defn grouped-articles-list [{:keys [title groups]}] + (into [:section.mw7.center.avenir + [:h2.text-4xl.mt-4.mb-4 title]] + (mapcat (fn [{:keys [title articles]}] + (cons [:h3.text-2xl.mt-8.mb-2.font-semibold title] + (map article-card articles))) + groups))) + +(defn notification [] + [:div.fixed.p-5.top-20.right-0.border-2.border-sky-400.bg-white.opacity-100 + "Copied to clipboard"]) + +(defn header-with-link [text level] + (let [tag (case level 1 :h1 2 :h2 3 :h3) + class (case level + 1 "text-2xl fw6 lh-title mt-0 mb-2" + 2 "text-xl fw6 lh-title mt-0 mb-2" + "text-base fw6 lh-title mt-0 mb-2")] + [tag {:id (slugify text) :class class} + [:i.fa-solid.fa-link.mr-2] + text])) + +(defn full-page [] + [:div + (navbar [{:href "/" :text "Home"} + {:href "/dialects" :text "Dialects"} + {:href "/dsl" :text "DSLs"} + {:href "/examples" :text "Examples"} + {:href "/about" :text "About"}]) + [:main.m-auto {:class "w-3/5"} + (header-with-link "Clojure Demos Overview" 1) + (articles-list + {:title "Clojure Demos" + :articles [{:title "Clojure Basics" + :description "Getting started with clojure syntax datatype's sequences conditions" + :img-src "https://clojure.org/images/clojure-logo-120b.png"} + {:title "Reagent Demo" + :description "React application using reagent" + :img-src "https://raw.githubusercontent.com/reagent-project/reagent/master/logo/logo-text.png"} + {:title "Honey SQL Demo" + :description "Build SQL queries with Clojure data structures" + :img-src "https://miro.medium.com/max/1400/1*CEYFj5R57UFyCXts2nsBqA.png"}]}) + (header-with-link "Interactive Examples" 2) + [:p.mb-2 "The code in these examples is evaluated when modified, you can highlight a partial expression to evaluate the selection."] + (header-with-link "Getting Started" 3) + [:p.mb-2 "Clojure is a modern, functional, and dynamic dialect of the Lisp programming language on the Java platform."]] + (footer)]) diff --git a/components/ui-tachyon/src/com/oly/static_sites/ui_tachyon/interface.cljc b/components/ui-tachyon/src/com/oly/static_sites/ui_tachyon/interface.cljc new file mode 100644 index 0000000..f977337 --- /dev/null +++ b/components/ui-tachyon/src/com/oly/static_sites/ui_tachyon/interface.cljc @@ -0,0 +1,32 @@ +(ns com.oly.static-sites.ui-tachyon.interface + (:require [com.oly.static-sites.ui-tachyon.core :as core])) + +(defn slugify [s] + (core/slugify s)) + +(defn navbar-link [opts] + (core/navbar-link opts)) + +(defn navbar [links] + (core/navbar links)) + +(defn footer [] + (core/footer)) + +(defn article-card [opts] + (core/article-card opts)) + +(defn articles-list [opts] + (core/articles-list opts)) + +(defn grouped-articles-list [opts] + (core/grouped-articles-list opts)) + +(defn notification [] + (core/notification)) + +(defn header-with-link [text level] + (core/header-with-link text level)) + +(defn full-page [] + (core/full-page)) diff --git a/components/ui-tachyon/test/com/oly/static_sites/ui_tachyon/interface_test.clj b/components/ui-tachyon/test/com/oly/static_sites/ui_tachyon/interface_test.clj new file mode 100644 index 0000000..bfaf0dc --- /dev/null +++ b/components/ui-tachyon/test/com/oly/static_sites/ui_tachyon/interface_test.clj @@ -0,0 +1,5 @@ +(ns com.oly.static-sites.ui-tachyon.interface-test + (:require [clojure.test :refer :all])) + +(deftest component-exists + (is (true? true)))