Add libra maps example, modify sci config based on @borkdude suggestions.

.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

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"]}
            }

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./

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]

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]

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 {'<p! (sci/copy-var async-in/<p! async-in-ns)}
-     'd sci-datascript/core-namespace
      'tick {'format (sci/copy-var t/format tick-ns)
             'zoned-date-time (sci/copy-var t/zoned-date-time tick-ns)}
      'xml {'emit-str (sci/copy-var xml/emit-str xml-ns)