Merge branch 'master' into experimentalHeaderNavigation

.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
@@ -70,15 +70,27 @@ jobs:
       - run:
           name: Test - Hard Breaks
           command: npm run test:hard-breaks
+      - run:
+          name: Test - Non-Breaking Spaces
+          command: npm run test:non-breaking-spaces
       - run:
           name: Test - Variables
           command: npm run test:variables
+      - run:
+          name: Test - Emojis
+          command: npm run test:emojis
       - run:
           name: Test - Routes
           command: npm run test:route
+      - run:
+          name: Test - HTML sanitization
+          command: npm run test:safehtml
       - run:
           name: Test - Coverage
           command: npm run test:coverage
+      - run:
+          name: Test - Content Negotiation
+          command: npm run test:content-negotiation
 
 workflows:
   build_and_test:

.gitattributes

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

.github/pull_request_template.md

@@ -0,0 +1,37 @@
+> [!TIP]
+> 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
+
+_Describe what your PR accomplishes. Consider walking through the main changes to aid reviewers in following your code, especially if it covers multiple files._
+
+## Related Issues or Discussions
+
+> [!CAUTION]
+> If no issue exists yet, create it, and get agreement on the approach (or paste in a previous agreement from chat, etc.) before moving forward. (Experimental PRs are OK without prior discussion, but do not expect to get merged.)
+
+- Closes #
+
+## QA Instructions, Screenshots, Recordings
+
+_Replace this line with instructions on how to test or view your changes, as well as any before/after
+screenshots or recordings for UI changes._
+
+### Reviewer Checklist
+
+_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

babel.config.json

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-transform-runtime",
+    "babel-plugin-transform-import-meta"
+  ]
+}

changelog.md

@@ -81,12 +81,230 @@ pre {
 }
 ```
 
+
 ## changelog
 For a full record of development, visit our [Github Page](https://github.com/naturalcrit/homebrewery).
 
-### Tuesday 8/13/2024 - v3.14.1
-{{taskList
+### Wednesday 11/27/2024 - v3.16.1
 
+{{taskList
+##### 5e-Cleric
+
+* [x] Allow linking to specific HTML IDs via `#ID` at the end of the URL, e.g.: `homebrewery.naturalcrit.com/share/share/a6RCXwaDS58i#p4` to link to Page 4 directly
+
+Fixes issues [#2820](https://github.com/naturalcrit/homebrewery/issues/2820), [#3505](https://github.com/naturalcrit/homebrewery/issues/3505)
+
+* [x] Fix generation of link to certain Google Drive brews
+
+Fixes issue [#3776](https://github.com/naturalcrit/homebrewery/issues/3776)
+
+##### abquintic
+
+* [x] Fix blank pages appearing when pasting text
+
+Fixes issue [#3718](https://github.com/naturalcrit/homebrewery/issues/3718)
+
+##### Gazook89
+
+* [x] Add new brew viewing options to the view toolbar
+- {{fac,single-spread}} {{openSans **SINGLE PAGE**}}
+- {{fac,facing-spread}} {{openSans **TWO PAGE**}}
+- {{fac,flow-spread}} {{openSans **GRID**}}
+
+Fixes issue [#1379](https://github.com/naturalcrit/homebrewery/issues/1379)
+
+* [x] Updates to tag input boxes
+
+##### G-Ambatte
+
+* [x] Admin tools to fix certain corrupted documents
+
+Fixes issue [#3801](https://github.com/naturalcrit/homebrewery/issues/3801)
+
+* [x] Fix print window being affected by document zoom
+
+Fixes issue [#3744](https://github.com/naturalcrit/homebrewery/issues/3744)
+
+
+##### calculuschild, 5e-Cleric, G-Ambatte, Gazook89, abquintic
+
+* [x] Multiple code refactors, cleanups, and security fixes
+}}
+
+### Saturday 10/12/2024 - v3.16.0
+
+{{taskList
+##### 5e-Cleric
+
+* [x] Added a new API endpoint `/metadata/:shareId` to fetch metadata about individual brews
+
+Fixes issue [#2638](https://github.com/naturalcrit/homebrewery/issues/2638)
+
+* [x] Added A3, A5, and Card page size snippets under {{openSans **:fas_paintbrush: STYLE TAB :fas_arrow_right: :fas_print: PRINT**}}
+
+* [x] Adjust navbar styling for very long titles
+
+Fixes issue [#2071](https://github.com/naturalcrit/homebrewery/issues/2071)
+
+* [x] Added some sorting options to the {{openSans **VAULT** {{fas,fa-dungeon}}}} page
+
+* [x] Fix `language` property not working in share page
+
+Fixes issue [#3776](https://github.com/naturalcrit/homebrewery/issues/3776)
+
+##### abquintic
+
+* [x] New {{openSans **:fas_pencil: TEXT EDITOR :fas_arrow_right: :fas_bookmark: PAGE NUMBER :fas_arrow_right:**}}
+{{openSans **:fas_xmark: SKIP PAGE NUMBER**}} and {{openSans **:fas_arrow_rotate_left: RESTART PAGE NUMBER**}} snippets for more control over automatic page numbering.
+
+Fixes issue [#513](https://github.com/naturalcrit/homebrewery/issues/513)
+
+* [x] New Table of Contents control options via {{openSans **:fas_pencil: TEXT EDITOR :fas_arrow_right: :fas_book: TABLE OF CONTENTS**}} submenus. By default, H1-H3 is included in the ToC generation, but the new options allow marking `{{blocks}}` to include or exclude specific or ranges of contained headers. Also, a global option to increase the default range of H1-H3 to H1-H4/5/6. After applying these markers, you must regenerate the Table of Contents to see the changes.
+
+* [x] Added a ":fas_lock: SYNC VIEWS" button onto the divider bar. When locked, scrolling on either panel will sync the other panel to the same page.
+
+Fixes issue [#241](https://github.com/naturalcrit/homebrewery/issues/241)
+
+##### Gazook89
+
+* [x] Added a :fas_glasses: HIDE button to the page navigation bar
+
+##### G-Ambatte
+
+* [x] Automatic local backups of your files, in case of accidental data loss. Stores up to 5 snapshots of each brew edited in your browser, incrementing from a few minutes old to a maximum of several days. Restore a backup by clicking an entry in the new {{openSans **:fas_clock_rotate_left: HISTORY**}} button in the snippet bar.
+
+Fixes issue [#3070](https://github.com/naturalcrit/homebrewery/issues/3070)
+
+* [x] Fix issue with legacy brews breaking on Share page
+
+Fixes issue [#3764](https://github.com/naturalcrit/homebrewery/issues/3764)
+
+* [x] Fix print size when printing a zoomed document
+
+Fixes issue [#3744](https://github.com/naturalcrit/homebrewery/issues/3744)
+
+##### All
+
+* [x] Background code cleanup, security fixes, dev tool improvements, dependency updates, prep for upcoming features, etc.
+}}
+
+### Wednesday 9/25/2024 - v3.15.1
+
+{{taskList
+##### calculuschild
+
+* [x] Background fixes to handle Google Drive issues
+
+* [x] Remove duplicate error logging
+
+##### calculuschild, 5e-Cleric
+
+* [x] Fix links in {{openSans **RECENT BREWS :fas_clock_rotate_left:**}} and user {{openSans **BREWS :fas_beer_mug_empty:**}} pointing to trashed Google Drive files after transferring from Google to Homebrewery storage
+
+Fixes issue [#3776](https://github.com/naturalcrit/homebrewery/issues/3776)
+}}
+
+\page
+
+### 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
+
+Fixes issues [#3269](https://github.com/naturalcrit/homebrewery/issues/3629)
+
+* [x] Background dependency updates
+
+##### G-Ambatte
+
+* [x] Add route to get brew styling via `/css/shareId`
+
+Fixes issues [#1097](https://github.com/naturalcrit/homebrewery/issues/1097)
+
+* [x] Fix `:emojis:` preventing code folding
+
+Fixes issues [#3604](https://github.com/naturalcrit/homebrewery/issues/3604)
+
+* [x] Fix mask image warping when rotated and stretched
+
+Fixes issues [#3636](https://github.com/naturalcrit/homebrewery/issues/3636)
+
+* [x] Fix Table of Contents uppercasing
+
+Fixes issues [#3572](https://github.com/naturalcrit/homebrewery/issues/3572)
+
+##### abquintic
+
+* [x] Create globally unique Header IDs across pages
+
+Fixes issues [#1430](https://github.com/naturalcrit/homebrewery/issues/1430)
+
+* [x] Fix colon `꞉꞉꞉꞉` being parsed in codeblocks
+
+* [x] Prevent crashes when loading undefined renderer or theme bundle
+
+* [x] Add Jump-To hotkeys
+
+  * Use `CTRL/META + SHIFT + LEFTARROW` to brewJump
+  * Use `CTRL/META + SHIFT + RIGHTARROW` to sourceJump
+
+* [x] Prevent reload from clobbering modified fresh clones
+
+##### 5e-Cleric, Gazook89
+
+* [x] Viewer tools for zoom/page navigation
+}}
+
+### Tuesday 8/13/2024 - v3.14.1
+
+{{taskList
 ##### abquintic
 
 * [x] Allow Table of Contents to flow across columns
@@ -129,16 +347,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
@@ -509,7 +724,7 @@ Fixes issue [#2729](https://github.com/naturalcrit/homebrewery/issues/2729),
 ### Thursday 17/08/2023 - v3.9.2
 {{taskList
 
-##### Calculuschild
+##### calculuschild
 
 * [x] Fix links to certain old Google Drive files
 
@@ -567,7 +782,7 @@ Fixes issue [#1924](https://github.com/naturalcrit/homebrewery/issues/1924)
 ### Friday 02/06/2023 - v3.9.0
 {{taskList
 
-##### Calculuschild
+##### calculuschild
 
 * [x] Fix some files not showing up on userpage when user has a large number of brews in Google Drive
 
@@ -664,7 +879,7 @@ Fixes issues [#2731](https://github.com/naturalcrit/homebrewery/issues/2731)
 ### Monday 13/03/2023 - v3.7.2
 {{taskList
 
-##### Calculuschild
+##### calculuschild
 
 * [x] Fix wide Monster Stat Blocks not spanning columns on Legacy
 }}
@@ -687,7 +902,7 @@ Fixes issues [#1569](https://github.com/naturalcrit/homebrewery/issues/1569)
 * [x] Updated the Google Drive icon
 * [x] Backend fix to unit tests failing intermittently
 
-##### Calculuschild
+##### calculuschild
 
 * [x] Fix PDF pixelation on CoverPage text outlines
 }}
@@ -699,7 +914,7 @@ Fixes issues [#1569](https://github.com/naturalcrit/homebrewery/issues/1569)
 **NOTE:** Some new snippets will now show a {{beta BETA}} tag. Feel free to use them, but be aware we may change how they work depending on your feedback.
 }}
 
-##### Calculuschild
+##### calculuschild
 
 * [x] New {{openSans **IMAGES → WATERCOLOR EDGE** {{fac,mask-edge}} }} and {{openSans **WATERCOLOR CORNER** {{fac,mask-corner}} }} snippets for V3, which adds a stylish watercolor texture to the edge of your images! (Thanks to /u/flamableconcrete on Reddit for providing these image masks!)
 
@@ -843,7 +1058,7 @@ Fixes issues [#1670](https://github.com/naturalcrit/homebrewery/issues/1670)
 ### Thursday 28/10/2022 - v3.3.1
 {{taskList
 
-##### Calculuschild
+##### calculuschild
 
 * [x] Fixes to several broken CSS styles from v3.3.0
 
@@ -858,7 +1073,7 @@ Fixes issues  [#2468](https://github.com/naturalcrit/homebrewery/issues/2468)
 ### Friday 19/10/2022 - v3.3.0
 {{taskList
 
-##### Calculuschild
+##### calculuschild
 
 * [x] Fix for tables broken by Chrome v106
 
@@ -941,7 +1156,7 @@ Fixes issues  [#2317](https://github.com/naturalcrit/homebrewery/issues/2317), [
 ### Wednesday 31/08/2022 - v3.2.1
 {{taskList
 
-##### Calculuschild
+##### calculuschild
 
 * [x] Reference Links should now work inside tables
 
@@ -967,7 +1182,7 @@ Fixes issues  [#2317](https://github.com/naturalcrit/homebrewery/issues/2317), [
 ### Saturday 27/08/2022 - v3.2.0
 {{taskList
 
-##### Calculuschild
+##### calculuschild
 
 * [x] The V3 renderer is now the default for new brews.
 
@@ -994,7 +1209,7 @@ Fixes issues  [#2317](https://github.com/naturalcrit/homebrewery/issues/2317), [
 ### Thursday 09/06/2022 - v3.1.1
 {{taskList
 
-##### Calculuschild:
+##### calculuschild:
 
 * [x] Fixed class table decorations appearing on top of the table in PDF output.
 
@@ -1838,4 +2053,4 @@ Massive changelog incoming:
 
 * Added `phb.standalone.css` plus a build system for creating it
 * Added page numbers and footer text
-* Page accent now flips each page
+* Page accent now flips each 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,5 @@
 require('./brewLookup.less');
+
 const React = require('react');
 const createClass = require('create-react-class');
 const cx    = require('classnames');
@@ -13,22 +14,43 @@ const BrewLookup = createClass({
 	},
 	getInitialState() {
 		return {
-			query     : '',
-			foundBrew : null,
-			searching : false,
-			error     : null
+			query       : '',
+			foundBrew   : null,
+			searching   : false,
+			error       : null,
+			scriptCount : 0
 		};
 	},
 	handleChange(e){
 		this.setState({ query: e.target.value });
 	},
 	lookup(){
-		this.setState({ searching: true, error: null });
+		this.setState({ searching: true, error: null, scriptCount: 0 });
 
 		request.get(`/admin/lookup/${this.state.query}`)
-			.then((res)=>this.setState({ foundBrew: res.body }))
+			.then((res)=>{
+				const foundBrew = res.body;
+				const scriptCheck = foundBrew?.text.match(/(<\/?s)cript/g);
+				this.setState({
+					foundBrew   : foundBrew,
+					scriptCount : scriptCheck?.length || 0,
+				});
+			})
 			.catch((err)=>this.setState({ error: err }))
-			.finally(()=>this.setState({ searching: false }));
+			.finally(()=>{
+				this.setState({
+					searching : false
+				});
+			});
+	},
+
+	async cleanScript(){
+		if(!this.state.foundBrew?.shareId) return;
+
+		await request.put(`/admin/clean/script/${this.state.foundBrew.shareId}`)
+			.catch((err)=>{ this.setState({ error: err }); return; });
+
+		this.lookup();
 	},
 
 	renderFoundBrew(){
@@ -47,12 +69,23 @@ const BrewLookup = createClass({
 				<dt>Share Link</dt>
 				<dd><a href={`/share/${brew.shareId}`} target='_blank' rel='noopener noreferrer'>/share/{brew.shareId}</a></dd>
 
+				<dt>Created Time</dt>
+				<dd>{brew.createdAt ? Moment(brew.createdAt).toLocaleString() : 'No creation date'}</dd>
+
 				<dt>Last Updated</dt>
 				<dd>{Moment(brew.updatedAt).fromNow()}</dd>
 
 				<dt>Num of Views</dt>
 				<dd>{brew.views}</dd>
+
+				<dt>SCRIPT tags detected</dt>
+				<dd>{this.state.scriptCount}</dd>
 			</dl>
+			{this.state.scriptCount > 0 &&
+				<div className='cleanButton'>
+					<button onClick={this.cleanScript}>CLEAN BREW</button>
+				</div>
+			}
 		</div>;
 	},
 

client/admin/brewUtils/brewLookup/brewLookup.less

@@ -0,0 +1,6 @@
+.brewLookup {
+    .cleanButton {
+        display : inline-block;
+        width   : 100%;
+    }
+}

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='dismiss_notif_drive'
+				/>
+			</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>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>
+
+			<dt>Text</dt>
+			<dd>{notification.text || 'No Text'}</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/components/Anchored.jsx

@@ -0,0 +1,96 @@
+import React, { useState, useRef, forwardRef, useEffect, cloneElement, Children } from 'react';
+import './Anchored.less';
+
+// Anchored is a wrapper component that must have as children an <AnchoredTrigger> and a <AnchoredBox> component.
+// AnchoredTrigger must have a unique `id` prop, which is passed up to Anchored, saved in state on mount, and
+// then passed down through props into AnchoredBox.  The `id` is used for the CSS Anchor Positioning properties.
+// **The Anchor Positioning API is not available in Firefox yet**
+// So in Firefox the positioning isn't perfect but is likely sufficient, and FF team seems to be working on the API quickly.
+
+// When Anchor Positioning is added to Firefox, this can also be rewritten using the Popover API-- add the `popover` attribute
+// to the container div, which will render the container in the *top level* and give it better interactions like
+// click outside to dismiss.  **Do not** add without Anchor, though, because positioning is very limited with the `popover`
+// attribute.
+
+
+const Anchored = ({ children })=>{
+	const [visible, setVisible] = useState(false);
+	const [anchorId, setAnchorId] = useState(null);
+	const boxRef = useRef(null);
+	const triggerRef = useRef(null);
+
+	// promote trigger id to Anchored id (to pass it back down to the box as "anchorId")
+	useEffect(()=>{
+		if(triggerRef.current){
+			setAnchorId(triggerRef.current.id);
+		}
+	}, []);
+
+	// close box on outside click or Escape key
+	useEffect(()=>{
+		const handleClickOutside = (evt)=>{
+			if(
+				boxRef.current &&
+				!boxRef.current.contains(evt.target) &&
+				triggerRef.current &&
+				!triggerRef.current.contains(evt.target)
+			) {
+				setVisible(false);
+			}
+		};
+
+		const handleEscapeKey = (evt)=>{
+			if(evt.key === 'Escape') setVisible(false);
+		};
+
+		window.addEventListener('click', handleClickOutside);
+		window.addEventListener('keydown', handleEscapeKey);
+
+		return ()=>{
+			window.removeEventListener('click', handleClickOutside);
+			window.removeEventListener('keydown', handleEscapeKey);
+		};
+	}, []);
+
+	const toggleVisibility = ()=>setVisible((prev)=>!prev);
+
+	// Map children to inject necessary props
+	const mappedChildren = Children.map(children, (child)=>{
+		if(child.type === AnchoredTrigger) {
+			return cloneElement(child, { ref: triggerRef, toggleVisibility, visible });
+		}
+		if(child.type === AnchoredBox) {
+			return cloneElement(child, { ref: boxRef, visible, anchorId });
+		}
+		return child;
+	});
+
+	return <>{mappedChildren}</>;
+};
+
+// forward ref for AnchoredTrigger
+const AnchoredTrigger = forwardRef(({ toggleVisibility, visible, children, className, ...props }, ref)=>(
+	<button
+		ref={ref}
+		className={`anchored-trigger${visible ? ' active' : ''} ${className}`}
+		onClick={toggleVisibility}
+		style={{ anchorName: `--${props.id}` }}   // setting anchor properties here allows greater recyclability.
+		{...props}
+	>
+		{children}
+	</button>
+));
+
+// forward ref for AnchoredBox
+const AnchoredBox = forwardRef(({ visible, children, className, anchorId, ...props }, ref)=>(
+	<div
+		ref={ref}
+		className={`anchored-box${visible ? ' active' : ''} ${className}`}
+		style={{ positionAnchor: `--${anchorId}` }}   // setting anchor properties here allows greater recyclability.
+		{...props}
+	>
+		{children}
+	</div>
+));
+
+export { Anchored, AnchoredTrigger, AnchoredBox };

client/components/Anchored.less

@@ -0,0 +1,13 @@
+
+
+.anchored-box {
+	position:absolute;
+	@supports (inset-block-start: anchor(bottom)){
+		inset-block-start: anchor(bottom);
+	}
+	justify-self: anchor-center;
+	visibility: hidden;
+	&.active {
+		visibility: visible;
+	}
+}

client/components/dialog.jsx

@@ -1,22 +1,26 @@
 // Dialog box, for popups and modal blocking messages
-const React = require('react');
+import React from 'react';
 const { useRef, useEffect } = React;
 
-function Dialog({ dismissKey, closeText = 'Close', blocking = false, ...rest }) {
+function Dialog({ dismisskeys = [], closeText = 'Close', blocking = false, ...rest }) {
 	const dialogRef = useRef(null);
 
 	useEffect(()=>{
-		if(!dismissKey || !localStorage.getItem(dismissKey)) {
+		if(dismisskeys.length !== 0) {
 			blocking ? dialogRef.current?.showModal() : dialogRef.current?.show();
 		}
-	}, []);
+	}, [dialogRef.current, dismisskeys]);
 
 	const dismiss = ()=>{
-		dismissKey && localStorage.setItem(dismissKey, true);
+		dismisskeys.forEach((key)=>{
+			if(key) {
+				localStorage.setItem(key, 'true');
+			}
+		});
 		dialogRef.current?.close();
 	};
 
-	return	(
+	return (
 		<dialog ref={dialogRef} onCancel={dismiss} {...rest}>
 			{rest.children}
 			<button className='dismiss' onClick={dismiss}>

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -1,11 +1,11 @@
 /*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, useMemo, useEffect } = React;
 const _ = require('lodash');
 
 const MarkdownLegacy = require('naturalcrit/markdownLegacy.js');
-const Markdown = require('naturalcrit/markdown.js');
+import Markdown from 'naturalcrit/markdown.js';
 const ErrorBar = require('./errorBar/errorBar.jsx');
 const ToolBar  = require('./toolBar/toolBar.jsx');
 
@@ -18,8 +18,8 @@ const { printCurrentBrew } = require('../../../shared/helpers.js');
 
 import HeaderNav from './headerNav/headerNav.jsx';
 
-const DOMPurify = require('dompurify');
-const purifyConfig = { FORCE_BODY: true, SANITIZE_DOM: false };
+import { safeHTML } from './safeHTML.js';
+
 
 const PAGE_HEIGHT = 1056;
 
@@ -31,6 +31,7 @@ const INITIAL_CONTENT = dedent`
 	<base target=_blank>
 	</head><body style='overflow: hidden'><div></div></body></html>`;
 
+
 //v=====----------------------< Brew Page Component >---------------------=====v//
 const BrewPage = (props)=>{
 	props = {
@@ -38,38 +39,84 @@ const BrewPage = (props)=>{
 		index    : 0,
 		...props
 	};
-	const cleanText = props.contents; //DOMPurify.sanitize(props.contents, purifyConfig);
-	return <div className={props.className} id={`p${props.index + 1}`} >
+	const pageRef = useRef(null);
+	const cleanText = safeHTML(props.contents);
+
+	useEffect(()=>{
+		if(!pageRef.current) return;
+
+		// Observer for tracking pages within the `.pages` div
+		const visibleObserver = new IntersectionObserver(
+			(entries)=>{
+				entries.forEach((entry)=>{
+					if(entry.isIntersecting)
+						props.onVisibilityChange(props.index + 1, true, false); // add page to array of visible pages.
+					else
+						props.onVisibilityChange(props.index + 1, false, false);
+				}
+			)},
+			{ threshold: .3, rootMargin: '0px 0px 0px 0px'  } // detect when >30% of page is within bounds.
+		);
+
+		// Observer for tracking the page at the center of the iframe.
+		const centerObserver = new IntersectionObserver(
+			(entries)=>{
+				entries.forEach((entry)=>{
+					if(entry.isIntersecting)
+						props.onVisibilityChange(props.index + 1, true, true); // Set this page as the center page
+				}
+			)},
+			{ threshold: 0, rootMargin: '-50% 0px -50% 0px' } // Detect when the page is at the center
+		);
+
+		// attach observers to each `.page`
+		visibleObserver.observe(pageRef.current);
+		centerObserver.observe(pageRef.current);
+		return ()=>{
+			visibleObserver.disconnect();
+			centerObserver.disconnect();
+		};
+	}, []);
+
+	return <div className={props.className} id={`p${props.index + 1}`} data-index={props.index} ref={pageRef} style={props.style}>
 	         <div className='columnWrapper' dangerouslySetInnerHTML={{ __html: cleanText }} />
 	       </div>;
 };
 
 
 //v=====--------------------< Brew Renderer Component >-------------------=====v//
-const renderedPages = [];
+let renderedPages = [];
 let rawPages      = [];
 
 const BrewRenderer = (props)=>{
 	props = {
-		text              : '',
-		style             : '',
-		renderer          : 'legacy',
-		theme             : '5ePHB',
-		lang              : '',
-		errors            : [],
-		currentEditorPage : 0,
-		showHeaderNav     : false,
-		themeBundle       : {},
+		text                       : '',
+		style                      : '',
+		renderer                   : 'legacy',
+		theme                      : '5ePHB',
+		lang                       : '',
+		errors                     : [],
+		currentEditorCursorPageNum : 1,
+		currentEditorViewPageNum   : 1,
+		currentBrewRendererPageNum : 1,
+		themeBundle                : {},
+		onPageChange               : ()=>{},
+    showHeavderNav             : false,
 		...props
 	};
 
 	const [state, setState] = useState({
-		viewablePageNumber : 0,
-		height             : PAGE_HEIGHT,
-		isMounted          : false,
-		visibility         : 'hidden',
-		zoom               : 100,
-		currentPageNumber  : 1,
+		isMounted    : false,
+		visibility   : 'hidden',
+		visiblePages : [],
+		centerPage   : 1
+	});
+
+	const [displayOptions, setDisplayOptions] = useState({
+		zoomLevel    : 100,
+		spread       : 'single',
+		startOnRight : true,
+		pageShadows  : true
 	});
 
 	const mainRef  = useRef(null);
@@ -81,36 +128,31 @@ const BrewRenderer = (props)=>{
 		rawPages = props.text.split(/^\\page$/gm);
 	}
 
-	useEffect(()=>{ // Unmounting steps
-		return ()=>{window.removeEventListener('resize', updateSize);};
-	}, []);
+	const handlePageVisibilityChange = (pageNum, isVisible, isCenter)=>{
+		setState((prevState)=>{
+			const updatedVisiblePages = new Set(prevState.visiblePages);
+			if(!isCenter)
+				isVisible ? updatedVisiblePages.add(pageNum) : updatedVisiblePages.delete(pageNum);
 
-	const updateSize = ()=>{
-		setState((prevState)=>({
-			...prevState,
-			height : mainRef.current.parentNode.clientHeight,
-		}));
-	};
+			return {
+				...prevState,
+				visiblePages : [...updatedVisiblePages].sort((a, b)=>a - b),
+				centerPage   : isCenter ? pageNum : prevState.centerPage
+			};
+		});
 
-	const getCurrentPage = (e)=>{
-		const { scrollTop, clientHeight, scrollHeight } = e.target;
-		const totalScrollableHeight = scrollHeight - clientHeight;
-		const currentPageNumber = Math.ceil((scrollTop / totalScrollableHeight) * rawPages.length);
-
-		setState((prevState)=>({
-			...prevState,
-			currentPageNumber : currentPageNumber || 1
-		}));
+		if(isCenter)
+			props.onPageChange(pageNum);
 	};
 
 	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;
@@ -123,19 +165,27 @@ const BrewRenderer = (props)=>{
 	};
 
 	const renderStyle = ()=>{
-		const cleanStyle = props.style; //DOMPurify.sanitize(props.style, purifyConfig);
 		const themeStyles = props.themeBundle?.joinedStyles ?? '<style>@import url("/themes/V3/Blank/style.css");</style>';
-		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `${themeStyles} \n\n <style> ${cleanStyle} </style>` }} />;
+		const cleanStyle = safeHTML(`${themeStyles} \n\n <style> ${props.style} </style>`);
+		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: cleanStyle }} />;
 	};
 
 	const renderPage = (pageText, index)=>{
+
+		const styles = {
+			...(!displayOptions.pageShadows ? { boxShadow: 'none' } : {})
+			// Add more conditions as needed
+		};
+
 		if(props.renderer == 'legacy') {
 			const html = MarkdownLegacy.render(pageText);
-			return <BrewPage className='page phb' index={index} key={index} contents={html} />;
+
+			return <BrewPage className='page phb' index={index} key={index} contents={html} style={styles} onVisibilityChange={handlePageVisibilityChange} />;
 		} else {
 			pageText += `\n\n&nbsp;\n\\column\n&nbsp;`; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
 			const html = Markdown.render(pageText, index);
-			return <BrewPage className='page' index={index} key={index} contents={html} />;
+
+			return <BrewPage className='page' index={index} key={index} contents={html} style={styles} onVisibilityChange={handlePageVisibilityChange} />;
 		}
 	};
 
@@ -147,7 +197,8 @@ 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);
+		if(rawPages.length > props.currentEditorCursorPageNum -1)
+			renderedPages[props.currentEditorCursorPageNum - 1] = renderPage(rawPages[props.currentEditorCursorPageNum - 1], props.currentEditorCursorPageNum - 1);
 
 		_.forEach(rawPages, (page, index)=>{
 			if((isInView(index) || !renderedPages[index]) && typeof window !== 'undefined'){
@@ -167,10 +218,30 @@ const BrewRenderer = (props)=>{
 		}
 	};
 
+	const scrollToHash = (hash)=>{
+		if(!hash) return;
+
+		const iframeDoc = document.getElementById('BrewRenderer').contentDocument;
+		let anchor = iframeDoc.querySelector(hash);
+
+		if(anchor) {
+			anchor.scrollIntoView({ behavior: 'smooth' });
+		} else {
+			// Use MutationObserver to wait for the element if it's not immediately available
+			new MutationObserver((mutations, obs)=>{
+				anchor = iframeDoc.querySelector(hash);
+				if(anchor) {
+					anchor.scrollIntoView({ behavior: 'smooth' });
+					obs.disconnect();
+				}
+			}).observe(iframeDoc, { childList: true, subtree: true });
+		}
+	};
+
 	const frameDidMount = ()=>{	//This triggers when iFrame finishes internal "componentDidMount"
+		scrollToHash(window.location.hash);
+
 		setTimeout(()=>{	//We still see a flicker where the style isn't applied yet, so wait 100ms before showing iFrame
-			updateSize();
-			window.addEventListener('resize', updateSize);
 			renderPages(); //Make sure page is renderable before showing
 			setState((prevState)=>({
 				...prevState,
@@ -185,19 +256,30 @@ const BrewRenderer = (props)=>{
 		document.dispatchEvent(new MouseEvent('click'));
 	};
 
-	//Toolbar settings:
-	const handleZoom = (newZoom)=>{
-		setState((prevState)=>({
-			...prevState,
-			zoom : newZoom
-		}));
+	const handleDisplayOptionsChange = (newDisplayOptions)=>{
+		setDisplayOptions(newDisplayOptions);
 	};
 
+	const pagesStyle = {
+		zoom      : `${displayOptions.zoomLevel}%`,
+		columnGap : `${displayOptions.columnGap}px`,
+		rowGap    : `${displayOptions.rowGap}px`
+	};
+
+	const styleObject = {};
+
+	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='%23fff7' font-size='20'>${global.config.deployment}</text></svg>")`;
+	}
+
+	const renderedStyle = useMemo(()=>renderStyle(), [props.style, props.themeBundle]);
+	renderedPages = useMemo(()=>renderPages(), [props.text, displayOptions]);
+
 	return (
 		<>
 			{/*render dummy page while iFrame is mounting.*/}
 			{!state.isMounted
-				? <div className='brewRenderer' onScroll={getCurrentPage}>
+				? <div className='brewRenderer'>
 					<div className='pages'>
 						{renderDummyPage(1)}
 					</div>
@@ -210,7 +292,7 @@ const BrewRenderer = (props)=>{
 				<NotificationPopup />
 			</div>
 
-			<ToolBar onZoomChange={handleZoom} currentPage={state.currentPageNumber}  totalPages={rawPages.length}/>
+			<ToolBar displayOptions={displayOptions} onDisplayOptionsChange={handleDisplayOptionsChange} visiblePages={state.visiblePages.length > 0 ? state.visiblePages : [state.centerPage]} totalPages={rawPages.length}/>
 
 			{/*render in iFrame so broken code doesn't crash the site.*/}
 			<Frame id='BrewRenderer' initialContent={INITIAL_CONTENT}
@@ -218,19 +300,19 @@ const BrewRenderer = (props)=>{
 				contentDidMount={frameDidMount}
 				onClick={()=>{emitClick();}}
 			>
-				<div className={'brewRenderer'}
-					onScroll={getCurrentPage}
+				<div className={`brewRenderer ${global.config.deployment && 'deployment'}`}
 					onKeyDown={handleControlKeys}
 					tabIndex={-1}
-					style={{ height: state.height }}>
+					style={ styleObject }
+				>
 
 					{/* Apply CSS from Style tab and render pages from Markdown tab */}
 					{state.isMounted
 						&&
 						<>
-							{renderStyle()}
-							<div className='pages' lang={`${props.lang || 'en'}`} ref={pagesRef} style={{ zoom: `${state.zoom}%` }}>
-								{renderPages()}
+							{renderedStyle}
+							<div className={`pages ${displayOptions.startOnRight ? 'recto' : 'verso'}	${displayOptions.spread}`} lang={`${props.lang || 'en'}`} style={pagesStyle}>
+								{renderedPages}
 							</div>
 						</>
 					}

client/homebrew/brewRenderer/brewRenderer.less

@@ -3,8 +3,45 @@
 .brewRenderer {
 	overflow-y    : scroll;
 	will-change   : transform;
+	padding-top   : 60px;
+	height        : 100vh;
+	&:has(.facing, .flow) {
+		padding : 60px 30px;
+	}
+	&.deployment {
+		background-color: darkred;
+	}
 	:where(.pages) {
-		margin : 30px 0px;
+		&.facing {
+			display: grid; 
+			grid-template-columns: repeat(2, auto); 
+			grid-template-rows: repeat(3, auto); 
+			gap: 10px 10px; 
+			justify-content: safe center;
+			&.recto .page:first-child {
+				// sets first page on 'right' ('recto') of the preview, as if for a Cover page.  
+				// todo: add a checkbox to toggle this setting
+				grid-column-start: 2; 
+			}
+			& :where(.page) {
+				margin-left: unset !important;
+				margin-right: unset !important;
+			}
+		}
+
+		&.flow {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 10px;
+			justify-content: safe center;
+			& :where(.page) {
+				flex: 0 0 auto;
+				margin-left: unset !important;
+				margin-right: unset !important;
+			}
+
+		}
+
 		& > :where(.page) {
 			width         : 215.9mm;
 			height        : 279.4mm;
@@ -13,6 +50,9 @@
 			margin-left   : auto;
 			box-shadow    : 1px 4px 14px #000000;
 		}
+		*[id] {
+			scroll-margin-top:100px;
+		}
 	}
 	&::-webkit-scrollbar {
 		width : 20px;
@@ -39,6 +79,7 @@
 		overflow-y  : unset;
 		.pages {
 			margin : 0px;
+			zoom: 100% !important;
 			& > .page { box-shadow : unset; }
 		}
 	}

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -1,43 +1,62 @@
 require('./notificationPopup.less');
-const React = require('react');
-const _     = require('lodash');
+import React, { useEffect, useState } from 'react';
+import request from '../../utils/request-middleware.js';
 
 import Dialog from '../../../components/dialog.jsx';
 
-const DISMISS_KEY = 'dismiss_notification12-04-23';
 const DISMISS_BUTTON = <i className='fas fa-times dismiss' />;
 
 const NotificationPopup = ()=>{
-	return <Dialog className='notificationPopup' dismissKey={DISMISS_KEY} closeText={DISMISS_BUTTON} >
+	const [notifications, setNotifications] = useState([]);
+	const [dissmissKeyList, setDismissKeyList] = useState([]);
+	const [error, setError] = useState(null);
+
+	useEffect(()=>{
+		getNotifications();
+	}, []);
+
+	const getNotifications = async ()=>{
+		setError(null);
+		try {
+			const res = await request.get('/admin/notification/all');
+			pickActiveNotifications(res.body || []);
+		} catch (err) {
+			console.log(err);
+			setError(`Error looking up notifications: ${err?.response?.body?.message || err.message}`);
+		}
+	};
+
+	const pickActiveNotifications = (notifs)=>{
+		const now = new Date();
+		const filteredNotifications = notifs.filter((notification)=>{
+			const startDate = new Date(notification.startAt);
+			const stopDate = new Date(notification.stopAt);
+			const dismissed = localStorage.getItem(notification.dismissKey) ? true : false;
+			return now >= startDate && now <= stopDate && !dismissed;
+		});
+		setNotifications(filteredNotifications);
+		setDismissKeyList(filteredNotifications.map((notif)=>notif.dismissKey));
+	};
+
+	const renderNotificationsList = ()=>{
+		if(error) return <div className='error'>{error}</div>;
+
+		return notifications.map((notification)=>(
+			<li key={notification.dismissKey} >
+				<em>{notification.title}</em><br />
+				<p dangerouslySetInnerHTML={{ __html: notification.text }}></p>
+			</li>
+		));
+	};
+
+	return <Dialog className='notificationPopup' dismisskeys={dissmissKeyList} closeText={DISMISS_BUTTON} >
 		<div className='header'>
 			<i className='fas fa-info-circle info'></i>
 			<h3>Notice</h3>
 			<small>This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind:</small>
 		</div>
 		<ul>
-			<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>
-
-			<li key='googleDriveFolder'>
-				<em>Don't delete your Homebrewery folder on Google Drive!</em> <br />
-				We have had several reports of users losing their brews, not realizing
-				that they had deleted the files on their Google Drive. If you have a Homebrewery folder
-				on your Google Drive with *.txt files inside, <em>do not delete it</em>!
-				We cannot help you recover files that you have deleted from your own
-				Google Drive.
-			</li>
-
-			<li key='faq'>
-				<em>Protect your work! </em> <br />
-				If you opt not to use your Google Drive, keep in mind that we do not save a history of your projects. Please make frequent backups of your brews!&nbsp;
-				<a target='_blank' href='https://www.reddit.com/r/homebrewery/comments/adh6lh/faqs_psas_announcements/'>
-					See the FAQ
-				</a> to learn how to avoid losing your work!
-			</li>
+			{renderNotificationsList()}
 		</ul>
 	</Dialog>;
 };

client/homebrew/brewRenderer/notificationPopup/notificationPopup.less

@@ -55,7 +55,10 @@
 			margin-top  : 1.4em;
 			font-size   : 0.8em;
 			line-height : 1.4em;
-			em { font-weight : 800; }
+			em { 
+				text-transform:capitalize;
+				font-weight : 800;
+			}
 		}
 	}
 }

client/homebrew/brewRenderer/safeHTML.js

@@ -0,0 +1,46 @@
+// Derived from the vue-html-secure package, customized for Homebrewery
+
+let doc = null;
+let div = null;
+
+function safeHTML(htmlString) {
+	// If the Document interface doesn't exist, exit
+	if(typeof document == 'undefined') return null;
+	// If the test document and div don't exist, create them
+	if(!doc) doc = document.implementation.createHTMLDocument('');
+	if(!div) div = doc.createElement('div');
+
+	// Set the test div contents to the evaluation string
+	div.innerHTML = htmlString;
+	// Grab all nodes from the test div
+	const elements = div.querySelectorAll('*');
+
+	// Blacklisted tags
+	const blacklistTags = ['script', 'noscript', 'noembed'];
+	// Tests to remove attributes
+	const blacklistAttrs = [
+		(test)=>{return test.localName.indexOf('on') == 0;},
+		(test)=>{return test.localName.indexOf('type') == 0 && test.value.match(/submit/i);},
+		(test)=>{return test.value.replace(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205f\u3000]/g, '').toLowerCase().trim().indexOf('javascript:') == 0;}
+	];
+
+
+	elements.forEach((element)=>{
+		// Check each element for blacklisted type
+		if(blacklistTags.includes(element?.localName?.toLowerCase())) {
+			element.remove();
+			return;
+		}
+		// Check remaining elements for blacklisted attributes
+		for (const attribute of element.attributes){
+			if(blacklistAttrs.some((test)=>{return test(attribute);})) {
+				element.removeAttribute(attribute.localName);
+				break;
+			};
+		};
+	});
+
+	return div.innerHTML;
+};
+
+module.exports.safeHTML = safeHTML;

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -1,26 +1,31 @@
+/* eslint-disable max-lines */
 require('./toolBar.less');
 const React = require('react');
 const { useState, useEffect } = React;
 const _ = require('lodash');
 
+import { Anchored, AnchoredBox, AnchoredTrigger } from '../../../components/Anchored.jsx';
+
 const MAX_ZOOM = 300;
 const MIN_ZOOM = 10;
 
-const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
+const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPages })=>{
 
-	const [zoomLevel, setZoomLevel] = useState(100);
-	const [pageNum, setPageNum]     = useState(currentPage);
+	const [pageNum, setPageNum]     = useState(1);
+	const [toolsVisible, setToolsVisible] = useState(true);
 
 	useEffect(()=>{
-		onZoomChange(zoomLevel);
-	}, [zoomLevel]);
+		// format multiple visible pages as a range (e.g. "150-153")
+		const pageRange = visiblePages.length === 1 ? `${visiblePages[0]}` : `${visiblePages[0]} - ${visiblePages.at(-1)}`;
+		setPageNum(pageRange);
+	}, [visiblePages]);
 
-	useEffect(()=>{
-		setPageNum(currentPage);
-	}, [currentPage]);
+	const handleZoomButton = (zoom)=>{
+		handleOptionChange('zoomLevel', _.round(_.clamp(zoom, MIN_ZOOM, MAX_ZOOM)));
+	};
 
-	const handleZoomButton = (delta)=>{
-		setZoomLevel(_.clamp(zoomLevel + delta, MIN_ZOOM, MAX_ZOOM));
+	const handleOptionChange = (optionKey, newValue)=>{
+		onDisplayOptionsChange({ ...displayOptions, [optionKey]: newValue });
 	};
 
 	const handlePageInput = (pageInput)=>{
@@ -28,38 +33,89 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 			setPageNum(parseInt(pageInput)); // input type is 'text', so `page` comes in as a string, not number.
 	};
 
+	// scroll to a page, used in the Prev/Next Page buttons.
 	const scrollToPage = (pageNumber)=>{
+		if(typeof pageNumber !== 'number') return;
 		pageNumber = _.clamp(pageNumber, 1, totalPages);
 		const iframe = document.getElementById('BrewRenderer');
 		const brewRenderer = iframe?.contentWindow?.document.querySelector('.brewRenderer');
 		const page = brewRenderer?.querySelector(`#p${pageNumber}`);
 		page?.scrollIntoView({ block: 'start' });
-		setPageNum(pageNumber);
+	};
+
+	const calculateChange = (mode)=>{
+		const iframe = document.getElementById('BrewRenderer');
+		const iframeWidth = iframe.getBoundingClientRect().width;
+		const iframeHeight = iframe.getBoundingClientRect().height;
+		const pages = iframe.contentWindow.document.getElementsByClassName('page');
+
+		let desiredZoom = 0;
+
+		if(mode == 'fill'){
+			// find widest page, in case pages are different widths, so that the zoom is adapted to not cut the widest page off screen.
+			const widestPage = _.maxBy([...pages], 'offsetWidth').offsetWidth;
+
+			desiredZoom = (iframeWidth / widestPage) * 100;
+
+		} else if(mode == 'fit'){
+			let minDimRatio;
+			// find the page with the largest single dim (height or width) so that zoom can be adapted to fit it.
+			if(displayOptions.spread === 'facing')
+				minDimRatio = [...pages].reduce((minRatio, page)=>Math.min(minRatio, iframeWidth / page.offsetWidth / 2), Infinity);    // if 'facing' spread, fit two pages in view
+			else 
+				minDimRatio = [...pages].reduce((minRatio, page)=>Math.min(minRatio, iframeWidth / page.offsetWidth, iframeHeight / page.offsetHeight), Infinity);
+
+			desiredZoom = minDimRatio * 100;
+		}
+
+		const margin = 5;  // extra space so page isn't edge to edge (not truly "to fill")
+
+		const deltaZoom = (desiredZoom - displayOptions.zoomLevel) - margin;
+		return deltaZoom;
 	};
 
 	return (
-		<div className='toolBar'>
+		<div id='preview-toolbar' className={`toolBar ${toolsVisible ? 'visible' : 'hidden'}`} role='toolbar'>
+			<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'>
+			<div className='group' role='group' aria-label='Zoom' aria-hidden={!toolsVisible}>
+				<button
+					id='fill-width'
+					className='tool'
+					title='Set zoom to fill preview with one page'
+					onClick={()=>handleZoomButton(displayOptions.zoomLevel + calculateChange('fill'))}
+				>
+					<i className='fac fit-width' />
+				</button>
+				<button
+					id='zoom-to-fit'
+					className='tool'
+					title='Set zoom to fit entire page in preview'
+					onClick={()=>handleZoomButton(displayOptions.zoomLevel + calculateChange('fit'))}
+				>
+					<i className='fac zoom-to-fit' />
+				</button>
 				<button
 					id='zoom-out'
 					className='tool'
-					onClick={()=>handleZoomButton(-20)}
-					disabled={zoomLevel <= MIN_ZOOM}
+					onClick={()=>handleZoomButton(displayOptions.zoomLevel - 20)}
+					disabled={displayOptions.zoomLevel <= MIN_ZOOM}
+					title='Zoom Out'
 				>
 					<i className='fas fa-magnifying-glass-minus' />
 				</button>
 				<input
 					id='zoom-slider'
-					className='range-input tool'
+					className='range-input tool hover-tooltip'
 					type='range'
 					name='zoom'
+					title='Set Zoom'
 					list='zoomLevels'
 					min={MIN_ZOOM}
 					max={MAX_ZOOM}
 					step='1'
-					value={zoomLevel}
-					onChange={(e)=>setZoomLevel(parseInt(e.target.value))}
+					value={displayOptions.zoomLevel}
+					onChange={(e)=>handleZoomButton(parseInt(e.target.value))}
 				/>
 				<datalist id='zoomLevels'>
 					<option value='100' />
@@ -68,20 +124,74 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 				<button
 					id='zoom-in'
 					className='tool'
-					onClick={()=>handleZoomButton(20)}
-					disabled={zoomLevel >= MAX_ZOOM}
+					onClick={()=>handleZoomButton(displayOptions.zoomLevel + 20)}
+					disabled={displayOptions.zoomLevel >= MAX_ZOOM}
+					title='Zoom In'
 				>
 					<i className='fas fa-magnifying-glass-plus' />
 				</button>
 			</div>
 
+			{/*v=====----------------------< Spread Controls >---------------------=====v*/}
+			<div className='group' role='group' aria-label='Spread' aria-hidden={!toolsVisible}>
+				<div className='radio-group' role='radiogroup'>
+					<button role='radio'
+						id='single-spread'
+						className='tool'
+						title='Single Page'
+						onClick={()=>{handleOptionChange('spread', 'active');}}
+						aria-checked={displayOptions.spread === 'single'}
+					><i className='fac single-spread' /></button>
+					<button role='radio'
+						id='facing-spread'
+						className='tool'
+						title='Facing Pages'
+						onClick={()=>{handleOptionChange('spread', 'facing');}}
+						aria-checked={displayOptions.spread === 'facing'}
+					><i className='fac facing-spread' /></button>
+					<button role='radio'
+						id='flow-spread'
+						className='tool'
+						title='Flow Pages'
+						onClick={()=>{handleOptionChange('spread', 'flow');}}
+						aria-checked={displayOptions.spread === 'flow'}
+					><i className='fac flow-spread' /></button>
+
+				</div>
+				<Anchored>
+					<AnchoredTrigger id='spread-settings' className='tool' title='Spread options'><i className='fas fa-gear' /></AnchoredTrigger>
+					<AnchoredBox title='Options'>
+						<h1>Options</h1>
+						<label title='Modify the horizontal space between pages.'>
+							Column gap
+							<input type='range' min={0} max={200} defaultValue={10} className='range-input' onChange={(evt)=>handleOptionChange('columnGap', evt.target.value)} />
+						</label>
+						<label title='Modify the vertical space between rows of pages.'>
+							Row gap
+							<input type='range' min={0} max={200} defaultValue={10} className='range-input' onChange={(evt)=>handleOptionChange('rowGap', evt.target.value)} />
+						</label>
+						<label title='Start 1st page on the right side, such as if you have cover page.'>
+							Start on right
+							<input type='checkbox' checked={displayOptions.startOnRight} onChange={()=>{handleOptionChange('startOnRight', !displayOptions.startOnRight);}}
+								title={displayOptions.spread !== 'facing' ? 'Switch to Facing to enable toggle.' : null} />
+						</label>
+						<label title='Toggle the page shadow on every page.'>
+							Page shadows
+							<input type='checkbox' checked={displayOptions.pageShadows} onChange={()=>{handleOptionChange('pageShadows', !displayOptions.pageShadows);}} />
+						</label>
+					</AnchoredBox>
+				</Anchored>
+			</div>
+
 			{/*v=====----------------------< Page Controls >---------------------=====v*/}
-			<div className='group'>
+			<div className='group' role='group'  aria-label='Pages' aria-hidden={!toolsVisible}>
 				<button
 					id='previous-page'
 					className='previousPage tool'
-					onClick={()=>scrollToPage(pageNum - 1)}
-					disabled={pageNum <= 1}
+					type='button'
+					title='Previous Page(s)'
+					onClick={()=>scrollToPage(_.min(visiblePages) - visiblePages.length)}
+					disabled={visiblePages.includes(1)}
 				>
 					<i className='fas fa-arrow-left'></i>
 				</button>
@@ -92,6 +202,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 						className='text-input'
 						type='text'
 						name='page'
+						title='Current page(s) in view'
 						inputMode='numeric'
 						pattern='[0-9]'
 						value={pageNum}
@@ -99,15 +210,18 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 						onChange={(e)=>handlePageInput(e.target.value)}
 						onBlur={()=>scrollToPage(pageNum)}
 						onKeyDown={(e)=>e.key == 'Enter' && scrollToPage(pageNum)}
+						style={{ width: `${pageNum.length}ch` }}
 					/>
-					<span id='page-count'>/ {totalPages}</span>
+					<span id='page-count' title='Total Page Count'>/ {totalPages}</span>
 				</div>
 
 				<button
 					id='next-page'
 					className='tool'
-					onClick={()=>scrollToPage(pageNum + 1)}
-					disabled={pageNum >= totalPages}
+					type='button'
+					title='Next Page(s)'
+					onClick={()=>scrollToPage(_.max(visiblePages) + 1)}
+					disabled={visiblePages.includes(totalPages)}
 				>
 					<i className='fas fa-arrow-right'></i>
 				</button>

client/homebrew/brewRenderer/toolBar/toolBar.less

@@ -1,3 +1,5 @@
+@import (less) './client/icons/customIcons.less';
+
 .toolBar {
 	position         : absolute;
 	z-index          : 1;
@@ -11,8 +13,13 @@
 	height           : auto;
 	padding          : 2px 0;
 	font-family      : 'Open Sans', sans-serif;
+	font-size        : 13px;
 	color            : #CCCCCC;
 	background-color : #555555;
+	& > *:not(.toggleButton) {
+		opacity    : 1;
+		transition : all 0.2s ease;
+	}
 
 	.group {
 		box-sizing       : border-box;
@@ -28,14 +35,78 @@
 		align-items : center;
 	}
 
+	.active, [aria-checked='true'] { background-color : #444444; }
+
+	.anchored-trigger {
+		&.active { background-color : #444444; }
+	}
+
+	.anchored-box {
+		--box-color      : #555555;
+		top              : 30px;
+		display          : flex;
+		flex-direction   : column;
+		gap              : 5px;
+		padding          : 15px;
+		margin-top       : 10px;
+		font-size        : 0.8em;
+		color            : #CCCCCC;
+		background-color : var(--box-color);
+		border-radius    : 5px;
+	
+		h1 {
+			padding-bottom : 0.3em;
+			margin-bottom  : 0.5em;
+			border-bottom  : 1px solid currentColor;
+		}
+	
+		h2 {
+			padding-bottom : 0.3em;
+			margin         : 1em 0 0.5em 0;
+			color          : lightgray;
+			border-bottom  : 1px solid currentColor;
+		}
+	
+		label {
+			display         : flex;
+			gap             : 6px;
+			align-items     : center;
+			justify-content : space-between;
+	
+		}
+		input {
+			height : unset;
+			&[type='range'] { padding : 0; }
+		}
+		&::before {
+			position       : absolute;
+			top            : -20px;
+			left           : 50%;
+			width          : 0px;
+			height         : 0px;
+			pointer-events : none;
+			content        : '';
+			border         : 10px solid transparent;
+			border-bottom  : 10px solid var(--box-color);
+			transform      : translateX(-50%);
+		}
+
+	}
+
+	.radio-group:has(button[role='radio']) {
+		display : flex;
+		height  : 100%;
+		border  : 1px solid #333333;
+	}
+
 	input {
 		position       : relative;
 		height         : 1.5em;
 		padding        : 2px 5px;
 		font-family    : 'Open Sans', sans-serif;
-		color          : #000000;
-		background     : #EEEEEE;
-		border         : 1px solid gray;
+		color          : inherit;
+		background     : #3B3B3B;
+		border         : none;
 		&:focus { outline : 1px solid #D3D3D3; }
 
 		// `.range-input` if generic to all range inputs, or `#zoom-slider` if only for zoom slider
@@ -44,14 +115,14 @@
 			color        : #D3D3D3;
 			accent-color : #D3D3D3;
   
-			&::-webkit-slider-thumb, &::-moz-slider-thumb { 
+			&::-webkit-slider-thumb, &::-moz-range-thumb { 
 				width            : 5px;
 				height           : 5px;
-				cursor           : pointer;
+				cursor           : ew-resize;
 				outline          : none;
 			}
 
-			&:hover::after {
+			&.hover-tooltip[value]:hover::after {
 				position         : absolute;
 				bottom           : -30px;
 				left             : 50%;
@@ -70,29 +141,47 @@
 
 		// `.text-input` if generic to all range inputs, or `#page-input` if only for current page input
 		&#page-input {
-			width        : 4ch;
+			min-width    : 5ch;
 			margin-right : 1ch;
 			text-align   : center;
 		}
 	}
 
 	button {
-		box-sizing       : content-box;
+		box-sizing       : border-box;
 		display          : flex;
 		align-items      : center;
 		justify-content  : center;
 		width            : auto;
 		min-width        : 46px;
 		height           : 100%;
-		padding          : 0 0px;
-		font-weight      : unset;
-		color            : inherit;
-		background-color : unset;
 		&:hover { background-color : #444444; }
-		&:focus { outline : 1px solid #D3D3D3; }
+		&:focus { border  : 1px solid #D3D3D3;outline : none;}
 		&:disabled {
 			color            : #777777;
 			background-color : unset !important;
 		}
+		i { font-size : 1.2em; }
 	}
+
+	&.hidden {
+		flex-wrap        : nowrap;
+		width            : 32px;
+		overflow         : hidden;
+		background-color : unset;
+		opacity          : 0.5;
+		transition       : all 0.3s ease;
+		& > *:not(.toggleButton) {
+			opacity    : 0;
+			transition : all 0.2s ease;
+		}
+	}
+}
+
+button.toggleButton {
+	position  : absolute;
+	left      : 0;
+	z-index   : 5;
+	width     : 32px;
+	min-width : unset;
 }

client/homebrew/editor/editor.jsx

@@ -1,11 +1,10 @@
-/*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');
+import Markdown from '../../../shared/naturalcrit/markdown.js';
 
 const CodeEditor = require('naturalcrit/codeEditor/codeEditor.jsx');
 const SnippetBar = require('./snippetbar/snippetbar.jsx');
@@ -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 || !this.isText() || 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/editor.less

@@ -2,6 +2,7 @@
 .editor {
 	position : relative;
 	width    : 100%;
+	container: editor / inline-size;
 
 	.codeEditor {
 		height            : 100%;

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -3,10 +3,10 @@ require('./metadataEditor.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
-const request = require('../../utils/request-middleware.js');
+import request from '../../utils/request-middleware.js';
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Combobox = require('client/components/combobox.jsx');
-const StringArrayEditor = require('../stringArrayEditor/stringArrayEditor.jsx');
+const TagInput = require('../tagInput/tagInput.jsx');
 
 
 const Themes = require('themes/themes.json');
@@ -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>
@@ -344,10 +341,11 @@ const MetadataEditor = createClass({
 				{this.renderThumbnail()}
 			</div>
 
-			<StringArrayEditor label='tags' valuePatterns={[/^(?:(?:group|meta|system|type):)?[A-Za-z0-9][A-Za-z0-9 \/.\-]{0,40}$/]}
+			<TagInput label='tags' valuePatterns={[/^(?:(?:group|meta|system|type):)?[A-Za-z0-9][A-Za-z0-9 \/.\-]{0,40}$/]}
 				placeholder='add tag' unique={true}
 				values={this.props.metadata.tags}
-				onChange={(e)=>this.handleFieldChange('tags', e)}/>
+				onChange={(e)=>this.handleFieldChange('tags', e)}
+				/>
 
 			<div className='field systems'>
 				<label>systems</label>
@@ -362,28 +360,25 @@ const MetadataEditor = createClass({
 
 			{this.renderRenderOptions()}
 
-			<hr/>
-
-			<h1 className='sectionHead'>Authors</h1>
+			<h2>Authors</h2>
 
 			{this.renderAuthors()}
 
-			<StringArrayEditor label='invited authors' valuePatterns={[/.+/]}
+			<TagInput label='invited authors' valuePatterns={[/.+/]}
 				validators={[(v)=>!this.props.metadata.authors?.includes(v)]}
 				placeholder='invite author' unique={true}
 				values={this.props.metadata.invitedAuthors}
 				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)}/>
+				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;
@@ -65,6 +79,7 @@
 				text-overflow : ellipsis;
 			}
 			button {
+				.colorButton();
 				padding          : 0px 5px;
 				color            : white;
 				background-color : black;
@@ -78,7 +93,6 @@
 			textarea.value {
 				height      : auto;
 				font-family : 'Open Sans', sans-serif;
-				font-size   : 0.8em;
 				resize      : none;
 			}
 		}
@@ -87,12 +101,6 @@
 			z-index   : 200;
 			max-width : 150px;
 		}
-		small {
-			display     : inline-block;
-			font-size   : 0.6em;
-			font-style  : italic;
-			line-height : 1.4em;
-		}
 	}
 
 
@@ -113,18 +121,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;
@@ -136,25 +139,23 @@
 		margin-bottom : 15px;
 		button { width : 100%; }
 		button.publish {
-			.button(@blueLight);
+			.colorButton(@blueLight);
 		}
 		button.unpublish {
-			.button(@silver);
+			.colorButton(@silver);
 		}
 	}
 
 	.delete.field .value {
 		button {
-			.button(@red);
+			.colorButton(@red);
 		}
 	}
 	.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 +166,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 +241,7 @@
 			}
 		}
 	}
+
 	.field .list {
 		display   : flex;
 		flex      : 1 0;
@@ -258,27 +260,26 @@
 			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; }
 		}
 
-		.badge {
+		.tag {
 			padding          : 0.3em;
 			margin           : 2px;
 			font-size        : 0.9em;
 			background-color : #DDDDDD;
 			border-radius    : 0.5em;
 
-			.icon {
-				#groupedIcon; }
+			.icon { #groupedIcon; }
 		}
 
 		.input-group {
@@ -294,17 +295,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);
 		}
 	},
 
@@ -124,70 +150,116 @@ const Snippetbar = createClass({
 
 	renderSnippetGroups : function(){
 		const snippets = this.state.snippets.filter((snippetGroup)=>snippetGroup.view === this.props.view);
+		if(snippets.length === 0) return null;
 
-		return _.map(snippets, (snippetGroup)=>{
-			return <SnippetGroup
-				brew={this.props.brew}
-				groupName={snippetGroup.groupName}
-				icon={snippetGroup.icon}
-				snippets={snippetGroup.snippets}
-				key={snippetGroup.groupName}
-				onSnippetClick={this.handleSnippetClick}
-				cursorPos={this.props.cursorPos}
-			/>;
+		return <div className='snippets'>
+			{_.map(snippets, (snippetGroup)=>{
+				return <SnippetGroup
+					brew={this.props.brew}
+					groupName={snippetGroup.groupName}
+					icon={snippetGroup.icon}
+					snippets={snippetGroup.snippets}
+					key={snippetGroup.groupName}
+					onSnippetClick={this.handleSnippetClick}
+					cursorPos={this.props.cursorPos}
+				/>;
+			})
+			}
+		</div>;
+	},
+
+	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;
 
-		let foldButtons;
-		if(this.props.view == 'text'){
-			foldButtons =
-				<>
-					<div className={`editorTool foldAll ${this.props.foldCode ? 'active' : ''}`}
-						onClick={this.props.foldCode} >
-						<i className='fas fa-compress-alt' />
-					</div>
-					<div className={`editorTool unfoldAll ${this.props.unfoldCode ? 'active' : ''}`}
-						onClick={this.props.unfoldCode} >
-						<i className='fas fa-expand-alt' />
-					</div>
-				</>;
+		
 
-		}
+		return (
+		<div className='editors'>
+			{this.props.view !== 'meta' && <><div className='historyTools'>
+				<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' />
+				</div>
+				<div className={`editorTool redo ${this.props.historySize.redo ? 'active' : ''}`}
+					onClick={this.props.redo} >
+					<i className='fas fa-redo' />
+				</div>
+			</div>
+			<div className='codeTools'>
+			<div className={`editorTool foldAll ${this.props.foldCode ? 'active' : ''}`}
+				onClick={this.props.foldCode} >
+				<i className='fas fa-compress-alt' />
+			</div>
+			<div className={`editorTool unfoldAll ${this.props.unfoldCode ? 'active' : ''}`}
+				onClick={this.props.unfoldCode} >
+				<i className='fas fa-expand-alt' />
+			</div>
+				<div className={`editorTheme ${this.state.themeSelector ? 'active' : ''}`}
+					onClick={this.toggleThemeSelector} >
+					<i className='fas fa-palette' />
+					{this.state.themeSelector && this.renderThemeSelector()}
+				</div>
+			</div></>}
+	
 
-		return <div className='editors'>
-			<div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`}
-				onClick={this.props.undo} >
-				<i className='fas fa-undo' />
-			</div>
-			<div className={`editorTool redo ${this.props.historySize.redo ? 'active' : ''}`}
-				onClick={this.props.redo} >
-				<i className='fas fa-redo' />
-			</div>
-			<div className='divider'></div>
-			{foldButtons}
-			<div className={`editorTool editorTheme ${this.state.themeSelector ? 'active' : ''}`}
-				onClick={this.toggleThemeSelector} >
-				<i className='fas fa-palette' />
-				{this.state.themeSelector && this.renderThemeSelector()}
+			<div className='tabs'>
+				<div className={cx('text', { selected: this.props.view === 'text' })}
+					onClick={()=>this.props.onViewChange('text')}>
+					<i className='fa fa-beer' />
+				</div>
+				<div className={cx('style', { selected: this.props.view === 'style' })}
+					onClick={()=>this.props.onViewChange('style')}>
+					<i className='fa fa-paint-brush' />
+				</div>
+				<div className={cx('meta', { selected: this.props.view === 'meta' })}
+					onClick={()=>this.props.onViewChange('meta')}>
+					<i className='fas fa-info-circle' />
+				</div>
 			</div>
 
-			<div className='divider'></div>
-			<div className={cx('text', { selected: this.props.view === 'text' })}
-				 onClick={()=>this.props.onViewChange('text')}>
-				<i className='fa fa-beer' />
-			</div>
-			<div className={cx('style', { selected: this.props.view === 'style' })}
-				 onClick={()=>this.props.onViewChange('style')}>
-				<i className='fa fa-paint-brush' />
-			</div>
-			<div className={cx('meta', { selected: this.props.view === 'meta' })}
-				onClick={()=>this.props.onViewChange('meta')}>
-				<i className='fas fa-info-circle' />
-			</div>
-		</div>;
+		</div>
+		)
 	},
 
 	render : function(){
@@ -224,8 +296,9 @@ const SnippetGroup = createClass({
 		return _.map(snippets, (snippet)=>{
 			return <div className='snippet' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)}>
 				<i className={snippet.icon} />
-				<span className='name'title={snippet.name}>{snippet.name}</span>
+				<span className={`name${snippet.disabled ? ' disabled' : ''}`} title={snippet.name}>{snippet.name}</span>
 				{snippet.experimental && <span className='beta'>beta</span>}
+				{snippet.disabled     && <span className='beta' title='temporarily disabled due to large slowdown; under re-design'>disabled</span>}
 				{snippet.subsnippets && <>
 					<i className='fas fa-caret-right'></i>
 					<div className='dropdown side'>

client/homebrew/editor/snippetbar/snippetbar.less

@@ -4,82 +4,119 @@
 .snippetBar {
 	@menuHeight      : 25px;
 	position         : relative;
-	height           : @menuHeight;
+	display          : flex;
+	flex-wrap        : wrap-reverse;
+	justify-content  : space-between;
+	height           : auto;
 	color            : black;
 	background-color : #DDDDDD;
 
-	.editors {
-		position        : absolute;
-		top             : 0px;
-		right           : 0px;
+	.snippets {
 		display         : flex;
-		justify-content : space-between;
-		height          : @menuHeight;
-		& > div {
-			width       : @menuHeight;
-			height      : @menuHeight;
-			line-height : @menuHeight;
-			text-align  : center;
-			cursor      : pointer;
-			&:hover,&.selected { background-color : #999999; }
-			&.text {
-				.tooltipLeft('Brew Editor');
-			}
-			&.style {
-				.tooltipLeft('Style Editor');
-			}
-			&.meta {
-				.tooltipLeft('Properties');
-			}
-			&.undo {
-				.tooltipLeft('Undo');
-				font-size : 0.75em;
-				color     : grey;
-				&.active { color : inherit; }
-			}
-			&.redo {
-				.tooltipLeft('Redo');
-				font-size : 0.75em;
-				color     : grey;
-				&.active { color : inherit; }
-			}
-			&.foldAll {
-				.tooltipLeft('Fold All');
-				font-size : 0.75em;
-				color     : inherit;
-			}
-			&.unfoldAll {
-				.tooltipLeft('Unfold All');
-				font-size : 0.75em;
-				color     : inherit;
-			}
-			&.editorTheme {
-				.tooltipLeft('Editor Themes');
-				font-size : 0.75em;
-				color     : black;
-				&.active {
-					position         : relative;
-					background-color : #999999;
+		justify-content : flex-start;
+		min-width       : 327.58px;
+	}
+
+	.editors {
+		display         : flex;
+		justify-content : flex-end;
+		min-width       : 225px;
+
+		&:only-child { margin-left : auto;min-width:unset;}
+
+		>div {
+			display         : flex;
+			flex            : 1;
+			justify-content : space-around;
+
+			&:first-child { border-left : none; }
+
+			& > div {
+				position    : relative;
+				width       : @menuHeight;
+				height      : @menuHeight;
+				line-height : @menuHeight;
+				text-align  : center;
+				cursor      : pointer;
+
+				&.editorTool:not(.active) {
+					cursor:not-allowed;
+				}
+
+				&:hover,&.selected { background-color : #999999; }
+				&.text {
+					.tooltipLeft('Brew Editor');
+				}
+				&.style {
+					.tooltipLeft('Style Editor');
+				}
+				&.meta {
+					.tooltipLeft('Properties');
+				}
+				&.undo {
+					.tooltipLeft('Undo');
+					font-size : 0.75em;
+					color     : grey;
+					&.active { color : inherit; }
+				}
+				&.redo {
+					.tooltipLeft('Redo');
+					font-size : 0.75em;
+					color     : grey;
+					&.active { color : inherit; }
+				}
+				&.foldAll {
+					.tooltipLeft('Fold All');
+					font-size : 0.75em;
+					color     : grey;
+					&.active { color : inherit; }
+				}
+				&.unfoldAll {
+					.tooltipLeft('Unfold All');
+					font-size : 0.75em;
+					color     : grey;
+					&.active { color : inherit; }
+				}
+				&.history {
+					.tooltipLeft('History');
+					position  : relative;
+					font-size : 0.75em;
+					color     : grey;
+					border    : none;
+					&.active { color : inherit; }
+					& > .dropdown {
+						right : -1px;
+						& > .snippet { padding-right : 10px; }
+					}
+				}
+				&.editorTheme {
+					.tooltipLeft('Editor Themes');
+					font-size : 0.75em;
+					color     : black;
+					&.active {
+						position         : relative;
+						background-color : #999999;
+					}
+				}
+				&.divider {
+					width      : 5px;
+					background : linear-gradient(currentColor, currentColor) no-repeat center/1px 100%;
+					&:hover { background-color : inherit; }
 				}
 			}
-			&.divider {
-				width      : 5px;
-				background : linear-gradient(currentColor, currentColor) no-repeat center/1px 100%;
-				&:hover { background-color : inherit; }
+			.themeSelector {
+				position         : absolute;
+				top              : 25px;
+				right            : 0;
+				z-index          : 10;
+				display          : flex;
+				align-items      : center;
+				justify-content  : center;
+				width            : 170px;
+				height           : inherit;
+				background-color : inherit;
 			}
-		}
-		.themeSelector {
-			position         : absolute;
-			top              : 25px;
-			right            : 0;
-			z-index          : 10;
-			display          : flex;
-			align-items      : center;
-			justify-content  : center;
-			width            : 170px;
-			height           : inherit;
-			background-color : inherit;
-		}
+		}		
 	}
 	.snippetBarButton {
 		display        : inline-block;
@@ -89,6 +126,7 @@
 		font-weight    : 800;
 		line-height    : @menuHeight;
 		text-transform : uppercase;
+		text-wrap      : nowrap;
 		cursor         : pointer;
 		&:hover, &.selected { background-color : #999999; }
 		i {
@@ -105,7 +143,7 @@
 		.tooltipLeft('Edit Brew Properties');
 	}
 	.snippetGroup {
-		border-right   : 1px solid currentColor;
+
 		&:hover {
 			& > .dropdown { visibility : visible; }
 		}
@@ -127,11 +165,11 @@
 				cursor      : pointer;
 				.animate(background-color);
 				i {
+					min-width    : 25px;
 					height       : 1.2em;
 					margin-right : 8px;
 					font-size    : 1.2em;
-					min-width: 25px;
-					text-align: center;
+					text-align   : center;
 					& ~ i {
 						margin-right : 0;
 						margin-left  : 5px;
@@ -164,6 +202,7 @@
 					}
 				}
 				.name { margin-right : auto; }
+				.disabled { text-decoration : line-through; }
 				.beta {
 					align-self    : center;
 					padding       : 4px 6px;
@@ -189,4 +228,19 @@
 			}
 		}
 	}
-}
+}
+@container editor (width < 553px) {
+	.snippetBar {
+		.editors { 
+			flex            : 1;
+			justify-content : space-between;
+			border-bottom   : 1px solid;
+		}
+		.snippets { 
+			flex            : 1;
+			justify-content : space-evenly; 
+		}
+		.editors > div.history > .dropdown { right : unset; }
+	}
+}
+

client/homebrew/editor/stringArrayEditor/stringArrayEditor.jsx

@@ -1,149 +0,0 @@
-const React = require('react');
-const createClass = require('create-react-class');
-const _     = require('lodash');
-
-const StringArrayEditor = createClass({
-	displayName     : 'StringArrayEditor',
-	getDefaultProps : function() {
-		return {
-			label         : '',
-			values        : [],
-			valuePatterns : null,
-			validators    : [],
-			placeholder   : '',
-			notes         : [],
-			unique        : false,
-			cannotEdit    : [],
-			onChange      : ()=>{}
-		};
-	},
-
-	getInitialState : function() {
-		return {
-			valueContext : !!this.props.values ? this.props.values.map((value)=>({
-				value,
-				editing : false
-			})) : [],
-			temporaryValue : '',
-			updateValue    : ''
-		};
-	},
-
-	componentDidUpdate : function(prevProps) {
-		if(!_.eq(this.props.values, prevProps.values)) {
-			this.setState({
-				valueContext : this.props.values ? this.props.values.map((newValue)=>({
-					value   : newValue,
-					editing : this.state.valueContext.find(({ value })=>value === newValue)?.editing || false
-				})) : []
-			});
-		}
-	},
-
-	handleChange : function(value) {
-		this.props.onChange({
-			target : {
-				value
-			}
-		});
-	},
-
-	addValue : function(value){
-		this.handleChange(_.uniq([...this.props.values, value]));
-		this.setState({
-			temporaryValue : ''
-		});
-	},
-
-	removeValue : function(index){
-		this.handleChange(this.props.values.filter((_, i)=>i !== index));
-	},
-
-	updateValue : function(value, index){
-		const valueContext = this.state.valueContext;
-		valueContext[index].value = value;
-		valueContext[index].editing = false;
-		this.handleChange(valueContext.map((context)=>context.value));
-		this.setState({ valueContext, updateValue: '' });
-	},
-
-	editValue : function(index){
-		if(!!this.props.cannotEdit && this.props.cannotEdit.includes(this.props.values[index])) {
-			return;
-		}
-		const valueContext = this.state.valueContext.map((context, i)=>{
-			context.editing = index === i;
-			return context;
-		});
-		this.setState({ valueContext, updateValue: this.props.values[index] });
-	},
-
-	valueIsValid : function(value, index) {
-		const values = _.clone(this.props.values);
-		if(index !== undefined) {
-			values.splice(index, 1);
-		}
-		const matchesPatterns = !this.props.valuePatterns || this.props.valuePatterns.some((pattern)=>!!(value || '').match(pattern));
-		const uniqueIfSet = !this.props.unique || !values.includes(value);
-		const passesValidators = !this.props.validators || this.props.validators.every((validator)=>validator(value));
-		return matchesPatterns && uniqueIfSet && passesValidators;
-	},
-
-	handleValueInputKeyDown : function(event, index) {
-		if(event.key === 'Enter') {
-			if(this.valueIsValid(event.target.value, index)) {
-				if(index !== undefined) {
-					this.updateValue(event.target.value, index);
-				} else {
-					this.addValue(event.target.value);
-				}
-			}
-		} else if(event.key === 'Escape') {
-			this.closeEditInput(index);
-		}
-	},
-
-	closeEditInput : function(index) {
-		const valueContext = this.state.valueContext;
-		valueContext[index].editing = false;
-		this.setState({ valueContext, updateValue: '' });
-	},
-
-	render : function() {
-		const valueElements = Object.values(this.state.valueContext).map((context, i)=>context.editing
-			? <React.Fragment key={i}>
-				<div className='input-group'>
-					<input type='text' className={`value ${this.valueIsValid(this.state.updateValue, i) ? '' : 'invalid'}`} autoFocus placeholder={this.props.placeholder}
-						value={this.state.updateValue}
-						onKeyDown={(e)=>this.handleValueInputKeyDown(e, i)}
-						onChange={(e)=>this.setState({ updateValue: e.target.value })}/>
-					{<div className='icon steel' onClick={(e)=>{ e.stopPropagation(); this.closeEditInput(i); }}><i className='fa fa-undo fa-fw'/></div>}
-					{this.valueIsValid(this.state.updateValue, i) ? <div className='icon steel'  onClick={(e)=>{ e.stopPropagation(); this.updateValue(this.state.updateValue, i); }}><i className='fa fa-check fa-fw'/></div> : null}
-				</div>
-			</React.Fragment>
-			: <div className='badge' key={i} onClick={()=>this.editValue(i)}>{context.value}
-				{!!this.props.cannotEdit && this.props.cannotEdit.includes(context.value) ? null : <div className='icon steel' onClick={(e)=>{ e.stopPropagation(); this.removeValue(i); }}><i className='fa fa-times fa-fw'/></div>}
-			</div>
-		);
-
-		return <div className='field'>
-			<label>{this.props.label}</label>
-			<div style={{ flex: '1 0' }}>
-				<div className='list'>
-					{valueElements}
-					<div className='input-group'>
-						<input type='text' className={`value ${this.valueIsValid(this.state.temporaryValue) ? '' : 'invalid'}`} placeholder={this.props.placeholder}
-							   value={this.state.temporaryValue}
-							   onKeyDown={(e)=>this.handleValueInputKeyDown(e)}
-							   onChange={(e)=>this.setState({ temporaryValue: e.target.value })}/>
-						{this.valueIsValid(this.state.temporaryValue) ? <div className='icon steel' onClick={(e)=>{ e.stopPropagation(); this.addValue(this.state.temporaryValue); }}><i className='fa fa-check fa-fw'/></div> : null}
-					</div>
-				</div>
-
-				{this.props.notes ? this.props.notes.map((n, index)=><p key={index}><small>{n}</small></p>) : null}
-			</div>
-		</div>;
-	}
-});
-
-module.exports = StringArrayEditor;

client/homebrew/editor/tagInput/tagInput.jsx

@@ -0,0 +1,105 @@
+require('./tagInput.less');
+const React = require('react');
+const { useState, useEffect } = React;
+const _     = require('lodash');
+
+const TagInput = ({ unique = true, values = [], ...props }) => {
+	const [tempInputText, setTempInputText] = useState('');
+	const [tagList, setTagList] = useState(values.map((value) => ({ value, editing: false })));
+
+	useEffect(()=>{
+		handleChange(tagList.map((context)=>context.value))
+	}, [tagList])
+
+	const handleChange = (value)=>{
+		props.onChange({
+			target : { value }
+		})
+	};
+
+	const handleInputKeyDown = ({ evt, value, index, options = {} }) => {
+		if (_.includes(['Enter', ','], evt.key)) {
+			evt.preventDefault();
+			submitTag(evt.target.value, value, index);
+			if (options.clear) {
+				setTempInputText('');
+			}
+		}
+	};
+
+	const submitTag = (newValue, originalValue, index) => {
+		setTagList((prevContext) => {
+			// remove existing tag
+			if(newValue === null){
+				return [...prevContext].filter((context, i)=>i !== index);
+			}
+			// add new tag
+			if(originalValue === null){
+				return [...prevContext, { value: newValue, editing: false }]
+			}
+			// update existing tag
+			return prevContext.map((context, i) => {
+				if (i === index) {
+					return { ...context, value: newValue, editing: false };
+				}
+				return context;
+			});
+		});
+	};
+
+	const editTag = (index) => {
+		setTagList((prevContext) => {
+			return prevContext.map((context, i) => {
+				if (i === index) {
+					return { ...context, editing: true };
+				}
+				return { ...context, editing: false };
+			});
+		});
+	};
+
+	const renderReadTag = (context, index) => {
+		return (
+			<li key={index}
+				data-value={context.value}
+				className='tag'
+				onClick={() => editTag(index)}>
+				{context.value}
+				<button onClick={(evt)=>{evt.stopPropagation(); submitTag(null, context.value, index)}}><i className='fa fa-times fa-fw'/></button>
+			</li>
+		);
+	};
+
+	const renderWriteTag = (context, index) => {
+		return (
+			<input type='text'
+				key={index}
+				defaultValue={context.value} 
+				onKeyDown={(evt) => handleInputKeyDown({evt, value: context.value, index: index})} 
+				autoFocus 
+			/>
+		);
+	};
+
+	return (
+		<div className='field'>
+			<label>{props.label}</label>
+			<div className='value'>
+				<ul className='list'>
+					{tagList.map((context, index) => { return context.editing ? renderWriteTag(context, index) : renderReadTag(context, index); })}
+				</ul>
+
+				<input
+					type='text'
+					className='value'
+					placeholder={props.placeholder}
+					value={tempInputText}
+					onChange={(e) => setTempInputText(e.target.value)}
+					onKeyDown={(evt) => handleInputKeyDown({ evt, value: null, options: { clear: true } })}
+				/>
+			</div>
+		</div>
+	);
+};
+
+module.exports = TagInput;

client/homebrew/homebrew.jsx

@@ -1,8 +1,12 @@
+//╔===--------------- Polyfills --------------===╗//
+import 'core-js/es/string/to-well-formed.js';
+//╚===---------------          ---------------===╝//
+
 require('./homebrew.less');
 const React = require('react');
 const createClass = require('create-react-class');
-const { StaticRouter:Router } = require('react-router-dom/server');
-const { Route, Routes, useParams, useSearchParams } = require('react-router-dom');
+const { StaticRouter:Router } = require('react-router');
+const { Route, Routes, useParams, useSearchParams } = require('react-router');
 
 const HomePage = require('./pages/homePage/homePage.jsx');
 const EditPage = require('./pages/editPage/editPage.jsx');
@@ -10,6 +14,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 +76,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

@@ -25,16 +25,20 @@
 
 .homebrew nav {
 	background-color : #333333;
-	.navContent {
-		position        : relative;
-		z-index         : 2;
-		display         : flex;
-		justify-content : space-between;
-	}
+	position        : relative;
+	z-index         : 2;
+	display         : flex;
+	justify-content : space-between;
+	
 	.navSection {
 		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 +73,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 +102,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 +229,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 +269,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

@@ -1,177 +1,179 @@
 require('./brewItem.less');
 const React = require('react');
-const createClass = require('create-react-class');
+const { useCallback } = React;
 const moment = require('moment');
-const request = require('../../../../utils/request-middleware.js');
+import request from '../../../../utils/request-middleware.js';
 
 const googleDriveIcon = require('../../../../googleDrive.svg');
 const homebreweryIcon = require('../../../../thumbnail.png');
 const dedent = require('dedent-tabs').default;
 
-const BrewItem = createClass({
-	displayName     : 'BrewItem',
-	getDefaultProps : function() {
-		return {
-			brew : {
-				title       : '',
-				description : '',
-				authors     : [],
-				stubbed     : true
-			},
-			updateListFilter : ()=>{},
-			reportError      : ()=>{}
-		};
+const BrewItem = ({
+	brew = {
+		title       : '',
+		description : '',
+		authors     : [],
+		stubbed     : true,
 	},
+	updateListFilter = ()=>{},
+	reportError = ()=>{},
+	renderStorage = true,
+})=>{
 
-	deleteBrew : function(){
-		if(this.props.brew.authors.length <= 1){
-			if(!confirm('Are you sure you want to delete this brew? Because you are the only owner of this brew, the document will be deleted permanently.')) return;
-			if(!confirm('Are you REALLY sure? You will not be able to recover the document.')) return;
+	const deleteBrew = useCallback(()=>{
+		if(brew.authors.length <= 1) {
+			if(!window.confirm('Are you sure you want to delete this brew? Because you are the only owner of this brew, the document will be deleted permanently.')) return;
+			if(!window.confirm('Are you REALLY sure? You will not be able to recover the document.')) return;
 		} else {
-			if(!confirm('Are you sure you want to remove this brew from your collection? This will remove you as an editor, but other owners will still be able to access the document.')) return;
-			if(!confirm('Are you REALLY sure? You will lose editor access to this document.')) return;
+			if(!window.confirm('Are you sure you want to remove this brew from your collection? This will remove you as an editor, but other owners will still be able to access the document.')) return;
+			if(!window.confirm('Are you REALLY sure? You will lose editor access to this document.')) return;
 		}
 
-		request.delete(`/api/${this.props.brew.googleId ?? ''}${this.props.brew.editId}`)
-			.send()
-			.end((err, res)=>{
-				if(err) {
-					this.props.reportError(err);
-				} else {
-					location.reload();
-				}
-			});
-	},
+		request.delete(`/api/${brew.googleId ?? ''}${brew.editId}`).send().end((err, res)=>{
+				if (err) reportError(err); else window.location.reload();
+        });
+	}, [brew, reportError]);
 
-	updateFilter : function(type, term){
-		this.props.updateListFilter(type, term);
-	},
+	const updateFilter = useCallback((type, term)=> updateListFilter(type, term), [updateListFilter]);
 
-	renderDeleteBrewLink : function(){
-		if(!this.props.brew.editId) return;
+	const renderDeleteBrewLink = ()=>{
+		if(!brew.editId) return null;
 
-		return <a className='deleteLink' onClick={this.deleteBrew}>
-			<i className='fas fa-trash-alt' title='Delete' />
-		</a>;
-	},
+		return (
+			<a className='deleteLink' onClick={deleteBrew}>
+				<i className='fas fa-trash-alt' title='Delete' />
+			</a>
+		);
+	};
 
-	renderEditLink : function(){
-		if(!this.props.brew.editId) return;
+	const renderEditLink = ()=>{
+		if(!brew.editId) return null;
 
-		let editLink = this.props.brew.editId;
-		if(this.props.brew.googleId && !this.props.brew.stubbed) {
-			editLink = this.props.brew.googleId + editLink;
+		let editLink = brew.editId;
+		if(brew.googleId && !brew.stubbed) editLink = brew.googleId + editLink;
+
+		return (
+			<a className='editLink' href={`/edit/${editLink}`} target='_blank' rel='noopener noreferrer'>
+				<i className='fas fa-pencil-alt' title='Edit' />
+			</a>
+		);
+	};
+
+	const renderShareLink = ()=>{
+		if(!brew.shareId) return null;
+
+		let shareLink = brew.shareId;
+		if(brew.googleId && !brew.stubbed) {
+			shareLink = brew.googleId + shareLink;
 		}
 
-		return <a className='editLink' href={`/edit/${editLink}`} target='_blank' rel='noopener noreferrer'>
-			<i className='fas fa-pencil-alt' title='Edit' />
-		</a>;
-	},
+		return (
+			<a className='shareLink' href={`/share/${shareLink}`} target='_blank' rel='noopener noreferrer'>
+				<i className='fas fa-share-alt' title='Share' />
+			</a>
+		);
+	};
 
-	renderShareLink : function(){
-		if(!this.props.brew.shareId) return;
+	const renderDownloadLink = ()=>{
+		if(!brew.shareId) return null;
 
-		let shareLink = this.props.brew.shareId;
-		if(this.props.brew.googleId && !this.props.brew.stubbed) {
-			shareLink = this.props.brew.googleId + shareLink;
+		let shareLink = brew.shareId;
+		if(brew.googleId && !brew.stubbed) {
+			shareLink = brew.googleId + shareLink;
 		}
 
-		return <a className='shareLink' href={`/share/${shareLink}`} target='_blank' rel='noopener noreferrer'>
-			<i className='fas fa-share-alt' title='Share' />
-		</a>;
-	},
+		return (
+			<a className='downloadLink' href={`/download/${shareLink}`}>
+				<i className='fas fa-download' title='Download' />
+			</a>
+		);
+	};
 
-	renderDownloadLink : function(){
-		if(!this.props.brew.shareId) return;
-
-		let shareLink = this.props.brew.shareId;
-		if(this.props.brew.googleId && !this.props.brew.stubbed) {
-			shareLink = this.props.brew.googleId + shareLink;
+	const renderStorageIcon = ()=>{
+		if(!renderStorage) return null;
+		if(brew.googleId) {
+			return (
+				<span title={brew.webViewLink ? 'Your Google Drive Storage' : 'Another User\'s Google Drive Storage'}>
+					<a href={brew.webViewLink} target='_blank'>
+						<img className='googleDriveIcon' src={googleDriveIcon} alt='googleDriveIcon' />
+					</a>
+				</span>
+			);
 		}
 
-		return <a className='downloadLink' href={`/download/${shareLink}`}>
-			<i className='fas fa-download' title='Download' />
-		</a>;
-	},
+		return (
+			<span title='Homebrewery Storage'>
+				<img className='homebreweryIcon' src={homebreweryIcon} alt='homebreweryIcon' />
+			</span>
+		);
+	};
 
-	renderStorageIcon : function(){
-		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'>
-					<img className='googleDriveIcon' src={googleDriveIcon} alt='googleDriveIcon' />
-				</a>
-			</span>;
-		}
+	if(Array.isArray(brew.tags)) {
+		brew.tags = brew.tags?.filter((tag)=>tag); // remove tags that are empty strings
+		brew.tags.sort((a, b)=>{
+			return a.indexOf(':') - b.indexOf(':') !== 0 ? a.indexOf(':') - b.indexOf(':') : a.toLowerCase().localeCompare(b.toLowerCase());
+		});
+	}
 
-		return <span title='Homebrewery Storage'>
-			<img className='homebreweryIcon' src={homebreweryIcon} alt='homebreweryIcon' />
-		</span>;
-	},
+	const dateFormatString = 'YYYY-MM-DD HH:mm:ss';
 
-	render : function(){
-		const brew = this.props.brew;
-		if(Array.isArray(brew.tags)) {               // temporary fix until dud tags are cleaned
-			brew.tags = brew.tags?.filter((tag)=>tag); //remove tags that are empty strings
-			brew.tags.sort((a, b)=>{
-				return a.indexOf(':') - b.indexOf(':') != 0 ? a.indexOf(':') - b.indexOf(':') : a.toLowerCase().localeCompare(b.toLowerCase());
-			});
-		}
-		const dateFormatString = 'YYYY-MM-DD HH:mm:ss';
-
-		return <div className='brewItem'>
-			{brew.thumbnail &&
-				<div className='thumbnail' style={{ backgroundImage: `url(${brew.thumbnail})` }} >
-				</div>
-			}
+	return (
+		<div className='brewItem'>
+			{brew.thumbnail && <div className='thumbnail' style={{ backgroundImage: `url(${brew.thumbnail})` }}></div>}
 			<div className='text'>
 				<h2>{brew.title}</h2>
 				<p className='description'>{brew.description}</p>
 			</div>
 			<hr />
 			<div className='info'>
-
-				{brew.tags?.length ? <>
+				{brew.tags?.length ? (
 					<div className='brewTags' title={`${brew.tags.length} tags:\n${brew.tags.join('\n')}`}>
-						<i className='fas fa-tags'/>
+						<i className='fas fa-tags' />
 						{brew.tags.map((tag, idx)=>{
 							const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
-							return <span key={idx} className={matches[1]} onClick={()=>{this.updateFilter(tag);}}>{matches[2]}</span>;
+							return <span key={idx} className={matches[1]} onClick={()=>updateFilter(tag)}>{matches[2]}</span>;
 						})}
 					</div>
-				</> : <></>
-				}
+				) : null}
 				<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 && ', '}
-  					</>))}
+					<i className='fas fa-user' />{' '}
+					{brew.authors?.map((author, index)=>(
+						<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)}`}>
-					<i className='fas fa-eye'/> {brew.views}
+					<i className='fas fa-eye' /> {brew.views}
 				</span>
-				{brew.pageCount &&
+				{brew.pageCount && (
 					<span title={`Page count: ${brew.pageCount}`}>
 						<i className='far fa-file' /> {brew.pageCount}
 					</span>
-				}
-				<span title={dedent`
-					Created: ${moment(brew.createdAt).local().format(dateFormatString)}
-					Last updated: ${moment(brew.updatedAt).local().format(dateFormatString)}`}>
+				)}
+				<span
+					title={dedent` Created: ${moment(brew.createdAt).local().format(dateFormatString)}
+                        Last updated: ${moment(brew.updatedAt).local().format(dateFormatString)}`}
+				>
 					<i className='fas fa-sync-alt' /> {moment(brew.updatedAt).fromNow()}
 				</span>
-				{this.renderStorageIcon()}
+				{renderStorageIcon()}
 			</div>
 
 			<div className='links'>
-				{this.renderShareLink()}
-				{this.renderEditLink()}
-				{this.renderDownloadLink()}
-				{this.renderDeleteBrewLink()}
+				{renderShareLink()}
+				{renderEditLink()}
+				{renderDownloadLink()}
+				{renderDeleteBrewLink()}
 			</div>
-		</div>;
-	}
-});
+		</div>
+	);
+};
 
 module.exports = BrewItem;

client/homebrew/pages/editPage/editPage.jsx

@@ -1,9 +1,10 @@
 /* eslint-disable max-lines */
 require('./editPage.less');
 const React = require('react');
-const createClass = require('create-react-class');
 const _ = require('lodash');
-const request = require('../../utils/request-middleware.js');
+const createClass = require('create-react-class');
+
+import request from '../../utils/request-middleware.js';
 const { Meta } = require('vitreum/headtags');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
@@ -15,6 +16,7 @@ const PrintNavItem = require('../../navbar/print.navitem.jsx');
 const ErrorNavItem = require('../../navbar/error-navitem.jsx');
 const Account = require('../../navbar/account.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
+const VaultNavItem = require('../../navbar/vault.navitem.jsx');
 
 const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
 const Editor = require('../../editor/editor.jsx');
@@ -22,14 +24,16 @@ const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
 const LockNotification = require('./lockNotification/lockNotification.jsx');
 
-const Markdown = require('naturalcrit/markdown.js');
+import Markdown from '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 +45,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 +119,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 +167,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 +229,9 @@ const EditPage = createClass({
 			htmlErrors : Markdown.validate(prevState.brew.text)
 		}));
 
+		await updateHistory(this.state.brew).catch(console.error);
+		await versionHistoryGarbageCollection().catch(console.error);
+
 		const transfer = this.state.saveGoogle == _.isNil(this.state.brew.googleId);
 
 		const brew = this.state.brew;
@@ -351,7 +381,7 @@ const EditPage = createClass({
 
 **[Homebrewery Link](${global.config.publicUrl}/share/${shareLink})**`;
 
-		return `https://www.reddit.com/r/UnearthedArcana/submit?title=${encodeURIComponent(title)}&text=${encodeURIComponent(text)}`;
+		return `https://www.reddit.com/r/UnearthedArcana/submit?title=${encodeURIComponent(title.toWellFormed())}&text=${encodeURIComponent(text)}`;
 	},
 
 	renderNavbar : function(){
@@ -388,6 +418,7 @@ const EditPage = createClass({
 					</Nav.item>
 				</Nav.dropdown>
 				<PrintNavItem />
+				<VaultNavItem />
 				<RecentNavItem brew={this.state.brew} storageKey='edit' />
 				<Account />
 			</Nav.section>
@@ -400,33 +431,42 @@ const EditPage = createClass({
 			<Meta name='robots' content='noindex, nofollow' />
 			{this.renderNavbar()}
 
-			<div className='content'>
-				{this.props.brew.lock && <LockNotification shareId={this.props.brew.shareId} message={this.props.brew.lock.editMessage} />}
-				<SplitPane onDragFinish={this.handleSplitMove}>
-					<Editor
-						ref={this.editor}
-						brew={this.state.brew}
-						onTextChange={this.handleTextChange}
-						onStyleChange={this.handleStyleChange}
-						onMetaChange={this.handleMetaChange}
-						reportError={this.errorReported}
-						renderer={this.state.brew.renderer}
-						userThemes={this.props.userThemes}
-						snippetBundle={this.state.themeBundle.snippets}
-					/>
-					<BrewRenderer
-						text={this.state.brew.text}
-						style={this.state.brew.style}
-						renderer={this.state.brew.renderer}
-						theme={this.state.brew.theme}
-						themeBundle={this.state.themeBundle}
-						errors={this.state.htmlErrors}
-						lang={this.state.brew.lang}
-						currentEditorPage={this.state.currentEditorPage}
-						allowPrint={true}
-						showHeaderNav={true}
-					/>
-				</SplitPane>
+			{this.props.brew.lock && <LockNotification shareId={this.props.brew.shareId} message={this.props.brew.lock.editMessage} />}
+			<div className="content">
+			<SplitPane onDragFinish={this.handleSplitMove}>
+				<Editor
+					ref={this.editor}
+					brew={this.state.brew}
+					onTextChange={this.handleTextChange}
+					onStyleChange={this.handleStyleChange}
+					onMetaChange={this.handleMetaChange}
+					reportError={this.errorReported}
+					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}
+					style={this.state.brew.style}
+					renderer={this.state.brew.renderer}
+					theme={this.state.brew.theme}
+					themeBundle={this.state.themeBundle}
+					errors={this.state.htmlErrors}
+					lang={this.state.brew.lang}
+					onPageChange={this.handleBrewRendererPageChange}
+					currentEditorViewPageNum={this.state.currentEditorViewPageNum}
+					currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
+					currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
+					allowPrint={true}
+          showHeaderNav={true}
+				/>
+			</SplitPane>
 			</div>
 		</div>;
 	}

client/homebrew/pages/errorPage/errorPage.jsx

@@ -1,7 +1,7 @@
 require('./errorPage.less');
 const React      = require('react');
 const UIPage     = require('../basePages/uiPage/uiPage.jsx');
-const Markdown   = require('../../../../shared/naturalcrit/markdown.js');
+import Markdown  from '../../../../shared/naturalcrit/markdown.js';
 const ErrorIndex = require('./errors/errorIndex.js');
 
 const ErrorPage = ({ brew })=>{

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

@@ -2,6 +2,9 @@ const dedent = require('dedent-tabs').default;
 
 const loginUrl = 'https://www.naturalcrit.com/login';
 
+//001-050 : Brew errors
+//050-100 : Other pages errors
+
 const errorIndex = (props)=>{
 	return {
 		// Default catch all
@@ -15,7 +18,18 @@ const errorIndex = (props)=>{
 		'01' : dedent`
 			## An error occurred while retrieving this brew from Google Drive!
 			
-			Google reported an error while attempting to retrieve a brew from this link.`,
+			Google is able to see the brew at this link, but reported an error while attempting to retrieve it.
+
+			### Refreshing your Google Credentials
+
+			This issue is likely caused by an issue with your Google credentials; if you are the owner of this file, the following steps may resolve the issue:
+
+			- Go to https://www.naturalcrit.com/login and click logout if present (in small text at the bottom of the page).
+			- Click "Sign In with Google", which will refresh your Google credentials.
+			- After completing the sign in process, return to Homebrewery and refresh/reload the page so that it can pick up the updated credentials.
+			- If this was the source of the issue, it should now be resolved.
+
+			If following these steps does not resolve the issue, please let us know!`,
 
 		// Google Drive - 404 : brew deleted or access denied
 		'02' : dedent`
@@ -47,7 +61,7 @@ const errorIndex = (props)=>{
 			- **The Google Account may be closed.** Google may have removed the account
 			due to inactivity or violating a Google policy. Make sure the owner can
 			still access Google Drive normally and upload/download files to it.
-			:
+			
 			If the file isn't found, Google Drive usually puts your file in your Trash folder for
 			30 days. Assuming the trash hasn't been emptied yet, it might be worth checking.
 			You can also find the Activity tab on the right side of the Google Drive page, which
@@ -149,8 +163,16 @@ const errorIndex = (props)=>{
 
 		**Brew ID:**  ${props.brew.brewId}`,
 
+		//account page when account is not defined
+		'50' : dedent`
+		## You are not signed in
+		
+		You are trying to access the account page, but are not signed in to an account.
+		
+		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.
@@ -160,7 +182,17 @@ 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.`,
 	};
 };
 
-module.exports = errorIndex;
+module.exports = errorIndex;

client/homebrew/pages/homePage/homePage.jsx

@@ -1,21 +1,20 @@
 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');
+import request from '../../utils/request-middleware.js';
 const { Meta } = require('vitreum/headtags');
 
 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>
@@ -86,27 +100,33 @@ const HomePage = createClass({
 		return <div className='homePage sitePage'>
 			<Meta name='google-site-verification' content='NwnAQSSJZzAT7N-p5MY6ydQ7Njm67dtbu73ZSyE5Fy4' />
 			{this.renderNavbar()}
-
-			<div className='content'>
-				<SplitPane onDragFinish={this.handleSplitMove}>
-					<Editor
-						ref={this.editor}
-						brew={this.state.brew}
-						onTextChange={this.handleTextChange}
-						renderer={this.state.brew.renderer}
-						showEditButtons={false}
-						snippetBundle={this.state.themeBundle.snippets}
-					/>
-					<BrewRenderer
-						text={this.state.brew.text}
-						style={this.state.brew.style}
-						renderer={this.state.brew.renderer}
-						currentEditorPage={this.state.currentEditorPage}
-						themeBundle={this.state.themeBundle}
-					/>
-				</SplitPane>
+			<div className="content">
+			<SplitPane onDragFinish={this.handleSplitMove}>
+				<Editor
+					ref={this.editor}
+					brew={this.state.brew}
+					onTextChange={this.handleTextChange}
+					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}
+					onPageChange={this.handleBrewRendererPageChange}
+					currentEditorViewPageNum={this.state.currentEditorViewPageNum}
+					currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
+					currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
+					themeBundle={this.state.themeBundle}
+				/>
+			</SplitPane>
 			</div>
-
 			<div className={cx('floatingSaveButton', { show: this.state.welcomeText != this.state.brew.text })} onClick={this.handleSave}>
 				Save current <i className='fas fa-save' />
 			</div>

client/homebrew/pages/homePage/welcome_msg.md

@@ -91,13 +91,6 @@ If you are looking for more 5e Homebrew resources check out [r/UnearthedArcana](
 
 \page
 
-
-
-
-
-
-
-
 ## Markdown+
 The Homebrewery aims to make homebrewing as simple as possible, providing a live editor with Markdown syntax that is more human-readable and faster to write with than raw HTML.
 

client/homebrew/pages/newPage/newPage.jsx

@@ -2,9 +2,9 @@
 require('./newPage.less');
 const React = require('react');
 const createClass = require('create-react-class');
-const request = require('../../utils/request-middleware.js');
+import request from '../../utils/request-middleware.js';
 
-const Markdown = require('naturalcrit/markdown.js');
+import Markdown from 'naturalcrit/markdown.js';
 
 const Nav = require('naturalcrit/nav/nav.jsx');
 const PrintNavItem = require('../../navbar/print.navitem.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);
 	},
@@ -210,30 +223,38 @@ const NewPage = createClass({
 	render : function(){
 		return <div className='newPage sitePage'>
 			{this.renderNavbar()}
-			<div className='content'>
-				<SplitPane onDragFinish={this.handleSplitMove}>
-					<Editor
-						ref={this.editor}
-						brew={this.state.brew}
-						onTextChange={this.handleTextChange}
-						onStyleChange={this.handleStyleChange}
-						onMetaChange={this.handleMetaChange}
-						renderer={this.state.brew.renderer}
-						userThemes={this.props.userThemes}
-						snippetBundle={this.state.themeBundle.snippets}
-					/>
-					<BrewRenderer
-						text={this.state.brew.text}
-						style={this.state.brew.style}
-						renderer={this.state.brew.renderer}
-						theme={this.state.brew.theme}
-						themeBundle={this.state.themeBundle}
-						errors={this.state.htmlErrors}
-						lang={this.state.brew.lang}
-						currentEditorPage={this.state.currentEditorPage}
-						allowPrint={true}
-					/>
-				</SplitPane>
+			<div className="content">
+			<SplitPane onDragFinish={this.handleSplitMove}>
+				<Editor
+					ref={this.editor}
+					brew={this.state.brew}
+					onTextChange={this.handleTextChange}
+					onStyleChange={this.handleStyleChange}
+					onMetaChange={this.handleMetaChange}
+					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}
+					style={this.state.brew.style}
+					renderer={this.state.brew.renderer}
+					theme={this.state.brew.theme}
+					themeBundle={this.state.themeBundle}
+					errors={this.state.htmlErrors}
+					lang={this.state.brew.lang}
+					onPageChange={this.handleBrewRendererPageChange}
+					currentEditorViewPageNum={this.state.currentEditorViewPageNum}
+					currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
+					currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
+					allowPrint={true}
+				/>
+			</SplitPane>
 			</div>
 		</div>;
 	}

client/homebrew/pages/sharePage/sharePage.jsx

@@ -1,6 +1,6 @@
 require('./sharePage.less');
 const React = require('react');
-const createClass = require('create-react-class');
+const { useState, useEffect, useCallback } = React;
 const { Meta } = require('vitreum/headtags');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
@@ -14,115 +14,113 @@ const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
 const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js');
 
-const SharePage = createClass({
-	displayName     : 'SharePage',
-	getDefaultProps : function() {
-		return {
-			brew        : DEFAULT_BREW_LOAD,
-			disableMeta : false
-		};
-	},
+const SharePage = (props)=>{
+	const { brew = DEFAULT_BREW_LOAD, disableMeta = false } = props;
 
-	getInitialState : function() {
-		return {
-			themeBundle : {}
-		};
-	},
+	const [state, setState] = useState({
+		themeBundle                : {},
+		currentBrewRendererPageNum : 1,
+	});
 
-	componentDidMount : function() {
-		document.addEventListener('keydown', this.handleControlKeys);
+	const handleBrewRendererPageChange = useCallback((pageNumber)=>{
+		updateState({ currentBrewRendererPageNum: pageNumber });
+	}, []);
 
-		fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme);
-	},
-
-	componentWillUnmount : function() {
-		document.removeEventListener('keydown', this.handleControlKeys);
-	},
-
-	handleControlKeys : function(e){
+	const handleControlKeys = (e)=>{
 		if(!(e.ctrlKey || e.metaKey)) return;
 		const P_KEY = 80;
-		if(e.keyCode == P_KEY){
-			if(e.keyCode == P_KEY) printCurrentBrew();
+		if(e.keyCode === P_KEY) {
+			printCurrentBrew();
 			e.stopPropagation();
 			e.preventDefault();
 		}
-	},
+	};
 
-	processShareId : function() {
-		return this.props.brew.googleId && !this.props.brew.stubbed ?
-					 this.props.brew.googleId + this.props.brew.shareId :
-					 this.props.brew.shareId;
-	},
+	useEffect(()=>{
+		document.addEventListener('keydown', handleControlKeys);
+		fetchThemeBundle(
+			{ setState },
+			brew.renderer,
+			brew.theme
+		);
 
-	renderEditLink : function(){
-		if(!this.props.brew.editId) return;
+		return ()=>{
+			document.removeEventListener('keydown', handleControlKeys);
+		};
+	}, []);
 
-		let editLink = this.props.brew.editId;
-		if(this.props.brew.googleId && !this.props.brew.stubbed) {
-			editLink = this.props.brew.googleId + editLink;
-		}
+	const processShareId = ()=>{
+		return brew.googleId && !brew.stubbed ? brew.googleId + brew.shareId : brew.shareId;
+	};
 
-		return 	<Nav.item color='orange' icon='fas fa-pencil-alt' href={`/edit/${editLink}`}>
-					edit
-		</Nav.item>;
-	},
+	const renderEditLink = ()=>{
+		if(!brew.editId) return null;
 
-	render : function(){
-		const titleStyle = this.props.disableMeta ? { cursor: 'default' } : {};
-		const titleEl = <Nav.item className='brewTitle' style={titleStyle}>{this.props.brew.title}</Nav.item>;
+		const editLink = brew.googleId && ! brew.stubbed ? brew.googleId + brew.editId : brew.editId;
 
-		return <div className='sharePage sitePage'>
+		return (
+			<Nav.item color='orange' icon='fas fa-pencil-alt' href={`/edit/${editLink}`}>
+				edit
+			</Nav.item>
+		);
+	};
+
+	const titleEl = (
+		<Nav.item className='brewTitle' style={disableMeta ? { cursor: 'default' } : {}}>
+			{brew.title}
+		</Nav.item>
+	);
+
+	return (
+		<div className='sharePage sitePage'>
 			<Meta name='robots' content='noindex, nofollow' />
 			<Navbar>
 				<Nav.section className='titleSection'>
-					{
-						this.props.disableMeta ?
-							titleEl
-							:
-							<MetadataNav brew={this.props.brew}>
-								{titleEl}
-							</MetadataNav>
-					}
+					{disableMeta ? titleEl : <MetadataNav brew={brew}>{titleEl}</MetadataNav>}
 				</Nav.section>
 
 				<Nav.section>
-					{this.props.brew.shareId && <>
-						<PrintNavItem/>
-						<Nav.dropdown>
-							<Nav.item color='red' icon='fas fa-code'>
-								source
-							</Nav.item>
-							<Nav.item color='blue' icon='fas fa-eye' href={`/source/${this.processShareId()}`}>
-								view
-							</Nav.item>
-							{this.renderEditLink()}
-							<Nav.item color='blue' icon='fas fa-download' href={`/download/${this.processShareId()}`}>
-								download
-							</Nav.item>
-							<Nav.item color='blue' icon='fas fa-clone' href={`/new/${this.processShareId()}`}>
-								clone to new
-							</Nav.item>
-						</Nav.dropdown>
-					</>}
-					<RecentNavItem brew={this.props.brew} storageKey='view' />
+					{brew.shareId && (
+						<>
+							<PrintNavItem />
+							<Nav.dropdown>
+								<Nav.item color='red' icon='fas fa-code'>
+									source
+								</Nav.item>
+								<Nav.item color='blue' icon='fas fa-eye' href={`/source/${processShareId()}`}>
+									view
+								</Nav.item>
+								{renderEditLink()}
+								<Nav.item color='blue' icon='fas fa-download' href={`/download/${processShareId()}`}>
+									download
+								</Nav.item>
+								<Nav.item color='blue' icon='fas fa-clone' href={`/new/${processShareId()}`}>
+									clone to new
+								</Nav.item>
+							</Nav.dropdown>
+						</>
+					)}
+					<RecentNavItem brew={brew} storageKey='view' />
 					<Account />
 				</Nav.section>
 			</Navbar>
 
 			<div className='content'>
 				<BrewRenderer
-					text={this.props.brew.text}
-					style={this.props.brew.style}
-					renderer={this.props.brew.renderer}
-					theme={this.props.brew.theme}
-					themeBundle={this.state.themeBundle}
+					text={brew.text}
+					style={brew.style}
+					lang={brew.lang}
+					renderer={brew.renderer}
+					theme={brew.theme}
+					themeBundle={state.themeBundle}
+					onPageChange={handleBrewRendererPageChange}
+					currentBrewRendererPageNum={state.currentBrewRendererPageNum}
 					allowPrint={true}
 					showHeaderNav={true}
 				/>
 			</div>
-		</div>;
-	}
-});
+		</div>
+	);
+};
 
 module.exports = SharePage;

client/homebrew/pages/sharePage/sharePage.less

@@ -1,5 +1,5 @@
 .sharePage{
-	.navContent .navSection.titleSection {
+	nav .navSection.titleSection {
 		flex-grow: 1;
 		justify-content: center;
 	}

client/homebrew/pages/userPage/userPage.jsx

@@ -1,80 +1,60 @@
 const React = require('react');
-const createClass = require('create-react-class');
-const _     = require('lodash');
+const { useState } = React;
+const _ = require('lodash');
 
 const ListPage = require('../basePages/listPage/listPage.jsx');
 
 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 ErrorNavItem = require('../../navbar/error-navitem.jsx');
+const VaultNavitem = require('../../navbar/vault.navitem.jsx');
 
-const UserPage = createClass({
-	displayName     : 'UserPage',
-	getDefaultProps : function() {
-		return {
-			username : '',
-			brews    : [],
-			query    : '',
-			error    : null
-		};
-	},
-	getInitialState : function() {
-		const usernameWithS = this.props.username + (this.props.username.endsWith('s') ? `’` : `’s`);
+const UserPage = (props)=>{
+	props = {
+		username : '',
+		brews    : [],
+		query    : '',
+		...props
+	};
 
-		const brews = _.groupBy(this.props.brews, (brew)=>{
-			return (brew.published ? 'published' : 'private');
-		});
+	const [error, setError] = useState(null);
 
-		const brewCollection = [
-			{
-				title : `${usernameWithS} published brews`,
-				class : 'published',
-				brews : brews.published
-			}
-		];
-		if(this.props.username == global.account?.username){
-			brewCollection.push(
-				{
-					title : `${usernameWithS} unpublished brews`,
-					class : 'unpublished',
-					brews : brews.private
-				}
-			);
-		}
+	const usernameWithS = props.username + (props.username.endsWith('s') ? `’` : `’s`);
+	const groupedBrews = _.groupBy(props.brews, (brew)=>brew.published ? 'published' : 'private');
 
-		return {
-			brewCollection : brewCollection
-		};
-	},
-	errorReported : function(error) {
-		this.setState({
-			error
-		});
-	},
+	const brewCollection = [
+		{
+			title : `${usernameWithS} published brews`,
+			class : 'published',
+			brews : groupedBrews.published || []
+		},
+		...(props.username === global.account?.username ? [{
+			title : `${usernameWithS} unpublished brews`,
+			class : 'unpublished',
+			brews : groupedBrews.private || []
+		}] : [])
+	];
 
-	navItems : function() {
-		return <Navbar>
+	const navItems = (
+		<Navbar>
 			<Nav.section>
-				{this.state.error ?
-					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
-					null
-				}
+				{error && (<ErrorNavItem error={error} parent={null}></ErrorNavItem>)}
 				<NewBrew />
 				<HelpNavItem />
+				<VaultNavitem />
 				<RecentNavItem />
 				<Account />
 			</Nav.section>
-		</Navbar>;
-	},
+		</Navbar>
+	);
 
-	render : function(){
-		return <ListPage brewCollection={this.state.brewCollection} navItems={this.navItems()} query={this.props.query} reportError={this.errorReported}></ListPage>;
-	}
-});
+	return (
+		<ListPage brewCollection={brewCollection}  navItems={navItems} query={props.query} reportError={(err)=>setError(err)} />
+	);
+};
 
 module.exports = UserPage;

client/homebrew/pages/vaultPage/vaultPage.jsx

@@ -0,0 +1,431 @@
+/*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');
+
+import request from '../../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='sitePage 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,358 @@
+.vaultPage {
+	height           : 100%;
+	overflow-y       : hidden;
+	background-color : #2C3E50;
+
+	*:not(input) { user-select : none; }
+
+	.content .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); }
+					
+					
+				}
+
+				#searchButton {
+					.colorButton(@green);
+					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-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 {
+						.colorButton(@green);
+						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 {
+
+		.dataGroup.form .brewLookup { padding : 1px 20px 20px 10px; }
+
+		.dataGroup.resultsContainer .foundBrews .brewItem {
+			width         : 100%;
+			margin-inline : auto;
+		}
+	}
+}

client/homebrew/utils/customIDBStore.js

@@ -0,0 +1,19 @@
+import * as IDB from 'idb-keyval/dist/index.js';
+
+export function initCustomStore(db, store){
+	const createCustomStore = async ()=>IDB.createStore(db, store);
+
+	return {
+		entries : async ()=>IDB.entries(await createCustomStore()),
+		keys    : async ()=>IDB.keys(await createCustomStore()),
+		values  : async ()=>IDB.values(await createCustomStore()),
+		clear   : async ()=>IDB.clear(await createCustomStore),
+		get     : async (key)=>IDB.get(key, await createCustomStore()),
+		getMany : async (keys)=>IDB.getMany(keys, await createCustomStore()),
+		set     : async (key, value)=>IDB.set(key, value, await createCustomStore()),
+		setMany : async (entries)=>IDB.setMany(entries, await createCustomStore()),
+		update  : async (key, updateFn)=>IDB.update(key, updateFn, await createCustomStore()),
+		del     : async (key)=>IDB.del(key, await createCustomStore()),
+		delMany : async (keys)=>IDB.delMany(keys, await createCustomStore())
+	};
+};

client/homebrew/utils/request-middleware.js

@@ -1,4 +1,4 @@
-const request = require('superagent');
+import request from 'superagent';
 
 const addHeader = (request)=>request.set('Homebrewery-Version', global.version);
 
@@ -9,4 +9,4 @@ const requestMiddleware = {
 	delete : (path)=>addHeader(request.delete(path)),
 };
 
-module.exports = requestMiddleware;
+export default requestMiddleware;

client/homebrew/utils/versionHistory.js

@@ -0,0 +1,119 @@
+import { initCustomStore } from './customIDBStore.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 GARBAGE_COLLECT_DELAY = 28 * 24 * 60;
+// const GARBAGE_COLLECT_DELAY = 10;
+
+
+const HB_DB = 'HOMEBREWERY-DB';
+const HB_STORE = 'HISTORY';
+
+const IDB = initCustomStore(HB_DB, HB_STORE);
+
+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];
+}
+
+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);
+	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);
+
+			// Break out of data checks because we found an expired value
+			break;
+		}
+	};
+};
+
+export async function versionHistoryGarbageCollection(){
+	const entries = await IDB.entries();
+
+	const expiredKeys = [];
+	for (const [key, value] of entries){
+		const expireAt = new Date(value.savedAt);
+		expireAt.setMinutes(expireAt.getMinutes() + GARBAGE_COLLECT_DELAY);
+		if(new Date() > expireAt){
+			expiredKeys.push(key);
+		};
+	};
+	if(expiredKeys.length > 0){
+		await IDB.delMany(expiredKeys);
+	}
+};

client/icons/customIcons.less

@@ -1,57 +1,84 @@
 .fac {
-  display      : inline-block;
+	display          : inline-block;
+	background-color : currentColor;
+	mask-size        : contain;
+	mask-repeat      : no-repeat;
+	mask-position    : center;
+	width            : 1em;
+	aspect-ratio     : 1;
 }
 .position-top-left {
-  content: url('../icons/position-top-left.svg');
+  mask-image: url('../icons/position-top-left.svg');
 }
 .position-top-right {
-  content: url('../icons/position-top-right.svg');
+  mask-image: url('../icons/position-top-right.svg');
 }
 .position-bottom-left {
-  content: url('../icons/position-bottom-left.svg');
+  mask-image: url('../icons/position-bottom-left.svg');
 }
 .position-bottom-right {
-  content: url('../icons/position-bottom-right.svg');
+  mask-image: url('../icons/position-bottom-right.svg');
 }
 .position-top {
-  content: url('../icons/position-top.svg');
+  mask-image: url('../icons/position-top.svg');
 }
 .position-right {
-  content: url('../icons/position-right.svg');
+  mask-image: url('../icons/position-right.svg');
 }
 .position-bottom {
-  content: url('../icons/position-bottom.svg');
+  mask-image: url('../icons/position-bottom.svg');
 }
 .position-left {
-  content: url('../icons/position-left.svg');
+  mask-image: url('../icons/position-left.svg');
 }
 .mask-edge {
-  content: url('../icons/mask-edge.svg');
+  mask-image: url('../icons/mask-edge.svg');
 }
 .mask-corner {
-  content: url('../icons/mask-corner.svg');
+  mask-image: url('../icons/mask-corner.svg');
 }
 .mask-center {
-  content: url('../icons/mask-center.svg');
+  mask-image: url('../icons/mask-center.svg');
 }
 .book-front-cover {
-  content: url('../icons/book-front-cover.svg');
+  mask-image: url('../icons/book-front-cover.svg');
 }
 .book-back-cover {
-  content: url('../icons/book-back-cover.svg');
+  mask-image: url('../icons/book-back-cover.svg');
 }
 .book-inside-cover {
-  content: url('../icons/book-inside-cover.svg');
+  mask-image: url('../icons/book-inside-cover.svg');
 }
 .book-part-cover {
-  content: url('../icons/book-part-cover.svg');
+  mask-image: url('../icons/book-part-cover.svg');
+}
+.image-wrap-left {
+  mask-image: url('../icons/image-wrap-left.svg');
+}
+.image-wrap-right {
+  mask-image: url('../icons/image-wrap-right.svg');
 }
 .davek {
-  content: url('../icons/Davek.svg');
+  mask-image: url('../icons/Davek.svg');
 }
 .rellanic {
-  content: url('../icons/Rellanic.svg');
+  mask-image: url('../icons/Rellanic.svg');
 }
 .iokharic {
-  content: url('../icons/Iokharic.svg');
+  mask-image: url('../icons/Iokharic.svg');
+}
+.zoom-to-fit {
+	mask-image: url('../icons/zoom-to-fit.svg');
+}
+.fit-width {
+	mask-image: url('../icons/fit-width.svg');
+}
+.single-spread {
+	mask-image: url('../icons/single-spread.svg');
+}
+.facing-spread {
+	mask-image: url('../icons/facing-spread.svg');
+}
+.flow-spread {
+	mask-image: url('../icons/flow-spread.svg');
 }

client/icons/facing-spread.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.979101,0,0,0.919064,-29.0748,1.98095)">
+        <path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
+    </g>
+    <g transform="matrix(0.979101,0,0,0.919064,23.058,1.98095)">
+        <path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
+    </g>
+</svg>

client/icons/fit-width.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1.07509,0,0,1.07509,-3.75511,-3.75468)">
+        <g transform="matrix(0.843549,0,0,0.950644,8.38004,4.39672)">
+            <path d="M28.455,52.413L28.455,58.581C28.455,59.719 27.684,60.745 26.501,61.181C25.318,61.616 23.956,61.375 23.051,60.571L11.114,49.96C9.878,48.862 9.878,47.08 11.114,45.981L23.051,35.371C23.956,34.566 25.318,34.326 26.501,34.761C27.684,35.197 28.455,36.223 28.455,37.361L28.455,43.528L70.223,43.528L70.223,37.361C70.223,36.223 70.995,35.197 72.177,34.761C73.36,34.326 74.722,34.566 75.627,35.371L87.564,45.981C88.8,47.08 88.8,48.862 87.564,49.96L75.627,60.571C74.722,61.375 73.36,61.616 72.177,61.181C70.995,60.745 70.223,59.719 70.223,58.581L70.223,52.413L28.455,52.413Z"/>
+        </g>
+        <g transform="matrix(1.46702,0,0,0.986488,-23.0335,3.50686)">
+            <path d="M23.967,5.877L23.967,88.383C23.967,90.556 22.781,92.321 21.319,92.321L21.157,92.321C19.695,92.321 18.509,90.556 18.509,88.383L18.509,5.877C18.509,3.703 19.695,1.939 21.157,1.939L21.319,1.939C22.781,1.939 23.967,3.703 23.967,5.877Z"/>
+        </g>
+        <g transform="matrix(1.46702,0,0,0.986488,60.7211,3.50686)">
+            <path d="M23.967,5.877L23.967,88.383C23.967,90.556 22.781,92.321 21.319,92.321L21.157,92.321C19.695,92.321 18.509,90.556 18.509,88.383L18.509,5.877C18.509,3.703 19.695,1.939 21.157,1.939L21.319,1.939C22.781,1.939 23.967,3.703 23.967,5.877Z"/>
+        </g>
+    </g>
+</svg>

client/icons/flow-spread.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1.0781,0,0,1.0781,-3.90545,-3.90502)">
+        <g transform="matrix(0.590052,0,0,0.553871,-13.8993,-2.19227)">
+            <path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
+        </g>
+        <g transform="matrix(0.590052,0,0,0.553871,-13.8993,44.3152)">
+            <path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
+        </g>
+        <g transform="matrix(0.590052,0,0,0.553871,17.5184,-2.19227)">
+            <path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
+        </g>
+        <g transform="matrix(0.590052,0,0,0.553871,50.0095,-2.19227)">
+            <path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
+        </g>
+        <g transform="matrix(0.590052,0,0,0.553871,17.5184,44.3152)">
+            <path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
+        </g>
+        <g transform="matrix(0.590052,0,0,0.553871,50.0095,44.3152)">
+            <path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
+        </g>
+    </g>
+</svg>

client/icons/image-wrap-left.svg

@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 512.00006 512"
+   xml:space="preserve"
+   id="svg10"
+   sodipodi:docname="noun-wrap-image-left-212078.svg"
+   width="512.00006"
+   height="512"
+   inkscape:export-filename="image-wrap-right.svg"
+   inkscape:export-xdpi="300"
+   inkscape:export-ydpi="300"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs10" /><sodipodi:namedview
+     id="namedview10"
+     pagecolor="#ffffff"
+     bordercolor="#111111"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#d1d1d1" /><path
+     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="M 185.80018,144 H 32"
+     id="path11"
+     sodipodi:nodetypes="cc"
+     clip-path="none"
+     inkscape:export-filename="image-wrap-right.svg"
+     inkscape:export-xdpi="300"
+     inkscape:export-ydpi="300" /><path
+     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="M 185.80018,368 H 32"
+     id="path11-8"
+     sodipodi:nodetypes="cc"
+     clip-path="none" /><path
+     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="M 480.00007,32 H 32"
+     id="path11-8-2-67"
+     clip-path="none"
+     sodipodi:nodetypes="cc" /><path
+     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="M 480.00008,480 H 32"
+     id="path11-8-2-67-2"
+     clip-path="none"
+     sodipodi:nodetypes="cc" /><path
+     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="M 160.0001,255.98832 32,256.01162"
+     id="path11-0"
+     sodipodi:nodetypes="cc"
+     clip-path="none" /><path
+     id="path23"
+     style="opacity:0.922046;fill:#000000;fill-opacity:1;stroke-width:64;stroke-linecap:round;stroke-dasharray:none;paint-order:fill markers stroke"
+     d="m 416.00008,96 a 160,160 0 0 1 96,32.50977 v 254.98046 a 160,160 0 0 1 -96,32.50977 160,160 0 0 1 -160,-160 160,160 0 0 1 160,-160 z" /></svg>

client/icons/image-wrap-right.svg

@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 512.00006 512"
+   xml:space="preserve"
+   id="svg10"
+   sodipodi:docname="noun-wrap-image-left-212078.svg"
+   width="512.00006"
+   height="512"
+   inkscape:export-filename="image-wrap-right.svg"
+   inkscape:export-xdpi="300"
+   inkscape:export-ydpi="300"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs10" /><sodipodi:namedview
+     id="namedview10"
+     pagecolor="#ffffff"
+     bordercolor="#111111"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#d1d1d1" /><path
+     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="M 326.1999,144 H 480.00008"
+     id="path11"
+     sodipodi:nodetypes="cc"
+     clip-path="none"
+     inkscape:export-filename="image-wrap-right.svg"
+     inkscape:export-xdpi="300"
+     inkscape:export-ydpi="300" /><path
+     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="M 326.1999,368 H 480.00008"
+     id="path11-8"
+     sodipodi:nodetypes="cc"
+     clip-path="none" /><path
+     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="M 32.00001,32 H 480.00008"
+     id="path11-8-2-67"
+     clip-path="none"
+     sodipodi:nodetypes="cc" /><path
+     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="M 32,480 H 480.00008"
+     id="path11-8-2-67-2"
+     clip-path="none"
+     sodipodi:nodetypes="cc" /><path
+     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="m 351.99998,255.98832 128.0001,0.0233"
+     id="path11-0"
+     sodipodi:nodetypes="cc"
+     clip-path="none" /><path
+     id="path23"
+     style="opacity:0.922046;fill:#000000;fill-opacity:1;stroke-width:64;stroke-linecap:round;stroke-dasharray:none;paint-order:fill markers stroke"
+     d="M 96,96 A 160,160 0 0 0 0,128.50977 V 383.49023 A 160,160 0 0 0 96,416 160,160 0 0 0 256,256 160,160 0 0 0 96,96 Z" /></svg>

client/icons/single-spread.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1.41826,0,0,1.3313,-26.7845,-19.5573)">
+        <path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
+    </g>
+</svg>

client/icons/zoom-to-fit.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1.0781,0,0,1.0781,-3.90545,-3.90502)">
+        <g transform="matrix(0.841196,0,0,0.947993,8.49652,4.52391)">
+            <path d="M44.333,52.413L28.455,52.413L28.455,58.581C28.455,59.719 27.684,60.745 26.501,61.181C25.318,61.616 23.956,61.375 23.051,60.571L11.114,49.96C9.878,48.862 9.878,47.08 11.114,45.981L23.051,35.371C23.956,34.566 25.318,34.326 26.501,34.761C27.684,35.197 28.455,36.223 28.455,37.361L28.455,43.528L44.333,43.528L44.333,29.439L37.382,29.439C36.099,29.439 34.943,28.755 34.452,27.705C33.961,26.656 34.233,25.448 35.14,24.644L47.097,14.052C48.335,12.956 50.343,12.956 51.581,14.052L63.539,24.644C64.446,25.448 64.717,26.656 64.226,27.705C63.735,28.755 62.579,29.439 61.296,29.439L54.346,29.439L54.346,43.528L70.223,43.528L70.223,37.361C70.223,36.223 70.995,35.197 72.177,34.761C73.36,34.326 74.722,34.566 75.627,35.371L87.564,45.981C88.8,47.08 88.8,48.862 87.564,49.96L75.627,60.571C74.722,61.375 73.36,61.616 72.177,61.181C70.995,60.745 70.223,59.719 70.223,58.581L70.223,52.413L54.346,52.413L54.346,66.502L61.296,66.502C62.579,66.502 63.735,67.187 64.226,68.236C64.717,69.286 64.446,70.494 63.539,71.297L51.581,81.889C50.343,82.986 48.335,82.986 47.097,81.889L35.14,71.297C34.233,70.494 33.961,69.286 34.452,68.236C34.943,67.187 36.099,66.502 37.382,66.502L44.333,66.503L44.333,52.413Z"/>
+        </g>
+        <g transform="matrix(1.0247,0,0,1.0247,-5.47698,-3.53855)">
+            <path d="M99.4,14.269L99.4,90.227C99.4,94.245 96.137,97.508 92.119,97.508L16.161,97.508C12.142,97.508 8.88,94.245 8.88,90.227L8.88,14.269C8.88,10.25 12.142,6.988 16.161,6.988L92.119,6.988C96.137,6.988 99.4,10.25 99.4,14.269ZM93.633,14.269C93.633,13.433 92.955,12.755 92.119,12.755L16.161,12.755C15.325,12.755 14.647,13.433 14.647,14.269L14.647,90.227C14.647,91.062 15.325,91.741 16.161,91.741L92.119,91.741C92.955,91.741 93.633,91.062 93.633,90.227L93.633,14.269Z"/>
+        </g>
+    </g>
+</svg>

client/template.js

@@ -8,6 +8,8 @@ const template = async function(name, title='', props = {}){
 	});
 	const ogMetaTags = ogTags.join('\n');
 
+	const ssrModule = await import(`../build/${name}/ssr.cjs`);
+
 	return `<!DOCTYPE html>
 	<html>
 		<head>
@@ -21,7 +23,7 @@ const template = async function(name, title='', props = {}){
 			<title>${title.length ? `${title} - The Homebrewery`: 'The Homebrewery - NaturalCrit'}</title>
 		</head>
 		<body>
-			<main id="reactRoot">${require(`../build/${name}/ssr.js`)(props)}</main>
+			<main id="reactRoot">${ssrModule.default(props)}</main>
 			<script src=${`/${name}/bundle.js`}></script>
 			<script>start_app(${JSON.stringify(props)})</script>
 		</body>
@@ -29,4 +31,4 @@ const template = async function(name, title='', props = {}){
 	`;
 };
 
-module.exports = template;
+export default template;

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
 }

faq.md

@@ -69,7 +69,6 @@ pre {
 
 You can check the site status here: [Everyone or Just Me](https://downforeveryoneorjustme.com/homebrewery.naturalcrit.com)
 
-
 ### Why am I getting an error when trying to save, and my account is linked to Google?
 
 A sign-in with Google only lasts a year until the authentication expires.  You must go [here](https://www.naturalcrit.com/login), click the *Log-out* button, and then sign back in using your Google account.
@@ -82,12 +81,17 @@ If you have linked your account with a Google account, you would change your pas
 
 ### Is there a way to restore a previous version of my brew?
 
-Currently, there is no way to do this through the site yourself. This would take too much of a toll on the amount of storage the homebrewery requires. However, we do have daily backups of our database that we keep for 8 days, and you can contact the moderators on [the subreddit](https://www.reddit.com/r/homebrewery) with your Homebrewery username, the name of the lost brew, and the last known time it was working properly. We can manually look through our backups and restore it if it exists.
+In your brew, there is an icon, :fas_clock_rotate_left:, that button opens up a menu with versions of your brew, stored in order from newer to older, up to a week old. Because of the amount of duplicates this function creates, this information is stored in **your browser**, so if you were to uninstall it or clear your cookies and site data, or change computers, the info will not be there.
+
+Also, we do have daily backups of our database that we keep for 8 days, and you can contact the moderators on [the subreddit](https://www.reddit.com/r/homebrewery) with your Homebrewery username, the name of the lost brew, and the last known time it was working properly. We can manually look through our backups and restore it if it exists.
+
 
 ### I worked on a brew for X hours, and suddenly all the text disappeared!
 
 This usually happens if you accidentally drag-select all of your text and then start typing which overwrites the selection. Do not panic, and do not refresh the page or reload your brew quite yet as it is probably auto-saved in this state already. Simply press CTRL+Z as many times as needed to undo your last few changes and you will be back to where you were, then make sure to save your brew in the "good" state.
 
+You can also load a history version old enough to have all the text, using the :fas_clock_rotate_left: history versions button.
+
 \column
 
 ### Why is only Chrome supported?
@@ -112,10 +116,7 @@ Once you have an image you would like to use, it is recommended to host it somew
 \page
 
 ### A particular font does not work for my language, what do I do?
-The fonts used were originally created for use with the English language, though revisions since then have added more support for other languages.  They are still not complete sets and may be missing a glyph/character you need.  Unfortunately, the volunteer group as it stands at the time of this writing does not have a font guru, so it would be difficult to add more glyphs (especially complicated glyphs).  Let us know which glyph is missing on the subreddit, but you may need to search [Google Fonts](https://fonts.google.com) for an alternative font if you need something fast.
-
-### Whenever I click on the "Get PDF" button, instead of getting a download, it opens Print Preview in another tab.
-Yes, this is by design. In the print preview, select "Save as PDF" as the Destination, and then click "Save". There will be a normal download dialog where you can save your brew as a PDF.
+The fonts used were originally created for use with the English language, though revisions since then have added more support for other languages. They are still not complete sets and may be missing a glyph/character you need. Unfortunately, the volunteer group as it stands at the time of this writing does not have a font guru, so it would be difficult to add more glyphs (especially complicated glyphs). Let us know which glyph is missing on the subreddit, but you may need to search [Google Fonts](https://fonts.google.com) for an alternative font if you need something fast.
 
 ### I have white borders on the bottom/sides of the print preview.
 
@@ -126,4 +127,8 @@ The Homebrewery defaults to creating US Letter page sizes.  If you are printing
 
 ### Typing `#### Adhesion` in the text editor doesn't show the header at all in the completed page?
 
-Your ad-blocking software is mistakenly assuming your text to be an ad. Whitelist homebrewery.naturalcrit.com in your ad-blocking software.
+Your ad-blocking software is mistakenly assuming your text to be an ad. We recommend whitelisting homebrewery.naturalcrit.com in your ad-blocking software, as we have no ads.
+
+### My username appears as _hidden_ when checking my brews in the Vault, why is that?
+
+Your username is most likely your e-mail adress, and our code is picking that up and protecting your identity. This will remain as is, but you can ask for a name change by contacting the moderators on [the subreddit](https://www.reddit.com/r/homebrewery) with your Homebrewery username, and your desired new name. You will also be asked to provide details about some of your unpublished brews, to verify your identity. No information will be leaked or shared.

package.json

@@ -1,20 +1,21 @@
 {
   "name": "homebrewery",
   "description": "Create authentic looking D&D homebrews using only markdown",
-  "version": "3.14.1",
+  "version": "3.16.1",
+  "type": "module",
   "engines": {
     "npm": "^10.2.x",
-    "node": "^20.8.x"
+    "node": "^20.18.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}",
@@ -24,6 +25,9 @@
     "test": "jest --runInBand",
     "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:content-negotiation": "jest \"server/middleware/.*.spec.js\" --verbose",
     "test:coverage": "jest --coverage --silent --runInBand",
     "test:dev": "jest --verbose --watch",
     "test:basic": "jest tests/markdown/basic.test.js --verbose",
@@ -34,12 +38,14 @@
     "test:mustache-syntax:injection": "jest \".*(mustache-syntax).*\" -t '^Injection:.*' --verbose --noStackTrace",
     "test:definition-lists": "jest tests/markdown/definition-lists.test.js --verbose --noStackTrace",
     "test:hard-breaks": "jest tests/markdown/hard-breaks.test.js --verbose --noStackTrace",
+    "test:non-breaking-spaces": "jest tests/markdown/non-breaking-spaces.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",
+    "test:safehtml": "jest tests/html/safeHTML.test.js --verbose",
+    "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",
@@ -53,6 +59,9 @@
       "shared",
       "server"
     ],
+    "transformIgnorePatterns": [
+      "node_modules/(?!nanoid/).*"
+    ],
     "coveragePathIgnorePatterns": [
       "build/*"
     ],
@@ -74,66 +83,62 @@
       "jest-expect-message"
     ]
   },
-  "babel": {
-    "presets": [
-      "@babel/preset-env",
-      "@babel/preset-react"
-    ],
-    "plugins": [
-      "@babel/plugin-transform-runtime"
-    ]
-  },
   "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.0",
+    "@babel/core": "^7.26.0",
+    "@babel/plugin-transform-runtime": "^7.25.9",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.26.3",
+    "@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",
+    "core-js": "^3.39.0",
+    "cors": "^2.8.5",
     "create-react-class": "^15.7.0",
     "dedent-tabs": "^0.10.3",
-    "dompurify": "^3.1.6",
+    "dompurify": "^3.2.3",
     "expr-eval": "^2.0.2",
-    "express": "^4.19.2",
+    "express": "^4.21.2",
     "express-async-handler": "^1.2.0",
-    "express-static-gzip": "2.1.7",
+    "express-static-gzip": "2.2.0",
     "fs-extra": "11.2.0",
+    "idb-keyval": "^6.2.1",
     "js-yaml": "^4.1.0",
     "jwt-simple": "^0.5.6",
     "less": "^3.13.1",
     "lodash": "^4.17.21",
     "marked": "11.2.0",
-    "marked-emoji": "^1.4.2",
-    "marked-extended-tables": "^1.0.8",
+    "marked-emoji": "^1.4.3",
+    "marked-extended-tables": "^1.0.10",
     "marked-gfm-heading-id": "^3.2.0",
     "marked-smartypants-lite": "^1.0.2",
     "markedLegacy": "npm:marked@^0.3.19",
     "moment": "^2.30.1",
-    "mongoose": "^8.5.4",
-    "nanoid": "3.3.4",
+    "mongoose": "^8.9.2",
+    "nanoid": "5.0.9",
     "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": "^7.1.1",
     "sanitize-filename": "1.6.3",
-    "superagent": "^10.1.0",
+    "superagent": "^10.1.1",
     "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",
+    "babel-plugin-transform-import-meta": "^2.2.1",
+    "eslint": "^9.17.0",
+    "eslint-plugin-jest": "^28.10.0",
+    "eslint-plugin-react": "^7.37.3",
+    "globals": "^15.14.0",
     "jest": "^29.7.0",
     "jest-expect-message": "^1.1.3",
+    "jsdom-global": "^3.0.2",
     "postcss-less": "^6.0.0",
-    "stylelint": "^16.8.2",
-    "stylelint-config-recess-order": "^5.1.0",
+    "stylelint": "^16.12.0",
+    "stylelint-config-recess-order": "^5.1.1",
     "stylelint-config-recommended": "^14.0.1",
     "supertest": "^7.0.0"
   }

scripts/buildAdmin.js

@@ -1,13 +1,14 @@
-const fs = require('fs-extra');
-const Proj = require('./project.json');
 
-const { pack } = require('vitreum');
+import fs   from 'fs-extra';
+import Proj from './project.json' with { type: 'json' };
+import vitreum from 'vitreum';
+const { pack } = vitreum;
+
+import lessTransform  from 'vitreum/transforms/less.js';
+import assetTransform from 'vitreum/transforms/asset.js';
+
 const isDev = !!process.argv.find((arg)=>arg=='--dev');
 
-const lessTransform  = require('vitreum/transforms/less.js');
-const assetTransform = require('vitreum/transforms/asset.js');
-//const Meta = require('vitreum/headtags');
-
 const transforms = {
 	'.less' : lessTransform,
 	'*'     : assetTransform('./build')
@@ -17,7 +18,7 @@ const build = async ({ bundle, render, ssr })=>{
 	const css = await lessTransform.generate({ paths: './shared' });
 	await fs.outputFile('./build/admin/bundle.css', css);
 	await fs.outputFile('./build/admin/bundle.js', bundle);
-	await fs.outputFile('./build/admin/ssr.js', ssr);
+	await fs.outputFile('./build/admin/ssr.cjs', ssr);
 };
 
 fs.emptyDirSync('./build/admin');

scripts/buildHomebrew.js

@@ -1,16 +1,18 @@
-const fs = require('fs-extra');
-const zlib = require('zlib');
-const Proj = require('./project.json');
+import fs   from 'fs-extra';
+import zlib from 'zlib';
+import Proj from './project.json' with { type: 'json' };
+import vitreum from 'vitreum';
+const { pack, watchFile, livereload } = vitreum;
 
-const { pack, watchFile, livereload } = require('vitreum');
-const isDev = !!process.argv.find((arg)=>arg=='--dev');
+import lessTransform  from 'vitreum/transforms/less.js';
+import assetTransform from 'vitreum/transforms/asset.js';
+import babel          from '@babel/core';
+import babelConfig    from '../babel.config.json' with { type : 'json' };
+import less           from 'less';
 
-const lessTransform  = require('vitreum/transforms/less.js');
-const assetTransform = require('vitreum/transforms/asset.js');
-const babel          = require('@babel/core');
-const less           = require('less');
+const isDev = !!process.argv.find((arg) => arg === '--dev');
 
-const babelify = async (code)=>(await babel.transformAsync(code, { presets: [['@babel/preset-env', { 'exclude': ['proposal-dynamic-import'] }], '@babel/preset-react'], plugins: ['@babel/plugin-transform-runtime'] })).code;
+const babelify = async (code)=>(await babel.transformAsync(code, babelConfig)).code;
 
 const transforms = {
 	'.js'   : (code, filename, opts)=>babelify(code),
@@ -24,7 +26,7 @@ const build = async ({ bundle, render, ssr })=>{
 	//css = `@layer bundle {\n${css}\n}`;
 	await fs.outputFile('./build/homebrew/bundle.css', css);
 	await fs.outputFile('./build/homebrew/bundle.js', bundle);
-	await fs.outputFile('./build/homebrew/ssr.js', ssr);
+	await fs.outputFile('./build/homebrew/ssr.cjs', ssr);
 
 	await fs.copy('./client/homebrew/favicon.ico', './build/assets/favicon.ico');
 
@@ -51,7 +53,7 @@ fs.emptyDirSync('./build');
 	const themes = { Legacy: {}, V3: {} };
 
 	let themeFiles = fs.readdirSync('./themes/Legacy');
-	for (dir of themeFiles) {
+	for (let dir of themeFiles) {
 		const themeData = JSON.parse(fs.readFileSync(`./themes/Legacy/${dir}/settings.json`).toString());
 		themeData.path = dir;
 		themes.Legacy[dir] = (themeData);
@@ -68,7 +70,7 @@ fs.emptyDirSync('./build');
 	}
 
 	themeFiles = fs.readdirSync('./themes/V3');
-	for (dir of themeFiles) {
+	for (let dir of themeFiles) {
 		const themeData = JSON.parse(fs.readFileSync(`./themes/V3/${dir}/settings.json`).toString());
 		themeData.path = dir;
 		themes.V3[dir] = (themeData);
@@ -104,14 +106,14 @@ fs.emptyDirSync('./build');
 	const editorThemesBuildDir = './build/homebrew/cm-themes';
 	await fs.copy('./node_modules/codemirror/theme', editorThemesBuildDir);
 	await fs.copy('./themes/codeMirror/customThemes', editorThemesBuildDir);
-	editorThemeFiles = fs.readdirSync(editorThemesBuildDir);
+	const editorThemeFiles = fs.readdirSync(editorThemesBuildDir);
 
 	const editorThemeFile = './themes/codeMirror/editorThemes.json';
 	if(fs.existsSync(editorThemeFile)) fs.rmSync(editorThemeFile);
 	const stream = fs.createWriteStream(editorThemeFile, { flags: 'a' });
 	stream.write('[\n"default"');
 
-	for (themeFile of editorThemeFiles) {
+	for (let themeFile of editorThemeFiles) {
 		stream.write(`,\n"${themeFile.slice(0, -4)}"`);
 	}
 	stream.write('\n]\n');

server.js

@@ -1,12 +1,12 @@
-const DB = require('./server/db.js');
-const server = require('./server/app.js');
-const config = require('./server/config.js');
+import DB     from './server/db.js';
+import server from './server/app.js';
+import config from './server/config.js';
 
 DB.connect(config).then(()=>{
 	// Ensure that we have successfully connected to the database
 	// before launching server
 	const PORT = process.env.PORT || config.get('web_port') || 8000;
-	server.app.listen(PORT, ()=>{
+	server.listen(PORT, ()=>{
 		const reset = '\x1b[0m'; // Reset to default style
 		const bright = '\x1b[1m'; // Bright (bold) style
 		const cyan = '\x1b[36m'; // Cyan color

server/admin.api.js

@@ -1,9 +1,15 @@
-const HomebrewModel = require('./homebrew.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');
+import { model as HomebrewModel }     from './homebrew.model.js';
+import { model as NotificationModel } from './notifications.model.js';
+import express    from 'express';
+import Moment     from 'moment';
+import zlib       from 'zlib';
+import templateFn from '../client/template.js';
+
+import HomebrewAPI  from './homebrew.api.js';
+import asyncHandler from 'express-async-handler';
+import { splitTextStyleAndMetadata } from '../shared/helpers.js';
+
+const router = express.Router();
 
 process.env.ADMIN_USER = process.env.ADMIN_USER || 'admin';
 process.env.ADMIN_PASS = process.env.ADMIN_PASS || 'password3';
@@ -22,7 +28,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' };
 	}
 };
 
@@ -66,23 +72,8 @@ router.post('/admin/cleanup', mw.adminOnly, (req, res)=>{
 });
 
 /* Searches for matching edit or share id, also attempts to partial match */
-router.get('/admin/lookup/:id', mw.adminOnly, async (req, res, next)=>{
-	HomebrewModel.findOne({
-		$or : [
-			{ editId: { $regex: req.params.id, $options: 'i' } },
-			{ shareId: { $regex: req.params.id, $options: 'i' } },
-		]
-	}).exec()
-	.then((brew)=>{
-		if(!brew)	// No document found
-			return res.status(404).json({ error: 'Document not found' });
-		else
-			return res.json(brew);
-	})
-	.catch((err)=>{
-		console.error(err);
-		return res.status(500).json({ error: 'Internal Server Error' });
-	});
+router.get('/admin/lookup/:id', mw.adminOnly, asyncHandler(HomebrewAPI.getBrew('admin', false)), async (req, res, next)=>{
+	return res.json(req.brew);
 });
 
 /* Find 50 brews that aren't compressed yet */
@@ -100,6 +91,28 @@ router.get('/admin/finduncompressed', mw.adminOnly, (req, res)=>{
 		});
 });
 
+/* Cleans `<script` and `</script>` from the "text" field of a brew */
+router.put('/admin/clean/script/:id', asyncHandler(HomebrewAPI.getBrew('admin', false)), async (req, res)=>{
+	console.log(`[ADMIN] Cleaning script tags from ShareID ${req.params.id}`);
+
+	function cleanText(text){return text.replaceAll(/(<\/?s)cript/gi, '');};
+
+	const brew = req.brew;
+
+	const properties = ['text', 'description', 'title'];
+	properties.forEach((property)=>{
+		brew[property] = cleanText(brew[property]);
+	});
+
+	splitTextStyleAndMetadata(brew);
+
+	req.body = brew;
+
+	// Remove Account from request to prevent Admin user from being added to brew as an Author
+	req.account = undefined;
+
+	return await HomebrewAPI.updateBrew(req, res);
+});
 
 /* Compresses the "text" field of a brew to binary */
 router.put('/admin/compress/:id', (req, res)=>{
@@ -138,12 +151,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)=>{
+	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;
+export default router;

server/admin.api.spec.js

@@ -0,0 +1,117 @@
+import supertest from 'supertest';
+import HBApp     from './app.js';
+import {model as NotificationModel } from './notifications.model.js';
+
+
+// Mimic https responses to avoid being redirected all the time
+const app = supertest.agent(HBApp).set('X-Forwarded-Proto', 'https');
+
+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/brewDefaults.js

@@ -1,4 +1,4 @@
-const _ = require('lodash');
+import _ from 'lodash';
 
 // Default properties for newly-created brews
 const DEFAULT_BREW = {
@@ -32,7 +32,7 @@ const DEFAULT_BREW_LOAD = _.defaults(
 	},
 	DEFAULT_BREW);
 
-module.exports = {
+export {
 	DEFAULT_BREW,
 	DEFAULT_BREW_LOAD
 };

server/config.js

@@ -1,5 +1,7 @@
-module.exports = require('nconf')
-    .argv()
-    .env({ lowerCase: true })
-    .file('environment', { file: `config/${process.env.NODE_ENV}.json` })
-    .file('defaults', { file: 'config/default.json' });
+import nconf from 'nconf';
+
+export default nconf
+	.argv()
+	.env({ lowerCase: true })
+	.file('environment', { file: `config/${process.env.NODE_ENV}.json` })
+	.file('defaults', { file: 'config/default.json' });

server/db.js

@@ -5,7 +5,7 @@
 // reused by both the main application and all tests which require database
 // connection.
 
-const Mongoose = require('mongoose');
+import Mongoose from 'mongoose';
 
 const getMongoDBURL = (config)=>{
 	return config.get('mongodb_uri') ||
@@ -31,7 +31,7 @@ const connect = async (config)=>{
 		.catch((error)=>handleConnectionError(error));
 };
 
-module.exports = {
-	connect    : connect,
-	disconnect : disconnect
+export default {
+	connect,
+	disconnect
 };

server/forcessl.mw.js

@@ -1,4 +1,4 @@
-module.exports = (req, res, next)=>{
+export default (req, res, next)=>{
 	if(process.env.NODE_ENV === 'local' || process.env.NODE_ENV === 'docker') return next();
 	if(req.header('x-forwarded-proto') !== 'https') {
 		return res.redirect(302, `https://${req.get('Host')}${req.url}`);

server/googleActions.js

@@ -1,8 +1,9 @@
 /* eslint-disable max-lines */
-const googleDrive = require('@googleapis/drive');
-const { nanoid } = require('nanoid');
-const token = require('./token.js');
-const config = require('./config.js');
+import googleDrive from '@googleapis/drive';
+import { nanoid }  from 'nanoid';
+import token       from './token.js';
+import config      from './config.js';
+
 
 let serviceAuth;
 if(!config.get('service_account')){
@@ -25,6 +26,15 @@ if(!config.get('service_account')){
 
 const defaultAuth = serviceAuth || config.get('google_api_key');
 
+const retryConfig = {
+  retry: 3, // Number of retry attempts
+  retryDelay: 100, // Initial delay in milliseconds
+  retryDelayMultiplier: 2, // Multiplier for exponential backoff
+  maxRetryDelay: 32000, // Maximum delay in milliseconds
+  httpMethodsToRetry: ['PATCH'], // Only retry PATCH requests
+  statusCodesToRetry: [[429, 429]], // Only retry on 429 status code
+};
+
 const GoogleActions = {
 
 	authCheck : (account, res, updateTokens=true)=>{
@@ -50,7 +60,7 @@ const GoogleActions = {
 				account.googleRefreshToken = tokens.refresh_token;
 			}
 			account.googleAccessToken = tokens.access_token;
-			const JWTToken = token.generateAccessToken(account);
+			const JWTToken = token(account);
 
 			//Save updated token to cookie
 			//res.cookie('nc_session', JWTToken, { maxAge: 1000*60*60*24*365, path: '/', sameSite: 'lax' });
@@ -63,7 +73,7 @@ const GoogleActions = {
 	getGoogleFolder : async (auth)=>{
 		const drive = googleDrive.drive({ version: 'v3', auth });
 
-		fileMetadata = {
+		const fileMetadata = {
 			'name'     : 'Homebrewery',
 			'mimeType' : 'application/vnd.google-apps.folder'
 		};
@@ -112,9 +122,7 @@ const GoogleActions = {
 			})
 			.catch((err)=>{
 				console.log(`Error Listing Google Brews`);
-				console.error(err);
 				throw (err);
-				//TODO: Should break out here, but continues on for some reason.
 			});
 			fileList.push(...obj.data.files);
 			NextPageToken = obj.data.nextPageToken;
@@ -147,7 +155,7 @@ const GoogleActions = {
 	  return brews;
 	},
 
-	updateGoogleBrew : async (brew)=>{
+	updateGoogleBrew : async (brew, userIp)=>{
 		const drive = googleDrive.drive({ version: 'v3', auth: defaultAuth });
 
 		await drive.files.update({
@@ -168,11 +176,14 @@ const GoogleActions = {
 			media : {
 				mimeType : 'text/plain',
 				body     : brew.text
-			}
+			},
+			headers: {
+				'X-Forwarded-For': userIp, // Set the X-Forwarded-For header
+			},
+			retryConfig
 		})
 		.catch((err)=>{
 			console.log('Error saving to google');
-			console.error(err);
 			throw (err);
 		});
 
@@ -211,7 +222,6 @@ const GoogleActions = {
 		})
 		.catch((err)=>{
 			console.log('Error while creating new Google brew');
-			console.error(err);
 			throw (err);
 		});
 
@@ -231,8 +241,8 @@ const GoogleActions = {
 		return obj.data.id;
 	},
 
-	getGoogleBrew : async (id, accessId, accessType)=>{
-		const drive = googleDrive.drive({ version: 'v3', auth: defaultAuth });
+	getGoogleBrew : async (auth = defaultAuth, id, accessId, accessType)=>{
+		const drive = googleDrive.drive({ version: 'v3', auth: auth });
 
 		const obj = await drive.files.get({
 			fileId : id,
@@ -335,4 +345,4 @@ const GoogleActions = {
 	}
 };
 
-module.exports = GoogleActions;
+export default GoogleActions;

server/homebrew.api.js

@@ -1,18 +1,20 @@
 /* eslint-disable max-lines */
-const _ = require('lodash');
-const HomebrewModel = require('./homebrew.model.js').model;
-const router = require('express').Router();
-const zlib = require('zlib');
-const GoogleActions = require('./googleActions.js');
-const Markdown = require('../shared/naturalcrit/markdown.js');
-const yaml = require('js-yaml');
-const asyncHandler = require('express-async-handler');
-const { nanoid } = require('nanoid');
-const { splitTextStyleAndMetadata } = require('../shared/helpers.js');
+import _                             from 'lodash';
+import {model as HomebrewModel}      from './homebrew.model.js';
+import express                       from 'express';
+import zlib                          from 'zlib';
+import GoogleActions                 from './googleActions.js';
+import Markdown                      from '../shared/naturalcrit/markdown.js';
+import yaml                          from 'js-yaml';
+import asyncHandler                  from 'express-async-handler';
+import { nanoid }                    from 'nanoid';
+import { splitTextStyleAndMetadata } from '../shared/helpers.js';
+import checkClientVersion            from './middleware/check-client-version.js';
 
-const { DEFAULT_BREW, DEFAULT_BREW_LOAD } = require('./brewDefaults.js');
+const router = express.Router();
 
-const Themes = require('../themes/themes.json');
+import { DEFAULT_BREW, DEFAULT_BREW_LOAD } from './brewDefaults.js';
+import Themes from '../themes/themes.json' with { type: 'json' };
 
 const isStaticTheme = (renderer, themeName)=>{
 	return Themes[renderer]?.[themeName] !== undefined;
@@ -85,69 +87,85 @@ const api = {
 		// Create middleware with the accessType passed in as part of the scope
 		return async (req, res, next)=>{
 			// Get relevant IDs for the brew
-			const { id, googleId } = api.getId(req);
+			let { id, googleId } = api.getId(req);
+
+			const accessMap = {
+				edit  : { editId: id },
+				share : { shareId: id },
+				admin : { $or : [{ editId: id }, { shareId: id }] }
+			};
 
 			// Try to find the document in the Homebrewery database -- if it doesn't exist, that's fine.
-			let stub = await HomebrewModel.get(accessType === 'edit' ? { editId: id } : { shareId: id })
+			let stub = await HomebrewModel.get(accessMap[accessType])
 				.catch((err)=>{
-					if(googleId) {
+					if(googleId)
 						console.warn(`Unable to find document stub for ${accessType}Id ${id}`);
-					} else {
+					else
 						console.warn(err);
-					}
 				});
 			stub = stub?.toObject();
+			googleId ??= stub?.googleId;
 
-			if(stub?.lock?.locked && accessType != 'edit') {
-				throw { HBErrorCode: '100', code: stub.lock.code, message: stub.lock.shareMessage, brewId: stub.shareId, brewTitle: stub.title };
+			const isOwner   = (accessType == 'edit' && (!stub || stub?.authors?.length === 0)) || stub?.authors?.[0] === req.account?.username;
+			const isAuthor  = stub?.authors?.includes(req.account?.username);
+			const isInvited = stub?.invitedAuthors?.includes(req.account?.username);
+
+			if(accessType === 'edit' && !(isOwner || isAuthor || isInvited)) {
+				const accessError = { name: 'Access Error', status: 401, authors: stub?.authors, brewTitle: stub?.title, shareId: stub?.shareId };
+				if(req.account)
+					throw { ...accessError, message: 'User is not an Author', HBErrorCode: '03' };
+				else
+					throw { ...accessError, message: 'User is not logged in', HBErrorCode: '04' };
 			}
 
-			// If there is a google id, try to find the google brew
-			if(!stubOnly && (googleId || stub?.googleId)) {
-				let googleError;
-				const googleBrew = await GoogleActions.getGoogleBrew(googleId || stub?.googleId, id, accessType)
-					.catch((err)=>{
-						googleError = err;
+			if(stub?.lock?.locked && accessType != 'edit') {
+				throw { HBErrorCode: '51', code: stub?.lock.code, message: stub?.lock.shareMessage, brewId: stub?.shareId, brewTitle: stub?.title };
+			}
+
+			// If there's a google id, get it if requesting the full brew or if no stub found yet
+			if(googleId && (!stubOnly || !stub)) {
+				const oAuth2Client = isOwner ? GoogleActions.authCheck(req.account, res) : undefined;
+
+				const googleBrew = await GoogleActions.getGoogleBrew(oAuth2Client, googleId, id, accessType)
+					.catch((googleError)=>{
+						const reason = googleError.errors?.[0].reason;
+						if(reason == 'notFound')
+							throw { ...googleError, HBErrorCode: '02', authors: stub?.authors, account: req.account?.username };
+						else
+							throw { ...googleError, HBErrorCode: '01' };
 					});
-				// Throw any error caught while attempting to retrieve Google brew.
-				if(googleError) {
-					const reason = googleError.errors?.[0].reason;
-					if(reason == 'notFound') {
-						throw { ...googleError, HBErrorCode: '02', authors: stub?.authors, account: req.account?.username };
-					} else {
-						throw { ...googleError, HBErrorCode: '01' };
-					}
-				}
+
 				// Combine the Homebrewery stub with the google brew, or if the stub doesn't exist just use the google brew
 				stub = stub ? _.assign({ ...api.excludeStubProps(stub), stubbed: true }, api.excludeGoogleProps(googleBrew)) : googleBrew;
 			}
-			const authorsExist = stub?.authors?.length > 0;
-			const isAuthor = stub?.authors?.includes(req.account?.username);
-			const isInvited = stub?.invitedAuthors?.includes(req.account?.username);
-			if(accessType === 'edit' && (authorsExist && !(isAuthor || isInvited))) {
-				const accessError = { name: 'Access Error', status: 401 };
-				if(req.account){
-					throw { ...accessError, message: 'User is not an Author', HBErrorCode: '03', authors: stub.authors, brewTitle: stub.title, shareId: stub.shareId };
-				}
-				throw { ...accessError, message: 'User is not logged in', HBErrorCode: '04', authors: stub.authors, brewTitle: stub.title, shareId: stub.shareId };
-			}
 
 			// If after all of that we still don't have a brew, throw an exception
-			if(!stub && !stubOnly) {
+			if(!stub)
 				throw { name: 'BrewLoad Error', message: 'Brew not found', status: 404, HBErrorCode: '05', accessType: accessType, brewId: id };
-			}
 
 			// Clean up brew: fill in missing fields with defaults / fix old invalid values
-			if(stub) {
-				stub.tags     = stub.tags     || undefined; // Clear empty strings
-				stub.renderer = stub.renderer || undefined; // Clear empty strings
-				stub = _.defaults(stub, DEFAULT_BREW_LOAD); // Fill in blank fields
-			}
+			stub.tags     = stub.tags     || undefined; // Clear empty strings
+			stub.renderer = stub.renderer || undefined; // Clear empty strings
+			stub = _.defaults(stub, DEFAULT_BREW_LOAD); // Fill in blank fields
 
-			req.brew = stub ?? {};
+			req.brew = stub;
 			next();
 		};
 	},
+
+	getCSS : async (req, res)=>{
+		const { brew } = req;
+		if(!brew) return res.status(404).send('');
+		splitTextStyleAndMetadata(brew);
+		if(!brew.style) return res.status(404).send('');
+
+		res.set({
+			'Cache-Control' : 'no-cache',
+			'Content-Type'  : 'text/css'
+		});
+		return res.status(200).send(brew.style);
+	},
+
 	mergeBrewText : (brew)=>{
 		let text = brew.text;
 		if(brew.style !== undefined) {
@@ -228,11 +246,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;
@@ -284,9 +299,8 @@ const api = {
 
 				req.params.id       = currentTheme.theme;
 				req.params.renderer = currentTheme.renderer;
-			}
+			} else {
 			//=== Static Themes ===//
-			else {
 				const localSnippets = `${req.params.renderer}_${req.params.id}`; // Just log the name for loading on client
 				const localStyle    = `@import url(\"/themes/${req.params.renderer}/${req.params.id}/style.css\");`;
 				completeSnippets.push(localSnippets);
@@ -337,19 +351,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), req.ip);
+
 			if(!updated) return;
 		}
 
@@ -459,12 +467,11 @@ const api = {
 	}
 };
 
-router.use('/api', require('./middleware/check-client-version.js'));
-router.post('/api', asyncHandler(api.newBrew));
-router.put('/api/:id', asyncHandler(api.getBrew('edit', true)), asyncHandler(api.updateBrew));
-router.put('/api/update/:id', asyncHandler(api.getBrew('edit', true)), asyncHandler(api.updateBrew));
-router.delete('/api/:id', asyncHandler(api.deleteBrew));
-router.get('/api/remove/:id', asyncHandler(api.deleteBrew));
+router.post('/api', checkClientVersion, asyncHandler(api.newBrew));
+router.put('/api/:id', checkClientVersion, asyncHandler(api.getBrew('edit', true)), asyncHandler(api.updateBrew));
+router.put('/api/update/:id', checkClientVersion, asyncHandler(api.getBrew('edit', true)), asyncHandler(api.updateBrew));
+router.delete('/api/:id', checkClientVersion, asyncHandler(api.deleteBrew));
+router.get('/api/remove/:id', checkClientVersion, asyncHandler(api.deleteBrew));
 router.get('/api/theme/:renderer/:id', asyncHandler(api.getThemeBundle));
 
-module.exports = api;
+export default api;

server/homebrew.api.spec.js

@@ -1,5 +1,7 @@
 /* eslint-disable max-lines */
 
+import { splitTextStyleAndMetadata } from '../shared/helpers.js';
+
 describe('Tests for api', ()=>{
 	let api;
 	let google;
@@ -36,8 +38,9 @@ describe('Tests for api', ()=>{
 			}
 		});
 
-		google = require('./googleActions.js');
-		model = require('./homebrew.model.js').model;
+		google = require('./googleActions.js').default;
+		model  = require('./homebrew.model.js').model;
+		api    = require('./homebrew.api').default;
 
 		jest.mock('./googleActions.js');
 		google.authCheck = jest.fn(()=>'client');
@@ -50,11 +53,10 @@ describe('Tests for api', ()=>{
 		res = {
 			status    : jest.fn(()=>res),
 			send      : jest.fn(()=>{}),
+			set       : jest.fn(()=>{}),
 			setHeader : jest.fn(()=>{})
 		};
 
-		api = require('./homebrew.api');
-
 		hbBrew = {
 			text        : `brew text`,
 			style       : 'hello yes i am css',
@@ -296,7 +298,7 @@ describe('Tests for api', ()=>{
 			expect(next).toHaveBeenCalled();
 			expect(api.getId).toHaveBeenCalledWith(req);
 			expect(model.get).toHaveBeenCalledWith({ shareId: '1' });
-			expect(google.getGoogleBrew).toHaveBeenCalledWith('2', '1', 'share');
+			expect(google.getGoogleBrew).toHaveBeenCalledWith(undefined, '2', '1', 'share');
 		});
 
 		it('access is denied to a locked brew', async()=>{
@@ -308,7 +310,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' });
 		});
 	});
 
@@ -559,16 +561,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', ()=>{
@@ -916,4 +908,119 @@ brew`);
 			expect(saved.googleId).toEqual(brew.googleId);
 		});
 	});
+	describe('Get CSS', ()=>{
+		it('should return brew style content as CSS text', async ()=>{
+			const testBrew = { title: 'test brew', text: '```css\n\nI Have a style!\n````\n\n' };
+
+			const toBrewPromise = (brew)=>new Promise((res)=>res({ toObject: ()=>brew }));
+			api.getId = jest.fn(()=>({ id: '1', googleId: undefined }));
+			model.get = jest.fn(()=>toBrewPromise(testBrew));
+
+			const fn = api.getBrew('share', true);
+			const req = { brew: {} };
+			const next = jest.fn();
+			await fn(req, null, next);
+			await api.getCSS(req, res);
+
+			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.set).toHaveBeenCalledWith({
+				'Cache-Control' : 'no-cache',
+				'Content-Type'  : 'text/css'
+			});
+		});
+
+		it('should return 404 when brew has no style content', async ()=>{
+			const testBrew = { title: 'test brew', text: 'I don\'t have a style!' };
+
+			const toBrewPromise = (brew)=>new Promise((res)=>res({ toObject: ()=>brew }));
+			api.getId = jest.fn(()=>({ id: '1', googleId: undefined }));
+			model.get = jest.fn(()=>toBrewPromise(testBrew));
+
+			const fn = api.getBrew('share', true);
+			const req = { brew: {} };
+			const next = jest.fn();
+			await fn(req, null, next);
+			await api.getCSS(req, res);
+
+			expect(req.brew).toEqual(testBrew);
+			expect(req.brew).toHaveProperty('style');
+			expect(res.status).toHaveBeenCalledWith(404);
+			expect(res.send).toHaveBeenCalledWith('');
+		});
+
+		it('should return 404 when brew does not exist', async ()=>{
+			const testBrew = { };
+
+			const toBrewPromise = (brew)=>new Promise((res)=>res({ toObject: ()=>brew }));
+			api.getId = jest.fn(()=>({ id: '1', googleId: undefined }));
+			model.get = jest.fn(()=>toBrewPromise(testBrew));
+
+			const fn = api.getBrew('share', true);
+			const req = { brew: {} };
+			const next = jest.fn();
+			await fn(req, null, next);
+			await api.getCSS(req, res);
+
+			expect(req.brew).toEqual(testBrew);
+			expect(req.brew).toHaveProperty('style');
+			expect(res.status).toHaveBeenCalledWith(404);
+			expect(res.send).toHaveBeenCalledWith('');
+		});
+	});
+	describe('Split Text, Style, and Metadata', ()=>{
+
+		it('basic splitting', async ()=>{
+			const testBrew = {
+				text : '```metadata\n' +
+					'title: title\n' +
+					'description: description\n' +
+					'tags: [ \'tag a\' , \'tag b\' ]\n' +
+					'systems: [ test system ]\n' +
+					'renderer: legacy\n' +
+					'theme: 5ePHB\n' +
+					'lang: en\n' +
+					'\n' +
+					'```\n' +
+					'\n' +
+					'```css\n' +
+					'style\n' +
+					'style\n' +
+					'style\n' +
+					'```\n' +
+					'\n' +
+					'text\n'
+			};
+
+			splitTextStyleAndMetadata(testBrew);
+
+			// Metadata
+			expect(testBrew.title).toEqual('title');
+			expect(testBrew.description).toEqual('description');
+			expect(testBrew.tags).toEqual(['tag a', 'tag b']);
+			expect(testBrew.systems).toEqual(['test system']);
+			expect(testBrew.renderer).toEqual('legacy');
+			expect(testBrew.theme).toEqual('5ePHB');
+			expect(testBrew.lang).toEqual('en');
+			// Style
+			expect(testBrew.style).toEqual('style\nstyle\nstyle');
+			// Text
+			expect(testBrew.text).toEqual('text\n');
+		});
+
+		it('convert tags string to array', async ()=>{
+			const testBrew = {
+				text : '```metadata\n' +
+					'tags: tag a\n' +
+					'```\n\n'
+			};
+
+			splitTextStyleAndMetadata(testBrew);
+
+			// Metadata
+			expect(testBrew.tags).toEqual(['tag a']);
+		});
+	});
 });

server/homebrew.model.js

@@ -1,7 +1,8 @@
-const mongoose = require('mongoose');
-const { nanoid } = require('nanoid');
-const _ = require('lodash');
-const zlib = require('zlib');
+import mongoose   from 'mongoose';
+import { nanoid } from 'nanoid';
+import _          from 'lodash';
+import zlib       from 'zlib';
+
 
 const HomebrewSchema = mongoose.Schema({
 	shareId   : { type: String, default: ()=>{return nanoid(12);}, index: { unique: true } },
@@ -44,7 +45,7 @@ HomebrewSchema.statics.get = async function(query, fields=null){
 	const brew = await Homebrew.findOne(query, fields).orFail()
 		.catch((error)=>{throw 'Can not find brew';});
 	if(!_.isNil(brew.textBin)) {			// Uncompress zipped text field
-		unzipped = zlib.inflateRawSync(brew.textBin);
+		const unzipped = zlib.inflateRawSync(brew.textBin);
 		brew.text = unzipped.toString();
 	}
 	return brew;
@@ -62,7 +63,7 @@ HomebrewSchema.statics.getByUser = async function(username, allowAccess=false, f
 
 const Homebrew = mongoose.model('Homebrew', HomebrewSchema);
 
-module.exports = {
-	schema : HomebrewSchema,
-	model  : Homebrew,
+export { 
+	HomebrewSchema as schema,
+	Homebrew       as model
 };

server/middleware/check-client-version.js

@@ -1,8 +1,10 @@
-module.exports = (req, res, next)=>{
-	const userVersion = req.get('Homebrewery-Version');
-	const version = require('../../package.json').version;
+import packageJSON from '../../package.json' with { type: 'json' };
 
-	if(userVersion != version) {
+export default (req, res, next)=>{
+	const userVersion = req.get('Homebrewery-Version');
+	const version = packageJSON.version;
+
+	if(userVersion !== version) {
 		return res.status(412).send({
 			message : `Client version ${userVersion} is out of date. Please save your changes elsewhere and refresh to pick up client version ${version}.`
 		});
@@ -10,3 +12,4 @@ module.exports = (req, res, next)=>{
 
 	next();
 };
+

server/middleware/content-negotiation.js

@@ -1,12 +1,16 @@
-module.exports = (req, res, next)=>{
+import config from '../config.js';
+const nodeEnv = config.get('node_env');
+const isLocalEnvironment = config.get('local_environments').includes(nodeEnv);
+
+export default (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/middleware/content-negotiation.spec.js

@@ -1,41 +1,41 @@
-const contentNegotiationMiddleware = require('./content-negotiation.js');
-
-describe('content-negotiation-middleware', ()=>{
-	let request;
-	let response;
-	let next;
-
-	beforeEach(()=>{
-		request = {
-			get : function(key) {
-				return this[key];
-			}
-		};
-		response = {
-			status : jest.fn(()=>response),
-			send   : jest.fn(()=>{})
-		};
-		next = jest.fn();
-	});
-
-	it('should return 406 on image request', ()=>{
-		contentNegotiationMiddleware({
-			Accept : 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8',
-			...request
-		}, response);
-
-		expect(response.status).toHaveBeenLastCalledWith(406);
-		expect(response.send).toHaveBeenCalledWith({
-			message : 'Request for image at this URL is not supported'
-		});
-	});
-
-	it('should call next on non-image request', ()=>{
-		contentNegotiationMiddleware({
-			Accept : 'text,image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8',
-			...request
-		}, response, next);
-
-		expect(next).toHaveBeenCalled();
-	});
-});
+import contentNegotiationMiddleware from './content-negotiation.js';
+
+describe('content-negotiation-middleware', ()=>{
+	let request;
+	let response;
+	let next;
+
+	beforeEach(()=>{
+		request = {
+			get : function(key) {
+				return this[key];
+			}
+		};
+		response = {
+			status : jest.fn(()=>response),
+			send   : jest.fn(()=>{})
+		};
+		next = jest.fn();
+	});
+
+	it('should return 406 on image request', ()=>{
+		contentNegotiationMiddleware({
+			Accept : 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8',
+			...request
+		}, response);
+
+		expect(response.status).toHaveBeenLastCalledWith(406);
+		expect(response.send).toHaveBeenCalledWith({
+			message : 'Request for image at this URL is not supported'
+		});
+	});
+
+	it('should call next on non-image request', ()=>{
+		contentNegotiationMiddleware({
+			Accept : 'text,image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8',
+			...request
+		}, response, next);
+
+		expect(next).toHaveBeenCalled();
+	});
+});

server/notifications.model.js

@@ -0,0 +1,62 @@
+import mongoose from 'mongoose';
+import _        from '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);
+
+export {
+	NotificationSchema as schema,
+	Notification       as model
+};

server/static-assets.mv.js

@@ -1,4 +1,4 @@
-const expressStaticGzip = require('express-static-gzip');
+import expressStaticGzip from 'express-static-gzip';
 
 // Serve brotli-compressed static files if available
 const customCacheControlHandler=(response, path)=>{
@@ -28,4 +28,4 @@ const init=(pathToAssets)=>{
 		} });
 };
 
-module.exports = init;
+export default init;

server/token.js

@@ -1,7 +1,5 @@
-const jwt = require('jwt-simple');
-
-// Load configuration values
-const config = require('./config.js');
+import jwt    from 'jwt-simple';
+import config from './config.js';
 
 // Generate an Access Token for the given User ID
 const generateAccessToken = (account)=>{
@@ -24,6 +22,4 @@ const generateAccessToken = (account)=>{
 	return token;
 };
 
-module.exports = {
-	generateAccessToken : generateAccessToken
-};
+export default generateAccessToken;

server/vault.api.js

@@ -0,0 +1,109 @@
+import express    from 'express';
+import asyncHandler from 'express-async-handler';
+import {model as HomebrewModel }     from './homebrew.model.js';
+
+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));
+
+export default router;