I'm trying to get a stylesheet working that will automatically insert the
SVG icon before the link text. Here's what I have so far:
\define link-icon-style()
<$set name="uri" value=<<makedatauri """$(tid)$""" "text/plain">> >
<$set name="icon" tiddler=<<tid>> field="icon">
<$set name="iconsrc" tiddler=<<icon>> >
<$list variable="urititle"
filter="""[<uri>removeprefix[data:text/plain,]]""">
<style>
a[href="#<<urititle>>"] { display: inline-flex; align-items:
baseline; gap: .15em; }
a[href="#<<urititle>>"]:before { content: <<makedatauri
"""$(iconsrc)$""" "image/svg+xml">>; width: 1em; height: 1em; margin-top:
2px; align-self: center; fill: <<colour tiddler-link-foreground>>; }
</style>
</$list>
</$set>
</$set>
</$set>
\end
<$list filter="""[has[icon]]""">
<$vars tid={{!!title}}>
<<link-icon-style>>
</$vars>
</$list>
When I inspect the DOM and look at the <style> tag created, the value of my
`content` CSS rule shows as an <a>... specifically a TiddlyWiki external
link. I think some value is being interpreted as WikiText instead of plain
text somewhere, but I'm several hours deep into head-banging on the issue
so I'm reaching out for help.
I'm a veteran JS programmer but a TiddlyWiki n00b. :)
Anyone see what I'm doing wrong here?
---
Also, what is the $()$ syntax? I couldn't find documentation on it... I'm
guessing because I don't know what it's called and thus don't know the
right term to search for.
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/96fb04bc-857b-4cfa-a2e6-693140c36e49n%40googlegroups.com.
