From 772d1952719255405ce96b7c5699a055132a2a29 Mon Sep 17 00:00:00 2001
From: Oly <oly@digitaloctave.com>
Date: Thu, 31 Aug 2023 14:53:23 +0100
Subject: [PATCH] Change the grouping on the list pages.

---
 resources/public/documents/about.org         |  2 +-
 resources/public/documents/examples-maps.org |  7 +++--
 src/clojure_demo/core.cljs                   | 31 ++++++++++++++++----
 3 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/resources/public/documents/about.org b/resources/public/documents/about.org
index 15cac90..8098e13 100644
--- a/resources/public/documents/about.org
+++ b/resources/public/documents/about.org
@@ -8,4 +8,4 @@ This site has various example's guides and snippets showing how to use Clojure a
 Some of the struggles have been around Terminology & inter-op with the host languages along side re orientating my brain to think more functionally.
 
 
-https://youtu.be/LKtk3HCgTa8
+https://www.youtube.com/embed/LKtk3HCgTa8
diff --git a/resources/public/documents/examples-maps.org b/resources/public/documents/examples-maps.org
index 0832c41..ba6b373 100644
--- a/resources/public/documents/examples-maps.org
+++ b/resources/public/documents/examples-maps.org
@@ -244,14 +244,15 @@ To customize see https://maplibre.org/maplibre-gl-js/docs/
 (defn libra-map-promesa []
   (load-libra-maps)
   (let [create-map (fn map-element [element]
+                     (.-innerHTML element "")
                      (new js/maplibregl.Map
-                          (clj->js {:container (.-id element) #_"libra-map"
+                          (clj->js {:container (.-id element) 
                                     :style "https://demotiles.maplibre.org/style.json"
-                                      :zoom 1})))]
+                                    :zoom 1})))]
     (fn []
       [:div#libra-map.m-auto
        {:style {:width "400px" :height "400px"}
-        :ref create-map #_(reset! map-element %)}
+        :ref create-map}
        "libra map here"])))
 
 
diff --git a/src/clojure_demo/core.cljs b/src/clojure_demo/core.cljs
index 204ca32..45967b5 100644
--- a/src/clojure_demo/core.cljs
+++ b/src/clojure_demo/core.cljs
@@ -121,18 +121,20 @@
                                  "silent" ""
                                  @evaled-result)]])]))})))
 
-(defn link-handler [v _]
+
+(defn link-handler
+  "Should use youtube.com/embed for embeds"
+  [v _]
   (cond
-    (str/starts-with? (str (:href v)) "https://youtu.be/")
+    (some? (re-matches #"^(https://youtu.be/|https://www.youtube.com/).*" (str (:href v))))
     [:iframe {:src (:href v)
               :title "YouTube video player"
               :width "560"
               :height "315"
               :frameborder "0"
               :allow "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"}]
-    :else [:a {:href (:href v)} (str v)]
-    )
-  )
+    :else [:a {:href (:href v)} (str v)]))
+
 
 (def theme-tachyon
   (merge tachyon-theme
@@ -277,9 +279,26 @@
        :link (rfe/href :page {:page "reagent-demo"})
        :img-src "https://raw.githubusercontent.com/reagent-project/reagent/master/logo/logo-text.png"}]}]])
 
+(defn grouped-list [data]
+  [articles
+   {:title (-> data :title)
+    :body (-> data :intro)
+    :articles
+    (mapv (fn fmt-map [demo]
+            {:title (:title demo)
+             :description (:description demo)
+             :link (rfe/href :page {:page (:page demo)})
+             :img-src (:icon-image demo)})
+          (-> data :demos))}])
+
 (defn grouped-page [route]
   (let [group (keyword (name (:name (:data route))))]
-    [:<> [articles
+    (if (vector? (-> site-data :pages group ))
+      (into [:div] 
+            (mapv #(grouped-list %) (-> site-data :pages group)))
+      (grouped-list (-> site-data :pages group )))
+
+    #_[:<> [articles
       {:title (-> site-data :pages group :title)
        :body (-> site-data :pages group :intro)
        :articles