[TW5] URL prettify macro, e.g to show git-issue links as #number

[Mat]

I'm hoping to make a smoothifier for "community TW's" - a macro to use like so:

<<url "https://github.com/Jermolene/TiddlyWiki5/issues/1755">>

or

<<url "http://twaddle.tiddlyspot.com/#Bigger%20community%20%E2%87%84%20Better%20TW">>

...to respectively get:

1755

Bigger%20community%20%E2%87%84%20Better%20TW 

or ideally 

Bigger community ⇄ Better TW 

I figure it will be useful for community sites, at least my TWaddle site

In trying to create this, the following is what I've come up with... but...

(1) it doesn't work

(2) it uses hardcoded prefix (first part of url) because I don't know how to split out backwards, i.e from right-to-left, in the string.

(3) is seems generally awkward that I should "list filter" when I know it's only one item concerned, i.e the macro argument.

\define url(url)
<$list filter="[field:title[$url$]]">
   <$list filter="[removeprefix[https://github.com/Jermolene/TiddlyWiki5/issues/]]">
     <a href="$url$" target="_blank">#{{!!title}}</a>
  </$list>
</$list>
\end

Is there some widget that is more directly "Do" (some action widget perhaps?) rather than "Filter out + do + list"? Something like;

\define url(url)
<$do "$url$" "[removeprefix[https://github.com/Jermolene/TiddlyWiki5/issues/]]">
     <a href="$url$" target="_blank">#{{!!title}}</a>
</$do>
\end

...and/or, dealing with the hardcoded url, is there some kind of splitbefore operator that could, perhaps working from the end of the string, recognize wild characters - in my case specified to be numbers like the following. Here "/#" is meant as a (path-) slash followed by three digits which, because of working from right to left, splits out /1755.

\define url(url)
<$splitout righttoleft "/#" "$url$">
     <a href="$url$" target="_blank">#result</a>
</$splitout>
\end

<:-)

[Richard Smith]

Hi Mat,

I applaud your vigour in attempting to stretch wikitext but I think we might be at it's limit here (Jeremy?)

Like you, I am 'not a coder', but I think it might be easier for us to figure out the necessary javascript (and start to become coders!) than to look for a wikitext solution.

Here is the dev page on js macros: http://tiddlywiki.com/dev/index.html#JavaScript%20Macros

And here are the examples from the core: https://github.com/Jermolene/TiddlyWiki5/tree/master/core/modules/macros

This is (presumably) the js function we would use: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split

Presumably, this would be quite easy for our coding friends to achieve... What do you think?

Regards,

Richard

[RichardWilliamSmith]

Hi again Mat,

I think I did it. I put it in a dropbox wiki for you to look at: https://dl.dropboxusercontent.com/u/83055414/prettifylinkexample.html

I cloned one of the existing macros so that it had the right type  and module type and then fudged my way through it. The only vexing part was having to reload the wiki each time to see if it worked - I assume there must be a better way to do that.

The code looks like this (comments and criticism gladly accepted);

/*\
title: $:/RS/macros/prettifypath.js
type: application/javascript
module-type: macro

Resolves a relative path for an absolute rootpath.

\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
exports.name = "prettifypath";
exports.params = [
	{name: "path"},
];
/*
Run the macro
*/
exports.run = function(path) {
        var arrayOfStrings = path.split("/");
        var returnValue = "[[#" + arrayOfStrings[arrayOfStrings.length-1] + "|" + path  + "]]";
        return returnValue;
};
})();

 

[Mat]

Ye haw! I'm as grateful as I am positively surprised that someone actually took charge and implemented it! My warmest thank you, Richard!

Some bits:

• Shoud it perhaps be tagged $:/tags/Macro ?
  
• I note that  adds "#". This is a really nice touch for the github issues but does not work so well for permalinks as they already have this character after the slash sign so it results in double ##. It is of course trivial to remove that bit from the code so I can do this myself. Something else I will try is to let the user specify delimiter is but perhaps use "/" as default. (I'll attempt to implement this too... "good luck, Mat")
  
• When I add it (to TWaddle), should/can I in the tiddler head add the text:
  

creator: Richard Smith
source: https://dl.dropboxusercontent.com/u/83055414/prettifylinkexample.html#RS%2Fmacros%2Fprettifypath.js

• ...and, if I manage to get something working with my tweaks for it, how would I fairly credit you? Include "original creator" and "original source" perhaps?
• Maybe its worth making it into a plugin (ref Andreas Tinka) ?
  

<:-)

[Alex Hough]

Mat and Richard,

Another great moment in TW innovation -- thanks both!

I have been playing with the documentation macros, and wondered if the pretify link could be combined.

I like the way Richard made a test case using TW.com, I tried to copy...

I tried to put it on dropbox, but its not working how  thought : https://www.dropbox.com/s/7wxgixtbvkgkvuj/prettifylinkexamplewithicons.html

I have attached the file

Alex

--
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 post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/484ca13e-3773-4243-940c-892cb7d5c3fd%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[RichardWilliamSmith]

Hi Mat, 

• Shoud it perhaps be tagged $:/tags/Macro ?
  

hmmm... yes. Now you mention it, I'm not sure why it works without that - I guess because it's javascript and explicitly functions as a macro. 

• I note that  adds "#". This is a really nice touch for the github issues but does not work so well for permalinks as they already have this character after the slash sign so it results in double ##. It is of course trivial to remove that bit from the code so I can do this myself. Something else I will try is to let the user specify delimiter is but perhaps use "/" as default. (I'll attempt to implement this too... "good luck, Mat")
  

Good luck, Mat! It's really not so scary - you should be able to pass the delimiter as an optional second parameter 

• When I add it (to TWaddle), should/can I in the tiddler head add the text:
  

creator: Richard Smith
source: https://dl.dropboxusercontent.com/u/83055414/prettifylinkexample.html#RS%2Fmacros%2Fprettifypath.js

I'd rather not commit to that file existing for any length of time.  

• ...and, if I manage to get something working with my tweaks for it, how would I fairly credit you? Include "original creator" and "original source" perhaps?

I don't really care about credit, tbh (there are tens of thousands of Richard Smith's in the world anyway) but perhaps soon I will start to keep a github page of my own and that might be the place to point to (r1chard5mith)

 

• Maybe its worth making it into a plugin (ref Andreas Tinka) ?
  

Perhaps, if we add some more features/options it will be worth rolling up into a plugin and we can maintain it together - your idea after all.

@Alex: good idea Alex - inexplicably, I hadn't looked at the documentation macros before. I will have a play later. The dropbox issue seems to be because you don't have it in your 'public' folder? Only the public folder gets permanent links but some people don't have a public folder. Thanks for attaching the file, will explore.

[PMario]

Hi Mat,

The github issue number imo has some room for improvements. You always have to click the link, to see the issue title. ... They should have used TW pretty links like so:

[[github issue: Allow saver to be specified for download||https://github.com/Jermolene/TiddlyWiki5/issues/1755]]

That's much clearer. The number is shorter, but imo makes no sense.

just my 2 cents
mario

[Richard Smith]

Hi Mario,

I think you should only have one vertical bar in the pretty link? ie;

[[github issue: Allow saver to be specified for download|https://github.com/Jermolene/TiddlyWiki5/issues/1755]]

I supposed that Mat intended to use it something like this;

github issue: Allow saver to be specified for download (<<prettylink https://github.com/Jermolene/TiddlyWiki5/issues/1755>>)

Does GitHub have an api that will return the issue title? Or did you mean copy-paste?

Regards,
Richard

[Alex Hough]

Mario has a good point, pretty links seem the obvious way to link to GitHub issues as the URL has no meaning.

Wikipedia on the other hand has meaningful URLs: if TiddlyWiki could automatically parse Wikipedia links and add a icon. 

Wikipedia feels like TiddlyWiki's big brother, it's the wiki everyone knows

Alex

--
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 post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/0e232bb0-e08d-49d3-89ba-1a6266368321%40googlegroups.com.

[PMario]

On Wednesday, June 17, 2015 at 8:32:50 AM UTC+2, Richard Smith wrote:

I think you should only have one vertical bar in the pretty link? ie;
[[github issue: Allow saver to be specified for download|https://github.com/Jermolene/TiddlyWiki5/issues/1755]]

Good catch :) thx for the fix.
 

I supposed that Mat intended to use it something like this;

github issue: Allow saver to be specified for download (<<prettylink https://github.com/Jermolene/TiddlyWiki5/issues/1755>>)

Does GitHub have an api that will return the issue title? Or did you mean copy-paste?

Yes github has an api, but it would create a network request everytime the code is rendered, which may be every keystroke.

For me, it would be ok, to ping Wikipedia, if I open a tiddler.
But imo they won't be happy to get the same api request over and over again in a short period of time. It's quite likely, they'll block me.

And pinging all sorts of different pages with api requests, everytime I use a TW, it is a privacy concern for me.

-mario

[PMario]

On Wednesday, June 17, 2015 at 9:57:11 AM UTC+2, AlexHough wrote:

Mario has a good point, pretty links seem the obvious way to link to GitHub issues as the URL has no meaning.

Wikipedia on the other hand has meaningful URLs: if TiddlyWiki could automatically parse Wikipedia links and add a icon. 

I think, this is plugin territory. Parsing the eg: Wikipedia URL is very specific, and would need slightly different code for different sites.

And since the user taste is different, it needs to be a plugin not the core. eg: I personally wouldn't want to get an icon with the link ;)
... but imo we are slightly OT atm.

-m

[Alex Hough]

Mario,

I agree, it's a pluggin idea. The benefits may not be worth the effort... However... For educational use...

It could be useful in the case where missing tiddlers come with a 'search this on Wikipedia' prompt and the user is using Wikipedia as a major resource.

In TiddlyWiki.com most of the links are to Wikipedia or static TiddlyWiki.com. Automatically trimming URLs prefixed with TiddlyWiki or Wikipedia, prettyfyining the slug into human readable form would reduce visual clutter without the often tedious manual typing of pretty links.

In terms of branding TiddlyWiki and its identify, comparison and closer integration with Wikipedia could be a good direction to point a branding strategy; 

Drifting off topic here, but concider the following as 'meta narratives', sentiments note explicitly stated but communicated by 'showing not telling' and by association.

'TiddlyWiki - your own personal Wikipedia'

Like Wikipedia, but quicker, easier and more flexible

Small is beautiful - (borrowed from Schumacker's small is beautiful, Budist economics etc

TiddlyWiki - the wiki lovers wiki 

Organic wiki - it's growing all the time

The wiki you can grow with

The wiki to grow old with

Wikipedia is a whale, TiddlyWiki is a tiddler... 

Best wishes 

Alex

-m

--
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 post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/28c26a23-38bb-482a-b2a4-b5f571a0a74b%40googlegroups.com.

[Richard Smith]

Yes github has an api, but it would create a network request everytime the code is rendered, which may be every keystroke.

For me, it would be ok, to ping Wikipedia, if I open a tiddler.

Hi Mario - I found the github api and was just reading up on it. I thought it might be a good way for me to learn a bit more about how api calls work. 

I see your point about calling the api repeatedly - what do you think the best practice would be in this regard? ie; is there a way to limit the number of times it gets called (once?) - for example only when the wiki is loaded and store the result? Is there anywhere in the existing code that makes api calls?

Regards,

Richard

[Mat]

@Mario, @Richard

I definitely agree the real "title" would be superior to merely the number. We're probably stuck with github for the coming years so it would be useful to find a decent solution. And pretty Wikipedia links would of course have an even wider use. 

Yes github has an api, but it would create a network request everytime the code is rendered, which may be every keystroke

Can we perhaps store the title instead after the first ping? And set a flag or a flipswitch check or whatever it's called so that "if already stored then don't ping"? (If exists $:/prettyurl/#1755 ...). Only one ping, on creating the prettyurl, might also satisfy your justified privacy concerns.

[edit: Richard beat me to it in proposing to store the result.]

<:-)

[Mat]

@Alex

I like your more general prettifying ideas to add icons. It has triggered a cool pie-in-the-sky idea that I will detail on TWaddle, partly because it diverges from this thread too much and partly because I must think it through properly.

Some of those "meta narratives" as you call them really made me laugh. "Wikipedia is a whale, TiddlyWiki is a tiddler" Hilarious! Great stuff but actually don't let this stuff be hidden and forgotten in this thread.. if you haven't done so already, I think you should start a community site that collects all your crazy ideas like I am trying to do with TWaddle. You're definitely one of the boundary breakers among us! BTW, this OP (prettify links..) is intended to be part of a small collection of tools that TW blogs/sites can use.

<:-)

[PMario]

On Wednesday, June 17, 2015 at 11:43:26 AM UTC+2, Richard Smith wrote:

Hi Mario - I found the github api and was just reading up on it. I thought it might be a good way for me to learn a bit more about how api calls work. 

I see your point about calling the api repeatedly - what do you think the best practice would be in this regard? ie; is there a way to limit the number of times it gets called (once?) - for example only when the wiki is loaded and store the result?

You can cache the results in a data tiddler and check it prior to creating new api calls.
 

 Is there anywhere in the existing code that makes api calls?

Yes the tiddlyweb sync adaptor plugin. It's probably not the perfect fit, but it shows how the http utility functions are used.

see:
https://github.com/Jermolene/TiddlyWiki5/blob/master/core/modules/utils/dom/http.js and
https://github.com/Jermolene/TiddlyWiki5/tree/master/plugins/tiddlywiki/tiddlyweb

hope that helps
-mario

[Jeremy Ruston]

Hi Richard

Hi Mario - I found the github api and was just reading up on it. I thought it might be a good way for me to learn a bit more about how api calls work. 

I see your point about calling the api repeatedly - what do you think the best practice would be in this regard? ie; is there a way to limit the number of times it gets called (once?) - for example only when the wiki is loaded and store the result?

You definitely don't want to be making HTTP calls from macros or widgets; by the time the call returns the widget/macro might have been destroyed and recreated by the refresh mechanism.

Here's a potentially workable approach. Issue 1799 has the following URL:

https://github.com/Jermolene/TiddlyWiki5/issues/1799

As a convention, we could store the corresponding title in the text field system tiddler:

$:/plugins/richardsmith/githubissues/https://github.com/Jermolene/TiddlyWiki5/issues/1799

Then we need to display an issue we could do so with a transclusion that falls through to displaying the URL if the title tiddler is missing:

<$transclude tiddler="""$:/plugins/richardsmith/githubissues/$(issue-url)$""">

$(issue-url)$

</$transclude>

Then we'd need a startup module or daemon that handles `tm-load-url` messages, with parameters indicating the URL to load and the tiddler to store the data. The loading would happen asynchronously, triggering a refresh when the tiddler is eventually loaded. We would probably need to take steps to avoid the same tiddler being repeatedly loaded (perhaps we could rely on XMLHttpRequest to observe the incoming HTTP caching headers).

The final part is triggering the loading. That's tricky because we don't currently have a way of triggering a message when a chunk of content is displayed; messages are always triggered by external events like clicks or timers. The easiest way to experiment would be with a JS macro that sends the `tm-load-url` message when it is rendered.

That's only an outline, I'd be delighted to help with details. The url loading mechanism is nicely generic, though.

Best wishes

Jeremy.

--

Jeremy Ruston
mailto:jeremy...@gmail.com

[PMario]

Hmm,
As I wrote in my first response. The TW pretty link mechanism goes a long way, is bloody simple and works out of the box.
-m

[Alex Hough]

I like the uk.gov.uk site: I became a fan when I discovered TW old boy PSD went to work there. Here we can see external link icons. 

In terms of credibility, especially when dealing with the pubic sector, producing websites with a similar level of complexity to government standards is a good strategy

If the external link plugin had the ability to add the icon, or it was in a <<.external "URL>> documentation marco -- I think it would be a good addtion

Alex

--

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 post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/59d33f4f-b451-4388-b85e-4b7ca0052c84%40googlegroups.com.

[PMario]

On Saturday, June 20, 2015 at 11:27:16 AM UTC+2, AlexHough wrote:

If the external link plugin had the ability to add the icon, or it was in a <<.external "URL>> documentation marco -- I think it would be a good addtion

This can be achieved by pure CSS.

Copy the following CSS definition into a tiddler eg: myExternalLinkStyle and tag it $:/tags/Stylesheet


a.tc-tiddlylink-external:after {
    display: inline-block;
    content: "";
    width: 12px;
    height: 8px;
    background: transparent url(data:image/gif;base64,R0lGODlhCAAIAIABAABmZv///yH5BAEKAAEALAAAAAAIAAgAAAIPjAMJd5q2HoQLsTpto84UADs=) no-repeat center;
}

if you use:

a.tc-tiddlylink-external:before instead of :after the icon is in front of the link.

have fun!
mario

[PMario]

On Saturday, June 20, 2015 at 4:26:33 PM UTC+2, PMario wrote:

    background: transparent url(data:image/gif;base64,R0lGODlhCAAIAIABAABmZv///yH5BAEKAAEALAAAAAAIAAgAAAIPjAMJd5q2HoQLsTpto84UADs=) no-repeat center;

The cool thing here is, that the used gif imo is extremely small.
This mechanism was shown here: https://groups.google.com/forum/#!topic/tiddlywiki/DPv-2QBfQQA by Stephan Hradek

-mario

[Alex Hough]

Great stuff Mario

Alex

--

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 post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/31a741c0-f76f-4ff9-90a6-36a01bb8fb95%40googlegroups.com.