Move backlinks from sidepanel into the document section (as in Roam)

[mrjackphil]

EDIT: In 0.7.0 version you can put a backlinks pane below. So there will be no need for CSS solution.

EDIT: JS TRICK IS BROKEN NOW. THERE IS NO WAY TO INJECT JS FROM NOTES. THAT WAS MADE BECAUSE OF THE SECURITY REASONS.

EDIT: JS tweak will be broken in next releases of Obsidian. You could use that CSS Solution

=== Original ===

I really miss some features from Roam Researn. But I don’t like waiting, so I decided to do something with it.

This is a piece of code which can help us to achieve this.

(function(){
	const backlinks = document.querySelector('.side-dock-plugin-panel.mod-backlinks');
	const editor = document.querySelector('.CodeMirror-sizer').parentElement;
	editor.appendChild(backlinks);

	backlinks.style.display = 'flex';
	backlinks.style.width = 'calc(100% - 35px)';
	backlinks.style.marginLeft = '25px';
	backlinks.style.marginTop = '50px';
})()

We just need something to run this code. There are couple ways. Just put one of code snippets below in your note and go to the view mode.

• If you decided to use a button, you’ll see a button which must be clicked.
• The second snippet will apply automatically, when you go to the view mode.

After that you’ll be able to see backlinks in your note below the main content.

<!-- This will create a button -->
<button onclick="(function(){ const backlinks = document.querySelector('.side-dock-plugin-panel.mod-backlinks'); const editor = document.querySelector('.CodeMirror-sizer').parentElement; editor.appendChild(backlinks);  backlinks.style.display = 'flex'; backlinks.style.width = 'calc(100% - 35px)'; backlinks.style.marginLeft = '25px'; backlinks.style.marginTop = '50px'; })()">Put backlinks into the editor section</button>

<!-- This will start a script when note loaded -->
<img src onerror="(function(){ const backlinks = document.querySelector('.side-dock-plugin-panel.mod-backlinks'); const editor = document.querySelector('.CodeMirror-sizer').parentElement; editor.appendChild(backlinks);  backlinks.style.display = 'flex'; backlinks.style.width = 'calc(100% - 35px)'; backlinks.style.marginLeft = '25px'; backlinks.style.marginTop = '50px'; })()">

EDIT:

• You need to put code and press button only in one note. Backlinks will appear in other notes as well
• Backlinks will appear only in edit mode.

EDIT:
CSS Solution which will put right sidepanel at the bottom of the screen

[ryanjamurphy]

Thanks for this. This seems like it would be a good plugin, maybe? That way you don’t need to remember to add code to every note!

[mrjackphil]

When API will be available, I’ll be glad to play with it. For now you just need to add the code to only one note and just visit it in View Mode.

After that backlinks will be available in all notes.

[basalt78]

Thanks for sharing!

[ryanjamurphy]

Ahh, I assumed it’d have to be every note. Great, thanks!!

[Mr.Stuki]

First, thanks for sharing
Can you explane how to install it?
It dosen´t work when I copy the code in.
It seems so that the first part of the code is the Problem, the last part with the button work.

Edit:
okay, I found my mistake.

[deftdeg]

As much as I want Obsidian to differentiate itself from Roam - in the best way possible - I do support the feature request from @mrjackphil. Backlinks are so intrinsic to the whole point of bi-directional linking and thought management. One should have instances of empty pages where all the content is contained in the backlinks.

I feel the current UI places great focus on the note being developed, which isn’t bad… but backlinks are relegated to a narrow partition on the side, when they need to be inline.

As an aside, does anyone else notice that one’s peripheral vision is more attenuated in the lateral plane than it is in the vertical plane - another reason to have backlinks inline with the current note.

While I’m waiting for the Typora-like WYSIWYG editor - that’s in the Obsidian Roadmap, I would personally sacrifice multiple editors for just one - with Backlinks inline - or at least positioned underneath vs at the side.

[ksandvik]

Would it help if it was a user-setting to put the Backlinks/Tags view at the bottom of the view, similar to a status pane?

[Gnopps]

Thanks for creating this @mrjackphil!

I can’t make it work however. I copied the cody for the button and the button correctly shows up. However when I click the button the only thing that happens is that the backlinks disappear from the right panel, nothing else (i.e. nothing shows up at the bottom).

I’m using standard light theme.

Any ideas on what I should do differently?

[mrjackphil]

Check the edit mode.

[mrjackphil]

I think we can achieve this using CSS. Just playing around a little bit.

Achieved using this piece of code

/* Move backlinks section at the bottom */
.app-container:not(.is-right-sidedock-collapsed) .workspace-leaf-content .view-content {
  height: calc(100% - 200px);
}

.side-dock.mod-right {
  position: fixed;
  width: 100% !important;
  height: 200px;
  bottom: 20px;
  transition: left 0.3s;
}


.app-container:not(.is-left-sidedock-collapsed) .side-dock.mod-left {
  height: calc(100% - 200px);
}

.app-container.is-right-sidedock-collapsed) .side-dock.mod-right {
  width: 100% !important;
}


/* Reduce width when left panel is opened */
/*
.app-container:not(.is-left-sidedock-collapsed) .side-dock.mod-right {
  width: calc(100% - 300px) !important;
  left: 300px;
}
*/

[NilsHempel]

Thanks for the CSS! It’s working nicely!

FYI for others: Just C&P in the obsidian.css file.

I’ll play with it so see if I can get it to just be in the editor panel and not cover the left panel as well.

[iteacher]

In this way, the information that can be displayed is too little, which requires troublesome sliding screen operation.

[mrjackphil]

Updated the script. Now it will not cover left panel.

@iteacher Yep. It’ll not work for everyone. But it works better for me than open/close right panel to check backlinks. I want to see them on a daily basis for each note and I prefer sidepanel to be opened only for doing something specific.

EDIT: Oh. You talked about width reducing, right? I thought you don’t like moving sidepanel at all)

[NilsHempel]

Thank you! Works beautifully with the standard width.

• When you change the width of the left panel, it doesn’t adapt automatically. I’ll dig around CSS to see if I can figure this out.
• Do you think there’s a way to display the link panel on the level of individual notes, mrjackphil? Right now it spans both notes and being able to see the links for several notes might be useful.
• Also, the active window that the panel is connected to isn’t very obvious. What do you think of adding a colored bar on its top to make it more obvious?
• What iteacher was talking about was dynamically changing the height of the panel much like the file navigator, I think.

[s-kyy]

Where exactly do we put the first piece of code? Here is what I see when I put everything in a single note. Should I have put it in the CSS file? a separate one?

[mrjackphil]

Press the button “Put backlinks into the editor section” in your note and go to the “edit mode”

[s-kyy]

I also tried reordering the code, but it had the same effect.

[mrjackphil]

Try toggle the right sidepanel after you did this. What happened?

[Mavalator]

@mrjackphil

<!-- This will create a button -->
<button onclick="(function(){ const backlinks = document.querySelector('.side-dock-plugin-panel.mod-backlinks'); const editor = document.querySelector('.CodeMirror-sizer').parentElement; editor.appendChild(backlinks);  backlinks.style.display = 'flex'; backlinks.style.width = 'calc(100% - 35px)'; backlinks.style.marginLeft = '25px'; backlinks.style.marginTop = '50px'; })()">Put backlinks into the editor section</button>

Thanks @mrjackphil. I love having this functionality. Great work! But it seems as if the backlinks only show in editor mode (not in preview), and also only when the right sidepanel is open. Is that how you intended this to work?