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,94 @@ 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
+
+##### Jeddai
+
+* [x] Fix broken tags editor
+
+* [x] Reduce server load to fix some saving issues
+
+Fixes issues [#2322](https://github.com/naturalcrit/homebrewery/issues/2322)
+
+##### G-Ambatte
+
+* [x] Account page help link for Google Drive errors
+
+Fixes issues [#2520](https://github.com/naturalcrit/homebrewery/issues/2520)
+}}
 
 ### Monday 05/12/2022 - v3.4.1
 {{taskList
@@ -142,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
@@ -197,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
 
@@ -223,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'
 		};
@@ -139,10 +140,10 @@ const Editor = createClass({
 
 						// Highlight injectors {style}
 						if(line.includes('{') && line.includes('}')){
-							const regex = /(?<!{){(?=((?::(?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':{}\s]*)*))\1}/g;
+							const regex = /(?:^|[^{\n])({(?=((?::(?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':{}\s]*)*))\2})/gm;
 							let match;
 							while ((match = regex.exec(line)) != null) {
-								codeMirror.markText({ line: lineNumber, ch: match.index }, { line: lineNumber, ch: match.index + match[0].length }, { className: 'injection' });
+								codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[1]) }, { line: lineNumber, ch: line.indexOf(match[1]) + match[1].length }, { className: 'injection' });
 							}
 						}
 						// Highlight inline spans {{content}}
@@ -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,17 +4,23 @@ 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');
 
 const Themes = require('themes/themes.json');
-const validations = require('./validations.js')
+const validations = require('./validations.js');
 
 const SYSTEMS = ['5e', '4e', '3.5e', 'Pathfinder'];
 
 const homebreweryThumbnail = require('../../thumbnail.png');
 
+const callIfExists = (val, fn, ...args)=>{
+	if(val[fn]) {
+		val[fn](...args);
+	}
+};
+
 const MetadataEditor = createClass({
 	displayName     : 'MetadataEditor',
 	getDefaultProps : function() {
@@ -31,7 +37,8 @@ const MetadataEditor = createClass({
 				renderer    : 'legacy',
 				theme       : '5ePHB'
 			},
-			onChange : ()=>{}
+			onChange    : ()=>{},
+			reportError : ()=>{}
 		};
 	},
 
@@ -53,28 +60,25 @@ const MetadataEditor = createClass({
 	},
 
 	handleFieldChange : function(name, e){
-		e.persist();
-
 		// load validation rules, and check input value against them
 		const inputRules = validations[name] ?? [];
 		const validationErr = inputRules.map((rule)=>rule(e.target.value)).filter(Boolean);
 
 		// if no validation rules, save to props
 		if(validationErr.length === 0){
-			e.target.setCustomValidity('');
+			callIfExists(e.target, 'setCustomValidity', '');
 			this.props.onChange({
 				...this.props.metadata,
 				[name] : e.target.value
 			});
 		} else {
 			// if validation issues, display built-in browser error popup with each error.
-			console.log(validationErr);
 			const errMessage = validationErr.map((err)=>{
 				return `- ${err}`;
 			}).join('\n');
-			e.target.setCustomValidity(errMessage);
+			callIfExists(e.target, 'setCustomValidity', errMessage);
-			e.target.reportValidity();
+			callIfExists(e.target, 'reportValidity');
-		};
+		}
 	},
 
 	handleSystem : function(system, e){
@@ -118,8 +122,12 @@ const MetadataEditor = createClass({
 
 		request.delete(`/api/${this.props.metadata.googleId ?? ''}${this.props.metadata.editId}`)
 			.send()
-			.end(function(err, res){
+			.end((err, res)=>{
+				if(err) {
+					this.props.reportError(err);
+				} else {
 					window.location.href = '/';
+				}
 			});
 	},
 
@@ -181,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>;
 			});
 		};
@@ -190,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>
@@ -247,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'
@@ -280,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'>
@@ -293,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 {
@@ -177,18 +186,45 @@
 					padding           : 3px 3px;
 					border-top        : 1px solid rgb(118, 118, 118);
 					position          : relative;
-					overflow			: hidden;
+					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;
 					}
-					img {
+					&: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)";
+				    	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(){
+	renderSnippets : function(snippets){
-		return _.map(this.props.snippets, (snippet)=>{
+		return _.map(snippets, (snippet)=>{
-			return <div className='snippet' key={snippet.name} onClick={()=>this.handleSnippetClick(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,8 +126,9 @@ const StringArrayEditor = createClass({
 			</div>
 		);
 
-		return <div className='field values'>
+		return <div className='field'>
 			<label>{this.props.label}</label>
+			<div style={{ flex: '1 0' }}>
 				<div className='list'>
 					{valueElements}
 					<div className='input-group'>
@@ -135,6 +139,9 @@ const StringArrayEditor = createClass({
 						{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/accountPage/accountPage.jsx

@@ -42,7 +42,6 @@ const AccountPage = createClass({
 	},
 
 	renderUiItems : function() {
-		// console.log(this.props.uiItems);
 		return 	<>
 			<div className='dataGroup'>
 				<h1>Account Information  <i className='fas fa-user'></i></h1>
@@ -51,12 +50,16 @@ const AccountPage = createClass({
 			</div>
 			<div className='dataGroup'>
 				<h3>Homebrewery Information <NaturalCritIcon /></h3>
-				<p><strong>Brews on Homebrewery: </strong> {this.props.uiItems.mongoCount || '-'}</p>
+				<p><strong>Brews on Homebrewery: </strong> {this.props.uiItems.mongoCount}</p>
 			</div>
 			<div className='dataGroup'>
 				<h3>Google Information <i className='fab fa-google-drive'></i></h3>
 				<p><strong>Linked to Google: </strong> {this.props.uiItems.googleId ? 'YES' : 'NO'}</p>
-				{this.props.uiItems.googleId ? <p><strong>Brews on Google Drive: </strong> {this.props.uiItems.fileCount || '-'}</p> : '' }
+				{this.props.uiItems.googleId &&
+					<p>
+						<strong>Brews on Google Drive: </strong> {this.props.uiItems.googleCount ?? <>Unable to retrieve files - <a href='https://github.com/naturalcrit/homebrewery/discussions/1580'>follow these steps to renew your Google credentials.</a></>}
+					</p>
+				}
 			</div>
 		</>;
 	},

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){
+			.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;
-}
-.listPage{
-	.content{
-		.phb{
-			.noColumns();
 	height               : auto;
 	min-height           : 279.4mm;
 	margin               : 20px auto;
+}
+.listPage{
+	.content{
+		.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 : {
+			brew : DEFAULT_BREW_LOAD
-				text      : '',
-				style     : '',
-				shareId   : null,
-				editId    : null,
-				createdAt : null,
-				updatedAt : null,
-				gDrive    : false,
-				trashed   : false,
-
-				title       : '',
-				description : '',
-				tags        : '',
-				published   : false,
-				authors     : [],
-				systems     : [],
-				renderer    : 'legacy'
-			}
 		};
 	},
 
@@ -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()}
+				{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 : {
+			brew : DEFAULT_BREW,
-				text : '',
-			},
 			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 : {
+			brew : DEFAULT_BREW
-				text        : '',
-				style       : undefined,
-				title       : '',
-				description : '',
-				renderer    : 'V3',
-				theme       : '5ePHB'
-			}
 		};
 	},
 
 	getInitialState : function() {
-		let brew = this.props.brew;
+		const 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'
-			};
-		}
 
 		return {
 			brew       : brew,
 			isSaving   : false,
 			saveGoogle : (global.account && global.account.googleId ? true : false),
-			errors     : null,
+			error      : null,
 			htmlErrors : Markdown.validate(brew.text)
 		};
 	},
@@ -83,6 +68,7 @@ const NewPage = createClass({
 		}
 
 		localStorage.setItem(BREWKEY, brew.text);
+		if(brew.style)
 			localStorage.setItem(STYLEKEY, brew.style);
 		localStorage.setItem(METAKEY, JSON.stringify({ 'renderer': brew.renderer, 'theme': brew.theme }));
 	},
@@ -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

@@ -31,7 +31,8 @@ const PrintPage = createClass({
 			brew : {
 				text     : this.props.brew.text     || '',
 				style    : this.props.brew.style    || undefined,
-				renderer : this.props.brew.renderer || 'legacy'
+				renderer : this.props.brew.renderer || 'legacy',
+				theme    : this.props.brew.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 : {
+			brew : DEFAULT_BREW_LOAD
-				title     : '',
-				text      : '',
-				style     : '',
-				shareId   : null,
-				createdAt : null,
-				updatedAt : null,
-				views     : 0,
-				renderer  : ''
-			}
 		};
 	},
 

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.1",
+  "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.3",
+    "marked": "4.2.12",
     "marked-extended-tables": "^1.0.5",
     "markedLegacy": "npm:marked@^0.3.19",
     "moment": "^2.29.4",
-    "mongoose": "^6.7.5",
+    "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.4",
+    "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.28.0",
+    "eslint": "^8.34.0",
-    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react": "^7.32.2",
-    "jest": "^29.2.2",
+    "jest": "^29.4.3",
-    "supertest": "^6.3.1"
+    "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)=>{
@@ -280,7 +281,6 @@ app.get('/edit/:id', asyncHandler(getBrew('edit')), (req, res, next)=>{
 		title       : req.brew.title || 'Untitled Brew',
 		description : req.brew.description || 'No description.',
 		image       : req.brew.thumbnail || defaultMetaTags.image,
-
 		type        : 'article'
 	};
 
@@ -294,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',
@@ -341,7 +349,7 @@ app.get('/account', asyncHandler(async (req, res, next)=>{
 	data.title = 'Account Information Page';
 
 	let auth;
-	let files;
+	let googleCount = [];
 	if(req.account) {
 		if(req.account.googleId) {
 			try {
@@ -353,9 +361,9 @@ app.get('/account', asyncHandler(async (req, res, next)=>{
 			}
 			if(auth.credentials.access_token) {
 				try {
-					files = await GoogleActions.listGoogleBrews(auth);
+					googleCount = await GoogleActions.listGoogleBrews(auth);
 				} catch (e) {
-					files = undefined;
+					googleCount = undefined;
 					console.log('List Google files failed!');
 					console.log(e);
 				}
@@ -363,18 +371,19 @@ app.get('/account', asyncHandler(async (req, res, next)=>{
 		}
 
 		const query = { authors: req.account.username, googleId: { $exists: false } };
-		const brews = await HomebrewModel.find(query, 'id')
+		const mongoCount = await HomebrewModel.countDocuments(query)
 			.catch((err)=>{
+				mongoCount = 0;
 				console.log(err);
 			});
 
 		data.uiItems = {
 			username    : req.account.username,
 			issued      : req.account.issued,
-			mongoCount : brews.length,
 			googleId    : Boolean(req.account.googleId),
 			authCheck   : Boolean(req.account.googleId && auth.credentials.access_token),
-			fileCount  : files?.length || '-'
+			mongoCount  : mongoCount,
+			googleCount : googleCount?.length
 		};
 	}
 
@@ -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/googleActions.js

@@ -253,7 +253,6 @@ const GoogleActions = {
 				text    : file.data,
 
 				description : obj.data.description,
-				tags        : obj.data.properties.tags ? obj.data.properties.tags : '',
 				systems     : obj.data.properties.systems ? obj.data.properties.systems.split(',') : [],
 				authors     : [],
 				published   : obj.data.properties.published ? obj.data.properties.published == 'true' : false,

server/homebrew.api.js

@@ -9,13 +9,19 @@ 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)=>{
+const MAX_TITLE_LENGTH = 100;
+
+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;
 
@@ -25,13 +31,12 @@ const getId = (req)=>{
 			id = id.slice(-12);
 		}
 		return { id, googleId };
-};
+	},
-
+	getBrew : (accessType, stubOnly = false)=>{
-const getBrew = (accessType)=>{
 		// 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);
+			const { id, googleId } = api.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 })
@@ -45,34 +50,43 @@ const getBrew = (accessType)=>{
 			stub = stub?.toObject();
 
 			// If there is a google id, try to find the google brew
-		if(googleId || stub?.googleId) {
+			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.
+				// Throw any error caught while attempting to retrieve Google brew.
-			if(!googleBrew) throw googleError;
+				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({ ...excludeStubProps(stub), stubbed: true }, excludeGoogleProps(googleBrew)) : googleBrew;
+				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.`;
 			}
 
 			// If after all of that we still don't have a brew, throw an exception
-		if(!stub) {
+			if(!stub && !stubOnly) {
 				throw 'Brew not found in Homebrewery database or Google Drive';
 			}
 
-		if(typeof stub.tags === 'string') {
+			// Clean up brew: fill in missing fields with defaults / fix old invalid values
-			stub.tags = [];
+			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;
 
+			req.brew = stub ?? {};
 			next();
 		};
-};
+	},
-
+	mergeBrewText : (brew)=>{
-const mergeBrewText = (brew)=>{
 		let text = brew.text;
 		if(brew.style !== undefined) {
 			text = `\`\`\`css\n` +
@@ -86,61 +100,54 @@ const mergeBrewText = (brew)=>{
 			`\`\`\`\n\n` +
 			`${text}`;
 		return text;
-};
+	},
-
+	getGoodBrewTitle : (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);
-};
+	},
-
+	excludePropsFromUpdate : (brew)=>{
-const excludePropsFromUpdate = (brew)=>{
 		// Remove undesired properties
 		const modified = _.clone(brew);
-	const propsToExclude = ['_id', 'views', 'lastViewed', 'editId', 'shareId', 'googleId'];
+		const propsToExclude = ['_id', 'views', 'lastViewed'];
 		for (const prop of propsToExclude) {
 			delete modified[prop];
 		}
 		return modified;
-};
+	},
-
+	excludeGoogleProps : (brew)=>{
-const excludeGoogleProps = (brew)=>{
 		const modified = _.clone(brew);
-	const propsToExclude = ['tags', 'systems', 'published', 'authors', 'owner', 'views', 'thumbnail'];
+		const propsToExclude = ['version', 'tags', 'systems', 'published', 'authors', 'owner', 'views', 'thumbnail'];
 		for (const prop of propsToExclude) {
 			delete modified[prop];
 		}
 		return modified;
-};
+	},
-
+	excludeStubProps : (brew)=>{
-const excludeStubProps = (brew)=>{
+		const propsToExclude = ['text', 'textBin', 'renderer', 'pageCount'];
-	const propsToExclude = ['text', 'textBin', 'renderer', 'pageCount', 'version'];
 		for (const prop of propsToExclude) {
 			brew[prop] = undefined;
 		}
 		return brew;
-};
+	},
-
+	beforeNewSave : (account, brew)=>{
-const beforeNewSave = (account, brew)=>{
 		if(!brew.title) {
-		brew.title = getGoodBrewTitle(brew.text);
+			brew.title = api.getGoodBrewTitle(brew.text);
 		}
 
 		brew.authors = (account) ? [account.username] : [];
-	brew.text = mergeBrewText(brew);
+		brew.text = api.mergeBrewText(brew);
-};
 
-const newGoogleBrew = async (account, brew, res)=>{
+		_.defaults(brew, DEFAULT_BREW);
+	},
+	newGoogleBrew : async (account, brew, res)=>{
 		const oAuth2Client = GoogleActions.authCheck(account, res);
 
-	const newBrew = excludeGoogleProps(brew);
+		const newBrew = api.excludeGoogleProps(brew);
 
 		return await GoogleActions.newGoogleBrew(oAuth2Client, newBrew);
-};
+	},
-
+	newBrew : async (req, res)=>{
-const newBrew = async (req, res)=>{
 		const brew = req.body;
 		const { saveToGoogle } = req.query;
 
@@ -148,7 +155,7 @@ const newBrew = async (req, res)=>{
 		delete brew.shareId;
 		delete brew.googleId;
 
-	beforeNewSave(req.account, brew);
+		api.beforeNewSave(req.account, brew);
 
 		const newHomebrew = new HomebrewModel(brew);
 		newHomebrew.editId = nanoid(12);
@@ -156,13 +163,13 @@ const newBrew = async (req, res)=>{
 
 		let googleId, saved;
 		if(saveToGoogle) {
-		googleId = await newGoogleBrew(req.account, newHomebrew, res)
+			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;
-		excludeStubProps(newHomebrew);
+			api.excludeStubProps(newHomebrew);
 			newHomebrew.googleId = googleId;
 		} else {
 			// Compress brew text to binary before saving
@@ -180,21 +187,28 @@ const newBrew = async (req, res)=>{
 		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.` }));
+		}
 
-const updateBrew = async (req, res)=>{
+		let brew = _.assign(brewFromServer, brewFromClient);
-	// 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;
+		const { saveToGoogle, removeFromGoogle } = req.query;
 		let afterSave = async ()=>true;
 
-	brew.text = mergeBrewText(brew);
+		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 deleteGoogleBrew(req.account, googleId, brew.editId, res)
+				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);
@@ -204,7 +218,7 @@ const updateBrew = async (req, res)=>{
 			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)
+			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);
@@ -212,7 +226,7 @@ const updateBrew = async (req, res)=>{
 			if(!brew.googleId) return;
 		} else if(brew.googleId) {
 			// If the google id exists and no other actions are being performed, update the google brew
-		const updated = await GoogleActions.updateGoogleBrew(excludeGoogleProps(brew))
+			const updated = await GoogleActions.updateGoogleBrew(api.excludeGoogleProps(brew))
 				.catch((err)=>{
 					console.error(err);
 					res.status(err?.response?.status || 500).send(err);
@@ -222,7 +236,7 @@ const updateBrew = async (req, res)=>{
 
 		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);
+			api.excludeStubProps(brew);
 		} else {
 			// Compress brew text to binary before saving
 			brew.textBin = zlib.deflateRawSync(brew.text);
@@ -230,48 +244,46 @@ const updateBrew = async (req, res)=>{
 			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));
 		}
 
-	// Fetch the brew from the database again (if it existed there to begin with), and assign the existing brew to it
+		// define a function to catch our save errors
-	brew = _.assign(await HomebrewModel.findOne({ _id: brew._id }), brew);
+		const saveError = (err)=>{
-
-	if(!brew.markModified) {
-		// If it wasn't in the database, create a new db brew
-		brew = new HomebrewModel(brew);
-	}
-
-	brew.markModified('authors');
-	brew.markModified('systems');
-
-	// Save the database brew
-	const saved = await brew.save()
-		.catch((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 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)=>{
-const deleteBrew = async (req, res, next)=>{
 		// Delete an orphaned stub if its Google brew doesn't exist
 		try {
-		await getBrew('edit')(req, res, ()=>{});
+			await api.getBrew('edit')(req, res, ()=>{});
 		} catch (err) {
-		const { id, googleId } = getId(req);
+			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();
@@ -289,7 +301,6 @@ const deleteBrew = async (req, res, next)=>{
 			if(account) {
 				// Remove current user as author
 				brew.authors = _.pull(brew.authors, account.username);
-			brew.markModified('authors');
 			}
 
 			if(brew.authors.length === 0) {
@@ -306,8 +317,7 @@ const deleteBrew = async (req, res, next)=>{
 					brew.textBin = zlib.deflateRawSync(brew.text);
 					brew.text = undefined;
 				}
-
+				brew.markModified('authors'); //Mongo will not properly update arrays without markModified()
-			// Otherwise, save the brew with updated author list
 				await brew.save()
 					.catch((err)=>{
 						throw { status: 500, message: err };
@@ -315,7 +325,7 @@ const deleteBrew = async (req, res, next)=>{
 			}
 		}
 		if(shouldDeleteGoogleBrew) {
-		const deleted = await deleteGoogleBrew(account, googleId, editId, res)
+			const deleted = await api.deleteGoogleBrew(account, googleId, editId, res)
 				.catch((err)=>{
 					console.error(err);
 					res.status(500).send(err);
@@ -324,15 +334,14 @@ const deleteBrew = async (req, res, next)=>{
 		}
 
 		res.status(204).send();
+	}
 };
 
-router.post('/api', asyncHandler(newBrew));
+router.use('/api', require('./middleware/check-client-version.js'));
-router.put('/api/:id', asyncHandler(getBrew('edit')), asyncHandler(updateBrew));
+router.post('/api', asyncHandler(api.newBrew));
-router.put('/api/update/:id', asyncHandler(getBrew('edit')), asyncHandler(updateBrew));
+router.put('/api/:id', asyncHandler(api.getBrew('edit', true)), asyncHandler(api.updateBrew));
-router.delete('/api/:id', asyncHandler(deleteBrew));
+router.put('/api/update/:id', asyncHandler(api.getBrew('edit', true)), asyncHandler(api.updateBrew));
-router.get('/api/remove/:id', asyncHandler(deleteBrew));
+router.delete('/api/:id', asyncHandler(api.deleteBrew));
+router.get('/api/remove/:id', asyncHandler(api.deleteBrew));
 
-module.exports = {
+module.exports = api;
-	homebrewApi : router,
-	getBrew
-};

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

@@ -17,6 +17,7 @@ const HomebrewSchema = mongoose.Schema({
 	systems        : [String],
 	renderer       : { type: String, default: '' },
 	authors        : [String],
+	invitedAuthors : [String],
 	published      : { type: Boolean, default: false },
 	thumbnail      : { type: String, default: '' },
 
@@ -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,22 +1,23 @@
-@import (less) './themes/fonts/5e legacy/fonts.less';
+@layer Legacy_5ePHB {
-@import (less) './themes/assets/assets.less';
+	@import (less) './themes/fonts/5e legacy/fonts.less';
-@import (less) './themes/phb.depricated.less';
+	@import (less) './themes/assets/assets.less';
-//Colors
+	@import (less) './themes/phb.depricated.less';
-@background            : #EEE5CE; // Light parchment
+	//Colors
-@noteGreen             : #e0e5c1; // Pastel green
+	@background            : #EEE5CE; // Light parchment
-@headerUnderline       : #c9ad6a; // Gold
+	@noteGreen             : #e0e5c1; // Pastel green
-@horizontalRule        : #9c2b1b; // Maroon
+	@headerUnderline       : #c9ad6a; // Gold
-@headerText            : #58180D; // Dark maroon
+	@horizontalRule        : #9c2b1b; // Maroon
-@monsterStatBackground : #FDF1DC; // Lighter parchment
+	@headerText            : #58180D; // Dark maroon
-@captionText           : #766649; // Brown
+	@monsterStatBackground : #FDF1DC; // Lighter parchment
-@page { margin: 0; }
+	@captionText           : #766649; // Brown
-body {
+	@page { margin: 0; }
+	body {
 		counter-reset : phb-page-numbers;
-}
+	}
-*{
+	*{
 		-webkit-print-color-adjust : exact;
-}
+	}
-.useSansSerif(){
+	.useSansSerif(){
 		font-family : ScalySans;
 		em{
 			font-family : ScalySans;
@@ -27,8 +28,8 @@ body {
 			font-weight    : 800;
 			letter-spacing : -0.02em;
 		}
-}
+	}
-.useColumns(@multiplier : 1){
+	.useColumns(@multiplier : 1){
 		column-count         : 2;
 		column-fill          : auto;
 		column-gap           : 1cm;
@@ -39,8 +40,8 @@ body {
 		-moz-column-width    : 8cm * @multiplier;
 		-webkit-column-gap   : 1cm;
 		-moz-column-gap      : 1cm;
-}
+	}
-.phb{
+	.phb{
 		.useColumns();
 		counter-increment : phb-page-numbers;
 		position          : relative;
@@ -357,11 +358,11 @@ body {
 			page-break-inside           : avoid;
 			break-inside                : avoid;
 		}
-}
+	}
-//*****************************
+	//*****************************
-// *         SPELL LIST
+	// *         SPELL LIST
-// *****************************/
+	// *****************************/
-.phb .spellList{
+	.phb .spellList{
 		.useSansSerif();
 		column-count        : 4;
 		column-span         : all;
@@ -383,19 +384,19 @@ body {
 			page-break-inside           : auto;
 			break-inside                : auto;
 		}
-}
+	}
-//*****************************
+	//*****************************
-// *         WIDE
+	// *         WIDE
-// *****************************/
+	// *****************************/
-.phb .wide{
+	.phb .wide{
 		column-span         : all;
 		-webkit-column-span : all;
 		-moz-column-span    : all;
-}
+	}
-//*****************************
+	//*****************************
-// *       CLASS TABLE
+	// *       CLASS TABLE
-// *****************************/
+	// *****************************/
-.phb .classTable{
+	.phb .classTable{
 		margin-top          : 25px;
 		margin-bottom       : 40px;
 		border-collapse     : separate;
@@ -410,11 +411,11 @@ body {
 		h5{
 			margin-bottom : 10px;
 		}
-}
+	}
-//************************************
+	//************************************
-// *       DESCRIPTIVE TEXT BOX
+	// *       DESCRIPTIVE TEXT BOX
-// ************************************/
+	// ************************************/
-.phb .descriptive{
+	.phb .descriptive{
 		margin-bottom       : 1em;
 		background-color    : #faf7ea;
 		font-family         : ScalySans;
@@ -440,15 +441,15 @@ body {
 			font-weight    : 800;
 			letter-spacing : -0.02em;
 		}
-}
+	}
-.phb pre+.descriptive{
+	.phb pre+.descriptive{
 		margin-top : 8px;
-}
+	}
 
-//*****************************
+	//*****************************
-// *    ARTIST CREDIT BLOCK
+	// *    ARTIST CREDIT BLOCK
-// *****************************/
+	// *****************************/
-.phb {
+	.phb {
 		.artist {
 			position    : absolute;
 			text-align  : center;
@@ -472,11 +473,11 @@ body {
 				}
 			}
 		}
-}
+	}
-//*****************************
+	//*****************************
-// *      TABLE OF CONTENTS
+	// *      TABLE OF CONTENTS
-// *****************************/
+	// *****************************/
-.phb .toc{
+	.phb .toc{
 		-webkit-column-break-inside : avoid;
 		page-break-inside           : avoid;
 		break-inside                : avoid;
@@ -494,4 +495,5 @@ body {
 		&>ul>li{
 			margin-bottom : 10px;
 		}
+	}
 }

themes/V3/5eDMG/style.less

@@ -1,10 +1,11 @@
-:root {
+@layer V3_5eDMG {
+	:root {
 		//Colors
 		--HB_Color_Accent                : #EBCEC3; // Salmon
 		--HB_Color_Footnotes             : #5C5C5C; // Dark gray
-}
+	}
 
-.page {
+	.page {
 		background-image : url(/assets/DMG_background.png);
 		background-size  : cover;
 
@@ -16,4 +17,5 @@
 		.footnote {
 			bottom : 40px;
 		}
+	}
 }

themes/V3/5ePHB/style.less

@@ -1,7 +1,8 @@
-@import (less) './themes/fonts/5e/fonts.less';
+@layer V3_5ePHB {
-@import (less) './themes/assets/assets.less';
+	@import (less) './themes/fonts/5e/fonts.less';
+	@import (less) './themes/assets/assets.less';
 
-:root {
+	:root {
 		//Colors
 		--HB_Color_Background            : #EEE5CE; // Light parchment
 		--HB_Color_Accent                : #E0E5C1; // Pastel green
@@ -12,16 +13,16 @@
 		--HB_Color_CaptionText           : #766649; // Brown
 		--HB_Color_WatercolorStain       : #BBAD82; // Light brown
 		--HB_Color_Footnotes             : #C9AD6A; // Gold
-}
+	}
 
-@page { margin: 0; }
+	@page { margin: 0; }
-body {
+	body {
 		counter-reset : phb-page-numbers;
-}
+	}
-*{
+	*{
 		-webkit-print-color-adjust : exact;
-}
+	}
-.useSansSerif(){
+	.useSansSerif(){
 		font-family : ScalySansRemake;
 		font-size   : 0.318cm;
 		line-height : 1.2em;
@@ -41,8 +42,8 @@ body {
 		h5 + * {
 			margin-top : 0.1cm;
 		}
-}
+	}
-.useColumns(@multiplier : 1, @fillMode: balance){
+	.useColumns(@multiplier : 1, @fillMode: balance){
 		column-count         : 2;
 		column-fill          : @fillMode;
 		column-gap           : 0.9cm;
@@ -53,14 +54,14 @@ body {
 		-moz-column-width    : 8cm * @multiplier;
 		-webkit-column-gap   : 0.9cm;
 		-moz-column-gap      : 0.9cm;
-}
+	}
-.columnWrapper{
+	.columnWrapper{
 		max-height        : 100%;
 		column-span       : all;
 		columns           : inherit;
 		column-gap        : inherit;
-}
+	}
-.page{
+	.page{
 		.useColumns();
 		counter-increment : phb-page-numbers;
 		position          : relative;
@@ -77,12 +78,12 @@ body {
 		text-rendering    : optimizeLegibility;
 		page-break-before : always;
 		page-break-after  : always;
-}
+	}
 		//*****************************
 		// *            BASE
 		// *****************************/
 
-.page{
+	.page{
 		p{
 			overflow-wrap : break-word;		//TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS
 			display       : block;
@@ -592,11 +593,11 @@ body {
 			page-break-inside           : avoid;
 			break-inside                : avoid;
 		}
-}
+	}
-//*****************************
+	//*****************************
-// *         SPELL LIST
+	// *         SPELL LIST
-// *****************************/
+	// *****************************/
-.page .spellList{
+	.page .spellList{
 		.useSansSerif();
 		column-count        : 2;
 		ul+h5{
@@ -618,12 +619,12 @@ body {
 		&.wide{
 			column-count : 4;
 		}
-}
+	}
 
-//*****************************
+	//*****************************
-// *       CLASS TABLE
+	// *       CLASS TABLE
-// *****************************/
+	// *****************************/
-.page .classTable{
+	.page .classTable{
 		th[colspan]:not([rowspan]) {
 			white-space : nowrap;
 		}
@@ -676,11 +677,11 @@ body {
 		h5 + table{
 			margin-top : 0.2cm;
 		}
-}
+	}
-//*****************************
+	//*****************************
-// *      TABLE OF CONTENTS
+	// *      TABLE OF CONTENTS
-// *****************************/
+	// *****************************/
-.page {
+	.page {
 		&:has(.toc):after {
 			display: none;
 		}
@@ -752,12 +753,12 @@ body {
 				.useColumns(0.96, @fillMode: balance);
 			}
 		}
-}
+	}
 
-//*****************************
+	//*****************************
-// *    DEFINITION LISTS
+	// *    DEFINITION LISTS
-// *****************************/
+	// *****************************/
-.page {
+	.page {
 		dl {
 			line-height  : 1.25em;
 			padding-left : 1em;
@@ -782,15 +783,16 @@ body {
 			margin-left : 0px;
 			text-indent : 0px;
 	  }
-}
+	}
 
-//*****************************
+	//*****************************
-// *         WIDE
+	// *         WIDE
-// *****************************/
+	// *****************************/
-.page .wide{
+	.page .wide{
 		margin-bottom       : 0.325cm;
-}
+	}
 
-.page h1 + *{
+	.page h1 + *{
 		margin-top : 0;
+	}
 }

themes/V3/Blank/style.less

@@ -1,31 +1,32 @@
-@import (less) './themes/fonts/5e/fonts.less';
+@layer V3_Blank {
-@import (less) './themes/assets/assets.less';
+	@import (less) './themes/fonts/5e/fonts.less';
+	@import (less) './themes/assets/assets.less';
 
-:root {
+	:root {
 		//Colors
 		--HB_Color_Background            : #FFFFFF; // White
 		--HB_Color_WatercolorStain       : #000000; // Black
-}
+	}
 
-@page { margin: 0; }
+	@page { margin: 0; }
-body {
+	body {
 		counter-reset : phb-page-numbers;
-}
+	}
-*{
+	*{
 		-webkit-print-color-adjust : exact;
-}
+	}
 
-.useColumns(@multiplier : 1, @fillMode: balance){
+	.useColumns(@multiplier : 1, @fillMode: balance){
 		column-fill          : @fillMode;
 		column-count         : 2;
-}
+	}
-.columnWrapper{
+	.columnWrapper{
 		max-height        : 100%;
 		column-span       : all;
 		columns           : inherit;
 		column-gap        : inherit;
-}
+	}
-.page{
+	.page{
 		.useColumns();
 		height            : 279.4mm;
 		width             : 215.9mm;
@@ -40,11 +41,11 @@ body {
 		page-break-before : always;
 		page-break-after  : always;
 		contain           : size;
-}
+	}
 		//*****************************
 		// *            BASE
 		// *****************************/
-.page{
+	.page{
 		p{
 			overflow-wrap : break-word;
 			display       : block;
@@ -211,12 +212,12 @@ body {
 			page-break-inside           : avoid;
 			break-inside                : avoid;
 		}
-}
+	}
 
-//*****************************
+	//*****************************
-// *    MUSTACHE DIVS/SPANS
+	// *    MUSTACHE DIVS/SPANS
-// *****************************/
+	// *****************************/
-.page {
+	.page {
 		.block {
 			break-inside      : avoid;
 			display           : inline-block;
@@ -226,12 +227,12 @@ body {
 			display     : inline-block;
 			text-indent : initial;
 		}
-}
+	}
 
-//*****************************
+	//*****************************
-// *    DEFINITION LISTS
+	// *    DEFINITION LISTS
-// *****************************/
+	// *****************************/
-.page {
+	.page {
 		dl {
 			padding-left : 1em;
 			white-space  : pre-line;
@@ -246,12 +247,12 @@ body {
 			margin-left : 0;
 			text-indent : 0;
 	  }
-}
+	}
 
-//*****************************
+	//*****************************
-// *    BLANK LINE
+	// *    BLANK LINE
-// *****************************/
+	// *****************************/
-.page {
+	.page {
 		.blank {
 			height     : 1em;
 			margin-top : 0;
@@ -259,12 +260,12 @@ body {
 				margin-top : 0;
 			}
 		}
-}
+	}
 
-//*****************************
+	//*****************************
-// *         WIDE
+	// *         WIDE
-// *****************************/
+	// *****************************/
-.page {
+	.page {
 		.wide{
 			column-span         : all;
 			display             : block;
@@ -273,4 +274,5 @@ body {
 				margin-top : 0;
 			}
 		}
+	}
 }

themes/V3/Journal/style.less

@@ -1,7 +1,8 @@
-@import (less) './themes/fonts/Journal/fonts.less';
+@layer V3_Journal {
-@import (less) './themes/assets/assets.less';
+	@import (less) './themes/fonts/Journal/fonts.less';
+	@import (less) './themes/assets/assets.less';
 
-:root {
+	:root {
 		//Colors
 		--HB_Color_Background            : unset; // Light parchment
 		--HB_Color_Text                  : #412121; // Dark Maroon Brown
@@ -9,9 +10,9 @@
 		--HB_Color_HeaderText            : #58180D; // Dark Maroon
 		--HB_Color_CaptionText           : #766649; // Brown
 		--HB_Color_WatercolorStain       : #BBAD82; // Light brown
-}
+	}
 
-.useSansSerif(){
+	.useSansSerif(){
 		font-family : PermanentMarker;
 		font-size   : 0.3cm;
 		line-height : 1.2em;
@@ -32,12 +33,12 @@
 		h5 + * {
 			margin-top : 0.1cm;
 		}
-}
+	}
-.useColumns(@multiplier : 1, @fillMode: balance){
+	.useColumns(@multiplier : 1, @fillMode: balance){
 		column-gap           : 0.5cm;
-}
+	}
 
-.page{
+	.page{
 		background-size     : 200% 100%;
 		background-repeat   : no-repeat;
 		filter              : drop-shadow(1px 4px 14px black);
@@ -57,12 +58,12 @@
 		& .columnWrapper {
 			//transform: rotate(-0.5deg);  // Breaks absolute positioning of images/footers. Wait for Chrome fix
 		}
-}
+	}
 
 		//*****************************
 		// *            BASE
 		// *****************************/
-.page{
+	.page{
 		color       : var(--HB_Color_Text);
 		font-family : ReenieBeanie;
 		font-size   : 0.53cm;
@@ -443,12 +444,12 @@
 		a:hover {
 			color:red;
 		}
-}
+	}
-//*****************************
+	//*****************************
-// *         SPELL LIST
+	// *         SPELL LIST
-// *****************************/
+	// *****************************/
 
-.page .spellList{
+	.page .spellList{
 		.useSansSerif();
 		font-family  : PermanentMarker;
 		column-count : 2;
@@ -467,23 +468,23 @@
 		&.wide{
 			column-count : 4;
 		}
-}
+	}
 
-//*****************************
+	//*****************************
-// *       CLASS TABLE
+	// *       CLASS TABLE
-// *****************************/
+	// *****************************/
-.page .classTable{
+	.page .classTable{
 		th[colspan]:not([rowspan]) {
 			white-space : nowrap;
 		}
 		h5 + table{
 			margin-top : 0.2cm;
 		}
-}
+	}
-//*****************************
+	//*****************************
-// *      TABLE OF CONTENTS
+	// *      TABLE OF CONTENTS
-// *****************************/
+	// *****************************/
-.page .toc{
+	.page .toc{
 		-webkit-column-break-inside : avoid;
 		page-break-inside           : avoid;
 		break-inside                : avoid;
@@ -549,11 +550,12 @@
 		&.wide{
 			.useColumns(0.96, @fillMode: balance);
 		}
-}
+	}
 
-//*****************************
+	//*****************************
-// *         WIDE
+	// *         WIDE
-// *****************************/
+	// *****************************/
-.page .wide {
+	.page .wide {
 		margin-bottom       : 0.45cm;
+	}
 }

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;
 }