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

s-kyy · June 1, 2020, 3:24pm

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

mrjackphil · June 1, 2020, 3:34pm

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

Mavalator · June 1, 2020, 5:26pm

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?

mrjackphil · June 1, 2020, 5:28pm

The JS tweak will be broken in next releases.

Mavalator · June 1, 2020, 5:31pm

Thanks for the headsup. Probably best to stick to CSS then.

mrjackphil · June 1, 2020, 7:49pm

Improve compatibility with left sidepanel.

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

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

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

s-kyy · June 2, 2020, 4:55am

The right side panel, was empty after I clicked your button. I found the backlinks ended up being only on one note (I had many notes open). When I clicked on my other notes, the backlinks showed up on that first note only. The note with the code didn’t have backlinks either, just the code. I restored to a previous version of obsidian for now, since I didn’t want to change the theme just to use this hack. I’ll come back to it when it’s fully integrated in the future, but thanks.

mrjackphil · June 2, 2020, 4:58am

Anyway, JS trick with button will not work in future version.

You can try CSS snippet which works a little bit different (see picture above)

Zeppelin · June 10, 2020, 1:38pm

@mrjackphil any way to get this running with Andy V2?

ryanjamurphy · June 10, 2020, 2:38pm

FWIW, 0.7 will likely break this anyway (and comes with its own backlink pane-movement solution).

trchern · June 11, 2020, 3:10pm

It seems you guys are more concerned about the “location” of the backlink information (from side to bottom). I don’t mind it is on the side bar. What I really like about Rome Research is that it backlink to a “whole block of information” and append it to the existing text of page, not just texts around the [[page]].

mrjackphil · June 12, 2020, 7:56am

@trchern This feature mentioned here and there on a forum. I miss:

a full note text in backlinks
editing content in backlinks without jumping between notes

But maybe I just need to change my way to work with notes.

@Zeppelin 0.7 will give a very flexible pane system. It will resolve this problem.

nicrivard · June 12, 2020, 6:10pm

is it just me or is HTML broken in preview mode in v0.6.7 ?

@mrjackphil’s original code no longer works for me… I can’t click the button to trigger the function.

mrjackphil · June 13, 2020, 4:36am

That’s fine. There is no way to inject JS from notes. That was made because of security reasons.

Zeppelin · August 22, 2020, 1:36pm

Has anybody found a suitable solution to this issue in 0.7+ already? I’m using Andy v2 and find it quite unsatisfying to only have the backlink panel below the very first panel.

I’m currently having the left sidebar open all the time with the backlink panel attached but find this quite unsatisfying. My issues with this are:

only one backlink view at a time
backlinks always visible, not only if scrolled down all the way

My favoured experience by far would still be the Roam-like backlink section per document at the very bottom.

johw · August 22, 2020, 5:22pm

Maybe I do not understand it correctly but you can drag-and-drop the backlinks panel to be under the current note right? If it is only the placement of the backlinks you are concerned about. That way you can hide both sidebars.

JeRoen

Jeffurry · August 23, 2020, 1:07pm

Before the html scrubber was added a couple if iterations ago @Kognise had a way of appending Backlinks to the bottom of a page/doc. I miss that.

mrjackphil · September 5, 2020, 7:25pm

I’m usually run this snippet

(function() {
	const backlinks = document.querySelector('.backlink-pane')
	const doc = document.querySelector('.mod-root .CodeMirror-lines');
	doc.appendChild(backlinks);
})()

in a console (which could be opened using Ctrl+Shift+I

But be careful. It’s a hacky way which can break your experience with obsidian and cause unpredictable behavior.

This will bring backlinks section at the bottom of the root document only. You can restore Obsidian’s default behavior by refreshing the page (using Ctrl+R)

Lachlan · September 7, 2020, 3:04pm

Love it

mark1nhu · September 28, 2020, 3:38pm

Great! So far the best approximation to how Roam works*. Any idea on how to make this piece of code run automatically every time I open Obsidian?

( * yeah, I get that Obsidian doesn’t want to copy Roam just for the sake of it, but I truly think Roam FOR NOW handles backlinks better, while Obsidian is WAY BETTER in all the other fronts - that’s why I’m here, although I got a Roam believer plan as a gift.)