I was greatly inspired by the minimalist design of a certain website called gwern (that I cannot link due to me being a new user), and did some work on my own userstyle.css. One of the features of the website is that they add a small icon after every link, that shows where the link goes:
It's such a beautiful feature, I wanted to replicate it in Joplin:
/* userstyle.css */
.link-icon {
border-radius: 0px;
display: inherit;
margin: 0;
width: 16px;
height: 16px;
border-bottom: 1px solid #7287fd;
position: relative;
bottom: -2px;
fill: #7287fd;
}
/* markdown note */
<a href="book">book <img src=":/34cbd3fa1e8044eebe11854f8b432c11" class="link-icon"/></a>
Rendered result:
And I think it was a minor success. The catch is that whenever I want such a link in my note, I have to go back to my list of all links with icons I made prior and copy and paste the a tag into my new note. Doable, but impractical.
Would it be possible to add a new feature into Joplin, or create a plugin that does this automatically, so that I can stick by simple markdown links and have a script checking the url for keywords like wikipedia?
[Janis Joplin](https://cs.wikipedia.org/wiki/Janis_Joplin)
This would render like in the image above, with Wikipedia icon trailing behind it.
Or perhaps do it semi-automatically, where if a user types out the link, a little context menu appears that lists all available icons to add to the link, similar to Quick Links plugin?
There is already the Joplin icon which is added ahead of any internal link. Think of this feature request as an extension to this.
