From 93189468fc80938865fb67f4ff6de77f9d4bc724 Mon Sep 17 00:00:00 2001
From: John Stevenson <john@jr0cket.co.uk>
Date: Wed, 26 Sep 2018 21:56:15 +0100
Subject: [PATCH] Added example demos of SVG graphics and HTML

* Hyperlink
* Image and Linked Image
* Clojure logo
---
 src/status_monitor/handler.clj        | 10 +++++++
 src/status_monitor/svg_components.clj | 39 ++++++++++++++++++++++++++-
 2 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/src/status_monitor/handler.clj b/src/status_monitor/handler.clj
index fffdd3c..507162e 100644
--- a/src/status_monitor/handler.clj
+++ b/src/status_monitor/handler.clj
@@ -123,6 +123,16 @@
              [:h1 "Demo"]
              [:div {:class "col-md-12"}
               svg-components/circle-in-a-box]
+             [:div {:class "col-md-12"}
+              (svg-components/web-link "https://practicalli.github.io")]
+             [:div {:class "col-md-12"}
+              (svg-components/image
+               "https://raw.githubusercontent.com/jr0cket/london-clojurians-logo/master/london-clojurians-logo.png")]
+             [:div {:class "col-md-12"}
+              (svg-components/image-linked
+               "https://raw.githubusercontent.com/jr0cket/london-clojurians-logo/master/london-clojurians-logo.png"
+               "http://ldnclj.org")]
+
              ]]]]))
 
 
diff --git a/src/status_monitor/svg_components.clj b/src/status_monitor/svg_components.clj
index 168c984..4b286c6 100644
--- a/src/status_monitor/svg_components.clj
+++ b/src/status_monitor/svg_components.clj
@@ -13,10 +13,27 @@
 
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; Demos
+;; Element Demos
 
 
 
+(defn web-link
+  [website-URL]
+  [:a {:href website-URL
+       :target "_blank"}
+   (str website-URL)])
+
+(defn image
+  [image-URL]
+  [:img {:src image-URL
+         :alt "Image description"}])
+
+(defn image-linked
+  [image-URL website-URL]
+  [:a {:href website-URL}
+   [:img {:src image-URL
+          :target "_blank"}]])
+
 ;; Circle in a box
 (def circle-in-a-box
   [:svg {:version "1.1"
@@ -48,3 +65,23 @@
 ;;   <circle cx="150" cy="100" r="80" fill="green" />
 ;;   <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
 ;; </svg>
+
+
+
+;; Clojure logo
+
+(def curved-lambda-logo
+  [:svg {:style {:border "1px solid"
+                 :background "white"
+                 :width "150px"
+                 :height "150px"}}
+   [:circle {:r 50, :cx 75, :cy 75, :fill "green"}]
+   [:circle {:r 25, :cx 75, :cy 75, :fill "blue"}]
+   [:path {:stroke-width 12
+           :stroke "white"
+           :fill "none"
+           :d "M 30,40 C 100,40 50,110 120,110"}]
+   [:path {:stroke-width 12
+           :stroke "white"
+           :fill "none"
+           :d "M 75,75 C 50,90 50,110 35,110"}]])