From cb2938c85097d34a47839d73775e0048e7eed12d Mon Sep 17 00:00:00 2001 From: Oly Date: Wed, 16 Aug 2023 10:29:31 +0100 Subject: [PATCH] Update deps to new sci configs. --- deps.edn | 8 ++- resources/public/documents/examples-maps.org | 55 +++++++++++++++++-- .../public/documents/examples-xml-sitemap.org | 6 +- 3 files changed, 58 insertions(+), 11 deletions(-) diff --git a/deps.edn b/deps.edn index 123b522..6b53c2c 100644 --- a/deps.edn +++ b/deps.edn @@ -2,7 +2,6 @@ org.clojure/clojurescript {:mvn/version "1.11.60"} org.clojure/core.async {:mvn/version "1.6.673"} org.clojure/data.xml {:mvn/version "0.2.0-alpha8"} - funcool/promesa {:mvn/version "9.0.494"} ;; simpler date time tick/tick {:mvn/version "0.6.2"} @@ -19,7 +18,7 @@ metosin/reitit-spec {:mvn/version "0.5.10"} metosin/reitit-frontend {:mvn/version "0.5.10"} - ;thheller/shadow-cljs {:mvn/version "2.23.3"} + thheller/shadow-cljs {:mvn/version "2.23.3"} ;; interactive code snippets ;;viebel/klipse {:mvn/version "7.10.4"} @@ -28,8 +27,11 @@ hiccup/hiccup {:mvn/version "1.0.5"} viebel/klipse {:mvn/version "7.11.4"} org.babashka/sci {:mvn/version "0.7.39"} + + funcool/promesa {:mvn/version "11.0.674"} org.babashka/sci.configs {:git/url "https://github.com/babashka/sci.configs" - :sha "33bd51e53700b224b4cb5bda59eb21b62f962745"} + :sha "766a3c2748705985221c6c1625cd071b15f21ab6"} + datascript/datascript {:mvn/version "1.5.1"}} :paths ["src" "resources"] :aliases {:prod {:main-opts ["-m" "figwheel.main" "-bo" "dev"]} diff --git a/resources/public/documents/examples-maps.org b/resources/public/documents/examples-maps.org index 359a4e8..b9e628e 100644 --- a/resources/public/documents/examples-maps.org +++ b/resources/public/documents/examples-maps.org @@ -6,7 +6,6 @@ Below you will find some simple examples of using map api's inside clojure, you can use the inline eval for some of the example where sci supports a specific library. Install npm dependencies - ** Setup for downloaded version Install the npm dependencies for react then launch shadow via the terminal or jack in via your IDE. #+BEGIN_SRC html :results silent :exports none :tangle readme.org @@ -23,8 +22,7 @@ Alternatively jack into the project from your ide. 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 are blank and render a warning so paste in your google api key to make this work. - +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. #+BEGIN_SRC html :results silent :exports none :tangle resources/public/index.html @@ -48,7 +46,8 @@ You will need to provide your own api key, the examples are blank and render a w :deps {org.clojure/clojure {:mvn/version "1.10.0"} org.clojure/clojurescript {:mvn/version "1.11.60"} - funcool/promesa {:mvn/version "11.0.671"} + funcool/promesa {:mvn/version "11.0.674"} + reagent/reagent {:mvn/version "1.2.0"} thheller/shadow-cljs {:mvn/version "2.24.0"}}} #+END_SRC @@ -137,6 +136,8 @@ In this example we render google maps using core async, async go blocks drop typ ** Create a map using google and shadow js-await +Shadow CLJS has its one js-await macro we can use in the following fashion, here we just use it to wait for the maps library to have loaded the maps and marker libraries before executing the code. + #+BEGIN_SRC clojurescript :results output :tangle src/clojure_demo/core.cljs (defn google-map-js-await [] (let [map-element (reagent/atom nil)] @@ -145,7 +146,7 @@ In this example we render google maps using core async, async go blocks drop typ [js-map (js/google.maps.importLibrary "maps")] (shadow/js-await [js-marker (js/google.maps.importLibrary "marker")] - (when @map-element + (when @map-element (let [gMap (.-Map ^js/google.maps.Map js-map) gMarker (.-Marker ^js/google.maps.Marker js-marker) map (gMap. @map-element @@ -219,3 +220,47 @@ An example using promesa to render a google map. (def startup! (mount-root-page)) #+END_SRC + + +* LibraMaps + +#+BEGIN_SRC clojurescript :results value :tangle src/clojure_demo/core.cljs +(defn load-libra-maps [] + (let [script (.createElement js/document "script")] + (.setAttribute script "src" "https://unpkg.com/maplibre-gl/dist/maplibre-gl.js") + (.appendChild (.-head js/document) script))) + +(load-libra-maps) +#+END_SRC + + +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"]) + ) + + ) + + + +[libra-map-promesa] +#+END_SRC diff --git a/resources/public/documents/examples-xml-sitemap.org b/resources/public/documents/examples-xml-sitemap.org index 92ff243..dbce48f 100644 --- a/resources/public/documents/examples-xml-sitemap.org +++ b/resources/public/documents/examples-xml-sitemap.org @@ -8,9 +8,11 @@ Install dependencies with. npm install Run the project with the below command -npx shadow-cljs server app +npx shadow-cljs watch app Alternatively jack into the project from your ide. + +Once launched you should see a sitemap.xml file generated inside this project. #+END_SRC #+BEGIN_SRC edn :results silent :exports none :tangle deps.edn @@ -79,7 +81,6 @@ We can use a macro to generate a sitemap from a client side app on startup, or j (:require [clojure.data.xml :as xml] [tick.core :as tick])) - #+END_SRC #+BEGIN_SRC clojure :results value :tangle src/clojure_demo/sitemap.cljc @@ -118,7 +119,6 @@ We can use a macro to generate a sitemap from a client side app on startup, or j (comment (pwa-sitemap "https://example.com/" ["/one" "/two"]) (spit-pwa-sitemap "sitemap.xml" "https://example.com/" ["/one" "/two"])) - #+END_SRC ** Clojurescript usage