Up version to 3.1.1

Fix Overlapping ClassTable Decorations

.circleci/config.yml

@@ -2,17 +2,23 @@
 #
 # Check https://circleci.com/docs/2.0/language-javascript/ for more details
 #
-version: 2
+version: 2.1
+
+orbs:
+  node: circleci/node@3.0.0
+
 jobs:
   build:
     docker:
-      - image: circleci/node:16.10.0
-      - image: circleci/mongo:4.4
+      - image: cimg/node:16.11.0
+      - image: mongo:4.4
 
-    working_directory: ~/repo
+    working_directory: ~/homebrewery
+    executor: node/default
 
     steps:
-      - checkout
+      - checkout:
+          path: ~/homebrewery
 
       # Download and cache dependencies
       - restore_cache:
@@ -21,12 +27,48 @@ jobs:
           # fallback to using the latest cache if no exact match is found
           - v1-dependencies-
 
-      - run: npm install
+      - node/install-npm
+      - node/install-packages:
+          app-dir: ~/homebrewery
+          cache-path: node_modules
+          override-ci-command: npm i
 
       - save_cache:
           paths:
             - node_modules
           key: v1-dependencies-{{ checksum "package.json" }}
 
+      - persist_to_workspace:
+          root: .
+          paths:
+            - .
+
+  test:
+    docker:
+      - image: cimg/node:16.11.0
+
+    working_directory: ~/homebrewery
+    parallelism: 4
+
+    steps:
+      - attach_workspace:
+          at: .
+
       # run tests!
-      - run: npm run circleci
+      - run: 
+          name: Test - Basic
+          command: npm run test:basic
+      - run: 
+          name: Test - Mustache Spans
+          command: npm run test:mustache-span
+      - run: 
+          name: Test - Routes
+          command: npm run test:route
+
+workflows:
+  build_and_test:
+    jobs:
+      - build
+      - test:
+          requires:
+            - build

README.md

@@ -9,37 +9,37 @@ using [Markdown][markdown-url]. It is distributed under the terms of the [MIT Li
 [markdown-url]: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet
 
 ## Quick Start
-The easiest way to get started using the Homebrewery is to use it
+The easiest way to get started using The Homebrewery is to use it
 [on our website][homebrewery-url]. The code is open source, so feel free to
-clone it, tinker with it. If you want to make changes to the code, you can run
+clone it and tinker with it. If you want to make changes to the code, you can run
 your own local version for testing by following the installation instructions
 below.
 
 [homebrewery-url]: https://homebrewery.naturalcrit.com
 
 ### Installation
-First, install three programs that the Homebrewery requires to run and retrieve
+First, install three programs that The Homebrewery requires to run and retrieve
 updates:
 
 1. install [node](https://nodejs.org/en/)
 1. install [mongodb](https://www.mongodb.com/try/download/community) (Community version)
 
-    For 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. 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. 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", "OK", "OK" to close all the windows
-1. install [git](https://git-scm.com/downloads) (select the option that allows Git to run from the command prompt)
+    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. 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. 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. 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]):
 ```
@@ -54,7 +54,7 @@ the project to run locally.
 You can set this temporarily in your shell of choice:
 * Windows Powershell: `$env:NODE_ENV="local"`
 * Windows CMD: `set NODE_ENV=local`
-* Linux / OSX: `export NODE_ENV=local`
+* Linux / macOS: `export NODE_ENV=local`
 
 Third, you will need to install the Node dependencies, compile the app, and run
 it using the two commands:
@@ -63,7 +63,7 @@ it using the two commands:
 1. `npm start`
 
 You should now be able to go to [http://localhost:8000](http://localhost:8000)
-in your browser and use the Homebrewery offline.
+in your browser and use The Homebrewery offline.
 
 ### Running the application via Docker
 
@@ -95,11 +95,11 @@ You can check out the [changelog](./changelog.md).
 
 ## License
 
-This project is licensed under the [MIT license](./license). Which means you
+This project is licensed under the [MIT license](./license), which means you
 are free to use The Homebrewery in any way that you want, except for claiming
 that you made it yourself.
 
-If you wish to sell or in some way gain profit for what's created on this site,
+If you wish to sell, or in some way gain profit for, what's created on this site,
 it's your responsibility to ensure you have the proper licenses/rights for any
 images or resources used.
 
@@ -108,13 +108,12 @@ images or resources used.
 You are welcome to contribute to the development and maintenance of the
 project! There are several ways of doing that:
 - At the moment, we have a huge backlog of [issues][repo-issues-url] and some
-  of them are outdated, duplicates or doesn't contain any useful info. In order
-  to help you can [mark duplicates][github-mark-duplicate-url], try to
-  reproduce some complex or weird issues, try with finding a workaround for a
-  reported bug or just mention issue managers team to let them know about
-  outdated issue via `@naturalcrit/issue-managers`.
+  of them are outdated, duplicates, or don't contain any useful info. To help, you can [mark duplicates][github-mark-duplicate-url], try to
+  reproduce some complex or weird issues, try finding a workaround for a
+  reported bug, or just mention our issue managers team to let them know about
+  outdated issues via `@naturalcrit/issue-managers`.
 - Our [subreddit][subreddit-url] is constantly growing and there are number of
-  bug reports: any help with sorting them out is very welcome.
+  bug reports. Any help with sorting them out is very welcome.
 - And of course you can contribute by fixing a bug or implementing a new
   feature by yourself, we are waiting for your
   [pull requests][github-pr-docs-url]!

changelog.md

@@ -29,11 +29,83 @@ pre {
 .page p + pre {
 	margin-top : 0.1cm;
 }
+
+.page .openSans {
+	font-family: 'Open Sans';
+	font-size: 0.9em;
+}
 ```
 
 ## changelog
 For a full record of development, visit our [Github Page](https://github.com/naturalcrit/homebrewery).
 
+### Thursday 09/06/2022 - v3.1.1
+{{taskList
+
+##### Calculuschild:
+
+* [x] Fixed class table decorations appearing on top of the table in PDF output.
+
+  Fixes issues: [#1784](https://github.com/naturalcrit/homebrewery/issues/1784)
+
+* [x] Fix bottom decoration on half class tables disappearing when the table is too short.
+
+  Fixes issues: [#2202](https://github.com/naturalcrit/homebrewery/issues/2202)
+}}
+
+### Monday 06/06/2022 - v3.1.0
+{{taskList
+
+##### G-Ambatte:
+
+* [x] "Jump to Preview/Editor" buttons added to the divider bar. Easily sync between the editor and preview panels!
+
+  Fixes issues: [#1756](https://github.com/naturalcrit/homebrewery/issues/1756)
+
+* [x] Speedups to the user page for users with large and/or many brews.
+
+  Fixes issues: [#2147](https://github.com/naturalcrit/homebrewery/issues/2147)
+
+* [x] Search text on the user page is saved to the URL for easy bookmarking in your browser
+
+  Fixes issues: [#1858](https://github.com/naturalcrit/homebrewery/issues/1858)
+
+* [x] Added easy login system for offline installs.
+
+  Fixes issues: [#269](https://github.com/naturalcrit/homebrewery/issues/269)
+
+* [x] New **THUMBNAIL** option in the {{fa,fa-info-circle}} **Properties** menu. This image will show up in social media links.
+
+  Fixes issues: [#820](https://github.com/naturalcrit/homebrewery/issues/820)
+}}
+
+### Wednesday 27/03/2022 - v3.0.8
+{{taskList
+* [x] Style updates to user page.
+
+* [x] Added a logout button (finally)! You can find it under {{openSans **USERNAME {{fa,fa-user}} → LOGOUT {{fas,fa-power-off}}**}}
+
+	Fixes issues: [#303](https://github.com/naturalcrit/homebrewery/issues/303)
+
+* [x] Clarified the default text when submitting an issue via Reddit post.
+
+* [x] Fixed broken Table of Contents links in PDFs. (Thanks lucastucious!)
+
+	Fixes issues: [#1749](https://github.com/naturalcrit/homebrewery/issues/1749)
+
+* [x] Fixed window resizing causing the edit page divider to get lost off of the edge of the page.
+
+	Fixes issues: [#2053](https://github.com/naturalcrit/homebrewery/issues/2053)
+
+* [x] Fixed Class Table decorations overlapping main text.
+
+	Fixes issues: [#1985](https://github.com/naturalcrit/homebrewery/issues/1985)
+
+* [x] Updated {{openSans **STYLE EDITOR {{fa,fa-pencil-alt}} → REMOVE DROP CAP {{fas,fa-remove-format}}**}} snippet to also remove small-caps first line font.
+
+* [x] Background work in preparation for brew themes.
+}}
+
 ### Wednesday 02/02/2022 - v3.0.7
 {{taskList
 * [x] Revert active line highlighting.
@@ -50,7 +122,7 @@ For a full record of development, visit our [Github Page](https://github.com/nat
 
 	Fixes issues: [#1943](https://github.com/naturalcrit/homebrewery/issues/1943)
 
-* [x] Added a Legacy to V3 migration guide under **NEED HELP? {{fa,fa-question-circle}} → MIGRATE {{fas,fa-file-import}}**
+* [x] Added a Legacy to V3 migration guide under {{openSans **NEED HELP? {{fa,fa-question-circle}} → MIGRATE {{fas,fa-file-import}}**}}
 
 * [x] Background refactoring and unit tests.
 }}
@@ -61,7 +133,7 @@ For a full record of development, visit our [Github Page](https://github.com/nat
 
 	Fixes issues: [#1736](https://github.com/naturalcrit/homebrewery/issues/1736)
 
-* [x] Code search/replace `CTRL F / CTRL SHIFT F`
+* [x] Code search/replace PC: `CTRL F / CTRL SHIFT F` / Mac: `CMD F / OPTION CMD F`
 
 	Fixes issues: [#1201](https://github.com/naturalcrit/homebrewery/issues/1201)
 

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -188,7 +188,7 @@ const BrewRenderer = createClass({
 					</div>
 	        : null}
 
-				<Frame initialContent={this.state.initialContent}
+				<Frame id='BrewRenderer' initialContent={this.state.initialContent}
 					style={{ width: '100%', height: '100%', visibility: this.state.visibility }}
 					contentDidMount={this.frameDidMount}>
 					<div className={'brewRenderer'}

client/homebrew/editor/editor.jsx

@@ -61,8 +61,14 @@ const Editor = createClass({
 		window.removeEventListener('resize', this.updateEditorSize);
 	},
 
-	componentDidUpdate : function() {
+	componentDidUpdate : function(prevProps, prevState, snapshot) {
 		this.highlightCustomMarkdown();
+		if(prevProps.moveBrew !== this.props.moveBrew) {
+			this.brewJump();
+		};
+		if(prevProps.moveSource !== this.props.moveSource) {
+			this.sourceJump();
+		};
 	},
 
 	updateEditorSize : function() {
@@ -90,15 +96,20 @@ const Editor = createClass({
 	},
 
 	handleViewChange : function(newView){
+		this.props.setMoveArrows(newView === 'text');
 		this.setState({
 			view : newView
 		}, this.updateEditorSize);	//TODO: not sure if updateeditorsize needed
 	},
 
 	getCurrentPage : function(){
-		const lines = this.props.brew.text.split('\n').slice(0, this.cursorPosition.line + 1);
+		const lines = this.props.brew.text.split('\n').slice(0, this.refs.codeEditor.getCursorPosition().line + 1);
 		return _.reduce(lines, (r, line)=>{
-			if(line.indexOf('\\page') !== -1) r++;
+			if(
+				(this.props.renderer == 'legacy' && line.indexOf('\\page') !== -1)
+				||
+				(this.props.renderer == 'V3' && line.match(/^\\page$/))
+			) r++;
 			return r;
 		}, 1);
 	},
@@ -120,6 +131,7 @@ const Editor = createClass({
 					//reset custom line styles
 					codeMirror.removeLineClass(lineNumber, 'background', 'pageLine');
 					codeMirror.removeLineClass(lineNumber, 'text');
+					codeMirror.removeLineClass(lineNumber, 'wrap', 'sourceMoveFlash');
 
 					// Styling for \page breaks
 					if((this.props.renderer == 'legacy' && line.includes('\\page')) ||
@@ -174,9 +186,76 @@ const Editor = createClass({
 		}
 	},
 
-	brewJump : function(){
-		const currentPage = this.getCurrentPage();
-		window.location.hash = `p${currentPage}`;
+	brewJump : function(targetPage=this.getCurrentPage()){
+		if(!window) return;
+		// console.log(`Scroll to: p${targetPage}`);
+		const brewRenderer = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer')[0];
+		const currentPos = brewRenderer.scrollTop;
+		const targetPos = window.frames['BrewRenderer'].contentDocument.getElementById(`p${targetPage}`).getBoundingClientRect().top;
+		const interimPos = targetPos >= 0 ? -30 : 30;
+
+		const bounceDelay = 100;
+		const scrollDelay = 500;
+
+		if(!this.throttleBrewMove) {
+			this.throttleBrewMove = _.throttle((currentPos, interimPos, targetPos)=>{
+				brewRenderer.scrollTo({ top: currentPos + interimPos, behavior: 'smooth' });
+				setTimeout(()=>{
+					brewRenderer.scrollTo({ top: currentPos + targetPos, behavior: 'smooth', block: 'start' });
+				}, bounceDelay);
+			}, scrollDelay, { leading: true, trailing: false });
+		};
+		this.throttleBrewMove(currentPos, interimPos, targetPos);
+
+		// const hashPage = (page != 1) ? `p${page}` : '';
+		// window.location.hash = hashPage;
+	},
+
+	sourceJump : function(targetLine=null){
+		if(this.isText()) {
+			if(targetLine == null) {
+				targetLine = 0;
+
+				const pageCollection = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('page');
+				const brewRendererHeight = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer').item(0).getBoundingClientRect().height;
+
+				let currentPage = 1;
+				for (const page of pageCollection) {
+					if(page.getBoundingClientRect().bottom > (brewRendererHeight / 2)) {
+						currentPage = parseInt(page.id.slice(1)) || 1;
+						break;
+					}
+				}
+
+				const textSplit = this.props.renderer == 'V3' ? /^\\page$/gm : /\\page/;
+				const textString = this.props.brew.text.split(textSplit).slice(0, currentPage-1).join(textSplit);
+				const textPosition = textString.length;
+				const lineCount = textString.match('\n') ? textString.slice(0, textPosition).split('\n').length : 0;
+
+				targetLine = lineCount - 1; //Scroll to `\page`, which is one line back.
+
+				let currentY = this.refs.codeEditor.codeMirror.getScrollInfo().top;
+				let targetY  = this.refs.codeEditor.codeMirror.heightAtLine(targetLine, 'local', true);
+
+				//Scroll 1/10 of the way every 10ms until 1px off.
+				const incrementalScroll = setInterval(()=>{
+					currentY += (targetY - currentY) / 10;
+					this.refs.codeEditor.codeMirror.scrollTo(null, currentY);
+
+					// Update target: target height is not accurate until within +-10 lines of the visible window
+					if(Math.abs(targetY - currentY > 100))
+						targetY = this.refs.codeEditor.codeMirror.heightAtLine(targetLine, 'local', true);
+
+					// End when close enough
+					if(Math.abs(targetY - currentY) < 1) {
+						this.refs.codeEditor.codeMirror.scrollTo(null, targetY);  // Scroll any remaining difference
+						this.refs.codeEditor.setCursorPosition({ line: targetLine + 1, ch: 0 });
+						this.refs.codeEditor.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
+						clearInterval(incrementalScroll);
+					}
+				}, 10);
+			}
+		}
 	},
 
 	//Called when there are changes to the editor's dimensions

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -7,6 +7,8 @@ const request = require('superagent');
 
 const SYSTEMS = ['5e', '4e', '3.5e', 'Pathfinder'];
 
+const homebreweryThumbnail = require('../../thumbnail.png');
+
 const MetadataEditor = createClass({
 	displayName     : 'MetadataEditor',
 	getDefaultProps : function() {
@@ -25,6 +27,23 @@ const MetadataEditor = createClass({
 		};
 	},
 
+	getInitialState : function(){
+		return {
+			showThumbnail : true
+		};
+	},
+
+	toggleThumbnailDisplay : function(){
+		this.setState({
+			showThumbnail : !this.state.showThumbnail
+		});
+	},
+
+	renderThumbnail : function(){
+		if(!this.state.showThumbnail) return;
+		return <img className='thumbnail-preview' src={this.props.metadata.thumbnail || homebreweryThumbnail}></img>;
+	},
+
 	handleFieldChange : function(name, e){
 		this.props.onChange(_.merge({}, this.props.metadata, {
 			[name] : e.target.value
@@ -59,7 +78,7 @@ const MetadataEditor = createClass({
 			if(!confirm('Are you REALLY sure? You will lose editor access to this document.')) return;
 		}
 
-		request.delete(`/api/${this.props.metadata.editId}`)
+		request.delete(`/api/${this.props.metadata.googleId ?? ''}${this.props.metadata.editId}`)
 			.send()
 			.end(function(err, res){
 				window.location.href = '/';
@@ -162,6 +181,18 @@ const MetadataEditor = createClass({
 				<textarea value={this.props.metadata.description} className='value'
 					onChange={(e)=>this.handleFieldChange('description', e)} />
 			</div>
+			<div className='field thumbnail'>
+				<label>thumbnail</label>
+				<input type='text'
+					value={this.props.metadata.thumbnail}
+					placeholder='my.thumbnail.url'
+					className='value'
+					onChange={(e)=>this.handleFieldChange('thumbnail', e)} />
+				<button className='display' onClick={this.toggleThumbnailDisplay}>
+					<i className={`fas fa-caret-${this.state.showThumbnail ? 'right' : 'left'}`} />
+				</button>
+				{this.renderThumbnail()}
+			</div>
 			{/*}
 			<div className='field tags'>
 				<label>tags</label>

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -24,6 +24,33 @@
 			flex           : 1 1 auto;
 			min-width      : 200px;
 		}
+		&.thumbnail{
+			height      : 1.4em;
+			label{
+				line-height: 2.0em;
+			}
+			.value{
+  				overflow: hidden;
+  				text-overflow: ellipsis;
+			}
+			button{
+				border: 1px solid #999;
+				color: white;
+				padding: 0px 5px;
+				background-color: black;
+				&:hover{
+					background-color: #777;
+				}
+			}
+			.thumbnail-preview{
+				position    : relative;
+				width       : 80px;
+				height      : min-content;
+				border      : 2px solid white;
+				margin-left : 5px;
+				max-height  : 115px;
+			}
+		}
 	}
 	.description.field textarea.value{
 		resize      : none;

client/homebrew/editor/snippetbar/snippets/snippets.js

@@ -97,7 +97,11 @@ module.exports = [
 				gen  : dedent`/* Removes Drop Caps */
 						.page h1+p:first-letter {
 							all: unset;
-						}\n\n`
+						}\n\n
+						/* Removes Small-Caps in first line */
+						.page h1+p:first-line {
+							all: unset;
+						}`
 			},
 			{
 				name : 'Tweak Drop Cap',

client/homebrew/homebrew.jsx

@@ -32,11 +32,16 @@ const Homebrew = createClass({
 			}
 		};
 	},
-	componentWillMount : function() {
+
+	getInitialState : function() {
 		global.account = this.props.account;
 		global.version = this.props.version;
 		global.enable_v3 = this.props.enable_v3;
+		global.config = this.props.config;
+
+		return {};
 	},
+
 	render : function (){
 		return (
 			<Router location={this.props.url}>
@@ -46,7 +51,7 @@ const Homebrew = createClass({
 						<Route path='/share/:id' component={(routeProps)=><SharePage id={routeProps.match.params.id} brew={this.props.brew} />}/>
 						<Route path='/new/:id' component={(routeProps)=><NewPage id={routeProps.match.params.id} brew={this.props.brew} />}/>
 						<Route path='/new' exact component={(routeProps)=><NewPage />}/>
-						<Route path='/user/:username' component={(routeProps)=><UserPage username={routeProps.match.params.username} brews={this.props.brews} />}/>
+						<Route path='/user/:username' component={(routeProps)=><UserPage username={routeProps.match.params.username} brews={this.props.brews} query={queryString.parse(routeProps.location.search)}/>}/>
 						<Route path='/print/:id' component={(routeProps)=><PrintPage brew={this.props.brew} query={queryString.parse(routeProps.location.search)} />}/>
 						<Route path='/print' exact component={(routeProps)=><PrintPage query={queryString.parse(routeProps.location.search)} />}/>
 						<Route path='/changelog' exact component={()=><SharePage brew={this.props.brew} />}/>

client/homebrew/navbar/account.navitem.jsx

@@ -1,6 +1,7 @@
 const React = require('react');
 const createClass = require('create-react-class');
 const Nav = require('naturalcrit/nav/nav.jsx');
+const request = require('superagent');
 
 const Account = createClass({
 	displayName     : 'AccountNavItem',
@@ -18,13 +19,84 @@ const Account = createClass({
 		}
 	},
 
+	handleLogout : function(){
+		if(confirm('Are you sure you want to log out?')) {
+			// Reset divider position
+			window.localStorage.removeItem('naturalcrit-pane-split');
+			// Clear login cookie
+			let domain = '';
+			if(window.location?.hostname) {
+				let domainArray = window.location.hostname.split('.');
+				if(domainArray.length > 2){
+					domainArray = [''].concat(domainArray.slice(-2));
+				}
+				domain = domainArray.join('.');
+			}
+			document.cookie = `nc_session=;expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/;samesite=lax;${domain ? `domain=${domain}` : ''}`;
+			window.location = '/';
+		}
+	},
+
+	localLogin : async function(){
+		const username = prompt('Enter username:');
+		if(!username) {return;}
+
+		const expiry = new Date;
+		expiry.setFullYear(expiry.getFullYear() + 1);
+
+		const token = await request.post('/local/login')
+				.send({ username })
+				.then((response)=>{
+					return response.body;
+				})
+				.catch((err)=>{
+					console.warn(err);
+				});
+		if(!token) return;
+
+		document.cookie = `nc_session=${token};expires=${expiry};path=/;samesite=lax;${window.domain ? `domain=${window.domain}` : ''}`;
+		window.location.reload(true);
+	},
+
 	render : function(){
+		//  Logged in
 		if(global.account){
-			return <Nav.item href={`/user/${global.account.username}`} color='yellow' icon='fas fa-user'>
-				{global.account.username}
-			</Nav.item>;
+			return <Nav.dropdown>
+				<Nav.item
+					className='account'
+					color='orange'
+					icon='fas fa-user'
+				>
+					{global.account.username}
+				</Nav.item>
+				<Nav.item
+					href={`/user/${global.account.username}`}
+					color='yellow'
+					icon='fas fa-beer'
+				>
+					brews
+				</Nav.item>
+				<Nav.item
+					className='logout'
+					color='red'
+					icon='fas fa-power-off'
+					onClick={this.handleLogout}
+				>
+					logout
+				</Nav.item>
+			</Nav.dropdown>;
 		}
 
+		//  Logged out
+		//  LOCAL ONLY
+		if(global.config.local) {
+			return <Nav.item color='teal' icon='fas fa-sign-in-alt' onClick={this.localLogin}>
+				login
+			</Nav.item>;
+		};
+
+		// Logged out
+		// Production site
 		return <Nav.item href={`https://www.naturalcrit.com/login?redirect=${this.state.url}`} color='teal' icon='fas fa-sign-in-alt'>
 			login
 		</Nav.item>;

client/homebrew/navbar/help.navitem.jsx

@@ -1,6 +1,7 @@
 const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
+const dedent = require('dedent-tabs').default;
 
 const Nav = require('naturalcrit/nav/nav.jsx');
 
@@ -10,7 +11,11 @@ module.exports = function(props){
 			need help?
 		</Nav.item>
 		<Nav.item color='red' icon='fas fa-fw fa-bug'
-			href={`https://www.reddit.com/r/homebrewery/submit?selftext=true&title=${encodeURIComponent('[Issue] Describe Your Issue Here')}`}
+			href={`https://www.reddit.com/r/homebrewery/submit?selftext=true&text=${encodeURIComponent(dedent`
+			**Browser(s)** :
+			**Operating System** :  
+			**Legacy or v3 Renderer** :
+			**Issue** :  `)}`}
 			newTab={true}
 			rel='noopener noreferrer'>
 			report issue

client/homebrew/navbar/navbar.jsx

@@ -14,12 +14,10 @@ const Navbar = createClass({
 		};
 	},
 
-	componentDidMount : function() {
-		//const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
-		this.setState({
-			//showNonChromeWarning : !isChrome,
-			ver : window.version
-		});
+	getInitialState : function() {
+		return {
+			ver : global.version
+		};
 	},
 
 	/*

client/homebrew/navbar/navbar.less

@@ -142,4 +142,7 @@
 			text-align       : center;
 		}
 	}
+	.account.navItem{
+		min-width: 100px;
+	}
 }

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

@@ -6,7 +6,7 @@ const cx    = require('classnames');
 const moment = require('moment');
 const request = require('superagent');
 
-const googleDriveIcon = require('../../../googleDrive.png');
+const googleDriveIcon = require('../../../../googleDrive.png');
 const dedent = require('dedent-tabs').default;
 
 const BrewItem = createClass({
@@ -31,19 +31,11 @@ const BrewItem = createClass({
 			if(!confirm('Are you REALLY sure? You will lose editor access to this document.')) return;
 		}
 
-		if(this.props.brew.googleId) {
-			request.get(`/api/removeGoogle/${this.props.brew.googleId}${this.props.brew.editId}`)
-				.send()
-				.end(function(err, res){
-					location.reload();
-				});
-		} else {
-			request.delete(`/api/${this.props.brew.editId}`)
-				.send()
-				.end(function(err, res){
-					location.reload();
-				});
-		}
+		request.delete(`/api/${this.props.brew.googleId ?? ''}${this.props.brew.editId}`)
+			.send()
+			.end(function(err, res){
+				location.reload();
+			});
 	},
 
 	renderDeleteBrewLink : function(){

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

@@ -17,6 +17,8 @@
 	-webkit-column-break-inside : avoid;
 	page-break-inside           : avoid;
 	break-inside                : avoid;
+	box-shadow                  : 0px 4px 5px 0px #333;
+	background-color            : #cab2802e;
 	.text {
 		min-height : 54px;
 		h4{

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

@@ -0,0 +1,177 @@
+require('./listPage.less');
+const React       = require('react');
+const createClass = require('create-react-class');
+const _           = require('lodash');
+const moment      = require('moment');
+
+const BrewItem    = require('./brewItem/brewItem.jsx');
+
+const ListPage = createClass({
+	displayName     : 'ListPage',
+	getDefaultProps : function() {
+		return {
+			brewCollection : [
+				{
+					title : '',
+					class : '',
+					brews : []
+				}
+			],
+			navItems : <></>
+		};
+	},
+	getInitialState : function() {
+		return {
+			sortType     : 'alpha',
+			sortDir      : 'asc',
+			filterString : this.props.query?.filter || '',
+			query        : this.props.query
+		};
+	},
+
+	renderBrews : function(brews){
+		if(!brews || !brews.length) return <div className='noBrews'>No Brews.</div>;
+
+		return _.map(brews, (brew, idx)=>{
+			return <BrewItem brew={brew} key={idx}/>;
+		});
+	},
+
+	sortBrewOrder : function(brew){
+		if(!brew.title){brew.title = 'No Title';}
+		const mapping = {
+			'alpha'   : _.deburr(brew.title.toLowerCase()),
+			'created' : moment(brew.createdAt).format(),
+			'updated' : moment(brew.updatedAt).format(),
+			'views'   : brew.views,
+			'latest'  : moment(brew.lastViewed).format()
+		};
+		return mapping[this.state.sortType];
+	},
+
+	handleSortOptionChange : function(event){
+		this.setState({
+			sortType : event.target.value
+		});
+	},
+
+	handleSortDirChange : function(event){
+		this.setState({
+			sortDir : `${(this.state.sortDir == 'asc' ? 'desc' : 'asc')}`
+		});
+	},
+
+	renderSortOption : function(sortTitle, sortValue){
+		return <td>
+				  <button
+					  value={`${sortValue}`}
+					  onClick={this.handleSortOptionChange}
+					  className={`${(this.state.sortType == sortValue ? 'active' : '')}`}
+				  >
+  					{`${sortTitle}`}
+		 		  </button>
+		  </td>;
+	},
+
+	handleFilterTextChange : function(e){
+		this.setState({
+			filterString : e.target.value,
+		});
+		this.updateUrl(e.target.value);
+		return;
+	},
+
+	updateUrl : function(filterTerm){
+		const url = new URL(window.location.href);
+		const urlParams = new URLSearchParams(url.search);
+		if(urlParams.get('filter') == filterTerm)
+			return;
+		if(!filterTerm)
+			urlParams.delete('filter');
+		else
+			urlParams.set('filter', filterTerm);
+		url.search = urlParams;
+		window.history.replaceState(null, null, url);
+	},
+
+	renderFilterOption : function(){
+		return <td>
+			<label>
+				<i className='fas fa-search'></i>
+				<input
+					type='search'
+					autoFocus={true}
+					placeholder='filter title/description'
+					onChange={this.handleFilterTextChange}
+					value={this.state.filterString}
+				/>
+			</label>
+		</td>;
+	},
+
+	renderSortOptions : function(){
+		return <div className='sort-container'>
+			<table>
+				<tbody>
+					<tr>
+						<td>
+							<h6>Sort by :</h6>
+						</td>
+						{this.renderSortOption('Title', 'alpha')}
+						{this.renderSortOption('Created Date', 'created')}
+						{this.renderSortOption('Updated Date', 'updated')}
+						{this.renderSortOption('Views', 'views')}
+						{/* {this.renderSortOption('Latest', 'latest')} */}
+				    	<td>
+							<h6>Direction :</h6>
+						</td>
+						<td>
+							<button
+								onClick={this.handleSortDirChange}
+								className='sortDir'
+							>
+								{`${(this.state.sortDir == 'asc' ? '\u25B2 ASC' : '\u25BC DESC')}`}
+							</button>
+						</td>
+						{this.renderFilterOption()}
+					</tr>
+				</tbody>
+			</table>
+		</div>;
+	},
+
+	getSortedBrews : function(brews){
+		const testString = _.deburr(this.state.filterString).toLowerCase();
+		brews = _.filter(brews, (brew)=>{
+			return (_.deburr(brew.title).toLowerCase().includes(testString)) ||
+			(_.deburr(brew.description).toLowerCase().includes(testString));
+		});
+
+		return _.orderBy(brews, (brew)=>{ return this.sortBrewOrder(brew); }, this.state.sortDir);
+	},
+
+	renderBrewCollection : function(brewCollection){
+		return _.map(brewCollection, (brewGroup, idx)=>{
+			return <div key={idx} className={`brewCollection ${brewGroup.class ?? ''}`}>
+				<h1>{brewGroup.title || 'No Title'}</h1>
+				{this.renderBrews(this.getSortedBrews(brewGroup.brews))}
+			</div>;
+		});
+	},
+
+	render : function(){
+		return <div className='listPage sitePage'>
+			<link href='/themes/5ePhbLegacy.style.css' rel='stylesheet'/>
+			{this.props.navItems}
+
+			<div className='content V3'>
+				<div className='phb'>
+					{this.renderSortOptions()}
+					{this.renderBrewCollection(this.props.brewCollection)}
+				</div>
+			</div>
+		</div>;
+	}
+});
+
+module.exports = ListPage;

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

@@ -11,7 +11,7 @@
 	-webkit-column-gap   : auto;
 	-moz-column-gap      : auto;
 }
-.userPage{
+.listPage{
 	.content{
 		overflow-y : scroll;
 		.phb{

client/homebrew/pages/editPage/editPage.jsx

@@ -200,73 +200,18 @@ const EditPage = createClass({
 		const brew = this.state.brew;
 		brew.pageCount = ((brew.renderer=='legacy' ? brew.text.match(/\\page/g) : brew.text.match(/^\\page$/gm)) || []).length + 1;
 
-		if(this.state.saveGoogle) {
-			if(transfer) {
-				const res = await request
-				.post('/api/newGoogle/')
-				.send(brew)
-				.catch((err)=>{
-					console.log(err.status === 401
-						? 'Not signed in!'
-						: 'Error Transferring to Google!');
-					this.setState({ errors: err, saveGoogle: false });
-				});
+		const params = `${transfer ? `?transfer${this.state.saveGoogle ? 'To' : 'From'}Google=true` : ''}`;
+		const res = await request
+			.put(`/api/update/${brew.editId}${params}`)
+			.send(brew)
+			.catch((err)=>{
+				console.log('Error Updating Local Brew');
+				this.setState({ errors: err });
+			});
 
-				if(!res) { return; }
-
-				console.log('Deleting Local Copy');
-				await request.delete(`/api/${brew.editId}`)
-				.send()
-				.catch((err)=>{
-					console.log('Error deleting Local Copy');
-				});
-
-				this.savedBrew = res.body;
-				history.replaceState(null, null, `/edit/${this.savedBrew.googleId}${this.savedBrew.editId}`); //update URL to match doc ID
-			} else {
-				const res = await request
-				.put(`/api/updateGoogle/${brew.editId}`)
-				.send(brew)
-				.catch((err)=>{
-					console.log(err.status === 401
-						? 'Not signed in!'
-						: 'Error Saving to Google!');
-					this.setState({ errors: err });
-					return;
-				});
-
-				this.savedBrew = res.body;
-			}
-		} else {
-			if(transfer) {
-				const res = await request.post('/api')
-				.send(brew)
-				.catch((err)=>{
-					console.log('Error creating Local Copy');
-					this.setState({ errors: err });
-					return;
-				});
-
-				await request.get(`/api/removeGoogle/${brew.googleId}${brew.editId}`)
-				.send()
-				.catch((err)=>{
-					console.log('Error Deleting Google Brew');
-				});
-
-				this.savedBrew = res.body;
-				history.replaceState(null, null, `/edit/${this.savedBrew.editId}`); //update URL to match doc ID
-			} else {
-				const res = await request
-				.put(`/api/update/${brew.editId}`)
-				.send(brew)
-				.catch((err)=>{
-					console.log('Error Updating Local Brew');
-					this.setState({ errors: err });
-					return;
-				});
-
-				this.savedBrew = res.body;
-			}
+		this.savedBrew = res.body;
+		if(transfer) {
+			history.replaceState(null, null, `/edit/${this.savedBrew.googleId ?? ''}${this.savedBrew.editId}`);
 		}
 
 		this.setState((prevState)=>({
@@ -331,26 +276,26 @@ const EditPage = createClass({
 				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.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)){
+			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}>
@@ -407,7 +352,7 @@ const EditPage = createClass({
 		const title = `${this.props.brew.title} ${systems}`;
 		const text = `Hey guys! I've been working on this homebrew. I'd love your feedback. Check it out.
 
-**[Homebrewery Link](https://homebrewery.naturalcrit.com/share/${shareLink})**`;
+**[Homebrewery Link](${global.config.publicUrl}/share/${shareLink})**`;
 
 		return `https://www.reddit.com/r/UnearthedArcana/submit?title=${encodeURIComponent(title)}&text=${encodeURIComponent(text)}`;
 	},
@@ -442,7 +387,7 @@ const EditPage = createClass({
 					<Nav.item color='blue' href={`/share/${shareLink}`}>
 						view
 					</Nav.item>
-					<Nav.item color='blue' onClick={()=>{navigator.clipboard.writeText(`https://homebrewery.naturalcrit.com/share/${shareLink}`);}}>
+					<Nav.item color='blue' onClick={()=>{navigator.clipboard.writeText(`${global.config.publicUrl}/share/${shareLink}`);}}>
 						copy url
 					</Nav.item>
 					<Nav.item color='blue' href={this.getRedditLink()} newTab={true} rel='noopener noreferrer'>

client/homebrew/pages/homePage/welcome_msg.md

@@ -59,18 +59,18 @@ If you wish to sell or in some way gain profit for what you make on this site, i
 
 ### More Resources
 <a href='https://discord.gg/by3deKx' target='_blank'><img src='/assets/discordOfManyThings.svg' alt='Discord of Many Things Logo' title='Discord of Many Things Logo' style='width:50px; float: right; padding-left: 10px;'/></a>
-If you are looking for more 5e Homebrew resources check out [r/UnearthedArcana](https://www.reddit.com/r/UnearthedArcana/) and their list of useful resources [here](https://www.reddit.com/r/UnearthedArcana/wiki/resources). The Discord of Many Things is another great resource to connect with fellow homebrewers for help and feedback.
+If you are looking for more 5e Homebrew resources check out [r/UnearthedArcana](https://www.reddit.com/r/UnearthedArcana/) and their list of useful resources [here](https://www.reddit.com/r/UnearthedArcana/wiki/resources). The <a href='https://discord.gg/by3deKx' target='_blank' title='Discord of Many Things'>Discord of Many Things</a> is another great resource to connect with fellow homebrewers for help and feedback.
 
 <img src='https://i.imgur.com/hMna6G0.png' style='position:absolute;bottom:40px;right:30px;width:280px' />
 
 <div class='pageNumber'>1</div>
 <div class='footnote'>PART 1 | FANCINESS</div>
 
-<div style='position: absolute; top: 40px; right: 60px;'>
-<a href='https://discord.gg/by3deKx' target='_blank' title='Discord of Many Things'><img src='/assets/discord.png' height='36px'/></a><span style='position: absolute; left: -4px; top: 40px'>Discord</span>
-<a href='https://github.com/naturalcrit/homebrewery' target='_blank' title='github' style='color: black; padding-left: 10px;'><img src='/assets/github.png' height='36px'/></a><span style='position: absolute; top: 40px; left: 48px'>Github</span>
-<a href='https://patreon.com/NaturalCrit' target='_blank' title='patreon' style='color: black; padding-left: 10px;'><img src='/assets/patreon.png' height='36px'/></a><span style='position: absolute; top: 40px; right: 46px'>Patreon</span>
-<a href='https://www.reddit.com/r/homebrewery/' target='_blank' title='reddit' style='color: black; padding-left: 10px;'><img src='/assets/reddit.png' height='36px'/></a><span style='position: absolute; top: 40px; right: 0px;'>Reddit</span>
+<div style='position: absolute; top: 20px; right: 20px;'>
+<a href='https://discord.gg/by3deKx' target='_blank' title='Discord of Many Things'><img src='/assets/discord.png' style='height:30px'/></a>
+<a href='https://github.com/naturalcrit/homebrewery' target='_blank' title='Github' style='color: black; padding-left: 5px;'><img src='/assets/github.png' style='height:30px'/></a>
+<a href='https://patreon.com/NaturalCrit' target='_blank' title='Patreon' style='color: black; padding-left: 5px;'><img src='/assets/patreon.png' style='height:30px'/></a>
+<a href='https://www.reddit.com/r/homebrewery/' target='_blank' title='Reddit' style='color: black; padding-left: 5px;'><img src='/assets/reddit.png' style='height:30px'/></a>
 </div>
 
 \page

client/homebrew/pages/homePage/welcome_msg_v3.md

@@ -43,13 +43,6 @@ If you want to save ink or have a monochrome printer, add the **PRINT → {{fas,
 [naturalcrit](https://homebrew.naturalcrit.com)
 }}
 
-{{position:absolute;top:40px;right:-580px
-<a href='https://discord.gg/by3deKx' target='_blank' title='discord' style='color: black;'><img src='/assets/discord.png' height='36px'/></a><span style='position: absolute; left: -6px; top: 40px'>Discord</span>
-<a href='https://github.com/naturalcrit/homebrewery' target='_blank' title='github' style='color: black; padding-left: 10px;'><img src='/assets/github.png' height='36px'/></a><span style='position: absolute; top: 40px; left: 47px'>Github</span>
-<a href='https://patreon.com/NaturalCrit' target='_blank' title='patreon' style='color: black; padding-left: 10px;'><img src='/assets/patreon.png' height='36px'/></a><span style='position: absolute; top: 40px; left: 93px'>Patreon</span>
-<a href='https://www.reddit.com/r/homebrewery/' target='_blank' title='reddit' style='color: black; padding-left: 10px;'><img src='/assets/reddit.png' height='36px'/></a><span style='position: absolute; top: 40px; left: 147px;'>Reddit</span>
-}}
-
 {{pageNumber 1}}
 {{footnote PART 1 | FANCINESS}}
 
@@ -89,6 +82,13 @@ If you'd like to credit me in your brew, I'd be flattered! Just reference that y
 <a href='https://discord.gg/by3deKx' target='_blank'><img src='/assets/discordOfManyThings.svg' alt='Discord of Many Things Logo' title='Discord of Many Things Logo' style='width:50px; float: right; padding-left: 10px;'/></a>
 If you are looking for more 5e Homebrew resources check out [r/UnearthedArcana](https://www.reddit.com/r/UnearthedArcana/) and their list of useful resources [here](https://www.reddit.com/r/UnearthedArcana/wiki/resources). The <a href='https://discord.gg/by3deKx' target='_blank' title='Discord of Many Things'>Discord of Many Things</a> is another great resource to connect with fellow homebrewers for help and feedback.
 
+{{position:absolute;top:20px;right:20px;width:auto
+<a href='https://discord.gg/by3deKx' target='_blank' title='Discord of Many Things' style='color: black;'><img src='/assets/discord.png' style='height:30px'/></a>
+<a href='https://github.com/naturalcrit/homebrewery' target='_blank' title='Github' style='color: black; padding-left: 5px;'><img src='/assets/github.png' style='height:30px'/></a>
+<a href='https://patreon.com/NaturalCrit' target='_blank' title='Patreon' style='color: black; padding-left: 5px;'><img src='/assets/patreon.png' style='height:30px'/></a>
+<a href='https://www.reddit.com/r/homebrewery/' target='_blank' title='Reddit' style='color: black; padding-left: 5px;'><img src='/assets/reddit.png' style='height:30px'/></a>
+}}
+
 \page
 
 ## Markdown+

client/homebrew/pages/newPage/newPage.jsx

@@ -157,45 +157,24 @@ const NewPage = createClass({
 			const index = brew.text.indexOf('```\n\n');
 			brew.style = `${brew.style ? `${brew.style}\n` : ''}${brew.text.slice(7, index - 1)}`;
 			brew.text = brew.text.slice(index + 5);
-		};
+		}
 
 		brew.pageCount=((brew.renderer=='legacy' ? brew.text.match(/\\page/g) : brew.text.match(/^\\page$/gm)) || []).length + 1;
 
-		if(this.state.saveGoogle) {
-			const res = await request
-			.post('/api/newGoogle/')
+		const res = await request
+			.post(`/api${this.state.saveGoogle ? '?transferToGoogle=true' : ''}`)
 			.send(brew)
 			.catch((err)=>{
-				console.log(err.status === 401
-					? 'Not signed in!'
-					: 'Error Creating New Google Brew!');
+				console.log(err);
 				this.setState({ isSaving: false, errors: err });
-				return;
 			});
+		if(!res) return;
 
-			brew = res.body;
-			localStorage.removeItem(BREWKEY);
-			localStorage.removeItem(STYLEKEY);
-			localStorage.removeItem(METAKEY);
-			window.location = `/edit/${brew.googleId}${brew.editId}`;
-		} else {
-			request.post('/api')
-			.send(brew)
-			.end((err, res)=>{
-				if(err){
-					this.setState({
-						isSaving : false
-					});
-					return;
-				}
-				window.onbeforeunload = function(){};
-				brew = res.body;
-				localStorage.removeItem(BREWKEY);
-				localStorage.removeItem(STYLEKEY);
-				localStorage.removeItem(METAKEY);
-				window.location = `/edit/${brew.editId}`;
-			});
-		}
+		brew = res.body;
+		localStorage.removeItem(BREWKEY);
+		localStorage.removeItem(STYLEKEY);
+		localStorage.removeItem(METAKEY);
+		window.location = `/edit/${brew.googleId ?? ''}${brew.editId}`;
 	},
 
 	renderSaveButton : function(){
@@ -208,26 +187,26 @@ const NewPage = createClass({
 				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.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)){
+			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}>

client/homebrew/pages/userPage/userPage.jsx

@@ -1,10 +1,9 @@
-require('./userPage.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
 const cx    = require('classnames');
 
-const moment = require('moment');
+const ListPage = require('../basePages/listPage/listPage.jsx');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
@@ -12,180 +11,59 @@ const Navbar = require('../../navbar/navbar.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 const Account = require('../../navbar/account.navitem.jsx');
 const NewBrew = require('../../navbar/newbrew.navitem.jsx');
-const BrewItem = require('./brewItem/brewItem.jsx');
 const HelpNavItem = require('../../navbar/help.navitem.jsx');
 
-// const brew = {
-// 	title   : 'SUPER Long title woah now',
-// 	authors : []
-// };
-
-//const BREWS = _.times(25, ()=>{ return brew;});
-
-
 const UserPage = createClass({
 	displayName     : 'UserPage',
 	getDefaultProps : function() {
 		return {
 			username : '',
 			brews    : [],
+			query    : ''
 		};
 	},
 	getInitialState : function() {
-		return {
-			sortType     : 'alpha',
-			sortDir      : 'asc',
-			filterString : ''
-		};
-	},
-	getUsernameWithS : function() {
-		if(this.props.username.endsWith('s'))
-			return `${this.props.username}'`;
-		return `${this.props.username}'s`;
-	},
+		const usernameWithS = this.props.username + (this.props.username.endsWith('s') ? `'` : `'s`);
 
-	renderBrews : function(brews){
-		if(!brews || !brews.length) return <div className='noBrews'>No Brews.</div>;
-
-		const sortedBrews = this.sortBrews(brews);
-
-		return _.map(sortedBrews, (brew, idx)=>{
-			return <BrewItem brew={brew} key={idx}/>;
-		});
-	},
-
-	sortBrewOrder : function(brew){
-		if(!brew.title){brew.title = 'No Title';}
-		const mapping = {
-			'alpha'   : _.deburr(brew.title.toLowerCase()),
-			'created' : moment(brew.createdAt).format(),
-			'updated' : moment(brew.updatedAt).format(),
-			'views'   : brew.views,
-			'latest'  : moment(brew.lastViewed).format()
-		};
-		return mapping[this.state.sortType];
-	},
-
-	sortBrews : function(brews){
-		return _.orderBy(brews, (brew)=>{ return this.sortBrewOrder(brew); }, this.state.sortDir);
-	},
-
-	handleSortOptionChange : function(event){
-		this.setState({
-			sortType : event.target.value
-		});
-	},
-
-	handleSortDirChange : function(event){
-		this.setState({
-			sortDir : `${(this.state.sortDir == 'asc' ? 'desc' : 'asc')}`
-		});
-	},
-
-	renderSortOption : function(sortTitle, sortValue){
-		return <td>
-				  <button
-					  value={`${sortValue}`}
-					  onClick={this.handleSortOptionChange}
-					  className={`sortOption ${(this.state.sortType == sortValue ? 'active' : '')}`}
-				  >
-  					{`${sortTitle}`}
-		 		  </button>
-		  </td>;
-	},
-
-	handleFilterTextChange : function(e){
-		this.setState({
-			filterString : e.target.value
-		});
-		return;
-	},
-
-	renderFilterOption : function(){
-		return <td>
-			<label className='filterOption'>
-				<i className='fas fa-search'></i>
-				<input
-					type='search'
-					placeholder='search title/description'
-					onChange={this.handleFilterTextChange}
-				/>
-			</label>
-		</td>;
-	},
-
-	renderSortOptions : function(){
-		return <div className='sort-container'>
-			<table>
-				<tbody>
-					<tr>
-						<td>
-							<h6>Sort by :</h6>
-						</td>
-						{this.renderSortOption('Title', 'alpha')}
-						{this.renderSortOption('Created Date', 'created')}
-						{this.renderSortOption('Updated Date', 'updated')}
-						{this.renderSortOption('Views', 'views')}
-						{/* {this.renderSortOption('Latest', 'latest')} */}
-				    	<td>
-							<h6>Direction :</h6>
-						</td>
-						<td>
-							<button
-								onClick={this.handleSortDirChange}
-								className='sortDir'
-							>
-								{`${(this.state.sortDir == 'asc' ? '\u25B2 ASC' : '\u25BC DESC')}`}
-							</button>
-						</td>
-						{this.renderFilterOption()}
-					</tr>
-				</tbody>
-			</table>
-		</div>;
-	},
-
-	getSortedBrews : function(){
-		const testString = _.deburr(this.state.filterString).toLowerCase();
-		const brewCollection = this.state.filterString ? _.filter(this.props.brews, (brew)=>{
-			return (_.deburr(brew.title).toLowerCase().includes(testString)) ||
-			(_.deburr(brew.description).toLowerCase().includes(testString));
-		}) : this.props.brews;
-		return _.groupBy(brewCollection, (brew)=>{
+		const brews = _.groupBy(this.props.brews, (brew)=>{
 			return (brew.published ? 'published' : 'private');
 		});
+
+		const brewCollection = [
+			{
+				title : `${usernameWithS} published brews`,
+				class : 'published',
+				brews : brews.published
+			}
+		];
+		if(this.props.username == global.account?.username){
+			brewCollection.push(
+				{
+					title : `${usernameWithS} unpublished brews`,
+					class : 'unpublished',
+					brews : brews.private
+				}
+			);
+		}
+
+		return {
+			brewCollection : brewCollection
+		};
+	},
+
+	navItems : function() {
+		return <Navbar>
+			<Nav.section>
+				<NewBrew />
+				<HelpNavItem />
+				<RecentNavItem />
+				<Account />
+			</Nav.section>
+		</Navbar>;
 	},
 
 	render : function(){
-		const brews = this.getSortedBrews();
-
-		return <div className='userPage sitePage'>
-			<link href='/themes/5ePhbLegacy.style.css' rel='stylesheet'/>
-			<Navbar>
-				<Nav.section>
-					<NewBrew />
-					<HelpNavItem />
-					<RecentNavItem />
-					<Account />
-				</Nav.section>
-			</Navbar>
-
-			<div className='content V3'>
-				<div className='phb'>
-					{this.renderSortOptions()}
-					<div className='published'>
-						<h1>{this.getUsernameWithS()} published brews</h1>
-						{this.renderBrews(brews.published)}
-					</div>
-					{this.props.username == global.account?.username &&
-						<div className='unpublished'>
-							<h1>{this.getUsernameWithS()} unpublished brews</h1>
-							{this.renderBrews(brews.private)}
-						</div>
-					}
-				</div>
-			</div>
-		</div>;
+		return <ListPage brewCollection={this.state.brewCollection} navItems={this.navItems()} query={this.props.query}></ListPage>;
 	}
 });
 

client/template.js

@@ -1,4 +1,6 @@
 module.exports = async(name, title = '', props = {})=>{
+	const HOMEBREWERY_PUBLIC_URL=props.config.publicUrl;
+
 	return `
 <!DOCTYPE html>
 <html>
@@ -7,6 +9,13 @@ module.exports = async(name, title = '', props = {})=>{
 		<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
 		<link href=${`/${name}/bundle.css`} rel='stylesheet' />
 		<link rel="icon" href="/assets/homebrew/favicon.ico" type="image/x-icon" />
+		<meta property="og:title" content="${props.brew?.title || 'Homebrewery - Untitled Brew'}">
+		<meta property="og:url" content="${HOMEBREWERY_PUBLIC_URL}/${props.brew?.shareId ? `share/${props.brew.shareId}` : ''}">
+		<meta property="og:image" content="${props.brew?.thumbnail || `${HOMEBREWERY_PUBLIC_URL}/thumbnail.png`}">
+		<meta property="og:description" content="${props.brew?.description || 'No description.'}">
+		<meta property="og:site_name" content="The Homebrewery - Make your Homebrew content look legit!">
+		<meta property="og:type" content="article">
+		<meta name="twitter:card" content="summary_large_image">
 		<title>${title.length ? `${title} - The Homebrewery`: 'The Homebrewery - NaturalCrit'}</title>
 	</head>
 	<body>

config/default.json

@@ -3,5 +3,7 @@
 	"naturalcrit_url" : "local.naturalcrit.com:8010",
 	"secret" : "secret",
 	"web_port" : 8000,
-	"enable_v3" : true
+	"enable_v3" : true,
+	"local_environments" : ["docker", "local"],
+	"publicUrl" : "https://homebrewery.naturalcrit.com"
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "homebrewery",
   "description": "Create authentic looking D&D homebrews using only markdown",
-  "version": "3.0.7",
+  "version": "3.1.1",
   "engines": {
     "node": "16.11.x"
   },
@@ -20,6 +20,9 @@
     "verify": "npm run lint && npm test",
     "test": "jest",
     "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",
+    "test:route": "jest tests/routes/static-pages.test.js --verbose",
     "phb": "node scripts/phb.js",
     "prod": "set NODE_ENV=production && npm run build",
     "postinstall": "npm run buildall",
@@ -31,6 +34,7 @@
     "build/*"
   ],
   "jest": {
+    "testTimeout": 15000,
     "modulePaths": [
       "mode_modules",
       "shared",
@@ -47,33 +51,33 @@
     ]
   },
   "dependencies": {
-    "@babel/core": "^7.17.0",
-    "@babel/plugin-transform-runtime": "^7.17.0",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
-    "body-parser": "^1.19.1",
+    "@babel/core": "^7.18.2",
+    "@babel/plugin-transform-runtime": "^7.18.2",
+    "@babel/preset-env": "^7.18.2",
+    "@babel/preset-react": "^7.17.12",
+    "body-parser": "^1.20.0",
     "classnames": "^2.3.1",
-    "codemirror": "^5.65.1",
+    "codemirror": "^5.65.5",
     "cookie-parser": "^1.4.6",
     "create-react-class": "^15.7.0",
     "dedent-tabs": "^0.10.1",
-    "express": "^4.17.2",
+    "express": "^4.18.1",
     "express-async-handler": "^1.2.0",
-    "express-static-gzip": "2.1.1",
-    "fs-extra": "10.0.0",
-    "googleapis": "94.0.0",
+    "express-static-gzip": "2.1.7",
+    "fs-extra": "10.1.0",
+    "googleapis": "101.0.0",
     "js-yaml": "^4.1.0",
     "jwt-simple": "^0.5.6",
     "less": "^3.13.1",
     "lodash": "^4.17.21",
-    "marked": "4.0.12",
+    "marked": "4.0.16",
     "marked-extended-tables": "^1.0.3",
     "markedLegacy": "npm:marked@^0.3.19",
-    "moment": "^2.29.1",
-    "mongoose": "^6.2.0",
-    "nanoid": "3.2.0",
-    "nconf": "^0.11.3",
-    "query-string": "7.1.0",
+    "moment": "^2.29.3",
+    "mongoose": "^6.3.6",
+    "nanoid": "3.3.4",
+    "nconf": "^0.12.0",
+    "query-string": "7.1.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-frame-component": "4.1.3",
@@ -83,9 +87,9 @@
     "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
   },
   "devDependencies": {
-    "eslint": "^8.8.0",
-    "eslint-plugin-react": "^7.28.0",
-    "jest": "^27.4.5",
-    "supertest": "^6.2.2"
+    "eslint": "^8.17.0",
+    "eslint-plugin-react": "^7.30.0",
+    "jest": "^28.1.1",
+    "supertest": "^6.2.3"
   }
 }

scripts/project.json

@@ -15,6 +15,7 @@
 		"codemirror/addon/fold/foldcode.js",
 		"codemirror/addon/fold/foldgutter.js",
 		"codemirror/addon/fold/xml-fold.js",
+		"codemirror/addon/scroll/scrollpastend.js",
 		"codemirror/addon/search/search.js",
 		"codemirror/addon/search/searchcursor.js",
 		"codemirror/addon/search/jump-to-line.js",

server/app.js

@@ -25,7 +25,7 @@ const getBrewFromId = asyncHandler(async (id, accessType)=>{
 	if(id.length > 12) {
 		const googleId = id.slice(0, -12);
 		id             = id.slice(-12);
-		brew = await GoogleActions.readFileMetadata(config.get('google_api_key'), googleId, id, accessType);
+		brew = await GoogleActions.getGoogleBrew(googleId, id, accessType);
 	} else {
 		brew = await HomebrewModel.get(accessType == 'edit' ? { editId: id } : { shareId: id });
 		brew = brew.toObject(); // Convert MongoDB object to standard Javascript Object
@@ -194,19 +194,36 @@ app.get('/download/:id', asyncHandler(async (req, res)=>{
 app.get('/user/:username', async (req, res, next)=>{
 	const ownAccount = req.account && (req.account.username == req.params.username);
 
-	let brews = await HomebrewModel.getByUser(req.params.username, ownAccount)
+	const fields = [
+		'title',
+		'pageCount',
+		'description',
+		'authors',
+		'published',
+		'views',
+		'shareId',
+		'editId',
+		'createdAt',
+		'updatedAt',
+		'lastViewed'
+	];
+
+	let brews = await HomebrewModel.getByUser(req.params.username, ownAccount, fields)
 	.catch((err)=>{
 		console.log(err);
 	});
 
 	if(ownAccount && req?.account?.googleId){
-		const googleBrews = await GoogleActions.listGoogleBrews(req, res)
-		.catch((err)=>{
-			console.error(err);
-		});
+		const auth = await GoogleActions.authCheck(req.account, res);
+		let googleBrews = await GoogleActions.listGoogleBrews(auth)
+			.catch((err)=>{
+				console.error(err);
+			});
 
-		if(googleBrews)
+		if(googleBrews) {
+			googleBrews = googleBrews.map((brew)=>({ ...brew, authors: [req.account.username] }));
 			brews = _.concat(brews, googleBrews);
+		}
 	}
 
 	req.brews = _.map(brews, (brew)=>{
@@ -256,9 +273,31 @@ app.get('/print/:id', asyncHandler(async (req, res, next)=>{
 	return next();
 }));
 
+const nodeEnv = config.get('node_env');
+const isLocalEnvironment = config.get('local_environments').includes(nodeEnv);
+// Local only
+if(isLocalEnvironment){
+	// Login
+	app.post('/local/login', (req, res)=>{
+		const username = req.body.username;
+		if(!username) return;
+
+		const payload = jwt.encode({ username: username, issued: new Date }, config.get('secret'));
+		return res.json(payload);
+	});
+}
+
+
+
 //Render the page
 const templateFn = require('./../client/template.js');
 app.use((req, res)=>{
+	// Create configuration object
+	const configuration = {
+		local       : isLocalEnvironment,
+		publicUrl   : config.get('publicUrl') ?? '',
+		environment : nodeEnv
+	};
 	const props = {
 		version     : require('./../package.json').version,
 		url         : req.originalUrl,
@@ -266,7 +305,8 @@ app.use((req, res)=>{
 		brews       : req.brews,
 		googleBrews : req.googleBrews,
 		account     : req.account,
-		enable_v3   : config.get('enable_v3')
+		enable_v3   : config.get('enable_v3'),
+		config      : configuration
 	};
 	const title = req.brew ? req.brew.title : '';
 	templateFn('homebrew', title, props)

server/googleActions.js

@@ -5,7 +5,20 @@ const { nanoid } = require('nanoid');
 const token = require('./token.js');
 const config = require('./config.js');
 
-//let oAuth2Client;
+const keys = typeof(config.get('service_account')) == 'string' ?
+	JSON.parse(config.get('service_account')) :
+	config.get('service_account');
+let serviceAuth;
+try {
+	serviceAuth = google.auth.fromJSON(keys);
+	serviceAuth.scopes = [
+		'https://www.googleapis.com/auth/drive'
+	];
+} catch (err) {
+	console.warn(err);
+	console.log('Please make sure that a Google Service Account is set up properly in your config files.');
+}
+google.options({ auth: serviceAuth || config.get('google_api_key') });
 
 const GoogleActions = {
 
@@ -43,7 +56,7 @@ const GoogleActions = {
 	},
 
 	getGoogleFolder : async (auth)=>{
-		const drive = google.drive({ version: 'v3', auth: auth });
+		const drive = google.drive({ version: 'v3', auth });
 
 		fileMetadata = {
 			'name'     : 'Homebrewery',
@@ -79,17 +92,8 @@ const GoogleActions = {
 		return folderId;
 	},
 
-	listGoogleBrews : async (req, res)=>{
-
-		oAuth2Client = GoogleActions.authCheck(req.account, res);
-
-		//TODO: Change to service account to allow non-owners to view published files.
-		// Requires a driveId parameter in the drive.files.list command
-		// const keys = JSON.parse(config.get('service_account'));
-		// const auth = google.auth.fromJSON(keys);
-		// auth.scopes = ['https://www.googleapis.com/auth/drive'];
-
-		const drive = google.drive({ version: 'v3', auth: oAuth2Client });
+	listGoogleBrews : async (auth)=>{
+		const drive = google.drive({ version: 'v3', auth });
 
 		const obj = await drive.files.list({
 			pageSize : 1000,
@@ -97,18 +101,18 @@ const GoogleActions = {
 			q        : 'mimeType != \'application/vnd.google-apps.folder\' and trashed = false'
 		})
 		.catch((err)=>{
-	    console.log(`Error Listing Google Brews`);
+			console.log(`Error Listing Google Brews`);
 			console.error(err);
 			throw (err);
 			//TODO: Should break out here, but continues on for some reason.
-	  });
+		});
 
 		if(!obj.data.files.length) {
-	    console.log('No files found.');
-	  }
+			console.log('No files found.');
+		}
 
 		const brews = obj.data.files.map((file)=>{
-	    return {
+			return {
 				text        : '',
 				shareId     : file.properties.shareId,
 				editId      : file.properties.editId,
@@ -122,65 +126,49 @@ const GoogleActions = {
 				views       : parseInt(file.properties.views),
 				tags        : '',
 				published   : file.properties.published ? file.properties.published == 'true' : false,
-				authors     : [req.account.username],	//TODO: properly save and load authors to google drive
-				systems     : []
+				systems     : [],
+				thumbnail   : file.properties.thumbnail
 			};
 		});
 	  return brews;
 	},
 
-	existsGoogleBrew : async (auth, id)=>{
-		const drive = google.drive({ version: 'v3', auth: auth });
+	updateGoogleBrew : async (brew)=>{
+		const drive = google.drive({ version: 'v3' });
 
-		const result = await drive.files.get({ fileId: id })
-		.catch((err)=>{
-			console.log('error checking file exists...');
-			console.error(err);
-			return false;
-		});
-
-		if(result){return true;}
-
-		return false;
-	},
-
-	updateGoogleBrew : async (auth, brew)=>{
-		const drive = google.drive({ version: 'v3', auth: auth });
-
-		if(await GoogleActions.existsGoogleBrew(auth, brew.googleId) == true) {
-			await drive.files.update({
-				fileId   : brew.googleId,
-				resource : {
-					name        : `${brew.title}.txt`,
-					description : `${brew.description}`,
-					properties  : {
-						title     : brew.title,
-						published : brew.published,
-						version   : brew.version,
-						renderer  : brew.renderer,
-						tags      : brew.tags,
-						pageCount : brew.pageCount,
-						systems   : brew.systems.join()
-					}
-				},
-				media : {
-					mimeType : 'text/plain',
-					body     : brew.text
+		await drive.files.update({
+			fileId   : brew.googleId,
+			resource : {
+				name        : `${brew.title}.txt`,
+				description : `${brew.description}`,
+				properties  : {
+					title     : brew.title,
+					published : brew.published,
+					version   : brew.version,
+					renderer  : brew.renderer,
+					tags      : brew.tags,
+					pageCount : brew.pageCount,
+					systems   : brew.systems.join(),
+					thumbnail : brew.thumbnail
 				}
-			})
-			.catch((err)=>{
-				console.log('Error saving to google');
-				console.error(err);
-				throw (err);
-				//return res.status(500).send('Error while saving');
-			});
-		}
+			},
+			media : {
+				mimeType : 'text/plain',
+				body     : brew.text
+			}
+		})
+		.catch((err)=>{
+			console.log('Error saving to google');
+			console.error(err);
+			throw (err);
+			//return res.status(500).send('Error while saving');
+		});
 
 		return (brew);
 	},
 
 	newGoogleBrew : async (auth, brew)=>{
-		const drive = google.drive({ version: 'v3', auth: auth });
+		const drive = google.drive({ version: 'v3', auth });
 
 		const media = {
 			mimeType : 'text/plain',
@@ -194,12 +182,13 @@ const GoogleActions = {
 			'description' : `${brew.description}`,
 			'parents'     : [folderId],
 			'properties'  : {								//AppProperties is not accessible
-				'shareId'   : nanoid(12),
-				'editId'    : nanoid(12),
+				'shareId'   : brew.shareId || nanoid(12),
+				'editId'    : brew.editId || nanoid(12),
 				'title'     : brew.title,
 				'views'     : '0',
 				'pageCount' : brew.pageCount,
-				'renderer'  : brew.renderer || 'legacy'
+				'renderer'  : brew.renderer || 'legacy',
+				'thumbnail' : brew.thumbnail || ''
 			}
 		};
 
@@ -248,9 +237,8 @@ const GoogleActions = {
 		return newHomebrew;
 	},
 
-	readFileMetadata : async (auth, id, accessId, accessType)=>{
-
-		const drive = google.drive({ version: 'v3', auth: auth });
+	getGoogleBrew : async (id, accessId, accessType)=>{
+		const drive = google.drive({ version: 'v3' });
 
 		const obj = await drive.files.get({
 			fileId : id,
@@ -269,16 +257,7 @@ const GoogleActions = {
 				throw ('Share ID does not match');
 			}
 
-			//Access file using service account. Using API key only causes "automated query" lockouts after a while.
-
-			const keys = typeof(config.get('service_account')) == 'string' ?
-				JSON.parse(config.get('service_account')) :
-				config.get('service_account');
-
-			const serviceAuth = google.auth.fromJSON(keys);
-			serviceAuth.scopes = ['https://www.googleapis.com/auth/drive'];
-
-			const serviceDrive = google.drive({ version: 'v3', auth: serviceAuth });
+			const serviceDrive = google.drive({ version: 'v3' });
 
 			const file = await serviceDrive.files.get({
 				fileId : id,
@@ -310,6 +289,7 @@ const GoogleActions = {
 				views      : parseInt(obj.data.properties.views) || 0, //brews with no view parameter will return undefined
 				version    : parseInt(obj.data.properties.version) || 0,
 				renderer   : obj.data.properties.renderer ? obj.data.properties.renderer : 'legacy',
+				thumbnail  : obj.data.properties.thumbnail || '',
 
 				gDrive   : true,
 				googleId : id
@@ -319,10 +299,8 @@ const GoogleActions = {
 		}
 	},
 
-	deleteGoogleBrew : async (req, res, id)=>{
-
-		oAuth2Client = GoogleActions.authCheck(req.account, res);
-		const drive = google.drive({ version: 'v3', auth: oAuth2Client });
+	deleteGoogleBrew : async (auth, id)=>{
+		const drive = google.drive({ version: 'v3', auth });
 
 		const googleId = id.slice(0, -12);
 		const accessId = id.slice(-12);
@@ -334,7 +312,6 @@ const GoogleActions = {
 		.catch((err)=>{
 			console.log('Error loading from Google');
 			console.error(err);
-			return;
 		});
 
 		if(obj && obj.data.properties.editId != accessId) {
@@ -349,21 +326,10 @@ const GoogleActions = {
 			console.log('Can\'t delete Google file');
 			console.error(err);
 		});
-
-		return res.status(200).send();
 	},
 
 	increaseView : async (id, accessId, accessType, brew)=>{
-		//service account because this is modifying another user's file properties
-		//so we need extended scope
-		const keys = typeof(config.get('service_account')) == 'string' ?
-			JSON.parse(config.get('service_account')) :
-			config.get('service_account');
-
-		const auth = google.auth.fromJSON(keys);
-		auth.scopes = ['https://www.googleapis.com/auth/drive'];
-
-		const drive = google.drive({ version: 'v3', auth: auth });
+		const drive = google.drive({ version: 'v3' });
 
 		await drive.files.update({
 			fileId   : brew.googleId,
@@ -380,8 +346,6 @@ const GoogleActions = {
 			console.error(err);
 			//return res.status(500).send('Error while saving');
 		});
-
-		return;
 	}
 };
 

server/homebrew.api.js

@@ -5,6 +5,7 @@ const zlib = require('zlib');
 const GoogleActions = require('./googleActions.js');
 const Markdown = require('../shared/naturalcrit/markdown.js');
 const yaml = require('js-yaml');
+const asyncHandler = require('express-async-handler');
 
 // const getTopBrews = (cb) => {
 // 	HomebrewModel.find().sort({ views: -1 }).limit(5).exec(function(err, brews) {
@@ -41,154 +42,195 @@ const excludePropsFromUpdate = (brew)=>{
 	const propsToExclude = ['views', 'lastViewed'];
 	for (const prop of propsToExclude) {
 		delete brew[prop];
-	};
+	}
 	return brew;
 };
 
-const newBrew = (req, res)=>{
-	const brew = req.body;
-
+const beforeNewSave = (account, brew)=>{
 	if(!brew.title) {
 		brew.title = getGoodBrewTitle(brew.text);
 	}
 
-	brew.authors = (req.account) ? [req.account.username] : [];
+	brew.authors = (account) ? [account.username] : [];
 	brew.text = mergeBrewText(brew);
+};
 
-	delete brew.editId;
-	delete brew.shareId;
-	delete brew.googleId;
-
+const newLocalBrew = async (brew)=>{
 	const newHomebrew = new HomebrewModel(brew);
 	// Compress brew text to binary before saving
 	newHomebrew.textBin = zlib.deflateRawSync(newHomebrew.text);
 	// Delete the non-binary text field since it's not needed anymore
 	newHomebrew.text = undefined;
 
-	newHomebrew.save((err, obj)=>{
-		if(err) {
-			console.error(err, err.toString(), err.stack);
-			return res.status(500).send(`Error while creating new brew, ${err.toString()}`);
-		}
-
-		obj = obj.toObject();
-		obj.gDrive = false;
-		return res.status(200).send(obj);
-	});
-};
-
-const updateBrew = (req, res)=>{
-	HomebrewModel.get({ editId: req.params.id })
-		.then((brew)=>{
-			const updateBrew = excludePropsFromUpdate(req.body);
-			brew = _.merge(brew, updateBrew);
-			brew.text = mergeBrewText(brew);
-
-			// Compress brew text to binary before saving
-			brew.textBin = zlib.deflateRawSync(brew.text);
-			// Delete the non-binary text field since it's not needed anymore
-			brew.text = undefined;
-			brew.updatedAt = new Date();
-
-			if(req.account) {
-				brew.authors = _.uniq(_.concat(brew.authors, req.account.username));
-			}
-
-			brew.markModified('authors');
-			brew.markModified('systems');
-
-			brew.save((err, obj)=>{
-				if(err) throw err;
-				return res.status(200).send(obj);
-			});
-		})
+	let saved = await newHomebrew.save()
 		.catch((err)=>{
-			console.error(err);
-			return res.status(500).send('Error while saving');
+			console.error(err, err.toString(), err.stack);
+			throw `Error while creating new brew, ${err.toString()}`;
 		});
+
+	saved = saved.toObject();
+	saved.gDrive = false;
+	return saved;
 };
 
-const deleteBrew = (req, res)=>{
-	HomebrewModel.find({ editId: req.params.id }, (err, objs)=>{
-		if(!objs.length || err) {
-			return res.status(404).send('Can not find homebrew with that id');
-		}
+const newGoogleBrew = async (account, brew, res)=>{
+	const oAuth2Client = GoogleActions.authCheck(account, res);
 
-		const brew = objs[0];
-
-		if(req.account) {
-			// Remove current user as author
-			brew.authors = _.pull(brew.authors, req.account.username);
-			brew.markModified('authors');
-		}
-
-		if(brew.authors.length === 0) {
-			// Delete brew if there are no authors left
-			brew.remove((err)=>{
-				if(err) return res.status(500).send('Error while removing');
-				return res.status(200).send();
-			});
-		} else {
-			// Otherwise, save the brew with updated author list
-			brew.save((err, savedBrew)=>{
-				if(err) throw err;
-				return res.status(200).send(savedBrew);
-			});
-		}
-	});
+	return await GoogleActions.newGoogleBrew(oAuth2Client, brew);
 };
 
-const newGoogleBrew = async (req, res, next)=>{
-	let oAuth2Client;
-
-	try {	oAuth2Client = GoogleActions.authCheck(req.account, res); } catch (err) { return res.status(err.status).send(err.message); }
-
+const newBrew = async (req, res)=>{
 	const brew = req.body;
-
-	if(!brew.title) {
-		brew.title = getGoodBrewTitle(brew.text);
-	}
-
-	brew.authors = (req.account) ? [req.account.username] : [];
-	brew.text = mergeBrewText(brew);
+	const { transferToGoogle } = req.query;
 
 	delete brew.editId;
 	delete brew.shareId;
 	delete brew.googleId;
 
-	req.body = brew;
+	beforeNewSave(req.account, brew);
 
-	try {
-		const newBrew = await GoogleActions.newGoogleBrew(oAuth2Client, brew);
-		return res.status(200).send(newBrew);
-	} catch (err) {
-		return res.status(err.response.status).send(err);
+	let saved;
+	if(transferToGoogle) {
+		saved = await newGoogleBrew(req.account, brew, res)
+			.catch((err)=>{
+				res.status(err.status || err.response.status).send(err.message || err);
+			});
+	} else {
+		saved = await newLocalBrew(brew)
+			.catch((err)=>{
+				res.status(500).send(err);
+			});
+	}
+	if(!saved) return;
+	return res.status(200).send(saved);
+};
+
+const updateBrew = async (req, res)=>{
+	let brew = excludePropsFromUpdate(req.body);
+	const { transferToGoogle, transferFromGoogle } = req.query;
+
+	let saved;
+	if(brew.googleId && transferFromGoogle) {
+		beforeNewSave(req.account, brew);
+
+		saved = await newLocalBrew(brew)
+			.catch((err)=>{
+				console.error(err);
+				res.status(500).send(err);
+			});
+		if(!saved) return;
+
+		await deleteGoogleBrew(req.account, `${brew.googleId}${brew.editId}`, res)
+			.catch((err)=>{
+				console.error(err);
+				res.status(err.status || err.response.status).send(err.message || err);
+			});
+	} else if(!brew.googleId && transferToGoogle) {
+		saved = await newGoogleBrew(req.account, brew, res)
+			.catch((err)=>{
+				console.error(err);
+				res.status(err.status || err.response.status).send(err.message || err);
+			});
+		if(!saved) return;
+
+		await deleteLocalBrew(req.account, brew.editId)
+			.catch((err)=>{
+				console.error(err);
+				res.status(err.status).send(err.message);
+			});
+	} else if(brew.googleId) {
+		brew.text = mergeBrewText(brew);
+
+		saved = await GoogleActions.updateGoogleBrew(brew)
+			.catch((err)=>{
+				console.error(err);
+				res.status(err.response?.status || 500).send(err);
+			});
+	} else {
+		const dbBrew = await HomebrewModel.get({ editId: req.params.id })
+			.catch((err)=>{
+				console.error(err);
+				return res.status(500).send('Error while saving');
+			});
+
+		brew = _.merge(dbBrew, brew);
+		brew.text = mergeBrewText(brew);
+
+		// Compress brew text to binary before saving
+		brew.textBin = zlib.deflateRawSync(brew.text);
+		// Delete the non-binary text field since it's not needed anymore
+		brew.text = undefined;
+		brew.updatedAt = new Date();
+
+		if(req.account) {
+			brew.authors = _.uniq(_.concat(brew.authors, req.account.username));
+		}
+
+		brew.markModified('authors');
+		brew.markModified('systems');
+
+		saved = await brew.save();
+	}
+	if(!saved) return;
+
+	if(!res.headersSent) return res.status(200).send(saved);
+};
+
+const deleteBrew = async (req, res)=>{
+	if(req.params.id.length > 12) {
+		const deleted = await deleteGoogleBrew(req.account, req.params.id, res)
+			.catch((err)=>{
+				res.status(500).send(err);
+			});
+		if(deleted) return res.status(200).send();
+	} else {
+		const deleted = await deleteLocalBrew(req.account, req.params.id)
+			.catch((err)=>{
+				res.status(err.status).send(err.message);
+			});
+		if(deleted) return res.status(200).send(deleted);
+		return res.status(200).send();
 	}
 };
 
-const updateGoogleBrew = async (req, res, next)=>{
-	let oAuth2Client;
+const deleteLocalBrew = async (account, id)=>{
+	const brew = await HomebrewModel.findOne({ editId: id });
+	if(!brew) {
+		throw { status: 404, message: 'Can not find homebrew with that id' };
+	}
 
-	try {	oAuth2Client = GoogleActions.authCheck(req.account, res); } catch (err) { return res.status(err.status).send(err.message); }
+	if(account) {
+		// Remove current user as author
+		brew.authors = _.pull(brew.authors, account.username);
+		brew.markModified('authors');
+	}
 
-	const brew = excludePropsFromUpdate(req.body);
-	brew.text = mergeBrewText(brew);
-
-	try {
-		const updatedBrew = await GoogleActions.updateGoogleBrew(oAuth2Client, brew);
-		return res.status(200).send(updatedBrew);
-	} catch (err) {
-		return res.status(err.response?.status || 500).send(err);
+	if(brew.authors.length === 0) {
+		// Delete brew if there are no authors left
+		await brew.remove()
+			.catch((err)=>{
+				console.error(err);
+				throw { status: 500, message: 'Error while removing' };
+			});
+	} else {
+		// Otherwise, save the brew with updated author list
+		return await brew.save()
+			.catch((err)=>{
+				throw { status: 500, message: err };
+			});
 	}
 };
 
-router.post('/api', newBrew);
-router.post('/api/newGoogle/', newGoogleBrew);
-router.put('/api/:id', updateBrew);
-router.put('/api/update/:id', updateBrew);
-router.put('/api/updateGoogle/:id', updateGoogleBrew);
-router.delete('/api/:id', deleteBrew);
-router.get('/api/remove/:id', deleteBrew);
-router.get('/api/removeGoogle/:id', (req, res)=>{GoogleActions.deleteGoogleBrew(req, res, req.params.id);});
+const deleteGoogleBrew = async (account, id, res)=>{
+	const auth = await GoogleActions.authCheck(account, res);
+	await GoogleActions.deleteGoogleBrew(auth, id);
+	return true;
+};
+
+router.post('/api', asyncHandler(newBrew));
+router.put('/api/:id', asyncHandler(updateBrew));
+router.put('/api/update/:id', asyncHandler(updateBrew));
+router.delete('/api/:id', asyncHandler(deleteBrew));
+router.get('/api/remove/:id', asyncHandler(deleteBrew));
 
 module.exports = router;

server/homebrew.model.js

@@ -17,6 +17,7 @@ const HomebrewSchema = mongoose.Schema({
 	renderer    : { type: String, default: '' },
 	authors     : [String],
 	published   : { type: Boolean, default: false },
+	thumbnail   : { type: String, default: '' },
 
 	createdAt  : { type: Date, default: Date.now },
 	updatedAt  : { type: Date, default: Date.now },
@@ -36,9 +37,9 @@ HomebrewSchema.statics.increaseView = async function(query) {
 	return brew;
 };
 
-HomebrewSchema.statics.get = function(query){
+HomebrewSchema.statics.get = function(query, fields=null){
 	return new Promise((resolve, reject)=>{
-		Homebrew.find(query, (err, brews)=>{
+		Homebrew.find(query, fields, null, (err, brews)=>{
 			if(err || !brews.length) return reject('Can not find brew');
 			if(!_.isNil(brews[0].textBin)) {			// Uncompress zipped text field
 				unzipped = zlib.inflateRawSync(brews[0].textBin);
@@ -51,13 +52,13 @@ HomebrewSchema.statics.get = function(query){
 	});
 };
 
-HomebrewSchema.statics.getByUser = function(username, allowAccess=false){
+HomebrewSchema.statics.getByUser = function(username, allowAccess=false, fields=null){
 	return new Promise((resolve, reject)=>{
 		const query = { authors: username, published: true };
 		if(allowAccess){
 			delete query.published;
 		}
-		Homebrew.find(query).lean().exec((err, brews)=>{ //lean() converts results to JSObjects
+		Homebrew.find(query, fields).lean().exec((err, brews)=>{ //lean() converts results to JSObjects
 			if(err) return reject('Can not find brew');
 			return resolve(brews);
 		});

shared/naturalcrit/codeEditor/codeEditor.jsx

@@ -30,6 +30,8 @@ if(typeof navigator !== 'undefined'){
 	// require('codemirror/addon/edit/trailingspace.js');
 	//Active line highlighting
 	// require('codemirror/addon/selection/active-line.js');
+	//Scroll past last line
+	require('codemirror/addon/scroll/scrollpastend.js');
 	//Auto-closing
 	//XML code folding is a requirement of the auto-closing tag feature and is not enabled
 	require('codemirror/addon/fold/xml-fold.js');
@@ -98,6 +100,7 @@ const CodeEditor = createClass({
 			indentWithTabs    : true,
 			tabSize           : 2,
 			historyEventDelay : 250,
+			scrollPastEnd     : true,
 			extraKeys         : {
 				'Ctrl-B'           : this.makeBold,
 				'Cmd-B'            : this.makeBold,

shared/naturalcrit/codeEditor/codeEditor.less

@@ -3,6 +3,11 @@
 @import (less) 'codemirror/addon/search/matchesonscrollbar.css';
 @import (less) 'codemirror/addon/dialog/dialog.css';
 
+@keyframes sourceMoveAnimation {
+	50%  {background-color: red;   color: white;}
+	100% {background-color: unset; color: unset;}
+}
+
 .codeEditor{
   .CodeMirror-foldmarker {
     font-family: inherit;
@@ -10,6 +15,11 @@
     font-weight: 600;
   }
 
+  .sourceMoveFlash .CodeMirror-line{
+    animation-name: sourceMoveAnimation;
+    animation-duration: 0.4s;
+  }
+
   //.cm-tab {
   //  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAQAAACOs/baAAAARUlEQVR4nGJgIAG8JkXxUAcCtDWemcGR1lY4MvgzCEKY7jSBjgxBDAG09UEQzAe0AMwMHrSOAwEGRtpaMIwAAAAA//8DAG4ID9EKs6YqAAAAAElFTkSuQmCC) no-repeat right;
   //}
@@ -19,4 +29,4 @@
   //    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAQAgMAAABW5NbuAAAACVBMVEVHcEwAAAAAAAAWawmTAAAAA3RSTlMAPBJ6PMxpAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAFUlEQVQI12NgwACcCQysASAEZGAAACMuAX06aCQUAAAAAElFTkSuQmCC) no-repeat right;
   //  }
   //}
-}
+}

shared/naturalcrit/splitPane/splitPane.jsx

@@ -10,43 +10,77 @@ const SplitPane = createClass({
 		return {
 			storageKey   : 'naturalcrit-pane-split',
 			onDragFinish : function(){} //fires when dragging
-
 		};
 	},
+
 	getInitialState : function() {
 		return {
-			size       : null,
-			isDragging : false
+			currentDividerPos : null,
+			windowWidth       : 0,
+			isDragging        : false,
+			moveSource        : false,
+			moveBrew          : false,
+			showMoveArrows    : true
 		};
 	},
+
 	componentDidMount : function() {
-		const paneSize = window.localStorage.getItem(this.props.storageKey);
-		if(paneSize){
+		const dividerPos = window.localStorage.getItem(this.props.storageKey);
+		if(dividerPos){
 			this.setState({
-				size : paneSize
+				currentDividerPos : this.limitPosition(dividerPos, 0.1*(window.innerWidth-13), 0.9*(window.innerWidth-13)),
+				userSetDividerPos : dividerPos,
+				windowWidth       : window.innerWidth
+			});
+		} else {
+			this.setState({
+				currentDividerPos : window.innerWidth / 2,
+				userSetDividerPos : window.innerWidth / 2
 			});
 		}
+		window.addEventListener('resize', this.handleWindowResize);
+	},
+
+	componentWillUnmount : function() {
+		window.removeEventListener('resize', this.handleWindowResize);
+	},
+
+	handleWindowResize : function() {
+		// Allow divider to increase in size to last user-set position
+		// Limit current position to between 10% and 90% of visible space
+		const newLoc = this.limitPosition(this.state.userSetDividerPos, 0.1*(window.innerWidth-13), 0.9*(window.innerWidth-13));
+
+		this.setState({
+			currentDividerPos : newLoc,
+			windowWidth       : window.innerWidth
+		});
+	},
+
+	limitPosition : function(x, min = 1, max = window.innerWidth - 13) {
+		const result = Math.round(Math.min(max, Math.max(min, x)));
+		return result;
 	},
 
 	handleUp : function(){
 		if(this.state.isDragging){
-			this.props.onDragFinish(this.state.size);
-			window.localStorage.setItem(this.props.storageKey, this.state.size);
+			this.props.onDragFinish(this.state.currentDividerPos);
+			window.localStorage.setItem(this.props.storageKey, this.state.currentDividerPos);
 		}
 		this.setState({ isDragging: false });
 	},
+
 	handleDown : function(){
 		this.setState({ isDragging: true });
 		//this.unFocus()
 	},
+
 	handleMove : function(e){
 		if(!this.state.isDragging) return;
 
-		const minWidth = 1;
-		const maxWidth = window.innerWidth - 13;
-		const newSize = Math.min(maxWidth, Math.max(minWidth, e.pageX));
+		const newSize = this.limitPosition(e.pageX);
 		this.setState({
-			size : newSize
+			currentDividerPos : newSize,
+			userSetDividerPos : newSize
 		});
 	},
 	/*
@@ -57,20 +91,58 @@ const SplitPane = createClass({
 			window.getSelection().removeAllRanges();
 		}
 	},
-*/
+	*/
+
+	setMoveArrows : function(newState) {
+		if(this.state.showMoveArrows != newState){
+			this.setState({
+				showMoveArrows : newState
+			});
+		}
+	},
+
+	renderMoveArrows : function(){
+		if(this.state.showMoveArrows) {
+			return <>
+				<div className='arrow left'
+					style={{ left: this.state.currentDividerPos-4 }}
+					onClick={()=>this.setState({ moveSource: !this.state.moveSource })} >
+					<i className='fas fa-arrow-left' />
+				</div>
+				<div className='arrow right'
+					style={{ left: this.state.currentDividerPos-4 }}
+					onClick={()=>this.setState({ moveBrew: !this.state.moveBrew })} >
+					<i className='fas fa-arrow-right' />
+				</div>
+			</>;
+		}
+	},
+
 	renderDivider : function(){
-		return <div className='divider' onMouseDown={this.handleDown} >
-			<div className='dots'>
-				<i className='fas fa-circle' />
-				<i className='fas fa-circle' />
-				<i className='fas fa-circle' />
+		return <>
+			{this.renderMoveArrows()}
+			<div className='divider' onMouseDown={this.handleDown} >
+				<div className='dots'>
+					<i className='fas fa-circle' />
+					<i className='fas fa-circle' />
+					<i className='fas fa-circle' />
+				</div>
 			</div>
-		</div>;
+		</>;
 	},
 
 	render : function(){
 		return <div className='splitPane' onMouseMove={this.handleMove} onMouseUp={this.handleUp}>
-			<Pane ref='pane1' width={this.state.size}>{this.props.children[0]}</Pane>
+			<Pane
+				ref='pane1'
+				width={this.state.currentDividerPos}
+			>
+				{React.cloneElement(this.props.children[0], {
+					moveBrew      : this.state.moveBrew,
+					moveSource    : this.state.moveSource,
+					setMoveArrows : this.setMoveArrows
+				})}
+			</Pane>
 			{this.renderDivider()}
 			<Pane ref='pane2' isDragging={this.state.isDragging}>{this.props.children[1]}</Pane>
 		</div>;

shared/naturalcrit/splitPane/splitPane.less

@@ -13,7 +13,7 @@
 	.divider{
 		display          : table;
 		height           : 100%;
-		width            : 12px;
+		width            : 15px;
 		cursor           : ew-resize;
 		background-color : #bbb;
 		text-align       : center;
@@ -32,4 +32,28 @@
 			background-color: #999;
 		}
 	}
+	.arrow{
+		position         : absolute;
+		width            : 25px;
+		height           : 25px;
+		border           : 2px solid #bbb;
+		border-radius    : 15px;
+		text-align       : center;
+		font-size        : 1.2em;
+		cursor           : pointer;
+		background-color : #ddd;
+		z-index          : 999;
+		box-shadow      : 0 4px 5px #0000007f;
+		&.left{
+			.tooltipLeft('Jump to location in Editor');
+			top : 30px;
+		}
+		&.right{
+			.tooltipRight('Jump to location in Preview');
+			top : 60px;
+		}
+		&:hover{
+			background-color: #666;
+		}
+	}
 }

themes/5ePhb.style.less

@@ -545,7 +545,6 @@ body {
 		-webkit-column-break-after : always;
 		break-after                : always;
 		-moz-column-break-after    : always;
-		break-before               : column;
 	}
 	//Avoid breaking up
 	blockquote,table{
@@ -620,25 +619,28 @@ body {
 		border-image-width  : 47px;
 	}
 	&.decoration {
-		transform-style : preserve-3d;
+		position:relative;
 	}
 	&.decoration::before {
-		content           :'';
-		position          : absolute;
-		background-image  : @classTableDecoration;
-		background-size   : contain;
-		background-repeat : space;
-		width             : 7.75cm;
-		height            : calc(100% + 3.3cm);
-		top               : 50%;
-		left              : 50%;
-		transform         : translateY(-50%) translateX(-50%) translateZ(-1px);
-		filter            : drop-shadow(0px 0px 1px #C8C5C080)
+		content             :'';
+		position            : absolute;
+		background-image    : @classTableDecoration,
+		                      @classTableDecoration;
+		background-size     : contain, contain;
+		background-repeat   : no-repeat, no-repeat;
+		background-position : top, bottom;
+		width               : 7.75cm;
+		height              : calc(100% + 3.3cm);
+		top                 : 50%;
+		left                : 50%;
+		transform           : translateY(-50%) translateX(-50%);
+		filter              : drop-shadow(0px 0px 1px #C8C5C080);
+		z-index             : -1;
 	}
 	&.decoration.wide::before {
-		width             : calc(100% + 3.3cm);
-		height            : 7.75cm;
-		top               : calc(50% + 0.4cm);
+		width               : calc(100% + 3.3cm);
+		height              : 7.75cm;
+		background-position : left, right;
 	}
 	h5 + table{
 		margin-top : 0.2cm;
@@ -656,7 +658,7 @@ body {
 		margin-bottom : 0.3cm;
 	}
 	a{
-		display         : table;
+		display         : inline;
 		color           : inherit;
 		text-decoration : none;
 		&:hover{

themes/fonts/5e/fonts.less

@@ -77,3 +77,32 @@
 	font-weight: normal;
 	font-style: normal;
 }
+
+/* Cover Page */
+@font-face {
+	font-family: NodestoCapsCondensed;
+	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');
+	font-weight: bold;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: NodestoCapsCondensed;
+	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');
+	font-weight: bold;
+	font-style: italic;
+}