Add ui-tachyon component.

components/ui-tachyon/deps.edn

@@ -0,0 +1,4 @@
+{:paths ["src" "resources"]
+ :deps {}
+ :aliases {:test {:extra-paths ["test"]
+                  :extra-deps {}}}}

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)])

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))

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)))