From cec53509ae7e7866d3f0e0f671472a43bb9664b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9ophile=20Desmedt?=
 <34781168+DesignThinkerer@users.noreply.github.com>
Date: Sat, 7 Dec 2024 00:35:57 +0100
Subject: [PATCH] Add another example to the wikify widget : use core svg to
 show an icon next to links

---
 .../TestCases_WikifyWidget_RenderSVGURI.tid   | 50 +++++++++++++++++++
 .../tw5.com/tiddlers/widgets/WikifyWidget.tid |  6 ++-
 2 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 editions/tw5.com/tiddlers/TestCases_WikifyWidget_RenderSVGURI.tid

diff --git a/editions/tw5.com/tiddlers/TestCases_WikifyWidget_RenderSVGURI.tid b/editions/tw5.com/tiddlers/TestCases_WikifyWidget_RenderSVGURI.tid
new file mode 100644
index 00000000000..b5cbfbb1a3d
--- /dev/null
+++ b/editions/tw5.com/tiddlers/TestCases_WikifyWidget_RenderSVGURI.tid
@@ -0,0 +1,50 @@
+created: 20241206225533517
+description: Rendering parametrized svg for use in stylesheets
+modified: 20241206233219095
+tags: $:/tags/wiki-test-spec
+title: TestCases/WikifyWidget/RenderSVGURI
+type: text/vnd.tiddlywiki-multiple
+
+title: Narrative
+
+The core svg icons use a parameter widget, making their use in stylesheets impossible without wikify.
++
+title: Output
+
+https://tiddlywiki.com/
+
+<style>{{Stylesheet}}</style>
++
+title: Stylesheet
+
+\rules except dash
+\procedure mask(img)
+<$tiddler tiddler=<<img>> 
+><$wikify name="image" text={{!!text}} mode="inline" output="html"
+><$let
+        type={{!!type}}
+        uri={{!!_canonical_uri}}
+        external=`color:transparent;--mask:unset;--url:url($(uri)$)`
+        base64=`color:transparent;--mask:unset;--url:url(data:${[{!!type}]}$;base64,$(image)$)`
+        svg=`--mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg">${[<image>get[text]else<image>search-replace:g[#],[%23]search-replace:g[
+],[]]}$</svg>')`
+        ><$text text={{{ [<uri>!is[blank]then<external>]~[<type>!is[blank]!search[svg]then<base64>]~[<svg>] }}}
+/>;</$let></$wikify></$tiddler>
+\end
+
+<$text text=```
+.tc-tiddlylink-external{
+    &:after{
+        width:.7rem;
+        height:.7rem;
+        background:center/contain no-repeat var(--url);
+        background-color:currentColor;
+        display: inline-block;
+        -webkit-mask: center / contain no-repeat var(--mask);
+        mask: center / contain no-repeat var(--mask);
+        margin-inline:.5ch;
+        content:"";
+    }
+    ```/><<mask "$:/core/images/open-window">><$text text=```
+}
+```/>
\ No newline at end of file
diff --git a/editions/tw5.com/tiddlers/widgets/WikifyWidget.tid b/editions/tw5.com/tiddlers/widgets/WikifyWidget.tid
index e8af7ef8297..a9c66850b1e 100644
--- a/editions/tw5.com/tiddlers/widgets/WikifyWidget.tid
+++ b/editions/tw5.com/tiddlers/widgets/WikifyWidget.tid
@@ -1,6 +1,6 @@
 caption: wikify
 created: 20160321144949700
-modified: 20241202014354100
+modified: 20241206233352509
 tags: Widgets
 title: WikifyWidget
 type: text/vnd.tiddlywiki
@@ -44,3 +44,7 @@ The available output types are:
 !! Exporting rendered html
 
 <<testcase "TestCases/WikifyWidget/RenderHTML">>
+
+!! Rendering parametrized svg for use in stylesheets
+
+<<testcase "TestCases/WikifyWidget/RenderSVGURI">>
\ No newline at end of file