Hi Simon (@svsmailus),
Sorry I didn’t reply sooner, I was on Mobile when this post was around and I know I’m late on replying to this post. I bookmarked it and now just came back. I have some thoughts, first off 1200+ notes is really going to be way too much for a single page. You mentioned search engines as being a concern, and not only will it make it next to impossible to get links to the exact note on the page, it would make it difficult for the search engine to determine what the page is about.
I don’t know the content and how similar the notes are to one another or how long they are, but navigation is only one concern. The sidebar like stripe uses works well, but stripe isn’t displaying near 1200 individual subjects. Honestly, I don’t find there api-page easy to navigate at all. I’d probably want a look more like the Bootstrap documentation site, where if I’m looking for items about layout I have a section on a layout that expands. Similar to the Foundry documentation that’s referenced on this post.
So organizing these 1200 notes is probably the hardest part.
Now RapidWeaver is great, and yes, there are folks that have figured out ways to make it do things that it really isn’t the best of class at doing. You were “wondering if RW is the best tool for this one”, and my answer is it depends.
You didn’t say if over one person is going to be editing these notes? Are the notes going though regular edits (adding, deleting and changing) or is this stagnant content, once and done? How are users going to go through 1200 notes? Do you need a search function? One thing you might look at (outside of RW) would be MediaWiki. It offers the sidebar navigation you like, has a built-in search, allows multiple users to edit and is familiar to most users (Wikipedia uses it) and it’s free. Will Woodgate has an article on this you might have a look at.
Now the other option you liked was the one that Adam uses with the Foundry documentation (Vertical Navigation stack). The only issue you had with that was that it didn’t automatically make the active page. I ran across some JavaScript of mine I had used for a similar problem, and just spent a little time changing it to work with the Foundry Vertical Navigation stack.
This will allow things up with the project that Adam offered above, it will automatically mark the current page as active(Open the section as well). I just tested it and it seems to work fine.
- You need to have tidy links turned on (the default).
- It’s best to set the page using the “page link” (not URL) in the RapidWeaver link dialog. It should work with a full URL but that won’t work in preview.
It will mark any link within the Foundry Vertical Navigation stack were the URL is the current page. All sections that contain the matching URL will be opened and the link will be marked active.
I have a test site out right now if you want to have a look. It’s just a stripped down version of Adams project file from above.
Just add this Javascript to the site wide code section:
And here is the code About 53 lines:
function extractTidyURL(urlIn) {
const endSlash = urlIn.lastIndexOf("/");
if (endSlash == (urlIn.length - 1)) {
return urlIn;
} else {
const newURL = urlIn.slice(0, (endSlash + 1));
return newURL;
}
}
function readyFn() {
const navbarNav = document.querySelectorAll("ul[id$='foundry-vert-menu']"); /* Find All vert menus on page */
const currentURL = extractTidyURL(window.location.href);
if (navbarNav && navbarNav.len != 0) {
navbarNav.forEach(NavBarElement => {
const anchorsNode = NavBarElement.querySelectorAll('a'); /* get Anchors for each Menu */
if (anchorsNode && anchorsNode.len != 0) {
anchorsNode.forEach(element => {
const theHref = element.attributes.href.value; /* Look for same page href */
if ((theHref === './') || (theHref == currentURL)) {
element.parentNode.classList.add('active'); /* Add active class to LI */
const NavBarColapseNode = NavBarElement.querySelector('h3.collapsed'); /* Find Heading node */
if (NavBarColapseNode && NavBarColapseNode.len != 0) {
NavBarColapseNode.classList.remove('collapsed'); /* swap classes */
NavBarColapseNode.classList.add('expanded');
const navBarArrowNode = NavBarColapseNode.querySelector('a.arrow-btn'); /* Find Achor with arrow */
if (navBarArrowNode && navBarArrowNode.len != 0) {
navBarArrowNode.classList.add('expanded'); /* add expanded class */
} /* end (navBarArrowNode.len != 0)*/
} /* end (NavBarColapseNode.len != 0) */
const ULNode = element.parentNode.parentNode; /* get UL node */
if (ULNode && ULNode.len != 0) {
const LIactNode = ULNode.querySelectorAll('li'); /* Bump thru LI snd set display */
if (LIactNode && LIactNode.len != 0) {
LIactNode.forEach(element => {
element.style.display = 'block';
}); /* end LIactNode.forEach(element =>*/
} /* end if(LIactNode.len !=0)*/
} /* end if (ULNode.len !=0) */
} /* end if (theHref === './')*/
}); /* end anchorsNode.forEach(element =>*/
} /* end if (anchorsNode.len !=0) */
}); /* end navbarNav.forEach(element => {*/
} /* end if (navbarNav.len !=0) */
} /* end readyFn */
if (document.readyState !== 'loading') {
readyFn();
} else {
document.addEventListener('readystatechange', event => {
if ((event.target.readyState === 'interactive')) {
readyFn();
}
});
}
