extensions
contribute
faq

UNLINK FINDER

Helps you find page references that haven’t been linked

Installation

You could use the Copy Extension button below to individually install this extension. To install, just paste anywhere in your Roam graph and click "Yes, I Know What I'm Doing".

Manual Installation

If the extension doesn't work after using the copy extension button above, try installing manually using the instructions below.

First create a block with the text {{[[roam/js]]}} on any page in your Roam DB. Then, create a single child of this block and type three backticks. A code block should appear. Copy this code and paste it into the child code block in your graph:

var existing = document.getElementById("roamjs-unlink-finder");
if (!existing) {
  var extension = document.createElement("script");
  extension.src = "https://roamjs.com/unlink-finder/main.js";
  extension.id = "roamjs-unlink-finder";
  extension.async = true;
  extension.type = "text/javascript";
  document.getElementsByTagName("head")[0].appendChild(extension);
}

Finally, click "Yes, I Know What I'm Doing".

Usage

Configuration

There are currently 2 elements you can configure. You must create a page called [[Unlink Finder]] and create Attributes on the page matching the two types below.

Minimum Characters

Adding an attribute Minimum Characters:: with an integer changes the minimum page length to be a match.

Example:

  • If you put Minimum Characters:: 5 will only show matches where the page is at least 5 characters in length.

    • The page [[TODO]] would not show any matches but the page [[Unlink Finder]] would.

Alias Case-Sensitive

This enables you to control whether Alias matches are case-sensitive or not.

Setting Alias Case-Sensitive:: Y will require all alias matches match case exactly

Example:

  • If the page [[Unlink Finder]] has Aliases:: Unlinked Finder attribute, the phrase unlinked finder would not match as an alias. Unlinked Finder, on the other hand, would match as it matches the case exactly.

Clicking the X shaped button in the menu bar will activate the Unlink Finder.

By default, found items have a different background color depending on which type of match it is.

There are easily targeted CSS classes to change the behavior of desired.

Click-to-Link

Right click on a suggested link and choose between a [[Reference Link]] or an [Alias Link]([[Reference Link]])

Match Types

Exact Match Type

These matches are case-sensitive, are a complete word, and are not already linked in a parent block.

Example

  • If you have a page called [[Unlink Finder]]

Fuzzy Match Type

These matches are case-insensitive, are a complete word, and not already linked in a parent block

Example

  • If you have a page called [[Unlink Finder]]

Partial Match Type

These matches are case-insensitive, only part of a word, and not already linked in a parent block.

Example

  • If you have a page called [[Unlink Finder]]

Redundant Match Type

These matches are case-insensitive, can be any part of a word, and are already linked in the parent block

Example

  • If you have a page called [[Unlink Finder]]

Alias Match Type

If you have any pages with an Aliases:: attribute, those aliases will be shown in Roam blue.

These also have a tooltip (as mentioned above) that show the actual page name. Make sure you have CSS suggested so these tooltips work.

Example

  • If you have a page called [[Unlink Finder]] with an Alias Unlinked Finder

  • If you have a line that mentions Unlinked Finder

    • When hovering the tooltip shows

Demo

How to change the styling

Element Class Detail

Active elements

Attribute: recommend with value underline

Class: unlink-finder

One of the following classes

Class: exact-word-match

Class: fuzzy-word-match

Class: partial-word-match

Class: redundant-word-match

Inactive elements

Attribute: recommend with value underline

Class: unlink-finder

One of the following classes

Class: exact-word-match-inactive

Class: fuzzy-word-match-inactive

Class: partial-word-match-inactive

Class: redundant-word-match-inactive

Legend elements

Class: unlink-finder-legend

Class: unlink-finder

One of the following classes

Class: exact-word-match

Class: fuzzy-word-match

Class: partial-word-match

Class: redundant-word-match

Context Menu elements

The context menu contains 3 parts

The backdrop

This makes it so you can click "away" from the dropdown easily

The menu

This is the main container for the context menu

The options

This is each element in the context menu (the stuff you click on)

The Backdrop

Class: unlink-finder-context-backdrop

The Menu

Class: unlink-finder-context-menu

The Menu Options

Class: unlink-finder-context-menu-option

Changing the Styling

If you only want to change the colors of the background, you can simply add this with whatever coloring you would like

.alias-word-match {
  background: rgba(125, 188, 255, 0.6) !important;
}
.exact-word-match {
  background: rgba(71,151, 101, 0.4) !important;
}
.partial-word-match {
  background: rgba(229, 233, 236, 1.0) !important;
}
.fuzzy-word-match {
  background: rgba(220, 171, 121, 0.6) !important;
}
.redundant-word-match { 
  background: rgba(168, 42, 42, 0.4) !important;
}

If you use a dark theme, you may want to add this:

.alias-word-match {
  background: rgba(125, 188, 255, 0.6) !important;
}
.exact-word-match {
  background: rgba(71,151, 101, 0.4) !important;
}
.partial-word-match {
  background: rgba(229, 233, 236, 1.0) !important;
}
.fuzzy-word-match {
  background: rgba(220, 171, 121, 0.6) !important;
}
.redundant-word-match { 
  background: rgba(168, 42, 42, 0.4) !important;
}

@media (prefers-color-scheme: dark) {
  .alias-word-match {
    background: rgba(48, 123, 246, 0.7) !important;
  }
  .exact-word-match {
    background: rgba(71,151, 101, 0.8) !important;
  }
  .partial-word-match {
    background: rgba(162, 90, 215, 0.7) !important;
  }
  .fuzzy-word-match {
    background: rgba(220, 171, 121, 0.8) !important;
  }
  .redundant-word-match { 
    background: rgba(168, 42, 42, 0.7) !important;
  }
}

Demo

Contributors

This extension is brought to you by RoamJS! If you are facing any issues reach out to support@roamjs.com or click on the chat button on the bottom right.

If you get value from using this extension, consider sponsoring RoamJS by clicking on the button below!

A special thanks to those who's contributions also helped make this extension possible:

Tyler Wince
Tyler Wince
💻

Other Extensions