Klipse.

reagent-reitit-demo/deps.edn

@@ -1,6 +1,9 @@
 {:deps {org.clojure/clojure {:mvn/version "1.10.0"}
         org.clojure/clojurescript {:mvn/version "1.10.764"}
+
+        ;;ajax requests
         cljs-ajax {:mvn/version "0.8.1"}
+
         ;; react
         reagent {:mvn/version "0.9.1"}
         reagent-utils {:mvn/version "0.3.3"}
@@ -10,6 +13,10 @@
         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.bhauman/figwheel-main {:mvn/version "0.2.11"}}
  :paths ["src" "resources"]
  :aliases {:prod {:main-opts ["-m" "figwheel.main" "-bo" "dev"]}}}

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

@@ -56,41 +56,29 @@ Collections of data
 ;;#{1 2 1 3} how ever would through an error, using hash-set would remove the duplicate with out error.
 #+END_SRC
 
+* Clojure syntax
+You have basically just learnt the syntax, clojure's syntax is made from the same data structures described above this is meant literally and is called EDN.
 
-* Language syntax
+The clojure language is super simple it is always a function call followed by arguments, this applies for things like standard conditionals =and=, =or=, =not= etc
-The clojure syntax is super simple it is always a function call followed by arguments, this applies for things like standard conditionals and, or, not etc
 
 All functions return a value, this is always the last statement called inside the function.
 
 When ever you see an opening bracket the value after is always a function unless the bracket is preceded by a character in which case this is a macro a common macro is ='(1 2)= which is the same as typing (list 1 2) so a function is still the first parameter.
 
-** Basic data structures
-In clojure you will find you spend most of your time dealing with lists, vectors, maps and sets each has its own bracket notation in the language you can also call =vector=, =list=, =hash-map= and =hash-set= functions to the same effect, how ever it is far more convenient to use the shorthand.
-
 #+BEGIN_SRC clojure :tangle src/core.cljc
-(ns demo.core)
+;; this code add's two number together, its starts with a bracket and call a function called + with 2 parameters
-;; lists are denoted with brackets, but remember to use '(
+(+ 1 1)
-;; or (list function) else the first value is a function call.
-'(1 2 3)
 
-;; vectors are donoted with square brackets
+;; this code now creates a list and does not execute the + function
-[1 2 3 4]
+;; it now returns 3 items in the list the function and the two numbers
-
+(list + 1 1)
-;; hash-maps are denoted with curly braces
-;; they must always contain key value pairs.
-{:key-one 1 :key-two 2}
-
-;; sets also use curly braces but start with a #
-;; sets have to be unique so duplicates will throw an error
-#{1 2  3}
-
-;;#{1 2 1 3} how ever would through an error.
 #+END_SRC
 
+
 ** 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 first then arguments.
+This goes back to function as the first item in a list then arguments.
 
 #+BEGIN_SRC clojure :tangle src/core.cljc
 ;; This is equivalend to 1 + 2 + 3 in other languages

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

@@ -27,12 +27,7 @@
       loading here
     </div>
     <script src="/cljs-out/dev-main.js" type="text/javascript"></script>
-    <script>
+
-    window.klipse_settings = {
-        selector: '.klipse', // css selector for the html elements you want to klipsify
-    };
-    </script>
-    <script src="https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js"></script>
 </body>
 
 </html>

reagent-reitit-demo/src/core.cljs

@@ -1,6 +1,8 @@
 (ns ^:figwheel-hooks core.demo
   (:require [reagent.core :as reagent]
             [ajax.core :refer [GET raw-response-format]]
+            [klipse.run.plugin.plugin]
+            [klipse.plugin :as klipse-plugin]
             ;[demo.org :refer [parse->to-hiccup parse-flat]]
             [cl-eorg.parser :as o :refer [parse parse-flat]]
             [cl-eorg.html :refer [org->replacements]]
@@ -188,6 +190,10 @@
   (mount-root-page))
 
 (defn startup! []
+  ;; this is used for interactive code only
+  (klipse-plugin/init #js {:selector ".klipse"
+                           :selector_reagent ".klipse-reagent"})
+
   (rfe/start!
    (rf/router routes {:data {:coercion rss/coercion}})
    (fn [m] (swap! site-state assoc :current-route m))