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

[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?

[mrjackphil]

The JS tweak will be broken in next releases.

[Mavalator]

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

[mrjackphil]

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]

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]

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)