diff --git a/reagent-reitit-demo/resources/public/documents/clojure-basics.org b/reagent-reitit-demo/resources/public/documents/clojure-basics.org index 15ad412..5d61568 100644 --- a/reagent-reitit-demo/resources/public/documents/clojure-basics.org +++ b/reagent-reitit-demo/resources/public/documents/clojure-basics.org @@ -10,6 +10,27 @@ Clojure is a very dynamic and interactive language that can give you very in-dep 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. + +#+BEGIN_SRC edn :results silent :tangle deps.edn +{:paths ["src" "resources"] + :deps + {org.clojure/clojure {:mvn/version "1.10.0"} + org.clojure/clojurescript {:mvn/version "1.11.60"}}} +#+END_SRC + + +#+BEGIN_SRC text :results silent :tangle readme.org +#+TITLE: Getting started + +* Install the npm requirements. + +npx install + +* Launch shadow-cljs watch for source code changes +npx shadow-cljs watch app +#+END_SRC + + ** Clojure comments There a few ways to comment code in this language. diff --git a/reagent-reitit-demo/resources/public/documents/reagent-reitit.org b/reagent-reitit-demo/resources/public/documents/reagent-reitit.org index e58bacd..123ce5e 100644 --- a/reagent-reitit-demo/resources/public/documents/reagent-reitit.org +++ b/reagent-reitit-demo/resources/public/documents/reagent-reitit.org @@ -3,9 +3,6 @@ * Introduction Reagent is a popular react wrapper in the clojurescript it greatly simplify build react SPA Applications this is usually a good starting point when learning, but there are lots of other options that are worth considering. -* Components -The basis of any react app is components these are small snippets of html which can be composed to build up a page, -reagent provides 3 main ways to create components dependant on the complexity needed most of the time you will create form 1 and form 2 components. #+BEGIN_SRC html :results silent :exports none :tangle resources/public/index.html @@ -24,15 +21,13 @@ reagent provides 3 main ways to create components dependant on the complexity ne #+END_SRC - #+BEGIN_SRC edn :results silent :tangle deps.edn {:paths ["src" "resources"] :deps {org.clojure/clojure {:mvn/version "1.10.0"} org.clojure/clojurescript {:mvn/version "1.11.60"} reagent/reagent {:mvn/version "1.2.0"} - thheller/shadow-cljs {:mvn/version "2.24.0"}} - } + thheller/shadow-cljs {:mvn/version "2.24.0"}}} #+END_SRC #+BEGIN_SRC edn :results silent :tangle shadow-cljs.edn @@ -84,6 +79,10 @@ npx shadow-cljs watch app #+END_SRC +* Components +The basis of any react app is components these are small snippets of html which can be composed to build up a page, +reagent provides 3 main ways to create components dependant on the complexity needed most of the time you will create form 1 and form 2 components. + ** Form 1 components Form one components are the most basic simply rendering some html with values that are not going to change. @@ -175,7 +174,7 @@ Form two components are used so we can track local state of a component, this is 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 +#+BEGIN_SRC clojurescript :results output :tangle src/clojure_demo/core.cljs (defn err-boundary [& children] (let [err-state (reagent/atom nil)] @@ -207,15 +206,29 @@ If we wish to capture a node we can use =:ref= and store the result in an atom, #+BEGIN_SRC json :tangle src/clojure_demo/core.cljs -(defn current-page []) +(defn current-page [] + [:div + [:div.flex + [product-card + {:title "Cat 01" + :amount "£54.59" + :description "Cat 1 description here" + :link "http://placekitten.com/g/600/300"}] + [product-card + {:title "Cat 02" + :amount "£34.59" + :description "Cat 2 description here" + :link "http://placekitten.com/g/600/300"}]] + [my-component "Clickable component" 1] + [:div [my-address-form]]]) (defn mount-root-page [] - ;; this select the main node from the html file and injects your page content - (.render - (createRoot (.getElementById js/document "app")) - (reagent/as-element [err-boundary [current-page]]))) + ;; this select the main node from the html file and injects your page content + (.render + (createRoot (.getElementById js/document "app")) + (reagent/as-element [err-boundary [current-page]]))) -(def launch (do (startup!) true)) +(def startup! (mount-root-page)) #+END_SRC diff --git a/reagent-reitit-demo/src/clojure_demo/core.cljs b/reagent-reitit-demo/src/clojure_demo/core.cljs index cae1d7b..cefd1cd 100644 --- a/reagent-reitit-demo/src/clojure_demo/core.cljs +++ b/reagent-reitit-demo/src/clojure_demo/core.cljs @@ -82,7 +82,6 @@ [] transactions)) -(defn create-arcive []) (defn code-editor [{:keys [class results]} content] @@ -136,22 +135,6 @@ "silent" "" @evaled-result)])])}))) -(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-editor @@ -306,16 +289,6 @@ (def toc (partial contains? (into #{} (map keyword [:HEADER1 :HEADER2 :HEDAER3 :HEADER4 :HEADER5 :HEADER6])))) (def org-code (partial contains? (into #{} (map keyword [:SRC])))) -;; #_(defn build-file-zip [code-blocks] -;; (let [archive (zip/JSZip.)] -;; (mapv (fn [block] #js -;; (.file archive (:tangle (second block)) (last block)) - -;; {:name (:tangle (second block)) -;; :content (last block)}) code-blocks ) - -;; ) -;; ) (defn build-file-tar [code-blocks] (tarts (clj->js (mapv (fn [block] {:name (str (:tangle (second block))) @@ -330,7 +303,7 @@ (group-by (fn [block] (:tangle (second block)))) (reduce (fn [m [k v]] (conj m {:name (str k) - :content (str (clojure.string/join "" (mapv last v)))})) []))) + :content (str (clojure.string/join "\n\n" (mapv last v)))})) []))) (defn org->split2 "Split out meta and body" @@ -383,29 +356,9 @@ org->split2 (reset! content)))}) (fn [route] -<<<<<<< HEAD - [:main.mt4.mw7.center.avenir - - [:h1.f3.f2-ns (:content (last (first (:header @content))))] - [:div.mw7.center.avenir - (into [:ol] (org->replacements theme-toc (:toc @content)))] - [:p "The code in these examples is evaluated when modified, you can highlight a partial expression to evalute the selection, You can also download the code as a tar if you like and use it in your favourite editor."] - [:a.f6.link.dim.ph3.pv2.mb2.dib.white.bg-dark-blue - {:download "test.tar" - :href (.createObjectURL - js/URL - (js/Blob. #js [(build-file-tar-hm - (build-tarts-map - (:code @content)))] - {:type "application/tar"}))} - "Download Code"] - [:div.mw7.center.avenir - (into [:div] (org->replacements theme (:body @content)))]]))) -======= (if @content [:main.mt4.mw7.center.avenir [my-address-form] - (slugify (:content (last (first (:header @content))))) [:h1.f3.f2-ns (:content (last (first (:header @content))))] [:div.mw7.center.avenir (into [:ol] (org->replacements theme-toc (:toc @content)))] @@ -422,8 +375,6 @@ "Download Code"] [:div.mw7.center.avenir (into [:div] (org->replacements theme (:body @content)))]] ->>>>>>> a6c9ed1 (Updated reagent info.) - [:<>])))) ;; form one render about page component