diff --git a/.dir-locals.el b/.dir-locals.el
index 21bb118..88f3960 100644
--- a/.dir-locals.el
+++ b/.dir-locals.el
@@ -1,5 +1,5 @@
 ((clojurescript-mode .
-                     ((cider-clojure-cli-aliases        . "-M:dev") 
+                     ((cider-clojure-cli-aliases        . ":dev") 
                       (cider-preferred-build-tool       . clojure-cli) 
                       (cider-default-cljs-repl          . custom) 
                       (cider-custom-cljs-repl-init-form . "(do (user/cljs-repl))")
diff --git a/deps.edn b/deps.edn
index 1743025..deba251 100644
--- a/deps.edn
+++ b/deps.edn
@@ -35,9 +35,12 @@
         datascript/datascript {:mvn/version "1.5.1"}}
  :paths ["src" "resources"]
  :aliases {:build {:extra-deps {thheller/shadow-cljs {:mvn/version "2.23.3"}
-                                    #_#_binaryage/devtools {:mvn/version "1.0.7"}}
-                       :main-opts ["-m" "shadow.cljs.devtools.cli"]}
+                                #_#_binaryage/devtools {:mvn/version "1.0.7"}}
+                   :main-opts ["-m" "shadow.cljs.devtools.cli"]}
+ :dev {:extra-paths ["dev"]
+       :extra-deps {thheller/shadow-cljs {:mvn/version "2.23.3"}
+                    ;;binaryage/devtools {:mvn/version "1.0.7"}
+                    no.cjohansen/portfolio {:mvn/version "2023.07.15"}}}
            }
-           :dev {:extra-deps {thheller/shadow-cljs {:mvn/version "2.23.3"}
-                              ;binaryage/devtools {:mvn/version "1.0.7"}
-                              no.cjohansen/portfolio {:mvn/version "2023.07.15"}}}}
+
+ }
diff --git a/readme.org b/readme.org
index f667fdb..4dca45b 100644
--- a/readme.org
+++ b/readme.org
@@ -1,17 +1,22 @@
+#+TITLE: Getting started
+
+
+* Install dependencies and start app
+#+BEGIN_SRC sh
+npm install
+#+END_SRC
+
+#+BEGIN_SRC sh
+clojure -Mbuild watch app
+#+END_SRC
+
+
 
 Future Content
 
  - Dynamic html with macro for frontend generation on build.
  - Complete frontend backend example wth ring retit reagent 
 
-#+BEGIN_SRC sh
-npm install
-#+END_SRC
-
-#+BEGIN_SRC sh
-clojure -Mbuild-dev watch app
-#+END_SRC
-
 
 https://stacksorted.com
 
diff --git a/resources/public/documents/about.org b/resources/public/documents/about.org
index 9fea39d..15cac90 100644
--- a/resources/public/documents/about.org
+++ b/resources/public/documents/about.org
@@ -6,3 +6,6 @@
 This site has various example's guides and snippets showing how to use Clojure and ClojureScript, they are mainly based on my journey learning coming from JavaScript and python having no previous experience with java or the JVM.
 
 Some of the struggles have been around Terminology & inter-op with the host languages along side re orientating my brain to think more functionally.
+
+
+https://youtu.be/LKtk3HCgTa8
diff --git a/resources/public/documents/hiccup-dsl-demo.org b/resources/public/documents/hiccup-dsl-demo.org
index 7dff56f..f349fe5 100644
--- a/resources/public/documents/hiccup-dsl-demo.org
+++ b/resources/public/documents/hiccup-dsl-demo.org
@@ -97,19 +97,17 @@ We use map and into to convert the stats value
 (defn playing-card
   [{:keys [title image stats]}]
   [:article
-   [:div.border-solid.border-2.border-sky-500.m-4.w-100
-    [:div.dt.w-100.mt1
-     [:div [:h1.f5.f4-ns.mv0 title]]
-     [:img.db.w-100.h-100.br2.br--top {:src image}]
-
-     #_[:div.dtc.tr [:h2.f5.mv0 "amount"]]]
-    (into [:ul.ma2.pa2]
+   [:div.border-solid.border-2.border-sky-500.m-4.w-64.rounded-lg
+    [:div.dt.w-full
+     [:div.m-4 [:h1.f5.f4-ns.mv0 title]]
+     [:img.db.w-full.h-100.br2.br--top {:src image}]]
+    (into [:ul.m-4]
           (mapv (fn build-stats [[stat value]]
-                  [:li [:div stat [:div.fr (str value)]]])
+                  [:li [:div stat [:div.float-right (str value)]]])
                 stats))
-    [:p.f6.lh-copy.measure.mt2.mid-gray ""]]])
+    [:p.f6.lh-copy.measure.mt-2.mid-gray ""]]])
 
-[:div
+[:div.flex.flex-wrap
  [playing-card
   {:title "Bee"
    :image "https://loremflickr.com/300/300/bee"
diff --git a/resources/public/index.html b/resources/public/index.html
index f8367e8..4224812 100644
--- a/resources/public/index.html
+++ b/resources/public/index.html
@@ -28,11 +28,7 @@
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     />
-    <link
-      rel="stylesheet"
-      type="text/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"
@@ -111,7 +107,7 @@
         color: #646763;
       }
     </style>
-    <meta name="robots" content="noindex" />
+    <meta name="robots" content="all" />
     <!-- Google tag (gtag.js) -->
     <script
       async
diff --git a/resources/public/rename-me-index.html b/resources/public/rename-me-index.html
index 7122f8d..e0c5226 100644
--- a/resources/public/rename-me-index.html
+++ b/resources/public/rename-me-index.html
@@ -43,7 +43,7 @@
       top: 12px;
       right: 12px;
     </style>
-    <meta name="robots" content="noindex" />
+    <meta name="robots" content="all" />
   </head>
 
   <body>
diff --git a/shadow-cljs.edn b/shadow-cljs.edn
index 4b4a307..79a9a71 100644
--- a/shadow-cljs.edn
+++ b/shadow-cljs.edn
@@ -1,6 +1,6 @@
 {:deps {:aliases [:dev]}
  :dev-http {8080 ["resources/public/" "classpath:public"]}
- :source ["src" "../../components"]
+ :source ["dev" "src" "../../components"]
  :builds {:app {:output-dir "resources/public/cljs-out/"
                 :asset-path "/cljs-out"
                 :target :browser
diff --git a/src/clojure_demo/core.cljs b/src/clojure_demo/core.cljs
index 84fe430..204ca32 100644
--- a/src/clojure_demo/core.cljs
+++ b/src/clojure_demo/core.cljs
@@ -33,96 +33,10 @@
    [sci.configs.tonsky.datascript :as sci-datascript]
    [clojure-demo.routes :refer [site-data routes]]
    [clojure-demo.sitemap :as sm #_#_:refer [spit-pwa-sitemap]]
-   [tick.core :as t])
+   [tick.core :as t]
+   (clojure-demo.sci-init :refer [sci-ctx yaml-mode]))
   #_(:require-macros [clojure-demo.sitemap :as sm #_#_:refer [spit-pwa-sitemap]]))
 
-(def languages
-  {"clojure" {:mode "clojure"}
-   "clojurescript" {:mode "clojure"}
-   "html" {:mode "html"}
-   "json" {:mode "json"}
-   "yaml" {:mode "yaml"}})
-
-(def yaml-mode (LanguageSupport. (.define StreamLanguage yaml)))
-
-(defn ^:sci/macro my-js-await
-  [_ _ [name thenable] & body]
-  (let [last-expr (last body)
-        [body catch]
-        (if (and (seq? last-expr) (= 'catch (first last-expr)))
-          [(butlast body) last-expr]
-          [body nil])]
-
-    ;; FIXME: -> here will always return a promise so shouldn't be necessary to add js hint?
-    `(-> ~thenable
-         ~@(when (seq body)
-             [`(.then (fn [~name] ~@body))])
-         ~@(when catch
-             (let [[name & body] catch]
-               [`(.catch (fn [~name] ~@body))])))))
-
-;; https://github.com/babashka/sci.configs
-(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))
-(def sql-ns (sci/create-ns 'honey.sql.core nil))
-(def sqlh-ns (sci/create-ns 'honey.sql.helpers nil))
-(def shadow-ns (sci/create-ns 'shadow.cljs.modern nil))
-(def xml-ns (sci/create-ns 'clojure.data.xml nil))
-(def tick-ns (sci/create-ns 'tick.core nil))
-
-;; core async does not work with sci
-(def async-ns (sci/create-ns 'cljs.core.async nil))
-(def async-in-ns (sci/create-ns 'cljs.core.async.interop nil))
-
-;; https://github.com/babashka/sci.configs
-(def sci-ctx
-  (sci/init
-   {:classes {'js js/globalThis :allow :all}
-    :features #{:cljs}
-    :aliases {'promesa 'promesa.core
-              'reagent 'reagent.core
-              'd 'datascript.core}
-    :namespaces
-    {'reagent.core sci-reagent/reagent-namespace
-     'reagent.ratom sci-reagent/reagent-ratom-namespace
-     ;'reagent.dom.server sci-reagent-server/namespaces
-     'promesa.core sci-promesa/promesa-namespace
-     'datascript.core sci-datascript/core-namespace
-     'datascript.db sci-datascript/db-namespace
-
-     ;'h {'html (sci/copy-var h/html hc-ns)}
-     ;'async {'go (sci/copy-var async/go async-ns)}
-     ;'shadow {'js-await (sci/copy-var js-await shadow-ns)}
-     'shadow {'js-await (sci/copy-var my-js-await shadow-ns)}
-     ;'async-in {'<p! (sci/copy-var async-in/<p! async-in-ns)}
-     'tick {'format (sci/copy-var t/format tick-ns)
-            'zoned-date-time (sci/copy-var t/zoned-date-time tick-ns)}
-     'xml {'emit-str (sci/copy-var xml/emit-str xml-ns)
-           ;; dont think indent-str & alias uri is supported in clojurescript
-           ;;'indent-str (sci/copy-var xml/indent-str xml-ns)
-           ;;'alias-uri (sci/copy-var xml/alias-uri xml-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)
-            'values (sci/copy-var sqlh/values sqlh-ns)
-            'on-conflict (sci/copy-var sqlh/on-conflict sqlh-ns)
-            'do-update-set (sci/copy-var sqlh/do-update-set sqlh-ns)
-            'insert-into (sci/copy-var sqlh/insert-into sqlh-ns)
-            'order-by (sci/copy-var sqlh/order-by 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 sci-ctx  (sci/empty-environment))
-(sci/alter-var-root sci/print-fn (constantly *print-fn*))
 
 (defn fetch-selected-text
   "Get the users selected text"
@@ -144,16 +58,12 @@
   (let [err-state (reagent/atom nil)]
     (reagent/create-class
      {:display-name "Error Boundary"
-;      :component-did-catch (fn [this err info] #_(reset! err-state [err info]))
       :get-derived-state-from-error (fn [e]
                                       (reset! err-state e #_[err info])
                                       #js {})
       :reagent-render (fn [children]
                         (if @err-state
-                          [:div (str @err-state)]
-                          children
-                          ;(into [:<>] children)
-                          ))})))
+                          [:div (str @err-state)] children))})))
 
 (defn code-editor
   [{:keys [exports class results]} content]
@@ -211,6 +121,19 @@
                                  "silent" ""
                                  @evaled-result)]])]))})))
 
+(defn link-handler [v _]
+  (cond
+    (str/starts-with? (str (:href v)) "https://youtu.be/")
+    [:iframe {:src (:href v)
+              :title "YouTube video player"
+              :width "560"
+              :height "315"
+              :frameborder "0"
+              :allow "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"}]
+    :else [:a {:href (:href v)} (str v)]
+    )
+  )
+
 (def theme-tachyon
   (merge tachyon-theme
          {:SRC code-editor
@@ -229,9 +152,9 @@
           :HEADER3 header-lvl3 #_(fn [v _] [:h2.text-base.lh-title.mt-0.mb-2 {:id (slugify v)} [:a {:name (slugify v)} v]])
           :LINE :p.f5.f5-ns.lh-copy.mt0
           :BULLETS :ul.mt0
-          :LINK :a #_link-handler}))
+          :LINK link-handler}))
 
-#_(def theme-toc-tachyon
+(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]]])
@@ -449,7 +372,7 @@
                       (-> site-data :pages))
                 [{:title "About page" :href (rfe/href :about) :text "About" :key "about"}
                  #_{:href (rfe/href ::i-do-not-exist) :text "missing"}])]
-       [:main.m-auto {:class "w-3/5"}
+       [:main.m-auto {:class "w-3/5 md:w-4/5"}
         (when-let [view (-> @route :data :view render-view)]
           [:div
            [view @route]])]
diff --git a/src/clojure_demo/routes.cljc b/src/clojure_demo/routes.cljc
index 8a36ad5..18f1521 100644
--- a/src/clojure_demo/routes.cljc
+++ b/src/clojure_demo/routes.cljc
@@ -62,7 +62,7 @@
                                :description "Using data.xml to generate a sitemap"
                                :page "example-xml-sitemap"
                                :icon-image "https://avatars.githubusercontent.com/u/2181346?s=200&v=4"}]}
-           :terminology {:title "Terminology"
+           #_#_:terminology {:title "Terminology"
                          :intro ""
                          :key :terminology}}
    :demos
diff --git a/src/clojure_demo/sci_init.cljs b/src/clojure_demo/sci_init.cljs
new file mode 100644
index 0000000..aadc4c0
--- /dev/null
+++ b/src/clojure_demo/sci_init.cljs
@@ -0,0 +1,124 @@
+(ns clojure-demo.sci-init
+    (:require
+   ["@codemirror/language" :refer [LanguageSupport StreamLanguage]]
+   ["@codemirror/legacy-modes/mode/yaml" :refer [yaml]]
+   ["@codemirror/state" :as cm-state :refer [EditorState Transaction]]
+   ["@codemirror/theme-one-dark" :refer [oneDark]]
+   ["@codemirror/view" :as cm-view :refer [EditorView ViewUpdate]]
+   ["@nextjournal/lang-clojure" :refer [clojure]]
+   ["react-dom/client" :refer [createRoot]]
+   ["tarts" :as tarts]
+   [ajax.core :refer [GET raw-response-format]]
+   [cl-eorg.html :as h :refer [body headers org->replacements]]
+   [cl-eorg.parser :as o :refer [parse]]
+   [cl-eorg.themes.tachyon :refer [tachyon-theme]]
+   [clojure-demo.components
+    :refer [header-lvl1 header-lvl2 header-lvl3 notification]]
+   [clojure-demo.helpers :refer [slugify]]
+   [clojure-demo.state :refer [site-state]]
+   [clojure-demo.tailwind-theme :refer [tailwind-theme]]
+   [clojure.data.xml :as xml]
+   [clojure.string :as str]
+   [honey.sql :as sql]
+   [promesa.core :as promesa]
+   [honey.sql.helpers :as sqlh]
+   [reagent.core :as reagent]
+   [reitit.coercion.spec :as rss]
+   [reitit.frontend :as rf]
+   [reitit.frontend.easy :as rfe]
+   [reitit.frontend.history :refer [ignore-anchor-click?]]
+   [sci.core :as sci]
+   [sci.configs.funcool.promesa :as sci-promesa]
+   [sci.configs.reagent.reagent :as sci-reagent]
+   [sci.configs.tonsky.datascript :as sci-datascript]
+   [clojure-demo.routes :refer [site-data routes]]
+   [clojure-demo.sitemap :as sm #_#_:refer [spit-pwa-sitemap]]
+   [tick.core :as t]))
+
+(def languages
+  {"clojure" {:mode "clojure"}
+   "clojurescript" {:mode "clojure"}
+   "html" {:mode "html"}
+   "json" {:mode "json"}
+   "yaml" {:mode "yaml"}})
+
+(def yaml-mode (LanguageSupport. (.define StreamLanguage yaml)))
+
+(defn ^:sci/macro my-js-await
+  [_ _ [name thenable] & body]
+  (let [last-expr (last body)
+        [body catch]
+        (if (and (seq? last-expr) (= 'catch (first last-expr)))
+          [(butlast body) last-expr]
+          [body nil])]
+
+    ;; FIXME: -> here will always return a promise so shouldn't be necessary to add js hint?
+    `(-> ~thenable
+         ~@(when (seq body)
+             [`(.then (fn [~name] ~@body))])
+         ~@(when catch
+             (let [[name & body] catch]
+               [`(.catch (fn [~name] ~@body))])))))
+
+;; https://github.com/babashka/sci.configs
+(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))
+(def sql-ns (sci/create-ns 'honey.sql.core nil))
+(def sqlh-ns (sci/create-ns 'honey.sql.helpers nil))
+(def shadow-ns (sci/create-ns 'shadow.cljs.modern nil))
+(def xml-ns (sci/create-ns 'clojure.data.xml nil))
+(def tick-ns (sci/create-ns 'tick.core nil))
+
+;; core async does not work with sci
+(def async-ns (sci/create-ns 'cljs.core.async nil))
+(def async-in-ns (sci/create-ns 'cljs.core.async.interop nil))
+
+;; https://github.com/babashka/sci.configs
+(def sci-ctx
+  (sci/init
+   {:classes {'js js/globalThis :allow :all}
+    :features #{:cljs}
+    :aliases {'promesa 'promesa.core
+              'reagent 'reagent.core
+              'd 'datascript.core}
+    :namespaces
+    {'reagent.core sci-reagent/reagent-namespace
+     'reagent.ratom sci-reagent/reagent-ratom-namespace
+     ;'reagent.dom.server sci-reagent-server/namespaces
+     'promesa.core sci-promesa/promesa-namespace
+     'datascript.core sci-datascript/core-namespace
+     'datascript.db sci-datascript/db-namespace
+
+     ;'h {'html (sci/copy-var h/html hc-ns)}
+     ;'async {'go (sci/copy-var async/go async-ns)}
+     ;'shadow {'js-await (sci/copy-var js-await shadow-ns)}
+     'shadow {'js-await (sci/copy-var my-js-await shadow-ns)}
+     ;'async-in {'<p! (sci/copy-var async-in/<p! async-in-ns)}
+     'tick {'format (sci/copy-var t/format tick-ns)
+            'zoned-date-time (sci/copy-var t/zoned-date-time tick-ns)}
+     'xml {'emit-str (sci/copy-var xml/emit-str xml-ns)
+           ;; dont think indent-str & alias uri is supported in clojurescript
+           ;;'indent-str (sci/copy-var xml/indent-str xml-ns)
+           ;;'alias-uri (sci/copy-var xml/alias-uri xml-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)
+            'values (sci/copy-var sqlh/values sqlh-ns)
+            'on-conflict (sci/copy-var sqlh/on-conflict sqlh-ns)
+            'do-update-set (sci/copy-var sqlh/do-update-set sqlh-ns)
+            'insert-into (sci/copy-var sqlh/insert-into sqlh-ns)
+            'order-by (sci/copy-var sqlh/order-by 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 sci-ctx  (sci/empty-environment))
+(sci/alter-var-root sci/print-fn (constantly *print-fn*))