Revert "renamed client to src"

This reverts commit c28736bd01.
2026-03-26 01:48:13 +00:00 · 2026-02-01 17:36:53 +01:00
parent c28736bd01
commit 3e76046868
140 changed files with 0 additions and 0 deletions
--- a/client/homebrew/brewRenderer/brewRenderer.jsx
+++ b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -0,0 +1,348 @@
+/*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
+import './brewRenderer.less';
+import React, { useState, useRef, useMemo, useEffect } from 'react';
+import _ from 'lodash';
+
+import MarkdownLegacy from '../../../shared/markdownLegacy.js';
+import Markdown from '../../../shared/markdown.js';
+import ErrorBar from './errorBar/errorBar.jsx';
+import ToolBar  from './toolBar/toolBar.jsx';
+
+//TODO: move to the brew renderer
+import RenderWarnings from '../../components/renderWarnings/renderWarnings.jsx';
+import NotificationPopup from './notificationPopup/notificationPopup.jsx';
+import frameComp from 'react-frame-component';
+const Frame = frameComp.default;
+import dedent from 'dedent';
+import { printCurrentBrew } from '../../../shared/helpers.js';
+
+import HeaderNav from './headerNav/headerNav.jsx';
+import safeHTML from './safeHTML.js';
+
+const PAGEBREAK_REGEX_V3 = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m;
+const PAGEBREAK_REGEX_LEGACY = /\\page(?:break)?/m;
+const COLUMNBREAK_REGEX_LEGACY = /\\column(:?break)?/m;
+const PAGE_HEIGHT = 1056;
+
+const TOOLBAR_STATE_KEY = 'HB_renderer_toolbarState';
+
+const INITIAL_CONTENT = dedent`
+	<!DOCTYPE html><html><head>
+	<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
+	<link href='/homebrew/bundle.css' type="text/css" rel='stylesheet' />
+	<base target=_blank>
+	</head><body style='overflow: hidden'><div></div></body></html>`;
+
+
+//v=====----------------------< Brew Page Component >---------------------=====v//
+const BrewPage = (props)=>{
+	props = {
+		contents : '',
+		index    : 0,
+		...props
+	};
+	const pageRef   = useRef(null);
+	const cleanText = safeHTML(props.contents);
+
+	useEffect(()=>{
+		if(!pageRef.current) return;
+
+		// Observer for tracking pages within the `.pages` div
+		const visibleObserver = new IntersectionObserver(
+			(entries)=>{
+				entries.forEach((entry)=>{
+					if(entry.isIntersecting)
+						props.onVisibilityChange(props.index + 1, true, false); // add page to array of visible pages.
+					else
+						props.onVisibilityChange(props.index + 1, false, false);
+				});
+			},
+			{ threshold: .3, rootMargin: '0px 0px 0px 0px'  } // detect when >30% of page is within bounds.
+		);
+
+		// Observer for tracking the page at the center of the iframe.
+		const centerObserver = new IntersectionObserver(
+			(entries)=>{
+				entries.forEach((entry)=>{
+					if(entry.isIntersecting)
+						props.onVisibilityChange(props.index + 1, true, true); // Set this page as the center page
+				});
+			},
+			{ threshold: 0, rootMargin: '-50% 0px -50% 0px' } // Detect when the page is at the center
+		);
+
+		// attach observers to each `.page`
+		visibleObserver.observe(pageRef.current);
+		centerObserver.observe(pageRef.current);
+		return ()=>{
+			visibleObserver.disconnect();
+			centerObserver.disconnect();
+		};
+	}, []);
+
+	return <div className={props.className} id={`p${props.index + 1}`} data-index={props.index} ref={pageRef} style={props.style} {...props.attributes}>
+	         <div className='columnWrapper' dangerouslySetInnerHTML={{ __html: cleanText }} />
+	       </div>;
+};
+
+
+//v=====--------------------< Brew Renderer Component >-------------------=====v//
+let renderedPages = [];
+let rawPages      = [];
+
+const BrewRenderer = (props)=>{
+	props = {
+		text                       : '',
+		style                      : '',
+		renderer                   : 'legacy',
+		theme                      : '5ePHB',
+		lang                       : '',
+		errors                     : [],
+		currentEditorCursorPageNum : 1,
+		currentEditorViewPageNum   : 1,
+		currentBrewRendererPageNum : 1,
+		themeBundle                : {},
+		onPageChange               : ()=>{},
+		...props
+	};
+
+	const [state, setState] = useState({
+		isMounted    : false,
+		visibility   : 'hidden',
+		visiblePages : [],
+		centerPage   : 1
+	});
+
+	const [displayOptions, setDisplayOptions] = useState({
+		zoomLevel    : 100,
+		spread       : 'single',
+		startOnRight : true,
+		pageShadows  : true,
+		rowGap       : 5,
+		columnGap    : 10,
+	});
+
+	//useEffect to store or gather toolbar state from storage
+	useEffect(()=>{
+		const toolbarState = JSON.parse(window.localStorage.getItem(TOOLBAR_STATE_KEY));
+		toolbarState &&	setDisplayOptions(toolbarState);
+	}, []);
+
+	const [headerState, setHeaderState] = useState(false);
+
+	const mainRef  = useRef(null);
+	const pagesRef = useRef(null);
+
+	if(props.renderer == 'legacy') {
+		rawPages = props.text.split(PAGEBREAK_REGEX_LEGACY);
+	} else {
+		rawPages = props.text.split(PAGEBREAK_REGEX_V3);
+	}
+
+	const handlePageVisibilityChange = (pageNum, isVisible, isCenter)=>{
+		setState((prevState)=>{
+			const updatedVisiblePages = new Set(prevState.visiblePages);
+			if(!isCenter)
+				isVisible ? updatedVisiblePages.add(pageNum) : updatedVisiblePages.delete(pageNum);
+
+			return {
+				...prevState,
+				visiblePages : [...updatedVisiblePages].sort((a, b)=>a - b),
+				centerPage   : isCenter ? pageNum : prevState.centerPage
+			};
+		});
+
+		if(isCenter)
+			props.onPageChange(pageNum);
+	};
+
+	const isInView = (index)=>{
+		if(!state.isMounted)
+			return false;
+
+		if(index == props.currentEditorCursorPageNum - 1)	//Already rendered before this step
+			return false;
+
+		if(Math.abs(index - props.currentBrewRendererPageNum - 1) <= 3)
+			return true;
+
+		return false;
+	};
+
+	const renderDummyPage = (index)=>{
+		return <div className='phb page' id={`p${index + 1}`} key={index}>
+			<i className='fas fa-spinner fa-spin' />
+		</div>;
+	};
+
+	const renderStyle = ()=>{
+		const themeStyles = props.themeBundle?.joinedStyles ?? '<style>@import url("/themes/V3/Blank/style.css");</style>';
+		const cleanStyle = safeHTML(`${themeStyles} \n\n <style> ${props.style} </style>`);
+		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: cleanStyle }} />;
+	};
+
+	const renderPage = (pageText, index)=>{
+
+		let styles = {
+			...(!displayOptions.pageShadows ? { boxShadow: 'none' } : {})
+			// Add more conditions as needed
+		};
+		let classes    = 'page';
+		let attributes = {};
+
+		if(props.renderer == 'legacy') {
+			pageText.replace(COLUMNBREAK_REGEX_LEGACY, '```\n````\n'); // Allow Legacy brews to use `\column(break)`
+			const html = MarkdownLegacy.render(pageText);
+
+			return <BrewPage className='page phb' index={index} key={index} contents={html} style={styles} onVisibilityChange={handlePageVisibilityChange} />;
+		} else {
+			if(pageText.startsWith('\\page')) {
+				const firstLineTokens  = Markdown.marked.lexer(pageText.split('\n', 1)[0])[0].tokens;
+				const injectedTags = firstLineTokens?.find((obj)=>obj.injectedTags !== undefined)?.injectedTags;
+				if(injectedTags) {
+					styles     = { ...styles, ...injectedTags.styles };
+					styles     = _.mapKeys(styles, (v, k)=>k.startsWith('--') ? k : _.camelCase(k)); // Convert CSS to camelCase for React
+					classes    = [classes, injectedTags.classes].join(' ').trim();
+					attributes = injectedTags.attributes;
+				}
+				pageText = pageText.includes('\n') ? pageText.substring(pageText.indexOf('\n') + 1) : ''; // Remove the \page line
+			}
+
+			// DO NOT REMOVE!!! REQUIRED FOR BACKWARDS COMPATIBILITY WITH NON-UPGRADABLE VERSIONS OF CHROME.
+			pageText += `\n\n&nbsp;\n\\column\n&nbsp;`; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
+
+			const html = Markdown.render(pageText, index);
+
+			return <BrewPage className={classes} index={index} key={index} contents={html} style={styles} attributes={attributes} onVisibilityChange={handlePageVisibilityChange} />;
+		}
+	};
+
+	const renderPages = ()=>{
+		if(props.errors && props.errors.length)
+			return renderedPages;
+
+		if(rawPages.length != renderedPages.length) // Re-render all pages when page count changes
+			renderedPages.length = 0;
+
+		// Render currently-edited page first so cross-page effects (variables, links) can propagate out first
+		if(rawPages.length > props.currentEditorCursorPageNum -1)
+			renderedPages[props.currentEditorCursorPageNum - 1] = renderPage(rawPages[props.currentEditorCursorPageNum - 1], props.currentEditorCursorPageNum - 1);
+
+		_.forEach(rawPages, (page, index)=>{
+			if((isInView(index) || !renderedPages[index]) && typeof window !== 'undefined'){
+				renderedPages[index] = renderPage(page, index); // Render any page not yet rendered, but only re-render those in PPR range
+			}
+		});
+		return renderedPages;
+	};
+
+	const handleControlKeys = (e)=>{
+		if(!(e.ctrlKey || e.metaKey)) return;
+		const P_KEY = 80;
+		if(e.keyCode == P_KEY && props.allowPrint) printCurrentBrew();
+		if(e.keyCode == P_KEY) {
+			e.stopPropagation();
+			e.preventDefault();
+		}
+	};
+
+	const scrollToHash = (hash)=>{
+		if(!hash) return;
+
+		const iframeDoc = document.getElementById('BrewRenderer').contentDocument;
+		let anchor = iframeDoc.querySelector(hash);
+
+		if(anchor) {
+			anchor.scrollIntoView({ behavior: 'smooth' });
+		} else {
+			// Use MutationObserver to wait for the element if it's not immediately available
+			new MutationObserver((mutations, obs)=>{
+				anchor = iframeDoc.querySelector(hash);
+				if(anchor) {
+					anchor.scrollIntoView({ behavior: 'smooth' });
+					obs.disconnect();
+				}
+			}).observe(iframeDoc, { childList: true, subtree: true });
+		}
+	};
+
+	const frameDidMount = ()=>{	//This triggers when iFrame finishes internal "componentDidMount"
+		scrollToHash(window.location.hash);
+
+		setTimeout(()=>{	//We still see a flicker where the style isn't applied yet, so wait 100ms before showing iFrame
+			renderPages(); //Make sure page is renderable before showing
+			setState((prevState)=>({
+				...prevState,
+				isMounted  : true,
+				visibility : 'visible'
+			}));
+		}, 100);
+	};
+
+	const emitClick = ()=>{ // Allow clicks inside iFrame to interact with dropdowns, etc. from outside
+		if(!window || !document) return;
+		document.dispatchEvent(new MouseEvent('click'));
+	};
+
+	const handleDisplayOptionsChange = (newDisplayOptions)=>{
+		setDisplayOptions(newDisplayOptions);
+		localStorage.setItem(TOOLBAR_STATE_KEY, JSON.stringify(newDisplayOptions));
+	};
+
+	const pagesStyle = {
+		zoom      : `${displayOptions.zoomLevel}%`,
+		columnGap : `${displayOptions.columnGap}px`,
+		rowGap    : `${displayOptions.rowGap}px`
+	};
+
+	const renderedStyle = useMemo(()=>renderStyle(), [props.style, props.themeBundle]);
+	renderedPages = useMemo(()=>renderPages(), [props.text, displayOptions]);
+
+	return (
+		<>
+			{/*render dummy page while iFrame is mounting.*/}
+			{!state.isMounted
+				? <div className='brewRenderer'>
+					<div className='pages'>
+						{renderDummyPage(1)}
+					</div>
+				</div>
+				: null}
+
+			<ErrorBar errors={props.errors} />
+			<div className='popups' ref={mainRef}>
+				<RenderWarnings />
+				<NotificationPopup />
+			</div>
+
+			<ToolBar displayOptions={displayOptions} onDisplayOptionsChange={handleDisplayOptionsChange} visiblePages={state.visiblePages.length > 0 ? state.visiblePages : [state.centerPage]} totalPages={rawPages.length} headerState={headerState} setHeaderState={setHeaderState}/>
+
+			{/*render in iFrame so broken code doesn't crash the site.*/}
+			<Frame id='BrewRenderer' initialContent={INITIAL_CONTENT}
+				style={{ width: '100%', height: '100%', visibility: state.visibility }}
+				contentDidMount={frameDidMount}
+				onClick={()=>{emitClick();}}
+			>
+				<div className='brewRenderer'
+					onKeyDown={handleControlKeys}
+					tabIndex={-1}
+				>
+
+					{/* Apply CSS from Style tab and render pages from Markdown tab */}
+					{state.isMounted
+						&&
+						<>
+							{renderedStyle}
+							<div className={`pages ${displayOptions.startOnRight ? 'recto' : 'verso'}	${displayOptions.spread}`} lang={`${props.lang || 'en'}`} style={pagesStyle} ref={pagesRef}>
+								{renderedPages}
+							</div>
+						</>
+					}
+				</div>
+				{headerState ? <HeaderNav ref={pagesRef} /> : <></>}
+			</Frame>
+		</>
+	);
+};
+
+export default BrewRenderer;
--- a/client/homebrew/brewRenderer/brewRenderer.less
+++ b/client/homebrew/brewRenderer/brewRenderer.less
@@ -0,0 +1,84 @@
+@import (multiple, less) 'shared/naturalcrit/styles/reset.less';
+
+.brewRenderer {
+	height        : 100vh;
+	padding-top   : 60px;
+	overflow-y    : scroll;
+	will-change   : transform;
+	&:has(.facing, .flow) { padding : 60px 30px; }
+	:where(.pages) {
+		&.facing {
+			display               : grid; 
+			grid-template-rows    : repeat(3, auto); 
+			grid-template-columns : repeat(2, auto); 
+			gap                   : 10px 10px; 
+			justify-content       : safe center;
+			&.recto .page:first-child {
+				// sets first page on 'right' ('recto') of the preview, as if for a Cover page.  
+				// todo: add a checkbox to toggle this setting
+				grid-column-start : 2; 
+			}
+			& :where(.page) {
+				margin-right : unset !important;
+				margin-left  : unset !important;
+			}
+		}
+
+		&.flow {
+			display         : flex;
+			flex-wrap       : wrap;
+			gap             : 10px;
+			justify-content : safe center;
+			& :where(.page) {
+				flex         : 0 0 auto;
+				margin-right : unset !important;
+				margin-left  : unset !important;
+			}
+
+		}
+
+		& > :where(.page) {
+			width         : 215.9mm;
+			height        : 279.4mm;
+			margin-right  : auto;
+			margin-bottom : 30px;
+			margin-left   : auto;
+			box-shadow    : 1px 4px 14px #000000;
+		}
+		*[id] { scroll-margin-top : 100px; }
+	}
+	&::-webkit-scrollbar {
+		width : 20px;
+		&:horizontal {
+			width  : auto;
+			height : 20px;
+		}
+		&-thumb {
+			background : linear-gradient(90deg, #D3C1AF 15px, #00000000 15px);
+			&:horizontal { background : linear-gradient(0deg, #D3C1AF 15px, #00000000 15px); }
+		}
+		&-corner { visibility : hidden; }
+	}
+}
+
+.pane { position : relative; }
+
+
+@media print {
+	.toolBar { display : none; }
+	.brewRenderer {
+		height     : 100%;
+		padding    : unset;
+		overflow-y : unset;
+		&:has(.facing, .flow) {
+			padding : unset;
+		}
+		.pages {
+			margin  : 0px;
+			zoom    : 100% !important;
+			display : block;
+			& > .page { box-shadow : unset; }
+		}
+	}
+	.headerNav { visibility : hidden; }
+}
--- a/client/homebrew/brewRenderer/errorBar/errorBar.jsx
+++ b/client/homebrew/brewRenderer/errorBar/errorBar.jsx
@@ -0,0 +1,53 @@
+import './errorBar.less';
+import React from 'react';
+
+import Dialog from '../../../components/dialog.jsx';
+
+const DISMISS_BUTTON = <i className='fas fa-times dismiss' />;
+
+const ErrorBar = (props)=>{
+	if(!props.errors.length) return null;
+	let hasOpenError = false, hasCloseError = false, hasMatchError = false;
+
+	props.errors.map((err)=>{
+		if(err.id === 'OPEN')     hasOpenError  = true;
+		if(err.id === 'CLOSE')    hasCloseError = true;
+		if(err.id === 'MISMATCH') hasMatchError = true;
+	});
+
+	const renderErrors = ()=>(
+		<ul>
+			{props.errors.map((err, idx)=>{
+				return <li key={idx}>
+					Line {err.line} : {err.text}, '{err.type}' tag
+				</li>;
+			})}
+		</ul>
+	);
+
+	const renderProtip = ()=>(
+		<div className='protips'>
+			<h4>Protips!</h4>
+			{hasOpenError  && <div>Unmatched opening tag. Close your tags, like this {'</div>'}. Match types!</div>}
+			{hasCloseError && <div>Unmatched closing tag. Either remove it or check where it was opened.</div>}
+			{hasMatchError && <div>Type mismatch. Closed a tag with a different type.</div>}
+		</div>
+	);
+
+	return (
+		<Dialog className='errorBar' closeText={DISMISS_BUTTON} >
+			<div>
+				<i className='fas fa-exclamation-triangle' />
+				<h2> There are HTML errors in your markup</h2>
+				<small>
+					If these aren't fixed your brew will not render properly when you print it to PDF or share it
+				</small>
+				{renderErrors()}
+			</div>
+			<hr />
+			{renderProtip()}
+		</Dialog>
+	);
+};
+
+export default ErrorBar;
--- a/client/homebrew/brewRenderer/errorBar/errorBar.less
+++ b/client/homebrew/brewRenderer/errorBar/errorBar.less
@@ -0,0 +1,59 @@
+@import './shared/naturalcrit/styles/colors.less';
+
+.errorBar {
+	position         : absolute;
+	top              : 32px;
+	z-index          : 1;
+	width            : 100%;
+	color            : white;
+	background-color : @red;
+	border           : unset;
+
+	div {
+		> i {
+			float         : left;
+			margin-right  : 10px;
+			margin-bottom : 20px;
+			font-size     : 3em;
+			opacity       : 0.8;
+		}
+		h2 { font-weight : 800; }
+		ul {
+			margin-top          : 15px;
+			font-size           : 0.8em;
+			list-style-position : inside;
+			list-style-type     : disc;
+			li { line-height : 1.6em; }
+		}
+	}
+	hr {
+		height           : 2px;
+		margin-top       : 25px;
+		margin-bottom    : 15px;
+		background-color : darken(@red, 8%);
+		border           : none;
+	}
+	small {
+		font-size : 0.6em;
+		opacity   : 0.7;
+	}
+	.protips {
+		font-size     : 0.6em;
+		line-height   : 1.2em;
+		h4 {
+			font-weight    : 800;
+			line-height    : 1.5em;
+			text-transform : uppercase;
+		}
+	}
+	button.dismiss {
+		position         : absolute;
+		top              : 20px;
+		right            : 30px;
+		padding          : unset;
+		font-size        : 40px;
+		background-color : transparent;
+		opacity          : 0.6;
+		&:hover { opacity : 1; }
+	}
+}
--- a/client/homebrew/brewRenderer/headerNav/headerNav.jsx
+++ b/client/homebrew/brewRenderer/headerNav/headerNav.jsx
@@ -0,0 +1,113 @@
+import './headerNav.less';
+
+import React from 'react';
+import _ from 'lodash';
+
+const MAX_TEXT_LENGTH = 40;
+
+const HeaderNav = React.forwardRef(({}, pagesRef)=>{
+
+	const renderHeaderLinks = ()=>{
+		if(!pagesRef.current) return;
+
+		// Top Level Pages
+		// 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
+
+		const topLevelPages = {
+			'.frontCover'  : (el, pageType)=>{ const text = getHeaderContent(el); return text ? `Cover: ${text}` : 'Cover Page'; },
+			'.insideCover' : (el, pageType)=>{ const text = getHeaderContent(el); return text ? `Interior: ${text}` : 'Interior Cover Page'; },
+			'.partCover'   : (el, pageType)=>{ const text = getHeaderContent(el); return text ? `Section: ${text}` : 'Section Cover Page'; },
+			'.backCover'   : (el, pageType)=>{ const text = getHeaderContent(el); return text ? `Back: ${text}` : 'Rear Cover Page'; },
+			'.toc'         : ()=>{ return 'Table of Contents'; },
+		};
+
+		const getHeaderContent = (el)=>el.querySelector('h1')?.textContent;
+
+		const topLevelPageSelector = Object.keys(topLevelPages).join(',');
+
+		const selector = [
+			'.pages > .page',                                                   // All page elements, which by definition have IDs
+			`.page:not(:has(${topLevelPageSelector})) > [id]`,                  // All direct children of non-excluded .pages with an ID (Legacy)
+			`.page:not(:has(${topLevelPageSelector})) > .columnWrapper > [id]`, // All direct children of non-excluded .page > .columnWrapper with an ID (V3)
+			`.page:not(:has(${topLevelPageSelector})) h2`,                      // All non-excluded H2 titles, like Monster frame titles
+		];
+		const elements = pagesRef.current.querySelectorAll(selector.join(','));
+		if(!elements) return;
+		const navList = [];
+
+		// navList is a list of objects which have the following structure:
+		// {
+		// 	depth     : how deeply indented the item should be
+		// 	text      : the text to display in the nav link
+		// 	link      : the hyperlink to navigate to when clicked
+		// 	className : [optional] the class to apply to the nav link for styling
+		// }
+
+		elements.forEach((el)=>{
+			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
+			};
+			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'>
+		<ul>
+			{renderHeaderLinks()}
+		</ul>
+	</nav>;
+});
+
+const HeaderNavItem = ({ link, text, depth, className })=>{
+
+	const trimString = (text, prefixLength = 0)=>{
+		// Sanity check nav link strings
+		let output = text;
+
+		// If the string has a line break, only use the first line
+		if(text.indexOf('\n')){
+			output = text.split('\n')[0];
+		}
+
+		// Trim unecessary spaces from string
+		output = output.trim();
+
+		// Reduce excessively long strings
+		const maxLength = MAX_TEXT_LENGTH - prefixLength;
+		if(output.length > maxLength){
+			return `${output.slice(0, maxLength).trim()}...`;
+		}
+		return output;
+	};
+
+	if(!link || !text) return;
+
+	return <li>
+		<a href={`#${link}`} target='_self' className={`depth-${depth} ${className ?? ''}`}>
+			{trimString(text, depth)}
+		</a>
+	</li>;
+};
+
+export default HeaderNav;
--- a/client/homebrew/brewRenderer/headerNav/headerNav.less
+++ b/client/homebrew/brewRenderer/headerNav/headerNav.less
@@ -0,0 +1,39 @@
+.headerNav {
+	position         : fixed;
+	top              : 32px;
+	left             : 0px;
+	max-width        : 40vw;
+	max-height       : calc(100vh - 32px);
+	padding          : 5px 10px;
+	overflow-y       : auto;
+	background-color : #CCCCCC;
+	border-radius    : 5px;
+	&.active {
+		padding-bottom : 10px;
+		.navIcon { padding-bottom : 10px; }
+	}
+	.navIcon { cursor : pointer; }
+	li {
+		list-style-type : none;
+		a {
+			display         : inline-block;
+			width           : 100%;
+			padding         : 2px;
+			font-family     : 'Open Sans';
+			font-size       : 12px;
+			color           : inherit;
+			text-decoration : none;
+			cursor          : pointer;
+			&:hover { text-decoration : underline; }
+			&.pageLink { font-weight : 900; }
+
+			@depths: 0,1,2,3,4,5,6,7;
+
+			each(@depths, {
+				&.depth-@{value} {
+					padding-left: ((@value) * 0.5em);
+				}
+			});
+		}
+	}
+}
--- a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx
+++ b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx
@@ -0,0 +1,65 @@
+import './notificationPopup.less';
+import React, { useEffect, useState } from 'react';
+import request from '../../utils/request-middleware.js';
+import Markdown from '../../../../shared/markdown.js';
+
+import Dialog from '../../../components/dialog.jsx';
+
+const DISMISS_BUTTON = <i className='fas fa-times dismiss' />;
+
+const NotificationPopup = ()=>{
+	const [notifications, setNotifications] = useState([]);
+	const [dissmissKeyList, setDismissKeyList] = useState([]);
+	const [error, setError] = useState(null);
+
+	useEffect(()=>{
+		getNotifications();
+	}, []);
+
+	const getNotifications = async ()=>{
+		setError(null);
+		try {
+			const res = await request.get('/admin/notification/all');
+			pickActiveNotifications(res.body || []);
+		} catch (err) {
+			console.log(err);
+			setError(`Error looking up notifications: ${err?.response?.body?.message || err.message}`);
+		}
+	};
+
+	const pickActiveNotifications = (notifs)=>{
+		const now = new Date();
+		const filteredNotifications = notifs.filter((notification)=>{
+			const startDate = new Date(notification.startAt);
+			const stopDate = new Date(notification.stopAt);
+			const dismissed = localStorage.getItem(notification.dismissKey) ? true : false;
+			return now >= startDate && now <= stopDate && !dismissed;
+		});
+		setNotifications(filteredNotifications);
+		setDismissKeyList(filteredNotifications.map((notif)=>notif.dismissKey));
+	};
+
+	const renderNotificationsList = ()=>{
+		if(error) return <div className='error'>{error}</div>;
+		return notifications.map((notification)=>(
+			<li key={notification.dismissKey} >
+				<em>{notification.title}</em><br />
+				<p dangerouslySetInnerHTML={{ __html: Markdown.render(notification.text) }}></p>
+			</li>
+		));
+	};
+
+	if(!notifications.length) return;
+	return <Dialog className='notificationPopup' dismisskeys={dissmissKeyList} closeText={DISMISS_BUTTON} >
+		<div className='header'>
+			<i className='fas fa-info-circle info'></i>
+			<h3>Notice</h3>
+			<small>This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind:</small>
+		</div>
+		<ul>
+			{renderNotificationsList()}
+		</ul>
+	</Dialog>;
+};
+
+export default NotificationPopup;
--- a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less
+++ b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less
@@ -0,0 +1,95 @@
+@import './client/homebrew/navbar/navbar.less';
+
+.popups {
+	position         : fixed;
+	top              : calc(@navbarHeight + @viewerToolsHeight);
+	right            : 24px;
+	z-index          : 10001;
+	width            : 450px;
+	margin-top       : 5px;
+}
+
+.notificationPopup {
+	position         : relative;
+	width            : 100%;
+	padding          : 15px;
+	padding-bottom   : 10px;
+	padding-left     : 25px;
+	color            : white;
+	background-color : @blue;
+	border           : none;
+	&[open] { display : inline-block; }
+	a {
+		font-weight : 800;
+		color       : #E0E5C1;
+	}
+	i.info {
+		position  : absolute;
+		top       : 12px;
+		left      : 12px;
+		font-size : 2.5em;
+		opacity   : 0.8;
+	}
+	button.dismiss {
+		position         : absolute;
+		top              : 10px;
+		right            : 10px;
+		cursor           : pointer;
+		background-color : transparent;
+		opacity          : 0.6;
+		&:hover { opacity : 1; }
+	}
+	.header { padding-left : 50px; }
+	small {
+		font-size : 0.6em;
+		opacity   : 0.7;
+	}
+	h3 {
+		font-size   : 1.1em;
+		font-weight : 800;
+	}
+	ul {
+		margin-top          : 15px;
+		font-size           : 0.9em;
+		list-style-position : outside;
+		list-style-type     : disc;
+		li {
+			padding-left : 1em;
+			margin-top   : 1.5em;
+			font-size    : 0.9em;
+			line-height  : 1.5em;
+			em {
+				font-weight    : 800; 
+				text-transform : capitalize;
+			}
+			li {
+				margin-top      : 0;
+				line-height     : 1.2em; 
+				list-style-type : square;
+			}
+		}
+		ul ul,ol ol,ul ol,ol ul {
+			margin-bottom : 0px;
+			margin-left   : 1.5em;
+		}
+	}
+
+	/* Markdown styling */
+	code {
+		padding          : 0.1em 0.5em;
+		font-family      : 'Courier New', 'Courier', monospace;
+		overflow-wrap    : break-word;
+		white-space      : pre-wrap;
+		background       : #08115A;
+		border-radius    : 2px;
+	}
+	pre code {
+		display          : inline-block;
+		width            : 100%;
+	}
+	.blank {
+		height     : 1em;
+		margin-top : 0;
+		& + * { margin-top : 0; }
+	}
+}
--- a/client/homebrew/brewRenderer/safeHTML.js
+++ b/client/homebrew/brewRenderer/safeHTML.js
@@ -0,0 +1,46 @@
+// Derived from the vue-html-secure package, customized for Homebrewery
+
+let doc = null;
+let div = null;
+
+function safeHTML(htmlString) {
+	// If the Document interface doesn't exist, exit
+	if(typeof document == 'undefined') return null;
+	// If the test document and div don't exist, create them
+	if(!doc) doc = document.implementation.createHTMLDocument('');
+	if(!div) div = doc.createElement('div');
+
+	// Set the test div contents to the evaluation string
+	div.innerHTML = htmlString;
+	// Grab all nodes from the test div
+	const elements = div.querySelectorAll('*');
+
+	// Blacklisted tags
+	const blacklistTags = ['script', 'noscript', 'noembed'];
+	// Tests to remove attributes
+	const blacklistAttrs = [
+		(test)=>{return test.localName.indexOf('on') == 0;},
+		(test)=>{return test.localName.indexOf('type') == 0 && test.value.match(/submit/i);},
+		(test)=>{return test.value.replace(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205f\u3000]/g, '').toLowerCase().trim().indexOf('javascript:') == 0;}
+	];
+
+
+	elements.forEach((element)=>{
+		// Check each element for blacklisted type
+		if(blacklistTags.includes(element?.localName?.toLowerCase())) {
+			element.remove();
+			return;
+		}
+		// Check remaining elements for blacklisted attributes
+		for (const attribute of element.attributes){
+			if(blacklistAttrs.some((test)=>{return test(attribute);})) {
+				element.removeAttribute(attribute.localName);
+				break;
+			};
+		};
+	});
+
+	return div.innerHTML;
+};
+
+export default safeHTML;
--- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
@@ -0,0 +1,261 @@
+/* eslint-disable max-lines */
+import './toolBar.less';
+import React, { useState, useEffect } from 'react';
+import _ from 'lodash';
+
+import { Anchored, AnchoredBox, AnchoredTrigger } from '../../../components/Anchored.jsx';
+
+const MAX_ZOOM = 300;
+const MIN_ZOOM = 10;
+
+const TOOLBAR_VISIBILITY = 'HB_renderer_toolbarVisibility';
+
+const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPages, headerState, setHeaderState })=>{
+
+	const [pageNum, setPageNum]     = useState(1);
+	const [toolsVisible, setToolsVisible] = useState(true);
+
+	useEffect(()=>{
+		// format multiple visible pages as a range (e.g. "150-153")
+		const pageRange = visiblePages.length === 1 ? `${visiblePages[0]}` : `${visiblePages[0]} - ${visiblePages.at(-1)}`;
+		setPageNum(pageRange);
+	}, [visiblePages]);
+
+	useEffect(()=>{
+		const Visibility = localStorage.getItem(TOOLBAR_VISIBILITY);
+		if(Visibility) setToolsVisible(Visibility === 'true');
+
+	}, []);
+
+	const handleZoomButton = (zoom)=>{
+		handleOptionChange('zoomLevel', _.round(_.clamp(zoom, MIN_ZOOM, MAX_ZOOM)));
+	};
+
+	const handleOptionChange = (optionKey, newValue)=>{
+		onDisplayOptionsChange({ ...displayOptions, [optionKey]: newValue });
+	};
+
+	const handlePageInput = (pageInput)=>{
+		if(/[0-9]/.test(pageInput))
+			setPageNum(parseInt(pageInput)); // input type is 'text', so `page` comes in as a string, not number.
+	};
+
+	// scroll to a page, used in the Prev/Next Page buttons.
+	const scrollToPage = (pageNumber)=>{
+		if(typeof pageNumber !== 'number') return;
+		pageNumber = _.clamp(pageNumber, 1, totalPages);
+		const iframe = document.getElementById('BrewRenderer');
+		const brewRenderer = iframe?.contentWindow?.document.querySelector('.brewRenderer');
+		const page = brewRenderer?.querySelector(`#p${pageNumber}`);
+		page?.scrollIntoView({ block: 'start' });
+	};
+
+	const calculateChange = (mode)=>{
+		const iframe = document.getElementById('BrewRenderer');
+		const iframeWidth = iframe.getBoundingClientRect().width;
+		const iframeHeight = iframe.getBoundingClientRect().height;
+		const pages = iframe.contentWindow.document.getElementsByClassName('page');
+
+		let desiredZoom = 0;
+
+		if(mode == 'fill'){
+			// find widest page, in case pages are different widths, so that the zoom is adapted to not cut the widest page off screen.
+			const widestPage = _.maxBy([...pages], 'offsetWidth').offsetWidth;
+
+			if(displayOptions.spread === 'facing')
+				desiredZoom = (iframeWidth / ((widestPage * 2) + parseInt(displayOptions.columnGap))) * 100;
+			else
+				desiredZoom = (iframeWidth / (widestPage + 20)) * 100;
+
+		} else if(mode == 'fit'){
+			// find the page with the largest single dim (height or width) so that zoom can be adapted to fit it.
+			let minDimRatio;
+			if(displayOptions.spread === 'single')
+				minDimRatio = [...pages].reduce(
+					(minRatio, page)=>Math.min(minRatio,
+						iframeWidth / page.offsetWidth,
+						iframeHeight / page.offsetHeight
+					),
+					Infinity
+				);
+			else
+				minDimRatio = [...pages].reduce(
+					(minRatio, page)=>Math.min(minRatio,
+						iframeWidth / ((page.offsetWidth * 2) + parseInt(displayOptions.columnGap)),
+						iframeHeight / page.offsetHeight
+					),
+					Infinity
+				);
+
+			desiredZoom = minDimRatio * 100;
+		}
+
+		const margin = 5;  // extra space so page isn't edge to edge (not truly "to fill")
+
+		const deltaZoom = (desiredZoom - displayOptions.zoomLevel) - margin;
+		return deltaZoom;
+	};
+
+	return (
+		<div id='preview-toolbar' className={`toolBar ${toolsVisible ? 'visible' : 'hidden'}`} role='toolbar'>
+			<div className='toggleButton'>
+				<button title={`${toolsVisible ? 'Hide' : 'Show'} Preview Toolbar`} onClick={()=>{
+					setToolsVisible(!toolsVisible);
+					localStorage.setItem(TOOLBAR_VISIBILITY, !toolsVisible);
+				}}><i className='fas fa-glasses' /></button>
+				<button title={`${headerState ? 'Hide' : 'Show'} Header Navigation`} onClick={()=>{setHeaderState(!headerState);}}><i className='fas fa-rectangle-list' /></button>
+			</div>
+			{/*v=====----------------------< Zoom Controls >---------------------=====v*/}
+			<div className='group' role='group' aria-label='Zoom' aria-hidden={!toolsVisible}>
+				<button
+					id='fill-width'
+					className='tool'
+					title='Set zoom to fill preview with one page'
+					onClick={()=>handleZoomButton(displayOptions.zoomLevel + calculateChange('fill'))}
+				>
+					<i className='fac fit-width' />
+				</button>
+				<button
+					id='zoom-to-fit'
+					className='tool'
+					title='Set zoom to fit entire page in preview'
+					onClick={()=>handleZoomButton(displayOptions.zoomLevel + calculateChange('fit'))}
+				>
+					<i className='fac zoom-to-fit' />
+				</button>
+				<button
+					id='zoom-out'
+					className='tool'
+					onClick={()=>handleZoomButton(displayOptions.zoomLevel - 20)}
+					disabled={displayOptions.zoomLevel <= MIN_ZOOM}
+					title='Zoom Out'
+				>
+					<i className='fas fa-magnifying-glass-minus' />
+				</button>
+				<input
+					id='zoom-slider'
+					className='range-input tool hover-tooltip'
+					type='range'
+					name='zoom'
+					title='Set Zoom'
+					list='zoomLevels'
+					min={MIN_ZOOM}
+					max={MAX_ZOOM}
+					step='1'
+					value={displayOptions.zoomLevel}
+					onChange={(e)=>handleZoomButton(parseInt(e.target.value))}
+				/>
+				<datalist id='zoomLevels'>
+					<option value='100' />
+				</datalist>
+
+				<button
+					id='zoom-in'
+					className='tool'
+					onClick={()=>handleZoomButton(displayOptions.zoomLevel + 20)}
+					disabled={displayOptions.zoomLevel >= MAX_ZOOM}
+					title='Zoom In'
+				>
+					<i className='fas fa-magnifying-glass-plus' />
+				</button>
+			</div>
+
+			{/*v=====----------------------< Spread Controls >---------------------=====v*/}
+			<div className='group' role='group' aria-label='Spread' aria-hidden={!toolsVisible}>
+				<div className='radio-group' role='radiogroup'>
+					<button role='radio'
+						id='single-spread'
+						className='tool'
+						title='Single Page'
+						onClick={()=>{handleOptionChange('spread', 'single');}}
+						aria-checked={displayOptions.spread === 'single'}
+					><i className='fac single-spread' /></button>
+					<button role='radio'
+						id='facing-spread'
+						className='tool'
+						title='Facing Pages'
+						onClick={()=>{handleOptionChange('spread', 'facing');}}
+						aria-checked={displayOptions.spread === 'facing'}
+					><i className='fac facing-spread' /></button>
+					<button role='radio'
+						id='flow-spread'
+						className='tool'
+						title='Flow Pages'
+						onClick={()=>{handleOptionChange('spread', 'flow');}}
+						aria-checked={displayOptions.spread === 'flow'}
+					><i className='fac flow-spread' /></button>
+
+				</div>
+				<Anchored>
+					<AnchoredTrigger id='spread-settings' className='tool' title='Spread options'><i className='fas fa-gear' /></AnchoredTrigger>
+					<AnchoredBox title='Options'>
+						<h1>Options</h1>
+						<label title='Modify the horizontal space between pages.'>
+							Column gap
+							<input type='range' min={0} max={200} defaultValue={displayOptions.columnGap || 10} className='range-input' onChange={(evt)=>handleOptionChange('columnGap', evt.target.value)} />
+						</label>
+						<label title='Modify the vertical space between rows of pages.'>
+							Row gap
+							<input type='range' min={0} max={200} defaultValue={displayOptions.rowGap || 10} className='range-input' onChange={(evt)=>handleOptionChange('rowGap', evt.target.value)} />
+						</label>
+						<label title='Start 1st page on the right side, such as if you have cover page.'>
+							Start on right
+							<input type='checkbox' checked={displayOptions.startOnRight} onChange={()=>{handleOptionChange('startOnRight', !displayOptions.startOnRight);}}
+								title={displayOptions.spread !== 'facing' ? 'Switch to Facing to enable toggle.' : null} />
+						</label>
+						<label title='Toggle the page shadow on every page.'>
+							Page shadows
+							<input type='checkbox' checked={displayOptions.pageShadows} onChange={()=>{handleOptionChange('pageShadows', !displayOptions.pageShadows);}} />
+						</label>
+					</AnchoredBox>
+				</Anchored>
+			</div>
+
+			{/*v=====----------------------< Page Controls >---------------------=====v*/}
+			<div className='group' role='group'  aria-label='Pages' aria-hidden={!toolsVisible}>
+				<button
+					id='previous-page'
+					className='previousPage tool'
+					type='button'
+					title='Previous Page(s)'
+					onClick={()=>scrollToPage(_.min(visiblePages) - visiblePages.length)}
+					disabled={visiblePages.includes(1)}
+				>
+					<i className='fas fa-arrow-left'></i>
+				</button>
+
+				<div className='tool'>
+					<input
+						id='page-input'
+						className='text-input'
+						type='text'
+						name='page'
+						title='Current page(s) in view'
+						inputMode='numeric'
+						pattern='[0-9]'
+						value={pageNum}
+						onClick={(e)=>e.target.select()}
+						onChange={(e)=>handlePageInput(e.target.value)}
+						onBlur={()=>scrollToPage(pageNum)}
+						onKeyDown={(e)=>e.key == 'Enter' && scrollToPage(pageNum)}
+						style={{ width: `${pageNum.length}ch` }}
+					/>
+					<span id='page-count' title='Total Page Count'>/ {totalPages}</span>
+				</div>
+
+				<button
+					id='next-page'
+					className='tool'
+					type='button'
+					title='Next Page(s)'
+					onClick={()=>scrollToPage(_.max(visiblePages) + 1)}
+					disabled={visiblePages.includes(totalPages)}
+				>
+					<i className='fas fa-arrow-right'></i>
+				</button>
+			</div>
+		</div>
+	);
+};
+
+export default ToolBar;
--- a/client/homebrew/brewRenderer/toolBar/toolBar.less
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.less
@@ -0,0 +1,191 @@
+@import (less) './client/icons/customIcons.less';
+
+.toolBar {
+	position         : absolute;
+	z-index          : 1;
+	box-sizing       : border-box;
+	display          : flex;
+	flex-wrap        : wrap;
+	gap              : 8px 20px;
+	align-items      : center;
+	justify-content  : center;
+	width            : 100%;
+	height           : auto;
+	padding          : 2px 10px 2px 90px;
+	font-family      : 'Open Sans', sans-serif;
+	font-size        : 13px;
+	color            : #CCCCCC;
+	background-color : #555555;
+	& > *:not(.toggleButton) {
+		opacity    : 1;
+		transition : all 0.2s ease;
+	}
+
+	.group {
+		box-sizing       : border-box;
+		display          : flex;
+		gap              : 0 3px;
+		align-items      : center;
+		justify-content  : center;
+		height           : 28px;
+	}
+
+	.tool {
+		display     : flex;
+		align-items : center;
+	}
+
+	.active, [aria-checked='true'] { background-color : #444444; }
+
+	.anchored-trigger {
+		&.active { background-color : #444444; }
+	}
+
+	.anchored-box {
+		--box-color      : #555555;
+		top              : 30px;
+		display          : flex;
+		flex-direction   : column;
+		gap              : 5px;
+		padding          : 15px;
+		margin-top       : 10px;
+		font-size        : 0.8em;
+		color            : #CCCCCC;
+		background-color : var(--box-color);
+		border-radius    : 5px;
+	
+		h1 {
+			padding-bottom : 0.3em;
+			margin-bottom  : 0.5em;
+			border-bottom  : 1px solid currentColor;
+		}
+	
+		h2 {
+			padding-bottom : 0.3em;
+			margin         : 1em 0 0.5em 0;
+			color          : lightgray;
+			border-bottom  : 1px solid currentColor;
+		}
+	
+		label {
+			display         : flex;
+			gap             : 6px;
+			align-items     : center;
+			justify-content : space-between;
+	
+		}
+		input {
+			height : unset;
+			&[type='range'] { padding : 0; }
+		}
+		&::before {
+			position       : absolute;
+			top            : -20px;
+			left           : 50%;
+			width          : 0px;
+			height         : 0px;
+			pointer-events : none;
+			content        : '';
+			border         : 10px solid transparent;
+			border-bottom  : 10px solid var(--box-color);
+			transform      : translateX(-50%);
+		}
+
+	}
+
+	.radio-group:has(button[role='radio']) {
+		display : flex;
+		height  : 100%;
+		border  : 1px solid #333333;
+	}
+
+	input {
+		position       : relative;
+		height         : 1.5em;
+		padding        : 2px 5px;
+		font-family    : 'Open Sans', sans-serif;
+		color          : inherit;
+		background     : #3B3B3B;
+		border         : none;
+		&:focus { outline : 1px solid #D3D3D3; }
+
+		// `.range-input` if generic to all range inputs, or `#zoom-slider` if only for zoom slider
+		&.range-input {
+			padding      : 2px 0;
+			color        : #D3D3D3;
+			accent-color : #D3D3D3;
+  
+			&::-webkit-slider-thumb, &::-moz-range-thumb { 
+				width            : 5px;
+				height           : 5px;
+				cursor           : ew-resize;
+				outline          : none;
+			}
+
+			&.hover-tooltip[value]:hover::after {
+				position         : absolute;
+				bottom           : -30px;
+				left             : 50%;
+				z-index          : 1;
+				display          : grid;
+				place-items      : center;
+				width            : 4ch;
+				height           : 1.2lh;
+				pointer-events   : none;
+				content          : attr(value);
+				background-color : #555555;
+				border           : 1px solid #A1A1A1;
+				transform        : translate(-50%, 50%);
+			}
+		}
+
+		// `.text-input` if generic to all range inputs, or `#page-input` if only for current page input
+		&#page-input {
+			min-width    : 5ch;
+			margin-right : 1ch;
+			text-align   : center;
+		}
+	}
+
+	button {
+		box-sizing       : border-box;
+		display          : flex;
+		align-items      : center;
+		justify-content  : center;
+		width            : auto;
+		min-width        : 40px;
+		height           : 100%;
+		&:hover { background-color : #444444; }
+		&:focus {outline : none; border  : 1px solid #D3D3D3;}
+		&:disabled {
+			color            : #777777;
+			background-color : unset !important;
+		}
+		i { font-size : 1.2em; }
+	}
+
+	&.hidden {
+		flex-wrap        : nowrap;
+		width            : 92px;
+		overflow         : hidden;
+		background-color : unset;
+		opacity          : 0.7;
+		transition       : all 0.3s ease;
+		& > *:not(.toggleButton) {
+			opacity    : 0;
+			transition : all 0.2s ease;
+		}
+
+		.toggleButton button i {
+			filter: drop-shadow(0 0 2px black) drop-shadow(0 0 1px black);
+		}
+	}
+}
+
+.toggleButton {
+	position  : absolute;
+	left      : 0;
+	z-index   : 5;
+	display   : flex;
+	height    : 100%;
+}