diff --git a/reagent-reitit-demo/deps.edn b/reagent-reitit-demo/deps.edn index faac1ac..f075bfd 100644 --- a/reagent-reitit-demo/deps.edn +++ b/reagent-reitit-demo/deps.edn @@ -1,6 +1,4 @@ {:deps {org.clojure/clojure {:mvn/version "1.10.0"} - ;; 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 @@ -33,4 +31,5 @@ :aliases {:prod {:main-opts ["-m" "figwheel.main" "-bo" "dev"]} :build-dev {:extra-deps {thheller/shadow-cljs {:mvn/version "2.23.3"}} :main-opts ["-m" "shadow.cljs.devtools.cli"]} - :dev {:extra-deps {thheller/shadow-cljs {:mvn/version "2.23.3"}}}}} + :dev {:extra-deps {thheller/shadow-cljs {:mvn/version "2.23.3"} + no.cjohansen/portfolio {:mvn/version "2023.07.15"}}}}} diff --git a/reagent-reitit-demo/package.json b/reagent-reitit-demo/package.json index 3160d55..cdd2fe7 100644 --- a/reagent-reitit-demo/package.json +++ b/reagent-reitit-demo/package.json @@ -8,6 +8,7 @@ "@codemirror/theme-one-dark": "^6.1.2", "@codemirror/view": "^6.10.1", "@nextjournal/lang-clojure": "^1.0.0", + "axe-core": "4.7.0", "react": "^18.2.0", "react-dom": "^18.2.0", "tarts": "^2.0.1" diff --git a/reagent-reitit-demo/resources/public/documents/ci-demo.org b/reagent-reitit-demo/resources/public/documents/ci-demo.org index f5d0415..e384472 100644 --- a/reagent-reitit-demo/resources/public/documents/ci-demo.org +++ b/reagent-reitit-demo/resources/public/documents/ci-demo.org @@ -54,17 +54,6 @@ Create a var called CHANGED_PROJECTS we can use in conditionals in later build s clojure -M:poly check #+END_SRC -** Linting -Lint code with clj-kondo this example lints src and workspace folders. -#+BEGIN_SRC yaml :tangle .github/workflows/example.yaml - # Lint the code with kondo - - name: Code Linting - uses: DeLaGuardo/clojure-lint-action@master - with: - clj-kondo-args: --lint src workspace - check-name: Linting - github_token: ${{ secrets.GITHUB_TOKEN }} -#+END_SRC ** Setup Java Install a version on java using the java action. @@ -86,6 +75,18 @@ Install clojure from the clojure action. cli: 1.10.3.933 #+END_SRC +** Linting +Lint code with clj-kondo this example lints src and workspace folders. +#+BEGIN_SRC yaml :tangle .github/workflows/example.yaml + # Lint the code with kondo + - name: Code Linting + uses: DeLaGuardo/clojure-lint-action@master + with: + clj-kondo-args: --lint src workspace + check-name: Linting + github_token: ${{ secrets.GITHUB_TOKEN }} +#+END_SRC + ** Testing changes since last release Run test but only test since the last tagged release #+BEGIN_SRC yaml :tangle .github/workflows/example.yaml @@ -107,3 +108,5 @@ We need to set the env in a previous step to make it available to future steps. cd workspace/projects/my-example-api clojure -X:uberjar #+END_SRC + +** Deploying diff --git a/reagent-reitit-demo/resources/public/documents/clojure-basics.org b/reagent-reitit-demo/resources/public/documents/clojure-basics.org index 5d61568..a6821b5 100644 --- a/reagent-reitit-demo/resources/public/documents/clojure-basics.org +++ b/reagent-reitit-demo/resources/public/documents/clojure-basics.org @@ -11,7 +11,7 @@ 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 +#+BEGIN_SRC edn :export none :results silent :tangle deps.edn {:paths ["src" "resources"] :deps {org.clojure/clojure {:mvn/version "1.10.0"} @@ -19,8 +19,10 @@ The code below can be evaluated live inside the page you can select parts of the #+END_SRC -#+BEGIN_SRC text :results silent :tangle readme.org +#+BEGIN_SRC text :export none :results silent :tangle readme.org #+TITLE: Getting started +#+END_SRC + * Install the npm requirements. diff --git a/reagent-reitit-demo/resources/public/documents/datalog-demo.org b/reagent-reitit-demo/resources/public/documents/datalog-demo.org index 3af0eae..8e1718d 100644 --- a/reagent-reitit-demo/resources/public/documents/datalog-demo.org +++ b/reagent-reitit-demo/resources/public/documents/datalog-demo.org @@ -59,7 +59,12 @@ In this example we are saying =:user/name= is unique and =:user/rooms= has a man #+BEGIN_SRC clojurescript :results verbatim :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}}) + :db/valueType :db.type/ref} + + ;; needs to be set so we can aggregate into the find query + :diagram/objects {:db/cardinality :db.cardinality/many + :db/valueType :db.type/ref} + }) (def demo-conn (d/create-conn schema)) #+END_SRC @@ -67,9 +72,23 @@ In this example we are saying =:user/name= is unique and =:user/rooms= has a man ** Transacting data Transacting this data would mean Brooke would be inserted once but the image will be updated to =you.jpg= #+BEGIN_SRC clojurescript :results verbatim :tangle ./src/test.cljc - (str (d/transact! demo-conn [{:user/name "Brooke" :user/img "you.jpg"}])) +(str (d/transact! demo-conn [{:user/name "Brooke" :user/img "you.jpg"}])) + #+END_SRC +*** Transacting related data +We can insert bulk data and include relationship information by specifying negative id's in the transaction maps. +The example below adds =circle= and =square= to =:diagram/objects= the negatives being replaced by the real entity ids. + +#+BEGIN_SRC clojurescript :results verbatim :tangle ./src/test.cljc +(d/transact! demo-conn [{:db/id -1 :object/name "circle"} + {:db/id -2 :object/name "square"} + {:db/id -3 :object/name "rectangle"} + {:diagram/objects [-1 -2]}]) +(str @demo-conn) +#+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=. @@ -96,6 +115,22 @@ In this example we return the user-id and user/name in the find clause which we [?user-entity :user/name ?user-name]] @demo-conn) #+END_SRC +#+BEGIN_SRC clojurescript :results verbatim :tangle ./src/test.cljc +(d/q '[:find [(pull ?e [*]) ] + :where + [?e :object/name ?objects]] + @demo-conn) +#+END_SRC + +Fetch a diagram and look up the associated objects +#+BEGIN_SRC clojurescript :results verbatim :tangle ./src/test.cljc +(d/q '[:find [(pull ?diagram-entity [* {:diagram/objects [:object/name]}])] + :where + [?diagram-entity :diagram/objects ?objects]] + @demo-conn) +#+END_SRC + + Write some more as needed better examples in the src code. diff --git a/reagent-reitit-demo/resources/public/documents/hiccup-dsl-demo.org b/reagent-reitit-demo/resources/public/documents/hiccup-dsl-demo.org index a9b7567..6f904f0 100644 --- a/reagent-reitit-demo/resources/public/documents/hiccup-dsl-demo.org +++ b/reagent-reitit-demo/resources/public/documents/hiccup-dsl-demo.org @@ -10,20 +10,34 @@ To render the hiccup to html elements we call the (html) function from the hiccu There are a few variant's the main ones being https://github.com/weavejester/hiccup and https://github.com/lambdaisland/hiccup , the lambdaisland one is particular helpful if you want to share html between the frontend and backend as its closer to reagents builtin hiccup. + +#+BEGIN_SRC edn :results silent :export none :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 :export none :tangle readme.org +#+TITLE: Getting started +#+END_SRC + + ** Simple examples If using reagent you don't need to pass into h/html but this is server side reagent also has some helpers to work with react nicer. -#+BEGIN_SRC clojure :tangle ./src/core.cljs +#+BEGIN_SRC clojure :tangle src/core.clj [:span "bar"] #+END_SRC *** Styles classes and ID's Attributes are added as a map of values styles are also a map -#+BEGIN_SRC clojure :tangle src/core.cljs +#+BEGIN_SRC clojure :tangle src/core.clj [:span {:class "class1 class2" :title "my title" :style {:color "red"}} "bar"] #+END_SRC You can use shorthand to add id's and classes -#+BEGIN_SRC clojure :results output :tangle src/core.cljs +#+BEGIN_SRC clojure :results output :tangle src/core.clj [:span#id.class1.class2 "bar"] #+END_SRC @@ -32,19 +46,19 @@ You can use shorthand to add id's and classes You can use clojure core language to manipulate these vectors. place parts inside another containing element -#+BEGIN_SRC clojure :results output :tangle src/core.cljs +#+BEGIN_SRC clojure :results output :tangle src/core.clj (into [:div.container] [[:span "span 1"] [:span "span 2"]]) #+END_SRC You could also use merge, in this example the spans are merged inside the div vector. -#+BEGIN_SRC clojure :results output :tangle src/core.cljs +#+BEGIN_SRC clojure :results output :tangle src/core.clj (merge [:div] [:span "span 1"] [:span "span 2"] [:span "span 3"]) #+END_SRC We can take advantage of lazyness if we like -#+BEGIN_SRC clojure :results output :tangle src/core.cljs +#+BEGIN_SRC clojure :results output :tangle src/core.clj (defn navbar-link [{:keys [href title text] :or {text href title nil} :as link}] [:a.link.dim.white.dib.mr3 {:key href :href href :title title} text]) @@ -61,7 +75,7 @@ The main advantage comes from the ability to compose the parts together, so we c In this example our navigation is defined as a hash map, the data is separated out from the html, we can then pass the data to our component to render it. In this example we have a link component and a nav component the link component take the values as key, value pairs and uses de structuring while also setting default if values are not set. -#+BEGIN_SRC clojure :results output :tangle src/core.cljs +#+BEGIN_SRC clojure :results output :tangle src/core.clj (defn navbar-link [{:keys [href title text] :or {text href title nil} :as link}] [:a.link.dim.white.dib.mr3 {:key href :href href :title title} text]) @@ -79,7 +93,7 @@ In this example we have a link component and a nav component the link component In this example we create some simple top trump style cards using a map with a vector of nested maps for the stats. We use map and into to convert the stats value -#+BEGIN_SRC clojure :results output :tangle src/core.cljs +#+BEGIN_SRC clojure :results output :tangle src/core.clj (defn playing-card [{:keys [title image stats]}] [:article.fl.br2.ba.dark-gray.b--black-10.ma2.w-100.h-200.w-50-m.w-25-l.mw5 diff --git a/reagent-reitit-demo/src/clojure_demo/core.cljs b/reagent-reitit-demo/src/clojure_demo/core.cljs index 2174ca6..c83447e 100644 --- a/reagent-reitit-demo/src/clojure_demo/core.cljs +++ b/reagent-reitit-demo/src/clojure_demo/core.cljs @@ -92,7 +92,7 @@ (defn err-boundary "https://github.com/reagent-project/reagent/blob/master/doc/ReactFeatures.md#error-boundaries" - [& children] + [children] (let [err-state (reagent/atom nil)] (reagent/create-class {:display-name "Error Boundary" @@ -194,19 +194,34 @@ :dslpage {:intro "A domain-specific language (DSL) is a language designed to be used for a specific task or domain, clojure has a rich set of DSL some popular DSL's are listed on this page with example's on usage. "} :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." :pages {:dialects {:title "Dialects & Interop" + :intro "Clojure has the ability to run on multiple technology stacks, this allows code reuse and consistency regardless of which eco system you want to make use of." :key ::dialects :demos [{:title "Clojure" + :description "The original language running on the jvm with access to the java eco system" :page "clojure-info"} {:title "Clojurescript" + :description "Clojure running in the browser or on top of node, with access to the js eco system." :page "clojurescript-info"} {:title "ClojureCLR" + :description "Clojure running on microsofts CLR with access to .net ecosystem" :page "clojureclr-info"} {:title "ClojureDart" - :page "clojuredart-info"} - ]} - :devops {:title "devops" :key ::devops} - :examples {:title "Examples" :key ::examples} - :terminology {:title "Terminology" :key ::terminology} + :description "Clojure for dart, use clojure to build apps using flutter" + :page "clojuredart-info"}]} + :devops {:title "Deployment & testing" + :intro "Running, Testing and deploying your software in a CI pipeline" + :key ::devops + :demos [{:title "CI Demo" + :description "Clojure in a CI pipeline, building artifacts running tests & deploying" + :page "ci-demo" + ;;:link (rfe/href ::demo {:page "ci-demo"}) + :icon-image "https://avatars.githubusercontent.com/u/2181346?s=200&v=4"}]} + :examples {:title "Examples" + :intro "Some example applications" + :key ::examples} + :terminology {:title "Terminology" + :intro "" + :key ::terminology} :dsl {:title "DSL's" :key ::dsl :intro "A domain-specific language (DSL) is a language designed to be used for a specific task or domain, clojure has a rich set of DSL some popular DSL's are listed on this page with example's on usage. " @@ -319,10 +334,6 @@ :description "Getting started with clojure syntax datatype's sequences conditions" :link (rfe/href ::demo {:page "clojure-basics"}) :img-src "https://clojure.org/images/clojure-logo-120b.png"} - {:title "CI Demo" - :description "Clojure in a CI pipeline" - :link (rfe/href ::demo {:page "ci-demo"}) - :img-src "https://miro.medium.com/max/1400/1*CEYFj5R57UFyCXts2nsBqA.png"} {:title "Reagent Demo" :description "React application using reagent" :link (rfe/href ::demo {:page "reagent-demo"}) @@ -332,11 +343,12 @@ (let [group (keyword (name (:name (:data route))))] [:<> [articles - {:title "Clojure Demos" + {:title (-> site-data :pages group :title) :body (-> site-data :pages group :intro) :articles (mapv (fn fmt-map [demo] {:title (:title demo) + :description (:description demo) :link (rfe/href ::demo {:page (:page demo)}) :img-src (:icon-image demo)}) (-> site-data :pages group :demos))}]])) @@ -526,7 +538,7 @@ ;; this select the main node from the html file and injects your page content (mount-root-page)) -(defn startup! [] +(defn ^:dev/after-load startup! [] (rfe/start! (rf/router routes {:data {:coercion rss/coercion}}) (fn [m] (swap! site-state assoc :current-route m))