Updates to use tailwind.
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
db678833fc
commit
da51aadd6a
|
|
@ -8,13 +8,18 @@
|
|||
content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
|
||||
/>
|
||||
<title>Clojure demos</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Examples & Guides on using various libraries and technologies with in the clojure eco system's"
|
||||
/>
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"
|
||||
href="ohttps://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"
|
||||
/>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Roboto&display=swap"
|
||||
rel="stylesheet"
|
||||
|
|
@ -109,7 +114,7 @@
|
|||
</script>
|
||||
</head>
|
||||
|
||||
<body class="f5 sans-serif">
|
||||
<body>
|
||||
<div id="app">loading here</div>
|
||||
<script
|
||||
src="/cljs-out/main_bundle.js"
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
[sci.configs.reagent.reagent :as sci-reagent]
|
||||
[sci.configs.tonsky.datascript :as sci-datascript]
|
||||
[sci.core :as sci]
|
||||
[clojure-demo.tailwind-theme :refer [tailwind-theme]]
|
||||
[spec-tools.data-spec :as ds]))
|
||||
|
||||
(def languages
|
||||
|
|
@ -106,8 +107,6 @@
|
|||
children
|
||||
;(into [:<>] children)
|
||||
))})))
|
||||
|
||||
|
||||
(defn code-editor
|
||||
[{:keys [exports class results]} content]
|
||||
(let [language class
|
||||
|
|
@ -148,7 +147,7 @@
|
|||
:component-will-unmount (fn [_] (.destroy @view))
|
||||
:reagent-render (fn []
|
||||
(if exports
|
||||
nil ;[:<>]
|
||||
nil
|
||||
[:div.mb2
|
||||
[:div.ba.ma0.f5.b--black-05.pa2.overflow-auto.editor {:ref #(reset! editor %)}]
|
||||
(when @evaled-result
|
||||
|
|
@ -163,7 +162,7 @@
|
|||
"silent" ""
|
||||
@evaled-result)]])]))})))
|
||||
|
||||
(def theme
|
||||
(def theme-tachyon
|
||||
(merge tachyon-theme
|
||||
{:SRC code-editor
|
||||
:HEADER1 (fn [v _] [:h1.f2.fw6.f3-ns.lh-title.mt0.mb2 {:id (slugify v)} [:a {:name (slugify v)} v]])
|
||||
|
|
@ -173,7 +172,17 @@
|
|||
:BULLETS :ul.mt0
|
||||
:LINK :a #_link-handler}))
|
||||
|
||||
(def theme-toc
|
||||
(def theme
|
||||
(merge tailwind-theme
|
||||
{:SRC code-editor
|
||||
:HEADER1 (fn [v _] [:h1.text-2xl.fw6.lh-title.mt0.mb2 {:id (slugify v)} [:a {:name (slugify v)} v]])
|
||||
:HEADER2 (fn [v _] [:h2.text-xl.fw6.lh-title.mt0.mb2 {:id (slugify v)} [:a {:name (slugify v)} v]])
|
||||
:HEADER3 (fn [v _] [:h2.text-base.lh-title.mt0.mb2 {:id (slugify v)} [:a {:name (slugify v)} v]])
|
||||
:LINE :p.f5.f5-ns.lh-copy.mt0
|
||||
:BULLETS :ul.mt0
|
||||
:LINK :a #_link-handler}))
|
||||
|
||||
(def theme-toc-tachyon
|
||||
(merge tachyon-theme
|
||||
{:HEADER1 (fn [v _] [:li [:a {:href (str "#" (slugify v))}
|
||||
[:span.f4.fw6.f3-ns.lh-title.mt0.mb2 v]]])
|
||||
|
|
@ -188,6 +197,21 @@
|
|||
:HEADER6 (fn [v _] [:li.ml10 [:a {:href (str "#" (slugify v))}
|
||||
[:span.f6.fw6.f5-ns.lh-title.mt0.mb2 v]]])}))
|
||||
|
||||
(def theme-toc
|
||||
(merge tailwind-theme
|
||||
{:HEADER1 (fn [v _] [:li [:a {:href (str "#" (slugify v))}
|
||||
[:span.text-xl.fw6.lh-title.mt0.mb2 v]]])
|
||||
:HEADER2 (fn [v _] [:li.ml-4 [:a {:href (str "#" (slugify v))}
|
||||
[:span.text-lg.fw6.lh-title.mt0.mb2 v]]])
|
||||
:HEADER3 (fn [v _] [:li.ml-8 [:a {:href (str "#" (slugify v))}
|
||||
[:span.text-base.fw6.lh-title.mt0.mb2 v]]])
|
||||
:HEADER4 (fn [v _] [:li.ml-12 [:a {:href (str "#" (slugify v))}
|
||||
[:span.text-sm.fw6.lh-title.mt0.mb2 v]]])
|
||||
:HEADER5 (fn [v _] [:li.ml-26 [:a {:href (str "#" (slugify v))}
|
||||
[:span.text-xs.fw6.f5-ns.lh-title.mt0.mb2 v]]])
|
||||
:HEADER6 (fn [v _] [:li.ml-30 [:a {:href (str "#" (slugify v))}
|
||||
[:span.text-xs.fw6.f5-ns.lh-title.mt0.mb2 v]]])}))
|
||||
|
||||
;; put constant data here
|
||||
(def site-data
|
||||
{:homepage {:intro "Clojure tutorials examples and exploration"}
|
||||
|
|
@ -198,16 +222,38 @@
|
|||
:key ::dialects
|
||||
:demos [{:title "Clojure"
|
||||
:description "The original language running on the jvm with access to the java eco system"
|
||||
:icon-image "https://clojure.org/images/clojure-logo-120b.png"
|
||||
:page "clojure-info"}
|
||||
{:title "Clojurescript"
|
||||
:description "Clojure running in the browser or on top of node, with access to the js eco system."
|
||||
:icon-image "https://clojurescript.org/images/cljs-logo-60b.png"
|
||||
:page "clojurescript-info"}
|
||||
{:title "ClojureCLR"
|
||||
:description "Clojure running on microsofts CLR with access to .net ecosystem"
|
||||
:icon-image "https://clojure.org/images/clojure-logo-120b.png"
|
||||
|
||||
:page "clojureclr-info"}
|
||||
{:title "ClojureDart"
|
||||
:description "Clojure for dart, use clojure to build apps using flutter"
|
||||
:page "clojuredart-info"}]}
|
||||
:dsl {:title "DSL's"
|
||||
:key ::dsl
|
||||
:intro "A domain-specific language (DSL) is a language designed to be used for a specific task or domain, clojure has a rich set of DSL some popular DSL's are listed on this page with example's on usage. "
|
||||
:demos [{:title "Hiccup HTML Demo"
|
||||
:page "hiccup-dsl-demo"
|
||||
:description "Hiccup is a DSL for generating HTML it uses data structures over strings to generate html, this makes it far easier to dynamically generate html by using the language constructs to manipulate the tree."
|
||||
; :link (rfe/href ::demo {:page "hiccup-dsl-demo"})
|
||||
:icon-image "https://miro.medium.com/max/1400/1*CEYFj5R57UFyCXts2nsBqA.png"}
|
||||
{:title "Honey SQL Demo"
|
||||
:page "honey-sql-demo"
|
||||
:description "Similar to honey but for SQL allows you to split apart your complex queries into parts and compose them together."
|
||||
; :link (rfe/href ::demo {:page "honey-dsl-demo"})
|
||||
:icon-image "https://miro.medium.com/max/1400/1*CEYFj5R57UFyCXts2nsBqA.png"}
|
||||
{:title "Datalog Demo"
|
||||
:page "datalog-demo"
|
||||
:description "Datalog is a popular DSL with in the clojure for querying deductive database system's"
|
||||
; :link (rfe/href ::demo {:page "datalog-demo"})
|
||||
:icon-image "https://raw.githubusercontent.com/tonsky/datascript/master/extras/logo.svg"}]}
|
||||
:devops {:title "Deployment & testing"
|
||||
:intro "Running, Testing and deploying your software in a CI pipeline"
|
||||
:key ::devops
|
||||
|
|
@ -222,21 +268,7 @@
|
|||
:terminology {:title "Terminology"
|
||||
:intro ""
|
||||
:key ::terminology}
|
||||
:dsl {:title "DSL's"
|
||||
:key ::dsl
|
||||
:intro "A domain-specific language (DSL) is a language designed to be used for a specific task or domain, clojure has a rich set of DSL some popular DSL's are listed on this page with example's on usage. "
|
||||
:demos [{:title "Hiccup HTML Demo"
|
||||
:page "hiccup-dsl-demo"
|
||||
; :link (rfe/href ::demo {:page "hiccup-dsl-demo"})
|
||||
:icon-image "https://miro.medium.com/max/1400/1*CEYFj5R57UFyCXts2nsBqA.png"}
|
||||
{:title "Honey SQL Demo"
|
||||
:page "honey-sql-demo"
|
||||
; :link (rfe/href ::demo {:page "honey-dsl-demo"})
|
||||
:icon-image "https://miro.medium.com/max/1400/1*CEYFj5R57UFyCXts2nsBqA.png"}
|
||||
{:title "Datalog Demo"
|
||||
:page "datalog-demo"
|
||||
; :link (rfe/href ::demo {:page "datalog-demo"})
|
||||
:icon-image "https://raw.githubusercontent.com/tonsky/datascript/master/extras/logo.svg"}]}}
|
||||
}
|
||||
:demos
|
||||
{:hiccup-dsl-demo
|
||||
{:file "documents/hiccup-dsl-demo.org" :git-link "https://github.com/atomjuice/dsl-demo"}
|
||||
|
|
@ -270,49 +302,44 @@
|
|||
;; form one component to render article tiles
|
||||
(defn articles [{:keys [title body articles]}]
|
||||
[:section.mw7.center.avenir
|
||||
[:h2.baskerville.fw1.ph3.ph0-l title]
|
||||
(when body [:p body])
|
||||
[:h2.text-4xl.mt-4.mb-4 title]
|
||||
(when body [:p.mb-8 body])
|
||||
(map (fn [{:keys [title author link description img-src img-alt]}]
|
||||
[:article.bt.bb.b--black-10 {:key title}
|
||||
[:a.db.pv4.ph3.ph0-l.no-underline.black.dim {:href link}
|
||||
[:div.flex.flex-column.flex-row-ns
|
||||
[:a {:href link}
|
||||
[:div.flex.flex-column.flex-row-ns.p-4
|
||||
(when img-src
|
||||
[:div.pr3-ns.mb4.mb0-ns.w-100.w-40-ns
|
||||
[:img.db {:src img-src :alt img-alt}]])
|
||||
[:div.w-100.w-60-ns.pl3-ns
|
||||
[:h1.f3.fw1.baskerville.mt0.lh-title title]
|
||||
[:p.f6.f5-l.lh-copy description]
|
||||
[:p.f6.lh-copy.mv0 author]]]]])
|
||||
[:div.flex-none #_{:class "w-1/3"}
|
||||
[:img.w-48 #_h-24.block {:src img-src :alt img-alt}]])
|
||||
|
||||
[:div.ml-4.flex-grow #_{:class "w-2/3"}
|
||||
[:h1.text-2xl title]
|
||||
[:p description]
|
||||
[:p author]]]]])
|
||||
articles)])
|
||||
|
||||
|
||||
(defn circle [{:keys [img alt]}]
|
||||
[:div.pa4.tc [:img.br-100.ba.h3.w3.dib {:src img :alt alt}]])
|
||||
|
||||
;; form one component to render a nav link
|
||||
(defn navbar-link [{:keys [href title text key] :or {text nil title nil}}]
|
||||
[:a.link.dim.white.dib.mr3 {:key (or key href) :href href :title title} text])
|
||||
[:a.link.m-2 {:key (or key href) :class "hover:text-grey-200" :href href :title title} text])
|
||||
|
||||
;; form one component to render a navbar
|
||||
(defn navbar [links]
|
||||
[:header.bg-black-90.w-100.ph3.pv3.pv4-ns.ph4-m.ph5-l
|
||||
[:header.text-white.bg-zinc-900.p-6.pl-12.w-full
|
||||
(into [:nav.uppercase.font-medium.text-sm] (mapv navbar-link links))]
|
||||
#_[:header.bg-black-90.w-100.ph3.pv3.pv4-ns.ph4-m.ph5-l
|
||||
(into [:nav.f6.fw6.ttu.tracked] (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"]]]
|
||||
#_[:div
|
||||
[:footer.bg-near-black.white-80.pv4.ph3.ph5-m.ph6-l.mid-gray.w-full
|
||||
[:a.f6.dib.ph2.link.mid-gray.dim
|
||||
{:target "_blank" :href "https://matrix.to/#/@oly:matrix.org"}
|
||||
"Contact me"]])
|
||||
|
||||
;; form2 component notice the render function takes the same param as the component function
|
||||
;; this is important, you can hit issues if you forget this in form 2 components.
|
||||
(defn my-component [title value]
|
||||
(let [local-state (reagent/atom value)]
|
||||
(fn [title]
|
||||
[:h1 {:class (when @local-state "hide")
|
||||
:on-click (fn [] (swap! local-state inc))} (str title " " @local-state)])))
|
||||
|
||||
;; form one homepage component
|
||||
"Contact me"]]])
|
||||
|
||||
(defn home-page []
|
||||
[:<>
|
||||
|
|
@ -345,12 +372,7 @@
|
|||
|
||||
(defn dialects-page [route]
|
||||
[:<>
|
||||
[grouped-page route #_ (keyword (name (:name (:data route))))]])
|
||||
|
||||
#_(defn dsl-page [route]
|
||||
[:<>
|
||||
[grouped-page route]
|
||||
])
|
||||
[grouped-page route #_(keyword (name (:name (:data route))))]])
|
||||
|
||||
(def toc (partial contains? (into #{} (map keyword [:HEADER1 :HEADER2 :HEADER3 :HEADER4 :HEADER5 :HEADER6]))))
|
||||
(def org-code (partial contains? (into #{} (map keyword [:SRC]))))
|
||||
|
|
@ -378,45 +400,9 @@
|
|||
:code (filter (fn filter-code [tag] (org-code (first tag))) dsl)
|
||||
:body (filter (fn filter-body [tag] (body (first tag))) dsl)})
|
||||
|
||||
;; form two component render demo
|
||||
;;(h/org->split (parse document1))
|
||||
(defn demo-page [route]
|
||||
(let [demo-key (keyword (-> route :parameters :path :page))
|
||||
content (reagent/atom {})]
|
||||
(GET (str "/" (-> site-data :demos demo-key :file))
|
||||
{:response-format (raw-response-format)
|
||||
:handler (fn [response]
|
||||
;;(prn (org->replacements theme (parse response) ))
|
||||
;;[:LINE "" [:LINK {:href "https://github.com/weavejester/hiccup"} "https://github.com/weavejester/hiccup"]]
|
||||
(->> response
|
||||
parse
|
||||
org->split2
|
||||
(reset! content)))})
|
||||
|
||||
(fn [route]
|
||||
(if @content
|
||||
[:main.mt4.mw7.center.avenir
|
||||
[:h1.f3.f2-ns (:content (last (first (:header @content))))]
|
||||
[:div.mw7.center.avenir
|
||||
(into [:ol] (org->replacements theme-toc (:toc @content)))]
|
||||
[:p "The code in these examples is evaluated when modified, you can highlight a partial expression to evalute the selection, You can also download the code as a tar if you like and use it in your favourite editor."]
|
||||
[:a.f6.link.dim.ph3.pv2.mb2.dib.white.bg-dark-blue
|
||||
{:download (str (slugify (:content (last (first (:header @content))))) ".tar")
|
||||
:title (:content (last (first (:header @content))))
|
||||
:href (.createObjectURL
|
||||
js/URL
|
||||
(js/Blob. #js [(build-file-tar-hm
|
||||
(build-tarts-map
|
||||
(:code @content)))]
|
||||
{:type "application/tar"}))}
|
||||
"Download Code"]
|
||||
[:div.mw7.center.avenir
|
||||
(into [:div] (org->replacements theme (:body @content)))]]
|
||||
[:<>]))))
|
||||
|
||||
;; form one render about page component
|
||||
(defn about-page []
|
||||
[:main.mt4
|
||||
[:div
|
||||
[:section.mw7.center.avenir
|
||||
[:h1 "Clojure library examples to aid learning"]
|
||||
[:p ""]
|
||||
|
|
@ -424,7 +410,6 @@
|
|||
:description (-> site-data :lorem)
|
||||
:tagline "https://tachyons.io/components/"}]]])
|
||||
|
||||
|
||||
;; define our page routes passed into reitit later on
|
||||
(def routes
|
||||
[["/"
|
||||
|
|
@ -456,7 +441,7 @@
|
|||
{:name ::about
|
||||
:view about-page}]
|
||||
|
||||
["/demo/:page"
|
||||
#_["/demo/:page"
|
||||
{:name ::demo
|
||||
:view demo-page
|
||||
:parameters {:path {:page string?}
|
||||
|
|
@ -473,7 +458,7 @@
|
|||
[;;{:href (rfe/href ::dsl) :text "DSL's" :key "dsl"}
|
||||
{:title "Domain Specific Languages" :href (rfe/href ::about) :text "About" :key "about"}
|
||||
#_{:href (rfe/href ::i-do-not-exist) :text "missing"}])]
|
||||
[:main.ma4
|
||||
[:main.m-auto {:class "w-3/5"}
|
||||
(when-let [view (-> @site-state :current-route :data :view)] [view (-> @site-state :current-route)])]
|
||||
[footer]])
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,51 @@
|
|||
(ns clojure-demo.tailwind-theme)
|
||||
|
||||
(def tailwind-theme
|
||||
{:TITLE :header.f2.fw6.f2-ns.lh-title.mt0.mb2
|
||||
;:DESCRIPTION :p
|
||||
:HEADER1 :h1.f3.fw6.f3-ns.lh-title.mt0.mb2
|
||||
:HEADER2 :h2.f3.fw6.f3-ns.lh-title.mt0.mb2
|
||||
:HEADER3 :h3
|
||||
:HEADER4 :h4
|
||||
:HEADER5 :h5
|
||||
:TODO :span
|
||||
:VERBATIM :code
|
||||
:CODE :code
|
||||
|
||||
:MAIN :main
|
||||
|
||||
:THUMBNAIL nil
|
||||
:DESCRIPTION :meta ;(fn [v] [:span {:name (str v)} ])
|
||||
:CATEGORY :meta ;(fn [v] [:span {:name (str v)} ])
|
||||
:SLUG :meta ;(fn [v] [:span {:name (str v)} ])
|
||||
:DATE :meta ;(fn [v] [:span {:name (str v)} ])
|
||||
:FILETAGS :meta ;(fn [v] [:span {:name (str v)} ])
|
||||
:NAME :meta ;(fn [v] [:span {:name (str v)} ])
|
||||
|
||||
:TABLE :table.collapse.ba.br2.b--black-10.pv2.ph3
|
||||
:TBODY :tbody
|
||||
:THEAD :thead
|
||||
:TR :tr.striped--light-gray
|
||||
:TD :td.pv2.ph3
|
||||
|
||||
;;TODO this is a src attrib probably worth handling this differently
|
||||
;;perhaps allow custom functions instead of a simple replace
|
||||
:LANGUAGE :class
|
||||
:SRC :pre.bg-near-black.silver.pa2.hljs.roboto.overflow-auto.klipse
|
||||
:RESULTS :pre.bg-near-black.silver.pa2.hljs.roboto.overflow-auto
|
||||
:EXAMPLE :pre.bg-near-black.silver.pa2.hljs.roboto.overflow-auto
|
||||
:COMMENT nil
|
||||
:CAPTION :span
|
||||
:I :i
|
||||
:U :u
|
||||
:B :b
|
||||
;;:LINK link-handler
|
||||
:IMG :img
|
||||
;; probably remove these 2
|
||||
:A :a
|
||||
:P :p
|
||||
:BR :br
|
||||
:LINE :p.f5.f4-ns.lh-copy.mt0
|
||||
:BULLETS-ORDERED :ol
|
||||
:BULLETS :ul
|
||||
:BULLET :li})
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
(ns clojure-demos.tailwind-theme)
|
||||
|
||||
(def tailwind-theme
|
||||
{:TITLE :header.f2.fw6.f2-ns.lh-title.mt0.mb2
|
||||
;:DESCRIPTION :p
|
||||
:HEADER1 :h1.f3.fw6.f3-ns.lh-title.mt0.mb2
|
||||
:HEADER2 :h2.f3.fw6.f3-ns.lh-title.mt0.mb2
|
||||
:HEADER3 :h3
|
||||
:HEADER4 :h4
|
||||
:HEADER5 :h5
|
||||
:TODO :span
|
||||
:VERBATIM :code
|
||||
:CODE :code
|
||||
|
||||
:MAIN :main
|
||||
|
||||
:THUMBNAIL nil
|
||||
:DESCRIPTION :meta ;(fn [v] [:span {:name (str v)} ])
|
||||
:CATEGORY :meta ;(fn [v] [:span {:name (str v)} ])
|
||||
:SLUG :meta ;(fn [v] [:span {:name (str v)} ])
|
||||
:DATE :meta ;(fn [v] [:span {:name (str v)} ])
|
||||
:FILETAGS :meta ;(fn [v] [:span {:name (str v)} ])
|
||||
:NAME :meta ;(fn [v] [:span {:name (str v)} ])
|
||||
|
||||
:TABLE :table.collapse.ba.br2.b--black-10.pv2.ph3
|
||||
:TBODY :tbody
|
||||
:THEAD :thead
|
||||
:TR :tr.striped--light-gray
|
||||
:TD :td.pv2.ph3
|
||||
|
||||
;;TODO this is a src attrib probably worth handling this differently
|
||||
;;perhaps allow custom functions instead of a simple replace
|
||||
:LANGUAGE :class
|
||||
:SRC :pre.bg-near-black.silver.pa2.hljs.roboto.overflow-auto.klipse
|
||||
:RESULTS :pre.bg-near-black.silver.pa2.hljs.roboto.overflow-auto
|
||||
:EXAMPLE :pre.bg-near-black.silver.pa2.hljs.roboto.overflow-auto
|
||||
:COMMENT nil
|
||||
:CAPTION :span
|
||||
:I :i
|
||||
:U :u
|
||||
:B :b
|
||||
:LINK link-handler
|
||||
:IMG :img
|
||||
;; probably remove these 2
|
||||
:A :a
|
||||
:P :p
|
||||
:BR :br
|
||||
:LINE :p.f5.f4-ns.lh-copy.mt0
|
||||
:BULLETS-ORDERED :ol
|
||||
:BULLETS :ul
|
||||
:BULLET :li})
|
||||
Loading…
Reference in New Issue