Some fixes for the klipse to sci migration.

2023-05-16 16:59:45 +01:00 · 2023-05-16 16:59:45 +01:00 · ad75b478b8
parent 443fd967ab
commit ad75b478b8
12 changed files with 424 additions and 65 deletions
--- a/deps.edn
+++ b/deps.edn
@ -1,8 +1,30 @@
 {:deps {org.clojure/clojure {:mvn/version "1.10.0"}
        ;; version updates seem to break the code eval.
-        org.clojure/clojurescript {:mvn/version "1.10.740"}
-        com.github.seancorfield/honeysql {:mvn/version "2.2.891"}
+        org.clojure/clojurescript {:mvn/version "1.11.60"}
+
+        ;;ajax requests
+        cljs-ajax/cljs-ajax {:mvn/version "0.8.1"}
+
+        ;; react
+        reagent/reagent {:mvn/version "1.1.1"}
+        reagent-utils/reagent-utils {:mvn/version "0.3.3"}
        olymk2/cl-org {:git/url "https://gitlab.com/olymk2/cl-org.git"
-                       :sha "9f29b9a3989bbd0f843e2f025d91cc7b92e818a4"}
-        com.bhauman/figwheel-main {:mvn/version "0.2.11"}}
+                       :sha "528e8125afcac5d7664aac80f7fbba12dd0f5d98"}
+        ;;routing
+        metosin/reitit {:mvn/version "0.5.10"}
+        metosin/reitit-spec {:mvn/version "0.5.10"}
+        metosin/reitit-frontend {:mvn/version "0.5.10"}
+
+        ;; interactive code snippets
+        ;;viebel/klipse {:mvn/version "7.10.4"}
+        com.github.seancorfield/honeysql {:mvn/version "2.4.1026"}
+
+        hiccup/hiccup {:mvn/version "1.0.5"}
+        viebel/klipse {:mvn/version "7.11.4"}
+        org.babashka/sci {:mvn/version "0.7.39"}
+        org.babashka/sci.configs {:git/url "https://github.com/babashka/sci.configs"
+                                  :sha "33bd51e53700b224b4cb5bda59eb21b62f962745"}
+        datascript/datascript {:mvn/version "1.3.15"}
+
+        com.bhauman/figwheel-main {:mvn/version "0.2.18"}}
 :paths ["src" "resources"]}
--- a/reagent-reitit-demo/deps.edn
+++ b/reagent-reitit-demo/deps.edn
@ -20,11 +20,12 @@
        ;;viebel/klipse {:mvn/version "7.10.4"}
        com.github.seancorfield/honeysql {:mvn/version "2.4.1026"}

+        hiccup/hiccup {:mvn/version "1.0.5"}
        viebel/klipse {:mvn/version "7.11.4"}
        org.babashka/sci {:mvn/version "0.7.39"}
        org.babashka/sci.configs {:git/url "https://github.com/babashka/sci.configs"
                                  :sha "33bd51e53700b224b4cb5bda59eb21b62f962745"}
-        datascript/datascript {:mvn/version "1.3.15"}
+        datascript/datascript {:mvn/version "1.4.2"}


        com.bhauman/figwheel-main {:mvn/version "0.2.18"}}
--- a/reagent-reitit-demo/package.json
+++ b/reagent-reitit-demo/package.json
@ -1,6 +1,8 @@
 {
  "dependencies": {
    "@codemirror/commands": "^6.2.4",
+    "@codemirror/language": "^6.6.0",
+    "@codemirror/legacy-modes": "^6.3.2",
    "@codemirror/matchbrackets": "^0.19.4",
    "@codemirror/state": "^6.2.0",
    "@codemirror/theme-one-dark": "^6.1.2",
--- a/reagent-reitit-demo/resources/public/documents/ci-demo.org
+++ b/reagent-reitit-demo/resources/public/documents/ci-demo.org
@ -0,0 +1,111 @@
+#+TITLE: Clojure(script) CI
+
+* CI integration
+
+Building a polylith based clojure project, these steps are similar to most clojure projects with a few additions for the poly tool.
+
+* Github
+
+** Deploy rules
+Name our action and run it only when code is pushed into master
+#+BEGIN_SRC yaml :tangle src/core.cljc
+name: Staging Deploy
+on:
+  push:
+    branches: [master]
+#+END_SRC
+
+
+** Checkout
+Checkout repository, fetch depth is required if you needs tags available
+#+BEGIN_SRC yaml :tangle src/core.cljc
+     # Checkout the code
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+#+END_SRC
+
+** Cache
+Cache the downloaded libraries so we don't do each each time.
+#+BEGIN_SRC yaml :tangle src/core.cljc
+      # Cache project dependencies
+      - name: Cache deps
+        uses: actions/cache@v2
+        with:
+          path: |
+            ~/.polylith
+            ~/.m2
+            ~/.gitlibs
+            ~/.clojure
+          key: ${{ runner.os }}-maven-${{ hashFiles('deps.edn') }}
+          restore-keys: |
+            ${{ runner.os }}-maven-
+            ${{ runner.os }}-
+#+END_SRC
+
+** Set env / project checks
+Create a var called CHANGED_PROJECTS we can use in conditionals in later build steps,  we also check our project comply's to the polylith rules before moving onto linting, testing, building and deploying.
+#+BEGIN_SRC yaml :tangle src/core.cljc
+      # Check the project and set enc for later steps
+      - name: Poly Check / Set Env
+        run: |-
+          cd workspace
+          echo "CHANGED_PROJECTS=$(clojure -M:poly ws get:changes:changed-or-affected-projects since:previous-release skip:dev)" >> $GITHUB_ENV
+          clojure -M:poly info since:release
+          clojure -M:poly check
+#+END_SRC
+
+** Linting
+Lint code with clj-kondo this example lints src and workspace folders.
+#+BEGIN_SRC yaml :tangle src/core.cljc
+      # Lint the code with kondo
+      - name: Code Linting
+        uses: DeLaGuardo/clojure-lint-action@master
+        with:
+          clj-kondo-args: --lint src workspace
+          check-name: Linting
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+#+END_SRC
+
+** Setup Java
+Install a version on java using the java action.
+#+BEGIN_SRC yaml :tangle src/core.cljc
+      # Install java
+      - name: Set up JDK & publish to maven
+        uses: actions/setup-java@v1
+        with:
+          java-version: 13
+#+END_SRC
+
+** Setup clojure
+Install clojure from the clojure action.
+#+BEGIN_SRC yaml :tangle src/core.cljc
+      # Install clojure
+      - name: Install clojure tools
+        uses: DeLaGuardo/setup-clojure@3.5
+        with:
+          cli: 1.10.3.933 
+#+END_SRC
+
+** Testing changes since last release
+Run test but only test since the last tagged release
+#+BEGIN_SRC yaml :tangle src/core.cljc
+    # Run the tests
+    - name: Poly Test
+      run: |-
+        cd workspace
+        clojure -M:poly test since:previous-release
+#+END_SRC
+
+
+** Building
+Finally create your uberjar, this example uses a condition so it only builds if the projects or one of its components has changed.
+We need to set the env in a previous step to make it available to future steps.
+#+BEGIN_SRC yaml :tangle src/core.cljc
+    # Build the uberjar
+    - name: Build my example api
+      if: contains('${{ env.CHANGED_PROJECTS }}', 'my-example-api')
+      run: |-
+        cd  workspace/projects/my-example-api
+        clojure -X:uberjar
+#+END_SRC
--- a/reagent-reitit-demo/resources/public/documents/clojure-basics.org
+++ b/reagent-reitit-demo/resources/public/documents/clojure-basics.org
@ -1,9 +1,42 @@
 #+TITLE: Getting started with Clojure some of the basics.

-* Clojure datatype's
-Clojure is a very dynamic and interactive language it is able to give very in depth feed back of your running program, all code below can evaluated live inside an IDE when connected.
+* Clojure basics
+
+Clojure is a very dynamic and interactive language that can give you very in-depth feedback on your running programs. For example, you can use Clojure to:
+
+ - Debug your code more easily by seeing the values of variables, the call stack, and the execution time of each function.
+ - Experiment with different ideas more quickly by evaluating code live inside an IDE.
+ - Use third party graphical tools to aid debugging and testing your code like portal, portfolio & clerk
+
+The code below can be evaluated live inside the page you can select parts of the code to evaluate partially you can also modify the code the new version will be evaluated live.
+
+** Clojure comments
+
+There a few ways to comment code in this language.
+
+ - Semi colon's can be used to comment out a whole line handy for adding in detailed comments, for commenting out code you can also use semi colons but more useful is the #_ syntax.
+ - #_ prefixed before a bracket will comments out everything between the opening and closing bracket, this is most hopefull to comment out entire blocks in one go.
+ - Another method is to use rich comments which is a function which stops the evaluation of everything inside the block, this is extremely useful as you can run the code from your IDE but it will not be executed in production.
+
+#+BEGIN_SRC clojure :tangle src/core.cljc
+; comments are semi colon, linters will treat alignment different bassed on the number of semi colons
+
+; comment out the block of code from starting bracket to matching closing bracket
+; in this example the whole if condition is commented out which spans 3 lines
+#_(if true
+    (prn "true")
+    (prn "false"))
+
+; Ignore this code, but we can still eval it inside an IDE
+(comment
+  (+ 1 2 3))
+
+#+END_SRC
+
+** Basic datatype's
+
+Clojure has a rich set of data types, including numbers, strings, characters, booleans, and nil.

-Basic data
 #+BEGIN_SRC clojure :tangle src/core.cljc
 ;; comments are semi colon, linters will treat alignment different bassed on the number of semi colons
 ;;Integers
@ -32,7 +65,10 @@ nil
 #"^Begins with this text"
 #+END_SRC

-Collections of data
+** Collections of data
+
+Clojure also has a number of compound data types, such as lists, vectors, maps, and sets.
+
 #+BEGIN_SRC clojure :tangle src/core.cljc
 ;; List are wrapped in brackets, space or comma act as seerators
 ;; Lists are special in that they need to be escaped to be treated as data
@ -79,7 +115,7 @@ When ever you see an opening bracket the value after is always a function unless
 ** Maths
 All maths operators are also functions, meaning you start with the operation then the numbers to apply the operator against, opposed to many other languages where you would separate the numbers by operators.

-This goes back to function as the first item in a list then arguments.
+This goes back to function as the first item in a list then the arguments.

 #+BEGIN_SRC clojure :tangle src/core.cljc
 ;; This is equivalend to 1 + 2 + 3 in other languages
@ -91,7 +127,7 @@ This goes back to function as the first item in a list then arguments.


 ** Variables
-Variables in clojure are defined with =def= function, how ever unlike other languages you can not change these unless using some construct which allows this like an atom.
+Variables in clojure are defined with =def= function, how ever unlike other languages you can not change these unless using some construct which allows the value to be changed like an atom.

 #+BEGIN_SRC clojure :tangle src/core.cljc
 ;; These define variable Which can not change
@ -240,7 +276,7 @@ Below you will find some simple examples, it is worth noting that some of the wi
 ;; as the first parameter, this works nicely with hashmaps because keywords are functions

 ;; ->> same as above but the result is the last parameter
-;; when working with sequences you tend to use this one most functions Take
+;; when working with sequences you tend to use this one most sequence functions Take
 ;; a sequence as the last parameter

 ;; '( this is the same as writting (list 1 2 3) the ' denotes we are using the list function
--- a/reagent-reitit-demo/resources/public/documents/containers.org
+++ b/reagent-reitit-demo/resources/public/documents/containers.org
@ -0,0 +1,48 @@
+#+TITLE: Containerizing your application
+
+This is a multistage Dockerfile it has a build and run stage to help reduce the final image size.
+
+This example is built for use with polylith it allows you to build multiple containers from a single docker file.
+
+
+
+
+#+BEGIN_SRC yaml :tangle src/core.cljc
+# Beware the alpine images, seems the googleads library does not like the alphine glib alternative ie muscl
+FROM clojure:temurin-17-tools-deps AS builder
+ENV CLOJURE_VERSION=1.11.1.1182
+ARG PROJECT
+
+RUN mkdir -p /build
+WORKDIR /build
+
+# Fetch the deps first, by copying just the deps we can cache the download
+# except when the deps file has changed.
+COPY ./deps.edn /build
+RUN clojure -P -X:dev
+
+COPY ./ /build
+RUN clojure -T:build uberjar :project $PROJECT
+
+FROM eclipse-temurin:17
+ARG PROJECT
+COPY --from=builder /build/target/ /app
+
+WORKDIR /app
+
+ADD ./projects/car-cli/resources/google/ /app/
+ADD ./projects/car-cli/resources/google/ /root/
+RUN mkdir -p /app/environment/
+
+# Build ARG are not available at runtime but we can insert them into env as part of the build
+ENV PROJECT_RUN=/app/${PROJECT}.jar
+
+ENTRYPOINT ["java", "-jar"]
+
+# this is expanded by a shell so can't use in a params list, can't find another way
+CMD java -jar ${PROJECT_RUN}.jar
+#+END_SRC
+
+#+BEGIN_SRC sh :tangle src/core.cljc
+docker build -f Dockerfile-Multistage . --build-arg PROJECT=example-api
+#+END_SRC
--- a/reagent-reitit-demo/resources/public/documents/datalog-demo.org
+++ b/reagent-reitit-demo/resources/public/documents/datalog-demo.org
@ -3,7 +3,7 @@
 * Getting started
 To work with the code interactively jack into the project in your IDE of choice select "figwheel-main" as the build tool and dev as the build.

-Alternatively start a repl from the command line with 
+Alternatively start a repl from the command line with.

 #+BEGIN_SRC sh
 clojure -m figwheel.main --build dev --repl
@ -12,7 +12,7 @@ clojure -m figwheel.main --build dev --repl
 * Intro to datalog
 First import datascript which is a client side version of datalog, see datomic crux datalevin and datahike for other datalog database.
 #+BEGIN_SRC clojurescript :tangle ./src/test.cljs
-(ns core.demo
+#_(ns core.demo
  (:require [datascript.core :as d]))
 #+END_SRC

@ -32,12 +32,13 @@ Datalog databases can be schema less but a lot of the power comes from creating

 You can create a new database using create-conn as below then empty hash map is simply a blank schema, 
 #+BEGIN_SRC clojurescript :tangle ./src/test.cljs
-  (def demo-conn (d/create-conn {}))
+(def demo-conn (d/create-conn {}))
 #+END_SRC


 Using the connection we can just start inserting data, using standard hash maps and lists structures, we always specify the attribute and the value when transacting.
 #+BEGIN_SRC clojurescript :tangle ./src/test.cljs
+(def demo-conn (d/create-conn {}))
 (d/transact! demo-conn   [{:user/name "Brooke" :user/img "me.jpg"} {:user/name "Kalvin" :user/img "you.jpg"}])
 #+END_SRC

--- a/reagent-reitit-demo/resources/public/documents/hiccup-sql-demo.org
+++ b/reagent-reitit-demo/resources/public/documents/hiccup-sql-demo.org
@ -0,0 +1,20 @@
+#+TITLE: HoneySQL tips & tricks
+
+
+* Basic statements
+
+#+BEGIN_SRC clojurescript :tangle ./src/core.cljs
+#_(ns honeysql.core
+  (:require
+   [honey.sql.core :as sql]
+   [honey.sql.helpers :refer :all :as helpers]))
+#+END_SRC
+
+
+** Simple table select, with filtering and sorting applied
+#+BEGIN_SRC clojurescript :tangle ./src/core.cljs
+(-> (sqlh/select :*)
+    (sqlh/from [:company])
+    (sqlh/where [:= :id 1])
+    (sqlh/format :pretty true))
+#+END_SRC
--- a/reagent-reitit-demo/resources/public/documents/honey-sql-demo.org
+++ b/reagent-reitit-demo/resources/public/documents/honey-sql-demo.org
@ -0,0 +1,52 @@
+#+TITLE: HoneySQL tips & tricks
+
+* Basic statements
+
+#+BEGIN_SRC clojurescript :tangle ./src/core.cljs
+#_(ns core.demo
+  (:require
+   [honey.sql :as sql]
+   [honey.sql.helpers :as sqlh]))
+#+END_SRC
+
+#+BEGIN_SRC clojurescript :tangle ./src/core.cljs
+(clojure.core/into [:a] [1 2 3 4])
+#+END_SRC
+
+** Simple table select, with filtering and sorting applied
+#+BEGIN_SRC clojurescript
+(-> (sqlh/select :*)
+    (sqlh/from :company)
+    (sqlh/where [:= :id 1]))
+#+END_SRC
+
+#+BEGIN_SRC clojurescript :tangle ./src/core.cljs
+(sqlh/select :*)
+#+END_SRC
+
+
+** Dynamic where clauses
+
+*** where value exists
+=sqlh/where= will only be applied to the query if it has a value so nil on its own will not applied
+#+BEGIN_SRC clojurescript :tangle ./src/core.cljs
+(defn conditional-where [id] 
+  (-> (sqlh/select :*)
+      (sqlh/from [:company])
+      (sqlh/where (when id [:= :id id]))))
+
+(first (sql/format (conditional-where 1) {:pretty true}))
+#+END_SRC
+
+*** Switch between singular or multiple values in condition
+
+#+BEGIN_SRC clojurescript :tangle ./src/core.cljs
+(defn conditional-where [id] 
+  (-> (sqlh/select :*)
+      (sqlh/from [:company])
+      (sqlh/where (if (sequential? id) [:in :id id] [:= :id id]))))
+
+(first (sql/format (conditional-where [1 2 3]) {:pretty true}))
+;(clojure.string/join "" (sql/format (conditional-where [1 2 3]) {:pretty true}))
+#+END_SRC
+
--- a/reagent-reitit-demo/resources/public/documents/reagent-reitit.org
+++ b/reagent-reitit-demo/resources/public/documents/reagent-reitit.org
@ -37,9 +37,30 @@ https://purelyfunctional.tv/guide/reagent/
 Form one components are for simply rendering some html with values that are not going to change.

 In the example below the function just returns some hiccup with the parameters inserted, you need to specify =:key= when dynamically repeating the elements and these should be reproducible unique id's where possible not randomly generated or indexed numbers if the data is unordered. 
-#+BEGIN_SRC clojurescript
+#+BEGIN_SRC clojure
 (defn navbar-link [{:keys [href title text] :or {text nil title nil}}]
-  [:a.link.dim.white.dib.mr3 {:key href :href href :title title} text])
+  [:a.link.dim.dib.mr3 {:key href :href href :title title} text])
+
+(navbar-link {:href "https://clojure.org" :title "linke title" :text "link here"})
+#+END_SRC
+
+
+#+BEGIN_SRC clojure
+(defn product-card
+  [{:keys [title amount description link]}]
+  [:article.br2.ba.dark-gray.b--black-10.ma2.w-100.w-50-m.w-25-l.mw5
+   [:img.db.w-100.br2.br--top {:src link}]
+   [:div.pa2.ph3-ns.pb3-ns
+    [:div.dt.w-100.mt1
+     [:div.dtc [:h1.f5.f4-ns.mv0 title]]
+     [:div.dtc.tr [:h2.f5.mv0 amount]]]
+    [:p.f6.lh-copy.measure.mt2.mid-gray description]]])
+
+(product-card
+      {:title "Cat 01"
+       :amount "£54.59"
+       :description "Cat description here"
+       :link "http://placekitten.com/g/600/300"})
 #+END_SRC


@ -47,8 +68,15 @@ In the example below the function just returns some hiccup with the parameters i
 In form two we can track local state inside a component a click counter being a basic example.


-#+BEGIN_SRC clojurescript
+#+BEGIN_SRC clojure
+(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)])))

+[my-component "Clickable component" 1]
 #+END_SRC


--- a/reagent-reitit-demo/shadow-cljs.edn
+++ b/reagent-reitit-demo/shadow-cljs.edn
@ -1,11 +1,12 @@
 {
 :deps {:aliases [:dev]}
- :dev-http {8080 "resources/public/"}
+ :dev-http {8080 ["resources/public/" "classpath:public"]}
 :source ["src" "../../components"]
 :builds {:app {:output-dir "resources/public/cljs-out/"
-                :asset-path "."
+                :asset-path "/cljs-out"
                :target :browser
                :compiler-options {:infer-externs :auto
+                                   :externs ["datascript/externs.js"]
                                   :output-feature-set :es6}
                :modules {:main_bundle {:init-fn clojure-demo.core/startup!}}
                :devtools {:after-load app.main/reload!}}}}
--- a/reagent-reitit-demo/src/clojure_demo/core.cljs
+++ b/reagent-reitit-demo/src/clojure_demo/core.cljs
@ -1,13 +1,14 @@
 (ns ^:figwheel-hooks clojure-demo.core
  (:require ["react-dom/client" :refer [createRoot]]
            ["@codemirror/state" :as cm-state :refer [EditorState Transaction] ]
+            ["@codemirror/language" :refer [LanguageSupport StreamLanguage]]
            ["@codemirror/view" :as cm-view :refer [EditorView ViewUpdate]]
            ["@codemirror/commands" :as cm-commands :refer [defaultKeymap]]
            ["@codemirror/theme-one-dark" :refer [oneDark]]
            ["@nextjournal/lang-clojure" :refer [clojure]]
+            ["@codemirror/legacy-modes/mode/yaml" :refer [yaml]]

            [reagent.core :as reagent]
-            [reagent.dom :refer [render]]
            [ajax.core :refer [GET raw-response-format]]
            ;[demo.org :refer [parse->to-hiccup parse-flat]]
            ;[cljs.js :as cljs]
@ -25,12 +26,22 @@
            [sci.configs.tonsky.datascript :as sci-datascript]
            ;;[klipse.run.plugin.plugin]
            ;;[klipse.plugin :as klipse-plugin]
+            ;[hiccup.core :as h]
            [honey.sql :as sql]
            [honey.sql.helpers :as sqlh]
-            [datascript.core :as d]
+            ;[datascript.core :as d]
            [spec-tools.data-spec :as ds]))


+(def languages {"clojure" {:mode "clojure"}
+                "clojurescript" {:mode "clojure"}
+                "yaml" {:mode "yaml"}})
+
+(def yaml-mode (LanguageSupport. (.define StreamLanguage yaml) ))
+ ;const yaml = new LanguageSupport(StreamLanguage.define(yamlMode.yaml));
+
+;; https://github.com/babashka/sci.configs
+;(def hc-ns (sci/create-ns 'hiccup.core nil))
 (def rf-ns (sci/create-ns 'reitit.frontend nil))
 (def rfe-ns (sci/create-ns 'reitit.frontend.easy nil))
 (def rss-ns (sci/create-ns 'reitit.coercion.spec nil))
@ -40,7 +51,7 @@
  (sci/init
   {:namespaces
    {'reagent sci-reagent/reagent-namespace
-     ;'h 
+     ;'h {'html (sci/copy-var h/html hc-ns)}
     'd sci-datascript/core-ns
     'sql {'format (sci/copy-var sql/format sql-ns)
           #_#_'raw (sci/copy-var sql/raw sql-ns)}
@ -59,12 +70,14 @@
 ;(def sci-ctx  (sci/empty-environment))
 (sci/alter-var-root sci/print-fn (constantly *print-fn*))

-(defn fetch-selected-text [v transactions]
+(defn fetch-selected-text
+  "Get the users selected text"
+  [updated-view transactions]
  (reduce (fn [text t]
            (if (= "select.pointer" (str (.annotation t (.-userEvent Transaction) )))
-              (conj text 
+              (conj text
                    (.sliceDoc
-                     ^EditorState (.-state v)
+                     ^EditorState (.-state updated-view)
                     (.-from (.-main (.-selection t)))
                     (.-to (.-main (.-selection t)))))
              text))
@ -72,50 +85,56 @@
          transactions))

 (defn code-editor
-  [content]
-  (let [editor (atom nil)
+  [{:keys [class]} content]
+  (let [language class
+        editor (atom nil)
        evaled-result (reagent/atom nil)
        update-timeout (reagent/atom nil)
        update-fn (.of (.-updateListener EditorView)
                       (fn [^ViewUpdate view-update]
-                         (js/clearTimeout @update-timeout)
-                         (reset! update-timeout
-                                 (js/setTimeout
-                                  (fn []
-                                    (let [selected-text (fetch-selected-text view-update (.-transactions view-update))
-                                          eval-code (if (seq selected-text)
-                                                      (first selected-text)
-                                                      (.-doc (.-state view-update)))]
-                                      (reset! evaled-result (sci/eval-string* sci-ctx
-                                                                              (.toString eval-code)  ))
-                                      (prn "updated delayed"))) 1000))))
+                         (when (some #(= language %) ["clojure" "clojurescript"] 
+                           (js/clearTimeout @update-timeout)
+                           (reset! update-timeout
+                                   (js/setTimeout
+                                    (fn []
+                                      (let [selected-text (fetch-selected-text view-update (.-transactions view-update))
+                                            eval-code (if (seq selected-text)
+                                                        (first selected-text)
+                                                        (.-doc (.-state view-update)))]
+                                        (reset! evaled-result (sci/eval-string* sci-ctx
+                                                                                (.toString eval-code)  ))
+                                        (prn "updated delayed"))) 1000)))))
        start-state
        (.create EditorState
                 (clj->js {:doc content
                           :mode "text/x-clojure"
-                           :extensions [(clojure) update-fn oneDark #_cm-keymap/of #_cm-commands/default-keymap]}))
+                           ;:mode "text/yaml"
+                           :extensions [(clojure) yaml-mode update-fn oneDark #_cm-keymap/of #_cm-commands/default-keymap]}))
        view (atom nil)]
    (reagent/create-class
     {:component-did-mount
      (fn [_]
        (reset! view (EditorView.
-                      (clj->js  {:state start-state
-                                 :mode "clojure"
-                                 :updateListener prn
-                                 :parent @editor}))))
+                      (clj->js  (merge {} #_(get languages language)
+                                       {:state start-state
+                                        ;:mode "yaml"
+                                        :mode "clojure"
+                                        :updateListener prn
+                                        :parent @editor})))))
      :component-will-unmount (fn [_] (.destroy @view))
      :reagent-render (fn []
-                        [:div
+                        [:div language
                         [:div.editor {:ref #(reset! editor %)}]
-                         [:pre (str @evaled-result)]])})))
+                         [:pre {:style {:white-space "pre-line"}} @evaled-result]])})))


-(defn code-snippet [settings content]
+#_(defn code-snippet [settings content]
  (let [snippet (reagent/atom nil)
        ;;evaled (sci/eval-string* sci-ctx content )
        ;;evaled (sci/eval-form sci-ctx content )
        ]
-    [code-editor (str content)]))
+    [:div (str settings)
+     [code-editor (:class settings) (str content)]]))

 (defn link-handler [v _]
  (prn v)
@ -130,20 +149,23 @@
 (defn link-handler4 [v _]
  (if (-> v second :img)
    (conj [:img] (dissoc (rename-keys (second v) {:href :src}) :img))
-    (conj [:a]  (second v) #_(or (when-not (clojure.string/blank? (last v)) (last v))
+    (conj [:a] (second v) #_(or (when-not (clojure.string/blank? (last v)) (last v))
                          {:href (:href (second v))}
                          (:title (second v))))))

-(def theme (merge tachyon-theme
-                  {:SRC code-snippet
-                   :LINK :a #_link-handler}))
+(def theme
+  (merge tachyon-theme
+         {:SRC code-editor
+          :LINK :a #_link-handler}))


-;;   :FILETAGS (fn [v] [:meta {:name "keywords" :content (str v)}])

 ;; put constant data here
 (def site-data
-  {:demos {:sci-demo
+  {:homepage {:intro "Clojure tutorials examples and exploration"}
+   :lorem "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
+   :demos
+   {:sci-demo
           {:file "documents/sci-demo.org" :git-link "https://github.com/atomjuice/dsl-demo"}
           :dsl-demo
           {:file "documents/dsl-demo.org" :git-link "https://github.com/atomjuice/dsl-demo"}
@ -156,9 +178,9 @@
           :clojure-basics
           {:file "documents/clojure-basics.org" :git-link "https://github.com/atomjuice/dsl-demo"}
           :ci-demo
-           {:file "documents/ci-demo.org" :git-link "https://github.com/atomjuice/dsl-demo"}}
-   :homepage {:intro "Clojure tutorials examples and exploration"}
-   :lorem "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."})
+           {:file "documents/ci-demo.org" :git-link "https://github.com/atomjuice/dsl-demo"}
+           :containers
+           {:file "documents/containers.org" :git-link "https://github.com/atomjuice/containers"}}})

 ;; Store site state
 (defonce site-state (reagent/atom {}))
@ -213,8 +235,7 @@
 ;; form one component to render a navbar
 (defn navbar [links]
  [:header.bg-black-90.w-100.ph3.pv3.pv4-ns.ph4-m.ph5-l
-   [:nav.f6.fw6.ttu.tracked
-    (map navbar-link links)]])
+   (into [:nav.f6.fw6.ttu.tracked] (map navbar-link links))])

 ;; 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.
@ -236,24 +257,35 @@
       :link (rfe/href ::demo {:page "sci-demo"})
       :img-src "https://clojure.org/images/clojure-logo-120b.png"}
      {:title "Clojure Basics"
+       :description "Getting started with clojure syntax datatype's sequences conditions"
       :link (rfe/href ::demo {:page "clojure-basics"})
       :img-src "https://clojure.org/images/clojure-logo-120b.png"}
-      {:title "DSL Demo"
-       :link (rfe/href ::demo {:page "dsl-demo"})
-       :img-src "https://miro.medium.com/max/1400/1*CEYFj5R57UFyCXts2nsBqA.png"}
-      {:title "Honey SQL Demo"
-       :link (rfe/href ::demo {:page "honey-sql-demo"})
-       :img-src "https://miro.medium.com/max/1400/1*CEYFj5R57UFyCXts2nsBqA.png"}
      {:title "CI Demo"
+       :description "Clojure in a CI pipeline"
       :link (rfe/href ::demo {:page "ci-demo"})
       :img-src "https://miro.medium.com/max/1400/1*CEYFj5R57UFyCXts2nsBqA.png"}
      {:title "Datalog Demo"
       :link (rfe/href ::demo {:page "datalog-demo"})
       :img-src "https://raw.githubusercontent.com/tonsky/datascript/master/extras/logo.svg"}
      {:title "Reagent Demo"
+       :description "React application using reagent"
       :link (rfe/href ::demo {:page "reagent-demo"})
       :img-src "https://raw.githubusercontent.com/reagent-project/reagent/master/logo/logo-text.png"}]}]])

+(defn dsl-page []
+  [:<>
+   [articles
+    {:title "Clojure Demos"
+     :body (-> site-data :homepage :intro)
+     :articles
+     [
+      {:title "DSL Demo"
+       :link (rfe/href ::demo {:page "dsl-demo"})
+       :img-src "https://miro.medium.com/max/1400/1*CEYFj5R57UFyCXts2nsBqA.png"}
+      {:title "Honey SQL Demo"
+       :link (rfe/href ::demo {:page "honey-sql-demo"})
+       :img-src "https://miro.medium.com/max/1400/1*CEYFj5R57UFyCXts2nsBqA.png"}]}]])
+
 ;; form two component render demo
 (defn demo-page [route]
  (let [demo-key (keyword (-> route :parameters :path :page))
@ -325,6 +357,10 @@
     :my-data "hi"
     :view home-page}]

+   ["/dsl"
+    {:name ::dsl
+     :view dsl-page}]
+
   ["/about"
    {:name ::about
     :view about-page}]
@ -342,6 +378,7 @@
   ;;[:link {:rel "stylesheet" :href "https://raw.githubusercontent.com/FarhadG/code-mirror-themes/master/themes/rdark.css"}]
   ;;[:link {:rel "stylesheet" :href "https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"}]
   [navbar [{:href (rfe/href ::frontpage) :title "title here" :text "home"}
+            {:href (rfe/href ::dsl) :text "DSL's"}
            {:href (rfe/href ::about) :text "About"}
            {:href (rfe/href ::i-do-not-exist) :text "missing"}]]
   [:main.mt4