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

* Add another example to the wikify widget : use core svg to show an icon next to links

* improve wikitext

* fix css

* limit example to svg core tiddlers

* fix typo + use <<.wid wikify>> when mentioning the wikify widget

* simplify a bit more the procedure that add  a namespace to the svg
---
 .../TestCases_WikifyWidget_RenderSVGURI.tid   | 48 +++++++++++++++++++
 .../tw5.com/tiddlers/widgets/WikifyWidget.tid | 10 ++--
 2 files changed, 55 insertions(+), 3 deletions(-)
 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..e809c789161
--- /dev/null
+++ b/editions/tw5.com/tiddlers/TestCases_WikifyWidget_RenderSVGURI.tid
@@ -0,0 +1,48 @@
+created: 20241206225533517
+description: Rendering parameterised SVG for use in stylesheets
+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/
+* [[TW5|http://tiddlywiki.com/]]
+* [[Mail me|mailto:me@where.net]]
+* [[Open file|file:///c:/users/me/index.html]]
+
+<style>{{Stylesheet}}</style>
++
+title: Stylesheet
+
+\rules except dash
+\procedure link-icon(protocol,img)
+<$tiddler tiddler=<<img>> >
+  <$wikify name="svg" text={{!!text}} mode="inline" output="html">
+    <$text text=`
+      [href*="$(protocol)$"]{
+        --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg">$(svg)$</svg>');
+      }
+    `/>
+  </$wikify>
+</$tiddler>
+\end
+
+.tc-tiddlylink-external:after{
+  width:.7rem;
+  aspect-ratio:1;
+  background:currentColor;
+  display: inline-block;
+  mask: center / contain no-repeat var(--mask);
+  margin-inline:.5ch;
+  content:"";
+}
+
+<<link-icon "http:" "$:/core/images/open-window">>
+<<link-icon "https:" "$:/core/images/locked-padlock">>
+<<link-icon "mailto:" "$:/core/images/mail">>
+<<link-icon "file:" "$:/core/images/file">>
\ 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..198c5d64e2f 100644
--- a/editions/tw5.com/tiddlers/widgets/WikifyWidget.tid
+++ b/editions/tw5.com/tiddlers/widgets/WikifyWidget.tid
@@ -1,17 +1,17 @@
 caption: wikify
 created: 20160321144949700
-modified: 20241202014354100
+modified: 20241206233352509
 tags: Widgets
 title: WikifyWidget
 type: text/vnd.tiddlywiki
 
 ! Introduction
 
-The <<.wid wikify>> widget parses and renders a string of text and assigns the result to a specified [[variable|Variables]]. The new value of the variable is available to the content within the wikify widget.
+The <<.wid wikify>> widget parses and renders a string of text and assigns the result to a specified [[variable|Variables]]. The new value of the variable is available to the content within the <<.wid wikify>> widget.
 
 ! Content and Attributes
 
-The content of the `<$wikify>` widget is the scope for the value assigned to the variable.
+The content of the <<.wid wikify>> widget is the scope for the value assigned to the variable.
 
 |!Attribute |!Description |
 |name |The name of the variable to assign |
@@ -44,3 +44,7 @@ The available output types are:
 !! Exporting rendered html
 
 <<testcase "TestCases/WikifyWidget/RenderHTML">>
+
+!! Rendering parameterised SVG for use in stylesheets
+
+<<testcase "TestCases/WikifyWidget/RenderSVGURI">>
\ No newline at end of file