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/00269110-31dd-4a1c-9989-e386b2dfd2d3n%40googlegroups.com.
