date:20211211

[tw5] Re: Create a style to show icon next to link title?

2021-12-11 Thread Evan Sherwood

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=<> >
  <$list variable="urititle" 
filter="""[removeprefix[data:text/plain,]]""">
a[href="#<>"]:before{ content: " "; margin-right:.5ch; 
display: inline-block; height:1em; width:1em; background: center / contain 
no-repeat var(`--`url); }

<$vars fill="primary">
  a[href="#<>"]:before{<$vars 
svg={{!!icon}}>{{||$:/ThemeTweaks/svg/url}}}


<$vars fill="primary">
  a[href="#<>"]:visited:before{<$vars 
svg={{!!icon}}>{{||$:/ThemeTweaks/svg/url}}}


<$vars fill="primary">
  a[href="#<>"]:hover:before{<$vars 
svg={{!!icon}}>{{||$:/ThemeTweaks/svg/url}}}

  

\end

<$list filter="""[has[icon]]""">
  <$vars tid={{!!title}}>
<>
  


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=< type:"text/plain">> >
>
> <$list variable="urititle" 
> filter="""[removeprefix[data:text/plain,]]""">
>
>   <$vars fill="external-link-foreground">
> a[href="#<>"]:before{<$vars 
> svg={{!!icon}}>{{||$:/ThemeTweaks/svg/url}}}
>   
>
>   <$vars fill="external-link-foreground-visited">
> a[href="#<>"]:visited:before{<$vars 
> svg={{!!icon}}>{{||$:/ThemeTweaks/svg/url}}}
>   
>
>   <$vars fill="external-link-foreground-hover">
> a[href="#<>"]:hover:before{<$vars 
> svg={{!!icon}}>{{||$:/ThemeTweaks/svg/url}}}
>   
> 
>   
> 
>
> 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 evan.s...@gmail.com 
>> 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=<> >
>>>   <$set name="icon" tiddler=<> field="icon">
>>> <$set name="iconsrc" tiddler=<> >
>>>   <$list variable="urititle" 
>>> filter="""[removeprefix[data:text/plain,]]""">
>>> 
>>>   a[href="#<>"] { display: inline-flex; align-items: 
>>> baseline; gap: .15em; }
>>>   a[href="#<>"]:before { content: <>> """$(iconsrc)$""" "image/svg+xml">>; width: 1em; height: 1em; margin-top: 
>>> 2px; align-self: center; fill: <>; }
>>> 
>>>   
>>> 
>>>   
>>> 
>>> \end
>>>
>>> <$list filter="""[has[icon]]""">
>>>   <$vars tid={{!!title}}>
>>> <>
>>>   
>>> 
>>>
>>> When I inspect the DOM and look at the

[tw5] Re: Create a style to show icon next to link title?

2021-12-11 Thread Evan Sherwood

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=<> 
>
<$list variable="urititle" 
filter="""[removeprefix[data:text/plain,]]""">

  <$vars fill="external-link-foreground">
a[href="#<>"]:before{<$vars 
svg={{!!icon}}>{{||$:/ThemeTweaks/svg/url}}}
  

  <$vars fill="external-link-foreground-visited">
a[href="#<>"]:visited:before{<$vars 
svg={{!!icon}}>{{||$:/ThemeTweaks/svg/url}}}
  

  <$vars fill="external-link-foreground-hover">
a[href="#<>"]:hover:before{<$vars 
svg={{!!icon}}>{{||$:/ThemeTweaks/svg/url}}}
  

  


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 evan.s...@gmail.com 
> 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=<> >
>>   <$set name="icon" tiddler=<> field="icon">
>> <$set name="iconsrc" tiddler=<> >
>>   <$list variable="urititle" 
>> filter="""[removeprefix[data:text/plain,]]""">
>> 
>>   a[href="#<>"] { display: inline-flex; align-items: 
>> baseline; gap: .15em; }
>>   a[href="#<>"]:before { content: <> """$(iconsrc)$""" "image/svg+xml">>; width: 1em; height: 1em; margin-top: 
>> 2px; align-self: center; fill: <>; }
>> 
>>   
>> 
>>   
>> 
>> \end
>>
>> <$list filter="""[has[icon]]""">
>>   <$vars tid={{!!title}}>
>> <>
>>   
>> 
>>
>> When I inspect the DOM and look at the

[tw5] Re: Video: TiddlyWiki as Development Platform for Hyperlinked Solutions

2021-12-11 Thread Mat

Thanks for sharing!

<:-)

On Friday, December 10, 2021 at 8:38:47 PM UTC+1 cj.v...@gmail.com wrote:

> Very off-the-cuff video which I felt like doing for whatever reason.
>
> Quickly showcasing some of my TiddlyWiki projects, hoping that they 
> demonstrate why I see TiddlyWiki as a development platform for hyperlinked 
> solutions (content and programming.)
>
> https://youtu.be/ySWeoYRhZNY
>
> Cheers !
>

-- 
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 tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/49f30fb9-bd74-4d0f-a9f1-b58bfc4129ebn%40googlegroups.com.

[tw5] Re: Create a style to show icon next to link title?

2021-12-11 Thread Mat

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 evan.s...@gmail.com 
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=<> >
>   <$set name="icon" tiddler=<> field="icon">
> <$set name="iconsrc" tiddler=<> >
>   <$list variable="urititle" 
> filter="""[removeprefix[data:text/plain,]]""">
> 
>   a[href="#<>"] { display: inline-flex; align-items: 
> baseline; gap: .15em; }
>   a[href="#<>"]:before { content: < """$(iconsrc)$""" "image/svg+xml">>; width: 1em; height: 1em; margin-top: 
> 2px; align-self: center; fill: <>; }
> 
>   
> 
>   
> 
> \end
>
> <$list filter="""[has[icon]]""">
>   <$vars tid={{!!title}}>
> <>
>   
> 
>
> When I inspect the DOM and look at the

Re: [tw5] Re: Random html tags appear in my wiki

2021-12-11 Thread 'Mark S.' via TiddlyWiki

What version of TiddlyWiki ?

On Saturday, December 11, 2021 at 9:23:20 AM UTC-8 Hubert wrote:

> I've found the same issue today (both Tiddloid and Tiddloid Lite, latest 
> versions), Android 11 (not an issue on Android 8).
>
> The code appears to belong to the boot.js core tiddler and  I suspect it's 
> related to the encryption mechanism (though I'm not sure).
>
> Steps to reproduce:
>
> 1. Open an (encrypted) TiddlyWiki in Tiddloid or Tiddloid Lite (on Android 
> 11)
> 2. Save the wiki
> 3. Reopen the wiki
>
> The code appears "underneath" tiddler frame after the wiki is saved by 
> Tiddloid/Tiddloid Lite and then reopened. Once it's saved like this, the 
> code will show on any mobile or desktop browser, it appears "burned in" but 
> how much of the code is revealed depends on the height of the tiddler.
>
> Has anyone found a fix?
>
> I've opened an issue 
> on the 
> Tiddloid github page.
>
> Thanks,
>
>
> [image: tiddloid_code_issue1.png][image: tiddloid_code_issue2.png]
> On Thursday, 26 August 2021 at 06:06:24 UTC+1 Sandip Deshmukh wrote:
>
>> My experience is also very similar to what David has described. Either 
>> TiddlyDesktop or Tiddloid could be causing the problem.
>>
>> But nothing seems to be broken. The wiki works perfectly otherwise.
>>
>> On Thursday, August 26, 2021 at 5:55:52 AM UTC+5:30 TW Tones wrote:
>>
>>> David,
>>>
>>> I am not so sure how to help you but in the past I have seen random 
>>> tiddlers or their content transcluded when a filter is broken and the 
>>> result is some artifact. So if you can find the page template, or something 
>>> tagged $:/tags/BelowStory with a filter in it and fix the filter you may 
>>> stop it.
>>> On Tuesday, 24 August 2021 at 23:12:37 UTC+10 David Shaw wrote:
>>>
 I get the same sort of thing with both Tiddloid and Tiddloid Lite. I 
 suspect it is a problem with Tiddloid as I can get the code to disappear 
 if 
 I open it in either Tiddloid version, save and close it then open it in 
 the 
 other Tiddloid and save and close it, but this is only a very temporary 
 solution I'm afraid; the code comes back pretty quickly.

 David Shaw

 On Tue, 24 Aug 2021, 13:52 PMario,  wrote:

> Hi,
>
> Which version of TW do you use?
> Can you link to the Android app you are using?
>
> Did you install any new plugins, before you copied it over to the 
> phone?
>
> -mario
>
> -- 
> 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 tiddlywiki+...@googlegroups.com.
> To view this discussion on the web visit 
> https://groups.google.com/d/msgid/tiddlywiki/797d0403-6673-408f-87af-b093d6365993n%40googlegroups.com
>  
> 
> .
>


-- 
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 tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/0bb2607b-5d8f-4ccc-9148-f5dad9b06522n%40googlegroups.com.

[tw5] Re: Create a style to show icon next to link title?

2021-12-11 Thread Télumire

Check also this thread : How to set the favicon of website? 

 

Le samedi 11 décembre 2021 à 18:38:24 UTC+1, Télumire a écrit :

> To prevent tiddlywiki from wikifying the content of your tiddler, you can 
> use a pragma rule at the beginning of the 
> tiddler :
>
> \rules only filteredtranscludeinline transcludeinline macrodef 
> macrocallinline html
>
> You can also use wikitext to "escape" css. For example, if you try to set 
> a CSS variable inside a  tag, tiddlywiki will parse -- and make it 
> into a -.
> To prevent this you can turn it into a code snippet : `--`
> This way you keep your formatting.
>
> $(..)$ is for text substitution of a variable defined outside of a macro, 
> see https://tiddlywiki.com/#Macro%20Definitions%20in%20WikiText 
>
> I have made a post on tiddlytalk that explain how to display svg icon next 
> to links inside tiddlers, check it out : 
>
>
> https://talk.tiddlywiki.org/t/trick-to-convert-the-core-images-to-svg-image-for-css-background/802
>
> Online demo : 
> https://telumire.be/TiddlyTweaks/index.html#:%5B%5B%24:/ThemeTweaks/svg/style/external_link%5D%5D
>  
> Le samedi 11 décembre 2021 à 06:31:03 UTC+1, evan.s...@gmail.com a écrit :
>
>> 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=<> >
>>   <$set name="icon" tiddler=<> field="icon">
>> <$set name="iconsrc" tiddler=<> >
>>   <$list variable="urititle" 
>> filter="""[removeprefix[data:text/plain,]]""">
>>