Merge branch 'master' of ssh://git.digitaloctave.com:10022/oly/clojure-demos

datalog-demo/resources/public/rename-me-index.html

@@ -5,7 +5,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>Atom Juice Merchant Website</title>
+    <title>Clojure demos</title>
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     <meta name="theme-color" content="#ffffff">

reagent-reitit-demo/deps.edn

@@ -1,15 +1,25 @@
 {: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"}
         olymk2/cl-org {:git/url "https://gitlab.com/olymk2/cl-org.git"
-                       :sha "c366560dd59e16759ca24209b253f55e46ecbbe3"}
+                       :sha "2bb6f41b317749ea3467987ea57ee7807b59d921"}
-        ;;rouoting
+        ;;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"}
+        viebel/klipse {:mvn/version "7.9.1"}
+        datascript {:mvn/version "1.0.0"}
+
+
         com.bhauman/figwheel-main {:mvn/version "0.2.11"}}
  :paths ["src" "resources"]
  :aliases {:prod {:main-opts ["-m" "figwheel.main" "-bo" "dev"]}}}

reagent-reitit-demo/dev.cljs.edn

@@ -5,4 +5,4 @@
  :source-map true
  :source-map-timestamp true
  :devcards true
- :main demo.core}
+ :main clojure-demo.core}

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

@@ -10,6 +10,12 @@ clojure -m figwheel.main --build dev --repl
 #+END_SRC
 
 * 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
+  (:require [datascript.core :as d]))
+#+END_SRC
+
 
 See the extensive comments in the src code for a working example, also watch / read these for a good intro.
 
@@ -22,17 +28,17 @@ https://tonsky.me/blog/the-web-after-tomorrow/
 
 
 ** Creating a DATABASE
-Datalog databases can be schema less but a lot of the power comes from creating a schema specifying uniqueness and relations.
+Datalog databases can be schema less but a lot of the power comes from creating a schema specifying uniqueness and relations on the stored fields.
 
-*** Schema less Database
+You can create a new database using create-conn as below then empty hash map is simply a blank schema, 
-In it's simplest for we create a database connection like below.
 #+BEGIN_SRC clojurescript :tangle ./src/test.cljs
   (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
-  (d/transact! demo-conn   [{:user/name "Oly" :user/img "me.jpg"} {:user/name "Sam" :user/img "you.jpg"}])
+(d/transact! demo-conn   [{:user/name "Brooke" :user/img "me.jpg"} {:user/name "Kalvin" :user/img "you.jpg"}])
 #+END_SRC
 
 *** Using a Schema
@@ -44,18 +50,18 @@ In this example we are saying name is unique and rooms has a many to one relatio
   (def demo-conn (d/create-conn schema))
 #+END_SRC
 
-Transacting this data would mean Oly would be inserted once but the image will be updated to =you.jpg=
+Transacting this data would mean Brooke would be inserted once but the image will be updated to =you.jpg=
 #+BEGIN_SRC clojurescript :tangle ./src/test.cljc
-  (d/transact! demo-conn   [{:user/name "Oly" :user/img "me.jpg"} {:user/name "Oly" :user/img "you.jpg"}])
+  (d/transact! demo-conn   [{:user/name "Brooke" :user/img "you.jpg"}])
 #+END_SRC
 
 ** Querying the databases
 There are three types of queries in datalog entity lookup's pulling a tree of data or querying with =d/q=.
 
 *** Looking up an entity
-=d/entity= is used to find the entity id, using any unique piece of data for example the user =Oly= exists once so the entity db/id will be returned which can be used for further queries.
+=d/entity= is used to find the entity id, using any unique piece of data for example the user =Brooke= exists once so the entity db/id will be returned which can be used for further queries.
 #+BEGIN_SRC clojurescript :tangle ./src/test.cljc
-(d/entity @conn [:user/name "Oly"])
+(d/entity @demo-conn [:user/name "Brooke"])
 #+END_SRC
 
 *** Pull a tree of data

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

@@ -0,0 +1,273 @@
+#+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.
+
+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
+1234
+;;Doubles
+1.234
+;;BigDecimal
+2.33M
+;;Ratios are allowed
+34/3
+;;Strings are double quoted
+"Hello World"
+;;characters are backslash escaped
+\a \b \c \e \t \c
+;;Symbols (named things like function & variable) are just text
+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 
+;;booleans
+true false
+;; Null or None is just nil
+nil
+;; Regex patterns are strings prefixed with a hash symbol
+#"^Begins with this text"
+#+END_SRC
+
+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)
+'(1 2 3 4 5 6 7 8 9)
+
+;;Vectors or indexed lists are created with square brackets
+;;or using the long form vector function
+[1 2 3 4 5 6 7 8 9]
+(vector 1 2 3 4 5 6 7 8 9)
+
+;; hash-maps are denoted with curly braces or calling hash-map function
+;; they must always contain key value pairs.
+{:key-one 1 :key-two 2}
+(hash-map :key-one 1 :key-two 2)
+
+;; sets also use curly braces but start with a # or you can call hash-set function
+;; sets have to be unique so duplicates will throw an error
+#{1 2 3}
+(hash-set 1 2 3)
+;;#{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.
+
+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
+
+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.
+
+#+BEGIN_SRC clojure :tangle src/core.cljc
+;; this code add's two number together, its starts with a bracket and call a function called + with 2 parameters
+(+ 1 1)
+
+;; this code now creates a list and does not execute the + function
+;; it now returns 3 items in the list the function and the two numbers
+(list + 1 1)
+#+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 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
+(+ 1 2 3)
+
+;; When using multiple operators just nest them.
+(* 2 (+ 1 2 3))
+#+END_SRC
+
+
+** 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.
+
+#+BEGIN_SRC clojure :tangle src/core.cljc
+;; These define variable Which can not change
+(def my-string "A string once set does not change")
+(def my-number 3.14)
+
+;; If you want to change your variables you need to define your variable as an atom
+;; Where possible you want to avoid this, the language is immutable by design to help avoid bugs
+;; any variable that can be arbitarily changed like atom's means any piece of code can change the value
+;; and potentially cause issues when used else where in functions that did not expect the new value
+(def my-atom-string (atom "A string once set does not change"))
+(def my-atom-number (atom 3.14))
+(def my-atom-hashmap (atom {:one 1 :two 2}))
+
+;;One important thig to remember is that to access the values of an atom you need to prepend an @
+;;when using functions that change an atom you do not need the @
+;;@ is shorthand for the deref function
+@my-atom-string
+@my-atom-number
+@my-atom-hashmap
+
+;; Atoms are changed by calling functions which change the value in a thread safe fashion
+;; reset! is to replace the value, swap! is used to update a value and takes a function to apply the update
+(reset! my-atom-string "My new string")
+;; Append to the existing string
+(swap! my-atom-string str " appended text")
+
+;; replace with empty hash map
+(reset! my-atom-hashmap {})
+;; add new key and value using assoc function
+(swap! my-atom-hashmap assoc :key-one "value")
+
+;; There is also defonce which is handy for hot reloading
+;; when your code is reloaded all variables will be reset to the inital states
+;; with defonce the values are maintained over reloads which helps when testing user flows
+;; by maintining the state the user does not need to start again
+(defonce my-atom-hashmap (atom {:ex-one "hi"}))
+(swap! my-atom-hashmap assoc :key-one "value")
+
+#+END_SRC
+
+** Conditionals
+Similar rules apply to if conditions =if=, =and=, =or= and =not= are also functions, it's also worth noting that all these function return values in other languages like python you would update a variable and the if would not directly return a value, try evaluating these to get a feel for this.
+
+When needing multiple conditions look into, =cond= =condp= or =case=
+
+#+BEGIN_SRC clojure :tangle src/core.cljc
+;; OR AND NOT can be used by there own as function calls
+(or nil 1)
+(and nil 1)
+(not true)
+
+;; These can then be mixed with the if condition function like so
+;; its important to note that the first parameter is the condition to check
+;; then the code to call followed by the else function, you can only call a single function
+(if (true? (not true))
+  1
+  2)
+
+;; If you don't need the else your better of using when
+(when (= 1 1)
+  (prn "True so print me!")
+  (prn "multiple statements aloowed in a when, only last returns a value"))
+
+;; If you need to call multiple function when only one is allowed use the do function.
+(if (true? (not true))
+  (do 
+    (prn "first thing todo")
+    (prn "second thing todo, last statement will be the return")
+    1)
+  2)
+#+END_SRC
+
+** Looping
+For the most part you will use =map= =filter= and =reduce= which apply a function for each item in a sequence of values, for the most part this is enough.
+
+You can also use loop which takes your initial values as params inside the [] block and you call recur supplying the updated values in each iteration, not calling recur will end the loop.
+
+#+BEGIN_SRC clojure :tangle src/core.cljc
+;; set n to 0 initially, increment in each loop while n is less than 5 return n value when this is no longer the case
+(loop [n 0]
+  (if (< n 5)
+    (recur (inc n)) n))
+#+END_SRC
+
+For loops are also available in a similar fashion to =loop=
+#+BEGIN_SRC clojure :tangle src/core.cljc
+;; loop over the sequence of numbers, assigning each to X until the end
+;; run any functions on the value in the rest of the body
+(for [x [1 2 3 4 5 6]]
+  (* x x))
+#+END_SRC
+
+
+** Hashmap's keyword's & De-structuring
+One of the fundamentals to working with hashmap's in clojure is that keywords are function when ever you see =:my-key= you are actually calling a function this is very different to most other languages.
+
+This has some really nice side effects, one being it is very easy to navigate your hasahmap's the example below shows how to pull out the value 2.
+
+*** Basic value fetching
+#+BEGIN_SRC clojure :tangle src/core.cljc
+(def my-hashmap {:top-lvl-key {:first-key 1 :second-key 2}})
+
+;; you can get the value in a number of ways.
+;; using neted get return the result of one get to the next
+(get (get my-hashmap :top-lvl-key) :second-key)
+;; much nicer is to use get-in and specify the path
+(get-in  my-hashmap  [:top-lvl-key :second-key])
+;; You can also call the keywords as a function 
+(:second-key (:top-lvl-key my-hashmap))
+;; or using something called a threading macro
+;; push the map through the :top-lvl-key function then the result
+;; into the :second-key function
+(-> my-hashmap :top-lvl-key :second-key)
+#+END_SRC
+
+
+You can use de-structuring in clojure to explode out keys when passed to a function.
+Using =:or= we can set default values if the key is missing, the :as keyword can be used to access the unstructured map.
+#+BEGIN_SRC clojure :tangle src/core.cljc
+(defn my-fn [{:keys [id name value missing] :or {missing "not set"} :as my-hashmap}]
+  [id name value missing my-hashmap])
+
+(my-fn {:id 1 :name "bob" :value 456})
+#+END_SRC
+
+
+* Wierd symbol's
+There is a good reference on the symbols in clojure in the link below when you encounter one your not sure about.
+https://clojure.org/guides/weird_characters
+
+Below you will find some simple examples, it is worth noting that some of the wierd symbols are just shorthand for a longer function name calls.
+
+=:= Colon indicates a keyword's
+
+;; :: Double colon makes a namespaced keyword, what ever is defined at the top of your file under (ns)
+;; will be pre pended to the keyword
+
+;; , comma is just white space and is used only for readability to the user
+
+;; #( is an annoymous function (fn [param1] (prn param1)) is equivalent to #(prn %) % being param1
+;; you can also use %1 %2 %3 etc to refernce other params, longer form is prefered because the params are named
+;; but for very short small functions this variant can be handy
+
+;; -> is the threading macro, basically the result of each statement is passed to the next
+;; 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
+;; a sequence as the last parameter
+
+;; '( this is the same as writting (list 1 2 3) the ' denotes we are using the list function
+
+;; #_ this is the comment block it
+
+
+#+BEGIN_SRC clojure :tangle src/core.cljc
+;; : Colon indicates a keyword's
+
+;; :: Double colon makes a namespaced keyword, what ever is defined at the top of your file under (ns)
+;; will be pre pended to the keyword
+
+;; , comma is just white space and is used only for readability to the user
+
+;; #( is an annoymous function (fn [param1] (prn param1)) is equivalent to #(prn %) % being param1
+;; you can also use %1 %2 %3 etc to refernce other params, longer form is prefered because the params are named
+;; but for very short small functions this variant can be handy
+
+;; -> is the threading macro, basically the result of each statement is passed to the next
+;; 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
+;; a sequence as the last parameter
+
+;; '( this is the same as writting (list 1 2 3) the ' denotes we are using the list function
+
+;; #_ this is the comment block it
+#+END_SRC
+

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

@@ -0,0 +1,86 @@
+#+TITLE: Minimal clojurescript project demoing datalog queries
+
+* 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 
+
+#+BEGIN_SRC sh
+clojure -m figwheel.main --build dev --repl
+#+END_SRC
+
+* 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
+  (:require [datascript.core :as d]))
+#+END_SRC
+
+
+See the extensive comments in the src code for a working example, also watch / read these for a good intro.
+
+https://www.youtube.com/watch?v=oo-7mN9WXTw
+http://www.learndatalogtoday.org/
+https://udayv.com/clojurescript/clojure/2016/04/28/datascript101/
+
+Blog of the dev who makes datascript
+https://tonsky.me/blog/the-web-after-tomorrow/
+
+
+** Creating a DATABASE
+Datalog databases can be schema less but a lot of the power comes from creating a schema specifying uniqueness and relations on the stored fields.
+
+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 {}))
+#+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
+(d/transact! demo-conn   [{:user/name "Brooke" :user/img "me.jpg"} {:user/name "Kalvin" :user/img "you.jpg"}])
+#+END_SRC
+
+*** Using a Schema
+In this example we are saying name is unique and rooms has a many to one relationship, when we transact data will be inserted even if its not in the schema but rules stop things like duplicates from happening.
+#+BEGIN_SRC clojurescript :tangle ./src/test.cljs
+  (def schema   {:user/name {:db/unique :db.unique/identity}
+                 :user/rooms {:db/cardinality :db.cardinality/many
+                              :db/valueType :db.type/ref}})
+  (def demo-conn (d/create-conn schema))
+#+END_SRC
+
+Transacting this data would mean Brooke would be inserted once but the image will be updated to =you.jpg=
+#+BEGIN_SRC clojurescript :tangle ./src/test.cljc
+  (d/transact! demo-conn   [{:user/name "Brooke" :user/img "you.jpg"}])
+#+END_SRC
+
+** Querying the databases
+There are three types of queries in datalog entity lookup's pulling a tree of data or querying with =d/q=.
+
+*** Looking up an entity
+=d/entity= is used to find the entity id, using any unique piece of data for example the user =Brooke= exists once so the entity db/id will be returned which can be used for further queries.
+#+BEGIN_SRC clojurescript :tangle ./src/test.cljc
+(d/entity @demo-conn [:user/name "Brooke"])
+#+END_SRC
+
+*** Pull a tree of data
+Pull is used with entity id's once you know the entity you can specify what data you want to view ='[*]= being the most common looking up all keys, you can also specify the attributes your interested in looking up including there relations to make a more specific view.
+#+BEGIN_SRC clojurescript :tangle ./src/test.cljc
+(d/pull @demo-conn '[*] 1)
+(d/pull @demo-conn '[:user/name :user/rooms] 1)
+#+END_SRC
+
+*** Querying your dataset
+Querying in datalog is all about binding variables to your entities attributes and values which you can use in you conditions or to return in the result set.
+
+In this example we return the user-id and user/name in the find clause which we looked up in the where clause by finding all attributes =:user/name= the binding the entity id and username to variables on each match to display in the find clause.
+
+#+BEGIN_SRC clojurescript :tangle ./src/test.cljc
+  (d/q '[:find ?user-entity ?user-name  :where
+         [?user-entity :user/name ?user-name]] @demo-conn)
+#+END_SRC
+
+
+
+Write some more as needed better examples in the src code.

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

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <title>Clojure demos</title>
+    <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">
+    <link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css">
+    <link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/FarhadG/code-mirror-themes/master/themes/rdark.css">
+
+    <style>
+
+.cm-s-rdark {
+	font-size: 1em;
+	line-height: 1.5em;
+	font-family: inconsolata, monospace;
+	letter-spacing: 0.3px;
+	word-spacing: 1px;
+	background: #1B2426;
+	color: #B9BDB6;
+}
+.cm-s-rdark .CodeMirror-lines {
+	padding: 8px 0;
+}
+.cm-s-rdark .CodeMirror-gutters {
+	box-shadow: 1px 0 2px 0 rgba(0, 0, 0, 0.5);
+	-webkit-box-shadow: 1px 0 2px 0 rgba(0, 0, 0, 0.5);
+	background-color: #1B2426;
+	padding-right: 10px;
+	z-index: 3;
+	border: none;
+}
+.cm-s-rdark div.CodeMirror-cursor {
+	border-left: 3px solid #B9BDB6;
+}
+.cm-s-rdark .CodeMirror-activeline-background {
+	background: #00000070;
+}
+.cm-s-rdark .CodeMirror-selected {
+	background: #E0E8FF66;
+}
+.cm-s-rdark .cm-comment {
+	color: #646763;
+}
+.cm-s-rdark .cm-string {
+	color: #5CE638;
+}
+.cm-s-rdark .cm-number {
+	color: null;
+}
+.cm-s-rdark .cm-atom {
+	color: null;
+}
+.cm-s-rdark .cm-keyword {
+	color: #5BA1CF;
+}
+.cm-s-rdark .cm-variable {
+	color: #FFAA3E;
+}
+.cm-s-rdark .cm-def {
+	color: #FFFFFF;
+}
+.cm-s-rdark .cm-variable-2 {
+	color: #FFFFFF;
+}
+.cm-s-rdark .cm-property {
+	color: null;
+}
+.cm-s-rdark .cm-operator {
+	color: #5BA1CF;
+}
+.cm-s-rdark .CodeMirror-linenumber {
+	color: #646763;
+}
+
+
+     #notification-container {
+         position: fixed;
+         z-index: 999999;
+         top: 12px;
+         right: 12px;
+    </style>
+    <meta name="robots" content="noindex">
+</head>
+
+<body>
+    <div id="app">
+      loading here
+    </div>
+    <script src="/cljs-out/dev-main.js" type="text/javascript"></script>
+
+</body>
+
+</html>

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

@@ -5,11 +5,13 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>Atom Juice Merchant Website</title>
+    <title>Clojure demos</title>
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     <meta name="theme-color" content="#ffffff">
-    <link type="text/css" href="/css/style.css" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css">
+    <link rel="stylesheet" type="text/css" href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css">
+
     <style>
      #notification-container {
          position: fixed;
@@ -25,6 +27,7 @@
       loading here
     </div>
     <script src="/cljs-out/dev-main.js" type="text/javascript"></script>
+
 </body>
 
 </html>

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

@@ -1,23 +1,55 @@
-(ns ^:figwheel-hooks core.demo
+(ns ^:figwheel-hooks clojure-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]]
+            [cl-eorg.html :refer [org->replacements tachyon-theme]]
             [reitit.frontend :as rf]
             [reitit.frontend.easy :as rfe]
             [reitit.coercion.spec :as rss]
+
+            ;; interactive 
+            [klipse.run.plugin.plugin]
+            [klipse.plugin :as klipse-plugin]
+            [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]
+  [klipse-wrapper {:content [:div.cm-s-rdark  [:pre.cm-s-rdark.bg-near-black.silver.pa2.hljs.roboto.overflow-auto.klipse content]]
+                   :settings {:selector ".klipse"
+                              :selector_reagent ".klipse"
+                              }}])
+
+(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)))
+
 ;; put constant data here
 (def site-data
   {:demos {:dsl-demo
-           {:file "dsl-demo.org" :git-link "https://github.com/atomjuice/dsl-demo"}
+           {:file "documents/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"}
+           {:file "documents/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"}}
+           {: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"}}
+   :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
@@ -26,18 +58,19 @@
 ;; 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://mrmrs.github.io/photos/12.jpg)"
+   [: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]]]]])
+     [:section.pt5.pb4 [:p.times.lh-copy.measure.f5.mt0 description]]]]])
 
 ;; form one component to render article tiles
-(defn articles [{:keys [title articles]}]
+(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}
@@ -52,8 +85,9 @@
         articles)])
 
 ;; form one component to render a product
-(defn product-card [{:keys [title amount description link]}]
+(defn product-card
-  [:article.br2.ba.dark-gray.b--black-10.mv4.w-100.w-50-m.w-25-l.mw5.center
+  [{: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
@@ -64,10 +98,7 @@
 (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
-;; 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])
 
@@ -77,29 +108,38 @@
    [:nav.f6.fw6.ttu.tracked
     (map navbar-link links)]])
 
-(defn my-component [title]
+;; form2 component notice the render function takes the same param as the component function
-  (let [local-state (reagent/atom true)]
+;; this is important, you can hit issues if you forget this in form 2 components.
-    (fn []
+(defn my-component [title value]
-      [:h1 {:class (when @local-state "hid") :on-click (fn [] (swap! local-state not))} title])))
+  (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
+
+
 (defn home-page []
   [:<>
-   [:h1 (:lorem @site-state)]
    [articles
     {:title "Clojure Demos"
-     :articles [{:title "DSL Demo"
+     :body (-> site-data :homepage :intro)
-                 :link (rfe/href ::demo {:page "dsl-demo"})
+     :articles
-                 :img-src "https://miro.medium.com/max/1400/1*CEYFj5R57UFyCXts2nsBqA.png"}
+     [{:title "Clojure Basics"
-                {:title "Datalog Demo"
+       :link (rfe/href ::demo {:page "clojure-basics"})
-                 :link (rfe/href ::demo {:page "datalog-demo"})
+       :img-src "https://clojure.org/images/clojure-logo-120b.png"}
-                 :img-src "https://raw.githubusercontent.com/tonsky/datascript/master/extras/logo.svg"}
+      {:title "DSL Demo"
-                {:title "Reagent Demo"
+       :link (rfe/href ::demo {:page "dsl-demo"})
-                 :link (rfe/href ::demo {:page "reagent-demo"})
+       :img-src "https://miro.medium.com/max/1400/1*CEYFj5R57UFyCXts2nsBqA.png"}
-                 :img-src "https://raw.githubusercontent.com/reagent-project/reagent/master/logo/logo-text.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 one render demo component
+;; form two component render demo
 (defn demo-page [route]
   (let [demo-key (keyword (-> route :parameters :path :page))
         content (reagent/atom {})]
@@ -108,29 +148,44 @@
        :handler (fn [response]
                   (->> response
                        parse
-                       org->replacements
+                       (org->replacements theme)
-                       (reset! content))
+                       (reset! content)))})
-                  #_(reset! content (org->replacements (parse response))))})
     (fn [route]
-      ;[:div  (-> route :parameters :path :page)]
       [:main.mt4
-       [my-component "component 1"]
+       [:div.mw7.center.avenir  @content]])))
-       [my-component "component 2"]
-       [circle {:alt "test"}]
-
-       [:div.mw7.center.avenir  @content]
-       #_[article {:title "Homepage"
-                   :description @content
-                   :tagline "tagline here"}]])))
 
 ;; form one render about page component
 (defn about-page []
-  [:div "about"
+  [:main.mt4
-   [product-card {:title "title" :amount "10.59" :description "long description here" :href "test-link"}]])
+   [: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 "Clickable component" 1]
+    [my-component "Clickable component" 2]
+    [:p "Image circle componenet"]
+    [circle {:img "http://placekitten.com/g/300/300" :alt "test"}]
+    [:p "Product card component"]
+    [: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"}]]
+    [:p "Article component"]
+    [article {:title "Example Article component"
+              :description (-> site-data :lorem)
+              :tagline "https://tachyons.io/components/"}]]])
 
 ;; 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)]
@@ -164,7 +219,9 @@
 ;; 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"}]
+  [:<>
+   ;;[: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 ::about) :text "About"}
             {:href (rfe/href ::i-do-not-exist) :text "missing"}]]
@@ -188,6 +245,7 @@
   (mount-root-page))
 
 (defn startup! []
+
   (rfe/start!
    (rf/router routes {:data {:coercion rss/coercion}})
    (fn [m] (swap! site-state assoc :current-route m))

spec-demo/resources/public/rename-me-index.html

@@ -5,7 +5,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>Atom Juice Merchant Website</title>
+    <title>Clojure demos</title>
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     <meta name="theme-color" content="#ffffff">