Supercharged Links showcase

Hi!

Looking for a way to customize internal links, I have first posted a feature request. Then I saw that the developement team and the community were very friendly and helpful to encourage plugin development, so I decided to give it a try.

And look at that! my first contribution ever!

Here are some explanation and examples of what you can do with this plugin.

Basics

The plugin basically scans the target file of each internal link of the files that are currently opened in your workspace.

It gathers some specific front-matter properties and includes them in the html element of the link, with the value of the property contained in the target note’s front matter section.

Complicated :cold_sweat:… let’s break it down step by step

Front-matter

As a reminder, front-matter section is an optional section of your note written in Yaml.
Here is the documentation about front-matter on Obsidian help website YAML front matter

Let’s say I have a note about Jim : Jim.md

---
category: people
next-actions: [👥, ☎️, 🍻, say hi]
age: 42
---

Jim is one of my colleagues

Let’s say that I want to have a specific display of the internal-links linking to Jim’s note to display a blue tag-like rounded rectangle image and display image when hovering the link

Settings

First you’ll have to tell the plugin which front-matter kind of properties you want your internal-link to be supercharged with.

here are my settings

So in this case the plugin will only include category, next-actions and tags in the internal-links

a.internal-links

When a file is opened or when one of the files of your vault has changed, the plugin is “supercharging” all internal-links with the front-matter properties set in the settings, if there are such properties in the file targeted by the link.

Let’s say that I have a file daily.md like this:

Daily.md

[[Jim]] will be organizing the weekly steering committee

Without the plugin activated, the html link element would normally look like this:

<a data-href="Jim" href="Jim" class="internal-link" target="_blank" rel="noopener">Jim</a>

You wouldn’t really know anything about Jim.md’s specificity here and therefore wouldn’t be able to customize it a lot.

That’s where the plugin comes in: it will add two extra properties in the <a> element : category and next-actions.
Since tags is not existing in Jim.md front-matter section, it won’t be included.

heads-up the plugin is not adding directly category and next-actions property. Instead, it will prefix them with data-link in order not to potentially conflict with other attribute management ssystem made by other plugins or Obsidian itself.

So… with the plugin activated the <a>element will be supercharged like this: <a data-href="Jim" href="Jim" class="internal-link" target="_blank" rel="noopener" data-link-category="people" data-link-next-actions="👥 ☎️ 🍻 say hi">Jim</a>

As you can see, even if tags is included in settings as a property to track, since it’s not included in Jim.md front-matter section, the property data-link-tags isn’t included in the <a> element

css

Now you can enjoy the flexibilty of css to customize your links by setting css properties in a snippet like links.css

exemple:

to put a fancy :bust_in_silhouette: emoji before the name of each link to a “category: people” note:

a.internal-link[data-link-category$="People" i]::before{
    content: "👤 "
}

to highlight the link in a tag-like blue rounded rectangle when there is a property next-actions in the target file:

a.internal-link[data-link-next-actions]{
    color: white;
    background-color: rgb(29, 29, 129);
    border-radius: 18px;
    padding: 5px 15px;
}

to display the next actions contained in the next-actions property of the target file when hovering the link:

a.internal-link[data-link-next-actions]:hover::after{
    content: " ► "attr(data-link-next-actions)
}

Conclusion

I hope that you will find this useful.

I usually use this to get some info about a linked-file when reading a note without having to open the target file or having to “Cmd-hover” to see the embedded note (which by the way, doesn’t display front-matter attributes for the moment): This helps me stay focused.

Don’t hesitate to share your usecases and give some ideas

22 Likes

Thanks for this! I am using both ideas illustrated above to add category indicators and next step iconography on hover.

The latter got me started on the idea to link out to the “next step” tool directly. e.g. we use a tool for taking 1:1 notes. I tried having the hover over show a link to that. Of course I quickly remembered that CSS create HTML elements like links. :frowning_face:

Specifically:

a.internal-link[data-link-small-improvements]:hover::after{
content: "<a href='" attr(data-link-small-improvements) "'>SI</a>";
}

Any ideas of how to pull this off? Or Maybe there’s an modification to the plugin that would facilitate these kinds of external links?

That could also be handy in opening citations in zotero or in a browser.

More cool features with the new version (0.1.0) of the plugin. You can now update the frontmatter of a note by right-clicking on any of its link in your vault, without opening the note:

Explanations here:

Link context menu extra options

Right click on a link will automatically display an item per target note’s frontmatter property

Update text property

  1. Right-click on the link
  2. Click on "Update … " to change the property’s value
  3. Change the value in the modal’s prompt
  4. Type enter to save or click X or esc to cancel

example:

Update boolean property

  1. Right-click on the link
  2. Toggle the swith in the modal to change the value
  3. Press esc to leave the modal

example:

Update multiple values property

  1. Right-click on the link
  2. Change values comma-separated
    1. Press enter, the values will be displayed as an array of values in the target note’s frontmatter property

this doesn’t work with indented lists YAML format

example:

Preset values for property

  1. Add a new Property Manager in the settings
  2. Enter the property name
  3. Add preset values (you can order them once the property has been created)

Back in a note Right-click on the link

  1. Click on "Update … " to change the property’s value
  2. The modal will display a dropdown list with preset values
  3. Change the value in the modal’s dropdown
  4. Click on the save button to save or click X or esc to cancel

example:

Multi select preset values for property

  1. In the settings, follow the steps 1 to 3 of previous section
  2. Toggle the isMulti switch

Back in a note Right-click on the link

  1. Click on "Update … " to change the property’s value
  2. The modal will display a grid of switches for preset values
  3. Change the values by toggling the switches in the modal
  4. Click on the save button to save or click X or esc to cancel

example:

Cycle through preset values

  1. In the settings, follow the steps 1 to 3 of previous section
  2. Toggle the isCycle switch

Back in a note Right-click on the link

  1. Click on " … > … " to change the property’s value for the next one in the settings list

example:

2 Likes

Supercharged Links 0.2.0 :
Now change any dataview inline field or frontmatter by right clicking on an internal link.
It’s making dataview tables a little bit closer to spreadsheets!

4 Likes

I have created an SCSS file allowing styling-per-file. Available options are.

category, category-hover, actions, actions-hover, background-color, background-color-hover, text-color, text-color-hover, border-radius, border-radius-hover, padding, padding-hover

Here’s the SCSS file _Supercharged Links.css (4.4 KB) ("rename to .scss to compile)
and generated css file Supercharged Links.css (60.6 KB)

SCSS file has variables that consist of all the NAMED css color, and ranges for padding, border-radius, etc. you can alter those variable to include only the things you want in the final css.
Please feel free to share any enhancements you make here with the rest of the community.

UPDATE:
I have attempted to make the scss more streamlined
variables available now are

actions-hover,
actions,
background-color-hover,
background-color,
border-color-hover,
border-color,
border-radius-hover,
border-radius,
border-style-hover,
border-style,
border-width-hover,
border-width,
category-hover,
category,
color-hover,
color,
font-size-hover,
font-size,
margin-hover,
margin,
padding-hover,
padding

the scss files are in snippets.zip (2.0 KB)
and this is the css file ready to pop in to snippets folder Supercharged Links.css (91.2 KB)

The colors available are all the Named colors only.
The border styles available are:-

dotted, dashed, solid, double, groove, ridge, inset, outset

All the dimension variables must have “px” suffixed. The ranges are:-

border-width: from 0px to 10px;
padding: from 0px to 20px;
margin: from 0px to 20px;
font-size: from 0px to 30px;
border-radius: from 0 to 20px;

if you need to change these ranges, make changes required in _variables.scss and recompile

1 Like

Is it possible to see the changes in editor view? I don’t like to switch between preview and editor.

Can I see the changes in Editor view?

Check the current version, it has an option to activate viewing in editor mode:

I’m still trying to figure out how to make it work based on the existing examples.

It looks like we should be able to just add something like:

[data-link-category$="People" i]::before{
    content: "👤 "
}

But I’m not seeing it work on my iPad. Haven’t tried on Windows yet to see if there’s a difference.

Thanks for the plugin!

I use it only to change the color of the text. The only downside is that I haven’t found colors that are easily readable in both light and dark mode. Is there a way to use css to set different colors for that? The Style Settings plugin lets you choose different accent colors for light and dark, so I thought that maybe this can be done, but I don’t know anything about css myself.