How to redirect to note when clicking on folder in Publish

My goal was to have a note for each top-level folder on my publish site that a user would be sent to when the folder name was clicked. With this method I used below, a user can still use the arrow to expand/contract the folder normally. Also, the note is hidden from the nav to reduce clutter.

publish

How I did it:

  1. I made notes for each folder with the same name as the folder
  2. I hid the notes with css (publish.css)
.tree-item-self[data-path^='Concepts/Concepts'] {
  display: none;
}

.tree-item-self[data-path^='FAQ/FAQ'] {
  display: none;
}

.tree-item-self[data-path^='Guides/Guides'] {
  display: none;
}

.tree-item-self[data-path^='Tools/Tools'] {
  display: none;
}

.tree-item-self[data-path^='Tutorials/Tutorials'] {
  display: none;
}
  1. I added an attribute that contains the redirect link to the folder name in the nav for each folder
  2. Added an event listener to redirect to the link in the attribute
const site = "https://dataengineering.wiki";
var navContainer = siteNav.querySelector('.tree-item').querySelector('.tree-item-children');

// Each folder contains a note with the same name as the folder, add a redirect to the note when the folder is clicked.
// Expand arrow should not be affected.
let folders = ["Concepts", "FAQ", "Guides", "Tools", "Tutorials"];
for (const item of folders) {

    var element = navContainer.querySelector(`[data-path="${item}"] div.tree-item-inner`);
    element.setAttribute('data-link', `${site}/${item}/${item}`);
    element.addEventListener('click', function(e) {
        window.location.href = e.target.getAttribute('data-link');
        return false;
    });
};

I tried various methods of achieving this like removing the div and surrounding a span tag with an a tag but this was by far the simplest and most reliable.

See full code here:

1 Like