Update version to v3.0.8

Unset `:first-line` small-caps rule with *Remove Drop Cap* snippet

.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,43 @@ 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).
 
+### 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 +82,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 +93,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/editor/metadataEditor/metadataEditor.jsx

@@ -59,7 +59,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 = '/';

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,14 @@ const Homebrew = createClass({
 			}
 		};
 	},
-	componentWillMount : function() {
-		global.account = this.props.account;
+
+	getInitialState : function(){
 		global.version = this.props.version;
+		global.account = this.props.account;
 		global.enable_v3 = this.props.enable_v3;
+		return {};
 	},
+
 	render : function (){
 		return (
 			<Router location={this.props.url}>

client/homebrew/navbar/account.navitem.jsx

@@ -18,11 +18,42 @@ 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
+			document.cookie = `nc_session=;expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/;samesite=lax;${window.domain ? `domain=${window.domain}` : ''}`;
+			window.location = '/';
+		};
+	},
+
 	render : function(){
 		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>;
 		}
 
 		return <Nav.item href={`https://www.naturalcrit.com/login?redirect=${this.state.url}`} color='teal' icon='fas fa-sign-in-alt'>

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,160 @@
+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 : ''
+		};
+	},
+
+	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
+		});
+		return;
+	},
+
+	renderFilterOption : function(){
+		return <td>
+			<label>
+				<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(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)=>({

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(){

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,17 +11,8 @@ 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() {
@@ -32,160 +22,47 @@ const UserPage = createClass({
 		};
 	},
 	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()}></ListPage>;
 	}
 });
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "homebrewery",
   "description": "Create authentic looking D&D homebrews using only markdown",
-  "version": "3.0.7",
+  "version": "3.0.8",
   "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,21 +51,21 @@
     ]
   },
   "dependencies": {
-    "@babel/core": "^7.17.0",
+    "@babel/core": "^7.17.8",
     "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
-    "body-parser": "^1.19.1",
+    "body-parser": "^1.19.2",
     "classnames": "^2.3.1",
-    "codemirror": "^5.65.1",
+    "codemirror": "^5.65.2",
     "cookie-parser": "^1.4.6",
     "create-react-class": "^15.7.0",
     "dedent-tabs": "^0.10.1",
-    "express": "^4.17.2",
+    "express": "^4.17.3",
     "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.5",
+    "fs-extra": "10.0.1",
+    "googleapis": "98.0.0",
     "js-yaml": "^4.1.0",
     "jwt-simple": "^0.5.6",
     "less": "^3.13.1",
@@ -70,10 +74,10 @@
     "marked-extended-tables": "^1.0.3",
     "markedLegacy": "npm:marked@^0.3.19",
     "moment": "^2.29.1",
-    "mongoose": "^6.2.0",
-    "nanoid": "3.2.0",
+    "mongoose": "^6.2.8",
+    "nanoid": "3.3.1",
     "nconf": "^0.11.3",
-    "query-string": "7.1.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",
+    "eslint": "^8.11.0",
+    "eslint-plugin-react": "^7.29.4",
+    "jest": "^27.5.1",
     "supertest": "^6.2.2"
   }
 }

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
@@ -200,13 +200,16 @@ app.get('/user/:username', async (req, res, next)=>{
 	});
 
 	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)=>{

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,47 @@ 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     : []
 			};
 		});
 	  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()
 				}
-			})
-			.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,8 +180,8 @@ 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,
@@ -248,9 +234,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 +254,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,
@@ -319,10 +295,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 +308,6 @@ const GoogleActions = {
 		.catch((err)=>{
 			console.log('Error loading from Google');
 			console.error(err);
-			return;
 		});
 
 		if(obj && obj.data.properties.editId != accessId) {
@@ -349,21 +322,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 +342,6 @@ const GoogleActions = {
 			console.error(err);
 			//return res.status(500).send('Error while saving');
 		});
-
-		return;
 	}
 };
 

server/homebrew.api.js

@@ -41,154 +41,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;
-
-	try {	oAuth2Client = GoogleActions.authCheck(req.account, res); } catch (err) { return res.status(err.status).send(err.message); }
-
-	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);
+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' };
 	}
+
+	if(account) {
+		// Remove current user as author
+		brew.authors = _.pull(brew.authors, account.username);
+		brew.markModified('authors');
+	}
+
+	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 };
+			});
+	}
+};
+
+const deleteGoogleBrew = async (account, id, res)=>{
+	const auth = await GoogleActions.authCheck(account, res);
+	await GoogleActions.deleteGoogleBrew(auth, id);
+	return true;
 };
 
 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);});
 
 module.exports = router;

shared/naturalcrit/splitPane/splitPane.jsx

@@ -10,43 +10,69 @@ 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
 		};
 	},
+
 	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
 			});
 		}
+		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
 		});
 	},
 	/*
@@ -70,7 +96,7 @@ const SplitPane = createClass({
 
 	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}>{this.props.children[0]}</Pane>
 			{this.renderDivider()}
 			<Pane ref='pane2' isDragging={this.state.isDragging}>{this.props.children[1]}</Pane>
 		</div>;

themes/5ePhb.style.less

@@ -621,6 +621,8 @@ body {
 	}
 	&.decoration {
 		transform-style : preserve-3d;
+		z-index: -1;
+		position:relative;
 	}
 	&.decoration::before {
 		content           :'';
@@ -656,7 +658,7 @@ body {
 		margin-bottom : 0.3cm;
 	}
 	a{
-		display         : table;
+		display         : inline;
 		color           : inherit;
 		text-decoration : none;
 		&:hover{