Up version to 3.6.1

Fix author deletion #2674

.circleci/config.yml

@@ -55,9 +55,15 @@ jobs:
           at: .
 
       # run tests!
+      - run:
+          name: Test - API Unit Tests
+          command: npm run test:api-unit
       - run:
           name: Test - Basic
           command: npm run test:basic
+      - run:
+          name: Test - Coverage
+          command: npm run test:coverage
       - run:
           name: Test - Mustache Spans
           command: npm run test:mustache-span

.gitignore

@@ -12,3 +12,5 @@ todo.md
 startDB.bat
 startMViewer.bat
 .vscode
+
+coverage

README.md

@@ -21,24 +21,29 @@ below.
 First, install three programs that The Homebrewery requires to run and retrieve
 updates:
 
-1. install [node](https://nodejs.org/en/)
+1. install [node](https://nodejs.org/en/), version v16 or higher.
 1. install [mongodb](https://www.mongodb.com/try/download/community) (Community version)
 
     For the easiest installation, follow these steps:
     1. In the installer, uncheck the option to run as a service.
     1. You can install MongoDB Compass if you want a GUI to view your database documents.
+    1. If you install any version over 6.0, you will have to install [MongoDB Shell](https://www.mongodb.com/try/download/shell).
     1. Go to the C:\ drive and create a folder called "data".
     1. Inside the "data" folder, create a new folder called "db".
-    1. Open a command prompt or other terminal and navigate to your MongoDB install folder (C:\Program Files\Mongo\Server\4.4\bin).
+    1. Open a command prompt or other terminal and navigate to your MongoDB install folder (C:\Program Files\Mongo\Server\6.0\bin).
     1. In the command prompt, run "mongod", which will start up your local database server.
     1. While MongoD is running, open a second command prompt and navigate to the MongoDB install folder.
-    1. In the second command prompt, run "mongo", which allows you to edit the database.
-    1. Type `use homebrewery` to create The Homebrewery database. You should see `switched to db homebrewery`.
-    1. Type `db.brews.insert({"title":"test"})` to create a blank document. You should see `WriteResult({ "nInserted" : 1 })`.
     1. Search in Windows for "Advanced system settings" and open it.
     1. Click "Environment variables", find the "path" variable, and double-click to open it.
     1. Click "New" and paste in the path to the MongoDB "bin" folder.
     1. Click "OK" three times to close all the windows.
+    1. In the second command prompt, run "mongo", which allows you to edit the database.
+    1. Type `use homebrewery` to create The Homebrewery database. You should see `switched to db homebrewery`.
+    1. Type `db.brews.insertOne({"title":"test"})` to create a blank document. You should see `{
+acknowledged: true,
+insertedId: ObjectId("63c2fce9e5ac5a94fe2410cf")
+}`
+   
 1. install [git](https://git-scm.com/downloads) (select the option that allows Git to run from the command prompt).
 
 Checkout the repo ([documentation][github-clone-repo-docs-url]):
@@ -51,11 +56,19 @@ git clone https://github.com/naturalcrit/homebrewery.git
 Second, you will need to add the environment variable `NODE_ENV=local` to allow
 the project to run locally.
 
-You can set this temporarily in your shell of choice:
+You can set this **temporarily** (until you close the terminal) in your shell of choice with admin privileges:
 * Windows Powershell: `$env:NODE_ENV="local"`
 * Windows CMD: `set NODE_ENV=local`
 * Linux / macOS: `export NODE_ENV=local`
 
+If you want to add this variable **permanently** the steps are as follows:
+    1. Search in Windows for "Advanced system settings" and open it.
+    1. Click "Environment variables".
+    1. In System Variables, click "New"
+    1. Click "New" and write `NODE_ENV` as a name and `local` as the value.
+    1. Click "OK" three times to close all the windows.
+  This can be undone at any time if needed.
+
 Third, you will need to install the Node dependencies, compile the app, and run
 it using the two commands:
 
@@ -65,6 +78,13 @@ it using the two commands:
 You should now be able to go to [http://localhost:8000](http://localhost:8000)
 in your browser and use The Homebrewery offline.
 
+If you had any issue at all, here are some links that may be useful:
+- [Course](https://learn.mongodb.com/courses/m103-basic-cluster-administration) on cluster administration, useful for beginners
+- [Mongo community forums](https://www.mongodb.com/community/forums/)
+- Useful Stack Overflow links for your most probable errors: [1](https://stackoverflow.com/questions/44962540/mongod-and-mongo-commands-not-working-on-windows-10), [2](https://stackoverflow.com/questions/15053893/mongo-command-not-recognized-when-trying-to-connect-to-a-mongodb-server/41507803#41507803), [3](https://stackoverflow.com/questions/51224959/mongo-is-not-recognized-as-an-internal-or-external-command-operable-program-o)
+
+If you still have problems, post in [Our Subreddit](https://www.reddit.com/r/homebrewery/) and we will help you.
+
 ### Running the application via Docker
 
 Please see the docs here: [README.DOCKER.md](./README.DOCKER.md)

changelog.md

@@ -7,6 +7,11 @@ h5 {
 	margin-left: 0px;
 }
 
+.page .taskList {
+	display:block;
+	break-inside:auto;
+}
+
 .taskList li input {
 	list-style-type : none;
 	margin-left : -0.52cm;
@@ -35,15 +40,77 @@ pre {
 	margin-top : 0.1cm;
 }
 
+.page ul + h5 {
+	margin-top: 0.25cm;
+}
+
+.page p + h5 {
+	margin-top: 0.25cm;
+}
+
 .page .openSans {
 	font-family: 'Open Sans';
 	font-size: 0.9em;
 }
+
+.page {
+	padding-bottom: 1.5cm;
+}
 ```
 
 ## changelog
 For a full record of development, visit our [Github Page](https://github.com/naturalcrit/homebrewery).
 
+### Saturday 18/02/2023 - v3.6.1
+{{taskList
+##### G-Ambatte
+
+* [x] Fix users not being removed from Authors list correctly
+
+Fixes issues [#2674](https://github.com/naturalcrit/homebrewery/issues/2674)
+}}
+
+
+### Friday 23/01/2023 - v3.6.0
+{{taskList
+##### calculuschild
+
+* [x] Fix Google Drive brews sometimes duplicating
+
+Fixes issues [#2603](https://github.com/naturalcrit/homebrewery/issues/2603)
+
+##### Jeddai
+
+* [x] Add unit tests with full coverage for the Homebrewery API
+
+* [x] Add message to refresh the browser if the user is missing an update to the Homebrewery
+
+Fixes issues [#2583](https://github.com/naturalcrit/homebrewery/issues/2583)
+
+##### G-Ambatte
+
+* [x] Auto-compile Themes CSS on development server
+
+##### 5e-Cleric
+
+* [x] Fix cloned brews inheriting the parent view count
+}}
+
+### Friday 23/12/2022 - v3.5.0
+{{taskList
+
+##### Jeddai
+
+* [x] Only brew owners or invited authors can edit a brew
+
+  - Visiting an `/edit` page of a brew that does not list you as an author will result in an error page. Authors can be added to any brew by opening its {{fa,fa-info-circle}} **Properties** menu and typing the author's username (case-sensitive) into the **Invited Authors** bubble.
+  - Warn user if a newer brew version has been saved on another device
+
+Fixes issues [#1987](https://github.com/naturalcrit/homebrewery/issues/1987)
+}}
+
+\page
+
 ### Saturday 10/12/2022 - v3.4.2
 {{taskList
 
@@ -55,7 +122,7 @@ For a full record of development, visit our [Github Page](https://github.com/nat
 
 Fixes issues [#2322](https://github.com/naturalcrit/homebrewery/issues/2322)
 
-##### Gazook
+##### G-Ambatte
 
 * [x] Account page help link for Google Drive errors
 
@@ -159,12 +226,7 @@ Fixes issues  [#2135](https://github.com/naturalcrit/homebrewery/issues/2135)
 * [x] Fix brew settings being lost on first save
 
 Fixes issues  [#2427](https://github.com/naturalcrit/homebrewery/issues/2427)
-}}
 
-\column
-
-
-{{taskList
 ##### Gazook:
 
 * [x] Several updates to bug reporting and error popups
@@ -214,6 +276,10 @@ Fixes issues  [#2317](https://github.com/naturalcrit/homebrewery/issues/2317), [
  Fixes issues:  [#1797](https://github.com/naturalcrit/homebrewery/issues/1797), [#2315](https://github.com/naturalcrit/homebrewery/issues/2315), [#2326](https://github.com/naturalcrit/homebrewery/issues/2326), [#2328](https://github.com/naturalcrit/homebrewery/issues/2328)
 }}
 
+
+
+\page
+
 ### Wednesday 31/08/2022 - v3.2.1
 {{taskList
 
@@ -240,8 +306,6 @@ Fixes issues  [#2317](https://github.com/naturalcrit/homebrewery/issues/2317), [
   Fixes issues: [#2301](https://github.com/naturalcrit/homebrewery/issues/2301), [#2303](https://github.com/naturalcrit/homebrewery/issues/2303), [#2121](https://github.com/naturalcrit/homebrewery/issues/2121)
 }}
 
-\page
-
 ### Saturday 27/08/2022 - v3.2.0
 {{taskList
 

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -134,7 +134,7 @@ const BrewRenderer = createClass({
 
 	renderStyle : function() {
 		if(!this.props.style) return;
-		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style> ${this.props.style} </style>` }} />;
+		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${this.props.style}\n} </style>` }} />;
 	},
 
 	renderPage : function(pageText, index){

client/homebrew/editor/editor.jsx

@@ -32,6 +32,7 @@ const Editor = createClass({
 			onTextChange  : ()=>{},
 			onStyleChange : ()=>{},
 			onMetaChange  : ()=>{},
+			reportError   : ()=>{},
 
 			renderer : 'legacy'
 		};
@@ -291,7 +292,8 @@ const Editor = createClass({
 					rerenderParent={this.rerenderParent} />
 				<MetadataEditor
 					metadata={this.props.brew}
-					onChange={this.props.onMetaChange} />
+					onChange={this.props.onMetaChange}
+					reportError={this.props.reportError}/>
 			</>;
 		}
 	},

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -4,7 +4,7 @@ const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
 const cx    = require('classnames');
-const request = require('superagent');
+const request = require('../../utils/request-middleware.js');
 const Nav = require('naturalcrit/nav/nav.jsx');
 const StringArrayEditor = require('../stringArrayEditor/stringArrayEditor.jsx');
 
@@ -37,7 +37,8 @@ const MetadataEditor = createClass({
 				renderer    : 'legacy',
 				theme       : '5ePHB'
 			},
-			onChange : ()=>{}
+			onChange    : ()=>{},
+			reportError : ()=>{}
 		};
 	},
 
@@ -121,8 +122,12 @@ const MetadataEditor = createClass({
 
 		request.delete(`/api/${this.props.metadata.googleId ?? ''}${this.props.metadata.editId}`)
 			.send()
-			.end(function(err, res){
-				window.location.href = '/';
+			.end((err, res)=>{
+				if(err) {
+					this.props.reportError(err);
+				} else {
+					window.location.href = '/';
+				}
 			});
 	},
 
@@ -184,6 +189,10 @@ const MetadataEditor = createClass({
 				return <div className='item' key={''} onClick={()=>this.handleTheme(theme)} title={''}>
 					{`${theme.renderer} : ${theme.name}`}
 					<img src={`/themes/${theme.renderer}/${theme.path}/dropdownTexture.png`}/>
+					<div className='preview'>
+						<h6>{`${theme.name}`} preview</h6>
+						<img src={`/themes/${theme.renderer}/${theme.path}/dropdownPreview.png`}/>
+					</div>
 				</div>;
 			});
 		};
@@ -193,14 +202,14 @@ const MetadataEditor = createClass({
 
 		if(this.props.metadata.renderer == 'legacy') {
 			dropdown =
-				<Nav.dropdown className='disabled' trigger='disabled'>
+				<Nav.dropdown className='disabled value' trigger='disabled'>
 					<div>
 						{`Themes are not supported in the Legacy Renderer`} <i className='fas fa-caret-down'></i>
 					</div>
 				</Nav.dropdown>;
 		} else {
 			dropdown =
-				<Nav.dropdown trigger='click'>
+				<Nav.dropdown className='value' trigger='click'>
 					<div>
 						{`${_.upperFirst(currentTheme.renderer)} : ${currentTheme.name}`} <i className='fas fa-caret-down'></i>
 					</div>
@@ -250,6 +259,8 @@ const MetadataEditor = createClass({
 
 	render : function(){
 		return <div className='metadataEditor'>
+			<h1 className='sectionHead'>Brew</h1>
+
 			<div className='field title'>
 				<label>title</label>
 				<input type='text' className='value'
@@ -283,8 +294,6 @@ const MetadataEditor = createClass({
 				values={this.props.metadata.tags}
 				onChange={(e)=>this.handleFieldChange('tags', e)}/>
 
-			{this.renderAuthors()}
-
 			<div className='field systems'>
 				<label>systems</label>
 				<div className='value'>
@@ -296,6 +305,23 @@ const MetadataEditor = createClass({
 
 			{this.renderRenderOptions()}
 
+			<hr/>
+
+			<h1 className='sectionHead'>Authors</h1>
+
+			{this.renderAuthors()}
+
+			<StringArrayEditor label='invited authors' valuePatterns={[/.+/]}
+				validators={[(v)=>!this.props.metadata.authors?.includes(v)]}
+				placeholder='invite author' unique={true}
+				values={this.props.metadata.invitedAuthors}
+				notes={['Invited authors are case sensitive.', 'After adding an invited author, send them the edit link. There, they can choose to accept or decline the invitation.']}
+				onChange={(e)=>this.handleFieldChange('invitedAuthors', e)}/>
+
+			<hr/>
+
+			<h1 className='sectionHead'>Privacy</h1>
+
 			<div className='field publish'>
 				<label>publish</label>
 				<div className='value'>

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -10,6 +10,15 @@
 	height           : calc(100vh - 54px); // 54px is the height of the navbar + snippet bar.  probably a better way to dynamic get this.
 	overflow-y       : auto;
 
+	.sectionHead {
+		font-weight: 1000;
+		margin: 20px 0;
+
+		&:first-of-type {
+			margin-top: 0;
+		}
+	}
+
 	& > div {
 		margin-bottom: 10px;
 	}
@@ -26,10 +35,10 @@
 		flex-direction: column;
 		flex: 5 0 200px;
 		gap: 10px;
-		
 	}
 	.field{
 		display       : flex;
+		flex-wrap     : wrap;
 		width         : 100%;
 		min-width     : 200px;
 		&>label{
@@ -78,6 +87,11 @@
 				font-size   : 0.8em;
 			}
 		}
+
+		small {
+			font-size  : 0.6em;
+			font-style : italic;
+		}
 	}
 
 
@@ -128,10 +142,6 @@
 		button.unpublish{
 			.button(@silver);
 		}
-		small{
-			font-size  : 0.6em;
-			font-style : italic;
-		}
 	}
 
 	.delete.field .value{
@@ -148,7 +158,6 @@
 		font-size : 13.33px;
 		.navDropdownContainer {
 			background-color	: white;
-			width				: 100%;
 			position			: relative;
 			z-index				: 500;
 			&.disabled {
@@ -171,24 +180,51 @@
 			}
 			.navDropdown {
 				box-shadow	: 0px 5px 10px rgba(0, 0, 0, 0.3);
-				position	: absolute;
-				width		: 100%;
+				position	  : absolute;
+				width		    : 100%;
 				.item {
-					padding				: 3px 3px;
-					border-top			: 1px solid rgb(118, 118, 118);
-					position			: relative;
-					overflow			: hidden;
+					padding           : 3px 3px;
+					border-top        : 1px solid rgb(118, 118, 118);
+					position          : relative;
+					overflow          : visible;
 					background-color	: white;
+					.preview {
+						display       : flex;
+  					flex-direction: column;
+						background    : #ccc;
+						border-radius : 5px;
+  					box-shadow    : 0 0 5px black;
+						width         : 200px;
+						color         :black;
+						position      : absolute;
+						top           : 0;
+						right         : 0;
+						opacity       : 0;
+						transition    : opacity 250ms ease;
+						z-index       : 1;
+						overflow      :hidden;
+						h6 {
+							font-weight   : 900;
+							padding-inline:1em;
+							padding-block :.5em;
+							border-bottom :2px solid hsl(0,0%,40%);
+						}
+					}
 					&:hover {
 						background-color	: @blue;
-						color				: white;
+						color				      : white;
 					}
-					img {
-						mask-image			: linear-gradient(90deg, transparent, black 20%);
+					&:hover > .preview {
+						opacity: 1;
+					}
+					>img {
+						mask-image			    : linear-gradient(90deg, transparent, black 20%);
 						-webkit-mask-image	: linear-gradient(90deg, transparent, black 20%);
-				    position	: absolute;
-				    left		: ~"max(100px, 100% - 300px)";
-				    top			: 0px;
+				    	position			    : absolute;
+				    	right				      : 0;
+				    	top					      : 0px;
+						width				        : 50%;
+						height				      : 100%;
 					}
 				}
 			}
@@ -196,6 +232,7 @@
 	}
 	.field .list {
 		display: flex;
+		flex: 1 0;
 		flex-wrap: wrap;
 
 		> * {

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -163,15 +163,22 @@ const SnippetGroup = createClass({
 			onSnippetClick : function(){},
 		};
 	},
-	handleSnippetClick : function(snippet){
+	handleSnippetClick : function(e, snippet){
+		e.stopPropagation();
 		this.props.onSnippetClick(execute(snippet.gen, this.props.brew));
 	},
-	renderSnippets : function(){
-		return _.map(this.props.snippets, (snippet)=>{
-			return <div className='snippet' key={snippet.name} onClick={()=>this.handleSnippetClick(snippet)}>
+	renderSnippets : function(snippets){
+		return _.map(snippets, (snippet)=>{
+			return <div className='snippet' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)}>
 				<i className={snippet.icon} />
 				{snippet.name}
+				{snippet.subsnippets && <>
+					<i className='fas fa-caret-right'></i>
+					<div className='dropdown side'>
+						{this.renderSnippets(snippet.subsnippets)}
+					</div></>}
 			</div>;
+
 		});
 	},
 
@@ -182,7 +189,7 @@ const SnippetGroup = createClass({
 				<span className='groupName'>{this.props.groupName}</span>
 			</div>
 			<div className='dropdown'>
-				{this.renderSnippets()}
+				{this.renderSnippets(this.props.snippets)}
 			</div>
 		</div>;
 	},

client/homebrew/editor/snippetbar/snippetbar.less

@@ -1,4 +1,4 @@
-
+@import (less) './client/icons/customIcons.less';
 .snippetBar{
 	@menuHeight      : 25px;
 	position         : relative;
@@ -83,7 +83,7 @@
 	.snippetGroup{
 		border-right   : 1px solid black;
 		&:hover{
-			.dropdown{
+			&>.dropdown{
 				visibility : visible;
 			}
 		}
@@ -97,15 +97,30 @@
 			background-color : #ddd;
 			.snippet{
 				.animate(background-color);
+				width     : max-content;
 				padding   : 5px;
 				cursor    : pointer;
 				font-size : 10px;
 				i{
 					margin-right : 8px;
 					font-size    : 1.2em;
+					height       : 1.2em;
+					&~i{
+						margin-right: 0;
+						margin-left: 8px;
+					}
 				}
 				&:hover{
 					background-color : #999;
+					&>.dropdown{
+						visibility : visible;
+						&.side {
+							left: 100%;
+							top: 0%;
+							margin-left:0;
+							box-shadow: -1px 1px 2px 0px #999;
+						}
+					}
 				}
 			}
 		}

client/homebrew/editor/stringArrayEditor/stringArrayEditor.jsx

@@ -9,7 +9,9 @@ const StringArrayEditor = createClass({
 			label         : '',
 			values        : [],
 			valuePatterns : null,
+			validators    : [],
 			placeholder   : '',
+			notes         : [],
 			unique        : false,
 			cannotEdit    : [],
 			onChange      : ()=>{}
@@ -83,7 +85,8 @@ const StringArrayEditor = createClass({
 		}
 		const matchesPatterns = !this.props.valuePatterns || this.props.valuePatterns.some((pattern)=>!!(value || '').match(pattern));
 		const uniqueIfSet = !this.props.unique || !values.includes(value);
-		return matchesPatterns && uniqueIfSet;
+		const passesValidators = !this.props.validators || this.props.validators.every((validator)=>validator(value));
+		return matchesPatterns && uniqueIfSet && passesValidators;
 	},
 
 	handleValueInputKeyDown : function(event, index) {
@@ -123,17 +126,21 @@ const StringArrayEditor = createClass({
 			</div>
 		);
 
-		return <div className='field values'>
+		return <div className='field'>
 			<label>{this.props.label}</label>
-			<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 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)=><p><small>{n}</small></p>) : null}
 			</div>
 		</div>;
 	}

client/homebrew/navbar/error-navitem.jsx

@@ -0,0 +1,85 @@
+require('./error-navitem.less');
+const React = require('react');
+const Nav = require('naturalcrit/nav/nav.jsx');
+const createClass = require('create-react-class');
+
+const ErrorNavItem = createClass({
+	getDefaultProps : function() {
+		return {
+			error  : '',
+			parent : null
+		};
+	},
+	render : function() {
+		const clearError = ()=>{
+			const state = {
+				error : null
+			};
+			if(this.props.parent.state.isSaving) {
+				state.isSaving = false;
+			}
+			this.props.parent.setState(state);
+		};
+
+		const error = this.props.error;
+		const response = error.response;
+		const status = response.status;
+		const message = response.body?.message;
+		let errMsg = '';
+		try {
+			errMsg += `${error.toString()}\n\n`;
+			errMsg += `\`\`\`\n${error.stack}\n`;
+			errMsg += `${JSON.stringify(response.error, null, '  ')}\n\`\`\``;
+			console.log(errMsg);
+		} catch (e){}
+
+		if(status === 409) {
+			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+				Oops!
+				<div className='errorContainer' onClick={clearError}>
+					{message ?? 'Conflict: please refresh to get latest changes'}
+				</div>
+			</Nav.item>;
+		} else if(status === 412) {
+			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+				Oops!
+				<div className='errorContainer' onClick={clearError}>
+					{message ?? 'Your client is out of date. Please save your changes elsewhere and refresh.'}
+				</div>
+			</Nav.item>;
+		}
+
+		if(response.req.url.match(/^\/api.*Google.*$/m)){
+			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+				Oops!
+				<div className='errorContainer' onClick={clearError}>
+					Looks like your Google credentials have
+					expired! Visit our log in page to sign out
+					and sign back in with Google,
+					then try saving again!
+					<a target='_blank' rel='noopener noreferrer'
+						href={`https://www.naturalcrit.com/login?redirect=${window.location.href}`}>
+						<div className='confirm'>
+							Sign In
+						</div>
+					</a>
+					<div className='deny'>
+						Not Now
+					</div>
+				</div>
+			</Nav.item>;
+		}
+
+		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+			Oops!
+			<div className='errorContainer'>
+				Looks like there was a problem saving. <br />
+				Report the issue <a target='_blank' rel='noopener noreferrer' href={`https://github.com/naturalcrit/homebrewery/issues/new?template=save_issue.yml&error-code=${encodeURIComponent(errMsg)}`}>
+				here
+				</a>.
+			</div>
+		</Nav.item>;
+	}
+});
+
+module.exports = ErrorNavItem;

client/homebrew/navbar/error-navitem.less

@@ -0,0 +1,77 @@
+.navItem {
+  &.error {
+    position         : relative;
+    background-color : @red;
+  }
+
+  .errorContainer{
+    animation-name: glideDown;
+    animation-duration: 0.4s;
+    position         : absolute;
+    top              : 100%;
+    left             : 50%;
+    z-index          : 1000;
+    width            : 140px;
+    padding          : 3px;
+    color            : white;
+    background-color : #333;
+    border           : 3px solid #444;
+    border-radius    : 5px;
+    transform        : translate(-50% + 3px, 10px);
+    text-align       : center;
+    font-size        : 10px;
+    font-weight      : 800;
+    text-transform   : uppercase;
+    a{
+      color : @teal;
+    }
+    &:before {
+      content: "";
+      width: 0px;
+      height: 0px;
+      position: absolute;
+      border-left: 10px solid transparent;
+      border-right: 10px solid transparent;
+      border-top: 10px solid transparent;
+      border-bottom: 10px solid #444;
+      left: 53px;
+      top: -23px;
+    }
+    &:after {
+      content: "";
+      width: 0px;
+      height: 0px;
+      position: absolute;
+      border-left: 10px solid transparent;
+      border-right: 10px solid transparent;
+      border-top: 10px solid transparent;
+      border-bottom: 10px solid #333;
+      left: 53px;
+      top: -19px;
+    }
+    .deny {
+      width            : 48%;
+      margin           : 1px;
+      padding          : 5px;
+      background-color : #333;
+      display          : inline-block;
+      border-left      : 1px solid #666;
+      .animate(background-color);
+      &:hover{
+        background-color : red;
+      }
+    }
+    .confirm {
+      width            : 48%;
+      margin           : 1px;
+      padding          : 5px;
+      background-color : #333;
+      display          : inline-block;
+      color            : white;
+      .animate(background-color);
+      &:hover{
+        background-color : teal;
+      }
+    }
+  }
+}

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

@@ -4,7 +4,7 @@ const createClass = require('create-react-class');
 const _     = require('lodash');
 const cx    = require('classnames');
 const moment = require('moment');
-const request = require('superagent');
+const request = require('../../../../utils/request-middleware.js');
 
 const googleDriveIcon = require('../../../../googleDrive.png');
 const dedent = require('dedent-tabs').default;
@@ -18,7 +18,8 @@ const BrewItem = createClass({
 				description : '',
 				authors     : [],
 				stubbed     : true
-			}
+			},
+			reportError : ()=>{}
 		};
 	},
 
@@ -33,8 +34,12 @@ const BrewItem = createClass({
 
 		request.delete(`/api/${this.props.brew.googleId ?? ''}${this.props.brew.editId}`)
 			.send()
-			.end(function(err, res){
-				location.reload();
+			.end((err, res)=>{
+				if(err) {
+					this.props.reportError(err);
+				} else {
+					location.reload();
+				}
 			});
 	},
 

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

@@ -23,7 +23,8 @@ const ListPage = createClass({
 					brews : []
 				}
 			],
-			navItems : <></>
+			navItems    : <></>,
+			reportError : null
 		};
 	},
 	getInitialState : function() {
@@ -81,7 +82,7 @@ const ListPage = createClass({
 		if(!brews || !brews.length) return <div className='noBrews'>No Brews.</div>;
 
 		return _.map(brews, (brew, idx)=>{
-			return <BrewItem brew={brew} key={idx}/>;
+			return <BrewItem brew={brew} key={idx} reportError={this.props.reportError}/>;
 		});
 	},
 
@@ -218,12 +219,13 @@ const ListPage = createClass({
 
 	render : function(){
 		return <div className='listPage sitePage'>
+			<style>@layer V3_5ePHB, bundle;</style>
 			<link href='/themes/V3/5ePHB/style.css' rel='stylesheet'/>
 			{this.props.navItems}
 			{this.renderSortOptions()}
 
 			<div className='content V3'>
-				<div className='phb page'>
+				<div className='page'>
 					{this.renderBrewCollection(this.state.brewCollection)}
 				</div>
 			</div>

client/homebrew/pages/basePages/listPage/listPage.less

@@ -10,14 +10,14 @@
 	-moz-column-width    : auto;
 	-webkit-column-gap   : auto;
 	-moz-column-gap      : auto;
+	height               : auto;
+	min-height           : 279.4mm;
+	margin               : 20px auto;
 }
 .listPage{
 	.content{
-		.phb{
-			.noColumns();
-			height     : auto;
-			min-height : 279.4mm;
-			margin     : 20px auto;
+		.page{
+			.noColumns() !important; //Needed to override PHB Theme since this is on a lower @layer
 			&::after{
 				display : none;
 			}

client/homebrew/pages/editPage/editPage.jsx

@@ -3,7 +3,7 @@ require('./editPage.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
-const request = require('superagent');
+const request = require('../../utils/request-middleware.js');
 const { Meta } = require('vitreum/headtags');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
@@ -12,6 +12,7 @@ const Navbar = require('../../navbar/navbar.jsx');
 const NewBrew = require('../../navbar/newbrew.navitem.jsx');
 const HelpNavItem = require('../../navbar/help.navitem.jsx');
 const PrintLink = 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;
 
@@ -21,6 +22,8 @@ const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
 const Markdown = require('naturalcrit/markdown.js');
 
+const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
+
 const googleDriveActive = require('../../googleDrive.png');
 const googleDriveInactive = require('../../googleDriveMono.png');
 
@@ -30,24 +33,7 @@ const EditPage = createClass({
 	displayName     : 'EditPage',
 	getDefaultProps : function() {
 		return {
-			brew : {
-				text      : '',
-				style     : '',
-				shareId   : null,
-				editId    : null,
-				createdAt : null,
-				updatedAt : null,
-				gDrive    : false,
-				trashed   : false,
-
-				title       : '',
-				description : '',
-				tags        : '',
-				published   : false,
-				authors     : [],
-				systems     : [],
-				renderer    : 'legacy'
-			}
+			brew : DEFAULT_BREW_LOAD
 		};
 	},
 
@@ -60,7 +46,7 @@ const EditPage = createClass({
 			alertLoginToTransfer   : false,
 			saveGoogle             : this.props.brew.googleId ? true : false,
 			confirmGoogleTransfer  : false,
-			errors                 : null,
+			error                  : null,
 			htmlErrors             : Markdown.validate(this.props.brew.text),
 			url                    : '',
 			autoSave               : true,
@@ -75,7 +61,6 @@ const EditPage = createClass({
 			url : window.location.href
 		});
 
-
 		this.savedBrew = JSON.parse(JSON.stringify(this.props.brew)); //Deep copy
 
 		this.setState({ autoSave: JSON.parse(localStorage.getItem('AUTOSAVE_ON')) ?? true }, ()=>{
@@ -172,7 +157,10 @@ const EditPage = createClass({
 		this.setState((prevState)=>({
 			confirmGoogleTransfer : !prevState.confirmGoogleTransfer
 		}));
-		this.clearErrors();
+		this.setState({
+			error    : null,
+			isSaving : false
+		});
 	},
 
 	closeAlerts : function(event){
@@ -188,24 +176,16 @@ const EditPage = createClass({
 		this.setState((prevState)=>({
 			saveGoogle : !prevState.saveGoogle,
 			isSaving   : false,
-			errors     : null
+			error      : null
 		}), ()=>this.save());
 	},
 
-	clearErrors : function(){
-		this.setState({
-			errors   : null,
-			isSaving : false
-
-		});
-	},
-
 	save : async function(){
 		if(this.debounceSave && this.debounceSave.cancel) this.debounceSave.cancel();
 
 		this.setState((prevState)=>({
 			isSaving   : true,
-			errors     : null,
+			error      : null,
 			htmlErrors : Markdown.validate(prevState.brew.text)
 		}));
 
@@ -220,8 +200,9 @@ const EditPage = createClass({
 			.send(brew)
 			.catch((err)=>{
 				console.log('Error Updating Local Brew');
-				this.setState({ errors: err });
+				this.setState({ error: err });
 			});
+		if(!res) return;
 
 		this.savedBrew = res.body;
 		history.replaceState(null, null, `/edit/${this.savedBrew.editId}`);
@@ -230,7 +211,8 @@ const EditPage = createClass({
 			brew : { ...prevState.brew,
 				googleId : this.savedBrew.googleId ? this.savedBrew.googleId : null,
 				editId 	 : this.savedBrew.editId,
-				shareId  : this.savedBrew.shareId
+				shareId  : this.savedBrew.shareId,
+				version  : this.savedBrew.version
 			},
 			isPending   : false,
 			isSaving    : false,
@@ -280,67 +262,6 @@ const EditPage = createClass({
 	},
 
 	renderSaveButton : function(){
-		if(this.state.errors){
-			let errMsg = '';
-			try {
-				errMsg += `${this.state.errors.toString()}\n\n`;
-				errMsg += `\`\`\`\n${this.state.errors.stack}\n`;
-				errMsg += `${JSON.stringify(this.state.errors.response.error, null, '  ')}\n\`\`\``;
-				console.log(errMsg);
-			} catch (e){}
-
-			// if(this.state.errors.status == '401'){
-			// 	return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-			// 		Oops!
-			// 		<div className='errorContainer' onClick={this.clearErrors}>
-			// 		You must be signed in to a Google account
-			// 			to save this to<br />Google Drive!<br />
-			// 			<a target='_blank' rel='noopener noreferrer'
-			// 				href={`https://www.naturalcrit.com/login?redirect=${this.state.url}`}>
-			// 				<div className='confirm'>
-			// 					Sign In
-			// 				</div>
-			// 			</a>
-			// 			<div className='deny'>
-			// 				Not Now
-			// 			</div>
-			// 		</div>
-			// 	</Nav.item>;
-			// }
-
-			if(this.state.errors.response.req.url.match(/^\/api.*Google.*$/m)){
-				return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-					Oops!
-					<div className='errorContainer' onClick={this.clearErrors}>
-					Looks like your Google credentials have
-					expired! Visit our log in page to sign out
-					and sign back in with Google,
-					then try saving again!
-						<a target='_blank' rel='noopener noreferrer'
-							href={`https://www.naturalcrit.com/login?redirect=${this.state.url}`}>
-							<div className='confirm'>
-								Sign In
-							</div>
-						</a>
-						<div className='deny'>
-							Not Now
-						</div>
-					</div>
-				</Nav.item>;
-			}
-
-			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-				Oops!
-				<div className='errorContainer'>
-					Looks like there was a problem saving. <br />
-					Report the issue <a target='_blank' rel='noopener noreferrer'
-						href={`https://github.com/naturalcrit/homebrewery/issues/new?template=save_issue.yml&error-code=${encodeURIComponent(errMsg)}`}>
-						here
-					</a>.
-				</div>
-			</Nav.item>;
-		}
-
 		if(this.state.autoSaveWarning && this.hasChanges()){
 			this.setAutosaveWarning();
 			const elapsedTime = Math.round((new Date() - this.state.unsavedTime) / 1000 / 60);
@@ -384,6 +305,12 @@ const EditPage = createClass({
 		this.warningTimer;
 	},
 
+	errorReported : function(error) {
+		this.setState({
+			error
+		});
+	},
+
 	renderAutoSaveButton : function(){
 		return <Nav.item onClick={this.handleAutoSave}>
 			Autosave <i className={this.state.autoSave ? 'fas fa-power-off active' : 'fas fa-power-off'}></i>
@@ -428,10 +355,13 @@ const EditPage = createClass({
 
 			<Nav.section>
 				{this.renderGoogleDriveIcon()}
-				<Nav.dropdown className='save-menu'>
-					{this.renderSaveButton()}
-					{this.renderAutoSaveButton()}
-				</Nav.dropdown>
+				{this.state.error ?
+					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
+					<Nav.dropdown className='save-menu'>
+						{this.renderSaveButton()}
+						{this.renderAutoSaveButton()}
+					</Nav.dropdown>
+				}
 				<NewBrew />
 				<HelpNavItem/>
 				<Nav.dropdown>
@@ -469,6 +399,7 @@ const EditPage = createClass({
 						onTextChange={this.handleTextChange}
 						onStyleChange={this.handleStyleChange}
 						onMetaChange={this.handleMetaChange}
+						reportError={this.errorReported}
 						renderer={this.state.brew.renderer}
 					/>
 					<BrewRenderer text={this.state.brew.text} style={this.state.brew.style} renderer={this.state.brew.renderer} theme={this.state.brew.theme} errors={this.state.htmlErrors} />

client/homebrew/pages/editPage/editPage.less

@@ -13,10 +13,6 @@
 			cursor : initial;
 			color  : #666;
 		}
-		&.error{
-			position         : relative;
-			background-color : @red;
-		}
 	}
 	.googleDriveStorage {
 		position : relative;
@@ -26,74 +22,4 @@
 		padding : 0px;
 		margin  : -5px;
 	}
-	.errorContainer{
-		animation-name: glideDown;
-		animation-duration: 0.4s;
-		position         : absolute;
-		top              : 100%;
-		left             : 50%;
-		z-index          : 500;
-		width            : 140px;
-		padding          : 3px;
-		color            : white;
-		background-color : #333;
-		border           : 3px solid #444;
-		border-radius    : 5px;
-		transform        : translate(-50% + 3px, 10px);
-		text-align       : center;
-		font-size        : 10px;
-		font-weight      : 800;
-		text-transform   : uppercase;
-		a{
-			color : @teal;
-		}
-		&:before {
-			content: "";
-			width: 0px;
-			height: 0px;
-			position: absolute;
-			border-left: 10px solid transparent;
-			border-right: 10px solid transparent;
-			border-top: 10px solid transparent;
-			border-bottom: 10px solid #444;
-			left: 53px;
-			top: -23px;
-		}
-		&:after {
-			content: "";
-			width: 0px;
-			height: 0px;
-			position: absolute;
-			border-left: 10px solid transparent;
-			border-right: 10px solid transparent;
-			border-top: 10px solid transparent;
-			border-bottom: 10px solid #333;
-			left: 53px;
-			top: -19px;
-		}
-		.deny {
-			width            : 48%;
-		  margin           : 1px;
-			padding          : 5px;
-			background-color : #333;
-			display          : inline-block;
-			border-left      : 1px solid #666;
-			.animate(background-color);
-			&:hover{
-				background-color : red;
-			}
-		}
-		.confirm {
-			width            : 48%;
-			margin           : 1px;
-			padding          : 5px;
-			background-color : #333;
-			display          : inline-block;
-			color            : white;
-			.animate(background-color);
-			&:hover{
-				background-color : teal;
-			}
-		}
-	}
 }

client/homebrew/pages/homePage/homePage.jsx

@@ -3,7 +3,7 @@ const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
 const cx = require('classnames');
-const request = require('superagent');
+const request = require('../../utils/request-middleware.js');
 const { Meta } = require('vitreum/headtags');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
@@ -12,35 +12,38 @@ const NewBrewItem = require('../../navbar/newbrew.navitem.jsx');
 const HelpNavItem = require('../../navbar/help.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 SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
 const Editor = require('../../editor/editor.jsx');
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
-
+const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js');
 
 const HomePage = createClass({
 	displayName     : 'HomePage',
 	getDefaultProps : function() {
 		return {
-			brew : {
-				text : '',
-			},
-			ver : '0.0.0'
+			brew : DEFAULT_BREW,
+			ver  : '0.0.0'
 		};
 	},
 	getInitialState : function() {
 		return {
 			brew        : this.props.brew,
-			welcomeText : this.props.brew.text
+			welcomeText : this.props.brew.text,
+			error       : undefined
 		};
 	},
 	handleSave : function(){
 		request.post('/api')
 			.send(this.state.brew)
 			.end((err, res)=>{
-				if(err) return;
+				if(err) {
+					this.setState({ error: err });
+					return;
+				}
 				const brew = res.body;
 				window.location = `/edit/${brew.editId}`;
 			});
@@ -56,6 +59,10 @@ const HomePage = createClass({
 	renderNavbar : function(){
 		return <Navbar ver={this.props.ver}>
 			<Nav.section>
+				{this.state.error ?
+					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
+					null
+				}
 				<NewBrewItem />
 				<HelpNavItem />
 				<RecentNavItem />

client/homebrew/pages/homePage/homePage.less

@@ -40,4 +40,11 @@
 			right : 350px;
 		}
 	}
+
+	.navItem.save{
+		background-color: @orange;
+		&:hover{
+			background-color: @green;
+		}
+	}
 }

client/homebrew/pages/newPage/newPage.jsx

@@ -3,13 +3,14 @@ require('./newPage.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
-const request = require('superagent');
+const request = require('../../utils/request-middleware.js');
 
 const Markdown = require('naturalcrit/markdown.js');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
 const AccountNavItem = require('../../navbar/account.navitem.jsx');
+const ErrorNavItem = require('../../navbar/error-navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 const HelpNavItem = require('../../navbar/help.navitem.jsx');
 
@@ -17,6 +18,8 @@ const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
 const Editor = require('../../editor/editor.jsx');
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
+const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js');
+
 const BREWKEY = 'homebrewery-new';
 const STYLEKEY = 'homebrewery-new-style';
 const METAKEY = 'homebrewery-new-meta';
@@ -26,36 +29,18 @@ const NewPage = createClass({
 	displayName     : 'NewPage',
 	getDefaultProps : function() {
 		return {
-			brew : {
-				text        : '',
-				style       : undefined,
-				title       : '',
-				description : '',
-				renderer    : 'V3',
-				theme       : '5ePHB'
-			}
+			brew : DEFAULT_BREW
 		};
 	},
 
 	getInitialState : function() {
-		let brew = this.props.brew;
-
-		if(this.props.brew.shareId) {
-			brew = {
-				text        : brew.text        ?? '',
-				style       : brew.style       ?? undefined,
-				title       : brew.title       ?? '',
-				description : brew.description ?? '',
-				renderer    : brew.renderer    ?? 'legacy',
-				theme       : brew.theme       ?? '5ePHB'
-			};
-		}
+		const brew = this.props.brew;
 
 		return {
 			brew       : brew,
 			isSaving   : false,
 			saveGoogle : (global.account && global.account.googleId ? true : false),
-			errors     : null,
+			error      : null,
 			htmlErrors : Markdown.validate(brew.text)
 		};
 	},
@@ -83,7 +68,8 @@ const NewPage = createClass({
 		}
 
 		localStorage.setItem(BREWKEY, brew.text);
-		localStorage.setItem(STYLEKEY, brew.style);
+		if(brew.style)
+			localStorage.setItem(STYLEKEY, brew.style);
 		localStorage.setItem(METAKEY, JSON.stringify({ 'renderer': brew.renderer, 'theme': brew.theme }));
 	},
 	componentWillUnmount : function() {
@@ -137,14 +123,6 @@ const NewPage = createClass({
 		}));
 	},
 
-	clearErrors : function(){
-		this.setState({
-			errors   : null,
-			isSaving : false
-
-		});
-	},
-
 	save : async function(){
 		this.setState({
 			isSaving : true
@@ -167,7 +145,7 @@ const NewPage = createClass({
 			.send(brew)
 			.catch((err)=>{
 				console.log(err);
-				this.setState({ isSaving: false, errors: err });
+				this.setState({ isSaving: false, error: err });
 			});
 		if(!res) return;
 
@@ -179,67 +157,6 @@ const NewPage = createClass({
 	},
 
 	renderSaveButton : function(){
-		if(this.state.errors){
-			let errMsg = '';
-			try {
-				errMsg += `${this.state.errors.toString()}\n\n`;
-				errMsg += `\`\`\`\n${this.state.errors.stack}\n`;
-				errMsg += `${JSON.stringify(this.state.errors.response.error, null, '  ')}\n\`\`\``;
-				console.log(errMsg);
-			} catch (e){}
-
-			// if(this.state.errors.status == '401'){
-			// 	return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-			// 		Oops!
-			// 		<div className='errorContainer' onClick={this.clearErrors}>
-			// 		You must be signed in to a Google account
-			// 			to save this to<br />Google Drive!<br />
-			// 			<a target='_blank' rel='noopener noreferrer'
-			// 				href={`https://www.naturalcrit.com/login?redirect=${this.state.url}`}>
-			// 				<div className='confirm'>
-			// 					Sign In
-			// 				</div>
-			// 			</a>
-			// 			<div className='deny'>
-			// 				Not Now
-			// 			</div>
-			// 		</div>
-			// 	</Nav.item>;
-			// }
-
-			if(this.state.errors.response.req.url.match(/^\/api.*Google.*$/m)){
-				return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-					Oops!
-					<div className='errorContainer' onClick={this.clearErrors}>
-					Looks like your Google credentials have
-					expired! Visit our log in page to sign out
-					and sign back in with Google,
-					then try saving again!
-						<a target='_blank' rel='noopener noreferrer'
-							href={`https://www.naturalcrit.com/login?redirect=${this.state.url}`}>
-							<div className='confirm'>
-								Sign In
-							</div>
-						</a>
-						<div className='deny'>
-							Not Now
-						</div>
-					</div>
-				</Nav.item>;
-			}
-
-			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-				Oops!
-				<div className='errorContainer'>
-					Looks like there was a problem saving. <br />
-					Report the issue <a target='_blank' rel='noopener noreferrer'
-						href={`https://github.com/naturalcrit/homebrewery/issues/new?body=${encodeURIComponent(errMsg)}`}>
-						here
-					</a>.
-				</div>
-			</Nav.item>;
-		}
-
 		if(this.state.isSaving){
 			return <Nav.item icon='fas fa-spinner fa-spin' className='save'>
 				save...
@@ -269,7 +186,10 @@ const NewPage = createClass({
 			</Nav.section>
 
 			<Nav.section>
-				{this.renderSaveButton()}
+				{this.state.error ?
+					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
+					this.renderSaveButton()
+				}
 				{this.renderLocalPrintButton()}
 				<HelpNavItem />
 				<RecentNavItem />

client/homebrew/pages/newPage/newPage.less

@@ -4,79 +4,5 @@
 		&:hover{
 			background-color: @green;
 		}
-		&.error{
-			position         : relative;
-			background-color : @red;
-		}
-	}
-	.errorContainer{
-		animation-name: glideDown;
-		animation-duration: 0.4s;
-		position         : absolute;
-		top              : 100%;
-		left             : 50%;
-		z-index          : 100000;
-		width            : 140px;
-		padding          : 3px;
-		color            : white;
-		background-color : #333;
-		border           : 3px solid #444;
-		border-radius    : 5px;
-		transform        : translate(-50% + 3px, 10px);
-		text-align       : center;
-		font-size        : 10px;
-		font-weight      : 800;
-		text-transform   : uppercase;
-		a{
-			color : @teal;
-		}
-		&:before {
-			content: "";
-			width: 0px;
-			height: 0px;
-			position: absolute;
-			border-left: 10px solid transparent;
-			border-right: 10px solid transparent;
-			border-top: 10px solid transparent;
-			border-bottom: 10px solid #444;
-			left: 53px;
-			top: -23px;
-		}
-		&:after {
-			content: "";
-			width: 0px;
-			height: 0px;
-			position: absolute;
-			border-left: 10px solid transparent;
-			border-right: 10px solid transparent;
-			border-top: 10px solid transparent;
-			border-bottom: 10px solid #333;
-			left: 53px;
-			top: -19px;
-		}
-		.deny {
-			width            : 48%;
-			margin           : 1px;
-			padding          : 5px;
-			background-color : #333;
-			display          : inline-block;
-			border-left      : 1px solid #666;
-			.animate(background-color);
-			&:hover{
-				background-color : red;
-			}
-		}
-		.confirm {
-			width            : 48%;
-			margin           : 1px;
-			padding          : 5px;
-			background-color : #333;
-			display          : inline-block;
-			color            : white;
-			.animate(background-color);
-			&:hover{
-				background-color : teal;
-			}
-		}
 	}
 }

client/homebrew/pages/printPage/printPage.jsx

@@ -29,9 +29,10 @@ const PrintPage = createClass({
 	getInitialState : function() {
 		return {
 			brew : {
-				text     : this.props.brew.text || '',
-				style    : this.props.brew.style || undefined,
-				renderer : this.props.brew.renderer || 'legacy'
+				text     : this.props.brew.text     || '',
+				style    : this.props.brew.style    || undefined,
+				renderer : this.props.brew.renderer || 'legacy',
+				theme    : this.props.brew.theme    || '5ePHB'
 			}
 		};
 	},
@@ -48,7 +49,7 @@ const PrintPage = createClass({
 						text     : brewStorage,
 						style    : styleStorage,
 						renderer : metaStorage?.renderer || 'legacy',
-						theme    : metaStorage?.theme || '5ePHB'
+						theme    : metaStorage?.theme    || '5ePHB'
 					}
 				};
 			});
@@ -59,7 +60,7 @@ const PrintPage = createClass({
 
 	renderStyle : function() {
 		if(!this.state.brew.style) return;
-		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style> ${this.state.brew.style} </style>` }} />;
+		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${this.state.brew.style}\n} </style>` }} />;
 	},
 
 	renderPages : function(){

client/homebrew/pages/sharePage/sharePage.jsx

@@ -12,21 +12,13 @@ const Account = require('../../navbar/account.navitem.jsx');
 
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
+const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
 
 const SharePage = createClass({
 	displayName     : 'SharePage',
 	getDefaultProps : function() {
 		return {
-			brew : {
-				title     : '',
-				text      : '',
-				style     : '',
-				shareId   : null,
-				createdAt : null,
-				updatedAt : null,
-				views     : 0,
-				renderer  : ''
-			}
+			brew : DEFAULT_BREW_LOAD
 		};
 	},
 

client/homebrew/pages/userPage/userPage.jsx

@@ -12,6 +12,7 @@ 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 UserPage = createClass({
 	displayName     : 'UserPage',
@@ -19,7 +20,8 @@ const UserPage = createClass({
 		return {
 			username : '',
 			brews    : [],
-			query    : ''
+			query    : '',
+			error    : null
 		};
 	},
 	getInitialState : function() {
@@ -50,10 +52,19 @@ const UserPage = createClass({
 			brewCollection : brewCollection
 		};
 	},
+	errorReported : function(error) {
+		this.setState({
+			error
+		});
+	},
 
 	navItems : function() {
 		return <Navbar>
 			<Nav.section>
+				{this.state.error ?
+					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
+					null
+				}
 				<NewBrew />
 				<HelpNavItem />
 				<RecentNavItem />
@@ -63,7 +74,7 @@ const UserPage = createClass({
 	},
 
 	render : function(){
-		return <ListPage brewCollection={this.state.brewCollection} navItems={this.navItems()} query={this.props.query}></ListPage>;
+		return <ListPage brewCollection={this.state.brewCollection} navItems={this.navItems()} query={this.props.query} reportError={this.errorReported}></ListPage>;
 	}
 });
 

client/homebrew/utils/request-middleware.js

@@ -0,0 +1,12 @@
+const request = require('superagent');
+
+const addHeader = (request)=>request.set('Homebrewery-Version', global.version);
+
+const requestMiddleware = {
+	get    : (path)=>addHeader(request.get(path)),
+	put    : (path)=>addHeader(request.put(path)),
+	post   : (path)=>addHeader(request.post(path)),
+	delete : (path)=>addHeader(request.delete(path)),
+};
+
+module.exports = requestMiddleware;

client/icons/customIcons.less

@@ -0,0 +1,15 @@
+.fac {
+  display      : inline-block;
+}
+.position-top-left {
+  content: url('../icons/position-top-left.svg');
+}
+.position-top-right {
+  content: url('../icons/position-top-right.svg');
+}
+.position-bottom-left {
+  content: url('../icons/position-bottom-left.svg');
+}
+.position-bottom-right {
+  content: url('../icons/position-bottom-right.svg');
+}

client/icons/position-bottom-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 495 495"><path fill-opacity=".995" d="M495 135.49V0H359.51v135.49M482.72 11.37v113.26H371.9V11.37zM135.49 315.245v-135.49H0v135.49m123.21-124.12v113.26H12.39v-113.26zm12.28-55.635V0H0v135.49M123.21 11.37v113.26H12.39V11.37zm192.035 124.12V0h-135.49v135.49m123.21-124.12v113.26h-110.82V11.37zm12.28 303.875v-135.49h-135.49v135.49m123.21-124.12v113.26h-110.82v-113.26zM495 315.245v-135.49H359.51v135.49m123.21-124.12v113.26H371.9v-113.26zM135.49 495V359.51H0V495Zm179.755 0V359.51h-135.49V495m123.21-124.12v113.26h-110.82V370.88zM495 495V359.51H359.51V495m123.21-124.12v113.26H371.9V370.88z"/></svg>

client/icons/position-bottom-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 495 495"><g fill-opacity=".995"><path d="M135.49 0H0v135.49h135.49M11.37 12.28h113.26V123.1H11.37zM315.245 359.51h-135.49V495h135.49m-124.12-123.21h113.26v110.82h-113.26zM135.49 359.51H0V495h135.49M11.37 371.79h113.26v110.82H11.37zM135.49 179.755H0v135.49h135.49M11.37 192.035h113.26v110.82H11.37zM315.245 179.755h-135.49v135.49h135.49m-124.12-123.21h113.26v110.82h-113.26zM315.245 0h-135.49v135.49h135.49M191.125 12.28h113.26V123.1h-113.26zM495 359.51H359.51V495H495ZM495 179.755H359.51v135.49H495m-124.12-123.21h113.26v110.82H370.88zM495 0H359.51v135.49H495M370.88 12.28h113.26V123.1H370.88z"/></g></svg>

client/icons/position-top-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 495 495"><path fill-opacity=".995" d="M359.51 495H495V359.51H359.51m124.12 123.21H370.37V371.9h113.26zM179.755 135.49h135.49V0h-135.49m124.12 123.21h-113.26V12.39h113.26zM359.51 135.49H495V0H359.51m124.12 123.21H370.37V12.39h113.26zM359.51 315.245H495v-135.49H359.51m124.12 123.21H370.37v-110.82h113.26zM179.755 315.245h135.49v-135.49h-135.49m124.12 123.21h-113.26v-110.82h113.26zM179.755 495h135.49V359.51h-135.49m124.12 123.21h-113.26V371.9h113.26zM0 135.49h135.49V0H0ZM0 315.245h135.49v-135.49H0m124.12 123.21H10.86v-110.82h113.26zM0 495h135.49V359.51H0m124.12 123.21H10.86V371.9h113.26z"/></svg>

client/icons/position-top-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 495 495"><g fill-opacity=".995"><path d="M0 359.51V495h135.49V359.51M12.28 483.63V370.37H123.1v113.26zM359.51 179.755v135.49H495v-135.49m-123.21 124.12v-113.26h110.82v113.26zM359.51 359.51V495H495V359.51M371.79 483.63V370.37h110.82v113.26zM179.755 359.51V495h135.49V359.51m-123.21 124.12V370.37h110.82v113.26zM179.755 179.755v135.49h135.49v-135.49m-123.21 124.12v-113.26h110.82v113.26zM0 179.755v135.49h135.49v-135.49M12.28 303.875v-113.26H123.1v113.26zM359.51 0v135.49H495V0ZM179.755 0v135.49h135.49V0m-123.21 124.12V10.86h110.82v113.26zM0 0v135.49h135.49V0M12.28 124.12V10.86H123.1v113.26z"/></g></svg>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "homebrewery",
   "description": "Create authentic looking D&D homebrews using only markdown",
-  "version": "3.4.2",
+  "version": "3.6.1",
   "engines": {
     "node": "16.11.x"
   },
@@ -14,11 +14,14 @@
     "quick": "node scripts/quick.js",
     "build": "node scripts/buildHomebrew.js",
     "buildall": "node scripts/buildHomebrew.js && node scripts/buildAdmin.js",
+    "builddev": "node scripts/buildHomebrew.js --dev",
     "lint": "eslint --fix **/*.{js,jsx}",
     "lint:dry": "eslint **/*.{js,jsx}",
     "circleci": "npm test && eslint **/*.{js,jsx} --max-warnings=0",
     "verify": "npm run lint && npm test",
     "test": "jest",
+    "test:api-unit": "jest server/*.spec.js --verbose",
+    "test:coverage": "jest --coverage --silent",
     "test:dev": "jest --verbose --watch",
     "test:basic": "jest tests/markdown/basic.test.js --verbose",
     "test:mustache-span": "jest tests/markdown/mustache-span.test.js --verbose",
@@ -39,7 +42,21 @@
       "mode_modules",
       "shared",
       "server"
-    ]
+    ],
+    "coverageThreshold" : {
+      "global" : {
+        "statements" : 25,
+        "branches"   : 10,
+        "functions"  : 22,
+        "lines"      : 25
+      },
+      "server/homebrew.api.js" : {
+        "statements" : 65,
+        "branches"   : 50,
+        "functions"  : 60,
+        "lines"      : 70
+      }
+    }
   },
   "babel": {
     "presets": [
@@ -51,7 +68,7 @@
     ]
   },
   "dependencies": {
-    "@babel/core": "^7.20.5",
+    "@babel/core": "^7.20.12",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.19.4",
     "@babel/preset-react": "^7.18.6",
@@ -65,31 +82,31 @@
     "express-async-handler": "^1.2.0",
     "express-static-gzip": "2.1.7",
     "fs-extra": "11.1.0",
-    "googleapis": "109.0.1",
+    "googleapis": "111.0.0",
     "js-yaml": "^4.1.0",
     "jwt-simple": "^0.5.6",
     "less": "^3.13.1",
     "lodash": "^4.17.21",
-    "marked": "4.2.4",
+    "marked": "4.2.12",
     "marked-extended-tables": "^1.0.5",
     "markedLegacy": "npm:marked@^0.3.19",
     "moment": "^2.29.4",
-    "mongoose": "^6.8.0",
+    "mongoose": "^6.9.1",
     "nanoid": "3.3.4",
     "nconf": "^0.12.0",
     "npm": "^8.10.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-frame-component": "4.1.3",
-    "react-router-dom": "6.4.5",
+    "react-router-dom": "6.8.1",
     "sanitize-filename": "1.6.3",
     "superagent": "^6.1.0",
     "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
   },
   "devDependencies": {
-    "eslint": "^8.29.0",
-    "eslint-plugin-react": "^7.31.11",
-    "jest": "^29.2.2",
+    "eslint": "^8.34.0",
+    "eslint-plugin-react": "^7.32.2",
+    "jest": "^29.4.3",
     "supertest": "^6.3.3"
   }
 }

scripts/buildHomebrew.js

@@ -20,7 +20,8 @@ const transforms = {
 };
 
 const build = async ({ bundle, render, ssr })=>{
-	const css = await lessTransform.generate({ paths: './shared' });
+	let css = await lessTransform.generate({ paths: './shared' });
+	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);
@@ -72,6 +73,7 @@ fs.emptyDirSync('./build');
 		themeData.path = dir;
 		themes.V3[dir] = (themeData);
 		fs.copy(`./themes/V3/${dir}/dropdownTexture.png`, `./build/themes/V3/${dir}/dropdownTexture.png`);
+		fs.copy(`./themes/V3/${dir}/dropdownPreview.png`, `./build/themes/V3/${dir}/dropdownPreview.png`);
 		const src = `./themes/V3/${dir}/style.less`;
 	  ((outputDirectory)=>{
 			less.render(fs.readFileSync(src).toString(), {
@@ -95,6 +97,7 @@ fs.emptyDirSync('./build');
 	// Move assets
 	await fs.copy('./themes/fonts', './build/fonts');
 	await fs.copy('./themes/assets', './build/assets');
+	await fs.copy('./client/icons', './build/icons');
 
 	//v==----------------------------- BUNDLE PACKAGES --------------------------------==v//
 
@@ -136,6 +139,6 @@ fs.emptyDirSync('./build');
 if(isDev){
 	livereload('./build');
 	watchFile('./server.js', {
-		watch : ['./client', './server'] // Watch additional folders if you want
+		watch : ['./client', './server', './themes'] // Watch additional folders if you want
 	});
 }

server/app.js

@@ -15,6 +15,8 @@ const serveCompressedStaticAssets = require('./static-assets.mv.js');
 const sanitizeFilename = require('sanitize-filename');
 const asyncHandler = require('express-async-handler');
 
+const { DEFAULT_BREW } = require('./brewDefaults.js');
+
 const splitTextStyleAndMetadata = (brew)=>{
 	brew.text = brew.text.replaceAll('\r\n', '\n');
 	if(brew.text.startsWith('```metadata')) {
@@ -29,7 +31,6 @@ const splitTextStyleAndMetadata = (brew)=>{
 		brew.style = brew.text.slice(7, index - 1);
 		brew.text = brew.text.slice(index + 5);
 	}
-	_.defaults(brew, { 'renderer': 'legacy', 'theme': '5ePHB' });
 };
 
 const sanitizeBrew = (brew, accessType)=>{
@@ -293,7 +294,15 @@ app.get('/edit/:id', asyncHandler(getBrew('edit')), (req, res, next)=>{
 app.get('/new/:id', asyncHandler(getBrew('share')), (req, res, next)=>{
 	sanitizeBrew(req.brew, 'share');
 	splitTextStyleAndMetadata(req.brew);
-	req.brew.title = `CLONE - ${req.brew.title}`;
+	const brew = {
+		shareId  : req.brew.shareId,
+		title    : `CLONE - ${req.brew.title}`,
+		text     : req.brew.text,
+		style    : req.brew.style,
+		renderer : req.brew.renderer,
+		theme    : req.brew.theme
+	};
+	req.brew = _.defaults(brew, DEFAULT_BREW);
 
 	req.ogMeta = { ...defaultMetaTags,
 		title       : 'New',
@@ -406,6 +415,7 @@ if(isLocalEnvironment){
 //Render the page
 const templateFn = require('./../client/template.js');
 app.use(asyncHandler(async (req, res, next)=>{
+
 	// Create configuration object
 	const configuration = {
 		local       : isLocalEnvironment,

server/brewDefaults.js

@@ -0,0 +1,37 @@
+const _ = require('lodash');
+
+// Default properties for newly-created brews
+const DEFAULT_BREW = {
+	title       : '',
+	text        : '',
+	style       : undefined,
+	description : '',
+	editId      : undefined,
+	shareId     : undefined,
+	createdAt   : undefined,
+	updatedAt   : undefined,
+	renderer    : 'V3',
+	theme       : '5ePHB',
+	authors     : [],
+	tags        : [],
+	systems     : [],
+	thumbnail   : '',
+	views       : 0,
+	published   : false,
+	pageCount   : 1,
+	gDrive      : false,
+	trashed     : false
+
+};
+// Default values for older brews with missing properties
+// e.g., missing "renderer" is assumed to be "legacy"
+const DEFAULT_BREW_LOAD = _.defaults(
+	{
+		renderer : 'legacy',
+	},
+	DEFAULT_BREW);
+
+module.exports = {
+	DEFAULT_BREW,
+	DEFAULT_BREW_LOAD
+};

server/homebrew.api.js

@@ -9,329 +9,339 @@ const yaml = require('js-yaml');
 const asyncHandler = require('express-async-handler');
 const { nanoid } = require('nanoid');
 
+const { DEFAULT_BREW, DEFAULT_BREW_LOAD } = require('./brewDefaults.js');
+
 // const getTopBrews = (cb) => {
 // 	HomebrewModel.find().sort({ views: -1 }).limit(5).exec(function(err, brews) {
 // 		cb(brews);
 // 	});
 // };
 
-const getId = (req)=>{
-	// Set the id and initial potential google id, where the google id is present on the existing brew.
-	let id = req.params.id, googleId = req.body?.googleId;
-
-	// If the id is longer than 12, then it's a google id + the edit id. This splits the longer id up.
-	if(id.length > 12) {
-		googleId = id.slice(0, -12);
-		id = id.slice(-12);
-	}
-	return { id, googleId };
-};
-
-const getBrew = (accessType, stubOnly = false)=>{
-	// 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 } = getId(req);
-
-		// 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 })
-			.catch((err)=>{
-				if(googleId) {
-					console.warn(`Unable to find document stub for ${accessType}Id ${id}`);
-				} else {
-					console.warn(err);
-				}
-			});
-		stub = stub?.toObject();
-
-		// 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)=>{
-					console.warn(err);
-					googleError = err;
-				});
-			// If we can't find the google brew and there is a google id for the brew, throw an error.
-			if(!googleBrew) throw googleError;
-			// Combine the Homebrewery stub with the google brew, or if the stub doesn't exist just use the google brew
-			stub = stub ? _.assign({ ...excludeStubProps(stub), stubbed: true }, excludeGoogleProps(googleBrew)) : googleBrew;
-		}
-
-		// If after all of that we still don't have a brew, throw an exception
-		if(!stub && !stubOnly) {
-			throw 'Brew not found in Homebrewery database or Google Drive';
-		}
-
-		if(typeof stub?.tags === 'string') {
-			stub.tags = [];
-		}
-		req.brew = stub || {};
-
-		next();
-	};
-};
-
-const mergeBrewText = (brew)=>{
-	let text = brew.text;
-	if(brew.style !== undefined) {
-		text = `\`\`\`css\n` +
-			`${brew.style || ''}\n` +
-			`\`\`\`\n\n` +
-			`${text}`;
-	}
-	const metadata = _.pick(brew, ['title', 'description', 'tags', 'systems', 'renderer', 'theme']);
-	text = `\`\`\`metadata\n` +
-		`${yaml.dump(metadata)}\n` +
-		`\`\`\`\n\n` +
-		`${text}`;
-	return text;
-};
-
 const MAX_TITLE_LENGTH = 100;
 
-const getGoodBrewTitle = (text)=>{
-	const tokens = Markdown.marked.lexer(text);
- 	return (tokens.find((token)=>token.type === 'heading' || token.type === 'paragraph')?.text || 'No Title')
-				 .slice(0, MAX_TITLE_LENGTH);
-};
+const api = {
+	homebrewApi : router,
+	getId       : (req)=>{
+		// Set the id and initial potential google id, where the google id is present on the existing brew.
+		let id = req.params.id, googleId = req.body?.googleId;
 
-const excludePropsFromUpdate = (brew)=>{
-	// Remove undesired properties
-	const modified = _.clone(brew);
-	const propsToExclude = ['_id', 'views', 'lastViewed', 'editId', 'shareId', 'googleId'];
-	for (const prop of propsToExclude) {
-		delete modified[prop];
-	}
-	return modified;
-};
-
-const excludeGoogleProps = (brew)=>{
-	const modified = _.clone(brew);
-	const propsToExclude = ['tags', 'systems', 'published', 'authors', 'owner', 'views', 'thumbnail'];
-	for (const prop of propsToExclude) {
-		delete modified[prop];
-	}
-	return modified;
-};
-
-const excludeStubProps = (brew)=>{
-	const propsToExclude = ['text', 'textBin', 'renderer', 'pageCount', 'version'];
-	for (const prop of propsToExclude) {
-		brew[prop] = undefined;
-	}
-	return brew;
-};
-
-const beforeNewSave = (account, brew)=>{
-	if(!brew.title) {
-		brew.title = getGoodBrewTitle(brew.text);
-	}
-
-	brew.authors = (account) ? [account.username] : [];
-	brew.text = mergeBrewText(brew);
-};
-
-const newGoogleBrew = async (account, brew, res)=>{
-	const oAuth2Client = GoogleActions.authCheck(account, res);
-
-	const newBrew = excludeGoogleProps(brew);
-
-	return await GoogleActions.newGoogleBrew(oAuth2Client, newBrew);
-};
-
-const newBrew = async (req, res)=>{
-	const brew = req.body;
-	const { saveToGoogle } = req.query;
-
-	delete brew.editId;
-	delete brew.shareId;
-	delete brew.googleId;
-
-	beforeNewSave(req.account, brew);
-
-	const newHomebrew = new HomebrewModel(brew);
-	newHomebrew.editId = nanoid(12);
-	newHomebrew.shareId = nanoid(12);
-
-	let googleId, saved;
-	if(saveToGoogle) {
-		googleId = await newGoogleBrew(req.account, newHomebrew, res)
-			.catch((err)=>{
-				console.error(err);
-				res.status(err?.status || err?.response?.status || 500).send(err?.message || err);
-			});
-		if(!googleId) return;
-		excludeStubProps(newHomebrew);
-		newHomebrew.googleId = googleId;
-	} else {
-		// Compress brew text to binary before saving
-		newHomebrew.textBin = zlib.deflateRawSync(newHomebrew.text);
-		// Delete the non-binary text field since it's not needed anymore
-		newHomebrew.text = undefined;
-	}
-
-	saved = await newHomebrew.save()
-		.catch((err)=>{
-			console.error(err, err.toString(), err.stack);
-			throw `Error while creating new brew, ${err.toString()}`;
-		});
-	if(!saved) return;
-	saved = saved.toObject();
-
-	res.status(200).send(saved);
-};
-
-const updateBrew = async (req, res)=>{
-	// Initialize brew from request and body, destructure query params, set a constant for the google id, and set the initial value for the after-save method
-	let brew = _.assign(req.brew, excludePropsFromUpdate(req.body));
-	const { saveToGoogle, removeFromGoogle } = req.query;
-	const googleId = brew.googleId;
-	let afterSave = async ()=>true;
-
-	brew.text = mergeBrewText(brew);
-
-	if(brew.googleId && removeFromGoogle) {
-		// If the google id exists and we're removing it from google, set afterSave to delete the google brew and mark the brew's google id as undefined
-		afterSave = async ()=>{
-			return await deleteGoogleBrew(req.account, googleId, brew.editId, res)
-				.catch((err)=>{
-					console.error(err);
-					res.status(err?.status || err?.response?.status || 500).send(err.message || err);
-				});
-		};
-
-		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 newGoogleBrew(req.account, excludeGoogleProps(brew), res)
-			.catch((err)=>{
-				console.error(err);
-				res.status(err.status || err.response.status).send(err.message || err);
-			});
-		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(excludeGoogleProps(brew))
-			.catch((err)=>{
-				console.error(err);
-				res.status(err?.response?.status || 500).send(err);
-			});
-		if(!updated) return;
-	}
-
-	if(brew.googleId) {
-		// If the google id exists after all those actions, exclude the props that are stored in google and aren't needed for rendering the brew items
-		excludeStubProps(brew);
-	} else {
-		// Compress brew text to binary before saving
-		brew.textBin = zlib.deflateRawSync(brew.text);
-		// Delete the non-binary text field since it's not needed anymore
-		brew.text = undefined;
-	}
-	brew.updatedAt = new Date();
-
-	if(req.account) {
-		brew.authors = _.uniq(_.concat(brew.authors, req.account.username));
-	}
-
-	// define a function to catch our save errors
-	const saveError = (err)=>{
-		console.error(err);
-		res.status(err.status || 500).send(err.message || 'Unable to save brew to Homebrewery database');
-	};
-	let saved;
-	if(!brew._id) {
-		// if the brew does not have a stub id, create and save it, then write the new value back to the brew.
-		saved = await new HomebrewModel(brew).save().catch(saveError);
-		brew = saved?.toObject();
-	} else {
-		// if the brew does have a stub id, update it using the stub id as the key.
-		saved = await HomebrewModel.findOneAndUpdate({ _id: brew._id }, brew, {
-			returnOriginal : false
-		}).catch(saveError);
-	}
-	if(!saved) return;
-	// Call and wait for afterSave to complete
-	const after = await afterSave();
-	if(!after) return;
-
-	res.status(200).send(saved);
-};
-
-const deleteGoogleBrew = async (account, id, editId, res)=>{
-	const auth = await GoogleActions.authCheck(account, res);
-	await GoogleActions.deleteGoogleBrew(auth, id, editId);
-	return true;
-};
-
-const deleteBrew = async (req, res, next)=>{
-	// Delete an orphaned stub if its Google brew doesn't exist
-	try {
-		await getBrew('edit')(req, res, ()=>{});
-	} catch (err) {
-		const { id, googleId } = getId(req);
-		console.warn(`No google brew found for id ${googleId}, the stub with id ${id} will be deleted.`);
-		await HomebrewModel.deleteOne({ editId: id });
-		return next();
-	}
-
-	let brew = req.brew;
-	const { googleId, editId } = brew;
-	const account = req.account;
-	const isOwner = account && (brew.authors.length === 0 || brew.authors[0] === account.username);
-	// If the user is the owner and the file is saved to google, mark the google brew for deletion
-	const shouldDeleteGoogleBrew = googleId && isOwner;
-
-	if(brew._id) {
-		brew = _.assign(await HomebrewModel.findOne({ _id: brew._id }), brew);
-		if(account) {
-			// Remove current user as author
-			brew.authors = _.pull(brew.authors, account.username);
-			brew.markModified('authors');
+		// If the id is longer than 12, then it's a google id + the edit id. This splits the longer id up.
+		if(id.length > 12) {
+			googleId = id.slice(0, -12);
+			id = id.slice(-12);
 		}
+		return { id, googleId };
+	},
+	getBrew : (accessType, stubOnly = false)=>{
+		// 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);
 
-		if(brew.authors.length === 0) {
-			// Delete brew if there are no authors left
-			await brew.remove()
+			// 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 })
 				.catch((err)=>{
-					console.error(err);
-					throw { status: 500, message: 'Error while removing' };
+					if(googleId) {
+						console.warn(`Unable to find document stub for ${accessType}Id ${id}`);
+					} else {
+						console.warn(err);
+					}
 				});
-		} else {
-			if(shouldDeleteGoogleBrew) {
-				// When there are still authors remaining, we delete the google brew but store the full brew in the Homebrewery database
-				brew.googleId = undefined;
-				brew.textBin = zlib.deflateRawSync(brew.text);
-				brew.text = undefined;
+			stub = stub?.toObject();
+
+			// 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;
+					});
+				// Throw any error caught while attempting to retrieve Google brew.
+				if(googleError) throw googleError;
+				// 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))) {
+				throw `The current logged in user does not have editor access to this brew.
+
+If you believe you should have access to this brew, ask the file owner to invite you as an author by opening the brew, viewing the Properties tab, and adding your username to the "invited authors" list. You can then try to access this document again.`;
 			}
 
-			// Otherwise, save the brew with updated author list
-			await brew.save()
-				.catch((err)=>{
-					throw { status: 500, message: err };
-				});
+			// If after all of that we still don't have a brew, throw an exception
+			if(!stub && !stubOnly) {
+				throw 'Brew not found in Homebrewery database or Google Drive';
+			}
+
+			// 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
+			}
+
+			req.brew = stub ?? {};
+			next();
+		};
+	},
+	mergeBrewText : (brew)=>{
+		let text = brew.text;
+		if(brew.style !== undefined) {
+			text = `\`\`\`css\n` +
+				`${brew.style || ''}\n` +
+				`\`\`\`\n\n` +
+				`${text}`;
 		}
-	}
-	if(shouldDeleteGoogleBrew) {
-		const deleted = await deleteGoogleBrew(account, googleId, editId, res)
+		const metadata = _.pick(brew, ['title', 'description', 'tags', 'systems', 'renderer', 'theme']);
+		text = `\`\`\`metadata\n` +
+			`${yaml.dump(metadata)}\n` +
+			`\`\`\`\n\n` +
+			`${text}`;
+		return text;
+	},
+	getGoodBrewTitle : (text)=>{
+		const tokens = Markdown.marked.lexer(text);
+		return (tokens.find((token)=>token.type === 'heading' || token.type === 'paragraph')?.text || 'No Title')
+			.slice(0, MAX_TITLE_LENGTH);
+	},
+	excludePropsFromUpdate : (brew)=>{
+		// Remove undesired properties
+		const modified = _.clone(brew);
+		const propsToExclude = ['_id', 'views', 'lastViewed'];
+		for (const prop of propsToExclude) {
+			delete modified[prop];
+		}
+		return modified;
+	},
+	excludeGoogleProps : (brew)=>{
+		const modified = _.clone(brew);
+		const propsToExclude = ['version', 'tags', 'systems', 'published', 'authors', 'owner', 'views', 'thumbnail'];
+		for (const prop of propsToExclude) {
+			delete modified[prop];
+		}
+		return modified;
+	},
+	excludeStubProps : (brew)=>{
+		const propsToExclude = ['text', 'textBin', 'renderer', 'pageCount'];
+		for (const prop of propsToExclude) {
+			brew[prop] = undefined;
+		}
+		return brew;
+	},
+	beforeNewSave : (account, brew)=>{
+		if(!brew.title) {
+			brew.title = api.getGoodBrewTitle(brew.text);
+		}
+
+		brew.authors = (account) ? [account.username] : [];
+		brew.text = api.mergeBrewText(brew);
+
+		_.defaults(brew, DEFAULT_BREW);
+	},
+	newGoogleBrew : async (account, brew, res)=>{
+		const oAuth2Client = GoogleActions.authCheck(account, res);
+
+		const newBrew = api.excludeGoogleProps(brew);
+
+		return await GoogleActions.newGoogleBrew(oAuth2Client, newBrew);
+	},
+	newBrew : async (req, res)=>{
+		const brew = req.body;
+		const { saveToGoogle } = req.query;
+
+		delete brew.editId;
+		delete brew.shareId;
+		delete brew.googleId;
+
+		api.beforeNewSave(req.account, brew);
+
+		const newHomebrew = new HomebrewModel(brew);
+		newHomebrew.editId = nanoid(12);
+		newHomebrew.shareId = nanoid(12);
+
+		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);
+				});
+			if(!googleId) return;
+			api.excludeStubProps(newHomebrew);
+			newHomebrew.googleId = googleId;
+		} else {
+			// Compress brew text to binary before saving
+			newHomebrew.textBin = zlib.deflateRawSync(newHomebrew.text);
+			// Delete the non-binary text field since it's not needed anymore
+			newHomebrew.text = undefined;
+		}
+
+		saved = await newHomebrew.save()
 			.catch((err)=>{
-				console.error(err);
-				res.status(500).send(err);
+				console.error(err, err.toString(), err.stack);
+				throw `Error while creating new brew, ${err.toString()}`;
 			});
-		if(!deleted) return;
+		if(!saved) return;
+		saved = saved.toObject();
+
+		res.status(200).send(saved);
+	},
+	updateBrew : async (req, res)=>{
+		// Initialize brew from request and body, destructure query params, and set the initial value for the after-save method
+		const brewFromClient = api.excludePropsFromUpdate(req.body);
+		const brewFromServer = req.brew;
+		if(brewFromServer.version && brewFromClient.version && brewFromServer.version > brewFromClient.version) {
+			console.log(`Version mismatch on brew ${brewFromClient.editId}`);
+			res.setHeader('Content-Type', 'application/json');
+			return res.status(409).send(JSON.stringify({ message: `The brew has been changed on a different device. Please save your changes elsewhere, refresh, and try again.` }));
+		}
+
+		let brew = _.assign(brewFromServer, brewFromClient);
+		const googleId = brew.googleId;
+		const { saveToGoogle, removeFromGoogle } = req.query;
+		let afterSave = async ()=>true;
+
+		brew.text = api.mergeBrewText(brew);
+
+		if(brew.googleId && removeFromGoogle) {
+			// If the google id exists and we're removing it from google, set afterSave to delete the google brew and mark the brew's google id as undefined
+			afterSave = async ()=>{
+				return await api.deleteGoogleBrew(req.account, googleId, brew.editId, res)
+					.catch((err)=>{
+						console.error(err);
+						res.status(err?.status || err?.response?.status || 500).send(err.message || err);
+					});
+			};
+
+			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);
+				});
+			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);
+				});
+			if(!updated) return;
+		}
+
+		if(brew.googleId) {
+			// If the google id exists after all those actions, exclude the props that are stored in google and aren't needed for rendering the brew items
+			api.excludeStubProps(brew);
+		} else {
+			// Compress brew text to binary before saving
+			brew.textBin = zlib.deflateRawSync(brew.text);
+			// Delete the non-binary text field since it's not needed anymore
+			brew.text = undefined;
+		}
+		brew.updatedAt = new Date();
+		brew.version = (brew.version || 1) + 1;
+
+		if(req.account) {
+			brew.authors = _.uniq(_.concat(brew.authors, req.account.username));
+			brew.invitedAuthors = _.uniq(_.filter(brew.invitedAuthors, (a)=>req.account.username !== a));
+		}
+
+		// define a function to catch our save errors
+		const saveError = (err)=>{
+			console.error(err);
+			res.status(err.status || 500).send(err.message || 'Unable to save brew to Homebrewery database');
+		};
+		let saved;
+		if(!brew._id) {
+			// if the brew does not have a stub id, create and save it, then write the new value back to the brew.
+			saved = await new HomebrewModel(brew).save().catch(saveError);
+		} else {
+			// if the brew does have a stub id, update it using the stub id as the key.
+			brew = _.assign(await HomebrewModel.findOne({ _id: brew._id }), brew);
+			saved = await brew.save()
+				.catch(saveError);
+		}
+		if(!saved) return;
+		// Call and wait for afterSave to complete
+		const after = await afterSave();
+		if(!after) return;
+
+		res.status(200).send(saved);
+	},
+	deleteGoogleBrew : async (account, id, editId, res)=>{
+		const auth = await GoogleActions.authCheck(account, res);
+		await GoogleActions.deleteGoogleBrew(auth, id, editId);
+		return true;
+	},
+	deleteBrew : async (req, res, next)=>{
+		// Delete an orphaned stub if its Google brew doesn't exist
+		try {
+			await api.getBrew('edit')(req, res, ()=>{});
+		} catch (err) {
+			const { id, googleId } = api.getId(req);
+			console.warn(`No google brew found for id ${googleId}, the stub with id ${id} will be deleted.`);
+			await HomebrewModel.deleteOne({ editId: id });
+			return next();
+		}
+
+		let brew = req.brew;
+		const { googleId, editId } = brew;
+		const account = req.account;
+		const isOwner = account && (brew.authors.length === 0 || brew.authors[0] === account.username);
+		// If the user is the owner and the file is saved to google, mark the google brew for deletion
+		const shouldDeleteGoogleBrew = googleId && isOwner;
+
+		if(brew._id) {
+			brew = _.assign(await HomebrewModel.findOne({ _id: brew._id }), brew);
+			if(account) {
+				// Remove current user as author
+				brew.authors = _.pull(brew.authors, account.username);
+			}
+
+			if(brew.authors.length === 0) {
+				// Delete brew if there are no authors left
+				await brew.remove()
+					.catch((err)=>{
+						console.error(err);
+						throw { status: 500, message: 'Error while removing' };
+					});
+			} else {
+				if(shouldDeleteGoogleBrew) {
+					// When there are still authors remaining, we delete the google brew but store the full brew in the Homebrewery database
+					brew.googleId = undefined;
+					brew.textBin = zlib.deflateRawSync(brew.text);
+					brew.text = undefined;
+				}
+				brew.markModified('authors'); //Mongo will not properly update arrays without markModified()
+				await brew.save()
+					.catch((err)=>{
+						throw { status: 500, message: err };
+					});
+			}
+		}
+		if(shouldDeleteGoogleBrew) {
+			const deleted = await api.deleteGoogleBrew(account, googleId, editId, res)
+				.catch((err)=>{
+					console.error(err);
+					res.status(500).send(err);
+				});
+			if(!deleted) return;
+		}
+
+		res.status(204).send();
 	}
-
-	res.status(204).send();
 };
 
-router.post('/api', asyncHandler(newBrew));
-router.put('/api/:id', asyncHandler(getBrew('edit', true)), asyncHandler(updateBrew));
-router.put('/api/update/:id', asyncHandler(getBrew('edit', true)), asyncHandler(updateBrew));
-router.delete('/api/:id', asyncHandler(deleteBrew));
-router.get('/api/remove/:id', asyncHandler(deleteBrew));
+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));
 
-module.exports = {
-	homebrewApi : router,
-	getBrew
-};
+module.exports = api;

server/homebrew.api.spec.js

@@ -0,0 +1,758 @@
+/* eslint-disable max-lines */
+
+describe('Tests for api', ()=>{
+	let api;
+	let google;
+	let model;
+	let hbBrew;
+	let googleBrew;
+	let res;
+
+	let modelBrew;
+	let saveFunc;
+	let removeFunc;
+	let markModifiedFunc;
+	let saved;
+
+	beforeEach(()=>{
+		saved = undefined;
+		saveFunc = jest.fn(async function() {
+			saved = { ...this, _id: '1' };
+			return saved;
+		});
+		removeFunc = jest.fn(async function() {});
+		markModifiedFunc = jest.fn(()=>true);
+
+		modelBrew = (brew)=>({
+			...brew,
+			save         : saveFunc,
+			remove       : removeFunc,
+			markModified : markModifiedFunc,
+			toObject     : function() {
+				delete this.save;
+				delete this.toObject;
+				delete this.remove;
+				delete this.markModified;
+				return this;
+			}
+		});
+
+		google = require('./googleActions.js');
+		model = require('./homebrew.model.js').model;
+
+		jest.mock('./googleActions.js');
+		google.authCheck = jest.fn(()=>'client');
+		google.newGoogleBrew = jest.fn(()=>'id');
+		google.deleteGoogleBrew = jest.fn(()=>true);
+
+		jest.mock('./homebrew.model.js');
+		model.mockImplementation((brew)=>modelBrew(brew));
+
+		res = {
+			status : jest.fn(()=>res),
+			send   : jest.fn(()=>{})
+		};
+
+		api = require('./homebrew.api');
+
+		hbBrew = {
+			text        : `brew text`,
+			style       : 'hello yes i am css',
+			title       : 'some title',
+			description : 'this is a description',
+			tags        : ['something', 'fun'],
+			systems     : ['D&D 5e'],
+			renderer    : 'v3',
+			theme       : 'phb',
+			published   : true,
+			authors     : ['1', '2'],
+			owner       : '1',
+			thumbnail   : '',
+			_id         : 'mongoid',
+			editId      : 'abcdefg',
+			shareId     : 'hijklmnop',
+			views       : 1,
+			lastViewed  : new Date(),
+			version     : 1,
+			pageCount   : 1,
+			textBin     : '',
+			views       : 0
+		};
+		googleBrew = {
+			...hbBrew,
+			googleId : '12345'
+		};
+	});
+
+	afterEach(()=>{
+		jest.restoreAllMocks();
+	});
+
+	describe('getId', ()=>{
+		it('should return only id if google id is not present', ()=>{
+			const { id, googleId } = api.getId({
+				params : {
+					id : 'abcdefgh'
+				}
+			});
+
+			expect(id).toEqual('abcdefgh');
+			expect(googleId).toBeUndefined();
+		});
+
+		it('should return id and google id from request body', ()=>{
+			const { id, googleId } = api.getId({
+				params : {
+					id : 'abcdefgh'
+				},
+				body : {
+					googleId : '12345'
+				}
+			});
+
+			expect(id).toEqual('abcdefgh');
+			expect(googleId).toEqual('12345');
+		});
+
+		it('should return id and google id from params', ()=>{
+			const { id, googleId } = api.getId({
+				params : {
+					id : '123456789012abcdefghijkl'
+				}
+			});
+
+			expect(id).toEqual('abcdefghijkl');
+			expect(googleId).toEqual('123456789012');
+		});
+	});
+
+	describe('getBrew', ()=>{
+		const toBrewPromise = (brew)=>new Promise((res)=>res({ toObject: ()=>brew }));
+		const notFoundError = 'Brew not found in Homebrewery database or Google Drive';
+
+		it('returns middleware', ()=>{
+			const getFn = api.getBrew('share');
+			expect(getFn).toBeInstanceOf(Function);
+		});
+
+		it('should fetch from mongoose', async ()=>{
+			const testBrew = { title: 'test brew', authors: [] };
+			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);
+
+			expect(req.brew).toEqual(testBrew);
+			expect(next).toHaveBeenCalled();
+			expect(api.getId).toHaveBeenCalledWith(req);
+			expect(model.get).toHaveBeenCalledWith({ shareId: '1' });
+		});
+
+		it('should handle mongoose error', async ()=>{
+			api.getId = jest.fn(()=>({ id: '1', googleId: undefined }));
+			model.get = jest.fn(()=>new Promise((_, rej)=>rej('Unable to find brew')));
+
+			const fn = api.getBrew('share', false);
+			const req = { brew: {} };
+			const next = jest.fn();
+			let err;
+			try {
+				await fn(req, null, next);
+			} catch (e) {
+				err = e;
+			}
+
+			expect(err).toEqual(notFoundError);
+			expect(req.brew).toEqual({});
+			expect(next).not.toHaveBeenCalled();
+			expect(api.getId).toHaveBeenCalledWith(req);
+			expect(model.get).toHaveBeenCalledWith({ shareId: '1' });
+		});
+
+		it('changes tags from string to array', async ()=>{
+			const testBrew = { title: 'test brew', authors: [], tags: '' };
+			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);
+
+			expect(req.brew.tags).toEqual([]);
+			expect(next).toHaveBeenCalled();
+		});
+
+		it('throws if invalid author', async ()=>{
+			api.getId = jest.fn(()=>({ id: '1', googleId: undefined }));
+			model.get = jest.fn(()=>toBrewPromise({ title: 'test brew', authors: ['a'] }));
+
+			const fn = api.getBrew('edit', true);
+			const req = { brew: {} };
+
+			let err;
+			try {
+				await fn(req, null, null);
+			} catch (e) {
+				err = e;
+			}
+
+			expect(err).toEqual(`The current logged in user does not have editor access to this brew.
+
+If you believe you should have access to this brew, ask the file owner to invite you as an author by opening the brew, viewing the Properties tab, and adding your username to the "invited authors" list. You can then try to access this document again.`);
+		});
+
+		it('does not throw if no authors', async ()=>{
+			api.getId = jest.fn(()=>({ id: '1', googleId: undefined }));
+			model.get = jest.fn(()=>toBrewPromise({ title: 'test brew', authors: [] }));
+
+			const fn = api.getBrew('edit', true);
+			const req = { brew: {} };
+			const next = jest.fn();
+			await fn(req, null, next);
+
+			expect(next).toHaveBeenCalled();
+			expect(req.brew.title).toEqual('test brew');
+			expect(req.brew.authors).toEqual([]);
+		});
+
+		it('does not throw if valid author', async ()=>{
+			api.getId = jest.fn(()=>({ id: '1', googleId: undefined }));
+			model.get = jest.fn(()=>toBrewPromise({ title: 'test brew', authors: ['a'] }));
+
+			const fn = api.getBrew('edit', true);
+			const req = { brew: {}, account: { username: 'a' } };
+			const next = jest.fn();
+			await fn(req, null, next);
+
+			expect(next).toHaveBeenCalled();
+			expect(req.brew.title).toEqual('test brew');
+			expect(req.brew.authors).toEqual(['a']);
+		});
+
+		it('fetches google brew if needed', async()=>{
+			const stubBrew = { title: 'test brew', authors: ['a'] };
+			const googleBrew = { title: 'test google brew', text: 'brew text' };
+			api.getId = jest.fn(()=>({ id: '1', googleId: '2' }));
+			model.get = jest.fn(()=>toBrewPromise(stubBrew));
+			google.getGoogleBrew = jest.fn(()=>new Promise((res)=>res(googleBrew)));
+
+			const fn = api.getBrew('share', false);
+			const req = { brew: {} };
+			const next = jest.fn();
+			await fn(req, null, next);
+
+			expect(req.brew).toEqual({
+				title       : 'test google brew',
+				authors     : ['a'],
+				text        : 'brew text',
+				stubbed     : true,
+				description : '',
+				editId      : undefined,
+				pageCount   : 1,
+				published   : false,
+				renderer    : 'legacy',
+				shareId     : undefined,
+				systems     : [],
+				tags        : [],
+				theme       : '5ePHB',
+				thumbnail   : '',
+				textBin     : undefined,
+				version     : undefined,
+				createdAt   : undefined,
+				gDrive      : false,
+				style       : undefined,
+				trashed     : false,
+				updatedAt   : undefined,
+				views       : 0
+			});
+			expect(next).toHaveBeenCalled();
+			expect(api.getId).toHaveBeenCalledWith(req);
+			expect(model.get).toHaveBeenCalledWith({ shareId: '1' });
+			expect(google.getGoogleBrew).toHaveBeenCalledWith('2', '1', 'share');
+		});
+	});
+
+	describe('mergeBrewText', ()=>{
+		it('should set metadata and no style if it is not present', ()=>{
+			const result = api.mergeBrewText({
+				text        : `brew`,
+				title       : 'some title',
+				description : 'this is a description',
+				tags        : ['something', 'fun'],
+				systems     : ['D&D 5e'],
+				renderer    : 'v3',
+				theme       : 'phb',
+				googleId    : '12345'
+			});
+
+			expect(result).toEqual(`\`\`\`metadata
+title: some title
+description: this is a description
+tags:
+  - something
+  - fun
+systems:
+  - D&D 5e
+renderer: v3
+theme: phb
+
+\`\`\`
+
+brew`);
+		});
+
+		it('should set metadata and style', ()=>{
+			const result = api.mergeBrewText({
+				text        : `brew`,
+				style       : 'hello yes i am css',
+				title       : 'some title',
+				description : 'this is a description',
+				tags        : ['something', 'fun'],
+				systems     : ['D&D 5e'],
+				renderer    : 'v3',
+				theme       : 'phb',
+				googleId    : '12345'
+			});
+
+			expect(result).toEqual(`\`\`\`metadata
+title: some title
+description: this is a description
+tags:
+  - something
+  - fun
+systems:
+  - D&D 5e
+renderer: v3
+theme: phb
+
+\`\`\`
+
+\`\`\`css
+hello yes i am css
+\`\`\`
+
+brew`);
+		});
+	});
+
+	describe('exclusion methods', ()=>{
+		it('excludePropsFromUpdate removes the correct keys', ()=>{
+			const sent = Object.assign({}, googleBrew);
+			const result = api.excludePropsFromUpdate(sent);
+
+			expect(sent).toEqual(googleBrew);
+			expect(result._id).toBeUndefined();
+			expect(result.views).toBeUndefined();
+			expect(result.lastViewed).toBeUndefined();
+		});
+
+		it('excludeGoogleProps removes the correct keys', ()=>{
+			const sent = Object.assign({}, googleBrew);
+			const result = api.excludeGoogleProps(sent);
+
+			expect(sent).toEqual(googleBrew);
+			expect(result.tags).toBeUndefined();
+			expect(result.systems).toBeUndefined();
+			expect(result.published).toBeUndefined();
+			expect(result.authors).toBeUndefined();
+			expect(result.owner).toBeUndefined();
+			expect(result.views).toBeUndefined();
+			expect(result.thumbnail).toBeUndefined();
+			expect(result.version).toBeUndefined();
+		});
+
+		it('excludeStubProps removes the correct keys from the original object', ()=>{
+			const sent = Object.assign({}, googleBrew);
+			const result = api.excludeStubProps(sent);
+
+			expect(sent).not.toEqual(googleBrew);
+			expect(result.text).toBeUndefined();
+			expect(result.textBin).toBeUndefined();
+			expect(result.renderer).toBeUndefined();
+			expect(result.pageCount).toBeUndefined();
+		});
+	});
+
+	describe('beforeNewSave', ()=>{
+		it('sets the title if none', ()=>{
+			const brew = {
+				...hbBrew,
+				title : undefined
+			};
+			api.beforeNewSave({}, brew);
+
+			expect(brew.title).toEqual('brew text');
+		});
+
+		it('does not override the title if present', ()=>{
+			const brew = {
+				...hbBrew,
+				title : 'test'
+			};
+			api.beforeNewSave({}, brew);
+
+			expect(brew.title).toEqual('test');
+		});
+
+		it('does not set authors if account missing username', ()=>{
+			api.beforeNewSave({}, hbBrew);
+
+			expect(hbBrew.authors).toEqual([]);
+		});
+
+		it('sets authors if account has username', ()=>{
+			api.beforeNewSave({ username: 'hi' }, hbBrew);
+
+			expect(hbBrew.authors).toEqual(['hi']);
+		});
+
+		it('merges brew text', ()=>{
+			api.mergeBrewText = jest.fn(()=>'merged');
+			api.beforeNewSave({}, hbBrew);
+
+			expect(api.mergeBrewText).toHaveBeenCalled();
+			expect(hbBrew.text).toEqual('merged');
+		});
+	});
+
+	describe('newGoogleBrew', ()=>{
+		it('should call the correct methods', ()=>{
+			api.excludeGoogleProps = jest.fn(()=>'newBrew');
+
+			const acct = { username: 'test' };
+			const brew = { title: 'test title' };
+			api.newGoogleBrew(acct, brew, res);
+
+			expect(google.authCheck).toHaveBeenCalledWith(acct, res);
+			expect(api.excludeGoogleProps).toHaveBeenCalledWith(brew);
+			expect(google.newGoogleBrew).toHaveBeenCalledWith('client', 'newBrew');
+		});
+	});
+
+	describe('newBrew', ()=>{
+		it('should set up a default brew via Homebrew model', async ()=>{
+			await api.newBrew({ body: { text: 'asdf' }, query: {}, account: { username: 'test user' } }, res);
+
+			expect(res.status).toHaveBeenCalledWith(200);
+			expect(res.send).toHaveBeenCalledWith({
+				_id         : '1',
+				authors     : ['test user'],
+				createdAt   : undefined,
+				description : '',
+				editId      : expect.any(String),
+				gDrive      : false,
+				pageCount   : 1,
+				published   : false,
+				renderer    : 'V3',
+				shareId     : expect.any(String),
+				style       : undefined,
+				systems     : [],
+				tags        : [],
+				text        : undefined,
+				textBin     : expect.objectContaining({}),
+				theme       : '5ePHB',
+				thumbnail   : '',
+				title       : 'asdf',
+				trashed     : false,
+				updatedAt   : undefined,
+				views       : 0
+			});
+		});
+
+		it('should remove edit/share/google ids', async ()=>{
+			await api.newBrew({ body: { editId: '1234', shareId: '1234', googleId: '1234', text: 'asdf', title: '' }, query: {} }, res);
+
+			expect(res.status).toHaveBeenCalledWith(200);
+			expect(res.send).toHaveBeenCalled();
+			const sent = res.send.mock.calls[0][0];
+			expect(sent.editId).not.toEqual('1234');
+			expect(sent.shareId).not.toEqual('1234');
+			expect(sent.googleId).toBeUndefined();
+		});
+
+		it('should handle mongo error', async ()=>{
+			saveFunc = jest.fn(async function() {
+				throw 'err';
+			});
+			model.mockImplementation((brew)=>modelBrew(brew));
+
+			let err;
+			try {
+				await api.newBrew({ body: { editId: '1234', shareId: '1234', googleId: '1234', text: 'asdf', title: '' }, query: {} }, res);
+			} catch (e) {
+				err = e;
+			}
+
+			expect(res.send).not.toHaveBeenCalled();
+			expect(err).not.toBeUndefined();
+		});
+
+		it('should save to google if requested', async()=>{
+			await api.newBrew({ body: { text: 'asdf', title: '' }, query: { saveToGoogle: true }, account: { username: 'test user' } }, res);
+
+			expect(google.newGoogleBrew).toHaveBeenCalled();
+			expect(res.status).toHaveBeenCalledWith(200);
+			expect(res.send).toHaveBeenCalledWith({
+				_id         : '1',
+				authors     : ['test user'],
+				createdAt   : undefined,
+				description : '',
+				editId      : expect.any(String),
+				gDrive      : false,
+				pageCount   : undefined,
+				published   : false,
+				renderer    : undefined,
+				shareId     : expect.any(String),
+				googleId    : expect.any(String),
+				style       : undefined,
+				systems     : [],
+				tags        : [],
+				text        : undefined,
+				textBin     : undefined,
+				theme       : '5ePHB',
+				thumbnail   : '',
+				title       : 'asdf',
+				trashed     : false,
+				updatedAt   : undefined,
+				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', ()=>{
+		it('should check auth and delete brew', async ()=>{
+			const result = await api.deleteGoogleBrew({ username: 'test user' }, 'id', 'editId', res);
+
+			expect(result).toBe(true);
+			expect(google.authCheck).toHaveBeenCalledWith({ username: 'test user' }, expect.objectContaining({}));
+			expect(google.deleteGoogleBrew).toHaveBeenCalledWith('client', 'id', 'editId');
+		});
+	});
+
+	describe('deleteBrew', ()=>{
+		it('should handle case where fetching the brew returns an error', async ()=>{
+			api.getBrew = jest.fn(()=>async ()=>{ throw 'err'; });
+			api.getId = jest.fn(()=>({ id: '1', googleId: '2' }));
+			model.deleteOne = jest.fn(async ()=>{});
+			const next = jest.fn(()=>{});
+
+			await api.deleteBrew(null, null, next);
+
+			expect(next).toHaveBeenCalled();
+			expect(model.deleteOne).toHaveBeenCalledWith({ editId: '1' });
+		});
+
+		it('should delete if no authors', async ()=>{
+			const brew = {
+				...hbBrew,
+				authors : []
+			};
+			api.getBrew = jest.fn(()=>async (req)=>{
+				req.brew = brew;
+			});
+			model.findOne = jest.fn(async ()=>modelBrew(brew));
+			const req = {};
+
+			await api.deleteBrew(req, res);
+
+			expect(api.getBrew).toHaveBeenCalled();
+			expect(model.findOne).toHaveBeenCalled();
+			expect(removeFunc).toHaveBeenCalled();
+		});
+
+		it('should throw on delete error', async ()=>{
+			const brew = {
+				...hbBrew,
+				authors : []
+			};
+			api.getBrew = jest.fn(()=>async (req)=>{
+				req.brew = brew;
+			});
+			model.findOne = jest.fn(async ()=>modelBrew(brew));
+			removeFunc = jest.fn(async ()=>{ throw 'err'; });
+			const req = {};
+
+			let err;
+			try {
+				await api.deleteBrew(req, res);
+			} catch (e) {
+				err = e;
+			}
+
+			expect(err).not.toBeUndefined();
+			expect(api.getBrew).toHaveBeenCalled();
+			expect(model.findOne).toHaveBeenCalled();
+			expect(removeFunc).toHaveBeenCalled();
+		});
+
+		it('should delete when one author', async ()=>{
+			const brew = {
+				...hbBrew,
+				authors : ['test']
+			};
+			api.getBrew = jest.fn(()=>async (req)=>{
+				req.brew = brew;
+			});
+			model.findOne = jest.fn(async ()=>modelBrew(brew));
+			const req = { account: { username: 'test' } };
+
+			await api.deleteBrew(req, res);
+
+			expect(api.getBrew).toHaveBeenCalled();
+			expect(model.findOne).toHaveBeenCalled();
+			expect(removeFunc).toHaveBeenCalled();
+		});
+
+		it('should remove one author when multiple present', async ()=>{
+			const brew = {
+				...hbBrew,
+				authors : ['test', 'test2']
+			};
+			api.getBrew = jest.fn(()=>async (req)=>{
+				req.brew = brew;
+			});
+			model.findOne = jest.fn(async ()=>modelBrew(brew));
+			const req = { account: { username: 'test' } };
+
+			await api.deleteBrew(req, res);
+
+			expect(api.getBrew).toHaveBeenCalled();
+			expect(markModifiedFunc).toHaveBeenCalled();
+			expect(model.findOne).toHaveBeenCalled();
+			expect(removeFunc).not.toHaveBeenCalled();
+			expect(saveFunc).toHaveBeenCalled();
+			expect(saved.authors).toEqual(['test2']);
+		});
+
+		it('should handle save error', async ()=>{
+			const brew = {
+				...hbBrew,
+				authors : ['test', 'test2']
+			};
+			api.getBrew = jest.fn(()=>async (req)=>{
+				req.brew = brew;
+			});
+			model.findOne = jest.fn(async ()=>modelBrew(brew));
+			saveFunc = jest.fn(async ()=>{ throw 'err'; });
+			const req = { account: { username: 'test' } };
+
+			let err;
+			try {
+				await api.deleteBrew(req, res);
+			} catch (e) {
+				err = e;
+			}
+
+			expect(err).not.toBeUndefined();
+			expect(api.getBrew).toHaveBeenCalled();
+			expect(model.findOne).toHaveBeenCalled();
+			expect(removeFunc).not.toHaveBeenCalled();
+			expect(saveFunc).toHaveBeenCalled();
+		});
+
+		it('should delete google brew', async ()=>{
+			const brew = {
+				...googleBrew,
+				authors : ['test']
+			};
+			api.getBrew = jest.fn(()=>async (req)=>{
+				req.brew = brew;
+			});
+			model.findOne = jest.fn(async ()=>modelBrew(brew));
+			api.deleteGoogleBrew = jest.fn(async ()=>true);
+			const req = { account: { username: 'test' } };
+
+			await api.deleteBrew(req, res);
+
+			expect(api.getBrew).toHaveBeenCalled();
+			expect(model.findOne).toHaveBeenCalled();
+			expect(removeFunc).toHaveBeenCalled();
+			expect(api.deleteGoogleBrew).toHaveBeenCalled();
+		});
+
+		it('should handle google brew delete error', async ()=>{
+			const brew = {
+				...googleBrew,
+				authors : ['test']
+			};
+			api.getBrew = jest.fn(()=>async (req)=>{
+				req.brew = brew;
+			});
+			model.findOne = jest.fn(async ()=>modelBrew(brew));
+			api.deleteGoogleBrew = jest.fn(async ()=>{
+				 throw 'err';
+			});
+			const req = { account: { username: 'test' } };
+
+			await api.deleteBrew(req, res);
+
+			expect(api.getBrew).toHaveBeenCalled();
+			expect(model.findOne).toHaveBeenCalled();
+			expect(removeFunc).toHaveBeenCalled();
+			expect(api.deleteGoogleBrew).toHaveBeenCalled();
+		});
+
+		it('should delete google brew and retain stub when multiple authors and owner request deletion', async ()=>{
+			const brew = {
+				...googleBrew,
+				authors : ['test', 'test2']
+			};
+			api.getBrew = jest.fn(()=>async (req)=>{
+				req.brew = brew;
+			});
+			model.findOne = jest.fn(async ()=>modelBrew(brew));
+			api.deleteGoogleBrew = jest.fn(async ()=>true);
+			const req = { account: { username: 'test' } };
+
+			await api.deleteBrew(req, res);
+
+			expect(api.getBrew).toHaveBeenCalled();
+			expect(markModifiedFunc).toHaveBeenCalled();
+			expect(model.findOne).toHaveBeenCalled();
+			expect(removeFunc).not.toHaveBeenCalled();
+			expect(api.deleteGoogleBrew).toHaveBeenCalled();
+			expect(saveFunc).toHaveBeenCalled();
+			expect(saved.authors).toEqual(['test2']);
+			expect(saved.googleId).toEqual(undefined);
+			expect(saved.text).toEqual(undefined);
+			expect(saved.textBin).not.toEqual(undefined);
+		});
+
+		it('should retain google brew and update stub when multiple authors and extra author requests deletion', async ()=>{
+			const brew = {
+				...googleBrew,
+				authors : ['test', 'test2']
+			};
+			api.getBrew = jest.fn(()=>async (req)=>{
+				req.brew = brew;
+			});
+			model.findOne = jest.fn(async ()=>modelBrew(brew));
+			api.deleteGoogleBrew = jest.fn(async ()=>true);
+			const req = { account: { username: 'test2' } };
+
+			await api.deleteBrew(req, res);
+
+			expect(api.getBrew).toHaveBeenCalled();
+			expect(model.findOne).toHaveBeenCalled();
+			expect(removeFunc).not.toHaveBeenCalled();
+			expect(api.deleteGoogleBrew).not.toHaveBeenCalled();
+			expect(saveFunc).toHaveBeenCalled();
+			expect(saved.authors).toEqual(['test']);
+			expect(saved.googleId).toEqual(brew.googleId);
+		});
+	});
+});

server/homebrew.model.js

@@ -12,13 +12,14 @@ const HomebrewSchema = mongoose.Schema({
 	textBin   : { type: Buffer },
 	pageCount : { type: Number, default: 1 },
 
-	description : { type: String, default: '' },
-	tags        : [String],
-	systems     : [String],
-	renderer    : { type: String, default: '' },
-	authors     : [String],
-	published   : { type: Boolean, default: false },
-	thumbnail   : { type: String, default: '' },
+	description    : { type: String, default: '' },
+	tags           : [String],
+	systems        : [String],
+	renderer       : { type: String, default: '' },
+	authors        : [String],
+	invitedAuthors : [String],
+	published      : { type: Boolean, default: false },
+	thumbnail      : { type: String, default: '' },
 
 	createdAt  : { type: Date, default: Date.now },
 	updatedAt  : { type: Date, default: Date.now },
@@ -46,8 +47,6 @@ HomebrewSchema.statics.get = function(query, fields=null){
 				unzipped = zlib.inflateRawSync(brews[0].textBin);
 				brews[0].text = unzipped.toString();
 			}
-			if(!brews[0].renderer)
-				brews[0].renderer = 'legacy';
 			return resolve(brews[0]);
 		});
 	});

server/middleware/check-client-version.js

@@ -0,0 +1,12 @@
+module.exports = (req, res, next)=>{
+	const userVersion = req.get('Homebrewery-Version');
+	const version = require('../../package.json').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}.`
+		});
+	}
+
+	next();
+};

shared/naturalcrit/splitPane/splitPane.less

@@ -22,7 +22,7 @@
 			vertical-align : middle;
 			text-align     : center;
 			i{
-				display   : block;
+				display   : block !important;
 				margin    : 10px 0px;
 				font-size : 6px;
 				color     : #666;

themes/Legacy/5ePHB/style.less

@@ -1,497 +1,499 @@
-@import (less) './themes/fonts/5e legacy/fonts.less';
-@import (less) './themes/assets/assets.less';
-@import (less) './themes/phb.depricated.less';
-//Colors
-@background            : #EEE5CE; // Light parchment
-@noteGreen             : #e0e5c1; // Pastel green
-@headerUnderline       : #c9ad6a; // Gold
-@horizontalRule        : #9c2b1b; // Maroon
-@headerText            : #58180D; // Dark maroon
-@monsterStatBackground : #FDF1DC; // Lighter parchment
-@captionText           : #766649; // Brown
-@page { margin: 0; }
-body {
-	counter-reset : phb-page-numbers;
-}
-*{
-	-webkit-print-color-adjust : exact;
-}
-.useSansSerif(){
-	font-family : ScalySans;
-	em{
+@layer Legacy_5ePHB {
+	@import (less) './themes/fonts/5e legacy/fonts.less';
+	@import (less) './themes/assets/assets.less';
+	@import (less) './themes/phb.depricated.less';
+	//Colors
+	@background            : #EEE5CE; // Light parchment
+	@noteGreen             : #e0e5c1; // Pastel green
+	@headerUnderline       : #c9ad6a; // Gold
+	@horizontalRule        : #9c2b1b; // Maroon
+	@headerText            : #58180D; // Dark maroon
+	@monsterStatBackground : #FDF1DC; // Lighter parchment
+	@captionText           : #766649; // Brown
+	@page { margin: 0; }
+	body {
+		counter-reset : phb-page-numbers;
+	}
+	*{
+		-webkit-print-color-adjust : exact;
+	}
+	.useSansSerif(){
 		font-family : ScalySans;
-		font-style  : italic;
-	}
-	strong{
-		font-family    : ScalySans;
-		font-weight    : 800;
-		letter-spacing : -0.02em;
-	}
-}
-.useColumns(@multiplier : 1){
-	column-count         : 2;
-	column-fill          : auto;
-	column-gap           : 1cm;
-	column-width         : 8cm * @multiplier;
-	-webkit-column-count : 2;
-	-moz-column-count    : 2;
-	-webkit-column-width : 8cm * @multiplier;
-	-moz-column-width    : 8cm * @multiplier;
-	-webkit-column-gap   : 1cm;
-	-moz-column-gap      : 1cm;
-}
-.phb{
-	.useColumns();
-	counter-increment : phb-page-numbers;
-	position          : relative;
-	z-index           : 15;
-	box-sizing        : border-box;
-	overflow          : hidden;
-	height            : 279.4mm;
-	width             : 215.9mm;
-	padding           : 1.0cm 1.7cm;
-	padding-bottom    : 1.5cm;
-	background-color  : @background;
-	background-image  : @backgroundImage;
-	font-family       : BookSanity;
-	font-size         : 0.317cm;
-	text-rendering    : optimizeLegibility;
-	page-break-before : always;
-	page-break-after  : always;
-	contain           : size;
-	//*****************************
-	// *            BASE
-	// *****************************/
-	p{
-		padding-bottom : 0.8em;
-		line-height    : 1.269em;
-		&+p{
-			margin-top : -0.8em;
+		em{
+			font-family : ScalySans;
+			font-style  : italic;
+		}
+		strong{
+			font-family    : ScalySans;
+			font-weight    : 800;
+			letter-spacing : -0.02em;
 		}
 	}
-	ul{
-		margin-bottom       : 0.8em;
-		padding-left        : 1.4em;
-		line-height         : 1.269em;
-		list-style-position : outside;
-		list-style-type     : disc;
+	.useColumns(@multiplier : 1){
+		column-count         : 2;
+		column-fill          : auto;
+		column-gap           : 1cm;
+		column-width         : 8cm * @multiplier;
+		-webkit-column-count : 2;
+		-moz-column-count    : 2;
+		-webkit-column-width : 8cm * @multiplier;
+		-moz-column-width    : 8cm * @multiplier;
+		-webkit-column-gap   : 1cm;
+		-moz-column-gap      : 1cm;
 	}
-	ol{
-		margin-bottom       : 0.8em;
-		padding-left        : 1.4em;
-		line-height         : 1.269em;
-		list-style-position : outside;
-		list-style-type     : decimal;
-	}
-	//Indents after p or lists
-	p+p, ul+p, ol+p{
-		text-indent : 1em;
-	}
-	img{
-		z-index : -1;
-	}
-	strong{
-		font-weight    : bold;
-		letter-spacing : 0.03em;
-	}
-	em{
-		font-style : italic;
-	}
-	sup{
-		vertical-align : super;
-		font-size      : smaller;
-		line-height    : 0;
-	}
-	sub{
-		vertical-align : sub;
-		font-size      : smaller;
-		line-height    : 0;
-	}
-	//*****************************
-	// *           HEADERS
-	// *****************************/
-	h1,h2,h3,h4{
-		margin-top    : 0.2em;
-		margin-bottom : 0.2em;
-		font-family   : MrJeeves;
-		font-weight   : 800;
-		color         : @headerText;
-	}
-	h1{
-		column-span         : all;
-		font-size           : 0.987cm;
-		-webkit-column-span : all;
-		-moz-column-span    : all;
-		&+p::first-letter{
-			float       : left;
-			font-family : Solberry;
-			font-size   : 10em;
-			color       : #222;
-			line-height : 0.795em;
-		}
-	}
-	h2{
-		font-size : 0.705cm;
-	}
-	h3{
-		font-size     : 0.529cm;
-		border-bottom : 2px solid @headerUnderline;
-	}
-	h4{
-		margin-bottom : 0.00em;
-		font-size     : 0.458cm;
-	}
-	h5{
-		margin-bottom : 0.2em;
-		font-family   : ScalySansSmallCaps;
-		font-size     : 0.423cm;
-		font-weight   : 900;
-	}
-	//*****************************
-	// *          TABLE
-	// *****************************/
-	table{
-		.useSansSerif();
-		width         : 100%;
-		margin-bottom : 1em;
-		font-size     : 10pt;
-		thead{
-			display: table-row-group;
-			font-weight : 800;
-			th{
-				vertical-align : bottom;
-				padding-bottom : 0.3em;
-				padding-right  : 0.1em;
-				padding-left   : 0.1em;
-			}
-		}
-		tbody{
-			tr{
-				td{
-					padding : 0.3em 0.1em;
-				}
-				&:nth-child(odd){
-					background-color : @noteGreen;
-				}
-			}
-		}
-	}
-	//*****************************
-	// *            NOTE
-	// *****************************/
-	blockquote{
-		.useSansSerif();
-		box-sizing          : border-box;
-		margin-bottom       : 1em;
-		padding             : 5px 10px;
-		background-color    : @noteGreen;
-		border-style        : solid;
-		border-width        : 11px;
-		border-image        : @noteBorderImage 11;
-		border-image-outset : 9px 0px;
-		box-shadow          : 1px 4px 14px #888;
-		p, ul{
-			font-size   : 0.352cm;
-			line-height : 1.083em;
-		}
-	}
-	//If a note starts a column, give it space at the top to render border
-	pre+blockquote, h2+blockquote, h3+blockquote, h4+blockquote, h5+blockquote {
-		margin-top : 13px;
-	}
-	//*****************************
-	// *    MONSTER STAT BLOCK
-	// *****************************/
-	hr+blockquote{
-		position         : relative;
-		padding-top      : 15px;
-		background-color : @monsterStatBackground;
-		border-style     : solid;
-		border-width     : 10px;
-		border-image     : @monsterBorderImageLegacy 10;
-		h2{
-			margin-top    : -8px;
-			margin-bottom : 0px;
+	.phb{
+		.useColumns();
+		counter-increment : phb-page-numbers;
+		position          : relative;
+		z-index           : 15;
+		box-sizing        : border-box;
+		overflow          : hidden;
+		height            : 279.4mm;
+		width             : 215.9mm;
+		padding           : 1.0cm 1.7cm;
+		padding-bottom    : 1.5cm;
+		background-color  : @background;
+		background-image  : @backgroundImage;
+		font-family       : BookSanity;
+		font-size         : 0.317cm;
+		text-rendering    : optimizeLegibility;
+		page-break-before : always;
+		page-break-after  : always;
+		contain           : size;
+		//*****************************
+		// *            BASE
+		// *****************************/
+		p{
+			padding-bottom : 0.8em;
+			line-height    : 1.269em;
 			&+p{
-				padding-bottom : 0px;
+				margin-top : -0.8em;
 			}
 		}
-		h3{
-			font-family   : ScalySans;
-			font-weight   : 400;
-			border-bottom : 1px solid @headerText;
-		}
-		hr+ul{
-			color : @headerText;
-		}
 		ul{
-			.useSansSerif();
-			padding-left : 1em;
-			font-size    : 0.352cm;
+			margin-bottom       : 0.8em;
+			padding-left        : 1.4em;
+			line-height         : 1.269em;
+			list-style-position : outside;
+			list-style-type     : disc;
 		}
-		// Monster Ability table
-		hr+table{
-			margin              : 0;
-			background-color    : transparent;
-			border-style        : none;
-			border-image        : none;
+		ol{
+			margin-bottom       : 0.8em;
+			padding-left        : 1.4em;
+			line-height         : 1.269em;
+			list-style-position : outside;
+			list-style-type     : decimal;
+		}
+		//Indents after p or lists
+		p+p, ul+p, ol+p{
+			text-indent : 1em;
+		}
+		img{
+			z-index : -1;
+		}
+		strong{
+			font-weight    : bold;
+			letter-spacing : 0.03em;
+		}
+		em{
+			font-style : italic;
+		}
+		sup{
+			vertical-align : super;
+			font-size      : smaller;
+			line-height    : 0;
+		}
+		sub{
+			vertical-align : sub;
+			font-size      : smaller;
+			line-height    : 0;
+		}
+		//*****************************
+		// *           HEADERS
+		// *****************************/
+		h1,h2,h3,h4{
+			margin-top    : 0.2em;
+			margin-bottom : 0.2em;
+			font-family   : MrJeeves;
+			font-weight   : 800;
+			color         : @headerText;
+		}
+		h1{
+			column-span         : all;
+			font-size           : 0.987cm;
+			-webkit-column-span : all;
+			-moz-column-span    : all;
+			&+p::first-letter{
+				float       : left;
+				font-family : Solberry;
+				font-size   : 10em;
+				color       : #222;
+				line-height : 0.795em;
+			}
+		}
+		h2{
+			font-size : 0.705cm;
+		}
+		h3{
+			font-size     : 0.529cm;
+			border-bottom : 2px solid @headerUnderline;
+		}
+		h4{
+			margin-bottom : 0.00em;
+			font-size     : 0.458cm;
+		}
+		h5{
+			margin-bottom : 0.2em;
+			font-family   : ScalySansSmallCaps;
+			font-size     : 0.423cm;
+			font-weight   : 900;
+		}
+		//*****************************
+		// *          TABLE
+		// *****************************/
+		table{
+			.useSansSerif();
+			width         : 100%;
+			margin-bottom : 1em;
+			font-size     : 10pt;
+			thead{
+				display: table-row-group;
+				font-weight : 800;
+				th{
+					vertical-align : bottom;
+					padding-bottom : 0.3em;
+					padding-right  : 0.1em;
+					padding-left   : 0.1em;
+				}
+			}
 			tbody{
-				tr:nth-child(odd), tr:nth-child(even){
-					background-color : transparent;
+				tr{
+					td{
+						padding : 0.3em 0.1em;
+					}
+					&:nth-child(odd){
+						background-color : @noteGreen;
+					}
 				}
 			}
 		}
-		table{
-			color : @headerText;
+		//*****************************
+		// *            NOTE
+		// *****************************/
+		blockquote{
+			.useSansSerif();
+			box-sizing          : border-box;
+			margin-bottom       : 1em;
+			padding             : 5px 10px;
+			background-color    : @noteGreen;
+			border-style        : solid;
+			border-width        : 11px;
+			border-image        : @noteBorderImage 11;
+			border-image-outset : 9px 0px;
+			box-shadow          : 1px 4px 14px #888;
+			p, ul{
+				font-size   : 0.352cm;
+				line-height : 1.083em;
+			}
 		}
-		p+p{
-			margin-top     : 0em;
-			padding-bottom : 0.5em;
-			text-indent    : 0em;
+		//If a note starts a column, give it space at the top to render border
+		pre+blockquote, h2+blockquote, h3+blockquote, h4+blockquote, h5+blockquote {
+			margin-top : 13px;
 		}
-		//Triangle dividers
-		hr{
-			visibility       : visible;
-			height           : 6px;
-			margin           : 4px 0px;
-			background-image : @redTriangleImage;
-			background-size  : 100% 100%;
-			border           : none;
+		//*****************************
+		// *    MONSTER STAT BLOCK
+		// *****************************/
+		hr+blockquote{
+			position         : relative;
+			padding-top      : 15px;
+			background-color : @monsterStatBackground;
+			border-style     : solid;
+			border-width     : 10px;
+			border-image     : @monsterBorderImageLegacy 10;
+			h2{
+				margin-top    : -8px;
+				margin-bottom : 0px;
+				&+p{
+					padding-bottom : 0px;
+				}
+			}
+			h3{
+				font-family   : ScalySans;
+				font-weight   : 400;
+				border-bottom : 1px solid @headerText;
+			}
+			hr+ul{
+				color : @headerText;
+			}
+			ul{
+				.useSansSerif();
+				padding-left : 1em;
+				font-size    : 0.352cm;
+			}
+			// Monster Ability table
+			hr+table{
+				margin              : 0;
+				background-color    : transparent;
+				border-style        : none;
+				border-image        : none;
+				tbody{
+					tr:nth-child(odd), tr:nth-child(even){
+						background-color : transparent;
+					}
+				}
+			}
+			table{
+				color : @headerText;
+			}
+			p+p{
+				margin-top     : 0em;
+				padding-bottom : 0.5em;
+				text-indent    : 0em;
+			}
+			//Triangle dividers
+			hr{
+				visibility       : visible;
+				height           : 6px;
+				margin           : 4px 0px;
+				background-image : @redTriangleImage;
+				background-size  : 100% 100%;
+				border           : none;
+			}
 		}
-	}
-	//Full Width
-	hr+hr+blockquote{
-		.useColumns(0.96);
-	}
-	//*****************************
-	// *           FOOTER
-	// *****************************/
-	&:after{
-		content          : "";
-		position         : absolute;
-		bottom           : 0px;
-		left             : 0px;
-		z-index          : 100;
-		height           : 50px;
-		width            : 100%;
-		background-image : @footerAccentImage;
-		background-size  : cover;
-	}
-	&:nth-child(even){
+		//Full Width
+		hr+hr+blockquote{
+			.useColumns(0.96);
+		}
+		//*****************************
+		// *           FOOTER
+		// *****************************/
 		&:after{
-			transform : scaleX(-1);
+			content          : "";
+			position         : absolute;
+			bottom           : 0px;
+			left             : 0px;
+			z-index          : 100;
+			height           : 50px;
+			width            : 100%;
+			background-image : @footerAccentImage;
+			background-size  : cover;
+		}
+		&:nth-child(even){
+			&:after{
+				transform : scaleX(-1);
+			}
+			.pageNumber{
+				left : 2px;
+			}
+			.footnote{
+				left       : 80px;
+				text-align : left;
+			}
 		}
 		.pageNumber{
-			left : 2px;
+			position   : absolute;
+			right      : 2px;
+			bottom     : 22px;
+			width      : 50px;
+			font-size  : 0.9em;
+			color      : #c9ad6a;
+			text-align : center;
+			&.auto::after {
+				content : counter(phb-page-numbers);
+			}
 		}
 		.footnote{
-			left       : 80px;
-			text-align : left;
+			position   : absolute;
+			right      : 80px;
+			bottom     : 32px;
+			z-index    : 150;
+			width      : 200px;
+			font-size  : 0.8em;
+			color      : #c9ad6a;
+			text-align : right;
 		}
-	}
-	.pageNumber{
-		position   : absolute;
-		right      : 2px;
-		bottom     : 22px;
-		width      : 50px;
-		font-size  : 0.9em;
-		color      : #c9ad6a;
-		text-align : center;
-		&.auto::after {
-			content : counter(phb-page-numbers);
+		//*****************************
+		// *          EXTRAS
+		// *****************************/
+		hr{
+			visibility : hidden;
+			margin     : 0px;
+		}
+		//Modified unorder list, used in spells
+		hr+ul{
+			margin-bottom   : 0.5em;
+			padding-left    : 1em;
+			text-indent     : -1em;
+			list-style-type : none;
+		}
+		//Column Break
+		pre, code{
+			visibility                 : hidden;
+			-webkit-column-break-after : always;
+			break-after                : always;
+			-moz-column-break-after    : always;
+		}
+		//Avoid breaking up
+		p,blockquote,table{
+			z-index                     : 15;
+			-webkit-column-break-inside : avoid;
+			page-break-inside           : avoid;
+			break-inside                : avoid;
+		}
+		//Better spacing for spell blocks
+		h4+p+hr+ul{
+			margin-top : -0.5em
+		}
+		//Text indent right after table
+		table+p{
+			text-indent : 1em;
+		}
+		// Nested lists
+		ul ul,ol ol,ul ol,ol ul{
+			margin-bottom : 0px;
+			margin-left   : 1.5em;
+		}
+		li{
+			-webkit-column-break-inside : avoid;
+			page-break-inside           : avoid;
+			break-inside                : avoid;
 		}
-	}
-	.footnote{
-		position   : absolute;
-		right      : 80px;
-		bottom     : 32px;
-		z-index    : 150;
-		width      : 200px;
-		font-size  : 0.8em;
-		color      : #c9ad6a;
-		text-align : right;
 	}
 	//*****************************
-	// *          EXTRAS
+	// *         SPELL LIST
 	// *****************************/
-	hr{
-		visibility : hidden;
-		margin     : 0px;
+	.phb .spellList{
+		.useSansSerif();
+		column-count        : 4;
+		column-span         : all;
+		-webkit-column-span : all;
+		-moz-column-span    : all;
+		ul+h5{
+			margin-top : 15px;
+		}
+		p, ul{
+			font-size   : 0.352cm;
+			line-height : 1.263em;
+		}
+		ul{
+			margin-bottom               : 0.5em;
+			padding-left                : 1em;
+			text-indent                 : -1em;
+			list-style-type             : none;
+			-webkit-column-break-inside : auto;
+			page-break-inside           : auto;
+			break-inside                : auto;
+		}
 	}
-	//Modified unorder list, used in spells
-	hr+ul{
-		margin-bottom   : 0.5em;
-		padding-left    : 1em;
-		text-indent     : -1em;
-		list-style-type : none;
+	//*****************************
+	// *         WIDE
+	// *****************************/
+	.phb .wide{
+		column-span         : all;
+		-webkit-column-span : all;
+		-moz-column-span    : all;
 	}
-	//Column Break
-	pre, code{
-		visibility                 : hidden;
-		-webkit-column-break-after : always;
-		break-after                : always;
-		-moz-column-break-after    : always;
+	//*****************************
+	// *       CLASS TABLE
+	// *****************************/
+	.phb .classTable{
+		margin-top          : 25px;
+		margin-bottom       : 40px;
+		border-collapse     : separate;
+		background-color    : white;
+		border              : initial;
+		border-style        : solid;
+		border-image-outset : 25px 17px;
+		border-image-repeat : stretch;
+		border-image-slice  : 150 200 150 200;
+		border-image-source : @frameBorderImage;
+		border-image-width  : 47px;
+		h5{
+			margin-bottom : 10px;
+		}
 	}
-	//Avoid breaking up
-	p,blockquote,table{
-		z-index                     : 15;
-		-webkit-column-break-inside : avoid;
-		page-break-inside           : avoid;
-		break-inside                : avoid;
+	//************************************
+	// *       DESCRIPTIVE TEXT BOX
+	// ************************************/
+	.phb .descriptive{
+		margin-bottom       : 1em;
+		background-color    : #faf7ea;
+		font-family         : ScalySans;
+		border-style        : solid;
+		border-width        : 7px;
+		border-image        : @descriptiveBoxImage 12 stretch;
+		border-image-outset : 4px;
+		box-shadow          : 0px 0px 6px #faf7ea;
+		p{
+			display        : block;
+			padding-bottom : 0px;
+			line-height    : 1.47em;
+		}
+		p + p {
+			padding-top : .8em;
+		}
+		em {
+			font-family : ScalySans;
+			font-style  : italic;
+		}
+		strong {
+			font-family    : ScalySans;
+			font-weight    : 800;
+			letter-spacing : -0.02em;
+		}
 	}
-	//Better spacing for spell blocks
-	h4+p+hr+ul{
-		margin-top : -0.5em
+	.phb pre+.descriptive{
+		margin-top : 8px;
 	}
-	//Text indent right after table
-	table+p{
-		text-indent : 1em;
-	}
-	// Nested lists
-	ul ul,ol ol,ul ol,ol ul{
-		margin-bottom : 0px;
-		margin-left   : 1.5em;
-	}
-	li{
-		-webkit-column-break-inside : avoid;
-		page-break-inside           : avoid;
-		break-inside                : avoid;
-	}
-}
-//*****************************
-// *         SPELL LIST
-// *****************************/
-.phb .spellList{
-	.useSansSerif();
-	column-count        : 4;
-	column-span         : all;
-	-webkit-column-span : all;
-	-moz-column-span    : all;
-	ul+h5{
-		margin-top : 15px;
-	}
-	p, ul{
-		font-size   : 0.352cm;
-		line-height : 1.263em;
-	}
-	ul{
-		margin-bottom               : 0.5em;
-		padding-left                : 1em;
-		text-indent                 : -1em;
-		list-style-type             : none;
-		-webkit-column-break-inside : auto;
-		page-break-inside           : auto;
-		break-inside                : auto;
-	}
-}
-//*****************************
-// *         WIDE
-// *****************************/
-.phb .wide{
-	column-span         : all;
-	-webkit-column-span : all;
-	-moz-column-span    : all;
-}
-//*****************************
-// *       CLASS TABLE
-// *****************************/
-.phb .classTable{
-	margin-top          : 25px;
-	margin-bottom       : 40px;
-	border-collapse     : separate;
-	background-color    : white;
-	border              : initial;
-	border-style        : solid;
-	border-image-outset : 25px 17px;
-	border-image-repeat : stretch;
-	border-image-slice  : 150 200 150 200;
-	border-image-source : @frameBorderImage;
-	border-image-width  : 47px;
-	h5{
-		margin-bottom : 10px;
-	}
-}
-//************************************
-// *       DESCRIPTIVE TEXT BOX
-// ************************************/
-.phb .descriptive{
-	margin-bottom       : 1em;
-	background-color    : #faf7ea;
-	font-family         : ScalySans;
-	border-style        : solid;
-	border-width        : 7px;
-	border-image        : @descriptiveBoxImage 12 stretch;
-	border-image-outset : 4px;
-	box-shadow          : 0px 0px 6px #faf7ea;
-	p{
-		display        : block;
-		padding-bottom : 0px;
-		line-height    : 1.47em;
-	}
-	p + p {
-		padding-top : .8em;
-	}
-	em {
-		font-family : ScalySans;
-		font-style  : italic;
-	}
-	strong {
-		font-family    : ScalySans;
-		font-weight    : 800;
-		letter-spacing : -0.02em;
-	}
-}
-.phb pre+.descriptive{
-	margin-top : 8px;
-}
 
-//*****************************
-// *    ARTIST CREDIT BLOCK
-// *****************************/
-.phb {
-	.artist {
-		position    : absolute;
-		text-align  : center;
-		font-family : WalterTurncoat;
-		font-size   : 0.27cm;
-		color       : @captionText;
-		p, p + p {
-			margin      : unset;
-			text-indent : unset;
-			line-height : 0.941em;
-		}
-	 	h5 {
-			font-size   : 1.3em;
+	//*****************************
+	// *    ARTIST CREDIT BLOCK
+	// *****************************/
+	.phb {
+		.artist {
+			position    : absolute;
+			text-align  : center;
 			font-family : WalterTurncoat;
+			font-size   : 0.27cm;
+			color       : @captionText;
+			p, p + p {
+				margin      : unset;
+				text-indent : unset;
+				line-height : 0.941em;
+			}
+		 	h5 {
+				font-size   : 1.3em;
+				font-family : WalterTurncoat;
+			}
+			a{
+				color           : inherit;
+				text-decoration : unset;
+				&:hover {
+					text-decoration : underline;
+				}
+			}
 		}
+	}
+	//*****************************
+	// *      TABLE OF CONTENTS
+	// *****************************/
+	.phb .toc{
+		-webkit-column-break-inside : avoid;
+		page-break-inside           : avoid;
+		break-inside                : avoid;
 		a{
-			color           : inherit;
-			text-decoration : unset;
-			&:hover {
+			color           : black;
+			text-decoration : none;
+			&:hover{
 				text-decoration : underline;
 			}
 		}
-	}
-}
-//*****************************
-// *      TABLE OF CONTENTS
-// *****************************/
-.phb .toc{
-	-webkit-column-break-inside : avoid;
-	page-break-inside           : avoid;
-	break-inside                : avoid;
-	a{
-		color           : black;
-		text-decoration : none;
-		&:hover{
-			text-decoration : underline;
+		ul{
+			padding-left    : 0;
+			list-style-type : none;
+		}
+		&>ul>li{
+			margin-bottom : 10px;
 		}
 	}
-	ul{
-		padding-left    : 0;
-		list-style-type : none;
-	}
-	&>ul>li{
-		margin-bottom : 10px;
-	}
 }

themes/V3/5eDMG/style.less

@@ -1,19 +1,21 @@
-:root {
-	//Colors
-	--HB_Color_Accent                : #EBCEC3; // Salmon
-	--HB_Color_Footnotes             : #5C5C5C; // Dark gray
-}
-
-.page {
-	background-image : url(/assets/DMG_background.png);
-	background-size  : cover;
-
-	&:after {
-		background-image : url(/assets/DMG_footerAccent.png);
-		height: 58px;
+@layer V3_5eDMG {
+	:root {
+		//Colors
+		--HB_Color_Accent                : #EBCEC3; // Salmon
+		--HB_Color_Footnotes             : #5C5C5C; // Dark gray
 	}
 
-	.footnote {
-		bottom : 40px;
+	.page {
+		background-image : url(/assets/DMG_background.png);
+		background-size  : cover;
+
+		&:after {
+			background-image : url(/assets/DMG_footerAccent.png);
+			height: 58px;
+		}
+
+		.footnote {
+			bottom : 40px;
+		}
 	}
 }

themes/V3/Blank/style.less

@@ -1,276 +1,278 @@
-@import (less) './themes/fonts/5e/fonts.less';
-@import (less) './themes/assets/assets.less';
+@layer V3_Blank {
+	@import (less) './themes/fonts/5e/fonts.less';
+	@import (less) './themes/assets/assets.less';
 
-:root {
-	//Colors
-	--HB_Color_Background            : #FFFFFF; // White
-	--HB_Color_WatercolorStain       : #000000; // Black
-}
-
-@page { margin: 0; }
-body {
-	counter-reset : phb-page-numbers;
-}
-*{
-	-webkit-print-color-adjust : exact;
-}
-
-.useColumns(@multiplier : 1, @fillMode: balance){
-	column-fill          : @fillMode;
-	column-count         : 2;
-}
-.columnWrapper{
-	max-height        : 100%;
-	column-span       : all;
-	columns           : inherit;
-	column-gap        : inherit;
-}
-.page{
-	.useColumns();
-	height            : 279.4mm;
-	width             : 215.9mm;
-	padding           : 1.4cm 1.9cm 1.7cm;
-	counter-increment : phb-page-numbers;
-	background-color  : var(--HB_Color_Background);
-	position          : relative;
-	z-index           : 15;
-	box-sizing        : border-box;
-	overflow          : hidden;
-	text-rendering    : optimizeLegibility;
-	page-break-before : always;
-	page-break-after  : always;
-	contain           : size;
-}
-	//*****************************
-	// *            BASE
-	// *****************************/
-.page{
-	p{
-		overflow-wrap : break-word;
-		display       : block;
-	}
-	strong{
-		font-weight : bold;
-	}
-	em{
-		font-style : italic;
-	}
-	sup{
-		vertical-align : super;
-		font-size      : smaller;
-		line-height    : 0;
-	}
-	sub{
-		vertical-align : sub;
-		font-size      : smaller;
-		line-height    : 0;
-	}
-	ul {
-		list-style-position : outside; //Needed for multiline list items
-		list-style-type     : disc;
-		padding-left        : 1.4em;
-	}
-	ol {
-		list-style-position : outside;
-		list-style-type     : decimal;
-		padding-left        : 1.4em;
-	}
-	img{
-		z-index : -1;
+	:root {
+		//Colors
+		--HB_Color_Background            : #FFFFFF; // White
+		--HB_Color_WatercolorStain       : #000000; // Black
 	}
 
-	//*****************************
-	// *           HEADERS
-	// *****************************/
-	h1,h2,h3,h4,h5,h6{
-		font-weight  : bold;
-		line-height  : 1.2em;
+	@page { margin: 0; }
+	body {
+		counter-reset : phb-page-numbers;
 	}
-	h1{
-		font-size : 2em;
+	*{
+		-webkit-print-color-adjust : exact;
 	}
-	h2{
-		font-size : 1.5em;
+
+	.useColumns(@multiplier : 1, @fillMode: balance){
+		column-fill          : @fillMode;
+		column-count         : 2;
 	}
-	h3{
-		font-size : 1.17em;
+	.columnWrapper{
+		max-height        : 100%;
+		column-span       : all;
+		columns           : inherit;
+		column-gap        : inherit;
 	}
-	h4{
-		font-size : 1em;
+	.page{
+		.useColumns();
+		height            : 279.4mm;
+		width             : 215.9mm;
+		padding           : 1.4cm 1.9cm 1.7cm;
+		counter-increment : phb-page-numbers;
+		background-color  : var(--HB_Color_Background);
+		position          : relative;
+		z-index           : 15;
+		box-sizing        : border-box;
+		overflow          : hidden;
+		text-rendering    : optimizeLegibility;
+		page-break-before : always;
+		page-break-after  : always;
+		contain           : size;
 	}
-	h5{
-		font-size : 0.83em;
-	}
-	//*****************************
-	// *          TABLE
-	// *****************************/
-	table{
-		width : 100%;
-		thead{
-			display     : table-row-group;
+		//*****************************
+		// *            BASE
+		// *****************************/
+	.page{
+		p{
+			overflow-wrap : break-word;
+			display       : block;
+		}
+		strong{
 			font-weight : bold;
 		}
-	}
-	div:not(.columnWrapper) > table + table {	// Side-by-side tables should not
-		margin-top : 0;	                        // have vertical spacing.
-	}
+		em{
+			font-style : italic;
+		}
+		sup{
+			vertical-align : super;
+			font-size      : smaller;
+			line-height    : 0;
+		}
+		sub{
+			vertical-align : sub;
+			font-size      : smaller;
+			line-height    : 0;
+		}
+		ul {
+			list-style-position : outside; //Needed for multiline list items
+			list-style-type     : disc;
+			padding-left        : 1.4em;
+		}
+		ol {
+			list-style-position : outside;
+			list-style-type     : decimal;
+			padding-left        : 1.4em;
+		}
+		img{
+			z-index : -1;
+		}
 
-	/* Watermark */
-	.watermark {
-		display         : grid !important;
-		place-items     : center;
-		justify-content	: center;
-		position        : absolute;
-		margin          : 0;
-		top             : 0;
-		left            : 0;
-		width           : 100%;
-		height          : 100%;
-		font-size       : 120px;
-		text-transform	: uppercase;
-		color           : black;
-		mix-blend-mode  : overlay;
-		opacity         : 30%;
-		transform       : rotate(-45deg);
-		z-index         : 500;
-		p {
-			margin-bottom : none;
+		//*****************************
+		// *           HEADERS
+		// *****************************/
+		h1,h2,h3,h4,h5,h6{
+			font-weight  : bold;
+			line-height  : 1.2em;
+		}
+		h1{
+			font-size : 2em;
+		}
+		h2{
+			font-size : 1.5em;
+		}
+		h3{
+			font-size : 1.17em;
+		}
+		h4{
+			font-size : 1em;
+		}
+		h5{
+			font-size : 0.83em;
+		}
+		//*****************************
+		// *          TABLE
+		// *****************************/
+		table{
+			width : 100%;
+			thead{
+				display     : table-row-group;
+				font-weight : bold;
+			}
+		}
+		div:not(.columnWrapper) > table + table {	// Side-by-side tables should not
+			margin-top : 0;	                        // have vertical spacing.
+		}
+
+		/* Watermark */
+		.watermark {
+			display         : grid !important;
+			place-items     : center;
+			justify-content	: center;
+			position        : absolute;
+			margin          : 0;
+			top             : 0;
+			left            : 0;
+			width           : 100%;
+			height          : 100%;
+			font-size       : 120px;
+			text-transform	: uppercase;
+			color           : black;
+			mix-blend-mode  : overlay;
+			opacity         : 30%;
+			transform       : rotate(-45deg);
+			z-index         : 500;
+			p {
+				margin-bottom : none;
+			}
+		}
+
+		/* Watercolor */
+		[class*="watercolor"] {
+			position            : absolute;
+			width               : 2000px;    /* dimensions need to be real big so the user can set */
+			height              : 2000px;    /* height or width and the image will maintain aspect ratio */
+			-webkit-mask-image  : var(--wc);
+			-webkit-mask-size   : contain;
+			-webkit-mask-repeat : no-repeat;
+			mask-image          : var(--wc);
+			mask-size           : contain;
+			mask-repeat         : no-repeat;
+			background-size     : cover;
+			background-color    : var(--HB_Color_WatercolorStain);			/*default color*/
+			--wc                : @watercolor1;         /*default image*/
+			z-index             : -2;
+		}
+
+		.watercolor1  { --wc : @watercolor1; }
+		.watercolor2  { --wc : @watercolor2; }
+		.watercolor3  { --wc : @watercolor3; }
+		.watercolor4  { --wc : @watercolor4; }
+		.watercolor5  { --wc : @watercolor5; }
+		.watercolor6  { --wc : @watercolor6; }
+		.watercolor7  { --wc : @watercolor7; }
+		.watercolor8  { --wc : @watercolor8; }
+		.watercolor9  { --wc : @watercolor9; }
+		.watercolor10 { --wc : @watercolor10; }
+		.watercolor11 { --wc : @watercolor11; }
+		.watercolor12 { --wc : @watercolor12; }
+
+		//************************************
+		// *           CODE BLOCKS
+		// ************************************/
+		code{
+	    font-family      : "Courier New", Courier, monospace;
+			white-space      : pre-wrap;
+			overflow-wrap    : break-word;
+		}
+
+		pre code{
+			width               : 100%;
+			display             : inline-block;
+		}
+		//*****************************
+		// *          EXTRAS
+		// *****************************/
+		.columnSplit {
+			visibility                 : hidden;
+			-webkit-column-break-after : always;
+			break-after                : always;
+			-moz-column-break-after    : always;
+			margin-top                 : 0;
+			& + * {
+				margin-top : 0;
+			}
+		}
+		//Avoid breaking up
+		blockquote,table{
+			z-index                     : 15;
+			-webkit-column-break-inside : avoid;
+			page-break-inside           : avoid;
+			break-inside                : avoid;
+		}
+		// Nested lists
+		ul ul,ol ol,ul ol,ol ul{
+			margin-bottom : 0px;
+			margin-left   : 1.5em;
+		}
+		li{
+			-webkit-column-break-inside : avoid;
+			page-break-inside           : avoid;
+			break-inside                : avoid;
 		}
 	}
 
-	/* Watercolor */
-	[class*="watercolor"] {
-		position            : absolute;
-		width               : 2000px;    /* dimensions need to be real big so the user can set */
-		height              : 2000px;    /* height or width and the image will maintain aspect ratio */
-		-webkit-mask-image  : var(--wc);
-		-webkit-mask-size   : contain;
-		-webkit-mask-repeat : no-repeat;
-		mask-image          : var(--wc);
-		mask-size           : contain;
-		mask-repeat         : no-repeat;
-		background-size     : cover;
-		background-color    : var(--HB_Color_WatercolorStain);			/*default color*/
-		--wc                : @watercolor1;         /*default image*/
-		z-index             : -2;
-	}
-
-	.watercolor1  { --wc : @watercolor1; }
-	.watercolor2  { --wc : @watercolor2; }
-	.watercolor3  { --wc : @watercolor3; }
-	.watercolor4  { --wc : @watercolor4; }
-	.watercolor5  { --wc : @watercolor5; }
-	.watercolor6  { --wc : @watercolor6; }
-	.watercolor7  { --wc : @watercolor7; }
-	.watercolor8  { --wc : @watercolor8; }
-	.watercolor9  { --wc : @watercolor9; }
-	.watercolor10 { --wc : @watercolor10; }
-	.watercolor11 { --wc : @watercolor11; }
-	.watercolor12 { --wc : @watercolor12; }
-
-	//************************************
-	// *           CODE BLOCKS
-	// ************************************/
-	code{
-    font-family      : "Courier New", Courier, monospace;
-		white-space      : pre-wrap;
-		overflow-wrap    : break-word;
-	}
-
-	pre code{
-		width               : 100%;
-		display             : inline-block;
-	}
 	//*****************************
-	// *          EXTRAS
+	// *    MUSTACHE DIVS/SPANS
 	// *****************************/
-	.columnSplit {
-		visibility                 : hidden;
-		-webkit-column-break-after : always;
-		break-after                : always;
-		-moz-column-break-after    : always;
-		margin-top                 : 0;
-		& + * {
-			margin-top : 0;
+	.page {
+		.block {
+			break-inside      : avoid;
+			display           : inline-block;
+			width             : 100%;
+		}
+		.inline-block {
+			display     : inline-block;
+			text-indent : initial;
 		}
 	}
-	//Avoid breaking up
-	blockquote,table{
-		z-index                     : 15;
-		-webkit-column-break-inside : avoid;
-		page-break-inside           : avoid;
-		break-inside                : avoid;
-	}
-	// Nested lists
-	ul ul,ol ol,ul ol,ol ul{
-		margin-bottom : 0px;
-		margin-left   : 1.5em;
-	}
-	li{
-		-webkit-column-break-inside : avoid;
-		page-break-inside           : avoid;
-		break-inside                : avoid;
-	}
-}
 
-//*****************************
-// *    MUSTACHE DIVS/SPANS
-// *****************************/
-.page {
-	.block {
-		break-inside      : avoid;
-		display           : inline-block;
-		width             : 100%;
+	//*****************************
+	// *    DEFINITION LISTS
+	// *****************************/
+	.page {
+		dl {
+			padding-left : 1em;
+			white-space  : pre-line;
+		}
+	  dt {
+	    display      : inline;
+	    margin-right : 0.5ch;
+			margin-left  : -1em;
+	  }
+	  dd {
+			display     : inline;
+			margin-left : 0;
+			text-indent : 0;
+	  }
 	}
-	.inline-block {
-		display     : inline-block;
-		text-indent : initial;
-	}
-}
 
-//*****************************
-// *    DEFINITION LISTS
-// *****************************/
-.page {
-	dl {
-		padding-left : 1em;
-		white-space  : pre-line;
-	}
-  dt {
-    display      : inline;
-    margin-right : 0.5ch;
-		margin-left  : -1em;
-  }
-  dd {
-		display     : inline;
-		margin-left : 0;
-		text-indent : 0;
-  }
-}
-
-//*****************************
-// *    BLANK LINE
-// *****************************/
-.page {
-	.blank {
-		height     : 1em;
-		margin-top : 0;
-		& + * {
-			margin-top : 0;
-		}
-	}
-}
-
-//*****************************
-// *         WIDE
-// *****************************/
-.page {
-	.wide{
-		column-span         : all;
-		display             : block;
-		margin-bottom       : 1em;
-		&+* {
+	//*****************************
+	// *    BLANK LINE
+	// *****************************/
+	.page {
+		.blank {
+			height     : 1em;
 			margin-top : 0;
+			& + * {
+				margin-top : 0;
+			}
+		}
+	}
+
+	//*****************************
+	// *         WIDE
+	// *****************************/
+	.page {
+		.wide{
+			column-span         : all;
+			display             : block;
+			margin-bottom       : 1em;
+			&+* {
+				margin-top : 0;
+			}
 		}
 	}
 }

themes/fonts/5e/fonts.less

@@ -81,28 +81,28 @@
 /* Cover Page */
 @font-face {
 	font-family: NodestoCapsCondensed;
-	src: url('../fonts/5e/Nodesto Caps Condensed.woff2');
+	src: url('../../../fonts/5e/Nodesto Caps Condensed.woff2');
 	font-weight: normal;
 	font-style: normal;
 }
 
 @font-face {
 	font-family: NodestoCapsCondensed;
-	src: url('../fonts/5e/Nodesto Caps Condensed Bold.woff2');
+	src: url('../../../fonts/5e/Nodesto Caps Condensed Bold.woff2');
 	font-weight: bold;
 	font-style: normal;
 }
 
 @font-face {
 	font-family: NodestoCapsCondensed;
-	src: url('../fonts/5e/Nodesto Caps Condensed Italic.woff2');
+	src: url('../../../fonts/5e/Nodesto Caps Condensed Italic.woff2');
 	font-weight: normal;
 	font-style: italic;
 }
 
 @font-face {
 	font-family: NodestoCapsCondensed;
-	src: url('../fonts/5e/Nodesto Caps Condensed Bold Italic.woff2');
+	src: url('../../../fonts/5e/Nodesto Caps Condensed Bold Italic.woff2');
 	font-weight: bold;
 	font-style: italic;
-}
+}