0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-24 20:42:43 +00:00

Shrinking down some logic

This commit is contained in:
Trevor Buckner
2025-02-19 15:52:52 -05:00
parent b36376f9e8
commit 917b6b3145

View File

@@ -11,9 +11,8 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{
if(!pagesRef.current) return;
// Top Level Pages
// Pages that contain an element with a specified class will NOT have its content scanned for navigation headers
// e.g. cover pages, table of content pages
// Instead, a label will be added to the navigation at the page level
// Pages that contain an element with a specified class (e.g. cover pages, table of contents)
// will NOT have its content scanned for navigation headers, instead displaying a custom label
// ---
// The property name is class that will be used for detecting the page is a top level page
// The property value is a function that returns the text to be used
@@ -26,7 +25,7 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{
'.toc' : ()=>{ return 'Table of Contents'; },
};
const getHeaderContent = (el)=>{ return el.querySelector('h1')?.textContent; };
const getHeaderContent = el => el.querySelector('h1')?.textContent;
const topLevelPageSelector = Object.keys(topLevelPages).join(',');
@@ -49,42 +48,30 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{
// }
elements.forEach((el)=>{
if(el.className.match(/\bpage\b/)) {
let text = `Page ${el.id.slice(1)}`; // The ID of a page *should* always be equal to `p` followed by the page number
Object.keys(topLevelPages).every((pageType)=>{
if(el.querySelector(pageType)){ // If a Top Level Page, add the text result to the navigation text
text += ` - ${topLevelPages[pageType](el, pageType)}`;
return false;
};
return true;
});
navList.push({
depth : 0, // Pages are always at the least indented level
text : text,
link : el.id,
className : 'pageLink'
});
return;
}
if(el.localName.match(/^h[1-6]/)){ // Header elements H1 through H6
navList.push({
depth : el.localName[1], // Depth is set by the header level
text : el.textContent, // Use `textContent` because `innerText` is affected by rendering, e.g. 'content-visibility: auto'
link : el.id
});
return;
}
navList.push({
const navEntry = { // Default structure of a navList entry
depth : 7, // All unmatched elements with IDs are set to the maximum depth (7)
text : el.textContent, // Use `textContent` because `innerText` is affected by rendering, e.g. 'content-visibility: auto'
link : el.id
});
});
return _.map(navList, (navItem, index)=>{
return <HeaderNavItem {...navItem} key={index} />;
}
if(el.classList.contains('page')) {
let text = `Page ${el.id.slice(1)}`; // Get the page # by trimming off the 'p' from the ID
const pageType = Object.keys(topLevelPages).find(pageType => el.querySelector(pageType));
if (pageType)
text += ` - ${topLevelPages[pageType](el, pageType)}` // If a Top Level Page, add extra label
navEntry.depth = 0; // Pages are always at the least indented level
navEntry.text = text;
navEntry.className = 'pageLink';
}
else if(el.localName.match(/^h[1-6]/)){ // Header elements H1 through H6
navEntry.depth = el.localName[1]; // Depth is set by the header level
}
navList.push(navEntry);
});
return _.map(navList, (navItem, index)=>
<HeaderNavItem {...navItem} key={index} />
);
};
return <nav className='headerNav'>
@@ -92,8 +79,7 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{
{renderHeaderLinks()}
</ul>
</nav>;
}
);
});
const HeaderNavItem = ({ link, text, depth, className })=>{