Curious Chase

Curiously Chase

JS solution for hiding an Obsidian Publish Sidebar

Share on Twitter

This snippet should be added to your publish.js.

If this is the first part of your publish.js, I recommend uncommenting the commented out (function() { and })(); lines so that you isolate the scope of this function

JS Snippet for publish.js

//(function () {
  function maybeSetFocusMode() {
    const noteContainer = document.getElementsByClassName("markdown-rendered")[0];
    const hideSidebarClassname = "focus";
  
    const rightSidebarClassname = "site-body-right-column";
    const rightSidebar = document.getElementsByClassName(
      rightSidebarClassname
    )[0];
  
    // if you want to also do the left sidebar, uncomment all of the commented out code that starts with leftSidebar
    const leftSidebarClassname = "site-body-left-column";
    const leftSidebar = document.getElementsByClassName(leftSidebarClassname)[0];
  
    if (noteContainer.className.includes(hideSidebarClassname)) {
      rightSidebar.style = "visibility: hidden; flex: 0; width: 0;";
      leftSidebar.style = "visibility: hidden; flex: 0; width: 0;";
    } else {
      rightSidebar.style = "";
      leftSidebar.style = "";
    }
  }
  
  function initializeRendererObserver() {
    // run on page transition
    new MutationObserver(maybeSetFocusMode).observe(
      document.getElementsByClassName("markdown-rendered")[0],
      {
        attributes: true,
      }
    );
	// run on page render
    maybeSetFocusMode();
  }
  
  initializeRendererObserver();
  
  //})();

This sets up a MutationObserver that observes the element with the markdown-renderer class of your site. Anytime that element changes (ie, when you visit a different page), it runs the callback function (the first argument passed to MutationObserver).

The function...

An alternative based on frontmatter

It's possible you want to use frontmatter instead of the cssclass to decide whether to do something in this observer. 1

Here's an alternative script that you can use to check the .frontmatter element for the presence of a field (in this example, I'll use mode: focus):

//(function () {
function maybeSetFocusMode() {
  const noteContainer = document.getElementsByClassName("markdown-rendered")[0];

  const rightSidebarClassname = "site-body-right-column";
  const rightSidebar = document.getElementsByClassName(
    rightSidebarClassname
  )[0];

  // if you want to also do the left sidebar, uncomment all of the commented out code that starts with leftSidebar
  const leftSidebarClassname = "site-body-left-column";
  const leftSidebar = document.getElementsByClassName(leftSidebarClassname)[0];

  if (meetsCriteria()) {
    rightSidebar.style = "visibility: hidden; flex: 0; width: 0;";
    leftSidebar.style = "visibility: hidden; flex: 0; width: 0;";
  } else {
    rightSidebar.style = "";
    leftSidebar.style = "";
  }
}

function meetsCriteria() {
  var yamlContainer = document.querySelector(".frontmatter.language-yaml");
  if (!yamlContainer) return false;

  return yamlContainer.textContent.includes("mode: focus");
}

function initializeRendererObserver() {
  // run on page transition
  new MutationObserver(maybeSetFocusMode).observe(
    document.getElementsByClassName("markdown-rendered")[0],
    {
      childList: true,
      subtree: true,
    }
  );
  // run on page render
  maybeSetFocusMode();
}

initializeRendererObserver();

//})();

Some important distinctions about what changed...

A loom walking through how it works...

Final Notes

Footnotes

  1. (thanks to Jenna of polyrain.dev for the tip on finding the .frontmatter, I had no idea that element was present!)

Share on Twitter