diff --git a/.drone.yml b/.drone.yml index 9e39264..972b68b 100644 --- a/.drone.yml +++ b/.drone.yml @@ -12,7 +12,7 @@ steps: user: root commands: #- cp resources/public/rename-me-index.html resources/public/index.html - - clojure -Mbuild-dev release app + - clojure -Mbuild release app #- clj -A:prod - name: deploy-site diff --git a/deps.edn b/deps.edn index 6b53c2c..1743025 100644 --- a/deps.edn +++ b/deps.edn @@ -34,8 +34,7 @@ datascript/datascript {:mvn/version "1.5.1"}} :paths ["src" "resources"] - :aliases {:prod {:main-opts ["-m" "figwheel.main" "-bo" "dev"]} - :build-dev {:extra-deps {thheller/shadow-cljs {:mvn/version "2.23.3"} + :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"]} } diff --git a/readme.org b/readme.org index 05c30ab..989fa1d 100644 --- a/readme.org +++ b/readme.org @@ -4,6 +4,13 @@ Future Content - Dynamic html with macro for frontend generation on build. - Complete frontend backend example wth ring retit reagent -clj -m figwheel.main --build dev --repl +#+BEGIN_SRC sh +npm install +#+END_SRC + +#+BEGIN_SRC sh +clojure -Mbuild-dev watch app +#+END_SRC + https://www.clojuriststogether.org/news/call-for-new-proposals.-june-survey-results./ diff --git a/resources/public/documents/examples-maps.org b/resources/public/documents/examples-maps.org index b9e628e..dd1e066 100644 --- a/resources/public/documents/examples-maps.org +++ b/resources/public/documents/examples-maps.org @@ -18,8 +18,8 @@ npx shadow-cljs watch app Alternatively jack into the project from your ide. #+END_SRC -* Google Maps +* Google Maps Below is an example of using google maps, it pulls in the library directly you could alternatively use an npm dependency. You will need to provide your own api key, the examples use no api key and render a warning so paste in your google api key to make this work. @@ -80,7 +80,7 @@ You will need to provide your own api key, the examples use no api key and rende } #+END_SRC -#+BEGIN_SRC clojurescript :exports none :tangle src/clojure_demo/core.cljs +#+BEGIN_SRC json :exports none :results output :tangle src/clojure_demo/core.cljs (ns clojure-demo.core (:require ["react-dom/client" :refer [createRoot]] @@ -128,7 +128,7 @@ In this example we render google maps using core async, async go blocks drop typ :title "test marker 2" :position {:lng 131.031 :lat -25.344}}) "marker 2"))) (fn [] - [:div#google-map-async.m-4 + [:div#google-map-async.m-auto {:style {:width "400px" :height "400px"} :ref #(reset! map-element %)} "core async map here"]))) #+END_SRC @@ -160,7 +160,7 @@ Shadow CLJS has its one js-await macro we can use in the following fashion, here nil)))) (fn [] - [:div#google-map-js-await.m-4 + [:div#google-map-js-await.m-auto {:style {:width "400px" :height "400px"} :ref #(reset! map-element %)} "shadow js-await map here"]))) @@ -173,6 +173,7 @@ Shadow CLJS has its one js-await macro we can use in the following fashion, here An example using promesa to render a google map. #+BEGIN_SRC clojurescript :results output :tangle src/clojure_demo/core.cljs + (defn google-map-promesa [] (let [map-element (reagent/atom nil)] (load-google-maps-script "") @@ -196,7 +197,7 @@ An example using promesa to render a google map. (fn [] - [:div#google-map-promesa.m-4 + [:div#google-map-promesa.m-auto {:style {:width "400px" :height "400px"} :ref #(reset! map-element %)} "promesa map here"]))) @@ -224,6 +225,7 @@ An example using promesa to render a google map. * LibraMaps +Create a dummy function to load the js dynamically, this could be imported in other ways like npm. #+BEGIN_SRC clojurescript :results value :tangle src/clojure_demo/core.cljs (defn load-libra-maps [] (let [script (.createElement js/document "script")] @@ -233,33 +235,23 @@ An example using promesa to render a google map. (load-libra-maps) #+END_SRC +We use =:ref= to grab a reference and call our function when it is created we can then get elements id and construct our map. + +To customize see https://maplibre.org/maplibre-gl-js/docs/ -https://maplibre.org/maplibre-gl-js/docs/ #+BEGIN_SRC clojurescript :results output :tangle src/clojure_demo/core.cljs (defn libra-map-promesa [] - (let [map-element (reagent/atom nil)] - (load-libra-maps) - - (when-let - [lMap (.-id @map-element) -] - (new js/maplibregl.Map - (clj->js {:container "libra-map" - :style "https://demotiles.maplibre.org/style.json" - :zoom 1})) - ) - - - (fn [] - [:div#libra-map.m-4 - {:style {:width "400px" :height "400px"} - :ref #(reset! map-element %)} - (str (.-id @map-element)) - "libra map here"]) - ) - - ) - + (load-libra-maps) + (let [create-map (fn map-element [element] + (new js/maplibregl.Map + (clj->js {:container (.-id element) #_"libra-map" + :style "https://demotiles.maplibre.org/style.json" + :zoom 1})))] + (fn [] + [:div#libra-map.m-auto + {:style {:width "400px" :height "400px"} + :ref create-map #_(reset! map-element %)} + "libra map here"]))) [libra-map-promesa] diff --git a/resources/public/documents/reagent-reitit.org b/resources/public/documents/reagent-reitit.org index ecf54bb..0520aec 100644 --- a/resources/public/documents/reagent-reitit.org +++ b/resources/public/documents/reagent-reitit.org @@ -67,6 +67,7 @@ Reagent is a popular react wrapper in the clojurescript it greatly simplify buil npx install * Launch shadow-cljs watch for source code changes +#+BEGIN_SRC sh npx shadow-cljs watch app #+END_SRC @@ -133,6 +134,11 @@ Form two components are used so we can track local state of a component, this is *** Example Click counter component #+BEGIN_SRC clojurescript :results output :tangle src/clojure_demo/core.cljs +(ns example + (:require + [reagent.core :as r] + [reagent.dom.server :as rdom])) + (defn my-component [title starting-value] (let [local-state (reagent/atom starting-value)] (fn [title] diff --git a/src/clojure_demo/core.cljs b/src/clojure_demo/core.cljs index 34e9dae..d9d6c4a 100644 --- a/src/clojure_demo/core.cljs +++ b/src/clojure_demo/core.cljs @@ -20,16 +20,17 @@ [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] - [sci.core :as sci] [clojure-demo.routes :refer [site-data routes]] [clojure-demo.sitemap :as sm #_#_:refer [spit-pwa-sitemap]] [tick.core :as t]) @@ -79,15 +80,21 @@ (sci/init {:classes {'js js/globalThis :allow :all} :features #{:cljs} + :aliases {'promesa 'promesa.core + 'reagent 'reagent.core} :namespaces - {'reagent sci-reagent/reagent-namespace - 'promesa sci-promesa/promesa-namespace + {'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 {'