Supercharged Links for Obsidian

Supercharged Links automatically converts registered attributes into CSS custom properties prefixed with --data-link-. This allows you to use note metadata directly in your CSS.

Usage Patterns

• Direct Colors: If a property contains a color value (e.g., colour:: #8bc34a), use var(--data-link-colour).
• Images/Avatars: If a property contains an HTTP URL (e.g., photo:: https://...), it is treated as a URL. You can use it with background-image: var(--data-link-photo);.

Note: When using URLs, the plugin treats them as url() compatible values in CSS.

/* Using a custom color property from a note */
[data-link-colour] {
    color: var(--data-link-colour);
}

/* Using an avatar URL from a note */
.data-link-icon[data-link-photo^="https" i]:empty {
    background-image: var(--data-link-photo);
    background-size: cover;
    border-radius: 100%;
}

Supercharged Links enhances standard Obsidian internal links by injecting metadata from the target note directly into the HTML <a> element. This allows you to style links based on the properties (YAML frontmatter or Dataview inline fields) of the note they point to.

Selector Types

You can create selectors based on three criteria:

• Tag: Matches specific tags (e.g., #person).
• Attribute: Matches specific YAML frontmatter or Dataview properties (e.g., status: call soon).
• Path: Matches the file path, including folders and extensions (e.g., notes in the dailies folder).

To make a property available for styling, you must first register it in the plugin settings:

1. Register Attributes: In the Supercharged Links settings, add your desired property names to the Target Attributes for Styling option. For example, if you want to style links based on a status property, add status here.
2. Create Selectors: Under the Styling header, create a new selector:
   • Select the Type (Tag, Attribute, or Path).
   • Enter the Value to match.
   • For Path selectors, use 'Contains value' instead of 'Exact match' to target entire folders.
3. Configure Styles: Use the Style Settings Plugin to define the visual output (text color, background, or prepended/appended text like emojis).

To use Supercharged Links, you must install and enable two specific Obsidian plugins:

1. Supercharged Links plugin: The core plugin that injects metadata into your links.
2. Style Settings Plugin: Used to configure the visual styles (colors, emojis, etc.) for your selectors without writing CSS.

For highly customized designs, you can use Obsidian CSS snippets to target the injected data-link-* attributes.

Targeting Selectors

• Tags: Use attribute selectors like [data-link-tags*="#topic" i] (the i makes it case-insensitive).
• Attributes: Use [data-link-status] to target links where a specific attribute exists.
• Icons: To avoid bugs in Live Preview, target .data-link-icon specifically.
• Hover Effects: Use .data-link-icon-after[data-link-status]:hover::after to show attribute values on hover.
• Hiding Links: Use a.internal-link[data-link-tags *="hide"] to hide specific links.

/* Example: Change color based on a tag */
[data-link-tags*="#topic" i]{
    color: #ff6600 !important;
}

/* Example: Show status on hover */
.data-link-icon-after[data-link-status]:hover::after{
    content: " ► "attr(data-link-status)
}

The plugin allows you to create selectors based on three primary criteria to target specific links for styling:

• Attribute: Targets YAML or DataView attributes. Requires you to have previously added the attribute name to the 'Target Attributes for styling' setting.
• Tag: Targets specific tags associated with a note.
• Path: Targets notes based on their file path or name.

When configuring an Attribute selector, you can also choose a Matching type (e.g., exact, contains, startswith, endswith, whiteSpace) and toggle Case sensitive matching.

The core mechanism of the plugin is to inject metadata from a target file into the HTML elements of links pointing to that file.

1. Attribute Mapping: The plugin reads specific fields from the target file's frontmatter (or Dataview inline fields) based on the targetAttributes setting.
2. Data Attributes: These values are injected into the link's DOM element as data-link-[attribute-name] (e.g., if you target status, the link gets data-link-status="done").
3. CSS Styling: The plugin automatically adds specific CSS classes to these links to facilitate styling:
   • data-link-icon
   • data-link-icon-after
   • data-link-text

This allows you to use CSS selectors like a.internal-link[data-link-status="done"] { color: green; } to style links dynamically based on the target file's properties.

The plugin works by generating a CSS snippet named supercharged-links-gen.css in your .obsidian/snippets/ folder.

1. Generation: When you add or edit a selector, the plugin builds a CSS file containing specific data-attribute selectors (e.g., [data-link-status="done"]) and defines CSS custom properties (variables) for each selector using a unique uid.
2. Styling: The generated CSS provides the structure, but the actual visual values (colors, weights, etc.) are intended to be controlled via the Style Settings plugin.
3. Automation: If Automatically activate snippet is enabled, the plugin will automatically manage the creation and activation of this CSS file.

When creating or editing a selector, you can enable specific styling capabilities. These options determine which CSS custom properties are generated for that selector:

• Style link text: Enables color and font-weight styling.
• Add content before link: Enables the ::before pseudo-element (prepend text/icons).
• Add content after link: Enables the ::after pseudo-element (append text/icons).
• Add optional background or underline to link: Enables background color, border-radius, padding, and text-decoration styling.