Merge branch 'master' into experimentalDeploymentIdentification

.circleci/config.yml

@@ -10,7 +10,7 @@ orbs:
 jobs:
   build:
     docker:
-      - image: cimg/node:20.8.0
+      - image: cimg/node:20.17.0
       - image: mongo:4.4
 
     working_directory: ~/homebrewery
@@ -27,7 +27,7 @@ jobs:
           # fallback to using the latest cache if no exact match is found
           - v1-dependencies-
 
-      - run: sudo npm install -g npm@10.2.0
+      - run: sudo npm install -g npm@10.8.2
       - node/install-packages:
           app-dir: ~/homebrewery
           cache-path: node_modules
@@ -45,7 +45,7 @@ jobs:
 
   test:
     docker:
-      - image: cimg/node:20.8.0
+      - image: cimg/node:20.17.0
 
     working_directory: ~/homebrewery
     parallelism: 1

.gitattributes

@@ -1 +1,3 @@
-package-lock.json binary
+package-lock.json binary
+
+*.json text eol=lf

.github/pull_request_template.md

@@ -0,0 +1,36 @@
+<!--
+     Before submitting a Pull Request, please consider the following to speed up reviews:
+     - 👷‍♀️ Create small PRs. Large PRs can usually be broken down into incremental PRs.
+     - 🚩 Do you already have several open PRs? Consider finishing or asking for help with existing PRs first.
+     - 🔧 Does your PR reference a discussed and approved issue, especially for personal or edge-case requests?
+     - 💡 Is the solution agreed upon? Save rework time by discussing strategy before coding.
+-->
+
+## Description
+
+
+## Related Issues or Discussions
+
+- Closes #
+
+## QA Instructions, Screenshots, Recordings
+
+_Please replace this line with instructions on how to test or view your changes, as well as any before/after
+images for UI changes._
+
+### Reviewer Checklist
+
+_Please replace the list below with specific features you want reviewers to look at._
+
+*Reviewers, refer to this list when testing features, or suggest new items *
+- [ ] Verify new features are functional
+  - [ ] Feature A does X
+  - [ ] Feature B does Y
+- [ ] Verify old features have not broken
+  - [ ] Feature Z can still be used
+- [ ] Test for edge cases / try to break things
+  - [ ] Feature A handles negative numbers
+- [ ] Identify opportunities for simplification and refactoring
+- [ ] Check for code legibility and appropriate comments
+
+<details><summary>Copy this list</summary>

changelog.md

@@ -84,9 +84,54 @@ pre {
 ## changelog
 For a full record of development, visit our [Github Page](https://github.com/naturalcrit/homebrewery).
 
-### Tuesday 8/27/2024 - v3.14.2
-{{taskList
+### Wednesday 9/04/2024 - v3.15.0
 
+{{taskList
+##### 5e-Cleric, abquintic, calculuschild, Gazook89, G-Ambatte, Ericsheid, Kaiburr
+
+* [x] New {{openSans **VAULT** {{fas,fa-dungeon}}}} page 🎉🎉🎉
+:
+All **PUBLISHED** brews ({{openSans :fas_circle_info: **Properties**}} menu) will be searchable, by title or author, and filtered by renderer. More features and adjustments will be coming.
+:
+Note: If any of your own brews are not showing up in search (particularly if stored on Google Drive), please edit and re-save to ensure our database has the data needed from document to be searchable. 
+
+Fixes issue [#697](https://github.com/naturalcrit/homebrewery/issues/697)
+
+##### Gazook89
+
+* [x] Auto-focus on text editor when switching editor tabs
+}}
+
+### Wednesday 8/28/2024 - v3.14.3
+
+{{taskList
+##### calculuschild, G-Ambatte
+
+* [x] New {{openSans **IMAGES → {{fac,image-wrap-left}} IMAGE WRAP LEFT/RIGHT**}} snippets
+
+Fixes issue [#380](https://github.com/naturalcrit/homebrewery/issues/380)
+
+* [x] Fix v3.14.2 bug with `꞉꞉꞉꞉` failing after tables
+
+##### 5e-Cleric
+
+* [x] Fix Account page crash when not logged in
+
+Fixes issue [#3605](https://github.com/naturalcrit/homebrewery/issues/3605)
+
+##### abquintic
+
+* [x] Fix jump hotkeys conflicting with `CTRL + SHIFT`. Preview and Source movement shortcuts now use `CTRL + SHIFT + META + LEFT\RIGHTARROW`
+
+##### G-Ambatte
+
+* [x] Fix display issue with image wrap icons
+}}
+
+
+### Tuesday 8/27/2024 - v3.14.2
+
+{{taskList
 ##### calculuschild
 
 * [x] Reroute invalid urls to homepage
@@ -119,7 +164,7 @@ Fixes issues [#3572](https://github.com/naturalcrit/homebrewery/issues/3572)
 
 Fixes issues [#1430](https://github.com/naturalcrit/homebrewery/issues/1430)
 
-* [x] Fix colon `:::` being parsed in codeblocks
+* [x] Fix colon `꞉꞉꞉꞉` being parsed in codeblocks
 
 * [x] Prevent crashes when loading undefined renderer or theme bundle
 
@@ -133,12 +178,11 @@ Fixes issues [#1430](https://github.com/naturalcrit/homebrewery/issues/1430)
 ##### 5e-Cleric, Gazook89
 
 * [x] Viewer tools for zoom/page navigation
-
 }}
 
 ### Tuesday 8/13/2024 - v3.14.1
-{{taskList
 
+{{taskList
 ##### abquintic
 
 * [x] Allow Table of Contents to flow across columns
@@ -181,16 +225,13 @@ Fixes issues [#3613](https://github.com/naturalcrit/homebrewery/issues/3613)
 
 Fixes issues [#3622](https://github.com/naturalcrit/homebrewery/issues/3622)
 
-
 ##### calculuschild
 
 * [x] Fix `/migrate` page using an editor context instead of share context
 
-
 ##### 5e-Cleric
 
 * [x] Fix Monster Stat Blocks losing color in Safari
-
 }}
 
 \page

client/admin/admin.jsx

@@ -2,35 +2,44 @@ require('./admin.less');
 const React = require('react');
 const createClass = require('create-react-class');
 
+const BrewUtils = require('./brewUtils/brewUtils.jsx');
+const NotificationUtils = require('./notificationUtils/notificationUtils.jsx');
 
-const BrewCleanup = require('./brewCleanup/brewCleanup.jsx');
-const BrewLookup = require('./brewLookup/brewLookup.jsx');
-const BrewCompress = require ('./brewCompress/brewCompress.jsx');
-const Stats = require('./stats/stats.jsx');
+const tabGroups = ['brew', 'notifications'];
 
 const Admin = createClass({
 	getDefaultProps : function() {
 		return {};
 	},
 
+	getInitialState : function(){
+		return ({
+			currentTab : 'brew'
+		});
+	},
+
+	handleClick : function(newTab){
+		if(this.state.currentTab === newTab) return;
+		this.setState({
+			currentTab : newTab
+		});
+	},
+
 	render : function(){
 		return <div className='admin'>
-
 			<header>
 				<div className='container'>
 					<i className='fas fa-rocket' />
 					homebrewery admin
 				</div>
 			</header>
-			<div className='container'>
-				<Stats />
-				<hr />
-				<BrewLookup />
-				<hr />
-				<BrewCleanup />
-				<hr />
-				<BrewCompress />
-			</div>
+			<main className='container'>
+				<nav className='tabs'>
+					{tabGroups.map((tab, idx)=>{ return <button className={tab===this.state.currentTab ? 'active' : ''} key={idx} onClick={()=>{ return this.handleClick(tab); }}>{tab.toUpperCase()}</button>; })}
+				</nav>
+				{this.state.currentTab==='brew' && <BrewUtils />}
+				{this.state.currentTab==='notifications' && <NotificationUtils />}
+			</main>
 		</div>;
 	}
 });

client/admin/admin.less

@@ -6,39 +6,95 @@
 
 @import 'font-awesome/css/font-awesome.css';
 
-html,body, #reactContainer, .naturalCrit{
-	min-height : 100%;
-}
+html,body, #reactContainer, .naturalCrit { min-height : 100%; }
 
 @sidebarWidth : 250px;
 
-body{
-	background-color : #eee;
-	font-family      : 'Open Sans', sans-serif;
-	color            : #4b5055;
-	font-weight      : 100;
-	text-rendering   : optimizeLegibility;
-	margin           : 0;
+body {
+	height           : 100%;
 	padding          : 0;
-	height : 100%;
+	margin           : 0;
+	font-family      : 'Open Sans', sans-serif;
+	font-weight      : 100;
+	color            : #4B5055;
+	background-color : #EEEEEE;
+	text-rendering   : optimizeLegibility;
 }
 
-.admin{
+:where(.admin) {
 
-	header{
+	header {
+		padding          : 20px 0px;
+		margin-bottom    : 30px;
+		font-size        : 2em;
+		color            : white;
 		background-color : @red;
-		font-size: 2em;
-		padding : 20px 0px;
-		color : white;
-		margin-bottom: 30px;
-		i{
-			margin-right: 30px;
+		i { margin-right : 30px; }
+	}
+
+	hr { margin : 30px 0px; }
+
+	:where(.container) {
+		input {
+			height        : 33px;
+			padding       : 0px 10px;
+			margin-bottom : 20px;
+			font-family   : monospace;
+		}
+
+		button {
+			height         : 37px;
+			vertical-align : middle;
+		}
+
+		dl {
+			@maxItemWidth : 132px;
+			dt {
+				float      : left;
+				width      : @maxItemWidth;
+				clear      : left;
+				text-align : right;
+				&::after { content : ' : '; }
+			}
+			dd {
+				height      : 1em;
+				padding     : 0 0 0.5em 0;
+				margin-left : @maxItemWidth + 6px;
+			}
+		}
+
+		.tabs button {
+			margin-right     : 3px;
+			margin-left      : 3px;
+			color            : black;
+			background-color : #EEEEEE;
+			border           : 1px solid #444444;
+			border-radius    : 5px;
+			&:hover {
+				color            : #EEEEEE;
+				background-color : #444444;
+			}
+			&.active {
+				margin-right     : 2px;
+				margin-left      : 2px;
+				text-decoration  : underline;
+				background-color : #CCCCCC;
+				border           : 2px solid #444444;
+			}
+		}
+
+		.notificationUtils {
+			display         : flex;
+			gap             : 50px;
+			justify-content : space-between;
 		}
 	}
 
-	hr{
-		margin : 30px 0px;
+	.error {
+		background: rgb(178, 54, 54);
+		color:white;
+		font-weight: 900;
+		margin-block:10px;
+		padding:10px;
 	}
-
-
 }

client/admin/brewCleanup/brewCleanup.less

@@ -1,10 +0,0 @@
-.BrewCleanup{
-	.removeBox{
-		margin-top: 20px;
-		button{
-			background-color: @red;
-			margin-right: 10px;
-		}
-	}
-
-}

client/admin/brewCompress/brewCompress.less

@@ -1,10 +0,0 @@
-.BrewCompress{
-	.removeBox{
-		margin-top: 20px;
-		button{
-			background-color: @red;
-			margin-right: 10px;
-		}
-	}
-
-}

client/admin/brewLookup/brewLookup.less

@@ -1,30 +0,0 @@
-
-.brewLookup{
-	input{
-		height        : 33px;
-		margin-bottom : 20px;
-		padding       : 0px 10px;
-		font-family   : monospace;
-	}
-	button{
-		vertical-align : middle;
-		height         : 37px;
-	}
-	dl{
-		@maxItemWidth : 132px;
-		dt{
-			float      : left;
-			clear      : left;
-			width      : @maxItemWidth;
-			text-align : right;
-			&::after {
-				content: " : ";
-			}
-		}
-		dd{
-			height      : 1em;
-			margin-left : @maxItemWidth + 6px;
-			padding     : 0 0 0.5em 0;
-		}
-	}
-}

client/admin/brewUtils/brewCleanup/brewCleanup.less

@@ -0,0 +1,9 @@
+.BrewCleanup {
+	.removeBox {
+		margin-top : 20px;
+		button {
+			margin-right     : 10px;
+			background-color : @red;
+		}
+	}
+}

client/admin/brewUtils/brewCompress/brewCompress.less

@@ -0,0 +1,9 @@
+.BrewCompress {
+	.removeBox {
+		margin-top : 20px;
+		button {
+			margin-right     : 10px;
+			background-color : @red;
+		}
+	}
+}

client/admin/brewUtils/brewLookup/brewLookup.jsx

@@ -1,4 +1,3 @@
-require('./brewLookup.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const cx    = require('classnames');

client/admin/brewUtils/brewUtils.jsx

@@ -0,0 +1,24 @@
+const React = require('react');
+const createClass = require('create-react-class');
+
+
+const BrewCleanup = require('./brewCleanup/brewCleanup.jsx');
+const BrewLookup = require('./brewLookup/brewLookup.jsx');
+const BrewCompress = require ('./brewCompress/brewCompress.jsx');
+const Stats = require('./stats/stats.jsx');
+
+const BrewUtils = createClass({
+	render : function(){
+		return <>
+			<Stats />
+			<hr />
+			<BrewLookup />
+			<hr />
+			<BrewCleanup />
+			<hr />
+			<BrewCompress />
+		</>;
+	}
+});
+
+module.exports = BrewUtils;

client/admin/brewUtils/stats/stats.less

@@ -0,0 +1,13 @@
+
+.Stats {
+	position : relative;
+	
+	.pending {
+		position         : absolute;
+		top              : 0px;
+		left             : 0px;
+		width            : 100%;
+		height           : 100%;
+		background-color : rgba(238,238,238, 0.5);
+	}
+}

client/admin/notificationUtils/notificationAdd/notificationAdd.jsx

@@ -0,0 +1,109 @@
+require('./notificationAdd.less');
+const React = require('react');
+const { useState, useRef } = require('react');
+const request = require('superagent');
+
+const NotificationAdd = ()=>{
+	const [notificationResult, setNotificationResult] = useState(null);
+	const [searching, setSearching] = useState(false);
+	const [error, setError] = useState(null);
+
+	const dismissKeyRef = useRef(null);
+	const titleRef = useRef(null);
+	const textRef = useRef(null);
+	const startAtRef = useRef(null);
+	const stopAtRef = useRef(null);
+
+	const saveNotification = async ()=>{
+		const dismissKey = dismissKeyRef.current.value;
+		const title = titleRef.current.value;
+		const text = textRef.current.value;
+		const startAt = new Date(startAtRef.current.value);
+		const stopAt = new Date(stopAtRef.current.value);
+
+		// Basic validation
+		if(!dismissKey || !title || !text || isNaN(startAt.getTime()) || isNaN(stopAt.getTime())) {
+			setError('All fields are required');
+			return;
+		}
+		if(startAt >= stopAt) {
+			setError('End date must be after the start date!');
+			return;
+		}
+
+		const data = {
+			dismissKey,
+			title,
+			text,
+			startAt : startAt?.toISOString() ?? '',
+			stopAt  : stopAt?.toISOString() ?? '',
+		};
+
+		try {
+			setSearching(true);
+			setError(null);
+			const response = await request.post('/admin/notification/add').send(data);
+			console.log(response.body);
+
+			// Reset form fields
+			dismissKeyRef.current.value = '';
+			titleRef.current.value = '';
+			textRef.current.value = '';
+
+			setNotificationResult('Notification successfully created.');
+			setSearching(false);
+		} catch (err) {
+			console.log(err.response.body.message);
+			setError(`Error saving notification: ${err.response.body.message}`);
+			setSearching(false);
+		}
+	};
+
+	return (
+		<div className='notificationAdd'>
+			<h2>Add Notification</h2>
+
+			<label className='field'>
+				Dismiss Key:
+				<input className='fieldInput' type='text' ref={dismissKeyRef} required
+					placeholder='GOOGLEDRIVENOTIF'
+				/>
+			</label>
+
+			<label className='field'>
+				Title:
+				<input className='fieldInput' type='text' ref={titleRef} required
+					placeholder='Stop using Google Drive as image host'
+				/>
+			</label>
+
+			<label className='field'>
+				Text:
+				<textarea className='fieldInput' type='text' ref={textRef} required
+					placeholder='Google Drive is not an image hosting site, you should not use it as such.'
+				>
+				</textarea>
+			</label>
+
+			<label className='field'>
+				Start Date:
+				<input type='date' className='fieldInput' ref={startAtRef} required/>
+			</label>
+
+			<label className='field'>
+				End Date:
+				<input type='date' className='fieldInput' ref={stopAtRef} required/>
+			</label>
+
+			<div className='notificationResult'>{notificationResult}</div>
+
+			<button className='notificationSave' onClick={saveNotification} disabled={searching}>
+				<i className={`fas ${searching ? 'fa-spin fa-spinner' : 'fa-save'}`}/>
+				Save Notification
+			</button>
+			{error && <div className='error'>{error}</div>}
+		</div>
+	);
+};
+
+module.exports = NotificationAdd;

client/admin/notificationUtils/notificationAdd/notificationAdd.less

@@ -0,0 +1,37 @@
+.notificationAdd {
+	position       : relative;
+	display        : flex;
+	flex-direction : column;
+	width          : 500px;
+
+	.field {
+		display               : grid;
+		grid-template-columns : 120px 150px;
+		align-items           : center;
+		justify-items         : stretch;
+		width                 : 100%;
+		margin-bottom         : 20px;
+   
+	
+		input {
+			height        : 33px;
+			padding       : 0px 10px;
+			margin-bottom : unset;
+			font-family   : monospace;
+		}
+	
+		textarea {
+			width      : 50ch;
+			min-height : 7em;
+			max-height : 20em;
+			resize     : vertical;
+			padding	   : 10px;
+		}
+	}
+
+	button {
+	width: 200px;
+		
+		i { margin-right : 10px; }
+	}
+}

client/admin/notificationUtils/notificationLookup/notificationLookup.jsx

@@ -0,0 +1,105 @@
+require('./notificationLookup.less');
+
+const React = require('react');
+const { useState } = require('react');
+const request = require('superagent');
+const Moment = require('moment');
+
+const NotificationDetail = ({ notification, onDelete })=>(
+	<>
+		<dl>
+			<dt>Key</dt>
+			<dd>{notification.dismissKey}</dd>
+
+			<dt>Title</dt>
+			<dd>{notification.title || 'No Title'}</dd>
+
+			<dt>Text</dt>
+			<dd>{notification.text || 'No Text'}</dd>
+
+			<dt>Created</dt>
+			<dd>{Moment(notification.createdAt).format('LLLL')}</dd>
+
+			<dt>Start</dt>
+			<dd>{Moment(notification.startAt).format('LLLL') || 'No Start Time'}</dd>
+
+			<dt>Stop</dt>
+			<dd>{Moment(notification.stopAt).format('LLLL') || 'No End Time'}</dd>
+		</dl>
+		<button onClick={()=>onDelete(notification.dismissKey)}>DELETE</button>
+	</>
+);
+
+const NotificationLookup = ()=>{
+	const [searching, setSearching] = useState(false);
+	const [error, setError] = useState(null);
+	const [notifications, setNotifications] = useState([]);
+
+	const lookupAll = async ()=>{
+		setSearching(true);
+		setError(null);
+
+		try {
+			const res = await request.get('/admin/notification/all');
+			setNotifications(res.body || []);
+		} catch (err) {
+			console.log(err);
+			setError(`Error looking up notifications: ${err.response.body.message}`);
+		} finally {
+			setSearching(false);
+		}
+	};
+
+	const deleteNotification = async (dismissKey)=>{
+		if(!dismissKey) return;
+
+		const confirmed = window.confirm(
+			`Really delete notification ${dismissKey}?`
+		);
+		if(!confirmed) {
+			console.log('Delete notification cancelled');
+			return;
+		}
+		console.log('Delete notification confirm');
+		try {
+			await request.delete(`/admin/notification/delete/${dismissKey}`);
+			lookupAll();
+		} catch (err) {
+			console.log(err);
+			setError(`Error deleting notification: ${err.response.body.message}`);
+		};
+	};
+
+	const renderNotificationsList = ()=>{
+		if(error)
+			return <div className='error'>{error}</div>;
+
+		if(notifications.length === 0)
+			return <div className='noNotification'>No notifications available.</div>;
+
+		return (
+			<ul className='notificationList'>
+				{notifications.map((notification)=>(
+					<li key={notification.dismissKey} >
+						<details>
+							<summary>{notification.title || 'No Title'}</summary>
+							<NotificationDetail notification={notification} onDelete={deleteNotification} />
+						</details>
+					</li>
+				))}
+			</ul>
+		);
+	};
+
+	return (
+		<div className='notificationLookup'>
+			<h2>Check all Notifications</h2>
+			<button onClick={lookupAll}>
+				<i className={`fas ${searching ? 'fa-spin fa-spinner' : 'fa-search'}`} />
+			</button>
+			{renderNotificationsList()}
+		</div>
+	);
+};
+
+module.exports = NotificationLookup;

client/admin/notificationUtils/notificationLookup/notificationLookup.less

@@ -0,0 +1,40 @@
+
+.notificationLookup {
+	width     : 450px;
+	height	  : fit-content;
+
+	.notificationList {
+		display        : flex;
+		flex-direction : column;
+		max-height     : 500px;
+		margin-block   : 20px;
+		overflow       : auto;
+		border         : 1px solid;
+		border-radius  : 5px;
+		
+		li {
+			padding    : 10px;
+			background : #CCCCCC;
+				
+			&:nth-child(even) { background : #DDDDDD; }
+			&:first-child {
+				border-top-left-radius  : 5px;
+				border-top-right-radius : 5px;
+			}
+			&:last-child {
+				border-bottom-right-radius : 5px;
+				border-bottom-left-radius  : 5px;
+			}
+				
+			summary {
+				font-size   : 20px;
+				font-weight : 900;
+			}
+
+			dl dt{
+				font-weight: 900;
+			}
+		}
+	}
+	.noNotification { margin-block : 20px; }
+}

client/admin/notificationUtils/notificationUtils.jsx

@@ -0,0 +1,15 @@
+const React = require('react');
+
+const NotificationLookup = require('./notificationLookup/notificationLookup.jsx');
+const NotificationAdd = require('./notificationAdd/notificationAdd.jsx');
+
+const NotificationUtils = ()=>{
+	return (
+		<section className='notificationUtils'>
+			<NotificationAdd />
+			<NotificationLookup />
+		</section>
+	);
+};
+
+module.exports = NotificationUtils;

client/admin/stats/stats.less

@@ -1,28 +0,0 @@
-
-.Stats{
-	position : relative;
-	.pending{
-		position         : absolute;
-		top              : 0px;
-		left             : 0px;
-		height           : 100%;
-		width            : 100%;
-		background-color : rgba(238,238,238, 0.5);
-	}
-	dl{
-		@maxItemWidth : 132px;
-		dt{
-			float      : left;
-			clear      : left;
-			width      : @maxItemWidth;
-			text-align : right;
-			&::after {
-				content: " : ";
-			}
-		}
-		dd{
-			margin  : 0 0 0 @maxItemWidth + 10px;
-			padding : 0 0 0.5em 0;
-		}
-	}
-}

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -1,7 +1,7 @@
 /*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
 require('./brewRenderer.less');
 const React = require('react');
-const { useState, useRef, useEffect } = React;
+const { useState, useRef, useEffect, useCallback } = React;
 const _ = require('lodash');
 
 const MarkdownLegacy = require('naturalcrit/markdownLegacy.js');
@@ -49,23 +49,25 @@ let rawPages      = [];
 
 const BrewRenderer = (props)=>{
 	props = {
-		text              : '',
-		style             : '',
-		renderer          : 'legacy',
-		theme             : '5ePHB',
-		lang              : '',
-		errors            : [],
-		currentEditorPage : 0,
-		themeBundle       : {},
+		text                       : '',
+		style                      : '',
+		renderer                   : 'legacy',
+		theme                      : '5ePHB',
+		lang                       : '',
+		errors                     : [],
+		currentEditorCursorPageNum : 1,
+		currentEditorViewPageNum   : 1,
+		currentBrewRendererPageNum : 1,
+		themeBundle                : {},
+		onPageChange               : ()=>{},
 		...props
 	};
 
 	const [state, setState] = useState({
-		height            : PAGE_HEIGHT,
-		isMounted         : false,
-		visibility        : 'hidden',
-		zoom              : 100,
-		currentPageNumber : 1,
+		height     : PAGE_HEIGHT,
+		isMounted  : false,
+		visibility : 'hidden',
+		zoom       : 100
 	});
 
 	const mainRef  = useRef(null);
@@ -87,25 +89,22 @@ const BrewRenderer = (props)=>{
 		}));
 	};
 
-	const getCurrentPage = (e)=>{
+	const updateCurrentPage = useCallback(_.throttle((e)=>{
 		const { scrollTop, clientHeight, scrollHeight } = e.target;
 		const totalScrollableHeight = scrollHeight - clientHeight;
-		const currentPageNumber = Math.ceil((scrollTop / totalScrollableHeight) * rawPages.length);
+		const currentPageNumber = Math.max(Math.ceil((scrollTop / totalScrollableHeight) * rawPages.length), 1);
 
-		setState((prevState)=>({
-			...prevState,
-			currentPageNumber : currentPageNumber || 1
-		}));
-	};
+		props.onPageChange(currentPageNumber);
+	}, 200), []);
 
 	const isInView = (index)=>{
 		if(!state.isMounted)
 			return false;
 
-		if(index == props.currentEditorPage)	//Already rendered before this step
+		if(index == props.currentEditorCursorPageNum - 1)	//Already rendered before this step
 			return false;
 
-		if(Math.abs(index - state.currentPageNumber) <= 3)
+		if(Math.abs(index - props.currentBrewRendererPageNum - 1) <= 3)
 			return true;
 
 		return false;
@@ -142,7 +141,7 @@ const BrewRenderer = (props)=>{
 			renderedPages.length = 0;
 
 		// Render currently-edited page first so cross-page effects (variables, links) can propagate out first
-		renderedPages[props.currentEditorPage] = renderPage(rawPages[props.currentEditorPage], props.currentEditorPage);
+		renderedPages[props.currentEditorCursorPageNum - 1] = renderPage(rawPages[props.currentEditorCursorPageNum - 1], props.currentEditorCursorPageNum - 1);
 
 		_.forEach(rawPages, (page, index)=>{
 			if((isInView(index) || !renderedPages[index]) && typeof window !== 'undefined'){
@@ -191,14 +190,14 @@ const BrewRenderer = (props)=>{
 	const styleObject = { height: state.height };
 
 	if(global.config.deployment) {
-		styleObject.backgroundImage = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='40px' width='200px'><text x='0' y='15' fill='white' font-size='20'>${global.config.deployment}</text></svg>")`
+		styleObject.backgroundImage = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='40px' width='200px'><text x='0' y='15' fill='white' font-size='20'>${global.config.deployment}</text></svg>")`;
 	}
 
 	return (
 		<>
 			{/*render dummy page while iFrame is mounting.*/}
 			{!state.isMounted
-				? <div className='brewRenderer' onScroll={getCurrentPage}>
+				? <div className='brewRenderer' onScroll={updateCurrentPage}>
 					<div className='pages'>
 						{renderDummyPage(1)}
 					</div>
@@ -211,7 +210,7 @@ const BrewRenderer = (props)=>{
 				<NotificationPopup />
 			</div>
 
-			<ToolBar onZoomChange={handleZoom} currentPage={state.currentPageNumber}  totalPages={rawPages.length}/>
+			<ToolBar onZoomChange={handleZoom} currentPage={props.currentBrewRendererPageNum}  totalPages={rawPages.length}/>
 
 			{/*render in iFrame so broken code doesn't crash the site.*/}
 			<Frame id='BrewRenderer' initialContent={INITIAL_CONTENT}
@@ -220,7 +219,7 @@ const BrewRenderer = (props)=>{
 				onClick={()=>{emitClick();}}
 			>
 				<div className={`brewRenderer ${global.config.deployment && 'deployment'}`}
-					onScroll={getCurrentPage}
+					onScroll={updateCurrentPage}
 					onKeyDown={handleControlKeys}
 					tabIndex={-1}
 					style={ styleObject }>

client/homebrew/brewRenderer/brewRenderer.less

@@ -42,6 +42,7 @@
 		overflow-y  : unset;
 		.pages {
 			margin : 0px;
+			zoom: 100% !important;
 			& > .page { box-shadow : unset; }
 		}
 	}

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -4,7 +4,7 @@ const _     = require('lodash');
 
 import Dialog from '../../../components/dialog.jsx';
 
-const DISMISS_KEY = 'dismiss_notification12-04-23';
+const DISMISS_KEY = 'dismiss_notification04-09-24';
 const DISMISS_BUTTON = <i className='fas fa-times dismiss' />;
 
 const NotificationPopup = ()=>{
@@ -15,11 +15,12 @@ const NotificationPopup = ()=>{
 			<small>This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind:</small>
 		</div>
 		<ul>
-			<li key='psa'>
-				<em>Don't store IMAGES in Google Drive</em><br />
-				Google Drive is not an image service, and will block images from being used
-				in brews if they get more views than expected. Google has confirmed they won't fix
-				this, so we recommend you look for another image hosting service such as imgur, ImgBB or Google Photos.
+			<li key='Vault'>
+				<em>Search brews with our new page!</em><br />
+				We have been working very hard in making this possible, now you can share your work and look at it in the new <a href='/vault'>Vault</a> page!
+				All PUBLISHED brews will be available to anyone searching there, by title or author, and filtering by renderer.
+
+				More features will be coming.
 			</li>
 
 			<li key='googleDriveFolder'>

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -11,6 +11,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 
 	const [zoomLevel, setZoomLevel] = useState(100);
 	const [pageNum, setPageNum]     = useState(currentPage);
+	const [toolsVisible, setToolsVisible] = useState(true);
 
 	useEffect(()=>{
 		onZoomChange(zoomLevel);
@@ -55,7 +56,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 
 		} else if(mode == 'fit'){
 			// find the page with the largest single dim (height or width) so that zoom can be adapted to fit it.
-			const minDimRatio = [...pages].reduce((minRatio, page) => Math.min(minRatio, iframeWidth / page.offsetWidth, iframeHeight / page.offsetHeight), Infinity);
+			const minDimRatio = [...pages].reduce((minRatio, page)=>Math.min(minRatio, iframeWidth / page.offsetWidth, iframeHeight / page.offsetHeight), Infinity);
 
 			desiredZoom = minDimRatio * 100;
 		}
@@ -67,7 +68,8 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 	};
 
 	return (
-		<div className='toolBar'>
+		<div className={`toolBar ${toolsVisible ? 'visible' : 'hidden'}`}>
+			<button className='toggleButton' title={`${toolsVisible ? 'Hide' : 'Show'} Preview Toolbar`} onClick={()=>{setToolsVisible(!toolsVisible);}}><i className='fas fa-glasses' /></button>
 			{/*v=====----------------------< Zoom Controls >---------------------=====v*/}
 			<div className='group'>
 				<button

client/homebrew/brewRenderer/toolBar/toolBar.less

@@ -15,6 +15,10 @@
 	font-family      : 'Open Sans', sans-serif;
 	color            : #CCCCCC;
 	background-color : #555555;
+	& > *:not(.toggleButton) {
+		opacity: 1;
+		transition: all .2s ease;
+	}
 
 	.group {
 		box-sizing       : border-box;
@@ -100,4 +104,25 @@
 			font-size:1.2em;
 		}
 	}
+
+	&.hidden {
+		width: 32px;
+		transition: all .3s ease;
+		flex-wrap:nowrap;
+		overflow: hidden;
+		background-color: unset;
+		opacity: .5;
+		& > *:not(.toggleButton) {
+			opacity: 0;
+			transition: all .2s ease;
+		}
+	}
+}
+
+button.toggleButton {
+	z-index : 5;
+	position:absolute;
+	left: 0;
+	width: 32px;
+	min-width: unset;
 }

client/homebrew/editor/editor.jsx

@@ -1,9 +1,8 @@
-/*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
+/*eslint max-lines: ["warn", {"max": 500, "skipBlankLines": true, "skipComments": true}]*/
 require('./editor.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
-const cx = require('classnames');
 const dedent = require('dedent-tabs').default;
 const Markdown = require('../../../shared/naturalcrit/markdown.js');
 
@@ -22,6 +21,7 @@ const DEFAULT_STYLE_TEXT = dedent`
 					color: black;
 				}`;
 
+let isJumping = false;
 
 const Editor = createClass({
 	displayName     : 'Editor',
@@ -37,8 +37,15 @@ const Editor = createClass({
 			onMetaChange  : ()=>{},
 			reportError   : ()=>{},
 
+			onCursorPageChange : ()=>{},
+			onViewPageChange   : ()=>{},
+
 			editorTheme : 'default',
-			renderer    : 'legacy'
+			renderer    : 'legacy',
+
+			currentEditorCursorPageNum : 1,
+			currentEditorViewPageNum   : 1,
+			currentBrewRendererPageNum : 1,
 		};
 	},
 	getInitialState : function() {
@@ -56,12 +63,16 @@ const Editor = createClass({
 	isMeta  : function() {return this.state.view == 'meta';},
 
 	componentDidMount : function() {
+
 		this.updateEditorSize();
 		this.highlightCustomMarkdown();
 		window.addEventListener('resize', this.updateEditorSize);
 		document.getElementById('BrewRenderer').addEventListener('keydown', this.handleControlKeys);
 		document.addEventListener('keydown', this.handleControlKeys);
 
+		this.codeEditor.current.codeMirror.on('cursorActivity', (cm)=>{this.updateCurrentCursorPage(cm.getCursor());});
+		this.codeEditor.current.codeMirror.on('scroll', _.throttle(()=>{this.updateCurrentViewPage(this.codeEditor.current.getTopVisibleLine());}, 200));
+
 		const editorTheme = window.localStorage.getItem(EDITOR_THEME_KEY);
 		if(editorTheme) {
 			this.setState({
@@ -75,28 +86,37 @@ const Editor = createClass({
 	},
 
 	componentDidUpdate : function(prevProps, prevState, snapshot) {
+
 		this.highlightCustomMarkdown();
-		if(prevProps.moveBrew !== this.props.moveBrew) {
+		if(prevProps.moveBrew !== this.props.moveBrew)
 			this.brewJump();
-		};
-		if(prevProps.moveSource !== this.props.moveSource) {
+
+		if(prevProps.moveSource !== this.props.moveSource)
 			this.sourceJump();
-		};
+
+		if(this.props.liveScroll) {
+			if(prevProps.currentBrewRendererPageNum !== this.props.currentBrewRendererPageNum) {
+				this.sourceJump(this.props.currentBrewRendererPageNum, false);
+			} else if(prevProps.currentEditorViewPageNum !== this.props.currentEditorViewPageNum) {
+				this.brewJump(this.props.currentEditorViewPageNum, false);
+			} else if(prevProps.currentEditorCursorPageNum !== this.props.currentEditorCursorPageNum) {
+				this.brewJump(this.props.currentEditorCursorPageNum, false);
+			}
+		}
 	},
 
 	handleControlKeys : function(e){
-		if(!(e.ctrlKey && e.metaKey)) return;
+		if(!(e.ctrlKey && e.metaKey && e.shiftKey)) return;
 		const LEFTARROW_KEY = 37;
 		const RIGHTARROW_KEY = 39;
-		if (e.shiftKey && (e.keyCode == RIGHTARROW_KEY)) this.brewJump();
-		if (e.shiftKey && (e.keyCode == LEFTARROW_KEY)) this.sourceJump();
-		if ((e.keyCode == LEFTARROW_KEY) || (e.keyCode == RIGHTARROW_KEY)) {
+		if(e.keyCode == RIGHTARROW_KEY) this.brewJump();
+		if(e.keyCode == LEFTARROW_KEY) this.sourceJump();
+		if(e.keyCode == LEFTARROW_KEY || e.keyCode == RIGHTARROW_KEY) {
 			e.stopPropagation();
 			e.preventDefault();
 		}
 	},
 
-
 	updateEditorSize : function() {
 		if(this.codeEditor.current) {
 			let paneHeight = this.editor.current.parentNode.clientHeight;
@@ -105,6 +125,20 @@ const Editor = createClass({
 		}
 	},
 
+	updateCurrentCursorPage : function(cursor) {
+		const lines = this.props.brew.text.split('\n').slice(0, cursor.line + 1);
+		const pageRegex = this.props.brew.renderer == 'V3' ? /^\\page$/ : /\\page/;
+		const currentPage = lines.reduce((count, line)=>count + (pageRegex.test(line) ? 1 : 0), 1);
+		this.props.onCursorPageChange(currentPage);
+	},
+
+	updateCurrentViewPage : function(topScrollLine) {
+		const lines = this.props.brew.text.split('\n').slice(0, topScrollLine + 1);
+		const pageRegex = this.props.brew.renderer == 'V3' ? /^\\page$/ : /\\page/;
+		const currentPage = lines.reduce((count, line)=>count + (pageRegex.test(line) ? 1 : 0), 1);
+		this.props.onViewPageChange(currentPage);
+	},
+
 	handleInject : function(injectText){
 		this.codeEditor.current?.injectText(injectText, false);
 	},
@@ -113,19 +147,10 @@ const Editor = createClass({
 		this.props.setMoveArrows(newView === 'text');
 		this.setState({
 			view : newView
-		}, this.updateEditorSize);	//TODO: not sure if updateeditorsize needed
-	},
-
-	getCurrentPage : function(){
-		const lines = this.props.brew.text.split('\n').slice(0, this.codeEditor.current.getCursorPosition().line + 1);
-		return _.reduce(lines, (r, line)=>{
-			if(
-				(this.props.renderer == 'legacy' && line.indexOf('\\page') !== -1)
-				||
-				(this.props.renderer == 'V3' && line.match(/^\\page$/))
-			) r++;
-			return r;
-		}, 1);
+		}, ()=>{
+			this.codeEditor.current?.codeMirror.focus();
+			this.updateEditorSize();
+		});	//TODO: not sure if updateeditorsize needed
 	},
 
 	highlightCustomMarkdown : function(){
@@ -136,13 +161,13 @@ const Editor = createClass({
 			codeMirror.operation(()=>{ // Batch CodeMirror styling
 
 				const foldLines = [];
-        
+
 				//reset custom text styles
 				const customHighlights = codeMirror.getAllMarks().filter((mark)=>{
 					// Record details of folded sections
 					if(mark.__isFold) {
 						const fold = mark.find();
-						foldLines.push({from: fold.from?.line, to: fold.to?.line});
+						foldLines.push({ from: fold.from?.line, to: fold.to?.line });
 					}
 					return !mark.__isFold;
 				}); //Don't undo code folding
@@ -160,7 +185,7 @@ const Editor = createClass({
 
 					// Don't process lines inside folded text
 					// If the current lineNumber is inside any folded marks, skip line styling
-					if (foldLines.some(fold => lineNumber >= fold.from && lineNumber <= fold.to))
+					if(foldLines.some((fold)=>lineNumber >= fold.from && lineNumber <= fold.to))
 						return;
 
 					// Styling for \page breaks
@@ -186,7 +211,7 @@ const Editor = createClass({
 
 						// definition lists
 						if(line.includes('::')){
-							if(/^:*$/.test(line) == true){ return };
+							if(/^:*$/.test(line) == true){ return; };
 							const regex = /^([^\n]*?:?\s?)(::[^\n]*)(?:\n|$)/ymd;  // the `d` flag, for match indices, throws an ESLint error.
 							let match;
 							while ((match = regex.exec(line)) != null){
@@ -194,10 +219,10 @@ const Editor = createClass({
 								codeMirror.markText({ line: lineNumber, ch: match.indices[1][0] }, { line: lineNumber, ch: match.indices[1][1] }, { className: 'dt-highlight' });
 								codeMirror.markText({ line: lineNumber, ch: match.indices[2][0] }, { line: lineNumber, ch: match.indices[2][1] }, { className: 'dd-highlight' });
 								const ddIndex = match.indices[2][0];
-								let colons = /::/g;
-								let colonMatches = colons.exec(match[2]);
+								const colons = /::/g;
+								const colonMatches = colons.exec(match[2]);
 								if(colonMatches !== null){
-									codeMirror.markText({ line: lineNumber, ch: colonMatches.index + ddIndex }, { line: lineNumber, ch: colonMatches.index + colonMatches[0].length + ddIndex }, { className: 'dl-colon-highlight'} )
+									codeMirror.markText({ line: lineNumber, ch: colonMatches.index + ddIndex }, { line: lineNumber, ch: colonMatches.index + colonMatches[0].length + ddIndex }, { className: 'dl-colon-highlight' });
 								}
 							}
 						}
@@ -207,12 +232,12 @@ const Editor = createClass({
 							let startIndex = line.indexOf('^');
 							const superRegex = /\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^/gy;
 							const subRegex   = /\^\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^\^/gy;
-							
+
 							while (startIndex >= 0) {
 								superRegex.lastIndex = subRegex.lastIndex = startIndex;
 								let isSuper = false;
-								let match = subRegex.exec(line) || superRegex.exec(line);
-								if (match) {
+								const match = subRegex.exec(line) || superRegex.exec(line);
+								if(match) {
 									isSuper = !subRegex.lastIndex;
 									codeMirror.markText({ line: lineNumber, ch: match.index }, { line: lineNumber, ch: match.index + match[0].length }, { className: isSuper ? 'superscript' : 'subscript' });
 								}
@@ -262,18 +287,18 @@ const Editor = createClass({
 
 							while (startIndex >= 0) {
 								emojiRegex.lastIndex = startIndex;
-								let match = emojiRegex.exec(line);
-								if (match) {
+								const match = emojiRegex.exec(line);
+								if(match) {
 									let tokens = Markdown.marked.lexer(match[0]);
-									tokens = tokens[0].tokens.filter(t => t.type == 'emoji')
-									if (!tokens.length)
+									tokens = tokens[0].tokens.filter((t)=>t.type == 'emoji');
+									if(!tokens.length)
 										return;
 
-									let startPos = { line: lineNumber, ch: match.index };
-									let endPos   = { line: lineNumber, ch: match.index + match[0].length };
+									const startPos = { line: lineNumber, ch: match.index };
+									const endPos   = { line: lineNumber, ch: match.index + match[0].length };
 
 									// Iterate over conflicting marks and clear them
-									var marks = codeMirror.findMarks(startPos, endPos);
+									const marks = codeMirror.findMarks(startPos, endPos);
 									marks.forEach(function(marker) {
 										if(!marker.__isFold) marker.clear();
 									});
@@ -288,75 +313,93 @@ const Editor = createClass({
 		}
 	},
 
-	brewJump : function(targetPage=this.getCurrentPage()){
-		if(!window) return;
-		// console.log(`Scroll to: p${targetPage}`);
+	brewJump : function(targetPage=this.props.currentEditorCursorPageNum, smooth=true){
+		if(!window || isJumping)
+			return;
+
+		// Get current brewRenderer scroll position and calculate target position
 		const brewRenderer = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer')[0];
 		const currentPos = brewRenderer.scrollTop;
 		const targetPos = window.frames['BrewRenderer'].contentDocument.getElementById(`p${targetPage}`).getBoundingClientRect().top;
-		const interimPos = targetPos >= 0 ? -30 : 30;
 
-		const bounceDelay = 100;
-		const scrollDelay = 500;
-
-		if(!this.throttleBrewMove) {
-			this.throttleBrewMove = _.throttle((currentPos, interimPos, targetPos)=>{
-				brewRenderer.scrollTo({ top: currentPos + interimPos, behavior: 'smooth' });
-				setTimeout(()=>{
-					brewRenderer.scrollTo({ top: currentPos + targetPos, behavior: 'smooth', block: 'start' });
-				}, bounceDelay);
-			}, scrollDelay, { leading: true, trailing: false });
+		const checkIfScrollComplete = ()=>{
+			let scrollingTimeout;
+			clearTimeout(scrollingTimeout); // Reset the timer every time a scroll event occurs
+			scrollingTimeout = setTimeout(()=>{
+				isJumping = false;
+				brewRenderer.removeEventListener('scroll', checkIfScrollComplete);
+			}, 150);	// If 150 ms pass without a brewRenderer scroll event, assume scrolling is done
 		};
-		this.throttleBrewMove(currentPos, interimPos, targetPos);
 
-		// const hashPage = (page != 1) ? `p${page}` : '';
-		// window.location.hash = hashPage;
+		isJumping = true;
+		checkIfScrollComplete();
+		brewRenderer.addEventListener('scroll', checkIfScrollComplete);
+
+		if(smooth) {
+			const bouncePos   = targetPos >= 0 ? -30 : 30; //Do a little bounce before scrolling
+			const bounceDelay = 100;
+			const scrollDelay = 500;
+
+			if(!this.throttleBrewMove) {
+				this.throttleBrewMove = _.throttle((currentPos, bouncePos, targetPos)=>{
+					brewRenderer.scrollTo({ top: currentPos + bouncePos, behavior: 'smooth' });
+					setTimeout(()=>{
+						brewRenderer.scrollTo({ top: currentPos + targetPos, behavior: 'smooth', block: 'start' });
+					}, bounceDelay);
+				}, scrollDelay, { leading: true, trailing: false });
+			};
+			this.throttleBrewMove(currentPos, bouncePos, targetPos);
+		} else {
+			brewRenderer.scrollTo({ top: currentPos + targetPos, behavior: 'instant', block: 'start' });
+		}
 	},
 
-	sourceJump : function(targetLine=null){
-		if(this.isText()) {
-			if(targetLine == null) {
-				targetLine = 0;
+	sourceJump : function(targetPage=this.props.currentBrewRendererPageNum, smooth=true){
+		if(!this.isText || isJumping)
+			return;
 
-				const pageCollection = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('page');
-				const brewRendererHeight = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer').item(0).getBoundingClientRect().height;
+		const textSplit  = this.props.renderer == 'V3' ? /^\\page$/gm : /\\page/;
+		const textString = this.props.brew.text.split(textSplit).slice(0, targetPage-1).join(textSplit);
+		const targetLine = textString.match('\n') ? textString.split('\n').length - 1 : -1;
 
-				let currentPage = 1;
-				for (const page of pageCollection) {
-					if(page.getBoundingClientRect().bottom > (brewRendererHeight / 2)) {
-						currentPage = parseInt(page.id.slice(1)) || 1;
-						break;
-					}
+		let currentY = this.codeEditor.current.codeMirror.getScrollInfo().top;
+		let targetY  = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true);
+
+		const checkIfScrollComplete = ()=>{
+			let scrollingTimeout;
+			clearTimeout(scrollingTimeout); // Reset the timer every time a scroll event occurs
+			scrollingTimeout = setTimeout(()=>{
+				isJumping = false;
+				this.codeEditor.current.codeMirror.off('scroll', checkIfScrollComplete);
+			}, 150); // If 150 ms pass without a scroll event, assume scrolling is done
+		};
+
+		isJumping = true;
+		checkIfScrollComplete();
+		this.codeEditor.current.codeMirror.on('scroll', checkIfScrollComplete);
+
+		if(smooth) {
+			//Scroll 1/10 of the way every 10ms until 1px off.
+			const incrementalScroll = setInterval(()=>{
+				currentY += (targetY - currentY) / 10;
+				this.codeEditor.current.codeMirror.scrollTo(null, currentY);
+
+				// Update target: target height is not accurate until within +-10 lines of the visible window
+				if(Math.abs(targetY - currentY > 100))
+					targetY = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true);
+
+				// End when close enough
+				if(Math.abs(targetY - currentY) < 1) {
+					this.codeEditor.current.codeMirror.scrollTo(null, targetY);  // Scroll any remaining difference
+					this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 });
+					this.codeEditor.current.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
+					clearInterval(incrementalScroll);
 				}
-
-				const textSplit = this.props.renderer == 'V3' ? /^\\page$/gm : /\\page/;
-				const textString = this.props.brew.text.split(textSplit).slice(0, currentPage-1).join(textSplit);
-				const textPosition = textString.length;
-				const lineCount = textString.match('\n') ? textString.slice(0, textPosition).split('\n').length : 0;
-
-				targetLine = lineCount - 1; //Scroll to `\page`, which is one line back.
-
-				let currentY = this.codeEditor.current.codeMirror.getScrollInfo().top;
-				let targetY  = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true);
-
-				//Scroll 1/10 of the way every 10ms until 1px off.
-				const incrementalScroll = setInterval(()=>{
-					currentY += (targetY - currentY) / 10;
-					this.codeEditor.current.codeMirror.scrollTo(null, currentY);
-
-					// Update target: target height is not accurate until within +-10 lines of the visible window
-					if(Math.abs(targetY - currentY > 100))
-						targetY = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true);
-
-					// End when close enough
-					if(Math.abs(targetY - currentY) < 1) {
-						this.codeEditor.current.codeMirror.scrollTo(null, targetY);  // Scroll any remaining difference
-						this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 });
-						this.codeEditor.current.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
-						clearInterval(incrementalScroll);
-					}
-				}, 10);
-			}
+			}, 10);
+		} else {
+			this.codeEditor.current.codeMirror.scrollTo(null, targetY);  // Scroll any remaining difference
+			this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 });
+			this.codeEditor.current.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
 		}
 	},
 
@@ -457,7 +500,9 @@ const Editor = createClass({
 					currentEditorTheme={this.state.editorTheme}
 					updateEditorTheme={this.updateEditorTheme}
 					snippetBundle={this.props.snippetBundle}
-					cursorPos={this.codeEditor.current?.getCursorPosition() || {}} />
+					cursorPos={this.codeEditor.current?.getCursorPosition() || {}}
+					updateBrew={this.props.updateBrew}
+				/>
 
 				{this.renderEditor()}
 			</div>

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -304,17 +304,14 @@ const MetadataEditor = createClass({
 						onChange={(e)=>this.handleRenderer('V3', e)} />
 					V3
 				</label>
-
-				<a href='/legacy' target='_blank' rel='noopener noreferrer'>
-					Click here to see the demo page for the old Legacy renderer!
-				</a>
+				<small><a href='/legacy' target='_blank' rel='noopener noreferrer'>Click here to see the demo page for the old Legacy renderer!</a></small>
 			</div>
 		</div>;
 	},
 
 	render : function(){
 		return <div className='metadataEditor'>
-			<h1 className='sectionHead'>Brew</h1>
+			<h1>Properties Editor</h1>
 
 			<div className='field title'>
 				<label>title</label>
@@ -362,9 +359,7 @@ const MetadataEditor = createClass({
 
 			{this.renderRenderOptions()}
 
-			<hr/>
-
-			<h1 className='sectionHead'>Authors</h1>
+			<h2>Authors</h2>
 
 			{this.renderAuthors()}
 
@@ -375,15 +370,13 @@ const MetadataEditor = createClass({
 				notes={['Invited author usernames are case sensitive.', 'After adding an invited author, send them the edit link. There, they can choose to accept or decline the invitation.']}
 				onChange={(e)=>this.handleFieldChange('invitedAuthors', e)}/>
 
-			<hr/>
-
-			<h1 className='sectionHead'>Privacy</h1>
+			<h2>Privacy</h2>
 
 			<div className='field publish'>
 				<label>publish</label>
 				<div className='value'>
 					{this.renderPublish()}
-					<small>Published homebrews will be publicly viewable and searchable (eventually...)</small>
+					<small>Published brews are searchable in <a href='/vault'>the Vault</a> and visible on your user page.  Unpublished brews are not indexed in the Vault or visible on your user page, but can still be shared and indexed by search engines.  You can unpublish a brew any time.</small>
 				</div>
 			</div>
 

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -1,5 +1,6 @@
 @import 'naturalcrit/styles/colors.less';
 
+
 .metadataEditor {
 	position         : absolute;
 	z-index          : 5;
@@ -9,12 +10,19 @@
 	padding          : 25px;
 	overflow-y       : auto;
 	background-color : #999999;
+	font-size		 : 13px;
 
-	.sectionHead {
+	h1 {
+		margin: 0 0 40px;
+		font-weight: bold;
+		text-transform: uppercase;
+	}
+	
+	h2 {
 		margin      : 20px 0;
-		font-weight : 1000;
-
-		&:first-of-type { margin-top : 0; }
+		font-weight : bold;
+		border-bottom: 2px solid gray;
+		color: #555;
 	}
 
 	& > div { margin-bottom : 10px; }
@@ -43,15 +51,21 @@
 		min-width     : 200px;
 		& > label {
 			width          : 80px;
-			font-size      : 11px;
 			font-weight    : 800;
 			line-height    : 1.8em;
 			text-transform : uppercase;
+			font-size: .9em;
 		}
 		& > .value {
 			flex           : 1 1 auto;
 			width          : 50px;
 			&:invalid { background : #FFB9B9; }
+			small {
+				display     : block;
+				font-size   : 0.9em;
+				font-style  : italic;
+				line-height : 1.4em;
+			}
 		}
 		input[type='text'], textarea {
 			border : 1px solid gray;
@@ -78,7 +92,6 @@
 			textarea.value {
 				height      : auto;
 				font-family : 'Open Sans', sans-serif;
-				font-size   : 0.8em;
 				resize      : none;
 			}
 		}
@@ -87,12 +100,6 @@
 			z-index   : 200;
 			max-width : 150px;
 		}
-		small {
-			display     : inline-block;
-			font-size   : 0.6em;
-			font-style  : italic;
-			line-height : 1.4em;
-		}
 	}
 
 
@@ -113,18 +120,13 @@
 			display        : inline-flex;
 			align-items    : center;
 			margin-right   : 15px;
-			font-size      : 0.7em;
+			font-size      : 0.9em;
 			font-weight    : 800;
 			white-space    : nowrap;
 			vertical-align : middle;
 			cursor         : pointer;
 			user-select    : none;
 		}
-		a {
-			display     : inline-flex;
-			font-size   : 0.7em;
-			font-weight : 800;
-		}
 		input {
 			margin         : 3px;
 			vertical-align : middle;
@@ -149,12 +151,10 @@
 		}
 	}
 	.authors.field .value {
-		font-size      : 0.8em;
 		line-height    : 1.5em;
 	}
 
 	.themes.field {
-		font-size : 13.33px;
 		.navDropdownContainer {
 			position         : relative;
 			z-index          : 100;
@@ -165,9 +165,9 @@
 				background-color : darkgray;
 			}
 			& > div:first-child {
-				padding           : 6px 3px;
+				padding           : 3px 3px;
 				background-color  : inherit;
-				border            : 2px solid rgb(118,118,118);
+				border            : 1px solid gray;
 				i { float	: right; }
 				&:hover {
 					color            : white;
@@ -240,6 +240,7 @@
 			}
 		}
 	}
+
 	.field .list {
 		display   : flex;
 		flex      : 1 0;
@@ -258,15 +259,15 @@
 			color      : white;
 			text-align : center;
 			cursor     : pointer;
-
+	
 			i {
 				position  : relative;
 				top       : 50%;
 				transform : translateY(-50%);
 			}
-
+	
 			&:not(:last-child) { border-right : 1px solid black; }
-
+	
 			&:last-child { border-radius : 0 0.5em 0.5em 0; }
 		}
 
@@ -277,8 +278,7 @@
 			background-color : #DDDDDD;
 			border-radius    : 0.5em;
 
-			.icon {
-				#groupedIcon; }
+			.icon { #groupedIcon; }
 		}
 
 		.input-group {
@@ -294,17 +294,30 @@
 				height    : 100%;
 			}
 
-			.invalid:focus { background-color : pink; }
+			.input-group {
+				height : ~'calc(.9em + 4px + .6em)';
 
-			.icon {
-				#groupedIcon;
-				top       : -0.54em;
-				right     : 1px;
-				height    : 97%;
-				font-size : 0.8em;
+				input { border-radius : 0.5em 0 0 0.5em; }
 
-				i { font-size : 1.125em; }
+				input:last-child { border-radius : 0.5em; }
+
+				.value {
+					width     : 7.5vw;
+					min-width : 75px;
+					height    : 100%;
+				}
+
+				.invalid:focus { background-color : pink; }
+
+				.icon {
+					#groupedIcon;
+					top       : -0.54em;
+					right     : 1px;
+					height    : 97%;
+
+					i { font-size : 1.125em; }
+				}
 			}
 		}
 	}
-}
+}

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -1,10 +1,12 @@
-/*eslint max-lines: ["warn", {"max": 250, "skipBlankLines": true, "skipComments": true}]*/
+/*eslint max-lines: ["warn", {"max": 350, "skipBlankLines": true, "skipComments": true}]*/
 require('./snippetbar.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
 const cx    = require('classnames');
 
+import { loadHistory } from '../../utils/versionHistory.js';
+
 //Import all themes
 const ThemeSnippets = {};
 ThemeSnippets['Legacy_5ePHB'] = require('themes/Legacy/5ePHB/snippets.js');
@@ -38,7 +40,8 @@ const Snippetbar = createClass({
 			unfoldCode        : ()=>{},
 			updateEditorTheme : ()=>{},
 			cursorPos         : {},
-			snippetBundle     : []
+			snippetBundle     : [],
+			updateBrew        : ()=>{}
 		};
 	},
 
@@ -46,31 +49,54 @@ const Snippetbar = createClass({
 		return {
 			renderer      : this.props.renderer,
 			themeSelector : false,
-			snippets      : []
+			snippets      : [],
+			showHistory   : false,
+			historyExists : false,
+			historyItems  : []
 		};
 	},
 
-	componentDidMount : async function() {
+	componentDidMount : async function(prevState) {
 		const snippets = this.compileSnippets();
 		this.setState({
 			snippets : snippets
 		});
 	},
 
-	componentDidUpdate : async function(prevProps) {
+	componentDidUpdate : async function(prevProps, prevState) {
 		if(prevProps.renderer != this.props.renderer || prevProps.theme != this.props.theme || prevProps.snippetBundle != this.props.snippetBundle) {
-			const snippets = this.compileSnippets();
 			this.setState({
-				snippets : snippets
+				snippets : this.compileSnippets()
+			});
+		};
+
+		// Update history list if it has changed
+		const checkHistoryItems = await loadHistory(this.props.brew);
+
+		// If all items have the noData property, there is no saved data
+		const checkHistoryExists = !checkHistoryItems.every((historyItem)=>{
+			return historyItem?.noData;
+		});
+		if(prevState.historyExists != checkHistoryExists){
+			this.setState({
+				historyExists : checkHistoryExists
+			});
+		}
+
+		// If any history items have changed, update the list
+		if(checkHistoryExists && checkHistoryItems.some((historyItem, index)=>{
+			return index >= prevState.historyItems.length || !_.isEqual(historyItem, prevState.historyItems[index]);
+		})){
+			this.setState({
+				historyItems : checkHistoryItems
 			});
 		}
 	},
 
-
 	mergeCustomizer : function(oldValue, newValue, key) {
 		if(key == 'snippets') {
 			const result = _.reverse(_.unionBy(_.reverse(newValue), _.reverse(oldValue), 'name')); // Join snippets together, with preference for the child theme over the parent theme
-			return _.filter(result, 'gen'); //Only keep snippets with a 'gen' property.
+			return result.filter((snip)=>snip.gen || snip.subsnippets);
 		}
 	},
 
@@ -138,6 +164,42 @@ const Snippetbar = createClass({
 		});
 	},
 
+	replaceContent : function(item){
+		return this.props.updateBrew(item);
+	},
+
+	toggleHistoryMenu : function(){
+		this.setState({
+			showHistory : !this.state.showHistory
+		});
+	},
+
+	renderHistoryItems : function() {
+		if(!this.state.historyExists) return;
+
+		return <div className='dropdown'>
+			{_.map(this.state.historyItems, (item, index)=>{
+				if(item.noData || !item.savedAt) return;
+
+				const saveTime = new Date(item.savedAt);
+				const diffMs = new Date() - saveTime;
+				const diffSecs = Math.floor(diffMs / 1000);
+
+				let diffString = `about ${diffSecs} seconds ago`;
+
+				if(diffSecs > 60) diffString = `about ${Math.floor(diffSecs / 60)} minutes ago`;
+				if(diffSecs > (60 * 60)) diffString = `about ${Math.floor(diffSecs / (60 * 60))} hours ago`;
+				if(diffSecs > (24 * 60 * 60)) diffString = `about ${Math.floor(diffSecs / (24 * 60 * 60))} days ago`;
+				if(diffSecs > (7 * 24 * 60 * 60)) diffString = `about ${Math.floor(diffSecs / (7 * 24 * 60 * 60))} weeks ago`;
+
+				return <div className='snippet' key={index} onClick={()=>{this.replaceContent(item);}} >
+					<i className={`fas fa-${index+1}`} />
+					<span className='name' title={saveTime.toISOString()}>v{item.version} : {diffString}</span>
+				</div>;
+			})}
+		</div>;
+	},
+
 	renderEditorButtons : function(){
 		if(!this.props.showEditButtons) return;
 
@@ -158,6 +220,11 @@ const Snippetbar = createClass({
 		}
 
 		return <div className='editors'>
+			<div className={`editorTool snippetGroup history ${this.state.historyExists ? 'active' : ''}`}
+				onClick={this.toggleHistoryMenu} >
+				<i className='fas fa-clock-rotate-left' />
+				{ this.state.showHistory && this.renderHistoryItems() }
+			</div>
 			<div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`}
 				onClick={this.props.undo} >
 				<i className='fas fa-undo' />

client/homebrew/editor/snippetbar/snippetbar.less

@@ -53,6 +53,21 @@
 				font-size : 0.75em;
 				color     : inherit;
 			}
+			&.history {
+				.tooltipLeft('History');
+				font-size : 0.75em;
+				color     : grey;
+				position  : relative;
+				&.active {
+					color : inherit;
+				}
+				&>.dropdown{
+					right         : -1px;
+					&>.snippet{
+						padding-right : 10px;
+					}
+				}
+			}
 			&.editorTheme {
 				.tooltipLeft('Editor Themes');
 				font-size : 0.75em;

client/homebrew/editor/stringArrayEditor/stringArrayEditor.jsx

@@ -128,7 +128,7 @@ const StringArrayEditor = createClass({
 
 		return <div className='field'>
 			<label>{this.props.label}</label>
-			<div style={{ flex: '1 0' }}>
+			<div style={{ flex: '1 0' }} className='value'>
 				<div className='list'>
 					{valueElements}
 					<div className='input-group'>

client/homebrew/homebrew.jsx

@@ -10,6 +10,7 @@ const UserPage = require('./pages/userPage/userPage.jsx');
 const SharePage = require('./pages/sharePage/sharePage.jsx');
 const NewPage = require('./pages/newPage/newPage.jsx');
 const ErrorPage = require('./pages/errorPage/errorPage.jsx');
+const VaultPage = require('./pages/vaultPage/vaultPage.jsx');
 const AccountPage = require('./pages/accountPage/accountPage.jsx');
 
 const WithRoute = (props)=>{
@@ -71,6 +72,7 @@ const Homebrew = createClass({
 						<Route path='/new/:id' element={<WithRoute el={NewPage} brew={this.props.brew} userThemes={this.props.userThemes}/>} />
 						<Route path='/new' element={<WithRoute el={NewPage} userThemes={this.props.userThemes}/> } />
 						<Route path='/user/:username' element={<WithRoute el={UserPage} brews={this.props.brews} />} />
+						<Route path='/vault' element={<WithRoute el={VaultPage}/>}/>
 						<Route path='/changelog' element={<WithRoute el={SharePage} brew={this.props.brew} disableMeta={true} />} />
 						<Route path='/faq' element={<WithRoute el={SharePage} brew={this.props.brew} disableMeta={true} />} />
 						<Route path='/migrate' element={<WithRoute el={SharePage} brew={this.props.brew} disableMeta={true} />} />

client/homebrew/navbar/editTitle.navitem.jsx

@@ -1,34 +0,0 @@
-const React = require('react');
-const createClass = require('create-react-class');
-const cx = require('classnames');
-const Nav = require('naturalcrit/nav/nav.jsx');
-
-const MAX_TITLE_LENGTH = 50;
-
-
-const EditTitle = createClass({
-	displayName     : 'EditTitleNavItem',
-	getDefaultProps : function() {
-		return {
-			title    : '',
-			onChange : function(){}
-		};
-	},
-
-	handleChange : function(e){
-		if(e.target.value.length > MAX_TITLE_LENGTH) return;
-		this.props.onChange(e.target.value);
-	},
-	render : function(){
-		return <Nav.item className='editTitle'>
-			<input placeholder='Brew Title' type='text' value={this.props.title} onChange={this.handleChange} />
-
-			<div className={cx('charCount', { 'max': this.props.title.length >= MAX_TITLE_LENGTH })}>
-				{this.props.title.length}/{MAX_TITLE_LENGTH}
-			</div>
-		</Nav.item>;
-	},
-
-});
-
-module.exports = EditTitle;

client/homebrew/navbar/error-navitem.jsx

@@ -111,7 +111,7 @@ const ErrorNavItem = createClass({
 					Looks like there was a problem retreiving
 					the theme, or a theme that it inherits,
 					for this brew. Verify that brew <a className='lowercase' target='_blank' rel='noopener noreferrer' href={`/share/${response.body.brewId}`}>
-					{response.body.brewId}</a> still exists!
+						{response.body.brewId}</a> still exists!
 				</div>
 			</Nav.item>;
 		}

client/homebrew/navbar/navbar.less

@@ -35,6 +35,11 @@
 		display     : flex;
 		align-items : center;
 		&:last-child .navItem { border-left : 1px solid #666666; }
+
+		&:has(.brewTitle) {
+			flex-grow : 1;
+			min-width : 300px; 
+		}
 	}
 	// "NaturalCrit" logo
 	.navLogo {
@@ -69,6 +74,10 @@
 	.navItem {
 		#backgroundColorsHover;
 		.animate(background-color);
+		display          : flex;
+		align-items      : center;
+		justify-content  : center;
+		height           : 100%;
 		padding          : 8px 12px;
 		font-size        : 10px;
 		font-weight      : 800;
@@ -94,39 +103,20 @@
 				animation-duration : 2s;
 			}
 		}
-		&.editTitle {  // this is not needed at all currently - you used to be able to edit the title via the navbar.
-			padding : 2px 12px;
-			input {
-				width            : 250px;
-				padding          : 2px;
-				margin           : 0;
-				font-family      : 'Open Sans', sans-serif;
-				font-size        : 12px;
-				font-weight      : 800;
-				color            : white;
-				text-align       : center;
-				background-color : transparent;
-				border           : 1px solid @blue;
-				outline          : none;
-			}
-			.charCount {
-				display        : inline-block;
-				margin-left    : 8px;
-				color          : #666666;
-				text-align     : right;
-				vertical-align : bottom;
-				&.max { color : @red; }
-			}
-		}
 		&.brewTitle {
-			flex-grow        : 1;
+			display          : block;
+			width            : 100%;
+			overflow         : hidden;
 			font-size        : 12px;
 			font-weight      : 800;
 			color            : white;
 			text-align       : center;
-			text-transform   : initial;
-			background-color : transparent;
+			text-overflow    : ellipsis;
+			text-transform   : initial;	
+			white-space      : nowrap;
+			background-color : transparent;		
 		}
+
 		// "The Homebrewery" logo
 		&.homebrewLogo {
 			.animate(color);
@@ -240,23 +230,25 @@
 	}
 	.navDropdownContainer {
 		position : relative;
+		height   : 100%;
+
 		.navDropdown {
-			position: absolute;
-			top: 28px;
-			right: 0px;
-			z-index: 10000;
-			width: max-content;
-			min-width:100%;
-			max-height: calc(100vh - 28px);
-			overflow: hidden auto;
-			display: flex;
-			flex-direction: column;
-			align-items: flex-end;
+			position       : absolute;
+			//top: 28px;
+			right          : 0px;
+			z-index        : 10000;
+			display        : flex;
+			flex-direction : column;
+			align-items    : flex-end;
+			width          : max-content;
+			min-width      : 100%;
+			max-height     : calc(100vh - 28px);
+			overflow       : hidden auto;
 			.navItem {
 				position           : relative;
 				display            : flex;
-				justify-content    : space-between;
 				align-items        : center;
+				justify-content    : space-between;
 				width              : 100%;
 				border             : 1px solid #888888;
 				border-bottom      : 0;
@@ -278,10 +270,10 @@
 				overflow         : hidden auto;
 				color            : white;
 				text-decoration  : none;
-				background-color : #333333;
-				border-top       : 1px solid #888888;
 				scrollbar-color  : #666666 #333333;
 				scrollbar-width  : thin;
+				background-color : #333333;
+				border-top       : 1px solid #888888;
 				.clear {
 					position         : absolute;
 					top              : 50%;

client/homebrew/navbar/recent.navitem.jsx

@@ -36,7 +36,7 @@ const RecentItems = createClass({
 		//== Add current brew to appropriate recent items list (depending on storageKey) ==//
 		if(this.props.storageKey == 'edit'){
 			let editId = this.props.brew.editId;
-			if(this.props.brew.googleId){
+			if(this.props.brew.googleId && !this.props.brew.stubbed){
 				editId = `${this.props.brew.googleId}${this.props.brew.editId}`;
 			}
 			edited = _.filter(edited, (brew)=>{
@@ -51,7 +51,7 @@ const RecentItems = createClass({
 		}
 		if(this.props.storageKey == 'view'){
 			let shareId = this.props.brew.shareId;
-			if(this.props.brew.googleId){
+			if(this.props.brew.googleId && !this.props.brew.stubbed){
 				shareId = `${this.props.brew.googleId}${this.props.brew.shareId}`;
 			}
 			viewed = _.filter(viewed, (brew)=>{
@@ -83,7 +83,7 @@ const RecentItems = createClass({
 	 		let edited = JSON.parse(localStorage.getItem(EDIT_KEY) || '[]');
 			if(this.props.storageKey == 'edit') {
 				let prevEditId = prevProps.brew.editId;
-				if(prevProps.brew.googleId){
+				if(prevProps.brew.googleId && !this.props.brew.stubbed){
 					prevEditId = `${prevProps.brew.googleId}${prevProps.brew.editId}`;
 				}
 
@@ -91,7 +91,7 @@ const RecentItems = createClass({
 					return brew.id !== prevEditId;
 				});
 				let editId = this.props.brew.editId;
-				if(this.props.brew.googleId){
+				if(this.props.brew.googleId && !this.props.brew.stubbed){
 					editId = `${this.props.brew.googleId}${this.props.brew.editId}`;
 				}
 				edited.unshift({

client/homebrew/navbar/reddit.navitem.jsx

@@ -1,44 +0,0 @@
-const React = require('react');
-const createClass = require('create-react-class');
-const Nav = require('naturalcrit/nav/nav.jsx');
-
-const MAIN_URL = 'https://www.reddit.com/r/UnearthedArcana/submit?selftext=true';
-
-
-const RedditShare = createClass({
-	displayName     : 'RedditShareNavItem',
-	getDefaultProps : function() {
-		return {
-			brew : {
-				title    : '',
-				sharedId : '',
-				text     : ''
-			}
-		};
-	},
-
-	getText : function(){
-
-	},
-
-
-	handleClick : function(){
-		const url = [
-			MAIN_URL,
-			`title=${encodeURIComponent(this.props.brew.title ? this.props.brew.title : 'Check out my brew!')}`,
-			`text=${encodeURIComponent(this.props.brew.text)}`
-		].join('&');
-
-		window.open(url, '_blank');
-	},
-
-
-	render : function(){
-		return <Nav.item icon='fa-reddit-alien' color='red' onClick={this.handleClick}>
-			share on reddit
-		</Nav.item>;
-	},
-
-});
-
-module.exports = RedditShare;

client/homebrew/navbar/vault.navitem.jsx

@@ -0,0 +1,17 @@
+const React = require('react');
+
+const Nav = require('naturalcrit/nav/nav.jsx');
+
+module.exports = function (props) {
+	return (
+		<Nav.item
+			color='purple'
+			icon='fas fa-dungeon'
+			href='/vault'
+			newTab={false}
+			rel='noopener noreferrer'
+		>
+			Vault
+		</Nav.item>
+	);
+};

client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx

@@ -19,7 +19,8 @@ const BrewItem = createClass({
 				stubbed     : true
 			},
 			updateListFilter : ()=>{},
-			reportError      : ()=>{}
+			reportError      : ()=>{},
+			renderStorage    : true
 		};
 	},
 
@@ -95,6 +96,7 @@ const BrewItem = createClass({
 	},
 
 	renderStorageIcon : function(){
+		if(!this.props.renderStorage) return;
 		if(this.props.brew.googleId) {
 			return <span title={this.props.brew.webViewLink ? 'Your Google Drive Storage': 'Another User\'s Google Drive Storage'}>
 				<a href={this.props.brew.webViewLink} target='_blank'>
@@ -142,10 +144,14 @@ const BrewItem = createClass({
 				}
 				<span title={`Authors:\n${brew.authors?.join('\n')}`}>
 					<i className='fas fa-user'/> {brew.authors?.map((author, index)=>(
-  					<>
-    					<a key={index} href={`/user/${author}`}>{author}</a>
-    					{index < brew.authors.length - 1 && ', '}
-  					</>))}
+						<React.Fragment key={index}>
+							{author === 'hidden'
+								? <span title="Username contained an email address; hidden to protect user's privacy">{author}</span>
+								: <a href={`/user/${author}`}>{author}</a>
+							}
+							{index < brew.authors.length - 1 && ', '}
+						</React.Fragment>
+					))}
 				</span>
 				<br />
 				<span title={`Last viewed: ${moment(brew.lastViewed).local().format(dateFormatString)}`}>

client/homebrew/pages/editPage/editPage.jsx

@@ -1,8 +1,9 @@
 /* eslint-disable max-lines */
 require('./editPage.less');
 const React = require('react');
-const createClass = require('create-react-class');
 const _ = require('lodash');
+const createClass = require('create-react-class');
+
 const request = require('../../utils/request-middleware.js');
 const { Meta } = require('vitreum/headtags');
 
@@ -27,9 +28,11 @@ const Markdown = require('naturalcrit/markdown.js');
 const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
 const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js');
 
+import { updateHistory, versionHistoryGarbageCollection } from '../../utils/versionHistory.js';
+
 const googleDriveIcon = require('../../googleDrive.svg');
 
-const SAVE_TIMEOUT = 3000;
+const SAVE_TIMEOUT = 10000;
 
 const EditPage = createClass({
 	displayName     : 'EditPage',
@@ -41,22 +44,24 @@ const EditPage = createClass({
 
 	getInitialState : function() {
 		return {
-			brew                   : this.props.brew,
-			isSaving               : false,
-			isPending              : false,
-			alertTrashedGoogleBrew : this.props.brew.trashed,
-			alertLoginToTransfer   : false,
-			saveGoogle             : this.props.brew.googleId ? true : false,
-			confirmGoogleTransfer  : false,
-			error                  : null,
-			htmlErrors             : Markdown.validate(this.props.brew.text),
-			url                    : '',
-			autoSave               : true,
-			autoSaveWarning        : false,
-			unsavedTime            : new Date(),
-			currentEditorPage      : 0,
-			displayLockMessage     : this.props.brew.lock || false,
-			themeBundle            : {}
+			brew                       : this.props.brew,
+			isSaving                   : false,
+			isPending                  : false,
+			alertTrashedGoogleBrew     : this.props.brew.trashed,
+			alertLoginToTransfer       : false,
+			saveGoogle                 : this.props.brew.googleId ? true : false,
+			confirmGoogleTransfer      : false,
+			error                      : null,
+			htmlErrors                 : Markdown.validate(this.props.brew.text),
+			url                        : '',
+			autoSave                   : true,
+			autoSaveWarning            : false,
+			unsavedTime                : new Date(),
+			currentEditorViewPageNum   : 1,
+			currentEditorCursorPageNum : 1,
+			currentBrewRendererPageNum : 1,
+			displayLockMessage         : this.props.brew.lock || false,
+			themeBundle                : {}
 		};
 	},
 
@@ -113,16 +118,27 @@ const EditPage = createClass({
 		this.editor.current.update();
 	},
 
+	handleEditorViewPageChange : function(pageNumber){
+		this.setState({ currentEditorViewPageNum: pageNumber });
+	},
+
+	handleEditorCursorPageChange : function(pageNumber){
+		this.setState({ currentEditorCursorPageNum: pageNumber });
+	},
+
+	handleBrewRendererPageChange : function(pageNumber){
+		this.setState({ currentBrewRendererPageNum: pageNumber });
+	},
+
 	handleTextChange : function(text){
 		//If there are errors, run the validator on every change to give quick feedback
 		let htmlErrors = this.state.htmlErrors;
 		if(htmlErrors.length) htmlErrors = Markdown.validate(text);
 
 		this.setState((prevState)=>({
-			brew              : { ...prevState.brew, text: text },
-			isPending         : true,
-			htmlErrors        : htmlErrors,
-			currentEditorPage : this.editor.current.getCurrentPage() - 1 //Offset index since Marked starts pages at 0
+			brew       : { ...prevState.brew, text: text },
+			isPending  : true,
+			htmlErrors : htmlErrors,
 		}), ()=>{if(this.state.autoSave) this.trySave();});
 	},
 
@@ -150,6 +166,16 @@ const EditPage = createClass({
 		return !_.isEqual(this.state.brew, this.savedBrew);
 	},
 
+	updateBrew : function(newData){
+		this.setState((prevState)=>({
+			brew : {
+				...prevState.brew,
+				style : newData.style,
+				text  : newData.text
+			}
+		}));
+	},
+
 	trySave : function(immediate=false){
 		if(!this.debounceSave) this.debounceSave = _.debounce(this.save, SAVE_TIMEOUT);
 		if(this.hasChanges()){
@@ -202,6 +228,9 @@ const EditPage = createClass({
 			htmlErrors : Markdown.validate(prevState.brew.text)
 		}));
 
+		await updateHistory(this.state.brew);
+		await versionHistoryGarbageCollection();
+
 		const transfer = this.state.saveGoogle == _.isNil(this.state.brew.googleId);
 
 		const brew = this.state.brew;
@@ -413,6 +442,12 @@ const EditPage = createClass({
 						renderer={this.state.brew.renderer}
 						userThemes={this.props.userThemes}
 						snippetBundle={this.state.themeBundle.snippets}
+						updateBrew={this.updateBrew}
+						onCursorPageChange={this.handleEditorCursorPageChange}
+						onViewPageChange={this.handleEditorViewPageChange}
+						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
+						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
+						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
 					/>
 					<BrewRenderer
 						text={this.state.brew.text}
@@ -422,7 +457,10 @@ const EditPage = createClass({
 						themeBundle={this.state.themeBundle}
 						errors={this.state.htmlErrors}
 						lang={this.state.brew.lang}
-						currentEditorPage={this.state.currentEditorPage}
+						onPageChange={this.handleBrewRendererPageChange}
+						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
+						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
+						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
 						allowPrint={true}
 					/>
 				</SplitPane>

client/homebrew/pages/errorPage/errors/errorIndex.js

@@ -161,7 +161,7 @@ const errorIndex = (props)=>{
 		Please login or signup at our [login page](https://www.naturalcrit.com/login?redirect=https://homebrewery.naturalcrit.com/account).`,
 
 		// Brew locked by Administrators error
-		'100' : dedent`
+		'51' : dedent`
 		## This brew has been locked.
 		
 		Only an author may request that this lock is removed.
@@ -171,6 +171,16 @@ const errorIndex = (props)=>{
 		**Brew ID:**  ${props.brew.brewId}
 		
 		**Brew Title:** ${props.brew.brewTitle}`,
+
+		// ####### Admin page error ####### 
+		'52': dedent`
+		## Access Denied
+		You need to provide correct administrator credentials to access this page.`,
+
+		'90' : dedent` An unexpected error occurred while looking for these brews.  
+            Try again in a few minutes.`,
+
+		'91' : dedent` An unexpected error occurred while trying to get the total of brews.`,
 	};
 };
 

client/homebrew/pages/homePage/homePage.jsx

@@ -1,7 +1,6 @@
 require('./homePage.less');
 const React = require('react');
 const createClass = require('create-react-class');
-const _ = require('lodash');
 const cx = require('classnames');
 const request = require('../../utils/request-middleware.js');
 const { Meta } = require('vitreum/headtags');
@@ -10,12 +9,12 @@ const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
 const NewBrewItem = require('../../navbar/newbrew.navitem.jsx');
 const HelpNavItem = require('../../navbar/help.navitem.jsx');
+const VaultNavItem = require('../../navbar/vault.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 const AccountNavItem = require('../../navbar/account.navitem.jsx');
 const ErrorNavItem = require('../../navbar/error-navitem.jsx');
 const { fetchThemeBundle } = require('../../../../shared/helpers.js');
 
-
 const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
 const Editor = require('../../editor/editor.jsx');
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
@@ -32,11 +31,13 @@ const HomePage = createClass({
 	},
 	getInitialState : function() {
 		return {
-			brew              : this.props.brew,
-			welcomeText       : this.props.brew.text,
-			error             : undefined,
-			currentEditorPage : 0,
-			themeBundle       : {}
+			brew                       : this.props.brew,
+			welcomeText                : this.props.brew.text,
+			error                      : undefined,
+			currentEditorViewPageNum   : 1,
+			currentEditorCursorPageNum : 1,
+			currentBrewRendererPageNum : 1,
+			themeBundle                : {}
 		};
 	},
 
@@ -61,10 +62,22 @@ const HomePage = createClass({
 	handleSplitMove : function(){
 		this.editor.current.update();
 	},
+
+	handleEditorViewPageChange : function(pageNumber){
+		this.setState({ currentEditorViewPageNum: pageNumber });
+	},
+
+	handleEditorCursorPageChange : function(pageNumber){
+		this.setState({ currentEditorCursorPageNum: pageNumber });
+	},
+
+	handleBrewRendererPageChange : function(pageNumber){
+		this.setState({ currentBrewRendererPageNum: pageNumber });
+	},
+
 	handleTextChange : function(text){
 		this.setState((prevState)=>({
-			brew              : { ...prevState.brew, text: text },
-			currentEditorPage : this.editor.current.getCurrentPage() - 1 //Offset index since Marked starts pages at 0
+			brew : { ...prevState.brew, text: text },
 		}));
 	},
 	renderNavbar : function(){
@@ -76,6 +89,7 @@ const HomePage = createClass({
 				}
 				<NewBrewItem />
 				<HelpNavItem />
+				<VaultNavItem />
 				<RecentNavItem />
 				<AccountNavItem />
 			</Nav.section>
@@ -96,12 +110,20 @@ const HomePage = createClass({
 						renderer={this.state.brew.renderer}
 						showEditButtons={false}
 						snippetBundle={this.state.themeBundle.snippets}
+						onCursorPageChange={this.handleEditorCursorPageChange}
+						onViewPageChange={this.handleEditorViewPageChange}
+						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
+						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
+						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
 					/>
 					<BrewRenderer
 						text={this.state.brew.text}
 						style={this.state.brew.style}
 						renderer={this.state.brew.renderer}
-						currentEditorPage={this.state.currentEditorPage}
+						onPageChange={this.handleBrewRendererPageChange}
+						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
+						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
+						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
 						themeBundle={this.state.themeBundle}
 					/>
 				</SplitPane>

client/homebrew/pages/newPage/newPage.jsx

@@ -39,13 +39,15 @@ const NewPage = createClass({
 		const brew = this.props.brew;
 
 		return {
-			brew              : brew,
-			isSaving          : false,
-			saveGoogle        : (global.account && global.account.googleId ? true : false),
-			error             : null,
-			htmlErrors        : Markdown.validate(brew.text),
-			currentEditorPage : 0,
-			themeBundle       : {}
+			brew                       : brew,
+			isSaving                   : false,
+			saveGoogle                 : (global.account && global.account.googleId ? true : false),
+			error                      : null,
+			htmlErrors                 : Markdown.validate(brew.text),
+			currentEditorViewPageNum   : 1,
+			currentEditorCursorPageNum : 1,
+			currentBrewRendererPageNum : 1,
+			themeBundle                : {}
 		};
 	},
 
@@ -108,15 +110,26 @@ const NewPage = createClass({
 		this.editor.current.update();
 	},
 
+	handleEditorViewPageChange : function(pageNumber){
+		this.setState({ currentEditorViewPageNum: pageNumber });
+	},
+
+	handleEditorCursorPageChange : function(pageNumber){
+		this.setState({ currentEditorCursorPageNum: pageNumber });
+	},
+
+	handleBrewRendererPageChange : function(pageNumber){
+		this.setState({ currentBrewRendererPageNum: pageNumber });
+	},
+
 	handleTextChange : function(text){
 		//If there are errors, run the validator on every change to give quick feedback
 		let htmlErrors = this.state.htmlErrors;
 		if(htmlErrors.length) htmlErrors = Markdown.validate(text);
 
 		this.setState((prevState)=>({
-			brew              : { ...prevState.brew, text: text },
-			htmlErrors        : htmlErrors,
-			currentEditorPage : this.editor.current.getCurrentPage() - 1 //Offset index since Marked starts pages at 0
+			brew       : { ...prevState.brew, text: text },
+			htmlErrors : htmlErrors,
 		}));
 		localStorage.setItem(BREWKEY, text);
 	},
@@ -221,6 +234,11 @@ const NewPage = createClass({
 						renderer={this.state.brew.renderer}
 						userThemes={this.props.userThemes}
 						snippetBundle={this.state.themeBundle.snippets}
+						onCursorPageChange={this.handleEditorCursorPageChange}
+						onViewPageChange={this.handleEditorViewPageChange}
+						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
+						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
+						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
 					/>
 					<BrewRenderer
 						text={this.state.brew.text}
@@ -230,7 +248,10 @@ const NewPage = createClass({
 						themeBundle={this.state.themeBundle}
 						errors={this.state.htmlErrors}
 						lang={this.state.brew.lang}
-						currentEditorPage={this.state.currentEditorPage}
+						onPageChange={this.handleBrewRendererPageChange}
+						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
+						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
+						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
 						allowPrint={true}
 					/>
 				</SplitPane>

client/homebrew/pages/sharePage/sharePage.jsx

@@ -25,7 +25,8 @@ const SharePage = createClass({
 
 	getInitialState : function() {
 		return {
-			themeBundle : {}
+			themeBundle                : {},
+			currentBrewRendererPageNum : 1
 		};
 	},
 
@@ -39,6 +40,10 @@ const SharePage = createClass({
 		document.removeEventListener('keydown', this.handleControlKeys);
 	},
 
+	handleBrewRendererPageChange : function(pageNumber){
+		this.setState({ currentBrewRendererPageNum: pageNumber });
+	},
+
 	handleControlKeys : function(e){
 		if(!(e.ctrlKey || e.metaKey)) return;
 		const P_KEY = 80;
@@ -114,9 +119,12 @@ const SharePage = createClass({
 				<BrewRenderer
 					text={this.props.brew.text}
 					style={this.props.brew.style}
+					lang={this.props.brew.lang}
 					renderer={this.props.brew.renderer}
 					theme={this.props.brew.theme}
 					themeBundle={this.state.themeBundle}
+					onPageChange={this.handleBrewRendererPageChange}
+					currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
 					allowPrint={true}
 				/>
 			</div>

client/homebrew/pages/userPage/userPage.jsx

@@ -12,6 +12,7 @@ const Account = require('../../navbar/account.navitem.jsx');
 const NewBrew = require('../../navbar/newbrew.navitem.jsx');
 const HelpNavItem = require('../../navbar/help.navitem.jsx');
 const ErrorNavItem = require('../../navbar/error-navitem.jsx');
+const VaultNavitem = require('../../navbar/vault.navitem.jsx');
 
 const UserPage = createClass({
 	displayName     : 'UserPage',
@@ -66,6 +67,7 @@ const UserPage = createClass({
 				}
 				<NewBrew />
 				<HelpNavItem />
+				<VaultNavitem/>
 				<RecentNavItem />
 				<Account />
 			</Nav.section>

client/homebrew/pages/vaultPage/vaultPage.jsx

@@ -0,0 +1,432 @@
+/*eslint max-lines: ["warn", {"max": 400, "skipBlankLines": true, "skipComments": true}]*/
+/*eslint max-params:["warn", { max: 10 }], */
+require('./vaultPage.less');
+
+const React = require('react');
+const { useState, useEffect, useRef } = React;
+
+const Nav           = require('naturalcrit/nav/nav.jsx');
+const Navbar        = require('../../navbar/navbar.jsx');
+const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
+const Account       = require('../../navbar/account.navitem.jsx');
+const NewBrew       = require('../../navbar/newbrew.navitem.jsx');
+const HelpNavItem   = require('../../navbar/help.navitem.jsx');
+const BrewItem      = require('../basePages/listPage/brewItem/brewItem.jsx');
+const SplitPane     = require('../../../../shared/naturalcrit/splitPane/splitPane.jsx');
+const ErrorIndex    = require('../errorPage/errors/errorIndex.js');
+
+const request = require('../../utils/request-middleware.js');
+
+const VaultPage = (props)=>{
+	const [pageState, setPageState] = useState(parseInt(props.query.page) || 1);
+
+	const [sortState, setSort] = useState(props.query.sort || 'title');
+	const [dirState, setdir] = useState(props.query.dir || 'asc');
+
+	//Response state
+	const [brewCollection, setBrewCollection] = useState(null);
+	const [totalBrews, setTotalBrews]         = useState(null);
+	const [searching, setSearching]           = useState(false);
+	const [error, setError]                   = useState(null);
+
+	const titleRef        = useRef(null);
+	const authorRef       = useRef(null);
+	const countRef        = useRef(null);
+	const v3Ref           = useRef(null);
+	const legacyRef       = useRef(null);
+	const submitButtonRef = useRef(null);
+
+	useEffect(()=>{
+		disableSubmitIfFormInvalid();
+		loadPage(pageState, true, props.query.sort, props.query.dir);
+	}, []);
+
+	const updateStateWithBrews = (brews, page)=>{
+		setBrewCollection(brews || null);
+		setPageState(parseInt(page) || 1);
+		setSearching(false);
+	};
+
+	const updateUrl = (titleValue, authorValue, countValue, v3Value, legacyValue, page, sort, dir)=>{
+		const url = new URL(window.location.href);
+		const urlParams = new URLSearchParams(url.search);
+
+		urlParams.set('title', titleValue);
+		urlParams.set('author', authorValue);
+		urlParams.set('count', countValue);
+		urlParams.set('v3', v3Value);
+		urlParams.set('legacy', legacyValue);
+		urlParams.set('page', page);
+		urlParams.set('sort', sort);
+		urlParams.set('dir', dir);
+
+		url.search = urlParams.toString();
+		window.history.replaceState(null, '', url.toString());
+	};
+
+	const performSearch = async (title, author, count, v3, legacy, page, sort, dir)=>{
+		updateUrl(title, author, count, v3, legacy, page, sort, dir);
+
+		const response = await request
+			.get(`/api/vault?title=${title}&author=${author}&v3=${v3}&legacy=${legacy}&count=${count}&page=${page}&sort=${sort}&dir=${dir}`)
+			.catch((error)=>{
+				console.log('error at loadPage: ', error);
+				setError(error);
+				updateStateWithBrews([], 1);
+			});
+
+		if(response.ok)
+			updateStateWithBrews(response.body.brews, page);
+	};
+
+	const loadTotal = async (title, author, v3, legacy)=>{
+		setTotalBrews(null);
+
+		const response = await request.get(`/api/vault/total?title=${title}&author=${author}&v3=${v3}&legacy=${legacy}`)
+		.catch((error)=>{
+			console.log('error at loadTotal: ', error);
+			setError(error);
+			updateStateWithBrews([], 1);
+		});
+
+		if(response.ok)
+			setTotalBrews(response.body.totalBrews);
+	};
+
+	const loadPage = async (page, updateTotal, sort, dir)=>{
+		if(!validateForm()) return;
+
+		setSearching(true);
+		setError(null);
+
+		const title  = titleRef.current.value || '';
+		const author = authorRef.current.value || '';
+		const count  = countRef.current.value || 10;
+		const v3     = v3Ref.current.checked != false;
+		const legacy = legacyRef.current.checked != false;
+		const sortOption = sort || 'title';
+		const dirOption = dir || 'asc';
+		const pageProp = page || 1;
+
+		setSort(sortOption);
+		setdir(dirOption);
+
+		performSearch(title, author, count, v3, legacy, pageProp, sortOption, dirOption);
+
+		if(updateTotal)
+			loadTotal(title, author, v3, legacy);
+	};
+
+	const renderNavItems = ()=>(
+		<Navbar>
+			<Nav.section>
+				<Nav.item className='brewTitle'>
+					Vault: Search for brews
+				</Nav.item>
+			</Nav.section>
+			<Nav.section>
+				<NewBrew />
+				<HelpNavItem />
+				<RecentNavItem />
+				<Account />
+			</Nav.section>
+		</Navbar>
+	);
+
+	const validateForm = ()=>{
+		//form validity: title or author must be written, and at least one renderer set
+		const isTitleValid      = titleRef.current.validity.valid && titleRef.current.value;
+		const isAuthorValid     = authorRef.current.validity.valid && authorRef.current.value;
+		const isCheckboxChecked = legacyRef.current.checked || v3Ref.current.checked;
+
+		const isFormValid = (isTitleValid || isAuthorValid) && isCheckboxChecked;
+
+		return isFormValid;
+	};
+
+	const disableSubmitIfFormInvalid = ()=>{
+		submitButtonRef.current.disabled = !validateForm();
+	};
+
+	const renderForm = ()=>(
+		<div className='brewLookup'>
+			<h2 className='formTitle'>Brew Lookup</h2>
+			<div className='formContents'>
+				<label>
+					Title of the brew
+					<input
+						ref={titleRef}
+						type='text'
+						name='title'
+						defaultValue={props.query.title || ''}
+						onKeyUp={disableSubmitIfFormInvalid}
+						pattern='.{3,}'
+						title='At least 3 characters'
+						onKeyDown={(e)=>{
+							if(e.key === 'Enter' && !submitButtonRef.current.disabled)
+								loadPage(1, true);
+						}}
+						placeholder='v3 Reference Document'
+					/>
+				</label>
+
+				<label>
+					Author of the brew
+					<input
+						ref={authorRef}
+						type='text'
+						name='author'
+						pattern='.{1,}'
+						defaultValue={props.query.author || ''}
+						onKeyUp={disableSubmitIfFormInvalid}
+						onKeyDown={(e)=>{
+							if(e.key === 'Enter' && !submitButtonRef.current.disabled)
+								loadPage(1, true);
+						}}
+						placeholder='Username'
+					/>
+				</label>
+
+				<label>
+					Results per page
+					<select ref={countRef} name='count' defaultValue={props.query.count || 20}>
+						<option value='10'>10</option>
+						<option value='20'>20</option>
+						<option value='40'>40</option>
+						<option value='60'>60</option>
+					</select>
+				</label>
+
+				<label>
+					<input
+						className='renderer'
+						ref={v3Ref}
+						type='checkbox'
+						defaultChecked={props.query.v3 !== 'false'}
+						onChange={disableSubmitIfFormInvalid}
+					/>
+					Search for v3 brews
+				</label>
+
+				<label>
+					<input
+						className='renderer'
+						ref={legacyRef}
+						type='checkbox'
+						defaultChecked={props.query.legacy !== 'false'}
+						onChange={disableSubmitIfFormInvalid}
+					/>
+					Search for legacy brews
+				</label>
+
+				<button
+					id='searchButton'
+					ref={submitButtonRef}
+					onClick={()=>{
+						loadPage(1, true);
+					}}
+				>
+					Search
+					<i
+						className={searching ? 'fas fa-spin fa-spinner': 'fas fa-search'}
+					/>
+				</button>
+			</div>
+			<legend>
+				<h3>Tips and tricks</h3>
+				<ul>
+					<li>
+						Only <b>published</b> brews are searchable via this tool
+					</li>
+					<li>
+						Usernames are case-sensitive
+					</li>
+					<li>
+						Use <code>"word"</code> to match an exact string,
+						and <code>-</code> to exclude words (at least one word must not be negated)
+					</li>
+					<li>
+						Some common words like "a", "after", "through", "itself", "here", etc.,
+						are ignored in searches. The full list can be found &nbsp;
+						<a href='https://github.com/mongodb/mongo/blob/0e3b3ca8480ddddf5d0105d11a94bd4698335312/src/mongo/db/fts/stop_words_english.txt'>
+							here
+						</a>
+					</li>
+				</ul>
+				<small>New features will be coming, such as filters and search by tags.</small>
+			</legend>
+		</div>
+	);
+
+	const renderSortOption = (optionTitle, optionValue)=>{
+		const oppositeDir = dirState === 'asc' ? 'desc' : 'asc';
+
+		return (
+			<div className={`sort-option ${sortState === optionValue ? `active` : ''}`}>
+				<button onClick={()=>loadPage(1, false, optionValue, oppositeDir)}>
+					{optionTitle}
+				</button>
+				{sortState === optionValue && (
+					<i className={`sortDir fas ${dirState === 'asc' ? 'fa-sort-up' : 'fa-sort-down'}`} />
+				)}
+			</div>
+		);
+	};
+
+	const renderSortBar = ()=>{
+
+		return (
+			<div className='sort-container'>
+				{renderSortOption('Title', 'title', props.query.dir)}
+				{renderSortOption('Created Date', 'createdAt', props.query.dir)}
+				{renderSortOption('Updated Date', 'updatedAt', props.query.dir)}
+				{renderSortOption('Views', 'views', props.query.dir)}
+			</div>
+		);
+	};
+
+	const renderPaginationControls = ()=>{
+		if(!totalBrews) return null;
+
+		const countInt = parseInt(props.query.count || 20);
+		const totalPages = Math.ceil(totalBrews / countInt);
+
+		let startPage, endPage;
+		if(pageState <= 6) {
+			startPage = 1;
+			endPage = Math.min(totalPages, 10);
+		} else if(pageState + 4 >= totalPages) {
+			startPage = Math.max(1, totalPages - 9);
+			endPage = totalPages;
+		} else {
+			startPage = pageState - 5;
+			endPage = pageState + 4;
+		}
+
+		const pagesAroundCurrent = new Array(endPage - startPage + 1)
+			.fill()
+			.map((_, index)=>(
+				<a
+					key={startPage + index}
+					className={`pageNumber ${pageState === startPage + index ? 'currentPage' : ''}`}
+					onClick={()=>loadPage(startPage + index, false, sortState, dirState)}
+				>
+					{startPage + index}
+				</a>
+			));
+
+		return (
+			<div className='paginationControls'>
+				<button
+					className='previousPage'
+					onClick={()=>loadPage(pageState - 1, false, sortState, dirState)}
+					disabled={pageState === startPage}
+				>
+					<i className='fa-solid fa-chevron-left'></i>
+				</button>
+				<ol className='pages'>
+					{startPage > 1 && (
+						<a
+							className='pageNumber firstPage'
+							onClick={()=>loadPage(1, false, sortState, dirState)}
+						>
+							1 ...
+						</a>
+					)}
+					{pagesAroundCurrent}
+					{endPage < totalPages && (
+						<a
+							className='pageNumber lastPage'
+							onClick={()=>loadPage(totalPages, false, sortState, dirState)}
+						>
+							... {totalPages}
+						</a>
+					)}
+				</ol>
+				<button
+					className='nextPage'
+					onClick={()=>loadPage(pageState + 1, false, sortState, dirState)}
+					disabled={pageState === totalPages}
+				>
+					<i className='fa-solid fa-chevron-right'></i>
+				</button>
+			</div>
+		);
+	};
+
+	const renderFoundBrews = ()=>{
+		if(searching) {
+			return (
+				<div className='foundBrews searching'>
+					<h3 className='searchAnim'>Searching</h3>
+				</div>
+			);
+		}
+
+		if(error) {
+			const errorText = ErrorIndex()[error.HBErrorCode.toString()] || '';
+
+			return (
+				<div className='foundBrews noBrews'>
+					<h3>Error: {errorText}</h3>
+				</div>
+			);
+		}
+
+		if(!brewCollection) {
+			return (
+				<div className='foundBrews noBrews'>
+					<h3>No search yet</h3>
+				</div>
+			);
+		}
+
+		if(brewCollection.length === 0) {
+			return (
+				<div className='foundBrews noBrews'>
+					<h3>No brews found</h3>
+				</div>
+			);
+		}
+
+		return (
+			<div className='foundBrews'>
+				<span className='totalBrews'>
+					{`Brews found: `}
+					<span>{totalBrews}</span>
+				</span>
+				{brewCollection.map((brew, index)=>{
+					return (
+						<BrewItem
+							brew={{ ...brew }}
+							key={index}
+							reportError={props.reportError}
+							renderStorage={false}
+						/>
+					);
+				})}
+				{renderPaginationControls()}
+			</div>
+		);
+	};
+
+	return (
+		<div className='vaultPage'>
+			<link href='/themes/V3/Blank/style.css' rel='stylesheet' />
+			<link href='/themes/V3/5ePHB/style.css' rel='stylesheet' />
+			{renderNavItems()}
+			<div className='content'>
+				<SplitPane showDividerButtons={false}>
+					<div className='form dataGroup'>{renderForm()}</div>
+
+					<div className='resultsContainer dataGroup'>
+						{renderSortBar()}
+						{renderFoundBrews()}
+					</div>
+				</SplitPane>
+			</div>
+		</div>
+	);
+};
+
+module.exports = VaultPage;

client/homebrew/pages/vaultPage/vaultPage.less

@@ -0,0 +1,400 @@
+.vaultPage {
+	height           : 100%;
+	overflow-y       : hidden;
+	background-color : #2C3E50;
+
+	*:not(input) { user-select : none; }
+
+	.content {
+		height     : 100%;
+		background : #2C3E50;
+
+		.dataGroup {
+			width      : 100%;
+			height     : 100%;
+			background : white;
+
+			&.form .brewLookup {
+				position : relative;
+				padding  : 50px clamp(20px, 4vw, 50px);
+
+				small {
+					font-size : 10pt;
+					color     : #555555;
+			
+					a { color : #333333; }
+				}
+
+				code {
+					padding-inline : 5px;
+					font-family    : monospace;
+					background     : lightgrey;
+					border-radius  : 5px;
+				}
+
+				h1, h2, h3, h4 {
+					font-family    : 'CodeBold';
+					letter-spacing : 2px;
+				}
+				
+				legend {
+					h3 {
+						margin-block  : 30px 20px;
+						font-size     : 20px;
+						text-align    : center;
+						border-bottom : 2px solid;
+					}
+					ul {
+						padding-inline : 30px 10px;
+						li {
+							margin-block : 5px;
+							line-height  : calc(1em + 5px);
+							list-style   : disc;
+						}
+					} 
+				}
+
+				&::after {
+					position    : absolute;
+					top         : 0;
+					right       : 0;
+					left        : 0;
+					display     : block;
+					padding     : 10px;
+					font-weight : 900;
+					color       : white;
+					white-space : pre-wrap;
+					content     : 'Error:\A At least one renderer should be enabled to make a search';
+					background  : rgb(255, 60, 60);
+					opacity     : 0;
+					transition  : opacity 0.5s;
+				}
+				&:not(:has(input[type='checkbox']:checked))::after { opacity : 1; }
+
+				.formTitle {
+					margin        : 20px 0;
+					font-size     : 30px;
+					color         : black;
+					text-align    : center;
+					border-bottom : 2px solid;
+				}
+
+				.formContents {
+					position       : relative;
+					display        : flex;
+					flex-direction : column;
+
+					label {
+						display     : flex;
+						align-items : center; 
+						margin      : 10px 0;
+					}
+					select { margin : 0 10px; }
+
+					input { 
+						margin   : 0 10px; 
+
+						&:invalid { background : rgb(255, 188, 181); }
+					
+						&[type='checkbox'] {
+							position       : relative;
+							display        : inline-block;
+							width          : 50px;
+							height         : 30px;
+							font-family    : 'WalterTurncoat';
+							font-size      : 20px;
+							font-weight    : 800;
+							color          : white;
+							letter-spacing : 2px;
+							appearance     : none;
+							background     : red;
+							isolation      : isolate;
+							border-radius  : 5px;
+
+							&::before,&::after {
+								position    : absolute;
+								inset       : 0;
+								z-index     : 5;
+								padding-top : 2px;
+								text-align  : center;
+							}
+
+							&::before {
+								display : block;
+								content : 'No';
+							}
+
+							&::after {
+								display : none;
+								content : 'Yes';
+							}
+
+							&:checked {
+								background : green;
+
+								&::before { display : none; }
+								&::after { display : block; }
+							}
+						}
+					}
+
+					#searchButton {
+						position : absolute;
+						right    : 20px;
+						bottom   : 0;
+
+						i {
+							margin-left         : 10px;
+							animation-duration  : 1000s;
+						}
+					}
+				}
+			}
+
+			&.resultsContainer {
+				display        : flex;
+				flex-direction : column;
+				height         : 100%;
+				overflow-y     : auto;
+				font-family    : 'BookInsanityRemake';
+				font-size      : 0.34cm;
+				
+				h3 {
+					font-family : 'Open Sans';
+					font-weight : 900;
+					color       : white;
+				}
+
+				.sort-container {
+					display               : flex;
+					flex-wrap             : wrap;
+					column-gap            : 15px;
+					justify-content       : center;
+					height                : 30px;
+					color                 : white;
+					background-color      : #555555;
+					border-top            : 1px solid #666666;
+					border-bottom         : 1px solid #666666;
+					
+					.sort-option {
+						display     : flex;
+						align-items : center;
+						padding     : 0 8px;
+				
+						&:hover { background-color : #444444; }
+				
+						&.active {
+							background-color : #333333;
+				
+							button {
+								font-weight : 800;
+								color       : white;
+								
+								& + .sortDir { padding-left : 5px; }
+							}
+						}
+
+						button {
+							padding          : 0;
+							font-size        : 11px;
+							font-weight      : normal;
+							color            : #CCCCCC;
+							text-transform   : uppercase;
+							background-color : transparent;
+					
+							&:hover { background : none; }
+						}
+					}
+				}
+
+				.foundBrews {
+					position         : relative;
+					width            : 100%;
+					height           : 100%;
+					max-height       : 100%;
+					padding          : 50px 50px 70px 50px;
+					overflow-y       : scroll;
+					background-color : #2C3E50;
+
+					h3 { font-size : 25px; }
+
+					&.noBrews {
+						display     : grid;
+						place-items : center;
+						color       : white;
+					}
+
+					&.searching {
+						display     : grid;
+						place-items : center;
+						color       : white;
+
+						h3 { position : relative; }
+
+						h3.searchAnim::after {
+							position  : absolute;
+							top       : 50%;
+							right     : 0;
+							width     : max-content;
+							height    : 1em;
+							content   : '';
+							translate : calc(100% + 5px) -50%;
+							animation : trailingDots 2s ease infinite;
+						}
+					}
+
+					.totalBrews {
+						position         : fixed;
+						right            : 0;
+						bottom           : 0;
+						z-index          : 1000;
+						padding          : 8px 10px;
+						font-family      : 'Open Sans';
+						font-size        : 11px;
+						font-weight      : 800;
+						color            : white;
+						background-color : #333333;
+
+						.searchAnim {
+							position : relative;
+							display  : inline-block;
+							width    : 3ch;
+							height   : 1em;
+						}
+
+						.searchAnim::after {
+							position  : absolute;
+							top       : 50%;
+							right     : 0;
+							width     : max-content;
+							height    : 1em;
+							content   : '';
+							translate : -50% -50%;
+							animation : trailingDots 2s ease infinite;
+						}
+					}
+
+					.brewItem {
+						width            : 47%;
+						margin-right     : 40px;
+						color            : black;
+						isolation        : isolate;
+						
+						&::after {
+							position         : absolute;
+							inset            : 0;
+							z-index          : -2;
+							display          : block;
+							content          : '';
+							background-image : url('/assets/parchmentBackground.jpg');
+						}
+
+						&:nth-child(even of .brewItem) { margin-right : 0; }
+
+						h2 {
+							font-family : 'MrEavesRemake';
+							font-size   : 0.75cm;
+							font-weight : 800;
+							line-height : 0.988em;
+							color       : var(--HB_Color_HeaderText);
+						}
+						.info {
+							position    : relative;
+							z-index     : 2;
+							font-family : 'ScalySansRemake';
+							font-size   : 1.2em;
+
+							>span {
+								margin-right : 12px;
+								line-height  : 1.5em;
+							}
+						}
+						.links { z-index : 2; }
+
+						hr {
+							margin     : 0px;
+							visibility : hidden;
+						}
+
+						.thumbnail { z-index : -1; }
+					}
+
+					.paginationControls {
+						position              : absolute;
+						left                  : 50%;
+						display               : grid;
+						grid-template-areas   : 'previousPage currentPage nextPage';
+						grid-template-columns : 50px 1fr 50px;
+						place-items           : center;
+						width                 : auto;
+						translate             : -50%;
+
+						.pages {
+							display         : flex;
+							grid-area       : currentPage;
+							justify-content : space-evenly;
+							width           : 100%;
+							height          : 100%;
+							padding         : 5px 8px;
+							text-align      : center;
+
+							.pageNumber {
+								margin-inline           : 1vw;
+								font-family             : 'Open Sans';
+								font-weight             : 900;
+								color                   : white;
+								text-underline-position : under;
+								text-wrap               : nowrap;
+								cursor                  : pointer;
+
+								&.currentPage {
+									color           : gold;
+									text-decoration : underline;
+									pointer-events  : none;
+								}
+
+								&.firstPage { margin-right : -5px; }
+
+								&.lastPage { margin-left : -5px; }
+							}
+						}
+
+						button {
+							width : max-content;
+
+							&.previousPage { grid-area : previousPage; }
+
+							&.nextPage { grid-area : nextPage; }
+						}
+
+					}
+				}
+			}
+		}
+	}
+}
+
+@keyframes trailingDots {
+
+	0%,
+	32% { content : ' .'; }
+
+	33%,
+	65% { content : ' ..'; }
+
+	66%,
+	100% { content : ' ...'; }
+}
+
+// media query for when the page is smaller than 1079 px in width
+@media screen and (max-width : 1079px) {
+	.vaultPage .content {
+
+		.dataGroup.form .brewLookup { padding : 1px 20px 20px 10px; }
+
+		.dataGroup.resultsContainer .foundBrews .brewItem {
+			width         : 100%;
+			margin-inline : auto;
+		}
+	}
+}

client/homebrew/utils/versionHistory.js

@@ -0,0 +1,119 @@
+import * as IDB from 'idb-keyval/dist/index.js';
+
+export const HISTORY_PREFIX = 'HOMEBREWERY-HISTORY';
+export const HISTORY_SLOTS = 5;
+
+// History values in minutes
+const HISTORY_SAVE_DELAYS = {
+	'0' : 0,
+	'1' : 2,
+	'2' : 10,
+	'3' : 60,
+	'4' : 12 * 60,
+	'5' : 2 * 24 * 60
+};
+// const HISTORY_SAVE_DELAYS = {
+// 	'0' : 0,
+// 	'1' : 1,
+// 	'2' : 2,
+// 	'3' : 3,
+// 	'4' : 4,
+// 	'5' : 5
+// };
+
+const HB_DB = 'HOMEBREWERY-DB';
+const HB_STORE = 'HISTORY';
+
+const GARBAGE_COLLECT_DELAY = 28 * 24 * 60;
+// const GARBAGE_COLLECT_DELAY = 10;
+
+
+function getKeyBySlot(brew, slot){
+	// Return a string representing the key for this brew and history slot
+	return `${HISTORY_PREFIX}-${brew.shareId}-${slot}`;
+};
+
+function parseBrewForStorage(brew, slot = 0) {
+	// Strip out unneeded object properties
+	// Returns an array of [ key, brew ]
+	const archiveBrew = {
+		title    : brew.title,
+		text     : brew.text,
+		style    : brew.style,
+		version  : brew.version,
+		shareId  : brew.shareId,
+		savedAt  : brew?.savedAt || new Date(),
+		expireAt : new Date()
+	};
+
+	archiveBrew.expireAt.setMinutes(archiveBrew.expireAt.getMinutes() + HISTORY_SAVE_DELAYS[slot]);
+
+	const key = getKeyBySlot(brew, slot);
+
+	return [key, archiveBrew];
+}
+
+// Create a custom IDB store
+async function createHBStore(){
+	return await IDB.createStore(HB_DB, HB_STORE);
+}
+
+export async function loadHistory(brew){
+	const DEFAULT_HISTORY_ITEM = { expireAt: '2000-01-01T00:00:00.000Z', shareId: brew.shareId, noData: true };
+
+	const historyKeys = [];
+
+	// Create array of all history keys
+	for (let i = 1; i <= HISTORY_SLOTS; i++){
+		historyKeys.push(getKeyBySlot(brew, i));
+	};
+
+	// Load all keys from IDB at once
+	const dataArray = await IDB.getMany(historyKeys, await createHBStore());
+	return dataArray.map((data)=>{ return data ?? DEFAULT_HISTORY_ITEM; });
+}
+
+export async function updateHistory(brew) {
+	const history = await loadHistory(brew);
+
+	// Walk each version position
+	for (let slot = HISTORY_SLOTS - 1; slot >= 0; slot--){
+		const storedVersion = history[slot];
+
+		// If slot has expired, update all lower slots and break
+		if(new Date() >= new Date(storedVersion.expireAt)){
+
+			// Create array of arrays : [ [key1, value1], [key2, value2], ..., [keyN, valueN] ]
+			// to pass to IDB.setMany
+			const historyUpdate = [];
+
+			for (let updateSlot = slot; updateSlot > 0; updateSlot--){
+				// Move data from updateSlot to updateSlot + 1
+				if(!history[updateSlot - 1]?.noData) {
+					historyUpdate.push(parseBrewForStorage(history[updateSlot - 1], updateSlot + 1));
+				}
+			};
+
+			// Update the most recent brew
+			historyUpdate.push(parseBrewForStorage(brew, 1));
+
+			await IDB.setMany(historyUpdate, await createHBStore());
+
+			// Break out of data checks because we found an expired value
+			break;
+		}
+	};
+};
+
+export async function versionHistoryGarbageCollection(){
+
+	const entries = await IDB.entries(await createHBStore());
+
+	for (const [key, value] of entries){
+		const expireAt = new Date(value.savedAt);
+		expireAt.setMinutes(expireAt.getMinutes() + GARBAGE_COLLECT_DELAY);
+		if(new Date() > expireAt){
+			await IDB.del(key, await createHBStore());
+		};
+	};
+};

config/default.json

@@ -6,5 +6,7 @@
 	"enable_v3" : true,
 	"enable_themes" : true,
 	"local_environments" : ["docker", "local"],
-	"publicUrl" : "https://homebrewery.naturalcrit.com"
+	"publicUrl" : "https://homebrewery.naturalcrit.com",
+	"hb_images" : null,
+	"hb_fonts" : null
 }

package.json

@@ -1,20 +1,20 @@
 {
   "name": "homebrewery",
   "description": "Create authentic looking D&D homebrews using only markdown",
-  "version": "3.14.2",
+  "version": "3.15.0",
   "engines": {
     "npm": "^10.2.x",
-    "node": "^20.8.x"
+    "node": "^20.17.x"
   },
   "repository": {
     "type": "git",
     "url": "git://github.com/naturalcrit/homebrewery.git"
   },
   "scripts": {
-    "dev": "node scripts/dev.js",
-    "quick": "node scripts/quick.js",
-    "build": "node scripts/buildHomebrew.js && node scripts/buildAdmin.js",
-    "builddev": "node scripts/buildHomebrew.js --dev",
+    "dev": "node --experimental-require-module scripts/dev.js",
+    "quick": "node --experimental-require-module scripts/quick.js",
+    "build": "node --experimental-require-module scripts/buildHomebrew.js && node --experimental-require-module scripts/buildAdmin.js",
+    "builddev": "node --experimental-require-module scripts/buildHomebrew.js --dev",
     "lint": "eslint --fix",
     "lint:dry": "eslint",
     "stylelint": "stylelint --fix **/*.{less}",
@@ -25,6 +25,7 @@
     "test:api-unit": "jest \"server/.*.spec.js\" --verbose",
     "test:api-unit:themes": "jest \"server/.*.spec.js\" -t \"theme bundle\" --verbose",
     "test:api-unit:css": "jest \"server/.*.spec.js\" -t \"Get CSS\" --verbose",
+    "test:api-unit:notifications": "jest \"server/.*.spec.js\" -t \"Notifications\" --verbose",
     "test:coverage": "jest --coverage --silent --runInBand",
     "test:dev": "jest --verbose --watch",
     "test:basic": "jest tests/markdown/basic.test.js --verbose",
@@ -37,10 +38,10 @@
     "test:hard-breaks": "jest tests/markdown/hard-breaks.test.js --verbose --noStackTrace",
     "test:emojis": "jest tests/markdown/emojis.test.js --verbose --noStackTrace",
     "test:route": "jest tests/routes/static-pages.test.js --verbose",
-    "phb": "node scripts/phb.js",
+    "phb": "node --experimental-require-module scripts/phb.js",
     "prod": "set NODE_ENV=production && npm run build",
     "postinstall": "npm run build",
-    "start": "node server.js"
+    "start": "node --experimental-require-module server.js"
   },
   "author": "stolksdorf",
   "license": "MIT",
@@ -85,23 +86,24 @@
     ]
   },
   "dependencies": {
-    "@babel/core": "^7.25.2",
-    "@babel/plugin-transform-runtime": "^7.25.4",
-    "@babel/preset-env": "^7.25.4",
-    "@babel/preset-react": "^7.24.7",
-    "@googleapis/drive": "^8.13.1",
+    "@babel/core": "^7.25.7",
+    "@babel/plugin-transform-runtime": "^7.25.7",
+    "@babel/preset-env": "^7.25.7",
+    "@babel/preset-react": "^7.25.7",
+    "@googleapis/drive": "^8.14.0",
     "body-parser": "^1.20.2",
     "classnames": "^2.5.1",
     "codemirror": "^5.65.6",
-    "cookie-parser": "^1.4.6",
+    "cookie-parser": "^1.4.7",
     "create-react-class": "^15.7.0",
     "dedent-tabs": "^0.10.3",
-    "dompurify": "^3.1.6",
+    "dompurify": "^3.1.7",
     "expr-eval": "^2.0.2",
-    "express": "^4.19.2",
+    "express": "^4.21.1",
     "express-async-handler": "^1.2.0",
-    "express-static-gzip": "2.1.7",
+    "express-static-gzip": "2.1.8",
     "fs-extra": "11.2.0",
+    "idb-keyval": "^6.2.1",
     "js-yaml": "^4.1.0",
     "jwt-simple": "^0.5.6",
     "less": "^3.13.1",
@@ -113,28 +115,28 @@
     "marked-smartypants-lite": "^1.0.2",
     "markedLegacy": "npm:marked@^0.3.19",
     "moment": "^2.30.1",
-    "mongoose": "^8.6.0",
+    "mongoose": "^8.7.1",
     "nanoid": "3.3.4",
     "nconf": "^0.12.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-frame-component": "^4.1.3",
-    "react-router-dom": "6.26.1",
+    "react-router-dom": "6.26.2",
     "sanitize-filename": "1.6.3",
     "superagent": "^10.1.0",
     "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
   },
   "devDependencies": {
-    "@stylistic/stylelint-plugin": "^3.0.1",
-    "eslint": "^9.9.1",
-    "eslint-plugin-jest": "^28.8.0",
-    "eslint-plugin-react": "^7.35.0",
-    "globals": "^15.9.0",
+    "@stylistic/stylelint-plugin": "^3.1.1",
+    "eslint": "^9.12.0",
+    "eslint-plugin-jest": "^28.8.3",
+    "eslint-plugin-react": "^7.37.1",
+    "globals": "^15.11.0",
     "jest": "^29.7.0",
     "jest-expect-message": "^1.1.3",
     "postcss-less": "^6.0.0",
     "stylelint": "^16.9.0",
-    "stylelint-config-recess-order": "^5.1.0",
+    "stylelint-config-recess-order": "^5.1.1",
     "stylelint-config-recommended": "^14.0.1",
     "supertest": "^7.0.0"
   }

server/admin.api.js

@@ -1,7 +1,7 @@
 const HomebrewModel = require('./homebrew.model.js').model;
+const NotificationModel = require('./notifications.model.js').model;
 const router = require('express').Router();
 const Moment = require('moment');
-//const render = require('vitreum/steps/render');
 const templateFn = require('../client/template.js');
 const zlib = require('zlib');
 
@@ -22,7 +22,7 @@ const mw = {
 		if(process.env.ADMIN_USER === username && process.env.ADMIN_PASS === password){
 			return next();
 		}
-		return res.status(401).send('Access denied');
+		throw { HBErrorCode: '52', code: 401, message: 'Access denied' };
 	}
 };
 
@@ -138,12 +138,48 @@ router.get('/admin/stats', mw.adminOnly, async (req, res)=>{
 	}
 });
 
+// #######################   NOTIFICATIONS
+
+router.get('/admin/notification/all', async (req, res, next)=>{
+	try {
+		const notifications = await NotificationModel.getAll();
+		return res.json(notifications);
+	} catch (error) {
+		console.log('Error getting all notifications: ', error.message);
+		return res.status(500).json({ message: error.message });
+	}
+});
+
+router.post('/admin/notification/add', mw.adminOnly, async (req, res, next)=>{
+	console.table(req.body);
+	try {
+		const notification = await NotificationModel.addNotification(req.body);
+		return res.status(201).json(notification);
+	} catch (error) {
+		console.log('Error adding notification: ', error.message);
+		return res.status(500).json({ message: error.message });
+	}
+});
+
+router.delete('/admin/notification/delete/:id', mw.adminOnly, async (req, res, next)=>{
+	try {
+		const notification = await NotificationModel.deleteNotification(req.params.id);
+		return res.json(notification);
+	} catch (error) {
+		console.error('Error deleting notification: { key: ', req.params.id, ' error: ',  error.message, ' }');
+		return res.status(500).json({ message: error.message });
+	}
+});
+
 router.get('/admin', mw.adminOnly, (req, res)=>{
 	templateFn('admin', {
 		url : req.originalUrl
 	})
 	.then((page)=>res.send(page))
-	.catch((err)=>res.sendStatus(500));
+	.catch((err)=>{
+		console.log(err);
+		res.sendStatus(500);
+	});
 });
 
 module.exports = router;

server/admin.api.spec.js

@@ -0,0 +1,116 @@
+const supertest = require('supertest');
+
+const app = supertest.agent(require('app.js').app)
+	.set('X-Forwarded-Proto', 'https');
+
+const NotificationModel = require('./notifications.model.js').model;
+
+describe('Tests for admin api', ()=>{
+	afterEach(()=>{
+		jest.resetAllMocks();
+	});
+
+	describe('Notifications', ()=>{
+		it('should return list of all notifications', async ()=>{
+			const testNotifications = ['a', 'b'];
+
+			jest.spyOn(NotificationModel, 'find')
+			.mockImplementationOnce(() => {
+				return { exec: jest.fn().mockResolvedValue(testNotifications) };
+			});
+
+			const response = await app
+				.get('/admin/notification/all')
+				.set('Authorization', `Basic ${Buffer.from('admin:password3').toString('base64')}`);
+
+			expect(response.status).toBe(200);
+			expect(response.body).toEqual(testNotifications);
+		});
+
+		it('should add a new notification', async ()=>{
+			const inputNotification = {
+				title      : 'Test Notification',
+				text       : 'This is a test notification',
+				startAt    : new Date().toISOString(),
+				stopAt     : new Date().toISOString(),
+				dismissKey : 'testKey'
+			};
+
+			const savedNotification = {
+				...inputNotification,
+				_id       : expect.any(String),
+				createdAt : expect.any(String),
+				startAt   : inputNotification.startAt,
+				stopAt    : inputNotification.stopAt,
+			};
+
+			jest.spyOn(NotificationModel.prototype, 'save')
+				.mockImplementationOnce(function() {
+					return Promise.resolve(this);
+				});
+
+			const response = await app
+				.post('/admin/notification/add')
+				.set('Authorization', `Basic ${Buffer.from('admin:password3').toString('base64')}`)
+				.send(inputNotification);
+
+			expect(response.status).toBe(201);
+			expect(response.body).toEqual(savedNotification);
+		});
+
+		it('should handle error adding a notification without dismissKey', async () => {
+			const inputNotification = {
+				title   : 'Test Notification',
+				text    : 'This is a test notification',
+				startAt : new Date().toISOString(),
+				stopAt  : new Date().toISOString()
+			};
+
+			//Change 'save' function to just return itself instead of actually interacting with the database
+			jest.spyOn(NotificationModel.prototype, 'save')
+				.mockImplementationOnce(function() {
+					return Promise.resolve(this);
+				});
+
+			const response = await app
+				.post('/admin/notification/add')
+				.set('Authorization', 'Basic ' + Buffer.from('admin:password3').toString('base64'))
+				.send(inputNotification);
+
+			expect(response.status).toBe(500);
+			expect(response.body).toEqual({ message: 'Dismiss key is required!' });
+		});
+
+		it('should delete a notification based on its dismiss key', async ()=>{
+			const dismissKey = 'testKey';
+
+			jest.spyOn(NotificationModel, 'findOneAndDelete')
+				.mockImplementationOnce((key) => {
+					return { exec: jest.fn().mockResolvedValue(key) };
+				});
+			const response = await app
+				.delete(`/admin/notification/delete/${dismissKey}`)
+				.set('Authorization', `Basic ${Buffer.from('admin:password3').toString('base64')}`);
+
+			expect(NotificationModel.findOneAndDelete).toHaveBeenCalledWith({'dismissKey': 'testKey'});
+			expect(response.status).toBe(200);
+			expect(response.body).toEqual({ dismissKey: 'testKey' });
+		});
+
+		it('should handle error deleting a notification that doesnt exist', async ()=>{
+			const dismissKey = 'testKey';
+
+			jest.spyOn(NotificationModel, 'findOneAndDelete')
+				.mockImplementationOnce(() => {
+					return { exec: jest.fn().mockResolvedValue() };
+				});
+			const response = await app
+				.delete(`/admin/notification/delete/${dismissKey}`)
+				.set('Authorization', `Basic ${Buffer.from('admin:password3').toString('base64')}`);
+
+			expect(NotificationModel.findOneAndDelete).toHaveBeenCalledWith({'dismissKey': 'testKey'});
+			expect(response.status).toBe(500);
+			expect(response.body).toEqual({ message: 'Notification not found' });
+		});
+	});
+});

server/googleActions.js

@@ -172,7 +172,6 @@ const GoogleActions = {
 		})
 		.catch((err)=>{
 			console.log('Error saving to google');
-			console.error(err);
 			throw (err);
 		});
 
@@ -211,7 +210,6 @@ const GoogleActions = {
 		})
 		.catch((err)=>{
 			console.log('Error while creating new Google brew');
-			console.error(err);
 			throw (err);
 		});
 

server/homebrew.api.js

@@ -99,7 +99,7 @@ const api = {
 			stub = stub?.toObject();
 
 			if(stub?.lock?.locked && accessType != 'edit') {
-				throw { HBErrorCode: '100', code: stub.lock.code, message: stub.lock.shareMessage, brewId: stub.shareId, brewTitle: stub.title };
+				throw { HBErrorCode: '51', code: stub.lock.code, message: stub.lock.shareMessage, brewId: stub.shareId, brewTitle: stub.title };
 			}
 
 			// If there is a google id, try to find the google brew
@@ -242,11 +242,8 @@ const api = {
 
 		let googleId, saved;
 		if(saveToGoogle) {
-			googleId = await api.newGoogleBrew(req.account, newHomebrew, res)
-				.catch((err)=>{
-					console.error(err);
-					res.status(err?.status || err?.response?.status || 500).send(err?.message || err);
-				});
+			googleId = await api.newGoogleBrew(req.account, newHomebrew, res);
+
 			if(!googleId) return;
 			api.excludeStubProps(newHomebrew);
 			newHomebrew.googleId = googleId;
@@ -351,19 +348,13 @@ const api = {
 			brew.googleId = undefined;
 		} else if(!brew.googleId && saveToGoogle) {
 			// If we don't have a google id and the user wants to save to google, create the google brew and set the google id on the brew
-			brew.googleId = await api.newGoogleBrew(req.account, api.excludeGoogleProps(brew), res)
-				.catch((err)=>{
-					console.error(err);
-					res.status(err.status || err.response.status).send(err.message || err);
-				});
+			brew.googleId = await api.newGoogleBrew(req.account, api.excludeGoogleProps(brew), res);
+
 			if(!brew.googleId) return;
 		} else if(brew.googleId) {
 			// If the google id exists and no other actions are being performed, update the google brew
-			const updated = await GoogleActions.updateGoogleBrew(api.excludeGoogleProps(brew))
-				.catch((err)=>{
-					console.error(err);
-					res.status(err?.response?.status || 500).send(err);
-				});
+			const updated = await GoogleActions.updateGoogleBrew(api.excludeGoogleProps(brew));
+
 			if(!updated) return;
 		}
 

server/homebrew.api.spec.js

@@ -309,7 +309,7 @@ describe('Tests for api', ()=>{
 			const req = { brew: {} };
 			const next = jest.fn();
 
-			await expect(fn(req, null, next)).rejects.toEqual({ 'HBErrorCode': '100', 'brewId': '1', 'brewTitle': 'test brew', 'code': 404, 'message': 'brew locked' });
+			await expect(fn(req, null, next)).rejects.toEqual({ 'HBErrorCode': '51', 'brewId': '1', 'brewTitle': 'test brew', 'code': 404, 'message': 'brew locked' });
 		});
 	});
 
@@ -560,16 +560,6 @@ brew`);
 				views       : 0
 			});
 		});
-
-		it('should handle google error', async()=>{
-			google.newGoogleBrew = jest.fn(()=>{
-				throw 'err';
-			});
-			await api.newBrew({ body: { text: 'asdf', title: '' }, query: { saveToGoogle: true }, account: { username: 'test user' } }, res);
-
-			expect(res.status).toHaveBeenCalledWith(500);
-			expect(res.send).toHaveBeenCalledWith('err');
-		});
 	});
 
 	describe('deleteGoogleBrew', ()=>{
@@ -934,7 +924,7 @@ brew`);
 			expect(req.brew).toEqual(testBrew);
 			expect(req.brew).toHaveProperty('style', '\nI Have a style!\n');
 			expect(res.status).toHaveBeenCalledWith(200);
-			expect(res.send).toHaveBeenCalledWith("\nI Have a style!\n");
+			expect(res.send).toHaveBeenCalledWith('\nI Have a style!\n');
 			expect(res.set).toHaveBeenCalledWith({
 				'Cache-Control' : 'no-cache',
 				'Content-Type'  : 'text/css'

server/middleware/content-negotiation.js

@@ -1,12 +1,16 @@
+const config = require('../config.js');
+const nodeEnv = config.get('node_env');
+const isLocalEnvironment = config.get('local_environments').includes(nodeEnv);
+
 module.exports = (req, res, next)=>{
 	const isImageRequest = req.get('Accept')?.split(',')
         ?.filter((h)=>!h.includes('q='))
         ?.every((h)=>/image\/.*/.test(h));
-	if(isImageRequest) {
+	if(isImageRequest && !isLocalEnvironment && !req.url?.startsWith('/staticImages')) {
 		return res.status(406).send({
 			message : 'Request for image at this URL is not supported'
 		});
 	}
 
 	next();
-};
+};

server/notifications.model.js

@@ -0,0 +1,62 @@
+const mongoose = require('mongoose');
+const _ = require('lodash');
+
+const NotificationSchema = new mongoose.Schema({
+	dismissKey : { type: String, unique: true, required: true },
+	title      : { type: String, default: '' },
+	text       : { type: String, default: '' },
+	createdAt  : { type: Date, default: Date.now },
+	startAt    : { type: Date, default: Date.now },
+	stopAt     : { type: Date, default: Date.now },
+}, { versionKey: false });
+
+NotificationSchema.statics.addNotification = async function(data) {
+	if(!data.dismissKey) throw { message: 'Dismiss key is required!' };
+
+	const defaults = {
+		title   : '',
+		text    : '',
+		startAt : new Date(),
+		stopAt  : new Date(),
+	};
+
+	const notificationData = _.defaults(data, defaults);
+
+	try {
+		const newNotification = new this(notificationData);
+		const savedNotification = await newNotification.save();
+		return savedNotification;
+	} catch (err) {
+		throw { message: err.message || 'Error saving notification' };
+	}
+};
+
+NotificationSchema.statics.deleteNotification = async function(dismissKey) {
+	if(!dismissKey) throw { message: 'Dismiss key is required!' };
+
+	try {
+		const deletedNotification = await this.findOneAndDelete({ dismissKey }).exec();
+		if(!deletedNotification) {
+			throw { message: 'Notification not found' };
+		}
+		return deletedNotification;
+	} catch (err) {
+		throw { message: err.message || 'Error deleting notification' };
+	}
+};
+
+NotificationSchema.statics.getAll = async function() {
+	try {
+		const notifications = await this.find().exec();
+		return notifications;
+	} catch (err) {
+		throw { message: err.message || 'Error retrieving notifications' };
+	}
+};
+
+const Notification = mongoose.model('Notification', NotificationSchema);
+
+module.exports = {
+	schema : NotificationSchema,
+	model  : Notification,
+};

server/vault.api.js

@@ -0,0 +1,109 @@
+const express = require('express');
+const asyncHandler = require('express-async-handler');
+const HomebrewModel = require('./homebrew.model.js').model;
+
+const router = express.Router();
+
+const titleConditions = (title)=>{
+	if(!title) return {};
+	return {
+		$text : {
+			$search        : title,
+			$caseSensitive : false,
+		},
+	};
+};
+
+const authorConditions = (author)=>{
+	if(!author) return {};
+	return { authors: author };
+};
+
+const rendererConditions = (legacy, v3)=>{
+	if(legacy === 'true' && v3 !== 'true')
+		return { renderer: 'legacy' };
+
+	if(v3 === 'true' && legacy !== 'true')
+		return { renderer: 'V3' };
+
+	return {}; // If all renderers selected, renderer field not needed in query for speed
+};
+
+const sortConditions = (sort, dir) => {
+	return { [sort]: dir === 'asc' ? 1 : -1 };
+};
+
+const findBrews = async (req, res)=>{
+	const title  = req.query.title || '';
+	const author = req.query.author || '';
+	const page   = Math.max(parseInt(req.query.page)  || 1, 1);
+	const count  = Math.max(parseInt(req.query.count) || 20, 10);
+	const skip   = (page - 1) * count;
+	const sort = req.query.sort || 'title';
+	const dir = req.query.dir || 'asc';
+
+	const combinedQuery = {
+		$and : [
+			{ published: true },
+			rendererConditions(req.query.legacy, req.query.v3),
+			titleConditions(title),
+			authorConditions(author)
+		],
+	};
+
+	const projection = {
+		editId   : 0,
+		googleId : 0,
+		text     : 0,
+		textBin  : 0,
+		version  : 0
+	};
+
+	await HomebrewModel.find(combinedQuery, projection)
+		.sort(sortConditions(sort, dir))
+		.skip(skip)
+		.limit(count)
+		.maxTimeMS(5000)
+		.exec()
+		.then((brews)=>{
+			const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+			const processedBrews = brews.map((brew)=>{
+				brew.authors = brew.authors.map((author)=>emailRegex.test(author) ? 'hidden' : author
+				);
+				return brew;
+			});
+			res.json({ brews: processedBrews, page });
+		})
+		.catch((error)=>{
+			throw { ...error, message: 'Error finding brews in Vault search', HBErrorCode: 90 };
+		});
+};
+
+const findTotal = async (req, res)=>{
+	const title  = req.query.title || '';
+	const author = req.query.author || '';
+
+	const combinedQuery = {
+		$and : [
+			{ published: true },
+			rendererConditions(req.query.legacy, req.query.v3),
+			titleConditions(title),
+			authorConditions(author)
+		],
+	};
+
+	await HomebrewModel.countDocuments(combinedQuery)
+		.then((totalBrews)=>{
+			console.log(`when returning, the total of brews is ${totalBrews} for the query ${JSON.stringify(combinedQuery)}`);
+			res.json({ totalBrews });
+		})
+		.catch((error)=>{
+			throw { ...error, message: 'Error finding brews in Vault search findTotal function', HBErrorCode: 91 };
+		});
+};
+
+router.get('/api/vault/total', asyncHandler(findTotal));
+router.get('/api/vault', asyncHandler(findBrews));
+
+module.exports = router;

shared/naturalcrit/codeEditor/codeEditor.jsx

@@ -397,6 +397,11 @@ const CodeEditor = createClass({
 	getCursorPosition : function(){
 		return this.codeMirror.getCursor();
 	},
+	getTopVisibleLine : function(){
+		const rect = this.codeMirror.getWrapperElement().getBoundingClientRect();
+		const topVisibleLine = this.codeMirror.lineAtHeight(rect.top, 'window');
+		return topVisibleLine;
+	},
 	updateSize : function(){
 		this.codeMirror.refresh();
 	},

shared/naturalcrit/markdown.js

@@ -105,16 +105,16 @@ renderer.link = function (href, title, text) {
 // Expose `src` attribute as `--HB_src` to make the URL accessible via CSS
 renderer.image = function (href, title, text) {
 	href = cleanUrl(href);
-	if (href === null)
+	if(href === null)
 		return text;
 
 	let out = `<img src="${href}" alt="${text}" style="--HB_src:url(${href});"`;
-	if (title)
+	if(title)
 		out += ` title="${title}"`;
 
 	out += '>';
 	return out;
-}
+};
 
 // Disable default reflink behavior, as it steps on our variables extension
 tokenizer.def = function () {
@@ -745,7 +745,7 @@ const tableTerminators = [
 	`:+\\n`,                // hardBreak
 	` *{[^\n]+}`,           // blockInjector
 	` *{{[^{\n]*\n.*?\n}}`  // mustacheDiv
-]
+];
 
 Marked.use(MarkedVariables());
 Marked.use({ extensions : [definitionListsMultiLine, definitionListsSingleLine, forcedParagraphBreaks, superSubScripts,
@@ -755,12 +755,12 @@ Marked.use({ renderer: renderer, tokenizer: tokenizer, mangle: false });
 Marked.use(MarkedExtendedTables(tableTerminators), MarkedGFMHeadingId({ globalSlugs: true }), MarkedSmartypantsLite(), MarkedEmojis(MarkedEmojiOptions));
 
 function cleanUrl(href) {
-  try {
-    href = encodeURI(href).replace(/%25/g, '%');
-  } catch {
-    return null;
-  }
-  return href;
+	try {
+		href = encodeURI(href).replace(/%25/g, '%');
+	} catch {
+		return null;
+	}
+	return href;
 }
 
 const escapeTest = /[&<>"']/;

shared/naturalcrit/splitPane/splitPane.jsx

@@ -7,8 +7,9 @@ const SplitPane = createClass({
 	displayName     : 'SplitPane',
 	getDefaultProps : function() {
 		return {
-			storageKey   : 'naturalcrit-pane-split',
-			onDragFinish : function(){} //fires when dragging
+			storageKey         : 'naturalcrit-pane-split',
+			onDragFinish       : function(){}, //fires when dragging
+			showDividerButtons : true
 		};
 	},
 
@@ -41,6 +42,10 @@ const SplitPane = createClass({
 			});
 		}
 		window.addEventListener('resize', this.handleWindowResize);
+
+		// This lives here instead of in the initial render because you cannot touch localStorage until the componant mounts.
+		const loadLiveScroll = window.localStorage.getItem('liveScroll') === 'true';
+		this.setState({ liveScroll: loadLiveScroll });
 	},
 
 	componentWillUnmount : function() {
@@ -88,6 +93,11 @@ const SplitPane = createClass({
 			userSetDividerPos : newSize
 		});
 	},
+
+	liveScrollToggle : function() {
+		window.localStorage.setItem('liveScroll', String(!this.state.liveScroll));
+		this.setState({ liveScroll: !this.state.liveScroll });
+	},
 	/*
 	unFocus : function() {
 		if(document.selection){
@@ -119,13 +129,18 @@ const SplitPane = createClass({
 					onClick={()=>this.setState({ moveBrew: !this.state.moveBrew })} >
 					<i className='fas fa-arrow-right' />
 				</div>
+				<div id='scrollToggleDiv' className={this.state.liveScroll ? 'arrow lock' : 'arrow unlock'}
+					style={{ left: this.state.currentDividerPos-4 }}
+					onClick={this.liveScrollToggle} >
+					<i id='scrollToggle' className={this.state.liveScroll ? 'fas fa-lock' : 'fas fa-unlock'} />
+				</div>
 			</>;
 		}
 	},
 
 	renderDivider : function(){
 		return <>
-			{this.renderMoveArrows()}
+			{this.props.showDividerButtons && this.renderMoveArrows()}
 			<div className='divider' onPointerDown={this.handleDown} >
 				<div className='dots'>
 					<i className='fas fa-circle' />
@@ -142,9 +157,12 @@ const SplitPane = createClass({
 				width={this.state.currentDividerPos}
 			>
 				{React.cloneElement(this.props.children[0], {
-					moveBrew      : this.state.moveBrew,
-					moveSource    : this.state.moveSource,
-					setMoveArrows : this.setMoveArrows
+					...(this.props.showDividerButtons && {
+						moveBrew      : this.state.moveBrew,
+						moveSource    : this.state.moveSource,
+						liveScroll    : this.state.liveScroll,
+						setMoveArrows : this.setMoveArrows,
+					}),
 				})}
 			</Pane>
 			{this.renderDivider()}

shared/naturalcrit/splitPane/splitPane.less

@@ -53,6 +53,15 @@
 			.tooltipRight('Jump to location in Preview');
 			top : 60px;
 		}
+		&.lock{
+			.tooltipRight('De-sync Editor and Preview locations.');
+			top : 90px;
+			background: #666;
+		}
+		&.unlock{
+			.tooltipRight('Sync Editor and Preview locations');
+			top : 90px;
+		}
 		&:hover{
 			background-color: #666;
 		}

themes/V3/5ePHB/snippets.js

@@ -27,35 +27,154 @@ module.exports = [
 				experimental : true,
 				subsnippets  : [
 					{
-						name         : 'Table of Contents',
+						name         : 'Generate Table of Contents',
 						icon         : 'fas fa-book',
 						gen          : TableOfContentsGen,
 						experimental : true
 					},
 					{
-						name : 'Include in ToC up to H3',
-						icon : 'fas fa-dice-three',
+						name : 'Table of Contents Individual Inclusion',
+						icon : 'fas fa-book',
+						gen  : dedent `\n{{tocInclude# CHANGE # to your header level
+							}}\n`,
+						subsnippets : [
+							{
+								name : 'Individual Inclusion H1',
+								icon : 'fas fa-book',
+								gen  : dedent `\n{{tocIncludeH1 \n
+									}}\n`,
+							},
+							{
+								name : 'Individual Inclusion H2',
+								icon : 'fas fa-book',
+								gen  : dedent `\n{{tocIncludeH2 \n
+									}}\n`,
+							},
+							{
+								name : 'Individual Inclusion H3',
+								icon : 'fas fa-book',
+								gen  : dedent `\n{{tocIncludeH3 \n
+									}}\n`,
+							},
+							{
+								name : 'Individual Inclusion H4',
+								icon : 'fas fa-book',
+								gen  : dedent `\n{{tocIncludeH4 \n
+									}}\n`,
+							},
+							{
+								name : 'Individual Inclusion H5',
+								icon : 'fas fa-book',
+								gen  : dedent `\n{{tocIncludeH5 \n
+									}}\n`,
+							},
+							{
+								name : 'Individual Inclusion H6',
+								icon : 'fas fa-book',
+								gen  : dedent `\n{{tocIncludeH6 \n
+									}}\n`,
+							}
+						]
+					},
+					{
+						name : 'Table of Contents Range Inclusion',
+						icon : 'fas fa-book',
 						gen  : dedent `\n{{tocDepthH3
 							}}\n`,
+						subsnippets : [
+							{
+								name : 'Include in ToC up to H3',
+								icon : 'fas fa-dice-three',
+								gen  : dedent `\n{{tocDepthH3
+									}}\n`,
 
+							},
+							{
+								name : 'Include in ToC up to H4',
+								icon : 'fas fa-dice-four',
+								gen  : dedent `\n{{tocDepthH4
+									}}\n`,
+							},
+							{
+								name : 'Include in ToC up to H5',
+								icon : 'fas fa-dice-five',
+								gen  : dedent `\n{{tocDepthH5
+									}}\n`,
+							},
+							{
+								name : 'Include in ToC up to H6',
+								icon : 'fas fa-dice-six',
+								gen  : dedent `\n{{tocDepthH6
+									}}\n`,
+							},
+						]
 					},
 					{
-						name : 'Include in ToC up to H4',
-						icon : 'fas fa-dice-four',
-						gen  : dedent `\n{{tocDepthH4
+						name : 'Table of Contents Individual Exclusion',
+						icon : 'fas fa-book',
+						gen  : dedent `\n{{tocExcludeH1 \n
 							}}\n`,
+						subsnippets : [
+							{
+								name : 'Individual Exclusion H1',
+								icon : 'fas fa-book',
+								gen  : dedent `\n{{tocExcludeH1 \n
+									}}\n`,
+							},
+							{
+								name : 'Individual Exclusion H2',
+								icon : 'fas fa-book',
+								gen  : dedent `\n{{tocExcludeH2 \n
+									}}\n`,
+							},
+							{
+								name : 'Individual Exclusion H3',
+								icon : 'fas fa-book',
+								gen  : dedent `\n{{tocExcludeH3 \n
+									}}\n`,
+							},
+							{
+								name : 'Individual Exclusion H4',
+								icon : 'fas fa-book',
+								gen  : dedent `\n{{tocExcludeH4 \n
+									}}\n`,
+							},
+							{
+								name : 'Individual Exclusion H5',
+								icon : 'fas fa-book',
+								gen  : dedent `\n{{tocExcludeH5 \n
+									}}\n`,
+							},
+							{
+								name : 'Individual Exclusion H6',
+								icon : 'fas fa-book',
+								gen  : dedent `\n{{tocExcludeH6 \n
+									}}\n`,
+							},
+						]
 					},
+
 					{
-						name : 'Include in ToC up to H5',
-						icon : 'fas fa-dice-five',
-						gen  : dedent `\n{{tocDepthH5
-							}}\n`,
-					},
-					{
-						name : 'Include in ToC up to H6',
-						icon : 'fas fa-dice-six',
-						gen  : dedent `\n{{tocDepthH6
-							}}\n`,
+						name        : 'Table of Contents Toggles',
+						icon        : 'fas fa-book',
+						gen         : `{{tocGlobalH4}}\n\n`,
+						subsnippets : [
+							{
+								name : 'Enable H1-H4 all pages',
+								icon : 'fas fa-dice-four',
+								gen  : `{{tocGlobalH4}}\n\n`,
+							},
+							{
+								name : 'Enable H1-H5 all pages',
+								icon : 'fas fa-dice-five',
+								gen  : `{{tocGlobalH5}}\n\n`,
+							},
+							{
+								name : 'Enable H1-H6 all pages',
+								icon : 'fas fa-dice-six',
+								gen  : `{{tocGlobalH6}}\n\n`,
+							},
+						]
 					}
 				]
 			},
@@ -94,7 +213,7 @@ module.exports = [
 							background-image: linear-gradient(-45deg, #322814, #998250, #322814);
 							line-height: 1em;
 						}\n\n`
-			}
+			},
 		]
 	},
 

themes/V3/5ePHB/snippets/tableOfContents.gen.js

@@ -1,77 +1,78 @@
-const _ = require('lodash');
 const dedent = require('dedent-tabs').default;
 
-const getTOC = (pages)=>{
+// Map each actual page to its footer label, accounting for skips or numbering resets
+const mapPages = (pages)=>{
+	let actualPage = 0;
+	let mappedPage = 0; // Number displayed in footer
+	const pageMap    = [];
 
-	const recursiveAdd = (title, page, targetDepth, child, curDepth=0)=>{
-		if(curDepth > 5) return; // Something went wrong.
-		if(curDepth == targetDepth) {
-			child.push({
-				title    : title,
-				page     : page,
-				children : []
-			});
-		} else {
-			if(child.length == 0) {
-				child.push({
-					title    : null,
-					page     : page,
-					children : []
-				});
+	pages.forEach((page)=>{
+		actualPage++;
+		const doSkip  = page.querySelector('.skipCounting');
+		const doReset = page.querySelector('.resetCounting');
+
+		if(doReset)
+			mappedPage = 1;
+		if(!doSkip && !doReset)
+			mappedPage++;
+
+		pageMap[actualPage] = {
+			mappedPage : mappedPage,
+			showPage   : !doSkip
+		};
+	});
+	return pageMap;
+};
+
+const getMarkdown = (headings, pageMap)=>{
+	const levelPad    = ['- ###', '  - ####', '    -', '      -', '        -', '          -'];
+
+	const allMarkdown = [];
+	const depthChain  = [0];
+
+	headings.forEach((heading)=>{
+		const page       = parseInt(heading.closest('.page').id?.replace(/^p/, ''));
+		const mappedPage = pageMap[page].mappedPage;
+		const showPage   = pageMap[page].showPage;
+		const title      = heading.textContent.trim();
+		const ToCExclude = getComputedStyle(heading).getPropertyValue('--TOC');
+		const depth      = parseInt(heading.tagName.substring(1));
+
+		if(!title || !showPage || ToCExclude == 'exclude')
+			return;
+
+		//If different header depth than last, remove indents until nearest higher-level header, then indent once
+		if(depth !== depthChain[depthChain.length -1]) {
+			while (depth <= depthChain[depthChain.length - 1]) {
+				depthChain.pop();
 			}
-			recursiveAdd(title, page, targetDepth, _.last(child).children, curDepth+1,);
+			depthChain.push(depth);
 		}
-	};
 
-	const res = [];
+		const markdown = `${levelPad[depthChain.length - 2]} [{{ ${title}}}{{ ${mappedPage}}}](#p${page})`;
+		allMarkdown.push(markdown);
+	});
+	return allMarkdown.join('\n');
+};
 
+const getTOC = ()=>{
 	const iframe = document.getElementById('BrewRenderer');
 	const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
 	const headings = iframeDocument.querySelectorAll('h1, h2, h3, h4, h5, h6');
-	const headerDepth = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'];
+	const pages    = iframeDocument.querySelectorAll('.page');
 
-	_.each(headings, (heading)=>{
-		const onPage = parseInt(heading.closest('.page').id?.replace(/^p/, ''));
-		const ToCExclude = getComputedStyle(heading).getPropertyValue('--TOC');
-
-		if(ToCExclude != 'exclude') {
-			recursiveAdd(heading.textContent.trim(), onPage, headerDepth.indexOf(heading.tagName), res);
-		}
-	});
-	return res;
-};
-
-
-const ToCIterate = (entries, curDepth=0)=>{
-	const levelPad = ['- ###', '  - ####', '    - ', '      - ', '        - ', '          - '];
-	const toc = [];
-	if(entries.title !== null){
-		toc.push(`${levelPad[curDepth]} [{{ ${entries.title}}}{{ ${entries.page}}}](#p${entries.page})`);
-	}
-	if(entries.children.length) {
-		_.each(entries.children, (entry, idx)=>{
-			const children = ToCIterate(entry, entry.title == null ? curDepth : curDepth+1);
-			if(children.length) {
-				toc.push(...children);
-			}
-		});
-	}
-	return toc;
+	const pageMap = mapPages(pages);
+	return getMarkdown(headings, pageMap);
 };
 
 module.exports = function(props){
-	const pages = props.brew.text.split('\\page');
-	const TOC = getTOC(pages);
-	const markdown = _.reduce(TOC, (r, g1, idx1)=>{
-		r.push(ToCIterate(g1).join('\n'));
-		return r;
-	}, []).join('\n');
+	const TOC = getTOC();
 
 	return dedent`
 		{{toc,wide
 		# Contents
 
-		${markdown}
+		${TOC}
 		}}
 		\n`;
-};
+};

themes/V3/5ePHB/style.less

@@ -11,6 +11,7 @@
 	--HB_Color_CaptionText           : #766649; // Brown
 	--HB_Color_WatercolorStain       : #BBAD82; // Light brown
 	--HB_Color_Footnotes             : #C9AD6A; // Gold
+	--TOC                            : 'include';
 }
 
 .useSansSerif() {
@@ -797,7 +798,7 @@
 // *****************************/
 
 // Default Exclusions
-// Anything not exlcuded is included, default Headers are H1, H2, and H3.
+// Anything not excluded is included, default Headers are H1, H2, and H3.
 h4,
 h5,
 h6,
@@ -808,12 +809,23 @@ h6,
 .noToC,
 .toc { --TOC: exclude; }
 
-.tocDepthH2 :is(h1, h2) {--TOC: include; }
-.tocDepthH3 :is(h1, h2, h3) {--TOC: include; }
-.tocDepthH4 :is(h1, h2, h3, h4) {--TOC: include; }
-.tocDepthH5 :is(h1, h2, h3, h4, h5) {--TOC: include; }
-.tocDepthH6 :is(h1, h2, h3, h4, h5, h6) {--TOC: include; }
 
+// Brew level default inclusion changes.
+// These add Headers 'back' to inclusion.
+.pages:has(.tocGlobalH4) {
+	h4 {--TOC: include; }
+}
+
+.pages:has(.tocGlobalH5) {
+	h4, h5 {--TOC: include; }
+}
+
+.pages:has(.tocGlobalH6) {
+	h4, h5, h6 {--TOC: include; }
+}
+
+// Block level inclusion changes
+// These include either a single  (include) or a range (depth)
 .tocIncludeH1 h1 {--TOC: include; }
 .tocIncludeH2 h2 {--TOC: include; }
 .tocIncludeH3 h3 {--TOC: include; }
@@ -821,6 +833,21 @@ h6,
 .tocIncludeH5 h5 {--TOC: include; }
 .tocIncludeH6 h6 {--TOC: include; }
 
+.tocDepthH2 :is(h1, h2) {--TOC: include; }
+.tocDepthH3 :is(h1, h2, h3) {--TOC: include; }
+.tocDepthH4 :is(h1, h2, h3, h4) {--TOC: include; }
+.tocDepthH5 :is(h1, h2, h3, h4, h5) {--TOC: include; }
+.tocDepthH6 :is(h1, h2, h3, h4, h5, h6) {--TOC: include; }
+
+// Block level exclusion changes
+// These exclude a single block level
+.tocExcludeH1 h1 {--TOC: exclude; }
+.tocExcludeH2 h2 {--TOC: exclude; }
+.tocExcludeH3 h3 {--TOC: exclude; }
+.tocExcludeH4 h4 {--TOC: exclude; }
+.tocExcludeH5 h5 {--TOC: exclude; }
+.tocExcludeH6 h6 {--TOC: exclude; }
+
 .page:has(.partCover) {
 	--TOC: exclude;
 	& h1 {

themes/V3/Blank/snippets.js

@@ -23,14 +23,30 @@ module.exports = [
 				gen  : '\n\\page\n'
 			},
 			{
-				name : 'Page Number',
-				icon : 'fas fa-bookmark',
-				gen  : '{{pageNumber 1}}\n'
-			},
-			{
-				name : 'Auto-incrementing Page Number',
-				icon : 'fas fa-sort-numeric-down',
-				gen  : '{{pageNumber,auto}}\n'
+				name        : 'Page Numbering',
+				icon        : 'fas fa-bookmark',
+				subsnippets : [
+					{
+						name : 'Page Number',
+						icon : 'fas fa-bookmark',
+						gen  : '{{pageNumber 1}}\n'
+					},
+					{
+						name : 'Auto-incrementing Page Number',
+						icon : 'fas fa-sort-numeric-down',
+						gen  : '{{pageNumber,auto}}\n'
+					},
+					{
+						name : 'Skip Page Number Increment this Page',
+						icon : 'fas fa-xmark',
+						gen  : '{{skipCounting}}\n'
+					},
+					{
+						name : 'Restart Numbering',
+						icon : 'fas fa-arrow-rotate-left',
+						gen  : '{{resetCounting}}\n'
+					},
+				]
 			},
 			{
 				name        : 'Footer',
@@ -352,6 +368,11 @@ module.exports = [
 				icon : 'font MrEavesRemake',
 				gen	 : dedent`{{font-family:MrEavesRemake Dummy Text}}`
 			},
+			{
+				name : 'Pagella',
+				icon : 'font Pagella',
+				gen	 : dedent`{{font-family:Pagella Dummy Text}}`
+			},
 			{
 				name : 'Solbera Imitation',
 				icon : 'font SolberaImitationRemake',
@@ -410,22 +431,40 @@ module.exports = [
 		]
 	},
 
-	/**************** PAGE *************/
+	/**************** LAYOUT *************/
 
 	{
 		groupName : 'Print',
 		icon      : 'fas fa-print',
 		view      : 'style',
 		snippets  : [
+			{
+				name : 'A3 Page Size',
+				icon : 'far fa-file',
+				gen  : dedent`/* A3 Page Size */
+					.page {
+						width  : 297mm;
+						height : 420mm;
+					}\n\n`,
+			},
 			{
 				name : 'A4 Page Size',
 				icon : 'far fa-file',
 				gen  : dedent`/* A4 Page Size */
-					.page{
+					.page {
 						width  : 210mm;
 						height : 296.8mm;
 					}\n\n`
 			},
+			{
+				name : 'A5 Page Size',
+				icon : 'far fa-file',
+				gen  : dedent`/* A5 Page Size */
+					.page {
+						width  : 148mm;
+						height : 210mm;
+				}\n\n`,
+			},
 			{
 				name : 'Square Page Size',
 				icon : 'far fa-file',
@@ -437,6 +476,17 @@ module.exports = [
 						columns : unset;
 					}\n\n`
 			},
+			{
+				name : 'Card Page Size',
+				icon : 'far fa-file',
+				gen  : dedent`/* Card Size */
+					.page {
+						width     : 63.5mm;
+						height    : 88.9mm;
+						padding	  : 5mm;
+						columns	  : unset;
+					}\n\n`
+			},
 			{
 				name : 'Ink Friendly',
 				icon : 'fas fa-tint',
@@ -452,5 +502,5 @@ module.exports = [
 					}\n\n`
 			},
 		]
-	}
+	},
 ];

themes/V3/Blank/style.less

@@ -1,3 +1,4 @@
+@import (less) './themes/fonts/Blank/fonts.less';
 @import (less) './themes/fonts/5e/fonts.less';
 @import (less) './themes/assets/assets.less';
 @import (less) './themes/fonts/iconFonts/elderberryInn.less';
@@ -12,7 +13,7 @@
 }
 
 @page { margin : 0; }
-body { counter-reset : page-numbers; }
+body { counter-reset : page-numbers 0; }
 * { -webkit-print-color-adjust : exact; }
 
 //*****************************
@@ -51,7 +52,6 @@ body { counter-reset : page-numbers; }
 	height            : 279.4mm;
 	padding           : 1.4cm 1.9cm 1.7cm;
 	overflow          : hidden;
-	counter-increment : page-numbers;
 	background-color  : var(--HB_Color_Background);
 	text-rendering    : optimizeLegibility;
 	contain           : size;
@@ -494,4 +494,13 @@ body { counter-reset : page-numbers; }
 	&:nth-child(even) {
 		.pageNumber { left : 30px; }
 	}
-}
+
+	.resetCounting {
+		counter-set : page-numbers 1;
+	}
+
+	&:not(:has(.skipCounting)) {
+		counter-increment : page-numbers;
+	}
+
+}

themes/fonts/Blank/fonts.less

@@ -0,0 +1,46 @@
+/* 
+TeX Gyre Pagella
+License:
+  % Copyright 2007--2018 for TeX Gyre extensions by B. Jackowski,
+  % J.M. Nowacki et al. (on behalf of TeX Users Groups). Vietnamese
+  % characters were added by Han The Thanh.
+  %
+  % This work can be freely used and distributed under
+  % the GUST Font License (GFL -- see GUST-FONT-LICENSE.txt)
+  % which is actually an instance of the LaTeX Project Public License
+  % (LPPL -- see http://www.latex-project.org/lppl.txt ).
+  %
+  % This work has the maintenance status "maintained". The Current Maintainer
+  % of this work is Bogus\l{}aw Jackowski and Janusz M. Nowacki.
+  %
+  % This work consists of the files listed
+  % in the MANIFEST-TeX-Gyre-Pagella.txt file.
+*/
+
+@font-face {
+	font-family: Pagella;
+	src: url('../../../fonts/Blank/texgyrepagella-regular.woff2');
+	font-weight: normal;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: Pagella;
+	src: url('../../../fonts/Blank/texgyrepagella-bold.woff2');
+	font-weight: bold;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: Pagella;
+	src: url('../../../fonts/Blank/texgyrepagella-italic.woff2');
+	font-weight: normal;
+	font-style: italic;
+}
+
+@font-face {
+	font-family: Pagella;
+	src: url('../../../fonts/Blank/texgyrepagella-bolditalic.woff2');
+	font-weight: bold;
+	font-style: italic;
+}