URL of the current tiddler

[Anne-Laure Le Cunff]

Hi everyone,

I'm trying to add social sharing links on each page of to my TW-generated website, here is an example:

<a href="https://twitter.com/intent/tweet?source={URL}&text={TITLE}%20{DESCRIPTION}&via=anthilemoon" target="_blank" title="Tweet"><img alt="Tweet" src="social-icons/Twitter.png" /></a>

Where {URL} the url of the current tiddler, {TITLE} is the title of the current tiddler, etc.

My question is: what am I supposed to use to generate these? (in the static view template tiddler)

For example, for {TITLE} I tried <$view field="title"/> and {!!title} and none of them worked.

Couldn't find anything in this list.

Thank you!

p.s. attached a fun screenshot for your pleasure.

[Saq Imtiaz]

You want something like this:

\define tweet-this(url,title,description)
<a href="https://twitter.com/intent/tweet?source=$url$&text=$title$%20$description$&via=anthilemoon" target="_blank" title="Tweet"><img alt="Tweet" src="social-icons/Twitter.png" /></a>
\end

<$macrocall $name="tweet-this" url=<<url>> title={{!!title}} description={{!!description}} />

put the define at the top of your template and call the macro with the macro call widget where you need it. That assumes you have a variable set that contains the value of the url under the name url

Further reading: https://tiddlywiki.com/#Concatenating%20text%20and%20variables%20using%20macro%20substitution

[Anne-Laure Le Cunff]

Thanks Saq! I'm struggling with the URL part specifically, how do I grab that? Thanks so much.

---

For context, my live notes while looking for a solution :)

• Some of the results of a google search, nothing relevant
• Maybe I need a list-links macro with a filter operator targeting the current tiddler. But only the link-related operators I found on the list were backlinks, which finds the titles that link to each input title, and links, which finds the titles linked to by each input title.
• Found TiddlerLinks, but doesn't look like it's related to what I want to achieve
• I typed {{!!title}} in google and found this Current Tiddler page, which was super promising but looks like the currentTiddler Variable only contains the title of the current tiddler
• This plugin seems to create links to the current tiddler, so it means it's possible!

[Saq Imtiaz]

Unless there is a setting that I am not aware of for the static build process, its unfortunately a case of joining strings together to emulate the site's URL structure.

\define url(filename) http://mysite.com/$filename.html$

The key is getting filename in the same pattern as what the static generator uses for the file names, based off of the tiddler title. If the file name is always identical to the tiddler title then the following would be enough:

\define url() http://mysite.com/$(currentTiddler)$.html

I am not familiar with the exact file names used in creating static sites, so you will need to look at the pattern of the filenames and adjust accordingly.

[TonyM]

Just a quick tip, searching for encode on tiddlywiki.com will direct you to a number of operators etc... for forming uri's and more.

Also, if you use macros and replaceable parameters, eg using $param$ or variables $(varname)$ it is often easier to construct final results as needed because they use simple replacement.

Regards

Tony

[Scott Kingery]

Anne-Laure, did you see this? https://ibnishak.github.io/Tesseract/pluginsandmacros/socialmacros/index.html#Social%20Networking%20comes%20to%20TW5

I haven't used it but I found it over on Dave's Toolmap site

Scott

[Anne-Laure Le Cunff]

@Saq & Tony: thank you! No idea what my URL structure is, I think it's just the title and then I used regex to replace the spaces with hyphens, so I have no idea where to start here.

@Scott: this is great! I have literally no idea how I could implement this on mine (also I don't want the dynamic thing, just regular links), but yes, very close to what I want to do. Thanks!

Doesn't happen often, but I think this one is past my competence level, I don't even know what question to ask haha. I'll just forget about the social media links for now, not essential anyway. Thanks so much everyone, really appreciate you jumping in :)

p.s. If anyone more technical than I am wants to implement this at some point, this is what the html/css code looks like (demo attached).

p.p.s. For SEO, social media reasons, etc. it would be great to have a user-friendly way to call a link to the current page. Maybe {{!!current}}? I'm actually taking notes so I can publish a guide to make your TiddlyWiki more SEO friendly and this would be very helpful.

[Mark S.]

I was following this thread, hoping that someone would know of an existing, core-based solution. The two related messages unfortunately only send the url to the clipboard.

If you want to try something, the attached is a json for a tiddler that uses a simple javascript macro to report the url. It worked for me. Once.

Absolutely make a backup of any work you are doing. Then drag and drop into your TW. Save. Reload. Then <<url>> should reveal the url. Maybe ;-)

[Eric Shulman]

On Friday, April 24, 2020 at 4:01:48 PM UTC-7, Anne-Laure Le Cunff wrote:

Thanks Saq! I'm struggling with the URL part specifically, how do I grab that? Thanks so much.

Take a look at the $:/info/ shadow tiddlers.  They are automatically initialized when you load your TW.

Here's the documentation: https://tiddlywiki.com/#InfoMechanism

Specifically, for your purposes, you probably want to use $:/info/url/full

enjoy,

-e

[Anne-Laure Le Cunff]

Thanks so much, Mark! Will give it a try and report back :)

[Anne-Laure Le Cunff]

@Mark - I imported your file in a safe copy of my TW, then added the following to my static view template file:

<div class="test1">{{!!url}}</div>

<div class="test2"><$view field="url"/></div>

... Because I wasn't sure what to use. But, in any case, none of them worked, there was no output. So I think I didn't understand the instructions properly.

@Eric: Thank you! This does look somewhat related to what I want to do. I'll have a look.

[TonyM]

As I understand here

The key issue here is not the composition of a link from a number of variables or fields, it is to do so within the template used to generate static pages (whose link will change anyway).

If you open a static html you can see how the links are represented and Identify how they should differ from the result. The last time I did this I saw things defined in the resulting html, that pointed to a way to identify the main domain path on which the html was situated.

In previous cases a url link formed correctly to an external location or another tiddler, thus another static page, was valid on generating the static page.

I can provide more information if needed

Regards

Tony

[Mark S.]

Hi Anne,

Use Eric's way. I vaguely remembered that there was a way to do this, but searching for "url" flooded me with 148 non-title hits. Maybe there needs to be some redirect tiddlers that will help future searchers find this easier.

Might work like this:

<div class="test1">{{$:/info/url/full}}</div>

<div class="test2"><$view tiddler="$:/info/url/full" field="text"/></div>

However, per Tony's comments, I'm not sure this will do what you want when generating static pages.

Go ahead and delete the getLocationPath tiddler since it's no longer needed.

[Mat]

Of possible relevance: URI operators. Do TW search for more.

<:-)

[Anne-Laure Le Cunff]

Progress! Eric's way does display the URL in TiddlyWiki (well, I'm using the Node.js version, so it just says http://127.0.0.1:8080/ everywhere, but that's progress anyway)

As Mark predicted, this doesn't do anything when generating static pages.

@Mat: thank you, not sure how I can use this I don't have the URI in the first place?

I'm using this to generate clean links for my static website, and wondering if there's anything I could copy to my $:/core/ui/ViewTemplate to also get these same URLs.

[Saq Imtiaz]

@Anne-Laure : I suspect we have been overcomplicating a bit because most of us are not familiar with the static site generation process. If you can walk us through a few details of your setup I think we are close a solution. Short instructions at the end, but please read through everything.

Have you modified this template

 static.tiddler.html

from the folder

/core/templates?

If so, please post your customized template. If not, where exactly are you using regexp to replace the spaces in file names, and the links to them, with hyphens?

TiddlyWiki defines three variables that can be used to tweak the structure of url's in the static files generated:
https://tiddlywiki.com/#tv-wikilink-template%20Variable:%5B%5Btv-wikilink-template%20Variable%5D%5D%20%5B%5Btv-filter-export-link%20Variable%5D%5D%20%5B%5Btv-get-export-link%20Variable%5D%5D

You said you have replaced the spaces in tiddler names with hyphens, the correct way to do this in links would be via the variable

tv-filter-export-link

https://tiddlywiki.com/#tv-filter-export-link%20Variable used at the top of static.tiddler.html as follows:

\define tv-filter-export-link() [split[ ]join[-]encodeuricomponent[]]

Assuming it is setup this way, the following filter will get you the file name portion of the url:

[<currentTiddler>subfilter<tv-filter-export-link>]

Since TW doesn't know where your files will be served we need to add in the domain name:

[<currentTiddler>subfilter<tv-filter-export-link>addprefix[https://www.mentalnodes.com/]]

a better way to do this would be to create a tiddler called something like $:/config/static/domain and give it the text value https://mentalnodes.com/ so that we can re-use and easily change the domain name.

Then the filter for the URL becomes:

[<currentTiddler>subfilter<tv-filter-export-link>addprefix{$:/config/static/domain}]

Putting it all together: (and assuming you aren't doing anything elsewhere to tweak the file names)

At the top of your template:

\define tv-filter-export-link() [split[ ]join[-]encodeuricomponent[]]

\define tweet-this(url,title,description)
<a href="https://twitter.com/intent/tweet?source=$url$&text=$title$%20$description$&via=anthilemoon" target="_blank" title="Tweet"><img alt="Tweet" src="social-icons/Twitter.png" /></a>
\end

Use as: 

<$macrocall $name="tweet-this" url={{{ [<currentTiddler>subfilter<tv-filter-export-link>addprefix{$:/config/static/domain}] }}} title={{!!title}} description={{!!description}} />

To get your file names to match, you can use this filter with the RenderCommand when generating static files:
https://tiddlywiki.com/#RenderCommand

"[split[ ]join[-]encodeuricomponent[]addsuffix[.html]addprefix[static/]]"

For easier access to the url in the template, you can wrap a set widget around the entirety of the html portion of your template:

\define macros go here

<$set name="url" filter="""[<currentTiddler>subfilter<tv-filter-export-link>addprefix{$:/config/static/domain}]""">
<!------html starts here-->


<<url>> will give you the url, relies on tv-filter-export-link being defined in the template


</$set>

Please let us know if that works. If so, it can likely be further simplified for re-use.

Regards,

Saq

[Saq Imtiaz]

PS: If you are using a different template when rendering static files, all of this then applies to that template.

[Mat]

Anne-Laure Le Cunff wrote:

@Mat: thank you, not sure how I can use this I don't have the URI in the first place?

I brought it up because I interpreted your question to partly be about constructing URLs from tiddler titles or some such and there is the encode URI operator to replace problematic characters in this. Maybe you just wanted some eye-friendly slug, in which case I suggest you like this proposal.

Just disregard this if I've misunderstood what you're after.

<:-)

[Anne-Laure Le Cunff]

Hi Saq,

First, thanks so much for your help!

Yes, I have modified static.tiddler.html - it looks like this in my setup — and it looks like your approach is working! Thank you! Will keep on tweaking, but if you're curious you can see here the files where I did the regex edits. (following these instructions)

Many thanks!

[Saq Imtiaz]

@Anne-Laure we should have asked you for those files from the beginning! That would have made helping you out a lot easier all along :)

Those instructions for regex use one of the other three variables that I mentioned, tv-get-export-link instead of tv-filter-export-link, which requires javascript.

You can mix and match both approaches but then it can be a little tricky to ensure that both always return the exact same filenames and corresponding links. This may not be an issue, but there is a chance it might cause problems at some point. Basically its a case of making sure the filter in tv-filter-export-link does the exact same thing as the javascript.

With the way I outlined, you use the same filters for both and there is no javascript involved, so there are no chances of such issues. Or alternatively one could write another javascript macro that defines the url variable, using the same javascript logic.

For a non-developer I think the non-javascript based approach will be easiest in the long run.

Regards,
Saq

[Saq Imtiaz]

@Anne-Laure this MIGHT work since you have those javascript macros in place (and if you want to keep them).

skip all of my directions and do this:

\define tweet-this(url,title,description)
<a href="https://twitter.com/intent/tweet?source=$url$&text=$title$%20$description$&via=anthilemoon" target="_blank" title="Tweet"><img alt="Tweet" src="social-icons/Twitter.png" /></a>
\end

<$macrocall $name="tweet-this" url={{{ [<tv-get-export-link>addprefix{$:/config/static/domain}] }}} title={{!!title}} description={{!!description}} />

or for quick testing without the $:/config/static/domain tiddler:

<$macrocall $name="tweet-this" url={{{ [<tv-get-export-link>addprefix[https://www.mentalnodes.com]] }}} title={{!!title}} description={{!!description}} />

You may need to tweak that filter to remove a . or / character with removeprefix

Regards,
Saq

On Saturday, April 25, 2020 at 11:11:56 AM UTC+2, Anne-Laure Le Cunff wrote:

[Anne-Laure Le Cunff]

Thanks so much, Saq!

I may look into this later, but when I implemented your approach, it generated exactly what I wanted, for instance (that's from the static website output):

<a href="https://twitter.com/intent/tweet?source=https://www.mentalnodes.com/Folders-kill-creativity&amp;text=Folders kill creativity:%20https://www.mentalnodes.com/Folders-kill-creativity&amp;via=anthilemoon&amp;hashtags=mentalnodes" target="_blank" title="Tweet"><img alt="Tweet" src="social-icons/Twitter.png"></a>

(not sure why the URL says "Folders" and not "folders" but that's minor)

Very grateful!

[Saq Imtiaz]

@Anne-Laure you are welcome and this is helpful to the community too. We are very good at thinking in terms of manipulating content and presentation inside a running TW, but need some practice (and documentation) on extrapolating that to static html rendered from tiddlers.

If you are keeping the JS macros in place, the last short version I posted is worth a try at some point.

You are getting an uppercase first letter because the javascript macros turns the title into lowercase for the url and filenames.

To do the same with tv-filter-export-link:

[split[ ]join[-]encodeuricomponent[]lowercase[]]

[Jeremy Ruston]

Sorry to be late to this thread.

The static site generation templates included in the core don’t need to know the URL at which the site will be published because it only generates relative URLs. As things stand, users have to edit the definition of tv-wikilink-template in those templates to include their full URL.

An alternative that might work better in some situations would be pass the URL as a variable to the --rendertiddler or --render commands, and update the definition of tv-wikilink-template to include that variable.

Best wishes

Jeremy

On 25 Apr 2020, at 10:58, Saq Imtiaz <saq.i...@gmail.com> wrote:

@Anne-Laure you are welcome and this is helpful to the community too. We are very good at thinking in terms of manipulating content and presentation inside a running TW, but need some practice (and documentation) on extrapolating that to static html rendered from tiddlers.

If you are keeping the JS macros in place, the last short version I posted is worth a try at some point.

You are getting a uppercase first letter because the javascript macros turns the title into lowercase for the url and filenames.

--
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/5f8ea810-f1e1-4bee-89c8-02192e4f4a63%40googlegroups.com.

[Anne-Laure Le Cunff]

Thanks so much Saq and Jeremy!

Here is the final result – many thanks for your help!

To unsubscribe from this group and stop receiving emails from it, send an email to tiddl...@googlegroups.com.

[Birthe C]

Hovering the link everything on my screen blinks browser inclusive. It takes quite some time.

[Mohammad]

Hi Anne-Laure,

Thank you for sharing!

On Saturday, April 25, 2020 at 7:17:02 PM UTC+4:30, Anne-Laure Le Cunff wrote:

Thanks so much Saq and Jeremy!

Here is the final result – many thanks for your help!

This is lovely! The UI is simple and semantic!

 

--Mohammad

[Mat]

Anne-Laure Le Cunff wrote:

Thanks so much Saq and Jeremy!

Here is the final result – many thanks for your help!

Very nice and clean!

When link-popup is above the link, it seems the link is covered and cannot be clicked. The link is clickable if passing outside of the vertical "column" that  the link covers. When the popup is below the link, everything works.

<:-)