Use codemirror 6 to render code and eval with sci.

.gitlab-ci.yaml

@@ -16,7 +16,7 @@ pages:
   image: clojure:tools-deps-alpine
   script:
     - cd ./reagent-reitit-demo/
-    - clj -m figwheel.main --build dev --repl
+    - clj -M -m figwheel.main --build dev --repl
 
 #  script:
 #  - python setup.py develop

deps.edn

@@ -1,5 +1,6 @@
 {:deps {org.clojure/clojure {:mvn/version "1.10.0"}
-        org.clojure/clojurescript {:mvn/version "1.10.764"}
+        ;; 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"}
         olymk2/cl-org {:git/url "https://gitlab.com/olymk2/cl-org.git"
                        :sha "9f29b9a3989bbd0f843e2f025d91cc7b92e818a4"}

dsl-demo/readme.org

@@ -81,6 +81,7 @@ In this example we create a select but with no from format will still give you a
 
 You use multiple functions to combine the parts, below we add the missing from.
 #+BEGIN_SRC clojure
+
 (sql/format (sqlh/from
              (sqlh/select :first_name :last_name :email)
              :users))

readme.org

@@ -0,0 +1 @@
+clj -m figwheel.main --build dev --repl

reagent-reitit-demo/deps.edn

@@ -1,14 +1,16 @@
 {:deps {org.clojure/clojure {:mvn/version "1.10.0"}
-        org.clojure/clojurescript {:mvn/version "1.10.764"}
+        ;; version updates seem to break the code eval.
+;;        org.clojure/clojurescript {:mvn/version "1.10.740"}
+        org.clojure/clojurescript {:mvn/version "1.11.60"}
 
         ;;ajax requests
-        cljs-ajax {:mvn/version "0.8.1"}
+        cljs-ajax/cljs-ajax {:mvn/version "0.8.1"}
 
         ;; react
-        reagent {:mvn/version "0.9.1"}
+        reagent/reagent {:mvn/version "1.1.1"}
-        reagent-utils {:mvn/version "0.3.3"}
+        reagent-utils/reagent-utils {:mvn/version "0.3.3"}
         olymk2/cl-org {:git/url "https://gitlab.com/olymk2/cl-org.git"
-                       :sha "2bb6f41b317749ea3467987ea57ee7807b59d921"}
+                       :sha "528e8125afcac5d7664aac80f7fbba12dd0f5d98"}
         ;;routing
         metosin/reitit {:mvn/version "0.5.10"}
         metosin/reitit-spec {:mvn/version "0.5.10"}
@@ -16,10 +18,16 @@
 
         ;; interactive code snippets
         ;;viebel/klipse {:mvn/version "7.10.4"}
-        viebel/klipse {:mvn/version "7.9.1"}
+        com.github.seancorfield/honeysql {:mvn/version "2.4.1026"}
-        datascript {:mvn/version "1.0.0"}
+
+        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.11"}}
+        com.bhauman/figwheel-main {:mvn/version "0.2.18"}}
  :paths ["src" "resources"]
- :aliases {:prod {:main-opts ["-m" "figwheel.main" "-bo" "dev"]}}}
+ :aliases {:prod {:main-opts ["-m" "figwheel.main" "-bo" "dev"]}
+           :dev {:extra-deps {thheller/shadow-cljs {:mvn/version "2.23.3"}}}}}

reagent-reitit-demo/dev.cljs.edn

@@ -1,8 +1,17 @@
 ^{:watch-dirs ["src"]}
-{:output-to "resources/public/cljs-out/dev-main.js"
+{;:output-to "resources/public/cljs-out/dev-main.js"
+ :output-dir "resources/public/cljs-out/"
+ :output-to "resources/public/cljs-out/main.js"
  :optimizations :none
  :pretty-print true
+ :target :bundle
+ :infer-externs true
+ :bundle-freq :smart
+ :auto-bundle :webpack
  :source-map true
  :source-map-timestamp true
  :devcards true
+ :bundle-cmd {:none ["npx" "webpack" "--mode=development" "--entry" :output-to
+                     "--output-path" :final-output-dir
+                     "--output-filename" :final-output-filename]}
  :main clojure-demo.core}

reagent-reitit-demo/package.json

@@ -0,0 +1,17 @@
+{
+  "dependencies": {
+    "@codemirror/commands": "^6.2.4",
+    "@codemirror/matchbrackets": "^0.19.4",
+    "@codemirror/state": "^6.2.0",
+    "@codemirror/theme-one-dark": "^6.1.2",
+    "@codemirror/view": "^6.10.1",
+    "@nextjournal/lang-clojure": "^1.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "shadow-cljs": "^2.23.3",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0"
+  }
+}

reagent-reitit-demo/resources/public/documents/clojure-basics.org

@@ -20,10 +20,10 @@ Basic data
 \a \b \c \e \t \c
 ;;Symbols (named things like function & variable) are just text
 ;;these are quoted with a ' to stop evaluation, we have not actually defined them yet
-;;this stops evaluation 
+;;this stops evaluation
 'my-var-name 'my-fn-name 'my-second-var-etc 'my-second-fn-etc
 ;;hash map or dictonary keys are prefixed with a colon, no need to quote
-:key1 :key2 :key3 
+:key1 :key2 :key3
 ;;booleans
 true false
 ;; Null or None is just nil
@@ -35,7 +35,6 @@ nil
 Collections of data
 #+BEGIN_SRC clojure :tangle src/core.cljc
 ;; List are wrapped in brackets, space or comma act as seerators
-(1 2 3 4 5 6 7 8 9)
 ;; Lists are special in that they need to be escaped to be treated as data
 ;; using the list function or the quote symbol, which is short hand and explained later.
 (list 1 2 3 4 5 6 7 8 9)

reagent-reitit-demo/resources/public/documents/dsl-demo.org

@@ -172,7 +172,7 @@ We can also do joins to other table's
 
   (def base-join-sql
     (-> base-sql
-      (sqlh/join [:address] [:= :users.address_id address.id])))
+      (sqlh/join [:address] [:= :users.address_id :address.id])))
 
 (sql/format base-join-sql)
 #+END_SRC
@@ -183,7 +183,7 @@ or group by's and sql functions like =count= =max= =min= these can be used by ap
 (def base-group-sql
   (-> base-sql
       (sqlh/select :first_name [:%count.first_name :count_name])
-      (sqlh/group :first_name)))
+      (sqlh/group-by :first_name)))
 
 (sql/format base-group-sql)
 #+END_SRC
@@ -200,16 +200,16 @@ This is how I like to compose queries, and shows a larger query being generated.
 
 (defn big-base-filters [filters]
   (-> big-base-sql
-      (sqlh/merge-where
+      (sqlh/where
        (when (:first_name filters)
          [:= :first_name (:first_name filters)]))
-      (sqlh/merge-where
+      (sqlh/where
        (when (:last_name filters)
          [:= :last_name (:last_name filters)]))
-      (sqlh/merge-where
+      (sqlh/where
        (when (:product_name filters)
          [:= :product.name (:product_name filters)]))
-      (sqlh/merge-where
+      (sqlh/where
        (when (:active filters)
          [:= :active (:active filters)]))))
 
@@ -236,8 +236,8 @@ Say we want to get people added in the last 14 days this is a bit more tricky
 (def base-last-14-days-sql
   (-> base-sql
       (sqlh/where [:>
-                   (sql/raw "created")
+                   [:raw "created"]
-                   (sql/raw "CURRENT_DATE - INTERVAL '14' DAY")])))
+                   [:raw "CURRENT_DATE - INTERVAL '14' DAY"]])))
 
 
 (sql/format base-last-14-days-sql)

reagent-reitit-demo/resources/public/documents/reagent-reitit.org

@@ -20,6 +20,7 @@ You can control how reloading works by using meta data in your project, usually
 
 
 #+BEGIN_SRC clojurescript
+;;(require '[reagent.core :as r])
 (ns ^:figwheel-hooks core.demo)
 #+END_SRC
 
@@ -55,6 +56,8 @@ In form two we can track local state inside a component a click counter being a
 This form of component give's you full access to the react life cycle methods, so render did-mount did-unmount etc
 usually this form of component is only needed when rendering graphics or things like graphs, it's also useful for capturing errors and handling them as in the example below, which renders your components but if =component-did-catch= is trigger the error is caught and displayed instead.
 #+BEGIN_SRC clojurescript
+;;(require '[reagent.core :as reagent])
+;;(require '[reitit.frontend.easy :as rfe])
 (defn err-boundary
   [& children]
   (let [err-state (reagent/atom nil)]
@@ -81,22 +84,24 @@ These are a few simple routes, the last takes parameters and does validation che
 (def routes
   [["/"
     {:name ::frontpage
-     :view home-page-function}]
+     :view 'home-page-function}]
 
    ["/about"
     {:name ::about
-     :view about-page-function}]
+     :view 'about-page-function}]
 
    ["/item/:id"
     {:name ::item
-     :view item-page-function
+     :view 'item-page-function
      :parameters {:path {:id int?}
-                  :query {(ds/opt :foo) keyword?}}}]])
+                  :query {:foo keyword?}}}]])
 #+END_SRC
 
 You need to connect your routes data structure to =ref/start!= this function take's your own function where you can handle what should happen on route change, in this example an atom is updated causing react to render the new page.
 
 #+BEGIN_SRC clojurescript
+(def site-state (reagent/atom nil))
+
   (rfe/start!
    (rf/router routes {:data {:coercion rss/coercion}})
    (fn [m] (swap! site-state assoc :current-route m))
@@ -107,5 +112,5 @@ You need to connect your routes data structure to =ref/start!= this function tak
 
 To create a link to a route, you can use the =rfe/href= function which takes a lookup key which you specified in your routes, in this instance the key is name spaced to the current namespace.
 #+BEGIN_SRC clojurescript
- [:a {:href (rfe/href ::frontpage)} "example link"]
+[:a {:href (rfe/href ::frontpage)} "example link"]
 #+END_SRC

reagent-reitit-demo/resources/public/index.html

@@ -91,7 +91,7 @@
     <div id="app">
       loading here
     </div>
-    <script src="/cljs-out/dev-main.js" type="text/javascript"></script>
+    <script src="/cljs-out/main_bundle.js" type="application/javascript"></script>
 
 </body>
 

reagent-reitit-demo/src/clojure_demo/core.cljs

@@ -1,54 +1,148 @@
 (ns ^:figwheel-hooks clojure-demo.core
-  (:require [reagent.core :as reagent]
+  (:require ["react-dom/client" :refer [createRoot]]
+            ["@codemirror/state" :as cm-state :refer [EditorState] ]
+            ["@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]]
+
+            [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]
+            ;[cljs.repl :as repl]
+            [clojure.set :refer [rename-keys]]
             [cl-eorg.parser :as o :refer [parse parse-flat]]
-            [cl-eorg.html :refer [org->replacements tachyon-theme]]
+            [cl-eorg.html :refer [org->replacements]]
+            [cl-eorg.themes.tachyon :refer [tachyon-theme]]
             [reitit.frontend :as rf]
             [reitit.frontend.easy :as rfe]
             [reitit.coercion.spec :as rss]
-
             ;; interactive 
-            [klipse.run.plugin.plugin]
+            [sci.core :as sci]
-            [klipse.plugin :as klipse-plugin]
+            [sci.configs.reagent.reagent :as sci-reagent]
+            [sci.configs.tonsky.datascript :as sci-datascript]
+            ;;[klipse.run.plugin.plugin]
+            ;;[klipse.plugin :as klipse-plugin]
+            [honey.sql :as sql]
+            [honey.sql.helpers :as sqlh]
             [datascript.core :as d]
-
             [spec-tools.data-spec :as ds]))
 
-(defn klipse-wrapper
-  [{:keys [scripts content settings]}]
-  (reagent/create-class
-   {:component-did-mount (fn [_]
-                           (klipse-plugin/init (clj->js settings)))
-    :reagent-render      (fn [{:keys [content]}]
-                           content)}))
 
-(defn klipse-snippet [content]
+(def rf-ns (sci/create-ns 'reitit.frontend nil))
-  [klipse-wrapper {:content [:div.cm-s-rdark  [:pre.cm-s-rdark.bg-near-black.silver.pa2.hljs.roboto.overflow-auto.klipse content]]
+(def rfe-ns (sci/create-ns 'reitit.frontend.easy nil))
-                   :settings {:selector ".klipse"
+(def rss-ns (sci/create-ns 'reitit.coercion.spec nil))
-                              :selector_reagent ".klipse"
+(def sql-ns (sci/create-ns 'honey.sql.core nil))
-                              }}])
+(def sqlh-ns (sci/create-ns 'honey.sql.helpers nil))
+(def sci-ctx
+  (sci/init
+   {:namespaces
+    {'reagent sci-reagent/reagent-namespace
+     ;'h 
+     'd sci-datascript/core-ns
+     'sql {'format (sci/copy-var sql/format sql-ns)
+           #_#_'raw (sci/copy-var sql/raw sql-ns)}
+     'sqlh {'select (sci/copy-var sqlh/select sqlh-ns)
+            'from (sci/copy-var sqlh/from sqlh-ns)
+            'limit (sci/copy-var sqlh/limit sqlh-ns)
+            'join (sci/copy-var sqlh/join sqlh-ns)
+            'group-by (sci/copy-var sqlh/group-by sqlh-ns)
+            'where (sci/copy-var sqlh/where sqlh-ns)}
+     'rf {'router (sci/copy-var rf/router rf-ns)}
+     'rss {'coercion (sci/copy-var rss/coercion rss-ns)}
+     'rfe {'start! (sci/copy-var rfe/start! rfe-ns)
+           'href (sci/copy-var rfe/href rfe-ns)}}}))
 
-(def theme 
-  (-> tachyon-theme
-      (assoc :U :u)
-      (assoc :I :i)
-      (assoc :TITLE :header.f2.fw6.f2-ns.lh-title.mt0.mb2)
-      (assoc :HEADER1 :h1.f3.fw6.f3-ns.lh-title.mt0.mb2)
-      (assoc :HEADER2 :h2.f3.fw6.f3-ns.lh-title.mt0.mb2)
 
-      (assoc :SRC klipse-snippet)))
+;(def sci-ctx  (sci/empty-environment))
+(sci/alter-var-root sci/print-fn (constantly *print-fn*))
+
+(defn code-editor
+  [content]
+  (let [editor (atom nil)
+        evaled-result (reagent/atom nil)
+        update-timeout (reagent/atom nil)
+        update-fn (.of (.-updateListener EditorView)
+                       (fn [^ViewUpdate v]
+                         (js/clearTimeout @update-timeout)
+                         (reset! update-timeout
+                                 (js/setTimeout
+                                  (fn []
+                                    (reset! evaled-result (sci/eval-string* sci-ctx
+                                                                            (.toString (.-doc (.-state v))) #_content ))
+                                    (prn "updated delayed")) 2000))
+                         #_(when  (.-docChanged v)
+                             (prn v))))
+        start-state
+        (.create EditorState
+                 (clj->js {:doc content
+                           :mode "text/x-clojure"
+                           :extensions [(clojure) 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}))))
+      :component-will-unmount (fn [_] (.destroy @view))
+      :reagent-render (fn []
+                        [:div
+                         [:div.editor {:ref #(reset! editor %)}]
+                         [:pre (str @evaled-result)]])})))
+
+
+(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)]))
+
+(defn link-handler [v _]
+  (prn v)
+  (prn (conj [:a] v #_(second v)))
+  (if (-> v second :img)
+    (conj [:img] (dissoc (rename-keys (second v) {:href :src}) :img))
+    (conj (conj [:a] v #_(second v)) (or (when-not (clojure.string/blank? (last v)) (last v))
+                                     (:href (second v))
+                                     (:title (second v))))))
+
+
+(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))
+                          {:href (:href (second v))}
+                          (:title (second v))))))
+
+(def theme (merge tachyon-theme
+                  {:SRC code-snippet
+                   :LINK :a #_link-handler}))
+
+
+;;   :FILETAGS (fn [v] [:meta {:name "keywords" :content (str v)}])
 
 ;; put constant data here
 (def site-data
-  {:demos {:dsl-demo
+  {: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"}
            :datalog-demo
            {:file "documents/datalog-demo.org" :git-link "https://github.com/atomjuice/dsl-demo"}
+           :honey-sql-demo
+           {:file "documents/honey-sql-demo.org" :git-link "https://github.com/atomjuice/dsl-demo"}
            :reagent-demo
            {:file "documents/reagent-reitit.org" :git-link "https://github.com/atomjuice/dsl-demo"}
            :clojure-basics
-           {:file "documents/clojure-basics.org" :git-link "https://github.com/atomjuice/dsl-demo"}}
+           {: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."})
 
@@ -68,11 +162,11 @@
 
 ;; form one component to render article tiles
 (defn articles [{:keys [title body articles]}]
-  [:section.mw7.center.avenir {:key title}
+  [:section.mw7.center.avenir 
    [:h2.baskerville.fw1.ph3.ph0-l title]
    (when body [:p body])
    (map (fn [{:keys [title author link description img-src img-alt]}]
-          [:article.bt.bb.b--black-10
+          [: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
              (when img-src
@@ -116,22 +210,29 @@
       [:h1 {:class (when @local-state "hide")
             :on-click (fn [] (swap! local-state inc))} (str title " " @local-state)])))
 
-
 ;; form one homepage component
 
-
 (defn home-page []
   [:<>
    [articles
     {:title "Clojure Demos"
      :body (-> site-data :homepage :intro)
      :articles
-     [{:title "Clojure Basics"
+     [{:title "Sci Example"
+       :link (rfe/href ::demo {:page "sci-demo"})
+       :img-src "https://clojure.org/images/clojure-logo-120b.png"}
+      {:title "Clojure Basics"
        :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"
+       :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"}
@@ -146,13 +247,18 @@
     (GET (-> 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->replacements theme)
                        (reset! content)))})
     (fn [route]
       [:main.mt4
-       [:div.mw7.center.avenir  @content]])))
+       ;(org->replacements theme [:LINE "" [:LINK {:href "https://github.com/weavejester/hiccup"} "https://github.com/weavejester/hiccup"]])
+       #_(str (org->replacements theme [:LINE "" [:LINK {:href "https://github.com/weavejester/hiccup"} "https://github.com/weavejester/hiccup"]]))
+       [:div.mw7.center.avenir (into [:div] @content)]])))
+
 
 ;; form one render about page component
 (defn about-page []
@@ -185,7 +291,6 @@
 ;; or just render the rest of the page if all is good
 ;; this uses =create-class= and a hash map of life cycle functions
 
-
 (defn err-boundary
   [& children]
   (let [err-state (reagent/atom nil)]
@@ -228,17 +333,16 @@
    [:main.mt4
     (when-let [view (-> @site-state :current-route :data :view)] [view (-> @site-state :current-route)])]])
 
-
 ;; This simply calls reagent render and puts the result in a div with the id of app
 ;; you can create your own index.html or figwheel provides one with the app id which will replace the default data
 ;; ^:after-load is meta data its not needed but informs figwheel to run this code after a page load
 
-
 (defn mount-root-page []
   ;; this select the main node from the html file and injects your page content
-  (reagent/render
+  (.render
-   (fn [] [err-boundary [current-page]])
+   (createRoot (.getElementById js/document "app"))
-   (.getElementById js/document "app")))
+   (reagent/as-element [err-boundary [current-page]])
+   ))
 
 (defn ^:after-load render-site []
   ;; this select the main node from the html file and injects your page content
@@ -258,5 +362,6 @@
 
 (comment
   @site-state
+  (org->replacements tachyon-theme [[:SRC {:LANGUAGE "shell"} "hi"]])
 
   (GET "/test.org" {:handler (fn [response] (swap! site-state assoc :content response))}))

reagent-reitit-demo/src/demo/core.cljs

@@ -1,222 +0,0 @@
-(ns ^:figwheel-hooks demo.core
-  (:require [reagent.core :as reagent]
-            [ajax.core :refer [GET raw-response-format]]
-            ;[demo.org :refer [parse->to-hiccup parse-flat]]
-            [cl-eorg.parser :as o :refer [parse parse-flat]]
-            [cl-eorg.html :refer [org->replacements]]
-            [reitit.frontend :as rf]
-            [reitit.frontend.easy :as rfe]
-            [reitit.coercion.spec :as rss]
-            [spec-tools.data-spec :as ds]))
-
-;; put constant data here
-(def site-data
-  {:demos {:dsl-demo
-           {:file "dsl-demo.org" :git-link "https://github.com/atomjuice/dsl-demo"}
-           :datalog-demo
-           {:file "datalog-demo.org" :git-link "https://github.com/atomjuice/dsl-demo"}
-           :reagent-demo
-           {:file "reagent-reitit.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."})
-
-;; Store site state
-(defonce site-state (reagent/atom {}))
-
-;; for one component to render an article
-(defn article [{:keys [title description tagline]}]
-  [:article {:data-name "article-full-bleed-background"}
-   [:div.cf {:style {:background "url(http://placekitten.com/g/600/300)"
-                     :no-repeat "center center fixed" :background-size "cover"}}
-    [:div.fl.pa3.pa4-ns.bg-white.black-70.measure-narrow.f3.times
-     [:header.b--black-70.pv4 {:class (when tagline "bb")}
-      [:h3.f2.fw7.ttu.tracked.lh-title.mt0.mb3.avenir title]
-      (when tagline [:h4.f3.fw4.i.lh-title.mt0 tagline])]
-     [:section.pt5.pb4 [:p.times.lh-copy.measure.f4.mt0 description]]]]])
-
-;; form one component to render article tiles
-(defn articles [{:keys [title body articles]}]
-  [:section.mw7.center.avenir {:key title}
-   [:h2.baskerville.fw1.ph3.ph0-l title]
-   (when body [:p body])
-   (map (fn [{:keys [title author link description img-src img-alt]}]
-          [:article.bt.bb.b--black-10
-           [:a.db.pv4.ph3.ph0-l.no-underline.black.dim {:href link}
-            [:div.flex.flex-column.flex-row-ns
-             (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]]]]])
-        articles)])
-
-;; form one component to render a product
-(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]]])
-
-(defn circle [{:keys [img alt]}]
-  [:div.pa4.tc [:img.br-100.ba.h3.w3.dib {:src img :alt alt}]])
-
-
-;; form one component ro render a nav link
-
-
-(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])
-
-;; 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)]])
-
-(defn my-component [title]
-  (let [local-state (reagent/atom true)]
-    (fn []
-      [:h1 {:class (when @local-state "hid")
-            :on-click (fn [] (swap! local-state not))} title])))
-
-
-;; form one homepage component
-
-
-(defn home-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 "Datalog Demo"
-                 :link (rfe/href ::demo {:page "datalog-demo"})
-                 :img-src "https://raw.githubusercontent.com/tonsky/datascript/master/extras/logo.svg"}
-                {:title "Reagent Demo"
-                 :link (rfe/href ::demo {:page "reagent-demo"})
-                 :img-src "https://raw.githubusercontent.com/reagent-project/reagent/master/logo/logo-text.png"}]}]])
-
-;; form two component render demo
-(defn demo-page [route]
-  (let [demo-key (keyword (-> route :parameters :path :page))
-        content (reagent/atom {})]
-    (GET (-> site-data :demos demo-key :file)
-      {:response-format (raw-response-format)
-       :handler (fn [response]
-                  (->> response
-                       parse
-                       org->replacements
-                       (reset! content))
-                  #_(reset! content (org->replacements (parse response))))})
-    (fn [route]
-      [:main.mt4
-       [:div.mw7.center.avenir  @content]])))
-
-;; form one render about page component
-
-
-(defn about-page []
-  [:main.mt4
-   [:section.mw7.center.avenir
-    [:h1 "Clojure library examples to aid learning"]
-    [:p "Selection of clojure demos, rendered in reagent which itself is an example of using reagent."]
-    [my-component "component 1"]
-    [my-component "component 2"]
-    [circle {:alt "test"}]
-    [article {:title "Article"
-              :description (-> site-data :lorem)
-              :tagline "tagline here"}]
-    [:div.flex.flex-column.flex-row-ns
-     [product-card
-      {:title "Cat 01"
-       :amount "£54.59"
-       :description "Cat description here"
-       :link "http://placekitten.com/g/600/300"}]
-     [product-card
-      {:title "Cat 02"
-       :amount "£10.59"
-       :description "Cat description here"
-       :link "http://placekitten.com/g/600/300"}]]]])
-
-;; form 3 component wrap rendering to catch errors and render them
-;; or just render the rest of the page if all is good
-;; this uses =create-class= and a hash map of life cycle functions
-(defn err-boundary
-  [& children]
-  (let [err-state (reagent/atom nil)]
-    (reagent/create-class
-     {:display-name "ErrBoundary"
-      :component-did-catch (fn [err info]
-                             (reset! err-state [err info]))
-      :reagent-render (fn [& children]
-                        (if (nil? @err-state)
-                          (into [:<>] children)
-                          (let [[_ info] @err-state]
-                            [:pre [:code (pr-str info)]])))})))
-
-;; define our routes, just nested vectors of the route definition hash maps
-(def routes
-  [["/"
-    {:name ::frontpage
-     :my-data "hi"
-     :view home-page}]
-
-   ["/about"
-    {:name ::about
-     :view about-page}]
-
-   ["/demo/:page"
-    {:name ::demo
-     :view demo-page
-     :parameters {:path {:page string?}
-                  :query {(ds/opt :foo) keyword?}}}]])
-
-;; top level component contains nav and adds in the select page into a containing element
-;; we are adding in a style sheet but this will often be done in index.html
-(defn  current-page []
-  [:<> [: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 ::about) :text "About"}
-            {:href (rfe/href ::i-do-not-exist) :text "missing"}]]
-   [:main.mt4
-    (when-let [view (-> @site-state :current-route :data :view)] [view (-> @site-state :current-route)])]])
-
-
-;; This simply calls reagent render and puts the result in a div with the id of app
-;; you can create your own index.html or figwheel provides one with the app id which will replace the default data
-;; ^:after-load is meta data its not needed but informs figwheel to run this code after a page load
-
-
-(defn mount-root-page []
-  ;; this select the main node from the html file and injects your page content
-  (reagent/render
-   (fn [] [err-boundary [current-page]])
-   (.getElementById js/document "app")))
-
-(defn ^:after-load render-site []
-  ;; this select the main node from the html file and injects your page content
-  (mount-root-page))
-
-(defn startup! []
-  (rfe/start!
-   (rf/router routes {:data {:coercion rss/coercion}})
-   (fn [m] (swap! site-state assoc :current-route m))
-   ;; set to false to enable HistoryAPI
-   {:use-fragment true})
-  (render-site))
-
-;; we defonce the startup so that hot reloading does not reinitialize the state of the site
-(def launch (do (startup!) true))
-
-(comment
-  @site-state
-
-  (GET "/test.org" {:handler (fn [response] (swap! site-state assoc :content response))}))