Ok, I got it working. I forgot my original source was based off of the
LinkStyle (http://linkstyle.tiddlyspot.com), which I had seen in one of
Matt's previous email threads. Once I restored the original wrapping
widgets, Télumire's SVG-handling code provided the missing piece. After a
bit of style tweaking, I got what I was after with this:
\rules only filteredtranscludeinline transcludeinline macrodef
macrocallinline html
\define linkstyle()
<$set name="uri" value=<<makedatauri """$(tid)$""" "text/plain">> >
<$list variable="urititle"
filter="""[<uri>removeprefix[data:text/plain,]]""">
a[href="#<<urititle>>"]:before{ content: " "; margin-right:.5ch;
display: inline-block; height:1em; width:1em; background: center / contain
no-repeat var(`--`url); }
<$vars fill="primary">
a[href="#<<urititle>>"]:before{<$vars
svg={{!!icon}}>{{||$:/ThemeTweaks/svg/url}}</$vars>}
</$vars>
<$vars fill="primary">
a[href="#<<urititle>>"]:visited:before{<$vars
svg={{!!icon}}>{{||$:/ThemeTweaks/svg/url}}</$vars>}
</$vars>
<$vars fill="primary">
a[href="#<<urititle>>"]:hover:before{<$vars
svg={{!!icon}}>{{||$:/ThemeTweaks/svg/url}}</$vars>}
</$vars>
</$list>
</$set>
\end
<$list filter="""[has[icon]]""">
<$vars tid={{!!title}}>
<<linkstyle>>
</$vars>
</$list>
I see now that I can use $vars and """$()"""" to pass dynamic arguments to
a macro, so that answers my earlier question. I'm still curious if there's
a terser way to accomplish this, though.
Here's what it looks like:
[image: Govos Cloud Search — notes and thoughts from an architect.png]
Now I can set an "icon" field for a tiddler that points to a SVG, and any
link to that tiddler will show that icon in the link. Combined with SVGs
I'm pulling in from https://morosanuae.github.io/tw-icons/ along with a few
of my own for smaller libraries that still have logos but aren't published,
and I'm where I want to be... for now, at least!
Thanks again for all the help!
On Saturday, December 11, 2021 at 5:55:01 PM UTC-8 Evan Sherwood wrote:
> Thanks for the info and references everyone.
>
> I feel like I'm so close to getting this working... here's my revised
> code, based off of code examples from Télumire:
>
> \rules only filteredtranscludeinline transcludeinline macrodef
> macrocallinline html
>
> <$list filter="""[has[icon]]""">
> <$set name="uri" value=<<makedatauri text:{{!!title}}
> type:"text/plain">> >
>
> <$list variable="urititle"
> filter="""[<uri>removeprefix[data:text/plain,]]""">
>
> <$vars fill="external-link-foreground">
> a[href="#<<urititle>>"]:before{<$vars
> svg={{!!icon}}>{{||$:/ThemeTweaks/svg/url}}</$vars>}
> </$vars>
>
> <$vars fill="external-link-foreground-visited">
> a[href="#<<urititle>>"]:visited:before{<$vars
> svg={{!!icon}}>{{||$:/ThemeTweaks/svg/url}}</$vars>}
> </$vars>
>
> <$vars fill="external-link-foreground-hover">
> a[href="#<<urititle>>"]:hover:before{<$vars
> svg={{!!icon}}>{{||$:/ThemeTweaks/svg/url}}</$vars>}
> </$vars>
> </$list>
> </$set>
> </$list>
>
> My issue now is the "text" argument to the makedatauri macro; it needs to
> be dynamic, but everything I've tried interprets the value literally—so I
> get an encoded {{!!title}} instead of the encoded actual title of the
> tiddler. I also tried assigning it as a variable using another $set widget
> but no luck. I feel like I'm missing some syntax...
>
> On Saturday, December 11, 2021 at 11:49:10 AM UTC-8 Mat wrote:
>
>> I don't know if it is relevant but by mere coincidence I was fiddling
>> around with images in TW and stumbled across this. Check it out.
>>
>> https://stackoverflow.com/questions/10768451/inline-svg-in-css
>>
>> The $(...)$ syntax is... let's back up:
>> $*$ is used to apply the argument value of a macro parameter. But the
>> $(*)$ syntax allows you to use a variable value from outside of the macro,
>> and that was not included as an argument in the macro. (I'm probably not
>> using the terminology correct.)
>>
>> <:-)
>>
>> On Saturday, December 11, 2021 at 6:31:03 AM UTC+1 [email protected]
>> wrote:
>>
>>> 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/27f03c13-d76c-473e-a71d-343070fed2c7n%40googlegroups.com.
