Merge branch 'PRODUCTION' of https://github.com/naturalcrit/homebrewery into PRODUCTION

Backing up live version before v3 beta opens

.circleci/config.yml

@@ -6,8 +6,8 @@ version: 2
 jobs:
   build:
     docker:
-      - image: circleci/node:16.10.0
-      - image: circleci/mongo:4.4
+      - image: circleci/node:12.16.3
+      - image: circleci/mongo:3.4-jessie
 
     working_directory: ~/repo
 

Dockerfile

@@ -1,5 +1,4 @@
-FROM node:16.11-alpine
-RUN apk --no-cache add git
+FROM node:14.15
 
 ENV NODE_ENV=docker
 

README.FREEBSD.md

@@ -10,7 +10,7 @@ These instructions assume that you are installing to a completely new, fresh Fre
 
 2. Install wget (`pkg install -y wget`). On a fresh jail, you will be prompted to press 'Y' to set up `pkg`.
 
-3. Download the installation script (`wget --no-check-certificate https://raw.githubusercontent.com/naturalcrit/homebrewery/master/install/freebsd/install.sh`). The parameter `--no-check-certificate` is required as we haven't set up any trusted certificates/authorities yet.
+3. Download the installation script (`wget --no-check-certificate https://raw.githubusercontent.com/naturalcrit/homebrewery/master/freebsd/install.sh`). The parameter `--no-check-certificate` is required as we haven't set up any trusted certificates/authorities yet.
 
 4. Make the downloaded file executable (`chmod +x install.sh`).
 

changelog.md

@@ -3,12 +3,11 @@ h5 {
 	font-size: .35cm !important;
 }
 
-.page ul ul {
-	margin-left: 0px;
+.taskList li {
+	list-style-type : none;
 }
 
 .taskList li input {
-	list-style-type : none;
 	margin-left : -0.52cm;
 	transform: translateY(.05cm);
 	filter: brightness(1.1) drop-shadow(1px 2px 1px #222);
@@ -31,173 +30,7 @@ pre {
 }
 ```
 
-## changelog
-For a full record of development, visit our [Github Page](https://github.com/naturalcrit/homebrewery).
-
-### Saturday 18/12/2021 - v3.0.6
-{{taskList
-* [x] Fixed text wrapping for long strings in code blocks.
-
-	Fixes issues: [#1736](https://github.com/naturalcrit/homebrewery/issues/1736)
-	
-* [x] Code search/replace `CTRL F / CTRL SHIFT F`
-
-	Fixes issues: [#1201](https://github.com/naturalcrit/homebrewery/issues/1201)
-	
-* [x] Auto-closing HTML tags and curly braces `{{ }}`
-* [x] Highlight current active line
-
-	Fixes issues: [#1202](https://github.com/naturalcrit/homebrewery/issues/1202)
-
-* [x] Display tabs and trailing spaces
-
-	Fixes issues: [#1622](https://github.com/naturalcrit/homebrewery/issues/1622)
-
-* [x] Make columns even in V3 Table of Contents.
-
-	Fixes issues: [#1671](https://github.com/naturalcrit/homebrewery/issues/1671)
-	
-* [x] Fix `CTRL P` failing to print from `/new` pages.
-
-	Fixes issues: [#1815](https://github.com/naturalcrit/homebrewery/issues/1815)
-}}
-
-\page
-
-### Tuesday 07/12/2021 - v3.0.5
-{{taskList
-* [x] Fixed paragraph spacing for **note** and **descriptive** boxes in V3.
-
-	Fixes issues: [#1836](https://github.com/naturalcrit/homebrewery/issues/1836)
-
-* [x] Added a whole bunch of hotkeys:
-
-  * Page Break `CTRL + ENTER`
-  * Column Break `CTRL + SHIFT + ENTER`
-  * Bulleted Lists `CTRL + L`
-  * Numbered Lists `CTRL + SHIFT + L`
-  * Headers `CTRL + SHIFT + (1-6)`
-  * Underline `CTRL + U`
-  * Link `CTRL + K`
-  * Non-breaking space (\ ) `CTRL + .`
-  * Add Horizontal Space `CTRL + SHIFT + .`
-  * Remove Horizontal Space `CTRL + SHIFT + ,`
-  * Curly Span `CTRL + M`
-  * Curly Div `CTRL + SHIFT + M`
-
-* [x] Fixed page numbers in the editor panel getting scrambled when scrolling up and down.
-
-* [x] Faster swapping between tabs on long brews.
-
-* [x] Better error messages for common issue with Google Drive credentials expiring.
-}}
-
-### Wednesday 17/11/2021 - v3.0.4
-{{taskList
-* [x] Fixed incorrect sorting of Google brews by page count and views on the user page.
-
-	Fixes issues: [#1793](https://github.com/naturalcrit/homebrewery/issues/1793)
-
-* [x] Added code folding! Only on a page-level for now. Hotkeys `CTRL + [` and `CTRL + ]` to fold/unfold all pages. (Thanks jeddai, new contributor!)
-
-	Fixes issues: [#629](https://github.com/naturalcrit/homebrewery/issues/629)
-
-* [x] Fixed rendering issues due to the latest Chrome update to version 96. (Also thanks to jeddai!)
-
-	Fixes issues: [#1828](https://github.com/naturalcrit/homebrewery/issues/1828)
-}}
-
-### Wednesday 27/10/2021 - v3.0.3
-
-{{taskList
-* [x] Moved **Post To Reddit** button from {{fa,fa-info-circle}} **Properties** menu to the **SHARE** {{fa,fa-share-alt}} button as a dropdown.
-
-* [x] Added a  **Copy URL** button to the **SHARE** {{fa,fa-share-alt}} button as a dropdown.
-
-* [x] Fixed pages being printed directly from `/new` not recognizing the V3 renderer.
-
-	Fixes issues: [#1702](https://github.com/naturalcrit/homebrewery/issues/1702)
-
-* [x] Updated links to [r/UnearthedArcana](https://www.reddit.com/r/UnearthedArcana/) on home page.
-
-	Fixes issues: [#1744](https://github.com/naturalcrit/homebrewery/issues/1744)
-
-* [x] Added a [FAQ page](https://homebrewery.naturalcrit.com/faq).
-
-	Fixes issues: [#810](https://github.com/naturalcrit/homebrewery/issues/810)
-
-* [x] Added {{fa,fa-undo}} **Undo** and {{fa,fa-redo}} **Redo** buttons to the snippet bar.
-
-}}
-
-\column
-
-{{taskList
-
-* [x] Switching between the {{fa,fa-beer}} **Brew** and {{fa,fa-paint-brush}} **Style** tabs no longer loses your scroll position or undo history.
-
-	Fixes issues: [#1735](https://github.com/naturalcrit/homebrewery/issues/1735)
-
-* [x] Divider bar between editor and preview panels can no longer be dragged off the edge of the screen.
-
-	Fixes issues: [#1674](https://github.com/naturalcrit/homebrewery/issues/1674)
-}}
-
-
-### Wednesday 06/10/2021 - v3.0.2
-
-{{taskList
-* [x] Fixed V3 **EDITOR → QR Code** snippet not working on `/new` (unsaved) pages.
-
-	Fixes issues: [#1710](https://github.com/naturalcrit/homebrewery/issues/1710)
-
-* [x] Reorganized several snippets from the **Brew Editor** panel into the **Style Editor** panel.
-
-	Fixes issues: [Reported on Reddit](https://www.reddit.com/r/homebrewery/comments/pm6ki7/two_version_of_class_features_making_it_look_more/)
-
-* [x] Added a page counter to the right of each `\page` line in V3 to help navigate your brews. Starts counting from page 2.
-
-	Fixes issues: [#846](https://github.com/naturalcrit/homebrewery/issues/846)
-
-* [x] Moved the changelog to be accessible by clicking on the Homebrewery version number.
-
-	Fixes issues: [#1166](https://github.com/naturalcrit/homebrewery/issues/1166)
-}}
-
-### Friday, 17/09/2021 - v3.0.1
-
-{{taskList
-* [x] Updated V3 **PHB → Class Feature** snippet to use V3 syntax.
-
-	Fixes issues: [Reported on Reddit](https://www.reddit.com/r/homebrewery/comments/pm6ki7/two_version_of_class_features_making_it_look_more/)
-
-* [x] Improved V3 **PHB → Monster Stat Block** snippet and styling to allow for easier control of paragraph indentation in the Abilities text.
-
-  Fixes issues: [#181](https://github.com/naturalcrit/homebrewery/issues/181)
-
-* [x] Improved Legacy **TABLES → Split Table** snippet by removing unneeded column-break backticks.
-
-  Fixes issues: [#844](https://github.com/naturalcrit/homebrewery/issues/844)
-
-* [x] Changed block elements to use CSS `width` instead of `min-width`. This should make custom styles behave more predictably when trying to resize items.
-
-  Fixes issues: [Reported on Reddit](https://www.reddit.com/r/homebrewery/comments/pohoy3/looking_for_help_with_basic_stuff_in_v3/)
-
-* [x] Fixed Partial Page Rendering in V3 for large brews
-
-  Fixes issues: [Reported on Reddit](https://www.reddit.com/r/homebrewery/comments/pori3a/weird_behaviour_of_the_brew_after_page_50/)
-
-* [x] Fixed HTML validation to handle tags starting with 'a', as in `<​aside>`.  
-
-  Fixes issues: [#230](https://github.com/naturalcrit/homebrewery/issues/230)
-
-* [x] Fixed page footers switching side when printing.
-
-  Fixes issues: [#1612](https://github.com/naturalcrit/homebrewery/issues/1612)
-}}
-
-
-\page
+# changelog
 
 ### Saturday, 11/09/2021 - v3.0.0
 

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -17,7 +17,6 @@ const PAGE_HEIGHT = 1056;
 const PPR_THRESHOLD = 50;
 
 const BrewRenderer = createClass({
-	displayName     : 'BrewRenderer',
 	getDefaultProps : function() {
 		return {
 			text     : '',
@@ -118,7 +117,7 @@ const BrewRenderer = createClass({
 	},
 
 	renderDummyPage : function(index){
-		return <div className='phb page' id={`p${index + 1}`} key={index}>
+		return <div className='phb' id={`p${index + 1}`} key={index}>
 			<i className='fas fa-spinner fa-spin' />
 		</div>;
 	},
@@ -189,6 +188,7 @@ const BrewRenderer = createClass({
 	        : null}
 
 				<Frame initialContent={this.state.initialContent}
+					head = <link href={`${this.props.renderer == 'legacy' ? '/themes/5ePhbLegacy.style.css' : '/themes/5ePhb.style.css'}`} rel='stylesheet'/>
 					style={{ width: '100%', height: '100%', visibility: this.state.visibility }}
 					contentDidMount={this.frameDidMount}>
 					<div className={'brewRenderer'}
@@ -200,17 +200,17 @@ const BrewRenderer = createClass({
 							<RenderWarnings />
 							<NotificationPopup />
 						</div>
-						<link href={`${this.props.renderer == 'legacy' ? '/themes/5ePhbLegacy.style.css' : '/themes/5ePhb.style.css'}`} rel='stylesheet'/>
-						{/* Apply CSS from Style tab and render pages from Markdown tab */}
-						{this.state.isMounted
-							&&
-							<>
-								{this.renderStyle()}
-								<div className='pages' ref='pages'>
+
+						<div className='pages' ref='pages'>
+							{/* Apply CSS from Style tab and render pages from Markdown tab */}
+							{this.state.isMounted
+								&&
+								<>
+									{this.renderStyle()}
 									{this.renderPages()}
-								</div>
-							</>
-						}
+								</>
+							}
+						</div>
 					</div>
 				</Frame>
 				{this.renderPageInfo()}

client/homebrew/brewRenderer/errorBar/errorBar.jsx

@@ -5,7 +5,6 @@ const _     = require('lodash');
 const cx    = require('classnames');
 
 const ErrorBar = createClass({
-	displayName     : 'ErrorBar',
 	getDefaultProps : function() {
 		return {
 			errors : []

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -7,7 +7,6 @@ const cx    = require('classnames');	//Unused variable
 const DISMISS_KEY = 'dismiss_notification09-9-21';
 
 const NotificationPopup = createClass({
-	displayName     : 'NotificationPopup',
 	getInitialState : function() {
 		return {
 			notifications : {}

client/homebrew/editor/editor.jsx

@@ -1,4 +1,3 @@
-/*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
 require('./editor.less');
 const React = require('react');
 const createClass = require('create-react-class');
@@ -26,7 +25,6 @@ const splice = function(str, index, inject){
 
 
 const Editor = createClass({
-	displayName     : 'Editor',
 	getDefaultProps : function() {
 		return {
 			brew : {
@@ -61,10 +59,6 @@ const Editor = createClass({
 		window.removeEventListener('resize', this.updateEditorSize);
 	},
 
-	componentDidUpdate : function() {
-		this.highlightCustomMarkdown();
-	},
-
 	updateEditorSize : function() {
 		if(this.refs.codeEditor) {
 			let paneHeight = this.refs.main.parentNode.clientHeight;
@@ -108,69 +102,67 @@ const Editor = createClass({
 		if(this.state.view === 'text')  {
 			const codeMirror = this.refs.codeEditor.codeMirror;
 
-			codeMirror.operation(()=>{ // Batch CodeMirror styling
-				//reset custom text styles
-				const customHighlights = codeMirror.getAllMarks().filter((mark)=>!mark.__isFold); //Don't undo code folding
-				for (let i=customHighlights.length - 1;i>=0;i--) customHighlights[i].clear();
+			//reset custom text styles
+			const customHighlights = codeMirror.getAllMarks();
+			for (let i=0;i<customHighlights.length;i++) customHighlights[i].clear();
 
-				let editorPageCount = 2; // start page count from page 2
+			const lineNumbers = _.reduce(this.props.brew.text.split('\n'), (r, line, lineNumber)=>{
 
-				_.forEach(this.props.brew.text.split('\n'), (line, lineNumber)=>{
+				//reset custom line styles
+				codeMirror.removeLineClass(lineNumber, 'background');
+				codeMirror.removeLineClass(lineNumber, 'text');
 
-					//reset custom line styles
-					codeMirror.removeLineClass(lineNumber, 'background', 'pageLine');
-					codeMirror.removeLineClass(lineNumber, 'text');
-
-					// Styling for \page breaks
-					if((this.props.renderer == 'legacy' && line.includes('\\page')) ||
-				     (this.props.renderer == 'V3'     && line.match(/^\\page$/))) {
-
-						// add back the original class 'background' but also add the new class '.pageline'
+				// Legacy Codemirror styling
+				if(this.props.renderer == 'legacy') {
+					if(line.includes('\\page')){
 						codeMirror.addLineClass(lineNumber, 'background', 'pageLine');
-						const pageCountElement = Object.assign(document.createElement('span'), {
-							className   : 'editor-page-count',
-							textContent : editorPageCount
-						});
-						codeMirror.setBookmark({ line: lineNumber, ch: line.length }, pageCountElement);
-
-						editorPageCount += 1;
-					};
-
-					// New Codemirror styling for V3 renderer
-					if(this.props.renderer == 'V3') {
-						if(line.match(/^\\column$/)){
-							codeMirror.addLineClass(lineNumber, 'text', 'columnSplit');
-						}
-
-						// Highlight inline spans {{content}}
-						if(line.includes('{{') && line.includes('}}')){
-							const regex = /{{(?::(?:"[\w,\-()#%. ]*"|[\w\,\-()#%.]*)|[^"'{}\s])*\s*|}}/g;
-							let match;
-							let blockCount = 0;
-							while ((match = regex.exec(line)) != null) {
-								if(match[0].startsWith('{')) {
-									blockCount += 1;
-								} else {
-									blockCount -= 1;
-								}
-								if(blockCount < 0) {
-									blockCount = 0;
-									continue;
-								}
-								codeMirror.markText({ line: lineNumber, ch: match.index }, { line: lineNumber, ch: match.index + match[0].length }, { className: 'inline-block' });
-							}
-						} else if(line.trimLeft().startsWith('{{') || line.trimLeft().startsWith('}}')){
-							// Highlight block divs {{\n Content \n}}
-							let endCh = line.length+1;
-
-							const match = line.match(/^ *{{(?::(?:"[\w,\-()#%. ]*"|[\w\,\-()#%.]*)|[^"'{}\s])* *$|^ *}}$/);
-							if(match)
-								endCh = match.index+match[0].length;
-							codeMirror.markText({ line: lineNumber, ch: 0 }, { line: lineNumber, ch: endCh }, { className: 'block' });
-						}
+						r.push(lineNumber);
 					}
-				});
-			});
+				}
+
+				// New Codemirror styling for V3 renderer
+				if(this.props.renderer == 'V3') {
+					if(line.match(/^\\page$/)){
+						codeMirror.addLineClass(lineNumber, 'background', 'pageLine');
+						r.push(lineNumber);
+					}
+
+					if(line.match(/^\\column$/)){
+						codeMirror.addLineClass(lineNumber, 'text', 'columnSplit');
+						r.push(lineNumber);
+					}
+
+					// Highlight inline spans {{content}}
+					if(line.includes('{{') && line.includes('}}')){
+						const regex = /{{(?::(?:"[\w,\-()#%. ]*"|[\w\,\-()#%.]*)|[^"'{}\s])*\s*|}}/g;
+						let match;
+						let blockCount = 0;
+						while ((match = regex.exec(line)) != null) {
+							if(match[0].startsWith('{')) {
+								blockCount += 1;
+							} else {
+								blockCount -= 1;
+							}
+							if(blockCount < 0) {
+								blockCount = 0;
+								continue;
+							}
+							codeMirror.markText({ line: lineNumber, ch: match.index }, { line: lineNumber, ch: match.index + match[0].length }, { className: 'inline-block' });
+						}
+					} else if(line.trimLeft().startsWith('{{') || line.trimLeft().startsWith('}}')){
+						// Highlight block divs {{\n Content \n}}
+						let endCh = line.length+1;
+
+						const match = line.match(/^ *{{(?::(?:"[\w,\-()#%. ]*"|[\w\,\-()#%.]*)|[^"'{}\s])* *$|^ *}}$/);
+						if(match)
+							endCh = match.index+match[0].length;
+						codeMirror.markText({ line: lineNumber, ch: 0 }, { line: lineNumber, ch: endCh }, { className: 'block' });
+					}
+				}
+
+				return r;
+			}, []);
+			return lineNumbers;
 		}
 	},
 
@@ -184,61 +176,30 @@ const Editor = createClass({
 		this.refs.codeEditor?.updateSize();
 	},
 
-	//Called by CodeEditor after document switch, so Snippetbar can refresh UndoHistory
-	rerenderParent : function (){
-		this.forceUpdate();
-	},
-
 	renderEditor : function(){
 		if(this.isText()){
-			return <>
-				<CodeEditor key='codeEditor'
-					ref='codeEditor'
-					language='gfm'
-					view={this.state.view}
-					value={this.props.brew.text}
-					onChange={this.props.onTextChange}
-					rerenderParent={this.rerenderParent} />
-			</>;
+			return <CodeEditor key='text'
+				ref='codeEditor'
+				language='gfm'
+				value={this.props.brew.text}
+				onChange={this.props.onTextChange} />;
 		}
 		if(this.isStyle()){
-			return <>
-				<CodeEditor key='codeEditor'
-					ref='codeEditor'
-					language='css'
-					view={this.state.view}
-					value={this.props.brew.style ?? DEFAULT_STYLE_TEXT}
-					onChange={this.props.onStyleChange}
-					enableFolding={false}
-					rerenderParent={this.rerenderParent} />
-			</>;
+			return <CodeEditor key='style'
+				ref='codeEditor'
+				language='css'
+				value={this.props.brew.style ?? DEFAULT_STYLE_TEXT}
+				onChange={this.props.onStyleChange} />;
 		}
 		if(this.isMeta()){
-			return <>
-				<CodeEditor key='codeEditor'
-					view={this.state.view}
-					style={{ display: 'none' }}
-					rerenderParent={this.rerenderParent} />
-				<MetadataEditor
-					metadata={this.props.brew}
-					onChange={this.props.onMetaChange} />
-			</>;
+			return <MetadataEditor
+				metadata={this.props.brew}
+				onChange={this.props.onMetaChange} />;
 		}
 	},
 
-	redo : function(){
-		return this.refs.codeEditor?.redo();
-	},
-
-	historySize : function(){
-		return this.refs.codeEditor?.historySize();
-	},
-
-	undo : function(){
-		return this.refs.codeEditor?.undo();
-	},
-
 	render : function(){
+		this.highlightCustomMarkdown();
 		return (
 			<div className='editor' ref='main'>
 				<SnippetBar
@@ -247,10 +208,7 @@ const Editor = createClass({
 					onViewChange={this.handleViewChange}
 					onInject={this.handleInject}
 					showEditButtons={this.props.showEditButtons}
-					renderer={this.props.renderer}
-					undo={this.undo}
-					redo={this.redo}
-					historySize={this.historySize()} />
+					renderer={this.props.renderer} />
 
 				{this.renderEditor()}
 			</div>

client/homebrew/editor/editor.less

@@ -4,58 +4,42 @@
 	width    : 100%;
 
 	.codeEditor{
-		height            : 100%;
+		height : 100%;
 		.pageLine{
-			background : #33333328;
-			border-top : #339 solid 1px;
-		}
-		.editor-page-count{
-			color : grey;
-			float : right;
+			background-color : fade(#333, 15%);
+			border-bottom    : #333 solid 1px;
 		}
 		.columnSplit{
-			font-style 			: italic;
-			color 				: grey;
-			background-color 	: fade(#299, 15%);
-			border-bottom    	: #299 solid 1px;
+			font-style : italic;
+			color : grey;
+			background-color : fade(#299, 15%);
+			border-bottom    : #299 solid 1px;
 		}
 		.block{
-			color 		: purple;
+			color : purple;
 			font-weight : bold;
 			//font-style: italic;
 		}
 		.inline-block{
-			color 		: red;
+			color : red;
 			font-weight : bold;
 			//font-style: italic;
 		}
 	}
 
 	.brewJump{
-		position			: absolute;
-		background-color	: @teal;
-		cursor				: pointer;
-		width 				: 30px;
-		height 				: 30px;
-		display 			: flex;
-		align-items 		: center;
-		bottom 				: 20px;
-		right 				: 20px;
-		z-index				: 1000000;
-		justify-content		: center;
+		position: absolute;
+		background-color: @teal;
+		cursor: pointer;
+		width : 30px;
+		height : 30px;
+		display : flex;
+		align-items : center;
+		bottom : 20px;
+		right : 20px;
+		z-index: 1000000;
+		justify-content:center;
 		.tooltipLeft("Jump to brew page");
 	}
 
-	.editorToolbar{
-		position: absolute;
-		top: 5px;
-		left: 50%;
-		color: black;
-		font-size: 13px;
-		z-index: 9;
-		span {
-			padding: 2px 5px;
-		}
-	}
-
 }

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -8,7 +8,6 @@ const request = require('superagent');
 const SYSTEMS = ['5e', '4e', '3.5e', 'Pathfinder'];
 
 const MetadataEditor = createClass({
-	displayName     : 'MetadataEditor',
 	getDefaultProps : function() {
 		return {
 			metadata : {
@@ -66,6 +65,18 @@ const MetadataEditor = createClass({
 			});
 	},
 
+	getRedditLink : function(){
+		const meta = this.props.metadata;
+
+		const shareLink = (meta.googleId || '') + meta.shareId;
+		const title = `${meta.title} [${meta.systems.join(' ')}]`;
+		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})**`;
+
+		return `https://www.reddit.com/r/UnearthedArcana/submit?title=${encodeURIComponent(title)}&text=${encodeURIComponent(text)}`;
+	},
+
 	renderSystems : function(){
 		return _.map(SYSTEMS, (val)=>{
 			return <label key={val}>
@@ -116,6 +127,21 @@ const MetadataEditor = createClass({
 		</div>;
 	},
 
+	renderShareToReddit : function(){
+		if(!this.props.metadata.shareId) return;
+
+		return <div className='field reddit'>
+			<label>reddit</label>
+			<div className='value'>
+				<a href={this.getRedditLink()} target='_blank' rel='noopener noreferrer'>
+					<button className='publish'>
+						<i className='fab fa-reddit-alien' /> share to reddit
+					</button>
+				</a>
+			</div>
+		</div>;
+	},
+
 	renderRenderOptions : function(){
 		if(!global.enable_v3) return;
 
@@ -189,6 +215,8 @@ const MetadataEditor = createClass({
 				</div>
 			</div>
 
+			{this.renderShareToReddit()}
+
 			{this.renderDelete()}
 
 		</div>;

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -77,6 +77,11 @@
 			.button(@red);
 		}
 	}
+	.reddit.field .value{
+		button{
+			.button(@purple);
+		}
+	}
 	.authors.field .value{
 		font-size: 0.8em;
 		line-height    : 1.5em;

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -14,7 +14,6 @@ const execute = function(val, brew){
 };
 
 const Snippetbar = createClass({
-	displayName     : 'SnippetBar',
 	getDefaultProps : function() {
 		return {
 			brew            : {},
@@ -23,10 +22,7 @@ const Snippetbar = createClass({
 			onInject        : ()=>{},
 			onToggle        : ()=>{},
 			showEditButtons : true,
-			renderer        : 'legacy',
-			undo            : ()=>{},
-			redo            : ()=>{},
-			historySize     : ()=>{}
+			renderer        : 'legacy'
 		};
 	},
 
@@ -64,15 +60,6 @@ const Snippetbar = createClass({
 		if(!this.props.showEditButtons) return;
 
 		return <div className='editors'>
-			<div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`}
-				onClick={this.props.undo} >
-				<i className='fas fa-undo' />
-			</div>
-			<div className={`editorTool redo ${this.props.historySize.redo ? 'active' : ''}`}
-				onClick={this.props.redo} >
-				<i className='fas fa-redo' />
-			</div>
-			<div className='divider'></div>
 			<div className={cx('text', { selected: this.props.view === 'text' })}
 				 onClick={()=>this.props.onViewChange('text')}>
 				<i className='fa fa-beer' />
@@ -104,7 +91,6 @@ module.exports = Snippetbar;
 
 
 const SnippetGroup = createClass({
-	displayName     : 'SnippetGroup',
 	getDefaultProps : function() {
 		return {
 			brew           : {},

client/homebrew/editor/snippetbar/snippetbar.less

@@ -10,7 +10,7 @@
 		top             : 0px;
 		right           : 0px;
 		height          : @menuHeight;
-		width           : 125px;
+		width           : 90px;
 		justify-content : space-between;
 		&>div{
 			height      : @menuHeight;
@@ -30,29 +30,6 @@
 			&.meta{
 				.tooltipLeft('Properties');
 			}
-			&.undo{
-				.tooltipLeft('Undo');
-				font-size : 0.75em;
-				color     : grey;
-				&.active{
-					color : black;
-				}
-			}
-			&.redo{
-				.tooltipLeft('Redo');
-				font-size : 0.75em;
-				color     : grey;
-				&.active{
-					color : black;
-				}
-			}
-			&.divider {
-				background: linear-gradient(#000, #000) no-repeat center/1px 100%;
-				width: 5px;
-				&:hover{
-					background-color: inherit;
-				}
-			}
 		}
 	}
 	.snippetBarButton{

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

@@ -100,25 +100,25 @@ const subtitles = [
 
 module.exports = ()=>{
 	return `<style>
-  .page#p1{ text-align:center; counter-increment: none; }
-  .page#p1:after{ display:none; }
-  .page:nth-child(2n) .pageNumber { left: inherit !important; right: 2px !important; }
-  .page:nth-child(2n+1) .pageNumber { right: inherit !important; left: 2px !important; }
-  .page:nth-child(2n)::after { transform: scaleX(1); }
-  .page:nth-child(2n+1)::after { transform: scaleX(-1); }
-  .page:nth-child(2n) .footnote { left: inherit; text-align: right; }
-  .page:nth-child(2n+1) .footnote { left: 80px; text-align: left; }
+  .phb#p1{ text-align:center; }
+  .phb#p1:after{ display:none; }
+  .phb#p2 { counter-reset:phb-page-numbers; }
+  .phb:nth-child(2n) .pageNumber { left: inherit !important; right: 2px !important; }
+  .phb:nth-child(2n+1) .pageNumber { right: inherit !important; left: 2px !important; }
+  .phb:nth-child(2n)::after { transform: scaleX(1); }
+  .phb:nth-child(2n+1)::after { transform: scaleX(-1); }
+  .phb:nth-child(2n) .footnote { left: inherit; text-align: right; }
+  .phb:nth-child(2n+1) .footnote { left: 80px; text-align: left; }
 </style>
 
-{{margin-top:225px}}
+<div style='margin-top:450px;'></div>
 
 # ${_.sample(titles)}
 
-{{margin-top:25px}}
-
-{{wide
+<div style='margin-top:25px'></div>
+<div class='wide'>
 ##### ${_.sample(subtitles)}
-}}
+</div>
 
 \\page`;
 };

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

@@ -105,20 +105,6 @@ const genAbilities = function(){
 	]);
 };
 
-const genLongAbilities = function(){
-	return _.sample([
-		dedent`***Pack Tactics.*** These guys work together like peanut butter and jelly. Jelly and peanut butter.
-
-		When one of these guys attacks, the target is covered with, well, peanut butter and jelly.`,
-		dedent`***Hangriness.*** This creature is angry, and hungry. It will refuse to do anything with you until its hunger is satisfied.
-
-		When in visual contact with this creature, you must purchase an extra order of fries, even if they say they aren't hungry.`,
-		dedent`***Full of Detergent.*** This creature has swallowed an entire bottle of dish detergent and is actually having a pretty good time.
-
-		While walking near this creature, you must make a dexterity check or become "a soapy mess" for three hours, after which your skin will get all dry and itchy.`
-	]);
-};
-
 const genAction = function(){
 	const name = _.sample([
 		'Abdominal Drop',
@@ -173,11 +159,11 @@ module.exports = {
 			**Languages**            :: ${genList(['Common', 'Pottymouth', 'Gibberish', 'Latin', 'Jive'], 2)}
 			**Challenge**            :: ${_.random(0, 15)} (${_.random(10, 10000)} XP)
 			___
-			${_.times(_.random(genLines, genLines + 2), function(){return genAbilities();}).join('\n:\n')}
 			:
-			${genLongAbilities()}
+			${_.times(_.random(genLines, genLines + 2), function(){return genAbilities();}).join('\n\t\t\t\n\t\t\t')}
+			:
 			### Actions
-			${_.times(_.random(genLines, genLines + 2), function(){return genAction();}).join('\n:\n')}
+			${_.times(_.random(genLines, genLines + 2), function(){return genAction();}).join('\n\t\t\t\n\t\t\t')}
 			}}
 			\n`;
 	}

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

@@ -13,7 +13,7 @@ const watercolorGen = require('./watercolor.gen.js');
 module.exports = [
 
 	{
-		groupName : 'Text Editor',
+		groupName : 'Editor',
 		icon      : 'fas fa-pencil-alt',
 		view      : 'text',
 		snippets  : [
@@ -55,7 +55,7 @@ module.exports = [
 				gen  : (brew)=>{
 					return `![]` +
 							`(https://api.qrserver.com/v1/create-qr-code/?data=` +
-							`https://homebrewery.naturalcrit.com${brew.shareId ? `/share/${brew.shareId}` : ''}` +
+							`https://homebrewery.naturalcrit.com/share/${brew.shareId}` +
 							`&size=100x100) {width:100px;mix-blend-mode:multiply}`;
 				}
 			},
@@ -79,41 +79,35 @@ module.exports = [
 				icon : 'fas fa-book',
 				gen  : TableOfContentsGen
 			},
-			{
-				name : 'Add Comment',
-				icon : 'fas fa-code',
-				gen  : '<!-- This is a comment that will not be rendered into your brew. Hotkey (Ctrl/Cmd + /). -->'
-			},
-		]
-	},
-	{
-		groupName : 'Style Editor',
-		icon      : 'fas fa-pencil-alt',
-		view      : 'style',
-		snippets  : [
 			{
 				name : 'Remove Drop Cap',
 				icon : 'fas fa-remove-format',
-				gen  : dedent`/* Removes Drop Caps */
-						.page h1+p:first-letter {
-							all: unset;
-						}\n\n`
+				gen  : '<style>\n' +
+						'  .phb3 h1+p:first-letter {\n' +
+						'    all: unset;\n' +
+						'  }\n' +
+						'</style>'
 			},
 			{
 				name : 'Tweak Drop Cap',
 				icon : 'fas fa-sliders-h',
-				gen  : dedent`/* Drop Cap settings */
-						.page h1 + p::first-letter {
-							font-family: SolberaImitationRemake;
-							font-size: 3.5cm;
-							background-image: linear-gradient(-45deg, #322814, #998250, #322814);
-							line-height: 1em;
-						}\n\n`
+				gen  : '<style>\n' +
+						'  /* Drop Cap settings */\n' +
+						'  .phb3 h1 + p::first-letter {\n' +
+						'    float: left;\n' +
+						'    font-family: SolberaImitationRemake;\n' +
+						'    font-size: 3.5cm;\n' +
+						'    color: #222;\n' +
+						'    line-height: .8em;\n' +
+						'  }\n' +
+						'</style>'
 			},
 			{
 				name : 'Add Comment',
-				icon : 'fas fa-code',
-				gen  : '/* This is a comment that will not be rendered into your brew. */'
+				icon : 'fas fa-code',  /* might need to be fa-solid fa-comment-code --not sure, Gazook */
+				gen  : dedent`\n
+					<!-- This is a comment that will not be rendered into your brew. Hotkey (Ctrl/Cmd + /). -->
+					`
 			},
 		]
 	},
@@ -130,7 +124,7 @@ module.exports = [
 				gen  : dedent`
 					![cat warrior](https://s-media-cache-ak0.pinimg.com/736x/4a/81/79/4a8179462cfdf39054a418efd4cb743e.jpg) {width:325px,mix-blend-mode:multiply}
 
-					{{artist,position:relative,top:-230px,left:10px,margin-bottom:-30px
+					{{artist,position:relative,top:-230px,left:-100px,margin-bottom:-30px
 					##### Cat Warrior
 					[Kyoung Hwan Kim](https://www.artstation.com/tahra)
 					}}`
@@ -141,7 +135,7 @@ module.exports = [
 				gen  : dedent`
 					![homebrew mug](http://i.imgur.com/hMna6G0.png) {position:absolute,top:50px,right:30px,width:280px}
 
-					{{artist,top:80px,right:30px
+					{{artist,top:90px,right:30px
 					##### Homebrew Mug
 					[naturalcrit](https://homebrew.naturalcrit.com)
 					}}`
@@ -260,6 +254,36 @@ module.exports = [
 		icon      : 'fas fa-table',
 		view      : 'text',
 		snippets  : [
+			{
+				name : 'Class Table',
+				icon : 'fas fa-table',
+				gen  : ClassTableGen.full('classTable,frame,decoration,wide'),
+			},
+			{
+				name : 'Class Table (unframed)',
+				icon : 'fas fa-border-none',
+				gen  : ClassTableGen.full('classTable,wide'),
+			},
+			{
+				name : '1/2 Class Table',
+				icon : 'fas fa-list-alt',
+				gen  : ClassTableGen.half('classTable,decoration,frame'),
+			},
+			{
+				name : '1/2 Class Table (unframed)',
+				icon : 'fas fa-border-none',
+				gen  : ClassTableGen.half('classTable'),
+			},
+			{
+				name : '1/3 Class Table',
+				icon : 'fas fa-border-all',
+				gen  : ClassTableGen.third('classTable,frame'),
+			},
+			{
+				name : '1/3 Class Table (unframed)',
+				icon : 'fas fa-border-none',
+				gen  : ClassTableGen.third('classTable'),
+			},
 			{
 				name : 'Table',
 				icon : 'fas fa-th-list',
@@ -319,36 +343,6 @@ module.exports = [
 						}}
 						\n`;
 				}
-			},
-			{
-				name : 'Class Table',
-				icon : 'fas fa-table',
-				gen  : ClassTableGen.full('classTable,frame,decoration,wide'),
-			},
-			{
-				name : 'Class Table (unframed)',
-				icon : 'fas fa-border-none',
-				gen  : ClassTableGen.full('classTable,wide'),
-			},
-			{
-				name : '1/2 Class Table',
-				icon : 'fas fa-list-alt',
-				gen  : ClassTableGen.half('classTable,decoration,frame'),
-			},
-			{
-				name : '1/2 Class Table (unframed)',
-				icon : 'fas fa-border-none',
-				gen  : ClassTableGen.half('classTable'),
-			},
-			{
-				name : '1/3 Class Table',
-				icon : 'fas fa-border-all',
-				gen  : ClassTableGen.third('classTable,frame'),
-			},
-			{
-				name : '1/3 Class Table (unframed)',
-				icon : 'fas fa-border-none',
-				gen  : ClassTableGen.third('classTable'),
 			}
 		]
 	},
@@ -366,36 +360,44 @@ module.exports = [
 			{
 				name : 'A4 Page Size',
 				icon : 'far fa-file',
-				gen  : dedent`/* A4 Page Size */
-					.page{
-						width  : 210mm;
-						height : 296.8mm;
-					}\n\n`
+				gen  : ['/* A4 Page Size */',
+					'.page{',
+					'	width  : 210mm;',
+					'	height : 296.8mm;',
+					'}',
+					''
+				].join('\n')
 			},
 			{
 				name : 'Square Page Size',
 				icon : 'far fa-file',
-				gen  : dedent`/* Square Page Size */
-					.page {
-						width   : 125mm;
-						height  : 125mm;
-						padding : 12.5mm;
-						columns : unset;
-					}\n\n`
+				gen  : ['/* Square Page Size */',
+					'.page {',
+					'	width   : 125mm;',
+					'	height  : 125mm;',
+					'	padding : 12.5mm;',
+					'	columns : unset;',
+					'}',
+					''
+				].join('\n')
 			},
 			{
 				name : 'Ink Friendly',
 				icon : 'fas fa-tint',
 				gen  : dedent`
 					/* Ink Friendly */
-					*:is(.page,.monster,.note,.descriptive) {
+					.pages *:is(.page,.monster,.note,.descriptive) {
 						background : white !important;
-						filter : drop-shadow(0px 0px 3px #888) !important;
+						box-shadow : 0px 0px 3px !important;
+					}
+
+					.page .note:before {
+						box-shadow : 0px 0px 3px;
 					}
 
 					.page img {
 						visibility : hidden;
-					}\n\n`
+					}`
 			},
 		]
 	},

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

@@ -53,19 +53,19 @@ module.exports = function(brew){
 	const TOC = getTOC(pages);
 	const markdown = _.reduce(TOC, (r, g1, idx1)=>{
 		if(g1.title !== null) {
-			r.push(`- ### [{{ ${g1.title}}}{{ ${g1.page}}}](#p${g1.page})`);
+			r.push(`\t\t- ### [{{ ${g1.title}}}{{ ${g1.page}}}](#p${g1.page})`);
 		}
 		if(g1.children.length){
 			_.each(g1.children, (g2, idx2)=>{
 				if(g2.title !== null) {
-					r.push(`  - #### [{{ ${g2.title}}}{{ ${g2.page}}}](#p${g2.page})`);
+					r.push(`\t\t  - #### [{{ ${g2.title}}}{{ ${g2.page}}}](#p${g2.page})`);
 				}
 				if(g2.children.length){
 					_.each(g2.children, (g3, idx3)=>{
 						if(g2.title !== null) {
-							r.push(`    - [{{ ${g3.title}}}{{ ${g3.page}}}](#p${g3.page})`);
+							r.push(`\t\t    - [{{ ${g3.title}}}{{ ${g3.page}}}](#p${g3.page})`);
 						} else { // Don't over-indent if no level-2 parent entry
-							r.push(`  - [{{ ${g3.title}}}{{ ${g3.page}}}](#p${g3.page})`);
+							r.push(`\t\t  - [{{ ${g3.title}}}{{ ${g3.page}}}](#p${g3.page})`);
 						}
 					});
 				}
@@ -78,7 +78,7 @@ module.exports = function(brew){
 		{{toc,wide
 		# Table Of Contents
 
-		${markdown}
+${markdown}
 		}}
 		\n`;
 };

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

@@ -11,7 +11,7 @@ const dedent = require('dedent-tabs').default;
 module.exports = [
 
 	{
-		groupName : 'Text Editor',
+		groupName : 'Editor',
 		icon      : 'fas fa-pencil-alt',
 		view      : 'text',
 		snippets  : [
@@ -78,44 +78,33 @@ module.exports = [
 				icon : 'fas fa-book',
 				gen  : TableOfContentsGen
 			},
-			{
-				name : 'Add Comment',
-				icon : 'fas fa-code',
-				gen  : '<!-- This is a comment that will not be rendered into your brew. Hotkey (Ctrl/Cmd + /). -->'
-			}
-		]
-	},
-
-
-	{
-		groupName : 'Style Editor',
-		icon      : 'fas fa-pencil-alt',
-		view      : 'style',
-		snippets  : [
 			{
 				name : 'Remove Drop Cap',
 				icon : 'fas fa-remove-format',
-				gen  : dedent`/* Removes Drop Caps */
-						.phb h1+p:first-letter {
-							all: unset;
-						}\n\n`
+				gen  : '<style>\n' +
+						'  .phb h1+p:first-letter {\n' +
+						'    all: unset;\n' +
+						'  }\n' +
+						'</style>'
 			},
 			{
 				name : 'Tweak Drop Cap',
 				icon : 'fas fa-sliders-h',
-				gen  : dedent`/* Drop Cap Settings */
-						.phb h1 + p::first-letter {
-							float: left;
-							font-family: Solberry;
-							font-size: 10em;
-							color: #222;
-							line-height: .8em;
-						}\n\n`
+				gen  : '<style>\n' +
+						'  /* Drop Cap settings */\n' +
+						'  .phb h1 + p::first-letter {\n' +
+						'    float: left;\n' +
+						'    font-family: Solberry;\n' +
+						'    font-size: 10em;\n' +
+						'    color: #222;\n' +
+						'    line-height: .8em;\n' +
+						'  }\n' +
+						'</style>'
 			},
 			{
 				name : 'Add Comment',
 				icon : 'fas fa-code',
-				gen  : '/* This is a comment that will not be rendered into your brew. */'
+				gen  : `\n<!-- This is a comment that will not be rendered into your brew. Hotkey (Ctrl/Cmd + /). -->\n\n`
 			}
 		]
 	},
@@ -251,25 +240,30 @@ module.exports = [
 			{
 				name : 'Split Table',
 				icon : 'fas fa-th-large',
-				gen  : dedent`\n
-					<div style='column-count:2'>
-					| d10 | Damage Type |
-					|:---:|:------------|
-					|  1  | Acid        |
-					|  2  | Cold        |
-					|  3  | Fire        |
-					|  4  | Force       |
-					|  5  | Lightning   |
-
-					| d10 | Damage Type |
-					|:---:|:------------|
-					|  6  | Necrotic    |
-					|  7  | Poison      |
-					|  8  | Psychic     |
-					|  9  | Radiant     |
-					|  10 | Thunder     |
-					</div>
-					\n`
+				gen  : function(){
+					return [
+						'<div style=\'column-count:2\'>',
+						'| d10 | Damage Type |',
+						'|:---:|:------------|',
+						'|  1  | Acid        |',
+						'|  2  | Cold        |',
+						'|  3  | Fire        |',
+						'|  4  | Force       |',
+						'|  5  | Lightning   |',
+						'',
+						'```',
+						'```',
+						'',
+						'| d10 | Damage Type |',
+						'|:---:|:------------|',
+						'|  6  | Necrotic    |',
+						'|  7  | Poison      |',
+						'|  8  | Psychic     |',
+						'|  9  | Radiant     |',
+						'|  10 | Thunder     |',
+						'</div>\n\n',
+					].join('\n');
+				},
 			}
 		]
 	},

client/homebrew/homebrew.jsx

@@ -13,7 +13,6 @@ const NewPage = require('./pages/newPage/newPage.jsx');
 const PrintPage = require('./pages/printPage/printPage.jsx');
 
 const Homebrew = createClass({
-	displayName     : 'Homebrewery',
 	getDefaultProps : function() {
 		return {
 			url         : '',
@@ -50,7 +49,6 @@ const Homebrew = createClass({
 						<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} />}/>
-						<Route path='/faq' exact component={()=><SharePage brew={this.props.brew} />}/>
 						<Route path='/v3_preview' exact component={()=><HomePage brew={this.props.brew} />}/>
 						<Route path='/' component={()=><HomePage brew={this.props.brew} />}/>
 					</Switch>

client/homebrew/navbar/account.navitem.jsx

@@ -3,7 +3,7 @@ const createClass = require('create-react-class');
 const Nav = require('naturalcrit/nav/nav.jsx');
 
 const Account = createClass({
-	displayName     : 'AccountNavItem',
+
 	getInitialState : function() {
 		return {
 			url : ''

client/homebrew/navbar/editTitle.navitem.jsx

@@ -7,7 +7,6 @@ const MAX_TITLE_LENGTH = 50;
 
 
 const EditTitle = createClass({
-	displayName     : 'EditTitleNavItem',
 	getDefaultProps : function() {
 		return {
 			title    : '',

client/homebrew/navbar/navbar.jsx

@@ -6,7 +6,6 @@ const Nav = require('naturalcrit/nav/nav.jsx');
 const PatreonNavItem = require('./patreon.navitem.jsx');
 
 const Navbar = createClass({
-	displayName     : 'Navbar',
 	getInitialState : function() {
 		return {
 			//showNonChromeWarning : false,
@@ -40,9 +39,7 @@ const Navbar = createClass({
 				<Nav.item href='/' className='homebrewLogo'>
 					<div>The Homebrewery</div>
 				</Nav.item>
-				<Nav.item newTab={true} href='/changelog' color='purple' icon='far fa-file-alt'>
-					{`v${this.state.ver}`}
-				</Nav.item>
+				<Nav.item>{`v${this.state.ver}`}</Nav.item>
 				<PatreonNavItem />
 				{/*this.renderChromeWarning()*/}
 			</Nav.section>

client/homebrew/navbar/recent.navitem.jsx

@@ -10,7 +10,7 @@ const VIEW_KEY = 'homebrewery-recently-viewed';
 
 
 const RecentItems = createClass({
-	DisplayName     : 'RecentItems',
+
 	getDefaultProps : function() {
 		return {
 			storageKey : '',

client/homebrew/navbar/reddit.navitem.jsx

@@ -8,7 +8,6 @@ const MAIN_URL = 'https://www.reddit.com/r/UnearthedArcana/submit?selftext=true'
 
 
 const RedditShare = createClass({
-	displayName     : 'RedditShareNavItem',
 	getDefaultProps : function() {
 		return {
 			brew : {

client/homebrew/pages/editPage/editPage.jsx

@@ -27,7 +27,6 @@ const googleDriveInactive = require('../../googleDriveMono.png');
 const SAVE_TIMEOUT = 3000;
 
 const EditPage = createClass({
-	displayName     : 'EditPage',
 	getDefaultProps : function() {
 		return {
 			brew : {
@@ -350,14 +349,14 @@ const EditPage = createClass({
 				</Nav.item>;
 			}
 
-			if(this.state.errors.response.req.url.match(/^\/api\/.*Google.*$/m)){
+			if(this.state.errors.status == '403' && this.state.errors.response.body.errors[0].reason == 'insufficientPermissions'){
 				return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
 					Oops!
 					<div className='errorContainer' onClick={this.clearErrors}>
 					Looks like your Google credentials have
-					expired! Visit our log in page to sign out
-					and sign back in with Google,
-					then try saving again!
+					expired! Visit the log in page to sign out
+					and sign back in with Google
+					to save this to Google Drive!
 						<a target='_blank' rel='noopener noreferrer'
 							href={`https://www.naturalcrit.com/login?redirect=${this.state.url}`}>
 							<div className='confirm'>
@@ -400,21 +399,7 @@ const EditPage = createClass({
 					 this.state.brew.shareId;
 	},
 
-	getRedditLink : function(){
-
-		const shareLink = this.processShareId();
-		const systems = this.props.brew.systems.length > 0 ? ` [${this.props.brew.systems.join(' - ')}]` : '';
-		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})**`;
-
-		return `https://www.reddit.com/r/UnearthedArcana/submit?title=${encodeURIComponent(title)}&text=${encodeURIComponent(text)}`;
-	},
-
 	renderNavbar : function(){
-		const shareLink = this.processShareId();
-
 		return <Navbar>
 
 			{this.state.alertTrashedGoogleBrew &&
@@ -435,20 +420,9 @@ const EditPage = createClass({
 				{this.renderSaveButton()}
 				<NewBrew />
 				<ReportIssue />
-				<Nav.dropdown>
-					<Nav.item color='teal' icon='fas fa-share-alt'>
-						share
-					</Nav.item>
-					<Nav.item color='blue' href={`/share/${shareLink}`}>
-						view
-					</Nav.item>
-					<Nav.item color='blue' onClick={()=>{navigator.clipboard.writeText(`https://homebrewery.naturalcrit.com/share/${shareLink}`);}}>
-						copy url
-					</Nav.item>
-					<Nav.item color='blue' href={this.getRedditLink()} newTab={true} rel='noopener noreferrer'>
-						post to reddit
-					</Nav.item>
-				</Nav.dropdown>
+				<Nav.item newTab={true} href={`/share/${this.processShareId()}`} color='teal' icon='fas fa-share-alt'>
+					Share
+				</Nav.item>
 				<PrintLink shareId={this.processShareId()} />
 				<RecentNavItem brew={this.state.brew} storageKey='edit' />
 				<Account />

client/homebrew/pages/homePage/homePage.jsx

@@ -21,7 +21,6 @@ const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
 
 const HomePage = createClass({
-	displayName     : 'HomePage',
 	getDefaultProps : function() {
 		return {
 			brew : {
@@ -60,6 +59,9 @@ const HomePage = createClass({
 			<Nav.section>
 				<NewBrewItem />
 				<IssueNavItem />
+				<Nav.item newTab={true} href='/changelog' color='purple' icon='far fa-file-alt'>
+					Changelog
+				</Nav.item>
 				<RecentNavItem />
 				<AccountNavItem />
 			</Nav.section>

client/homebrew/pages/homePage/welcome_msg.md

@@ -45,11 +45,7 @@ With the latest major update to *The Homebrewery* we've implemented an extended
 What's new in the latest update? Check out the full changelog [here](/changelog)
 
 ### Bugs, Issues, Suggestions?
-Take a quick look at our [Frequently Asked Questions page](/faq) to see if your question has a handy answer.
-
-Need help getting started or just the right look for your brew? Head to [r/Homebrewery](https://www.reddit.com/r/homebrewery/submit?selftext=true&title=%5BIssue%5D%20Describe%20Your%20Issue%20Here) and let us know!
-
-Have an idea to make The Homebrewery better? Or did you find something that wasn't quite right? Check out the [GitHub Repo](https://github.com/naturalcrit/homebrewery/) to report technical issues.
+Have an idea of how to make The Homebrewery better? Or did you find something that wasn't quite right? Head [here](https://www.reddit.com/r/homebrewery/submit?selftext=true&title=%5BIssue%5D%20Describe%20Your%20Issue%20Here) and let me know!.
 
 ### Legal Junk
 The Homebrewery is licensed using the [MIT License](https://github.com/naturalcrit/homebrewery/blob/master/license). This means you are free to use The Homebrewery codebase any way that you want, except for claiming that you made it yourself.
@@ -57,7 +53,7 @@ The Homebrewery is licensed using the [MIT License](https://github.com/naturalcr
 If you wish to sell or in some way gain profit for what you make on this site, it's your responsibility to ensure you have the proper licenses/rights for any images or resources used.
 
 ### More Resources
-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).
+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/comments/3uwxx9/resources_open_to_the_community/).
 
 
 

client/homebrew/pages/homePage/welcome_msg_v3.md

@@ -34,18 +34,13 @@ After clicking the "Print" item in the navbar a new page will open and a print d
 * In **Options** make sure "Background Images" is selected.
 * Hit print and enjoy! You're done!
 
-If you want to save ink or have a monochrome printer, add the **PRINT → {{fas,fa-tint}} Ink Friendly** snippet to your brew!
+If you want to save ink or have a monochrome printer, add the **PRINT → {{fas,fa-tint}} Ink Friendly** snippet to your brew before you print
 }}
 
-![homebrew mug](http://i.imgur.com/hMna6G0.png) {position:absolute,bottom:20px,left:130px,width:220px}
+<img src='https://i.imgur.com/hMna6G0.png' style='position:absolute;bottom:50px;left:120px;width:180px' />
 
-{{artist,bottom:160px,left:100px
-##### Homebrew Mug
-[naturalcrit](https://homebrew.naturalcrit.com)
-}}
-
-{{pageNumber 1}}
-{{footnote PART 1 | FANCINESS}}
+<div class='pageNumber'>1</div>
+<div class='footnote'>PART 1 | FANCINESS</div>
 
 \column
 
@@ -57,7 +52,7 @@ Much of the syntax and styling has changed in V3. Code in one version may be bro
 Scroll down to the next page for a brief summary of the changes and new features available in V3!
 
 #### New Things All The Time!
-Check out the latest updates in the full changelog [here](/changelog).
+What's new in the latest update? Check out the full changelog [here](/changelog).
 
 ### Helping out
 Like this tool? Want to buy me a beer? [Head here](https://www.patreon.com/Naturalcrit) to help me keep the servers running.
@@ -65,8 +60,6 @@ Like this tool? Want to buy me a beer? [Head here](https://www.patreon.com/Natur
 This tool will **always** be free, never have ads, and I will never offer any "premium" features or whatever.
 
 ### Bugs, Issues, Suggestions?
-Take a quick look at our [Frequently Asked Questions page](/faq) to see if your question has a handy answer.
-
 Need help getting started or just the right look for your brew? Head to [r/Homebrewery](https://www.reddit.com/r/homebrewery/submit?selftext=true&title=%5BIssue%5D%20Describe%20Your%20Issue%20Here) and let us know!
 
 Have an idea to make The Homebrewery better? Or did you find something that wasn't quite right? Check out the [GitHub Repo](https://github.com/naturalcrit/homebrewery/) to report technical issues.
@@ -79,8 +72,8 @@ If you wish to sell or in some way gain profit for what's created on this site,
 #### Crediting Me
 If you'd like to credit me in your brew, I'd be flattered! Just reference that you made it with The Homebrewery.
 
-### More 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).
+### More Resources
+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/comments/3uwxx9/resources_open_to_the_community/).
 
 
 \page
@@ -91,6 +84,7 @@ The Homebrewery aims to make homebrewing as simple as possible, providing a live
 In version 3.0.0, with a goal of adding maximum flexibility without users resorting to complex HTML to accomplish simple tasks, Homebrewery provides an extended verision of Markdown with additional syntax.
 **You can enable V3 via the {{fa,fa-info-circle}} Properties button!**
 
+
 ### Curly Brackets
 The biggest change in V3 is the replacement of `<span></span>` and `<div></div>` with `{{ }}` for a cleaner custom formatting.  Inline spans and block elements can be created and given ID's and Classes, as well as css properties, each of which are comma separated with no spaces. Use double quotes if a value requires spaces. Spans and Blocks start the same:
 
@@ -103,6 +97,7 @@ My favorite author is {{pen,#author,color:orange,font-family:"trebuchet ms" Bran
 My favorite book is Wheel of Time. This block has a class of `purple`, an id of `book`, and centered text with a colored background. The opening and closing brackets are on lines separate from the block contents.
 }}
 
+
 #### Injection
 For any element not inside a span or block, you can *inject* attributes using the same syntax but with single brackets in a single line immediately after the element.
 
@@ -164,8 +159,12 @@ Using *Curly Injection* you can assign an id, classes, or specific inline CSS pr
 ## Snippets
 Homebrewery comes with a series of *code snippets* found at the top of the editor pane that make it easy to create brews as quickly as possible.  Just set your cursor where you want the code to appear in the editor pane, choose a snippet, and make the adjustments you need.
 
+
 ## Style Editor Panel
+
 {{fa,fa-paint-brush}} Technically released prior to v3 but still new to many users, check out the new **Style Editor** located on the right side of the Snippet bar.  This editor accepts CSS for styling without requiring `<style>` tags-- anything that would have gone inside style tags before can now be placed here, and snippets that insert CSS styles are now located on that tab.
 
-{{pageNumber 2}}
-{{footnote PART 2 | BORING STUFF}}
+
+
+<div class='pageNumber'>2</div>
+<div class='footnote'>PART 2 | BORING STUFF</div>

client/homebrew/pages/newPage/newPage.jsx

@@ -23,7 +23,6 @@ const METAKEY = 'homebrewery-new-meta';
 
 
 const NewPage = createClass({
-	displayName     : 'NewPage',
 	getDefaultProps : function() {
 		return {
 			brew : {
@@ -46,44 +45,47 @@ const NewPage = createClass({
 	},
 
 	getInitialState : function() {
-		const brew = this.props.brew;
-
-		if(typeof window !== 'undefined') { //Load from localStorage if in client browser
-			const brewStorage  = localStorage.getItem(BREWKEY);
-			const styleStorage = localStorage.getItem(STYLEKEY);
-			const metaStorage = JSON.parse(localStorage.getItem(METAKEY));
-
-			if(!brew.text || !brew.style){
-				brew.text = brew.text  || (brewStorage  ?? '');
-				brew.style = brew.style || (styleStorage ?? undefined);
-				// brew.title = metaStorage?.title || this.state.brew.title;
-				// brew.description = metaStorage?.description || this.state.brew.description;
-				brew.renderer = metaStorage?.renderer || brew.renderer;
-			}
-		}
-
 		return {
 			brew : {
-				text        : brew.text || '',
-				style       : brew.style || undefined,
+				text        : this.props.brew.text || '',
+				style       : this.props.brew.style || undefined,
 				gDrive      : false,
-				title       : brew.title || '',
-				description : brew.description || '',
-				tags        : brew.tags || '',
+				title       : this.props.brew.title || '',
+				description : this.props.brew.description || '',
+				tags        : this.props.brew.tags || '',
 				published   : false,
 				authors     : [],
-				systems     : brew.systems || [],
-				renderer    : brew.renderer || 'legacy'
+				systems     : this.props.brew.systems || [],
+				renderer    : this.props.brew.renderer || 'legacy'
 			},
 
 			isSaving   : false,
 			saveGoogle : (global.account && global.account.googleId ? true : false),
 			errors     : null,
-			htmlErrors : Markdown.validate(brew.text)
+			htmlErrors : Markdown.validate(this.props.brew.text)
 		};
 	},
 
 	componentDidMount : function() {
+		const brewStorage  = localStorage.getItem(BREWKEY);
+		const styleStorage = localStorage.getItem(STYLEKEY);
+		const metaStorage = JSON.parse(localStorage.getItem(METAKEY));
+
+		const brew = this.state.brew;
+
+		if(!this.state.brew.text || !this.state.brew.style){
+			brew.text = this.state.brew.text  || (brewStorage  ?? '');
+			brew.style = this.state.brew.style || (styleStorage ?? undefined);
+			// brew.title = metaStorage?.title || this.state.brew.title;
+			// brew.description = metaStorage?.description || this.state.brew.description;
+			brew.renderer = metaStorage?.renderer || this.state.brew.renderer;
+		}
+
+		this.setState((prevState)=>({
+			brew       : brew,
+			htmlErrors : Markdown.validate(prevState.brew.text)
+		}));
+
 		document.addEventListener('keydown', this.handleControlKeys);
 	},
 	componentWillUnmount : function() {
@@ -144,6 +146,14 @@ const NewPage = createClass({
 		});
 	},
 
+	clearErrors : function(){
+		this.setState({
+			errors   : null,
+			isSaving : false
+
+		});
+	},
+
 	save : async function(){
 		this.setState({
 			isSaving : true
@@ -227,14 +237,14 @@ const NewPage = createClass({
 				</Nav.item>;
 			}
 
-			if(this.state.errors.response.req.url.match(/^\/api\/.*Google.*$/m)){
+			if(this.state.errors.status == '403' && this.state.errors.response.body.errors[0].reason == 'insufficientPermissions'){
 				return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
 					Oops!
 					<div className='errorContainer' onClick={this.clearErrors}>
 					Looks like your Google credentials have
-					expired! Visit our log in page to sign out
-					and sign back in with Google,
-					then try saving again!
+					expired! Visit the log in page to sign out
+					and sign back in with Google
+					to save this to Google Drive!
 						<a target='_blank' rel='noopener noreferrer'
 							href={`https://www.naturalcrit.com/login?redirect=${this.state.url}`}>
 							<div className='confirm'>
@@ -272,6 +282,7 @@ const NewPage = createClass({
 	},
 
 	print : function(){
+		localStorage.setItem('print', `<style>\n${this.state.brew.style}\n</style>\n\n${this.state.brew.text}`);
 		window.open('/print?dialog=true&local=print', '_blank');
 	},
 

client/homebrew/pages/printPage/printPage.jsx

@@ -7,12 +7,7 @@ const { Meta } = require('vitreum/headtags');
 const MarkdownLegacy = require('naturalcrit/markdownLegacy.js');
 const Markdown = require('naturalcrit/markdown.js');
 
-const BREWKEY = 'homebrewery-new';
-const STYLEKEY = 'homebrewery-new-style';
-const METAKEY = 'homebrewery-new-meta';
-
 const PrintPage = createClass({
-	displayName     : 'PrintPage',
 	getDefaultProps : function() {
 		return {
 			query : {},
@@ -26,42 +21,23 @@ const PrintPage = createClass({
 
 	getInitialState : function() {
 		return {
-			brew : {
-				text     : this.props.brew.text || '',
-				style    : this.props.brew.style || undefined,
-				renderer : this.props.brew.renderer || 'legacy'
-			}
+			brewText : this.props.brew.text
 		};
 	},
 
 	componentDidMount : function() {
-		if(this.props.query.local == 'print'){
-			const brewStorage  = localStorage.getItem(BREWKEY);
-			const styleStorage = localStorage.getItem(STYLEKEY);
-			const metaStorage = JSON.parse(localStorage.getItem(METAKEY));
-
-			this.setState((prevState, prevProps)=>{
-				return {
-					brew : {
-						text     : brewStorage,
-						style    : styleStorage,
-						renderer : metaStorage.renderer || 'legacy'
-					}
-				};
-			});
+		if(this.props.query.local){
+			this.setState((prevState, prevProps)=>({
+				brewText : localStorage.getItem(prevProps.query.local)
+			}));
 		}
 
 		if(this.props.query.dialog) window.print();
 	},
 
-	renderStyle : function() {
-		if(!this.state.brew.style) return;
-		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style> ${this.state.brew.style} </style>` }} />;
-	},
-
 	renderPages : function(){
-		if(this.state.brew.renderer == 'legacy') {
-			return _.map(this.state.brew.text.split('\\page'), (pageText, index)=>{
+		if(this.props.brew.renderer == 'legacy') {
+			return _.map(this.state.brewText.split('\\page'), (pageText, index)=>{
 				return <div
 					className='phb page'
 					id={`p${index + 1}`}
@@ -69,7 +45,7 @@ const PrintPage = createClass({
 					key={index} />;
 			});
 		} else {
-			return _.map(this.state.brew.text.split(/^\\page$/gm), (pageText, index)=>{
+			return _.map(this.state.brewText.split(/^\\page$/gm), (pageText, index)=>{
 				pageText += `\n\n&nbsp;\n\\column\n&nbsp;`; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
 				return (
 					<div className='page' id={`p${index + 1}`} key={index} >
@@ -84,12 +60,10 @@ const PrintPage = createClass({
 	render : function(){
 		return <div>
 			<Meta name='robots' content='noindex, nofollow' />
-			<link href={`${this.state.brew.renderer == 'legacy' ? '/themes/5ePhbLegacy.style.css' : '/themes/5ePhb.style.css'}`} rel='stylesheet'/>
+			<link href={`${this.props.brew.renderer == 'legacy' ? '/themes/5ePhbLegacy.style.css' : '/themes/5ePhb.style.css'}`} rel='stylesheet'/>
 			{/* Apply CSS from Style tab */}
-			{this.renderStyle()}
-			<div className='pages' ref='pages'>
-				{this.renderPages()}
-			</div>
+			<div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style> ${this.props.brew.style} </style>` }} />
+			{this.renderPages()}
 		</div>;
 	}
 });

client/homebrew/pages/sharePage/sharePage.jsx

@@ -14,7 +14,6 @@ const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
 
 const SharePage = createClass({
-	displayName     : 'SharePage',
 	getDefaultProps : function() {
 		return {
 			brew : {
@@ -30,19 +29,23 @@ const SharePage = createClass({
 		};
 	},
 
+	getInitialState : function() {
+		return {
+			showDropdown : false
+		};
+	},
+
 	componentDidMount : function() {
 		document.addEventListener('keydown', this.handleControlKeys);
 	},
-
 	componentWillUnmount : function() {
 		document.removeEventListener('keydown', this.handleControlKeys);
 	},
-
 	handleControlKeys : function(e){
 		if(!(e.ctrlKey || e.metaKey)) return;
 		const P_KEY = 80;
 		if(e.keyCode == P_KEY){
-			window.open(`/print/${this.processShareId()}?dialog=true`, '_blank').focus();
+			window.open(`/print/${this.props.brew.shareId}?dialog=true`, '_blank').focus();
 			e.stopPropagation();
 			e.preventDefault();
 		}
@@ -54,6 +57,28 @@ const SharePage = createClass({
 					 this.props.brew.shareId;
 	},
 
+	handleDropdown : function(show){
+		this.setState({
+			showDropdown : show
+		});
+	},
+
+	renderDropdown : function(){
+		if(!this.state.showDropdown) return null;
+
+		return <div className='dropdown'>
+			<a href={`/source/${this.processShareId()}`} className='item'>
+				view
+			</a>
+			<a href={`/download/${this.processShareId()}`} className='item'>
+				download
+			</a>
+			<a href={`/new/${this.processShareId()}`} className='item'>
+				clone to new
+			</a>
+		</div>;
+	},
+
 	render : function(){
 		return <div className='sharePage sitePage'>
 			<Meta name='robots' content='noindex, nofollow' />
@@ -65,20 +90,12 @@ const SharePage = createClass({
 				<Nav.section>
 					{this.props.brew.shareId && <>
 						<PrintLink shareId={this.processShareId()} />
-						<Nav.dropdown>
-							<Nav.item color='red' icon='fas fa-code'>
-								source
-							</Nav.item>
-							<Nav.item color='blue' href={`/source/${this.processShareId()}`}>
-								view
-							</Nav.item>
-							<Nav.item color='blue' href={`/download/${this.processShareId()}`}>
-								download
-							</Nav.item>
-							<Nav.item color='blue' href={`/new/${this.processShareId()}`}>
-								clone to new
-							</Nav.item>
-						</Nav.dropdown>
+						<Nav.item icon='fas fa-code' color='red' className='source'
+							onMouseEnter={()=>this.handleDropdown(true)}
+							onMouseLeave={()=>this.handleDropdown(false)}>
+							source
+							{this.renderDropdown()}
+						</Nav.item>
 					</>}
 					<RecentNavItem brew={this.props.brew} storageKey='view' />
 					<Account />

client/homebrew/pages/sharePage/sharePage.less

@@ -2,4 +2,49 @@
 	.content{
 		overflow-y : hidden;
 	}
-}
+	.source.navItem{
+		position : relative;
+		.dropdown{
+			position : absolute;
+			top      : 28px;
+			left     : 0px;
+			z-index  : 10000;
+			width    : 100%;
+			h4{
+				display          : block;
+				box-sizing       : border-box;
+				padding          : 5px 0px;
+				background-color : #333;
+				font-size        : 0.8em;
+				color            : #bbb;
+				text-align       : center;
+				border-top       : 1px solid #888;
+				&:nth-of-type(1){ background-color: darken(@teal, 20%); }
+				&:nth-of-type(2){ background-color: darken(@purple, 30%); }
+			}
+			.item{
+				.animate(background-color);
+				position         : relative;
+				display          : block;
+				width            : 100%;
+				vertical-align   : middle;
+				padding          : 13px 5px;
+				box-sizing       : border-box;
+				background-color : #333;
+				color            : white;
+				text-decoration  : none;
+				border-top       : 1px solid #888;
+				&:hover{
+					background-color : @blue;
+				}
+				.title{
+					display       : inline-block;
+					overflow      : hidden;
+					width         : 100%;
+					text-overflow : ellipsis;
+					white-space   : nowrap;
+				}
+			}
+		}
+	}
+}

client/homebrew/pages/userPage/brewItem/brewItem.jsx

@@ -7,10 +7,8 @@ const moment = require('moment');
 const request = require('superagent');
 
 const googleDriveIcon = require('../../../googleDrive.png');
-const dedent = require('dedent-tabs').default;
 
 const BrewItem = createClass({
-	displayName     : 'BrewItem',
 	getDefaultProps : function() {
 		return {
 			brew : {
@@ -49,7 +47,7 @@ const BrewItem = createClass({
 	renderDeleteBrewLink : function(){
 		if(!this.props.brew.editId) return;
 
-		return <a className='deleteLink' onClick={this.deleteBrew}>
+		return <a onClick={this.deleteBrew}>
 			<i className='fas fa-trash-alt' title='Delete' />
 		</a>;
 	},
@@ -62,7 +60,7 @@ const BrewItem = createClass({
 			editLink = this.props.brew.googleId + editLink;
 		}
 
-		return <a className='editLink' href={`/edit/${editLink}`} target='_blank' rel='noopener noreferrer'>
+		return <a href={`/edit/${editLink}`} target='_blank' rel='noopener noreferrer'>
 			<i className='fas fa-pencil-alt' title='Edit' />
 		</a>;
 	},
@@ -75,7 +73,7 @@ const BrewItem = createClass({
 			shareLink = this.props.brew.googleId + shareLink;
 		}
 
-		return <a className='shareLink' href={`/share/${shareLink}`} target='_blank' rel='noopener noreferrer'>
+		return <a href={`/share/${shareLink}`} target='_blank' rel='noopener noreferrer'>
 			<i className='fas fa-share-alt' title='Share' />
 		</a>;
 	},
@@ -88,7 +86,7 @@ const BrewItem = createClass({
 			shareLink = this.props.brew.googleId + shareLink;
 		}
 
-		return <a className='downloadLink' href={`/download/${shareLink}`}>
+		return <a href={`/download/${shareLink}`}>
 			<i className='fas fa-download' title='Download' />
 		</a>;
 	},
@@ -112,10 +110,6 @@ const BrewItem = createClass({
 			</div>
 			<hr />
 			<div className='info'>
-				<span title={`Authors:\n${brew.authors.join('\n')}`}>
-					<i className='fas fa-user'/> {brew.authors.join(', ')}
-				</span>
-				<br />
 				<span title={`Last viewed: ${moment(brew.lastViewed).local().format(dateFormatString)}`}>
 					<i className='fas fa-eye'/> {brew.views}
 				</span>
@@ -124,12 +118,14 @@ const BrewItem = createClass({
 						<i className='far fa-file' /> {brew.pageCount}
 					</span>
 				}
-				<span title={dedent`
-					Created: ${moment(brew.createdAt).local().format(dateFormatString)}
-					Last updated: ${moment(brew.updatedAt).local().format(dateFormatString)}`}>
+				<span>
 					<i className='fas fa-sync-alt' /> {moment(brew.updatedAt).fromNow()}
 				</span>
 				{this.renderGoogleDriveIcon()}
+				<br />
+				<span title={`Authors:\n${brew.authors.join('\n')}`}>
+					<i className='fas fa-user'/> {brew.authors.join(', ')}
+				</span>
 			</div>
 
 			<div className='links'>

client/homebrew/pages/userPage/brewItem/brewItem.less

@@ -27,11 +27,12 @@
 	.info{
 		position: initial;
 		bottom: 2px;
+		margin-bottom: 4px;
 		font-family : ScalySans;
 		font-size   : 1.2em;
 		&>span{
+			display      : float;
 			margin-right : 12px;
-			line-height  : 1.5em;
 		}
 	}
 	&:hover{

client/homebrew/pages/userPage/userPage.jsx

@@ -13,7 +13,6 @@ 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 ReportIssue = require('../../navbar/issue.navitem.jsx');
 
 // const brew = {
 // 	title   : 'SUPER Long title woah now',
@@ -24,7 +23,6 @@ const ReportIssue = require('../../navbar/issue.navitem.jsx');
 
 
 const UserPage = createClass({
-	displayName     : 'UserPage',
 	getDefaultProps : function() {
 		return {
 			username : '',
@@ -87,7 +85,7 @@ const UserPage = createClass({
 				  <button
 					  value={`${sortValue}`}
 					  onClick={this.handleSortOptionChange}
-					  className={`sortOption ${(this.state.sortType == sortValue ? 'active' : '')}`}
+					  className={`${(this.state.sortType == sortValue ? 'active' : '')}`}
 				  >
   					{`${sortTitle}`}
 		 		  </button>
@@ -103,7 +101,7 @@ const UserPage = createClass({
 
 	renderFilterOption : function(){
 		return <td>
-			<label className='filterOption'>
+			<label>
 				<i className='fas fa-search'></i>
 				<input
 					type='search'
@@ -164,7 +162,6 @@ const UserPage = createClass({
 			<Navbar>
 				<Nav.section>
 					<NewBrew />
-					<ReportIssue />
 					<RecentNavItem />
 					<Account />
 				</Nav.section>

config/default.json

@@ -2,6 +2,5 @@
 	"host" : "homebrewery.local.naturalcrit.com:8000",
 	"naturalcrit_url" : "local.naturalcrit.com:8010",
 	"secret" : "secret",
-	"web_port" : 8000,
-	"enable_v3" : true
+	"web_port" : 8000
 }

faq.md

@@ -1,152 +0,0 @@
-```css
-h5 {
-	font-size: .35cm !important;
-}
-
-.taskList li {
-	list-style-type : none;
-}
-
-.taskList li input {
-	margin-left : -0.52cm;
-	transform: translateY(.05cm);
-	filter: brightness(1.1) drop-shadow(1px 2px 1px #222);
-}
-
-.taskList li input[checked] {
-	filter: sepia(100%) hue-rotate(60deg) saturate(3.5) contrast(4) brightness(1.1) drop-shadow(1px 2px 1px #222);
-}
-
-pre + * {
-	margin-top: 0.17cm;
-}
-
-pre {
-	margin-top: 0.17cm;
-}
-
-.page pre code {
-	word-break:break-word;
-}
-
-.page p + pre {
-	margin-top : 0.1cm;
-}
-
-.page h1 + p:first-letter {
-	all:unset;
-}
-
-.page .toc ul {
-	margin-top:0;
-}
-
-.page h3 {
-	font-family:inherit;
-	font-size:inherit;
-	border:inherit;
-	margin-top:12px;
-	margin-bottom:5px
-}
-
-.page h3:before {
-	content:'Q.';
-	position:absolute;
-	font-size:2em;
-	margin-left:-1.2em;	
-}
-
-.page .columnSplit + h3 {
-	margin-top:0;
-}
-```
-
-# FAQ
-{{wide Updated Oct. 11, 2021}}
-
-
-### The site is down for me! Anyone else?
-
-You can check the site status here: [Everyone or Just Me](https://downforeveryoneorjustme.com/homebrewery.naturalcrit.com)
-
-### How do I log out?
-
-Go to https://homebrewery.naturalcrit.com/login, and hit the "*logout*" link.
-
-### Why am I getting an error when trying to save, and my account is linked to Google?
-
-A sign-in with Google only lasts a year until the authentication expires.  You must go [here](https://www.naturalcrit.com/login), click the *Log-out* button, and then sign back in using your Google account.
-
-### I lost my password, how do I reset it?  How do I change my password?
-
-Homebrewery is specifically designed to not hold personal information as a measure to protect both users and admin, and does not require an email address.  Thus it would be difficult to send a new password to a user.  Reach out to the moderators on [the subreddit](https://www.reddit.com/r/homebrewery) with your Homebrewery username.  
-
-If you have linked your account with a Google account, you would change your password within Google.
-
-### Is there a way to restore a previous version of my brew?
-
-Currently, there is no way to do this through the site yourself. This would take too much of a toll on the amount of storage the homebrewery requires. However, we do have daily backups of our database that we keep for 8 days, and you can contact the moderators on [the subreddit](https://www.reddit.com/r/homebrewery) with your Homebrewery username, the name of the lost brew, and the last known time it was working properly. We can manually look through our backups and restore it if it exists.
-
-### I worked on a brew for X hours, and suddenly all the text disappeared!
-
-This usually happens if you accidentally drag-select all of your text and then start typing which overwrites the selection. Do not panic, and do not refresh the page or reload your brew quite yet as it is probably auto-saved in this state already. Simply press CTRL+Z as many times as needed to undo your last few changes and you will be back to where you were, then make sure to save your brew in the "good" state.
-
-\column
-
-### Why is only Chrome supported?
-
-Different browsers have differing abilities to handle web styling (or "CSS").  For example, Firefox is not currently capable of handling column breaks well but Chrome has no problem.  Also, each browser has slight differences in how they display pages which can make it a nightmare to compensate for.  These capabilities change over time and we are hopeful that each browser update bridges these gaps and adds more features; until then, we will develop with one browser in mind.
-
-### Both my friend and myself are using Chrome, but the brews still look different.  Why?
-
-A pixel can be rendered differently depending on the browser, operating system, computer, or screen.  Unless you and your friend have exactly the same setup, it is likely your online brew will have very tiny differences.  However, sometimes a few pixels is all it takes to create *big* differences....for example, an extra pixel can cause a whole line of text or even a monster stat block to run out of space in it's current column and be pushed to the next column or even off the page.  
-
-The best way to avoid this is to leave space at the end of a column equal to one or two lines of text.  Or, create a PDF from your document for sharing--- PDF's are designed to be rendered the same on all devices.
-
-### Why do I need to manually create a new page?  Why doesn't text flow between pages?
-
-A Homebrewery document is at it's core an HTML & CSS document, and currently limited by the specs of those technologies.  It is currently not possible to flow content from inside one box ("page") to the inside of another box.  It seems likely that someday CSS will add this capability, and if/when that happens, Homebrewery will adopt it as soon as possible.
-
-### Where do I get images?
-The Homebrewery does not provide images for use besides some page elements and example images for snippets.  You will need to find your own images for use and be sure you are following the appropriate license requirements.  
-
-Once you have an image you would like to use, it is recommended to host it somewhere that won't disappear; commonly, people host their images on [Imgur](https://www.imgur.com).  Create an account and upload your images there, and use the *Direct Link* that is shown when you click into the image from the gallery in your Homebrewery document.
-
-\page
-
-### A particular font does not work for my language, what do I do?
-The fonts used were originally created for use with the English language, though revisions since then have added more support for other languages.  They are still not complete sets and may be missing a glyph/character you need.  Unfortunately, the volunteer group as it stands at the time of this writing does not have a font guru, so it would be difficult to add more glyphs (especially complicated glyphs).  Let us know which glyph is missing on the subreddit, but you may need to search [Google Fonts](https://fonts.google.com) for an alternative font if you need something fast.
-
-### Whenever I click on the "Get PDF" button, instead of getting a download, it opens Print Preview in another tab.
-Yes, this is by design. In the print preview, select "Save as PDF" as the Destination, and then click "Save". There will be a normal download dialog where you can save your brew as a PDF.
-
-### The preview window is suddenly gone, I can only see the editor side of the Homebrewery (or the other way around).
-
-1. Press `CTRL`+`SHIFT`+`i` (or right-click and select "Inspect") while in the Homebrewery.
-
-2. Expand...
-```
-	- `body` 
-	- `main`
-	- `div class="homebrew"`
-	- `div class="editPage page"`
-	- `div class="content"`
-	- `div class="splitPane"`
-```
-
-There you will find 3 divs: `div class="pane" [...]`, `div class="divider" [...]`, and `div class="pane" [...]`.
-
-The `class="pane"` looks similar to this: `div class="pane" data-reactid="36" style="flex: 0 0 auto; width: 925px;"`.
-
-Change whatever stands behind width: to something smaller than your display width. 
-
-### I have white borders on the bottom/sides of the print preview.
-
-The Homebrewery paper size and your print paper size do not match.
-
-The Homebrewery defaults to creating US Letter page sizes.  If you are printing with A4 size paper, you must add the "A4 Page Size" snippet.  In the "Print" dialog be sure your Paper Size matches the page size in Homebrewery.
-
-
-### Typing `#### Adhesion` in the text editor doesn't show the header at all in the completed page?
-
-Your ad-blocking software is mistakenly assuming your text to be an ad. Whitelist homebrewery.naturalcrit.com in your ad-blocking software.

install/README.UBUNTU.md

@@ -1,35 +0,0 @@
-# Ubuntu Installation Instructions
-
-## Before Installing
-
-These instructions assume that you are installing to a completely new, fresh Ubuntu installation. As such, some steps will not be necessary if you are installing to an existing Ubuntu instance.
-
-## Installation instructions
-
-1. Install Ubuntu.
-
-2. Install wget (`apt install -y wget`). This may already be installed, depending on your exact Ubuntu version.
-
-3. Download the installation script (`wget https://raw.githubusercontent.com/naturalcrit/homebrewery/master/install/ubuntu/install.sh`).
-
-4. Make the downloaded file executable (`chmod +x install.sh`).
-
-5. Run the script (`sudo ./install.sh`). This will automatically download all of the required packages, install both them and HomeBrewery, configure the system and finally start HomeBrewery.
-
-**NOTE:** At this time, the script **ONLY** installs HomeBrewery. It does **NOT** install the NaturalCrit login system, as that is currently a completely separate project.
-
----
-
-### Testing
-
-These installation instructions have been tested on the following Ubuntu releases:
-
-- *ubuntu-20.04.3-desktop-amd64*
-
-## Final Notes
-
-While this installation process works successfully at the time of writing (December 19, 2021), it relies on all of the Node.JS packages used in the HomeBrewery project retaining their cross-platform capabilities to continue to function. This is one of the inherent advantages of Node.JS, but it is by no means guaranteed and as such, functionality or even installation may fail without warning at some point in the future.
-
-Regards,  
-G  
-December 19, 2021

install/ubuntu/etc/systemd/system/homebrewery.service

@@ -1,13 +0,0 @@
-[Unit]
-Description=Homebrewery Web Server
-
-[Service]
-User=root
-After=mongodb
-Environment=NODE_ENV=local
-WorkingDirectory=/usr/local/homebrewery
-ExecStart=node server.js
-Restart=always
-
-[Install]
-WantedBy=multi-user.target

install/ubuntu/install.sh

@@ -1,34 +0,0 @@
-#!/bin/sh
-
-# Install CURL and add required NodeJS source to package repo
-echo ::Install CURL
-apt install -y curl
-echo ::Add NodeJS source to package repo
-curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
-
-# Install required packages
-echo ::Install Homebrewery requirements
-apt satisfy -y git nodejs npm mongodb
-
-# Clone Homebrewery repo
-echo ::Get Homebrewery files
-cd /usr/local/
-git clone https://github.com/naturalcrit/homebrewery.git
-
-# Install Homebrewery
-echo ::Install Homebrewery
-cd homebrewery
-npm install
-npm audit fix
-npm run postinstall
-
-# Create Homebrewery service
-echo ::Create Homebrewery service
-ln -s /usr/local/homebrewery/install/ubuntu/etc/systemd/system/homebrewery.service /etc/systemd/system/homebrewery.service
-systemctl daemon-reload
-echo ::Set Homebrewery to start automatically
-systemctl enable homebrewery
-
-# Start Homebrewery
-echo ::Start Homebrewery
-systemctl start homebrewery

package.json

@@ -1,9 +1,9 @@
 {
   "name": "homebrewery",
   "description": "Create authentic looking D&D homebrews using only markdown",
-  "version": "3.0.6",
+  "version": "3.0.0",
   "engines": {
-    "node": "16.11.x"
+    "node": "14.15.x"
   },
   "repository": {
     "type": "git",
@@ -18,8 +18,8 @@
     "lint:dry": "eslint **/*.{js,jsx}",
     "circleci": "npm test && eslint **/*.{js,jsx} --max-warnings=0",
     "verify": "npm run lint && npm test",
-    "test": "jest",
-    "test:dev": "jest --verbose --watch",
+    "test": "pico-check",
+    "test:dev": "pico-check -v -w",
     "phb": "node scripts/phb.js",
     "prod": "set NODE_ENV=production && npm run build",
     "postinstall": "npm run buildall",
@@ -30,63 +30,53 @@
   "eslintIgnore": [
     "build/*"
   ],
-  "jest": {
-    "modulePaths": [
-      "mode_modules",
-      "shared",
-      "server"
-    ]
+  "pico-check": {
+    "require": "./tests/test.init.js"
   },
   "babel": {
     "presets": [
       "@babel/preset-env",
       "@babel/preset-react"
-    ],
-    "plugins": [
-      "@babel/plugin-transform-runtime"
     ]
   },
   "dependencies": {
-    "@babel/core": "^7.16.12",
-    "@babel/plugin-transform-runtime": "^7.16.10",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
-    "body-parser": "^1.19.1",
+    "@babel/core": "^7.15.0",
+    "@babel/plugin-transform-runtime": "^7.15.0",
+    "@babel/preset-env": "^7.15.4",
+    "@babel/preset-react": "^7.14.5",
+    "body-parser": "^1.19.0",
     "classnames": "^2.3.1",
-    "codemirror": "^5.65.1",
-    "cookie-parser": "^1.4.6",
+    "codemirror": "^5.62.3",
+    "cookie-parser": "^1.4.5",
     "create-react-class": "^15.7.0",
-    "dedent-tabs": "^0.10.1",
-    "express": "^4.17.2",
-    "express-async-handler": "^1.2.0",
+    "dedent-tabs": "^0.9.0",
+    "express": "^4.17.1",
+    "express-async-handler": "^1.1.4",
     "express-static-gzip": "2.1.1",
     "fs-extra": "10.0.0",
-    "googleapis": "92.0.0",
-    "js-yaml": "^4.1.0",
+    "googleapis": "85.0.0",
     "jwt-simple": "^0.5.6",
     "less": "^3.13.1",
     "lodash": "^4.17.21",
-    "marked": "4.0.11",
-    "marked-extended-tables": "^1.0.3",
+    "marked": "3.0.3",
     "markedLegacy": "npm:marked@^0.3.19",
     "moment": "^2.29.1",
-    "mongoose": "^6.1.8",
-    "nanoid": "3.2.0",
+    "mongoose": "^5.13.7",
+    "nanoid": "3.1.25",
     "nconf": "^0.11.3",
-    "prop-types": "15.8.0",
-    "query-string": "7.1.0",
+    "prop-types": "15.7.2",
+    "query-string": "7.0.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "react-frame-component": "5.2.2-alpha.0",
+    "react-frame-component": "4.1.3",
     "react-router-dom": "5.3.0",
     "sanitize-filename": "1.6.3",
     "superagent": "^6.1.0",
     "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
   },
   "devDependencies": {
-    "eslint": "^8.7.0",
-    "eslint-plugin-react": "^7.28.0",
-    "jest": "^27.4.5",
-    "supertest": "^6.2.2"
+    "eslint": "^7.32.0",
+    "eslint-plugin-react": "^7.25.1",
+    "pico-check": "^2.1.3"
   }
 }

scripts/project.json

@@ -12,18 +12,6 @@
 		"codemirror/mode/gfm/gfm.js",
 		"codemirror/mode/css/css.js",
 		"codemirror/mode/javascript/javascript.js",
-		"codemirror/addon/fold/foldcode.js",
-		"codemirror/addon/fold/foldgutter.js",
-		"codemirror/addon/fold/xml-fold.js",
-		"codemirror/addon/search/search.js",
-		"codemirror/addon/search/searchcursor.js",
-		"codemirror/addon/search/jump-to-line.js",
-		"codemirror/addon/search/match-highlighter.js",
-		"codemirror/addon/search/matchesonscrollbar.js",
-		"codemirror/addon/dialog/dialog.js",
-		"codemirror/addon/edit/closetag.js",
-		"codemirror/addon/edit/trailingspace.js",
-		"codemirror/addon/selection/active-line.js",
 		"moment",
 		"superagent",
 		"marked"

server.js

@@ -1,5 +1,67 @@
-const DB = require('./server/db.js');
-const server = require('./server/app.js');
+/*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
+const _ = require('lodash');
+const jwt = require('jwt-simple');
+const express = require('express');
+const app = express();
+
+const homebrewApi = require('./server/homebrew.api.js');
+const GoogleActions = require('./server/googleActions.js');
+const serveCompressedStaticAssets = require('./server/static-assets.mv.js');
+const sanitizeFilename = require('sanitize-filename');
+const asyncHandler = require('express-async-handler');
+
+const brewAccessTypes = ['edit', 'share', 'raw'];
+
+//Get the brew object from the HB database or Google Drive
+const getBrewFromId = asyncHandler(async (id, accessType)=>{
+	if(!brewAccessTypes.includes(accessType))
+		throw ('Invalid Access Type when getting brew');
+	let brew;
+	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);
+	} else {
+		brew = await HomebrewModel.get(accessType == 'edit' ? { editId: id } : { shareId: id });
+		brew = brew.toObject(); // Convert MongoDB object to standard Javascript Object
+	}
+
+	brew = sanitizeBrew(brew, accessType === 'edit' ? false : true);
+	//Split brew.text into text and style
+	//unless the Access Type is RAW, in which case return immediately
+	if(accessType == 'raw') {
+		return brew;
+	}
+	splitTextAndStyle(brew);
+	return brew;
+});
+
+const sanitizeBrew = (brew, full=false)=>{
+	delete brew._id;
+	delete brew.__v;
+	if(full){
+		delete brew.editId;
+	}
+	return brew;
+};
+
+const splitTextAndStyle = (brew)=>{
+	brew.text = brew.text.replaceAll('\r\n', '\n');
+	if(brew.text.startsWith('```css')) {
+		const index = brew.text.indexOf('```\n\n');
+		brew.style = brew.text.slice(7, index - 1);
+		brew.text = brew.text.slice(index + 5);
+	}
+};
+
+app.use('/', serveCompressedStaticAssets(`${__dirname}/build`));
+
+process.chdir(__dirname);
+
+//app.use(express.static(`${__dirname}/build`));
+app.use(require('body-parser').json({ limit: '25mb' }));
+app.use(require('cookie-parser')());
+app.use(require('./server/forcessl.mw.js'));
 
 const config = require('nconf')
 	.argv()
@@ -7,11 +69,218 @@ const config = require('nconf')
 	.file('environment', { file: `config/${process.env.NODE_ENV}.json` })
 	.file('defaults', { file: 'config/default.json' });
 
-DB.connect(config).then(()=>{
-	// Ensure that we have successfully connected to the database
-	// before launching server
-	const PORT = process.env.PORT || config.get('web_port') || 8000;
-	server.app.listen(PORT, ()=>{
-		console.log(`server on port: ${PORT}`);
-	});
+//DB
+const mongoose = require('mongoose');
+mongoose.connect(config.get('mongodb_uri') || config.get('mongolab_uri') || 'mongodb://localhost/naturalcrit',
+	{ retryWrites: false, useNewUrlParser: true, useCreateIndex: true, useUnifiedTopology: true });
+mongoose.connection.on('error', ()=>{
+	console.log('Error : Could not connect to a Mongo Database.');
+	console.log('        If you are running locally, make sure mongodb.exe is running.');
+	throw 'Can not connect to Mongo';
 });
+
+//Account Middleware
+app.use((req, res, next)=>{
+	if(req.cookies && req.cookies.nc_session){
+		try {
+			req.account = jwt.decode(req.cookies.nc_session, config.get('secret'));
+			//console.log("Just loaded up JWT from cookie:");
+			//console.log(req.account);
+		} catch (e){}
+	}
+
+	req.config = {
+		google_client_id     : config.get('google_client_id'),
+		google_client_secret : config.get('google_client_secret')
+	};
+	return next();
+});
+
+app.use(homebrewApi);
+app.use(require('./server/admin.api.js'));
+
+const HomebrewModel  = require('./server/homebrew.model.js').model;
+const welcomeText    = require('fs').readFileSync('./client/homebrew/pages/homePage/welcome_msg.md', 'utf8');
+const welcomeTextV3  = require('fs').readFileSync('./client/homebrew/pages/homePage/welcome_msg_v3.md', 'utf8');
+const changelogText  = require('fs').readFileSync('./changelog.md', 'utf8');
+
+String.prototype.replaceAll = function(s, r){return this.split(s).join(r);};
+
+//Robots.txt
+app.get('/robots.txt', (req, res)=>{
+	return res.sendFile(`${__dirname}/robots.txt`);
+});
+
+//Home page
+app.get('/', async (req, res, next)=>{
+	const brew = {
+		text : welcomeText
+	};
+	req.brew = brew;
+	return next();
+});
+
+//Home page v3
+app.get('/v3_preview', async (req, res, next)=>{
+	const brew = {
+		text     : welcomeTextV3,
+		renderer : 'V3'
+	};
+	splitTextAndStyle(brew);
+	req.brew = brew;
+	return next();
+});
+
+//Changelog page
+app.get('/changelog', async (req, res, next)=>{
+	const brew = {
+		title    : 'Changelog',
+		text     : changelogText,
+		renderer : 'V3'
+	};
+	splitTextAndStyle(brew);
+	req.brew = brew;
+	return next();
+});
+
+//Source page
+app.get('/source/:id', asyncHandler(async (req, res)=>{
+	const brew = await getBrewFromId(req.params.id, 'raw');
+
+	const replaceStrings = { '&': '&amp;', '<': '&lt;', '>': '&gt;' };
+	let text = brew.text;
+	for (const replaceStr in replaceStrings) {
+		text = text.replaceAll(replaceStr, replaceStrings[replaceStr]);
+	}
+	text = `<code><pre style="white-space: pre-wrap;">${text}</pre></code>`;
+	res.status(200).send(text);
+}));
+
+//Download brew source page
+app.get('/download/:id', asyncHandler(async (req, res)=>{
+	const brew = await getBrewFromId(req.params.id, 'raw');
+	const prefix = 'HB - ';
+
+	let fileName = sanitizeFilename(`${prefix}${brew.title}`).replaceAll(' ', '');
+	if(!fileName || !fileName.length) { fileName = `${prefix}-Untitled-Brew`; };
+	res.set({
+		'Cache-Control'       : 'no-cache',
+		'Content-Type'        : 'text/plain',
+		'Content-Disposition' : `attachment; filename="${fileName}.txt"`
+	});
+	res.status(200).send(brew.text);
+}));
+
+//User Page
+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)
+	.catch((err)=>{
+		console.log(err);
+	});
+
+	if(ownAccount && req?.account?.googleId){
+		const googleBrews = await GoogleActions.listGoogleBrews(req, res)
+		.catch((err)=>{
+			console.error(err);
+		});
+
+		if(googleBrews)
+			brews = _.concat(brews, googleBrews);
+	}
+
+	req.brews = _.map(brews, (brew)=>{
+		return sanitizeBrew(brew, !ownAccount);
+	});
+
+	return next();
+});
+
+//Edit Page
+app.get('/edit/:id', asyncHandler(async (req, res, next)=>{
+	res.header('Cache-Control', 'no-cache, no-store');	//reload the latest saved brew when pressing back button, not the cached version before save.
+	const brew = await getBrewFromId(req.params.id, 'edit');
+	req.brew = brew;
+	return next();
+}));
+
+//New Page
+app.get('/new/:id', asyncHandler(async (req, res, next)=>{
+	const brew = await getBrewFromId(req.params.id, 'share');
+	brew.title = `CLONE - ${brew.title}`;
+	req.brew = brew;
+	return next();
+}));
+
+//Share Page
+app.get('/share/:id', asyncHandler(async (req, res, next)=>{
+	const brew = await getBrewFromId(req.params.id, 'share');
+
+	if(req.params.id.length > 12) {
+		const googleId = req.params.id.slice(0, -12);
+		const shareId = req.params.id.slice(-12);
+		await GoogleActions.increaseView(googleId, shareId, 'share', brew)
+					.catch((err)=>{next(err);});
+	} else {
+		await HomebrewModel.increaseView({ shareId: brew.shareId });
+	}
+
+	req.brew = brew;
+	return next();
+}));
+
+//Print Page
+app.get('/print/:id', asyncHandler(async (req, res, next)=>{
+	const brew = await getBrewFromId(req.params.id, 'share');
+	req.brew = brew;
+	return next();
+}));
+
+//Render the page
+const templateFn = require('./client/template.js');
+app.use((req, res)=>{
+	const props = {
+		version     : require('./package.json').version,
+		url         : req.originalUrl,
+		brew        : req.brew,
+		brews       : req.brews,
+		googleBrews : req.googleBrews,
+		account     : req.account,
+		enable_v3   : config.get('enable_v3')
+	};
+	templateFn('homebrew', title = req.brew ? req.brew.title : '', props)
+        .then((page)=>{ res.send(page); })
+        .catch((err)=>{
+        	console.log(err);
+        	return res.sendStatus(500);
+        });
+});
+
+//v=====----- Error-Handling Middleware -----=====v//
+//Format Errors so all fields will be sent
+const replaceErrors = (key, value)=>{
+	if(value instanceof Error) {
+		const error = {};
+		Object.getOwnPropertyNames(value).forEach(function (key) {
+			error[key] = value[key];
+		});
+		return error;
+	}
+	return value;
+};
+
+const getPureError = (error)=>{
+	return JSON.parse(JSON.stringify(error, replaceErrors));
+};
+
+app.use((err, req, res, next)=>{
+	const status = err.status || 500;
+	console.error(err);
+	res.status(status).send(getPureError(err));
+});
+//^=====--------------------------------------=====^//
+
+const PORT = process.env.PORT || config.get('web_port') || 8000;
+app.listen(PORT);
+console.log(`server on port:${PORT}`);

server/app.js

@@ -1,299 +0,0 @@
-/*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
-const _ = require('lodash');
-const jwt = require('jwt-simple');
-const express = require('express');
-const yaml = require('js-yaml');
-const app = express();
-
-const homebrewApi = require('./homebrew.api.js');
-const GoogleActions = require('./googleActions.js');
-const serveCompressedStaticAssets = require('./static-assets.mv.js');
-const sanitizeFilename = require('sanitize-filename');
-const asyncHandler = require('express-async-handler');
-
-const brewAccessTypes = ['edit', 'share', 'raw'];
-
-//Get the brew object from the HB database or Google Drive
-const getBrewFromId = asyncHandler(async (id, accessType)=>{
-	if(!brewAccessTypes.includes(accessType))
-		throw ('Invalid Access Type when getting brew');
-	let brew;
-	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);
-	} else {
-		brew = await HomebrewModel.get(accessType == 'edit' ? { editId: id } : { shareId: id });
-		brew = brew.toObject(); // Convert MongoDB object to standard Javascript Object
-	}
-
-	brew = sanitizeBrew(brew, accessType === 'edit' ? false : true);
-	//Split brew.text into text and style
-	//unless the Access Type is RAW, in which case return immediately
-	if(accessType == 'raw') {
-		return brew;
-	}
-	splitTextStyleAndMetadata(brew);
-	return brew;
-});
-
-const sanitizeBrew = (brew, full=false)=>{
-	delete brew._id;
-	delete brew.__v;
-	if(full){
-		delete brew.editId;
-	}
-	return brew;
-};
-
-const splitTextStyleAndMetadata = (brew)=>{
-	brew.text = brew.text.replaceAll('\r\n', '\n');
-	if(brew.text.startsWith('```metadata')) {
-		const index = brew.text.indexOf('```\n\n');
-		const metadataSection = brew.text.slice(12, index - 1);
-		const metadata = yaml.load(metadataSection);
-		Object.assign(brew, _.pick(metadata, ['title', 'description', 'tags', 'systems', 'renderer']));
-		brew.text = brew.text.slice(index + 5);
-	}
-	if(brew.text.startsWith('```css')) {
-		const index = brew.text.indexOf('```\n\n');
-		brew.style = brew.text.slice(7, index - 1);
-		brew.text = brew.text.slice(index + 5);
-	}
-};
-
-app.use('/', serveCompressedStaticAssets(`${__dirname}/../build`));
-
-process.chdir(__dirname);
-
-//app.use(express.static(`${__dirname}/build`));
-app.use(require('body-parser').json({ limit: '25mb' }));
-app.use(require('cookie-parser')());
-app.use(require('./forcessl.mw.js'));
-
-// FIXME: the config should be passed as an argument for the app
-const config = require('nconf')
-	.argv()
-	.env({ lowerCase: true })
-	.file('environment', { file: `config/${process.env.NODE_ENV}.json` })
-	.file('defaults', { file: 'config/default.json' });
-
-//Account Middleware
-app.use((req, res, next)=>{
-	if(req.cookies && req.cookies.nc_session){
-		try {
-			req.account = jwt.decode(req.cookies.nc_session, config.get('secret'));
-			//console.log("Just loaded up JWT from cookie:");
-			//console.log(req.account);
-		} catch (e){}
-	}
-
-	req.config = {
-		google_client_id     : config.get('google_client_id'),
-		google_client_secret : config.get('google_client_secret')
-	};
-	return next();
-});
-
-app.use(homebrewApi);
-app.use(require('./admin.api.js'));
-
-const HomebrewModel  = require('./homebrew.model.js').model;
-const welcomeText    = require('fs').readFileSync('./../client/homebrew/pages/homePage/welcome_msg.md', 'utf8');
-const welcomeTextV3  = require('fs').readFileSync('./../client/homebrew/pages/homePage/welcome_msg_v3.md', 'utf8');
-const changelogText  = require('fs').readFileSync('./../changelog.md', 'utf8');
-const faqText        = require('fs').readFileSync('./../faq.md', 'utf8');
-
-String.prototype.replaceAll = function(s, r){return this.split(s).join(r);};
-
-//Robots.txt
-app.get('/robots.txt', (req, res)=>{
-	return res.sendFile(`${__dirname}/robots.txt`);
-});
-
-//Home page
-app.get('/', async (req, res, next)=>{
-	const brew = {
-		text : welcomeText
-	};
-	req.brew = brew;
-	return next();
-});
-
-//Home page v3
-app.get('/v3_preview', async (req, res, next)=>{
-	const brew = {
-		text     : welcomeTextV3,
-		renderer : 'V3'
-	};
-	splitTextStyleAndMetadata(brew);
-	req.brew = brew;
-	return next();
-});
-
-//Changelog page
-app.get('/changelog', async (req, res, next)=>{
-	const brew = {
-		title    : 'Changelog',
-		text     : changelogText,
-		renderer : 'V3'
-	};
-	splitTextStyleAndMetadata(brew);
-	req.brew = brew;
-	return next();
-});
-
-//FAQ page
-app.get('/faq', async (req, res, next)=>{
-	const brew = {
-		title    : 'FAQ',
-		text     : faqText,
-		renderer : 'V3'
-	};
-	splitTextStyleAndMetadata(brew);
-	req.brew = brew;
-	return next();
-});
-
-//Source page
-app.get('/source/:id', asyncHandler(async (req, res)=>{
-	const brew = await getBrewFromId(req.params.id, 'raw');
-
-	const replaceStrings = { '&': '&amp;', '<': '&lt;', '>': '&gt;' };
-	let text = brew.text;
-	for (const replaceStr in replaceStrings) {
-		text = text.replaceAll(replaceStr, replaceStrings[replaceStr]);
-	}
-	text = `<code><pre style="white-space: pre-wrap;">${text}</pre></code>`;
-	res.status(200).send(text);
-}));
-
-//Download brew source page
-app.get('/download/:id', asyncHandler(async (req, res)=>{
-	const brew = await getBrewFromId(req.params.id, 'raw');
-	const prefix = 'HB - ';
-
-	let fileName = sanitizeFilename(`${prefix}${brew.title}`).replaceAll(' ', '');
-	if(!fileName || !fileName.length) { fileName = `${prefix}-Untitled-Brew`; };
-	res.set({
-		'Cache-Control'       : 'no-cache',
-		'Content-Type'        : 'text/plain',
-		'Content-Disposition' : `attachment; filename="${fileName}.txt"`
-	});
-	res.status(200).send(brew.text);
-}));
-
-//User Page
-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)
-	.catch((err)=>{
-		console.log(err);
-	});
-
-	if(ownAccount && req?.account?.googleId){
-		const googleBrews = await GoogleActions.listGoogleBrews(req, res)
-		.catch((err)=>{
-			console.error(err);
-		});
-
-		if(googleBrews)
-			brews = _.concat(brews, googleBrews);
-	}
-
-	req.brews = _.map(brews, (brew)=>{
-		return sanitizeBrew(brew, !ownAccount);
-	});
-
-	return next();
-});
-
-//Edit Page
-app.get('/edit/:id', asyncHandler(async (req, res, next)=>{
-	res.header('Cache-Control', 'no-cache, no-store');	//reload the latest saved brew when pressing back button, not the cached version before save.
-	const brew = await getBrewFromId(req.params.id, 'edit');
-	req.brew = brew;
-	return next();
-}));
-
-//New Page
-app.get('/new/:id', asyncHandler(async (req, res, next)=>{
-	const brew = await getBrewFromId(req.params.id, 'share');
-	brew.title = `CLONE - ${brew.title}`;
-	req.brew = brew;
-	return next();
-}));
-
-//Share Page
-app.get('/share/:id', asyncHandler(async (req, res, next)=>{
-	const brew = await getBrewFromId(req.params.id, 'share');
-
-	if(req.params.id.length > 12) {
-		const googleId = req.params.id.slice(0, -12);
-		const shareId = req.params.id.slice(-12);
-		await GoogleActions.increaseView(googleId, shareId, 'share', brew)
-					.catch((err)=>{next(err);});
-	} else {
-		await HomebrewModel.increaseView({ shareId: brew.shareId });
-	}
-
-	req.brew = brew;
-	return next();
-}));
-
-//Print Page
-app.get('/print/:id', asyncHandler(async (req, res, next)=>{
-	const brew = await getBrewFromId(req.params.id, 'share');
-	req.brew = brew;
-	return next();
-}));
-
-//Render the page
-const templateFn = require('./../client/template.js');
-app.use((req, res)=>{
-	const props = {
-		version     : require('./../package.json').version,
-		url         : req.originalUrl,
-		brew        : req.brew,
-		brews       : req.brews,
-		googleBrews : req.googleBrews,
-		account     : req.account,
-		enable_v3   : config.get('enable_v3')
-	};
-	const title = req.brew ? req.brew.title : '';
-	templateFn('homebrew', title, props)
-        .then((page)=>{ res.send(page); })
-        .catch((err)=>{
-        	console.log(err);
-        	return res.sendStatus(500);
-        });
-});
-
-//v=====----- Error-Handling Middleware -----=====v//
-//Format Errors so all fields will be sent
-const replaceErrors = (key, value)=>{
-	if(value instanceof Error) {
-		const error = {};
-		Object.getOwnPropertyNames(value).forEach(function (key) {
-			error[key] = value[key];
-		});
-		return error;
-	}
-	return value;
-};
-
-const getPureError = (error)=>{
-	return JSON.parse(JSON.stringify(error, replaceErrors));
-};
-
-app.use((err, req, res, next)=>{
-	const status = err.status || 500;
-	console.error(err);
-	res.status(status).send(getPureError(err));
-});
-//^=====--------------------------------------=====^//
-
-module.exports = {
-	app : app
-};

server/db.js

@@ -1,37 +0,0 @@
-// The main purpose of this file is to provide an interface for database
-// connection. Even though the code is quite simple and basically a tiny
-// wrapper around mongoose package, it works as single point where
-// database setup/config is performed and the interface provided here can be
-// reused by both the main application and all tests which require database
-// connection.
-
-const Mongoose = require('mongoose');
-
-const getMongoDBURL = (config)=>{
-	return config.get('mongodb_uri') ||
-           config.get('mongolab_uri') ||
-           'mongodb://localhost/homebrewery';
-};
-
-const handleConnectionError = (error)=>{
-	if(error) {
-		console.error('Could not connect to a Mongo database: \n');
-		console.error(error);
-		console.error('\nIf you are running locally, make sure mongodb.exe is running and DB URL is configured properly');
-		process.exit(1); // non-zero exit code to indicate an error
-	}
-};
-
-const disconnect = async ()=>{
-	return await Mongoose.disconnect();
-};
-
-const connect = async (config)=>{
-	return await Mongoose.connect(getMongoDBURL(config),
-		{ retryWrites: false }, handleConnectionError);
-};
-
-module.exports = {
-	connect    : connect,
-	disconnect : disconnect
-};

server/googleActions.js

@@ -11,7 +11,7 @@ const config = require('nconf')
 
 //let oAuth2Client;
 
-const GoogleActions = {
+GoogleActions = {
 
 	authCheck : (account, res)=>{
 		if(!account || !account.googleId){ // If not signed into Google
@@ -96,7 +96,7 @@ const GoogleActions = {
 		const drive = google.drive({ version: 'v3', auth: oAuth2Client });
 
 		const obj = await drive.files.list({
-			pageSize : 1000,
+			pageSize : 100,
 			fields   : 'nextPageToken, files(id, name, description, createdTime, modifiedTime, properties)',
 			q        : 'mimeType != \'application/vnd.google-apps.folder\' and trashed = false'
 		})
@@ -120,10 +120,10 @@ const GoogleActions = {
 				updatedAt   : file.modifiedTime,
 				gDrive      : true,
 				googleId    : file.id,
-				pageCount   : parseInt(file.properties.pageCount),
+				pageCount   : file.properties.pageCount,
 				title       : file.properties.title,
 				description : file.description,
-				views       : parseInt(file.properties.views),
+				views       : 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

server/homebrew.api.js

@@ -4,7 +4,6 @@ const router = require('express').Router();
 const zlib = require('zlib');
 const GoogleActions = require('./googleActions.js');
 const Markdown = require('../shared/naturalcrit/markdown.js');
-const yaml = require('js-yaml');
 
 // const getTopBrews = (cb) => {
 // 	HomebrewModel.find().sort({ views: -1 }).limit(5).exec(function(err, brews) {
@@ -12,22 +11,6 @@ const yaml = require('js-yaml');
 // 	});
 // };
 
-const mergeBrewText = (brew)=>{
-	let text = brew.text;
-	if(brew.style !== undefined) {
-		text = `\`\`\`css\n` +
-			`${brew.style || ''}\n` +
-			`\`\`\`\n\n` +
-			`${text}`;
-	}
-	const metadata = _.pick(brew, ['title', 'description', 'tags', 'systems', 'renderer']);
-	text = `\`\`\`metadata\n` +
-		`${yaml.dump(metadata)}\n` +
-		`\`\`\`\n\n` +
-		`${text}`;
-	return text;
-};
-
 const MAX_TITLE_LENGTH = 100;
 
 const getGoodBrewTitle = (text)=>{
@@ -45,6 +28,16 @@ const excludePropsFromUpdate = (brew)=>{
 	return brew;
 };
 
+const mergeBrewText = (text, style)=>{
+	if(typeof style !== 'undefined') {
+		text = `\`\`\`css\n` +
+					 `${style}\n` +
+					 `\`\`\`\n\n` +
+					 `${text}`;
+	}
+	return text;
+};
+
 const newBrew = (req, res)=>{
 	const brew = req.body;
 
@@ -53,7 +46,7 @@ const newBrew = (req, res)=>{
 	}
 
 	brew.authors = (req.account) ? [req.account.username] : [];
-	brew.text = mergeBrewText(brew);
+	brew.text = mergeBrewText(brew.text, brew.style);
 
 	delete brew.editId;
 	delete brew.shareId;
@@ -82,7 +75,7 @@ const updateBrew = (req, res)=>{
 		.then((brew)=>{
 			const updateBrew = excludePropsFromUpdate(req.body);
 			brew = _.merge(brew, updateBrew);
-			brew.text = mergeBrewText(brew);
+			brew.text = mergeBrewText(brew.text, brew.style);
 
 			// Compress brew text to binary before saving
 			brew.textBin = zlib.deflateRawSync(brew.text);
@@ -150,7 +143,7 @@ const newGoogleBrew = async (req, res, next)=>{
 	}
 
 	brew.authors = (req.account) ? [req.account.username] : [];
-	brew.text = mergeBrewText(brew);
+	brew.text = mergeBrewText(brew.text, brew.style);
 
 	delete brew.editId;
 	delete brew.shareId;
@@ -172,13 +165,13 @@ const updateGoogleBrew = async (req, res, next)=>{
 	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);
+	brew.text = mergeBrewText(brew.text, brew.style);
 
 	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);
+		return res.status(err.response.status).send(err);
 	}
 };
 

shared/homebrewery/renderWarnings/renderWarnings.jsx

@@ -7,7 +7,6 @@ const cx    = require('classnames');
 const DISMISS_KEY = 'dismiss_render_warning';
 
 const RenderWarnings = createClass({
-	displayName     : 'RenderWarnings',
 	getInitialState : function() {
 		return {
 			warnings : {}

shared/naturalcrit/codeEditor/close-tag.js

@@ -1,48 +0,0 @@
-const autoCloseCurlyBraces = function(CodeMirror, cm, typingClosingBrace) {
-	const ranges = cm.listSelections(), replacements = [];
-	for (let i = 0; i < ranges.length; i++) {
-		if(!ranges[i].empty()) return CodeMirror.Pass;
-		const pos = ranges[i].head, line = cm.getLine(pos.line), tok = cm.getTokenAt(pos);
-		if(!typingClosingBrace && (tok.type == 'string' || tok.string.charAt(0) != '{' || tok.start != pos.ch - 1))
-			return CodeMirror.Pass;
-		else if(typingClosingBrace) {
-			let hasUnclosedBraces = false, index = -1;
-			do {
-				index = line.indexOf('{{', index + 1);
-				if(index !== -1 && line.indexOf('}}', index + 1) === -1) {
-					hasUnclosedBraces = true;
-					break;
-				}
-			} while (index !== -1);
-			if(!hasUnclosedBraces) return CodeMirror.Pass;
-		}
-
-		replacements[i] = typingClosingBrace ? {
-			text   : '}}',
-			newPos : CodeMirror.Pos(pos.line, pos.ch + 2)
-		} : {
-			text   : '{}}',
-			newPos : CodeMirror.Pos(pos.line, pos.ch + 1)
-		};
-	}
-
-	for (let i = ranges.length - 1; i >= 0; i--) {
-		const info = replacements[i];
-		cm.replaceRange(info.text, ranges[i].head, ranges[i].anchor, '+insert');
-		const sel = cm.listSelections().slice(0);
-		sel[i] = {
-			head   : info.newPos,
-			anchor : info.newPos
-		};
-		cm.setSelections(sel);
-	}
-};
-
-module.exports = {
-	autoCloseCurlyBraces : function(CodeMirror, codeMirror) {
-		const map = { name: 'autoCloseCurlyBraces' };
-		map[`'{'`] = function(cm) { return autoCloseCurlyBraces(CodeMirror, cm); };
-		map[`'}'`] = function(cm) { return autoCloseCurlyBraces(CodeMirror, cm, true); };
-		codeMirror.addKeyMap(map);
-	}
-};

shared/naturalcrit/codeEditor/codeEditor.jsx

@@ -1,10 +1,9 @@
-/* eslint-disable max-lines */
 require('./codeEditor.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
 const cx = require('classnames');
-const closeTag = require('./close-tag');
+
 
 let CodeMirror;
 if(typeof navigator !== 'undefined'){
@@ -14,168 +13,56 @@ if(typeof navigator !== 'undefined'){
 	require('codemirror/mode/gfm/gfm.js'); //Github flavoured markdown
 	require('codemirror/mode/css/css.js');
 	require('codemirror/mode/javascript/javascript.js');
-
-	//Addons
-	//Code folding
-	require('codemirror/addon/fold/foldcode.js');
-	require('codemirror/addon/fold/foldgutter.js');
-	//Search and replace
-	require('codemirror/addon/search/search.js');
-	require('codemirror/addon/search/searchcursor.js');
-	require('codemirror/addon/search/jump-to-line.js');
-	require('codemirror/addon/search/match-highlighter.js');
-	require('codemirror/addon/search/matchesonscrollbar.js');
-	require('codemirror/addon/dialog/dialog.js');
-	//Trailing space highlighting
-	// require('codemirror/addon/edit/trailingspace.js');
-	//Active line highlighting
-	// require('codemirror/addon/selection/active-line.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');
-	require('codemirror/addon/edit/closetag.js');
-
-	const foldCode = require('./fold-code');
-	foldCode.registerHomebreweryHelper(CodeMirror);
 }
 
 const CodeEditor = createClass({
-	displayName     : 'CodeEditor',
 	getDefaultProps : function() {
 		return {
-			language      : '',
-			value         : '',
-			wrap          : true,
-			onChange      : ()=>{},
-			enableFolding : true
-		};
-	},
-
-	getInitialState : function() {
-		return {
-			docs : {}
+			language : '',
+			value    : '',
+			wrap     : true,
+			onChange : ()=>{}
 		};
 	},
 
 	componentDidMount : function() {
 		this.buildEditor();
-		const newDoc = CodeMirror.Doc(this.props.value, this.props.language);
-		this.codeMirror.swapDoc(newDoc);
 	},
 
 	componentDidUpdate : function(prevProps) {
-		if(prevProps.view !== this.props.view){ //view changed; swap documents
-			let newDoc;
-
-			if(!this.state.docs[this.props.view]) {
-				newDoc = CodeMirror.Doc(this.props.value, this.props.language);
-			} else {
-				newDoc = this.state.docs[this.props.view];
-			}
-
-			const oldDoc = { [prevProps.view]: this.codeMirror.swapDoc(newDoc) };
-
-			this.setState((prevState)=>({
-				docs : _.merge({}, prevState.docs, oldDoc)
-			}));
-
-			this.props.rerenderParent();
-		} else if(this.codeMirror?.getValue() != this.props.value) { //update editor contents if brew.text is changed from outside
-			this.codeMirror.setValue(this.props.value);
+		if(prevProps.language !== this.props.language){ //rebuild editor when switching tabs
+			this.buildEditor();
 		}
-
-		if(this.props.enableFolding) {
-			this.codeMirror.setOption('foldOptions', this.foldOptions(this.codeMirror));
-		} else {
-			this.codeMirror.setOption('foldOptions', false);
+		if(this.codeMirror && this.codeMirror.getValue() != this.props.value) { //update editor contents if brew.text is changed from outside
+			this.codeMirror.setValue(this.props.value);
 		}
 	},
 
 	buildEditor : function() {
 		this.codeMirror = CodeMirror(this.refs.editor, {
-			lineNumbers       : true,
-			lineWrapping      : this.props.wrap,
-			indentWithTabs    : true,
-			tabSize           : 2,
-			historyEventDelay : 250,
-			extraKeys         : {
-				'Ctrl-B'           : this.makeBold,
-				'Cmd-B'            : this.makeBold,
-				'Ctrl-I'           : this.makeItalic,
-				'Cmd-I'            : this.makeItalic,
-				'Ctrl-U'           : this.makeUnderline,
-				'Cmd-U'            : this.makeUnderline,
-				'Ctrl-.'           : this.makeNbsp,
-				'Cmd-.'            : this.makeNbsp,
-				'Shift-Ctrl-.'     : this.makeSpace,
-				'Shift-Cmd-.'      : this.makeSpace,
-				'Shift-Ctrl-,'     : this.removeSpace,
-				'Shift-Cmd-,'      : this.removeSpace,
-				'Ctrl-M'           : this.makeSpan,
-				'Cmd-M'            : this.makeSpan,
-				'Shift-Ctrl-M'     : this.makeDiv,
-				'Shift-Cmd-M'      : this.makeDiv,
-				'Ctrl-/'           : this.makeComment,
-				'Cmd-/'            : this.makeComment,
-				'Ctrl-K'           : this.makeLink,
-				'Cmd-K'            : this.makeLink,
-				'Ctrl-L'           : ()=>this.makeList('UL'),
-				'Cmd-L'            : ()=>this.makeList('UL'),
-				'Shift-Ctrl-L'     : ()=>this.makeList('OL'),
-				'Shift-Cmd-L'      : ()=>this.makeList('OL'),
-				'Shift-Ctrl-1'     : ()=>this.makeHeader(1),
-				'Shift-Ctrl-2'     : ()=>this.makeHeader(2),
-				'Shift-Ctrl-3'     : ()=>this.makeHeader(3),
-				'Shift-Ctrl-4'     : ()=>this.makeHeader(4),
-				'Shift-Ctrl-5'     : ()=>this.makeHeader(5),
-				'Shift-Ctrl-6'     : ()=>this.makeHeader(6),
-				'Shift-Cmd-1'      : ()=>this.makeHeader(1),
-				'Shift-Cmd-2'      : ()=>this.makeHeader(2),
-				'Shift-Cmd-3'      : ()=>this.makeHeader(3),
-				'Shift-Cmd-4'      : ()=>this.makeHeader(4),
-				'Shift-Cmd-5'      : ()=>this.makeHeader(5),
-				'Shift-Cmd-6'      : ()=>this.makeHeader(6),
-				'Shift-Ctrl-Enter' : this.newColumn,
-				'Shift-Cmd-Enter'  : this.newColumn,
-				'Ctrl-Enter'       : this.newPage,
-				'Cmd-Enter'        : this.newPage,
-				'Ctrl-F'           : 'findPersistent',
-				'Cmd-F'            : 'findPersistent',
-				'Shift-Enter'      : 'findPersistentPrevious',
-				'Ctrl-['           : this.foldAllCode,
-				'Cmd-['            : this.foldAllCode,
-				'Ctrl-]'           : this.unfoldAllCode,
-				'Cmd-]'            : this.unfoldAllCode
-			},
-			foldGutter        : true,
-			foldOptions       : this.foldOptions(this.codeMirror),
-			gutters           : ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
-			autoCloseTags     : true,
-			styleActiveLine   : true,
-			showTrailingSpace : false,
-			// specialChars           : / /,
-			// specialCharPlaceholder : function(char) {
-			// 	const el = document.createElement('span');
-			// 	el.className = 'cm-space';
-			// 	el.innerHTML = ' ';
-			// 	return el;
-			// }
+			value          : this.props.value,
+			lineNumbers    : true,
+			lineWrapping   : this.props.wrap,
+			mode           : this.props.language, //TODO: CSS MODE DOESN'T SEEM TO LOAD PROPERLY
+			indentWithTabs : true,
+			tabSize        : 2,
+			extraKeys      : {
+				'Ctrl-B' : this.makeBold,
+				'Cmd-B'  : this.makeBold,
+				'Ctrl-I' : this.makeItalic,
+				'Cmd-I'  : this.makeItalic,
+				'Ctrl-M' : this.makeSpan,
+				'Cmd-M'  : this.makeSpan,
+				'Ctrl-/' : this.makeComment,
+				'Cmd-/'  : this.makeComment
+			}
 		});
-		closeTag.autoCloseCurlyBraces(CodeMirror, this.codeMirror);
 
 		// Note: codeMirror passes a copy of itself in this callback. cm === this.codeMirror. Either one works.
 		this.codeMirror.on('change', (cm)=>{this.props.onChange(cm.getValue());});
 		this.updateSize();
 	},
 
-	makeHeader : function (number) {
-		const selection = this.codeMirror.getSelection();
-		const header = Array(number).fill('#').join('');
-		this.codeMirror.replaceSelection(`${header} ${selection}`, 'around');
-		const cursor = this.codeMirror.getCursor();
-		this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch + selection.length + number + 1 });
-	},
-
 	makeBold : function() {
 		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '**' && selection.slice(-2) === '**';
 		this.codeMirror.replaceSelection(t ? selection.slice(2, -2) : `**${selection}**`, 'around');
@@ -186,55 +73,14 @@ const CodeEditor = createClass({
 	},
 
 	makeItalic : function() {
-		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 1) === '*' && selection.slice(-1) === '*';
-		this.codeMirror.replaceSelection(t ? selection.slice(1, -1) : `*${selection}*`, 'around');
+		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 1) === '_' && selection.slice(-1) === '_';
+		this.codeMirror.replaceSelection(t ? selection.slice(1, -1) : `_${selection}_`, 'around');
 		if(selection.length === 0){
 			const cursor = this.codeMirror.getCursor();
 			this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - 1 });
 		}
 	},
 
-	makeNbsp : function() {
-		this.codeMirror.replaceSelection(' ', 'end');
-	},
-
-	makeSpace : function() {
-		const selection = this.codeMirror.getSelection();
-		const t = selection.slice(0, 8) === '{{width:' && selection.slice(0 -4) === '% }}';
-		if(t){
-			const percent = parseInt(selection.slice(8, -4)) + 10;
-			this.codeMirror.replaceSelection(percent < 90 ? `{{width:${percent}% }}` : '{{width:100% }}', 'around');
-		} else {
-			this.codeMirror.replaceSelection(`{{width:10% }}`, 'around');
-		}
-	},
-
-	removeSpace : function() {
-		const selection = this.codeMirror.getSelection();
-		const t = selection.slice(0, 8) === '{{width:' && selection.slice(0 -4) === '% }}';
-		if(t){
-			const percent = parseInt(selection.slice(8, -4)) - 10;
-			this.codeMirror.replaceSelection(percent > 10 ? `{{width:${percent}% }}` : '', 'around');
-		}
-	},
-
-	newColumn : function() {
-		this.codeMirror.replaceSelection('\n\\column\n\n', 'end');
-	},
-
-	newPage : function() {
-		this.codeMirror.replaceSelection('\n\\page\n\n', 'end');
-	},
-
-	makeUnderline : function() {
-		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 3) === '<u>' && selection.slice(-4) === '</u>';
-		this.codeMirror.replaceSelection(t ? selection.slice(3, -4) : `<u>${selection}</u>`, 'around');
-		if(selection.length === 0){
-			const cursor = this.codeMirror.getCursor();
-			this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - 4 });
-		}
-	},
-
 	makeSpan : function() {
 		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '{{' && selection.slice(-2) === '}}';
 		this.codeMirror.replaceSelection(t ? selection.slice(2, -2) : `{{ ${selection}}}`, 'around');
@@ -244,83 +90,15 @@ const CodeEditor = createClass({
 		}
 	},
 
-	makeDiv : function() {
-		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '{{' && selection.slice(-2) === '}}';
-		this.codeMirror.replaceSelection(t ? selection.slice(2, -2) : `{{\n${selection}\n}}`, 'around');
-		if(selection.length === 0){
-			const cursor = this.codeMirror.getCursor();
-			this.codeMirror.setCursor({ line: cursor.line - 1, ch: cursor.ch });  // set to -2? if wanting to enter classes etc.  if so, get rid of first \n when replacing selection
-		}
-	},
-
 	makeComment : function() {
-		let regex;
-		let cursorPos;
-		let newComment;
-		const selection = this.codeMirror.getSelection();
-		if(this.props.language === 'gfm'){
-			regex = /^\s*(<!--\s?)(.*?)(\s?-->)\s*$/gs;
-			cursorPos = 4;
-			newComment = `<!-- ${selection} -->`;
-		} else {
-			regex = /^\s*(\/\*\s?)(.*?)(\s?\*\/)\s*$/gs;
-			cursorPos = 3;
-			newComment = `/* ${selection} */`;
-		}
-		this.codeMirror.replaceSelection(regex.test(selection) == true ? selection.replace(regex, '$2') : newComment, 'around');
+		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 4) === '<!--' && selection.slice(-3) === '-->';
+		this.codeMirror.replaceSelection(t ? selection.slice(4, -3) : `<!-- ${selection} -->`, 'around');
 		if(selection.length === 0){
 			const cursor = this.codeMirror.getCursor();
-			this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - cursorPos });
-		};
-	},
-
-	makeLink : function() {
-		const isLink = /^\[(.*)\]\((.*)\)$/;
-		const selection = this.codeMirror.getSelection().trim();
-		let match;
-		if(match = isLink.exec(selection)){
-			const altText = match[1];
-			const url     = match[2];
-			this.codeMirror.replaceSelection(`${altText} ${url}`);
-			const cursor = this.codeMirror.getCursor();
-			this.codeMirror.setSelection({ line: cursor.line, ch: cursor.ch - url.length }, { line: cursor.line, ch: cursor.ch });
-		} else {
-			this.codeMirror.replaceSelection(`[${selection || 'alt text'}](url)`);
-			const cursor = this.codeMirror.getCursor();
-			this.codeMirror.setSelection({ line: cursor.line, ch: cursor.ch - 4 }, { line: cursor.line, ch: cursor.ch - 1 });
+			this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - 4 });
 		}
 	},
 
-	makeList : function(listType) {
-		const selectionStart = this.codeMirror.getCursor('from'), selectionEnd = this.codeMirror.getCursor('to');
-		this.codeMirror.setSelection(
-			{ line: selectionStart.line, ch: 0 },
-			{ line: selectionEnd.line, ch: this.codeMirror.getLine(selectionEnd.line).length }
-		);
-		const newSelection = this.codeMirror.getSelection();
-
-		const regex = /^\d+\.\s|^-\s/gm;
-		if(newSelection.match(regex) != null){   	// if selection IS A LIST
-			this.codeMirror.replaceSelection(newSelection.replace(regex, ''), 'around');
-		} else {									// if selection IS NOT A LIST
-			listType == 'UL' ? this.codeMirror.replaceSelection(newSelection.replace(/^/gm, `- `), 'around') :
-				this.codeMirror.replaceSelection(newSelection.replace(/^/gm, (()=>{
-					let n = 1;
-					return ()=>{
-						return `${n++}. `;
-					};
-				})()), 'around');
-		}
-	},
-
-	foldAllCode : function() {
-		this.codeMirror.execCommand('foldAll');
-	},
-
-	unfoldAllCode : function() {
-		this.codeMirror.execCommand('unfoldAll');
-	},
-
 	//=-- Externally used -==//
 	setCursorPosition : function(line, char){
 		setTimeout(()=>{
@@ -334,43 +112,10 @@ const CodeEditor = createClass({
 	updateSize : function(){
 		this.codeMirror.refresh();
 	},
-	redo : function(){
-		return this.codeMirror.redo();
-	},
-	undo : function(){
-		return this.codeMirror.undo();
-	},
-	historySize : function(){
-		return this.codeMirror.doc.historySize();
-	},
-
-	foldOptions : function(cm){
-		return {
-			scanUp      : true,
-			rangeFinder : CodeMirror.fold.homebrewery,
-			widget      : (from, to)=>{
-				let text = '';
-				let currentLine = from.line;
-				const maxLength = 50;
-				while (currentLine <= to.line && text.length <= maxLength) {
-					text += this.codeMirror.getLine(currentLine);
-					if(currentLine < to.line)
-						text += ' ';
-					currentLine += 1;
-				}
-
-				text = text.trim();
-				if(text.length > maxLength)
-					text = `${text.substr(0, maxLength)}...`;
-
-				return `\u21A4 ${text} \u21A6`;
-			}
-		};
-	},
 	//----------------------//
 
 	render : function(){
-		return <div className='codeEditor' ref='editor' style={this.props.style}/>;
+		return <div className='codeEditor' ref='editor' />;
 	}
 });
 

shared/naturalcrit/codeEditor/codeEditor.less

@@ -1,22 +1,5 @@
 @import (less) 'codemirror/lib/codemirror.css';
-@import (less) 'codemirror/addon/fold/foldgutter.css';
-@import (less) 'codemirror/addon/search/matchesonscrollbar.css';
-@import (less) 'codemirror/addon/dialog/dialog.css';
 
 .codeEditor{
-  .CodeMirror-foldmarker {
-    font-family: inherit;
-    text-shadow: none;
-    font-weight: 600;
-  }
 
-  //.cm-tab {
-  //  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAQAAACOs/baAAAARUlEQVR4nGJgIAG8JkXxUAcCtDWemcGR1lY4MvgzCEKY7jSBjgxBDAG09UEQzAe0AMwMHrSOAwEGRtpaMIwAAAAA//8DAG4ID9EKs6YqAAAAAElFTkSuQmCC) no-repeat right;
-  //}
-
-  //.cm-trailingspace {
-  //  .cm-space {
-  //    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAQAgMAAABW5NbuAAAACVBMVEVHcEwAAAAAAAAWawmTAAAAA3RSTlMAPBJ6PMxpAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAFUlEQVQI12NgwACcCQysASAEZGAAACMuAX06aCQUAAAAAElFTkSuQmCC) no-repeat right;
-  //  }
-  //}
 }

shared/naturalcrit/codeEditor/fold-code.js

@@ -1,26 +0,0 @@
-module.exports = {
-	registerHomebreweryHelper : function(CodeMirror) {
-		CodeMirror.registerHelper('fold', 'homebrewery', function(cm, start) {
-			const matcher = /^\\page.*/;
-			const prevLine = cm.getLine(start.line - 1);
-
-			if(start.line === cm.firstLine() || prevLine.match(matcher)) {
-				const lastLineNo = cm.lastLine();
-				let end = start.line;
-
-				while (end < lastLineNo) {
-					if(cm.getLine(end + 1).match(matcher))
-						break;
-					++end;
-				}
-
-				return {
-					from : CodeMirror.Pos(start.line, 0),
-					to   : CodeMirror.Pos(end, cm.getLine(end).length)
-				};
-			}
-
-			return null;
-		});
-	}
-};

shared/naturalcrit/markdown.js

@@ -1,8 +1,7 @@
 /* eslint-disable max-lines */
 const _ = require('lodash');
-const Marked = require('marked');
-const MarkedExtendedTables = require('marked-extended-tables');
-const renderer = new Marked.Renderer();
+const Markdown = require('marked');
+const renderer = new Markdown.Renderer();
 
 //Processes the markdown within an HTML block if it's just a class-wrapper
 renderer.html = function (html) {
@@ -10,7 +9,7 @@ renderer.html = function (html) {
 		const openTag = html.substring(0, html.indexOf('>')+1);
 		html = html.substring(html.indexOf('>')+1);
 		html = html.substring(0, html.lastIndexOf('</div>'));
-		return `${openTag} ${Marked.parse(html)} </div>`;
+		return `${openTag} ${Markdown(html)} </div>`;
 	}
 	return html;
 };
@@ -236,10 +235,200 @@ const definitionLists = {
 	}
 };
 
-Marked.use({ extensions: [mustacheSpans, mustacheDivs, mustacheInjectInline, definitionLists] });
-Marked.use(MarkedExtendedTables());
-Marked.use(mustacheInjectBlock);
-Marked.use({ smartypants: true });
+const spanTable = {
+	name  : 'spanTable',
+	level : 'block',                                   // Is this a block-level or inline-level tokenizer?
+	start(src) { return src.match(/^\n *([^\n ].*\|.*)\n/)?.index; },  // Hint to Marked.js to stop and check for a match
+	tokenizer(src, tokens) {
+		//const regex = this.tokenizer.rules.block.table;
+		const regex = new RegExp('^ *([^\\n ].*\\|.*\\n(?: *[^\\s].*\\n)*?)' // Header
+		    + ' {0,3}(?:\\| *)?(:?-+:? *(?:\\| *:?-+:? *)*)\\|?' // Align
+		    + '(?:\\n *((?:(?!\\n| {0,3}((?:- *){3,}|(?:_ *){3,}|(?:\\* *){3,})' // Cells
+				+ '(?:\\n+|$)| {0,3}#{1,6} | {0,3}>| {4}[^\\n]| {0,3}(?:`{3,}'
+				+ '(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n| {0,3}(?:[*+-]|1[.)]) |'
+				+ '<\\/?(?:address|article|aside|base|basefont|blockquote|body|'
+				+ 'caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option|p|param|section|source|summary|table|tbody|td|tfoot|th|thead|title|tr|track|ul)(?: +|\\n|\\/?>)|<(?:script|pre|style|textarea|!--)).*(?:\\n|$))*)\\n*|$)'); // Cells
+		const cap = regex.exec(src);
+
+		if(cap) {
+			const item = {
+				type   : 'spanTable',
+				header : cap[1].replace(/\n$/, '').split('\n'),
+				align  : cap[2].replace(/^ *|\| *$/g, '').split(/ *\| */),
+				rows   : cap[3] ? cap[3].replace(/\n$/, '').split('\n') : []
+			};
+
+			// Get first header row to determine how many columns
+			item.header[0] = splitCells(item.header[0]);
+
+			const colCount = item.header[0].reduce((length, header)=>{
+				return length + header.colspan;
+			}, 0);
+
+			if(colCount === item.align.length) {
+				item.raw = cap[0];
+
+				let i, j, k, row;
+
+				// Get alignment row (:---:)
+				let l = item.align.length;
+
+				for (i = 0; i < l; i++) {
+					if(/^ *-+: *$/.test(item.align[i])) {
+						item.align[i] = 'right';
+					} else if(/^ *:-+: *$/.test(item.align[i])) {
+						item.align[i] = 'center';
+					} else if(/^ *:-+ *$/.test(item.align[i])) {
+						item.align[i] = 'left';
+					} else {
+						item.align[i] = null;
+					}
+				}
+
+				// Get any remaining header rows
+				l = item.header.length;
+				for (i = 1; i < l; i++) {
+					item.header[i] = splitCells(item.header[i], colCount, item.header[i-1]);
+				}
+
+				// Get main table cells
+				l = item.rows.length;
+				for (i = 0; i < l; i++) {
+					item.rows[i] = splitCells(item.rows[i], colCount, item.rows[i-1]);
+				}
+
+				// header child tokens
+				l = item.header.length;
+				for (j = 0; j < l; j++) {
+					row = item.header[j];
+					for (k = 0; k < row.length; k++) {
+						row[k].tokens = [];
+						this.lexer.inlineTokens(row[k].text, row[k].tokens);
+					}
+				}
+
+				// cell child tokens
+				l = item.rows.length;
+				for (j = 0; j < l; j++) {
+					row = item.rows[j];
+					for (k = 0; k < row.length; k++) {
+						row[k].tokens = [];
+						this.lexer.inlineTokens(row[k].text, row[k].tokens);
+					}
+				}
+				return item;
+			}
+		}
+	},
+	renderer(token) {
+		let i, j, row, cell, col, text;
+		let output = `<table>`;
+		output += `<thead>`;
+		for (i = 0; i < token.header.length; i++) {
+			row = token.header[i];
+			let col = 0;
+			output += `<tr>`;
+			for (j = 0; j < row.length; j++) {
+				cell = row[j];
+				text = this.parser.parseInline(cell.tokens);
+				output += getTableCell(text, cell, 'th', token.align[col]);
+				col += cell.colspan;
+			}
+			output += `</tr>`;
+		}
+		output += `</thead>`;
+		if(token.rows.length) {
+			output += `<tbody>`;
+			for (i = 0; i < token.rows.length; i++) {
+				row = token.rows[i];
+				col = 0;
+				output += `<tr>`;
+				for (j = 0; j < row.length; j++) {
+					cell = row[j];
+					text = this.parser.parseInline(cell.tokens);
+					output += getTableCell(text, cell, 'td', token.align[col]);
+					col += cell.colspan;
+				}
+				output += `</tr>`;
+			}
+			output += `</tbody>`;
+		}
+		output += `</table>`;
+		return output;
+	}
+};
+
+const getTableCell = (text, cell, type, align)=>{
+	if(!cell.rowspan) {
+		return '';
+	}
+	const tag = `<${type}`
+						+ `${cell.colspan > 1 ? ` colspan=${cell.colspan}` : ''}`
+						+ `${cell.rowspan > 1 ? ` rowspan=${cell.rowspan}` : ''}`
+						+ `${align ? ` align=${align}` : ''}>`;
+	return `${tag + text}</${type}>\n`;
+};
+
+const splitCells = (tableRow, count, prevRow = [])=>{
+	const cells = [...tableRow.matchAll(/(?:[^|\\]|\\.?)+(?:\|+|$)/g)].map((x)=>x[0]);
+
+	// Remove first/last cell in a row if whitespace only and no leading/trailing pipe
+	if(!cells[0]?.trim()) { cells.shift(); }
+	if(!cells[cells.length - 1]?.trim()) { cells.pop(); }
+
+	let numCols = 0;
+	let i, j, trimmedCell, prevCell, prevCols;
+
+	for (i = 0; i < cells.length; i++) {
+		trimmedCell = cells[i].split(/\|+$/)[0];
+		cells[i] = {
+			rowspan : 1,
+			colspan : Math.max(cells[i].length - trimmedCell.length, 1),
+			text    : trimmedCell.trim().replace(/\\\|/g, '|')
+			// display escaped pipes as normal character
+		};
+
+		// Handle Rowspan
+		if(trimmedCell.slice(-1) == '^' && prevRow.length) {
+			// Find matching cell in previous row
+			prevCols = 0;
+			for (j = 0; j < prevRow.length; j++) {
+				prevCell = prevRow[j];
+				if((prevCols == numCols) && (prevCell.colspan == cells[i].colspan)) {
+					// merge into matching cell in previous row (the "target")
+					cells[i].rowSpanTarget = prevCell.rowSpanTarget ?? prevCell;
+					cells[i].rowSpanTarget.text += ` ${cells[i].text.slice(0, -1)}`;
+					cells[i].rowSpanTarget.rowspan += 1;
+					cells[i].rowspan = 0;
+					break;
+				}
+				prevCols += prevCell.colspan;
+				if(prevCols > numCols)
+					break;
+			}
+		}
+
+		numCols += cells[i].colspan;
+	}
+
+	// Force main cell rows to match header column count
+	if(numCols > count) {
+		cells.splice(count);
+	} else {
+		while (numCols < count) {
+			cells.push({
+				colspan : 1,
+				text    : ''
+			});
+			numCols += 1;
+		}
+	}
+	return cells;
+};
+
+Markdown.use({ extensions: [mustacheSpans, mustacheDivs, mustacheInjectInline, definitionLists, spanTable] });
+Markdown.use(mustacheInjectBlock);
+Markdown.use({ smartypants: true });
 
 //Fix local links in the Preview iFrame to link inside the frame
 renderer.link = function (href, title, text) {
@@ -320,15 +509,9 @@ const sanatizeScriptTags = (content)=>{
 const tagTypes = ['div', 'span', 'a'];
 const tagRegex = new RegExp(`(${
 	_.map(tagTypes, (type)=>{
-		return `\\<${type}\\b|\\</${type}>`;
+		return `\\<${type}|\\</${type}>`;
 	}).join('|')})`, 'g');
 
-// Special "void" tags that can be self-closed but don't need to be.
-const voidTags = new Set([
-	'area', 'base', 'br', 'col', 'command', 'hr', 'img',
-	'input', 'keygen', 'link', 'meta', 'param', 'source'
-]);
-
 const processStyleTags = (string)=>{
 	//split tags up. quotes can only occur right after colons.
 	//TODO: can we simplify to just split on commas?
@@ -343,11 +526,11 @@ const processStyleTags = (string)=>{
 };
 
 module.exports = {
-	marked : Marked,
+	marked : Markdown,
 	render : (rawBrewText)=>{
 		rawBrewText = rawBrewText.replace(/^\\column$/gm, `\n<div class='columnSplit'></div>\n`)
 														 .replace(/^(:+)$/gm, (match)=>`${`<div class='blank'></div>`.repeat(match.length)}\n`);
-		return Marked.parse(
+		return Markdown(
 			sanatizeScriptTags(rawBrewText),
 			{ renderer: renderer }
 		);
@@ -369,13 +552,6 @@ module.exports = {
 						});
 					}
 					if(match === `</${type}>`){
-						// Closing tag: Check we expect it to be closed.
-						// The accumulator may contain a sequence of voidable opening tags,
-						// over which we skip before checking validity of the close.
-						while (acc.length && voidTags.has(_.last(acc).type) && _.last(acc).type != type) {
-							acc.pop();
-						}
-						// Now check that what remains in the accumulator is valid.
 						if(!acc.length){
 							errors.push({
 								line : lineNumber,

shared/naturalcrit/markdownLegacy.js

@@ -99,15 +99,9 @@ const sanatizeScriptTags = (content)=>{
 const tagTypes = ['div', 'span', 'a'];
 const tagRegex = new RegExp(`(${
 	_.map(tagTypes, (type)=>{
-		return `\\<${type}\\b|\\</${type}>`;
+		return `\\<${type}|\\</${type}>`;
 	}).join('|')})`, 'g');
 
-// Special "void" tags that can be self-closed but don't need to be.
-const voidTags = new Set([
-	'area', 'base', 'br', 'col', 'command', 'hr', 'img',
-	'input', 'keygen', 'link', 'meta', 'param', 'source'
-]);
-
 
 module.exports = {
 	marked : Markdown,
@@ -134,13 +128,6 @@ module.exports = {
 						});
 					}
 					if(match === `</${type}>`){
-						// Closing tag: Check we expect it to be closed.
-						// The accumulator may contain a sequence of voidable opening tags,
-						// over which we skip before checking validity of the close.
-						while (acc.length && voidTags.has(_.last(acc).type) && _.last(acc).type != type) {
-							acc.pop();
-						}
-						// Now check that what remains in the accumulator is valid.
 						if(!acc.length){
 							errors.push({
 								line : lineNumber,

shared/naturalcrit/nav/nav.jsx

@@ -8,8 +8,7 @@ const NaturalCritIcon = require('naturalcrit/svg/naturalcrit.svg.jsx');
 
 const Nav = {
 	base : createClass({
-		displayName : 'Nav.base',
-		render      : function(){
+		render : function(){
 			return <nav>
 				<div className='navContent'>
 					{this.props.children}
@@ -27,8 +26,7 @@ const Nav = {
 	},
 
 	section : createClass({
-		displayName : 'Nav.section',
-		render      : function(){
+		render : function(){
 			return <div className='navSection'>
 				{this.props.children}
 			</div>;
@@ -36,7 +34,6 @@ const Nav = {
 	}),
 
 	item : createClass({
-		displayName     : 'Nav.item',
 		getDefaultProps : function() {
 			return {
 				icon    : null,
@@ -71,47 +68,6 @@ const Nav = {
 		}
 	}),
 
-	dropdown : createClass({
-		displayName     : 'Nav.dropdown',
-		getInitialState : function() {
-			return {
-				showDropdown : false
-			};
-		},
-
-		handleDropdown : function(show){
-			this.setState({
-				showDropdown : show
-			});
-		},
-
-		renderDropdown : function(dropdownChildren){
-			if(!this.state.showDropdown) return null;
-
-			return (
-				<div className='navDropdown'>
-					{dropdownChildren}
-				</div>
-			);
-		},
-
-		render : function () {
-			const dropdownChildren = React.Children.map(this.props.children, (child, i)=>{
-				// Ignore the first child
-				if(i < 1) return;
-				return child;
-			});
-			return (
-				<div className='navDropdownContainer'
-					onMouseEnter={()=>this.handleDropdown(true)}
-					onMouseLeave={()=>this.handleDropdown(false)}>
-					{this.props.children[0]}
-					{this.renderDropdown(dropdownChildren)}
-				</div>
-			);
-		}
-	})
-
 };
 
 

shared/naturalcrit/nav/nav.less

@@ -1,11 +1,3 @@
-@keyframes glideDropDown {
-	0%   {transform : translate(0px, -100%);
-				opacity   : 0;
-			  background-color: #333;}
-	100% {transform : translate(0px, 0px);
-				opacity   : 1;
-			  background-color: #333;}
-}
 nav{
 	background-color : #333;
 	.navContent{
@@ -86,25 +78,4 @@ nav{
 	.navSection:last-child .navItem{
 		border-left : 1px solid #666;
 	}
-	.navDropdownContainer{
-		position: relative;
-		.navDropdown {
-			position : absolute;
-			top      : 28px;
-			left     : 0px;
-			z-index  : 10000;
-			width    : 100%;
-			.navItem{
-				animation-name: glideDropDown;
-				animation-duration: 0.4s;
-				position         : relative;
-				display          : block;
-				width            : 100%;
-				vertical-align   : middle;
-				padding          : 8px 5px;
-				border           : 1px solid #888;
-				border-bottom    : 0;
-			}
-		}
-	}
 }

shared/naturalcrit/splitPane/splitPane.jsx

@@ -5,7 +5,6 @@ const _ = require('lodash');
 const cx = require('classnames');
 
 const SplitPane = createClass({
-	displayName     : 'SplitPane',
 	getDefaultProps : function() {
 		return {
 			storageKey   : 'naturalcrit-pane-split',
@@ -41,12 +40,8 @@ const SplitPane = createClass({
 	},
 	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));
 		this.setState({
-			size : newSize
+			size : e.pageX
 		});
 	},
 	/*
@@ -78,7 +73,6 @@ const SplitPane = createClass({
 });
 
 const Pane = createClass({
-	displayName     : 'Pane',
 	getDefaultProps : function() {
 		return {
 			width : null

shared/naturalcrit/splitPane/splitPane.less

@@ -28,8 +28,5 @@
 				color     : #666;
 			}
 		}
-		&:hover{
-			background-color: #999;
-		}
 	}
 }

tests/basic.test.js

@@ -0,0 +1,7 @@
+const test = require('pico-check');
+
+test('Just setting up a spot for future tests', (t)=>{
+	t.pass();
+});
+
+module.exports = test;

tests/markdown/basic.test.js

@@ -1,15 +0,0 @@
-/* eslint-disable max-lines */
-
-const Markdown = require('naturalcrit/markdown.js');
-
-test('Escapes <script> tag', function() {
-	const source = '<script></script>';
-	const rendered = Markdown.render(source);
-	expect(rendered).toMatch('&lt;script&gt;&lt;/script&gt;');
-});
-
-test('Processes the markdown within an HTML block if its just a class wrapper', function() {
-	const source = '<div>*Bold text*</div>';
-	const rendered = Markdown.render(source);
-	expect(rendered).toBe('<div> <p><em>Bold text</em></p>\n </div>');
-});

tests/markdown/mustache-span.test.js

@@ -1,128 +0,0 @@
-/* eslint-disable max-lines */
-
-const Markdown = require('naturalcrit/markdown.js');
-
-test('Renders a mustache span with text only', function() {
-	const source = '{{ text}}';
-	const rendered = Markdown.render(source);
-	expect(rendered).toBe('<span class="inline-block ">text</span>');
-});
-
-test('Renders a mustache span with text only, but with spaces', function() {
-	const source = '{{ this is a text}}';
-	const rendered = Markdown.render(source);
-	expect(rendered).toBe('<span class="inline-block ">this is a text</span>');
-});
-
-test('Renders an empty mustache span', function() {
-	const source = '{{}}';
-	const rendered = Markdown.render(source);
-	expect(rendered).toBe('<span class="inline-block "></span>');
-});
-
-test('Renders a mustache span with just a space', function() {
-	const source = '{{ }}';
-	const rendered = Markdown.render(source);
-	expect(rendered).toBe('<span class="inline-block "></span>');
-});
-
-test('Renders a mustache span with a few spaces only', function() {
-	const source = '{{     }}';
-	const rendered = Markdown.render(source);
-	expect(rendered).toBe('<span class="inline-block "></span>');
-});
-
-test('Renders a mustache span with text and class', function() {
-	const source = '{{my-class text}}';
-	const rendered = Markdown.render(source);
-	// FIXME: why do we have those two extra spaces after closing "?
-	expect(rendered).toBe('<span class="inline-block my-class"  >text</span>');
-});
-
-test('Renders a mustache span with text and two classes', function() {
-	const source = '{{my-class,my-class2 text}}';
-	const rendered = Markdown.render(source);
-	// FIXME: why do we have those two extra spaces after closing "?
-	expect(rendered).toBe('<span class="inline-block my-class my-class2"  >text</span>');
-});
-
-test('Renders a mustache span with text with spaces and class', function() {
-	const source = '{{my-class this is a text}}';
-	const rendered = Markdown.render(source);
-	// FIXME: why do we have those two extra spaces after closing "?
-	expect(rendered).toBe('<span class="inline-block my-class"  >this is a text</span>');
-});
-
-test('Renders a mustache span with text and id', function() {
-	const source = '{{#my-span text}}';
-	const rendered = Markdown.render(source);
-	// FIXME: why do we have that one extra space after closing "?
-	expect(rendered).toBe('<span class="inline-block " id="my-span" >text</span>');
-});
-
-test('Renders a mustache span with text and two ids', function() {
-	const source = '{{#my-span,#my-favorite-span text}}';
-	const rendered = Markdown.render(source);
-	// FIXME: do we need to report an error here somehow?
-	expect(rendered).toBe('<span class="inline-block " id="my-span" >text</span>');
-});
-
-test('Renders a mustache span with text and css property', function() {
-	const source = '{{color:red text}}';
-	const rendered = Markdown.render(source);
-	expect(rendered).toBe('<span class="inline-block "  style="color:red;">text</span>');
-});
-
-test('Renders a mustache span with text and two css properties', function() {
-	const source = '{{color:red,padding:5px text}}';
-	const rendered = Markdown.render(source);
-	expect(rendered).toBe('<span class="inline-block "  style="color:red; padding:5px;">text</span>');
-});
-
-test('Renders a mustache span with text and css property which contains quotes', function() {
-	const source = '{{font:"trebuchet ms" text}}';
-	const rendered = Markdown.render(source);
-	// FIXME: is it correct to remove quotes surrounding css property value?
-	expect(rendered).toBe('<span class="inline-block "  style="font:trebuchet ms;">text</span>');
-});
-
-test('Renders a mustache span with text and two css properties which contains quotes', function() {
-	const source = '{{font:"trebuchet ms",padding:"5px 10px" text}}';
-	const rendered = Markdown.render(source);
-	expect(rendered).toBe('<span class="inline-block "  style="font:trebuchet ms; padding:5px 10px;">text</span>');
-});
-
-
-test('Renders a mustache span with text with quotes and css property which contains quotes', function() {
-	const source = '{{font:"trebuchet ms" text "with quotes"}}';
-	const rendered = Markdown.render(source);
-	expect(rendered).toBe('<span class="inline-block "  style="font:trebuchet ms;">text “with quotes”</span>');
-});
-
-test('Renders a mustache span with text, id, class and a couple of css properties', function() {
-	const source = '{{pen,#author,color:orange,font-family:"trebuchet ms" text}}';
-	const rendered = Markdown.render(source);
-	expect(rendered).toBe('<span class="inline-block pen" id="author" style="color:orange; font-family:trebuchet ms;">text</span>');
-});
-
-// TODO: add tests for ID with accordance to CSS spec:
-//
-// From https://drafts.csswg.org/selectors/#id-selectors:
-//
-// > An ID selector consists of a “number sign” (U+0023, #) immediately followed by the ID value, which must be a CSS identifier.
-//
-// From: https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier:
-//
-// > In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9]
-// > and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_);
-// > they cannot start with a digit, two hyphens, or a hyphen followed by a digit.
-// > Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item).
-// > For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".
-// > Note that Unicode is code-by-code equivalent to ISO 10646 (see [UNICODE] and [ISO10646]).
-
-// TODO: add tests for class with accordance to CSS spec:
-//
-// From: https://drafts.csswg.org/selectors/#class-html:
-//
-// > The class selector is given as a full stop (. U+002E) immediately followed by an identifier.
-

tests/routes/static-pages.test.js

@@ -1,29 +0,0 @@
-const supertest = require('supertest');
-
-// Mimic https responses to avoid being redirected all the time
-const app = supertest.agent(require('app.js').app)
-    .set('X-Forwarded-Proto', 'https');
-
-describe('Tests for static pages', ()=>{
-	it('Home page works', ()=>{
-		return app.get('/').expect(200);
-	});
-
-	it('Home page v3 works', ()=>{
-		return app.get('/v3_preview').expect(200);
-	});
-
-	it('Changelog page works', ()=>{
-		return app.get('/changelog').expect(200);
-	});
-
-	it('FAQ page works', ()=>{
-		return app.get('/faq').expect(200);
-	});
-
-	// FIXME: robots.txt file can't be properly loaded under testing environment,
-	// most likely due to __dirname being different from what is expected
-	it.skip('robots.txt works', ()=>{
-		return app.get('/robots.txt').expect(200);
-	});
-});

tests/test.init.js

@@ -0,0 +1 @@
+//Set up configs and DB connectiosna nd what not in here

themes/5ePhb.style.less

@@ -79,7 +79,7 @@ body {
 	p{
 		overflow-wrap : break-word;		//TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS
 		display       : block;
-		line-height   : 1.25em;
+		line-height   : 1.3em;
 		&+* {
 			margin-top : 0.325cm;
 		}
@@ -90,14 +90,14 @@ body {
 	ul{
 		margin-bottom       : 0.8em;
 		padding-left        : 1.4em;
-		line-height         : 1.25em;
+		line-height         : 1.3em;
 		list-style-position : outside;
 		list-style-type     : disc;
 	}
 	ol{
 		margin-bottom       : 0.8em;
 		padding-left        : 1.4em;
-		line-height         : 1.25em;
+		line-height         : 1.3em;
 		list-style-position : outside;
 		list-style-type     : decimal;
 	}
@@ -146,9 +146,9 @@ body {
 			font-size               : 3.5cm;
 			padding-left            : 40px; //Allow background color to extend into margins
 			margin-left             : -40px;
-			margin-top              : -0.3cm;
-			padding-bottom          : 2px;
-			margin-bottom           : -20px;
+			margin-top              :-0.3cm;
+			padding-bottom          :2px;
+			margin-bottom           :-20px;
 			background-image        : linear-gradient(-45deg, #322814, #998250, #322814);
 	    background-clip         : text;
 	    -webkit-background-clip : text;
@@ -162,20 +162,17 @@ body {
 		//margin-top    : 0px; //Font is misaligned. Shift up slightly
 		//margin-bottom : 0.05cm;
 		font-size     : 0.75cm;
-		line-height   : 0.988em; //Font is misaligned. Shift up slightly
 	}
 	h3{
 		//margin-top    : -0.1cm; //Font is misaligned. Shift up slightly
 		//margin-bottom : 0.1cm;
 		font-size     : 0.575cm;
 		border-bottom : 2px solid @headerUnderline;
-		line-height   : 0.995em; //Font is misaligned. Shift up slightly
 	}
 	h4{
 		//margin-top    : -0.02cm; //Font is misaligned. Shift up slightly
 		//margin-bottom : 0.02cm;
 		font-size     : 0.458cm;
-		line-height   : 0.971em; //Font is misaligned. Shift up slightly
 	}
 	h5{
 		//margin-top    : -0.02cm; //Font is misaligned. Shift up slightly
@@ -183,7 +180,6 @@ body {
 		font-family   : ScalySansSmallCapsRemake;
 		font-size     : 0.423cm;
 		font-weight   : 900;
-		line-height   : 0.951em; //Font is misaligned. Shift up slightly
 		& + * {
 			margin-top : 0.2cm;
 		}
@@ -242,6 +238,9 @@ body {
 			display        : block;
 			padding-bottom : 0px;
 		}
+		p + p {
+			padding-top : .8em;
+		}
 		:last-child {
 			margin-bottom : 0;
 		}
@@ -272,6 +271,9 @@ body {
 			padding-bottom : 0px;
 			line-height    : 1.5em;
 		}
+		p + p {
+			padding-top : .8em;
+		}
 		:last-child {
 			margin-bottom : 0;
 		}
@@ -283,7 +285,6 @@ body {
 	/* Arist Credit */
 	.artist {
 		position    : absolute;
-		width       : auto;
 		text-align  : center;
 		font-family : WalterTurncoat;
 		font-size   : 0.27cm;
@@ -308,21 +309,21 @@ body {
 
 	/* Watermark */
 	.watermark {
-		display         : grid !important;
-		place-items     : center;
+		display			: grid !important;
+		place-items		: center;
 		justify-content	: center;
-		position        : absolute;
-		top             : 0;
-		left            : 0;
-		width           : 100%;
-		height          : 100%;
-		font-size       : 120px;
+		position		: absolute;
+		top				: 0;
+		left			: 0;
+		width			: 100%;
+		height			: 100%;
+		font-size		: 120px;
 		text-transform	: uppercase;
-		color           : black;
-		mix-blend-mode  : overlay;
-		opacity         : 30%;
-		transform       : rotate(-45deg);
-		z-index         : 500;
+		color			: black;
+		mix-blend-mode 	: overlay;
+		opacity			: 30%;
+		transform		: rotate(-45deg);
+		z-index			: 500;
 		p {
 			margin-bottom : none;
 		}
@@ -374,15 +375,25 @@ body {
 			background-attachment : fixed;
 			filter                : drop-shadow(1px 4px 6px #888);
 			padding               : 4px 2px;
-			margin-left           : -0.16cm;
-			margin-right          : -0.16cm;
-			width                 : calc(100% + 0.32cm);
+			margin-left           : -6px;
+			margin-right          : -6px;
 		}
 
 		position          : relative;
 		padding           : 0px;
 		margin-bottom     : 0.325cm;
 
+		p{
+			margin-bottom : 0.3cm;
+		}
+		p+p {
+			margin-top  : 0;	//May not be needed
+			text-indent : 0;
+		}
+		p:last-of-type {
+			margin-bottom: 0;
+		}
+
 		//Headers
 		h2{
 			font-size     : 0.62cm;
@@ -398,7 +409,7 @@ body {
 			font-weight    : 800;
 			font-variant   : small-caps;
 			border-bottom  : 2px solid @headerText;
-			// margin-top     : 0.05cm;  //Font is misaligned. Shift up slightly
+			margin-top     : 0.05cm;
   		padding-bottom : 0.05cm;
 		}
 
@@ -412,17 +423,12 @@ body {
 			border           : none;
 		}
 
-		//Attribute Lists - All text between HRs is red
-		hr ~ :is(dl,p) {
+		//Attribute Lists
+		dl {
 			color : @headerText;
 		}
-		hr:last-of-type {
-			& ~ :is(dl,p) {
-				color : inherit; // After the HRs, reset text to black
-			}
-			& + * {
-				margin-top : 0.325cm; // Space after last HR
-			}
+		hr:last-of-type~dl{
+			color : inherit; // After the HRs, hanging indents remain black.
 		}
 
 		// Monster Ability table
@@ -441,10 +447,6 @@ body {
 				padding: 0px;
 			}
 		}
-
-		:last-child {
-			margin-bottom : 0;
-		}
 	}
 
 	//Full Width
@@ -511,8 +513,7 @@ body {
 		color            : #58180d;
 		background-color : #faf7ea;
 		border-radius    : 4px;
-		white-space      : pre-wrap;
-		overflow-wrap    : break-word;
+		white-space      : pre-wrap
 	}
 
 	pre code{
@@ -580,7 +581,7 @@ body {
 	}
 	p, ul{
 		font-size   : 0.352cm;
-		line-height : 1.265em;
+		line-height : 1.3em;
 	}
 	ul{
 		margin-bottom               : 0.5em;
@@ -608,7 +609,6 @@ body {
 		margin-bottom       : 1.05cm;
 		margin-left         : -0.1cm;
 		margin-right        : -0.1cm;
-		width               : calc(100% + 0.2cm);
 		border-collapse     : separate;
 		background-color    : white;
 		border              : initial;
@@ -653,7 +653,7 @@ body {
 	break-inside                : avoid;
 	h1 {
 		text-align    : center;
-		margin-bottom : 0.3cm;
+		margin-bottom : 0cm;
 	}
 	a{
 		display         : table;
@@ -664,12 +664,14 @@ body {
 		}
 	}
 	h4 {
-		margin-top  : 0.2cm;
-		line-height : 0.4cm;
+		margin-top : 0.14cm;
 		& + ul li {
 			line-height: 1.2em;
 		}
 	}
+	& > ul {
+		margin-top: 0.52cm;
+	}
 	ul{
 		padding-left    : 0;
 		list-style-type : none;
@@ -722,9 +724,7 @@ body {
 	.block {
 		break-inside      : avoid;
 		display           : inline-block;
-		.page :where(&) {
-			width             : 100%;
-		}
+		min-width         : 100%;
 		//-webkit-transform : translateZ(0); //Prevents shadows from breaking across columns
 	}
 	.inline-block {
@@ -738,7 +738,7 @@ body {
 // *****************************/
 .page {
 	dl {
-		line-height  : 1.25em;
+		line-height  : 1.3em;
 		padding-left : 1em;
 		white-space  : pre-line;
 		& + * {
@@ -768,8 +768,10 @@ body {
 // *****************************/
 .page {
 	.blank {
-		height     : 1em;
-		margin-top : 0;
+		height: 0.75em;
+	}
+	p + .blank {
+		margin-top: -1em;
 	}
 }
 

themes/5ePhbLegacy.style.less

@@ -63,7 +63,7 @@ body {
 	// *****************************/
 	p{
 		padding-bottom : 0.8em;
-		line-height    : 1.269em;
+		line-height    : 1.3em;
 		&+p{
 			margin-top : -0.8em;
 		}
@@ -71,14 +71,14 @@ body {
 	ul{
 		margin-bottom       : 0.8em;
 		padding-left        : 1.4em;
-		line-height         : 1.269em;
+		line-height         : 1.3em;
 		list-style-position : outside;
 		list-style-type     : disc;
 	}
 	ol{
 		margin-bottom       : 0.8em;
 		padding-left        : 1.4em;
-		line-height         : 1.269em;
+		line-height         : 1.3em;
 		list-style-position : outside;
 		list-style-type     : decimal;
 	}
@@ -126,7 +126,7 @@ body {
 			font-family : Solberry;
 			font-size   : 10em;
 			color       : #222;
-			line-height : 0.795em;
+			line-height : 0.8em;
 		}
 	}
 	h2{
@@ -191,7 +191,7 @@ body {
 		box-shadow          : 1px 4px 14px #888;
 		p, ul{
 			font-size   : 0.352cm;
-			line-height : 1.083em;
+			line-height : 1.1em;
 		}
 	}
 	//If a note starts a column, give it space at the top to render border
@@ -371,7 +371,7 @@ body {
 	}
 	p, ul{
 		font-size   : 0.352cm;
-		line-height : 1.263em;
+		line-height : 1.3em;
 	}
 	ul{
 		margin-bottom               : 0.5em;
@@ -425,7 +425,7 @@ body {
 	p{
 		display        : block;
 		padding-bottom : 0px;
-		line-height    : 1.47em;
+		line-height    : 1.5em;
 	}
 	p + p {
 		padding-top : .8em;
@@ -457,7 +457,7 @@ body {
 		p, p + p {
 			margin      : unset;
 			text-indent : unset;
-			line-height : 0.941em;
+			line-height : 1em;
 		}
 	 	h5 {
 			font-size   : 1.3em;