mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-04-10 20:56:39 +00:00
Code Issues Releases Wiki Activity

Add another example to the wikify widget : use core svg to show an icon next to links (#8806)

Browse Source 
* 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
This commit is contained in:
Théophile Desmedt 2024-12-08 20:56:35 +01:00 committed by GitHub
parent eae869fd6f
commit 530b893710
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 55 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
editions/tw5.com/tiddlers/TestCases_WikifyWidget_RenderSVGURI.tid Normal file
View File

@ -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">>

10
editions/tw5.com/tiddlers/widgets/WikifyWidget.tid
View File

@ -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">>