Merge pull request #2004 from naturalcrit/v3.0.7

Update to Version 3.0.7

.circleci/config.yml

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

Dockerfile

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

changelog.md

@@ -3,11 +3,12 @@ h5 {
 	font-size: .35cm !important;
 }
 
-.taskList li {
+.page ul ul {
-	list-style-type : none;
+	margin-left: 0px;
 }
 
 .taskList li input {
+	list-style-type : none;
 	margin-left : -0.52cm;
 	transform: translateY(.05cm);
 	filter: brightness(1.1) drop-shadow(1px 2px 1px #222);
@@ -30,7 +31,194 @@ pre {
 }
 ```
 
-# changelog
+## changelog
+For a full record of development, visit our [Github Page](https://github.com/naturalcrit/homebrewery).
+
+### Wednesday 02/02/2022 - v3.0.7
+{{taskList
+* [x] Revert active line highlighting.
+
+	Fixes issues: [#1913](https://github.com/naturalcrit/homebrewery/issues/1913)
+
+* [x] Added install steps for Ubuntu. [HERE](https://github.com/naturalcrit/homebrewery/blob/master/install/README.UBUNTU.md)
+
+	Fixes issues: [#1900](https://github.com/naturalcrit/homebrewery/issues/1900)
+
+* [x] Added social media links to home page.
+
+* [x] Increase brews visible on the user page to 1,000.
+
+	Fixes issues: [#1943](https://github.com/naturalcrit/homebrewery/issues/1943)
+
+* [x] Added a Legacy to V3 migration guide under **NEED HELP? {{fa,fa-question-circle}} → MIGRATE {{fas,fa-file-import}}**
+
+* [x] Background refactoring and unit tests.
+}}
+
+### 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
 
 ### Saturday, 11/09/2021 - v3.0.0
 

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -17,6 +17,7 @@ const PAGE_HEIGHT = 1056;
 const PPR_THRESHOLD = 50;
 
 const BrewRenderer = createClass({
+	displayName     : 'BrewRenderer',
 	getDefaultProps : function() {
 		return {
 			text     : '',
@@ -117,7 +118,7 @@ const BrewRenderer = createClass({
 	},
 
 	renderDummyPage : function(index){
-		return <div className='phb' id={`p${index + 1}`} key={index}>
+		return <div className='phb page' id={`p${index + 1}`} key={index}>
 			<i className='fas fa-spinner fa-spin' />
 		</div>;
 	},
@@ -188,7 +189,6 @@ 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'/>
-						<div className='pages' ref='pages'>
+						{/* Apply CSS from Style tab and render pages from Markdown tab */}
-							{/* Apply CSS from Style tab and render pages from Markdown tab */}
+						{this.state.isMounted
-							{this.state.isMounted
+							&&
-								&&
+							<>
-								<>
+								{this.renderStyle()}
-									{this.renderStyle()}
+								<div className='pages' ref='pages'>
 									{this.renderPages()}
-								</>
+								</div>
-							}
+							</>
-						</div>
+						}
 					</div>
 				</Frame>
 				{this.renderPageInfo()}

client/homebrew/brewRenderer/errorBar/errorBar.jsx

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

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -7,6 +7,7 @@ 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,3 +1,4 @@
+/*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
 require('./editor.less');
 const React = require('react');
 const createClass = require('create-react-class');
@@ -25,6 +26,7 @@ const splice = function(str, index, inject){
 
 
 const Editor = createClass({
+	displayName     : 'Editor',
 	getDefaultProps : function() {
 		return {
 			brew : {
@@ -59,6 +61,10 @@ 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;
@@ -102,67 +108,69 @@ const Editor = createClass({
 		if(this.state.view === 'text')  {
 			const codeMirror = this.refs.codeEditor.codeMirror;
 
-			//reset custom text styles
+			codeMirror.operation(()=>{ // Batch CodeMirror styling
-			const customHighlights = codeMirror.getAllMarks();
+				//reset custom text styles
-			for (let i=0;i<customHighlights.length;i++) customHighlights[i].clear();
+				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();
 
-			const lineNumbers = _.reduce(this.props.brew.text.split('\n'), (r, line, lineNumber)=>{
+				let editorPageCount = 2; // start page count from page 2
 
-				//reset custom line styles
+				_.forEach(this.props.brew.text.split('\n'), (line, lineNumber)=>{
-				codeMirror.removeLineClass(lineNumber, 'background');
-				codeMirror.removeLineClass(lineNumber, 'text');
 
-				// Legacy Codemirror styling
+					//reset custom line styles
-				if(this.props.renderer == 'legacy') {
+					codeMirror.removeLineClass(lineNumber, 'background', 'pageLine');
-					if(line.includes('\\page')){
+					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'
 						codeMirror.addLineClass(lineNumber, 'background', 'pageLine');
-						r.push(lineNumber);
+						const pageCountElement = Object.assign(document.createElement('span'), {
-					}
+							className   : 'editor-page-count',
-				}
+							textContent : editorPageCount
+						});
+						codeMirror.setBookmark({ line: lineNumber, ch: line.length }, pageCountElement);
 
-				// New Codemirror styling for V3 renderer
+						editorPageCount += 1;
-				if(this.props.renderer == 'V3') {
+					};
-					if(line.match(/^\\page$/)){
-						codeMirror.addLineClass(lineNumber, 'background', 'pageLine');
-						r.push(lineNumber);
-					}
 
-					if(line.match(/^\\column$/)){
+					// New Codemirror styling for V3 renderer
-						codeMirror.addLineClass(lineNumber, 'text', 'columnSplit');
+					if(this.props.renderer == 'V3') {
-						r.push(lineNumber);
+						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])* *$|^ *}}$/);
+						// Highlight inline spans {{content}}
-						if(match)
+						if(line.includes('{{') && line.includes('}}')){
-							endCh = match.index+match[0].length;
+							const regex = /{{(?::(?:"[\w,\-()#%. ]*"|[\w\,\-()#%.]*)|[^"'{}\s])*\s*|}}/g;
-						codeMirror.markText({ line: lineNumber, ch: 0 }, { line: lineNumber, ch: endCh }, { className: 'block' });
+							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;
 		}
 	},
 
@@ -176,30 +184,61 @@ 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='text'
+			return <>
-				ref='codeEditor'
+				<CodeEditor key='codeEditor'
-				language='gfm'
+					ref='codeEditor'
-				value={this.props.brew.text}
+					language='gfm'
-				onChange={this.props.onTextChange} />;
+					view={this.state.view}
+					value={this.props.brew.text}
+					onChange={this.props.onTextChange}
+					rerenderParent={this.rerenderParent} />
+			</>;
 		}
 		if(this.isStyle()){
-			return <CodeEditor key='style'
+			return <>
-				ref='codeEditor'
+				<CodeEditor key='codeEditor'
-				language='css'
+					ref='codeEditor'
-				value={this.props.brew.style ?? DEFAULT_STYLE_TEXT}
+					language='css'
-				onChange={this.props.onStyleChange} />;
+					view={this.state.view}
+					value={this.props.brew.style ?? DEFAULT_STYLE_TEXT}
+					onChange={this.props.onStyleChange}
+					enableFolding={false}
+					rerenderParent={this.rerenderParent} />
+			</>;
 		}
 		if(this.isMeta()){
-			return <MetadataEditor
+			return <>
-				metadata={this.props.brew}
+				<CodeEditor key='codeEditor'
-				onChange={this.props.onMetaChange} />;
+					view={this.state.view}
+					style={{ display: 'none' }}
+					rerenderParent={this.rerenderParent} />
+				<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
@@ -208,7 +247,10 @@ const Editor = createClass({
 					onViewChange={this.handleViewChange}
 					onInject={this.handleInject}
 					showEditButtons={this.props.showEditButtons}
-					renderer={this.props.renderer} />
+					renderer={this.props.renderer}
+					undo={this.undo}
+					redo={this.redo}
+					historySize={this.historySize()} />
 
 				{this.renderEditor()}
 			</div>

client/homebrew/editor/editor.less

@@ -4,42 +4,58 @@
 	width    : 100%;
 
 	.codeEditor{
-		height : 100%;
+		height            : 100%;
 		.pageLine{
-			background-color : fade(#333, 15%);
+			background : #33333328;
-			border-bottom    : #333 solid 1px;
+			border-top : #339 solid 1px;
+		}
+		.editor-page-count{
+			color : grey;
+			float : right;
 		}
 		.columnSplit{
-			font-style : italic;
+			font-style 			: italic;
-			color : grey;
+			color 				: grey;
-			background-color : fade(#299, 15%);
+			background-color 	: fade(#299, 15%);
-			border-bottom    : #299 solid 1px;
+			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;
+		position			: absolute;
-		background-color: @teal;
+		background-color	: @teal;
-		cursor: pointer;
+		cursor				: pointer;
-		width : 30px;
+		width 				: 30px;
-		height : 30px;
+		height 				: 30px;
-		display : flex;
+		display 			: flex;
-		align-items : center;
+		align-items 		: center;
-		bottom : 20px;
+		bottom 				: 20px;
-		right : 20px;
+		right 				: 20px;
-		z-index: 1000000;
+		z-index				: 1000000;
-		justify-content:center;
+		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,6 +8,7 @@ const request = require('superagent');
 const SYSTEMS = ['5e', '4e', '3.5e', 'Pathfinder'];
 
 const MetadataEditor = createClass({
+	displayName     : 'MetadataEditor',
 	getDefaultProps : function() {
 		return {
 			metadata : {
@@ -65,18 +66,6 @@ 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}>
@@ -127,21 +116,6 @@ 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;
 
@@ -215,8 +189,6 @@ const MetadataEditor = createClass({
 				</div>
 			</div>
 
-			{this.renderShareToReddit()}
-
 			{this.renderDelete()}
 
 		</div>;

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -77,11 +77,6 @@
 			.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,6 +14,7 @@ const execute = function(val, brew){
 };
 
 const Snippetbar = createClass({
+	displayName     : 'SnippetBar',
 	getDefaultProps : function() {
 		return {
 			brew            : {},
@@ -22,7 +23,10 @@ const Snippetbar = createClass({
 			onInject        : ()=>{},
 			onToggle        : ()=>{},
 			showEditButtons : true,
-			renderer        : 'legacy'
+			renderer        : 'legacy',
+			undo            : ()=>{},
+			redo            : ()=>{},
+			historySize     : ()=>{}
 		};
 	},
 
@@ -60,6 +64,15 @@ 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' />
@@ -91,6 +104,7 @@ 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           : 90px;
+		width           : 125px;
 		justify-content : space-between;
 		&>div{
 			height      : @menuHeight;
@@ -30,6 +30,29 @@
 			&.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>
-  .phb#p1{ text-align:center; }
+  .page#p1{ text-align:center; counter-increment: none; }
-  .phb#p1:after{ display:none; }
+  .page#p1:after{ display:none; }
-  .phb#p2 { counter-reset:phb-page-numbers; }
+  .page:nth-child(2n) .pageNumber { left: inherit !important; right: 2px !important; }
-  .phb:nth-child(2n) .pageNumber { left: inherit !important; right: 2px !important; }
+  .page:nth-child(2n+1) .pageNumber { right: inherit !important; left: 2px !important; }
-  .phb:nth-child(2n+1) .pageNumber { right: inherit !important; left: 2px !important; }
+  .page:nth-child(2n)::after { transform: scaleX(1); }
-  .phb:nth-child(2n)::after { transform: scaleX(1); }
+  .page:nth-child(2n+1)::after { transform: scaleX(-1); }
-  .phb:nth-child(2n+1)::after { transform: scaleX(-1); }
+  .page:nth-child(2n) .footnote { left: inherit; text-align: right; }
-  .phb:nth-child(2n) .footnote { left: inherit; text-align: right; }
+  .page:nth-child(2n+1) .footnote { left: 80px; text-align: left; }
-  .phb:nth-child(2n+1) .footnote { left: 80px; text-align: left; }
 </style>
 
-<div style='margin-top:450px;'></div>
+{{margin-top:225px}}
 
 # ${_.sample(titles)}
 
-<div style='margin-top:25px'></div>
+{{margin-top:25px}}
-<div class='wide'>
+
+{{wide
 ##### ${_.sample(subtitles)}
-</div>
+}}
 
 \\page`;
 };

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

@@ -105,6 +105,20 @@ 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',
@@ -159,11 +173,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')}
 			:
-			${_.times(_.random(genLines, genLines + 2), function(){return genAbilities();}).join('\n\t\t\t\n\t\t\t')}
+			${genLongAbilities()}
-			:
 			### Actions
-			${_.times(_.random(genLines, genLines + 2), function(){return genAction();}).join('\n\t\t\t\n\t\t\t')}
+			${_.times(_.random(genLines, genLines + 2), function(){return genAction();}).join('\n:\n')}
 			}}
 			\n`;
 	}

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

@@ -13,7 +13,7 @@ const watercolorGen = require('./watercolor.gen.js');
 module.exports = [
 
 	{
-		groupName : 'Editor',
+		groupName : 'Text 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/share/${brew.shareId}` +
+							`https://homebrewery.naturalcrit.com${brew.shareId ? `/share/${brew.shareId}` : ''}` +
 							`&size=100x100) {width:100px;mix-blend-mode:multiply}`;
 				}
 			},
@@ -79,35 +79,41 @@ 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  : '<style>\n' +
+				gen  : dedent`/* Removes Drop Caps */
-						'  .phb3 h1+p:first-letter {\n' +
+						.page h1+p:first-letter {
-						'    all: unset;\n' +
+							all: unset;
-						'  }\n' +
+						}\n\n`
-						'</style>'
 			},
 			{
 				name : 'Tweak Drop Cap',
 				icon : 'fas fa-sliders-h',
-				gen  : '<style>\n' +
+				gen  : dedent`/* Drop Cap settings */
-						'  /* Drop Cap settings */\n' +
+						.page h1 + p::first-letter {
-						'  .phb3 h1 + p::first-letter {\n' +
+							font-family: SolberaImitationRemake;
-						'    float: left;\n' +
+							font-size: 3.5cm;
-						'    font-family: SolberaImitationRemake;\n' +
+							background-image: linear-gradient(-45deg, #322814, #998250, #322814);
-						'    font-size: 3.5cm;\n' +
+							line-height: 1em;
-						'    color: #222;\n' +
+						}\n\n`
-						'    line-height: .8em;\n' +
-						'  }\n' +
-						'</style>'
 			},
 			{
 				name : 'Add Comment',
-				icon : 'fas fa-code',  /* might need to be fa-solid fa-comment-code --not sure, Gazook */
+				icon : 'fas fa-code',
-				gen  : dedent`\n
+				gen  : '/* This is a comment that will not be rendered into your brew. */'
-					<!-- This is a comment that will not be rendered into your brew. Hotkey (Ctrl/Cmd + /). -->
-					`
 			},
 		]
 	},
@@ -124,7 +130,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:-100px,margin-bottom:-30px
+					{{artist,position:relative,top:-230px,left:10px,margin-bottom:-30px
 					##### Cat Warrior
 					[Kyoung Hwan Kim](https://www.artstation.com/tahra)
 					}}`
@@ -135,7 +141,7 @@ module.exports = [
 				gen  : dedent`
 					![homebrew mug](http://i.imgur.com/hMna6G0.png) {position:absolute,top:50px,right:30px,width:280px}
 
-					{{artist,top:90px,right:30px
+					{{artist,top:80px,right:30px
 					##### Homebrew Mug
 					[naturalcrit](https://homebrew.naturalcrit.com)
 					}}`
@@ -254,36 +260,6 @@ 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',
@@ -343,6 +319,36 @@ 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'),
 			}
 		]
 	},
@@ -360,44 +366,36 @@ module.exports = [
 			{
 				name : 'A4 Page Size',
 				icon : 'far fa-file',
-				gen  : ['/* A4 Page Size */',
+				gen  : dedent`/* A4 Page Size */
-					'.page{',
+					.page{
-					'	width  : 210mm;',
+						width  : 210mm;
-					'	height : 296.8mm;',
+						height : 296.8mm;
-					'}',
+					}\n\n`
-					''
-				].join('\n')
 			},
 			{
 				name : 'Square Page Size',
 				icon : 'far fa-file',
-				gen  : ['/* Square Page Size */',
+				gen  : dedent`/* Square Page Size */
-					'.page {',
+					.page {
-					'	width   : 125mm;',
+						width   : 125mm;
-					'	height  : 125mm;',
+						height  : 125mm;
-					'	padding : 12.5mm;',
+						padding : 12.5mm;
-					'	columns : unset;',
+						columns : unset;
-					'}',
+					}\n\n`
-					''
-				].join('\n')
 			},
 			{
 				name : 'Ink Friendly',
 				icon : 'fas fa-tint',
 				gen  : dedent`
 					/* Ink Friendly */
-					.pages *:is(.page,.monster,.note,.descriptive) {
+					*:is(.page,.monster,.note,.descriptive) {
 						background : white !important;
-						box-shadow : 0px 0px 3px !important;
+						filter : drop-shadow(0px 0px 3px #888) !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(`\t\t- ### [{{ ${g1.title}}}{{ ${g1.page}}}](#p${g1.page})`);
+			r.push(`- ### [{{ ${g1.title}}}{{ ${g1.page}}}](#p${g1.page})`);
 		}
 		if(g1.children.length){
 			_.each(g1.children, (g2, idx2)=>{
 				if(g2.title !== null) {
-					r.push(`\t\t  - #### [{{ ${g2.title}}}{{ ${g2.page}}}](#p${g2.page})`);
+					r.push(`  - #### [{{ ${g2.title}}}{{ ${g2.page}}}](#p${g2.page})`);
 				}
 				if(g2.children.length){
 					_.each(g2.children, (g3, idx3)=>{
 						if(g2.title !== null) {
-							r.push(`\t\t    - [{{ ${g3.title}}}{{ ${g3.page}}}](#p${g3.page})`);
+							r.push(`    - [{{ ${g3.title}}}{{ ${g3.page}}}](#p${g3.page})`);
 						} else { // Don't over-indent if no level-2 parent entry
-							r.push(`\t\t  - [{{ ${g3.title}}}{{ ${g3.page}}}](#p${g3.page})`);
+							r.push(`  - [{{ ${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 : 'Editor',
+		groupName : 'Text Editor',
 		icon      : 'fas fa-pencil-alt',
 		view      : 'text',
 		snippets  : [
@@ -78,33 +78,44 @@ 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  : '<style>\n' +
+				gen  : dedent`/* Removes Drop Caps */
-						'  .phb h1+p:first-letter {\n' +
+						.phb h1+p:first-letter {
-						'    all: unset;\n' +
+							all: unset;
-						'  }\n' +
+						}\n\n`
-						'</style>'
 			},
 			{
 				name : 'Tweak Drop Cap',
 				icon : 'fas fa-sliders-h',
-				gen  : '<style>\n' +
+				gen  : dedent`/* Drop Cap Settings */
-						'  /* Drop Cap settings */\n' +
+						.phb h1 + p::first-letter {
-						'  .phb h1 + p::first-letter {\n' +
+							float: left;
-						'    float: left;\n' +
+							font-family: Solberry;
-						'    font-family: Solberry;\n' +
+							font-size: 10em;
-						'    font-size: 10em;\n' +
+							color: #222;
-						'    color: #222;\n' +
+							line-height: .8em;
-						'    line-height: .8em;\n' +
+						}\n\n`
-						'  }\n' +
-						'</style>'
 			},
 			{
 				name : 'Add Comment',
 				icon : 'fas fa-code',
-				gen  : `\n<!-- This is a comment that will not be rendered into your brew. Hotkey (Ctrl/Cmd + /). -->\n\n`
+				gen  : '/* This is a comment that will not be rendered into your brew. */'
 			}
 		]
 	},
@@ -240,30 +251,25 @@ module.exports = [
 			{
 				name : 'Split Table',
 				icon : 'fas fa-th-large',
-				gen  : function(){
+				gen  : dedent`\n
-					return [
+					<div style='column-count:2'>
-						'<div style=\'column-count:2\'>',
+					| d10 | Damage Type |
-						'| d10 | Damage Type |',
+					|:---:|:------------|
-						'|:---:|:------------|',
+					|  1  | Acid        |
-						'|  1  | Acid        |',
+					|  2  | Cold        |
-						'|  2  | Cold        |',
+					|  3  | Fire        |
-						'|  3  | Fire        |',
+					|  4  | Force       |
-						'|  4  | Force       |',
+					|  5  | Lightning   |
-						'|  5  | Lightning   |',
+
-						'',
+					| d10 | Damage Type |
-						'```',
+					|:---:|:------------|
-						'```',
+					|  6  | Necrotic    |
-						'',
+					|  7  | Poison      |
-						'| d10 | Damage Type |',
+					|  8  | Psychic     |
-						'|:---:|:------------|',
+					|  9  | Radiant     |
-						'|  6  | Necrotic    |',
+					|  10 | Thunder     |
-						'|  7  | Poison      |',
+					</div>
-						'|  8  | Psychic     |',
+					\n`
-						'|  9  | Radiant     |',
-						'|  10 | Thunder     |',
-						'</div>\n\n',
-					].join('\n');
-				},
 			}
 		]
 	},

client/homebrew/homebrew.jsx

@@ -13,6 +13,7 @@ const NewPage = require('./pages/newPage/newPage.jsx');
 const PrintPage = require('./pages/printPage/printPage.jsx');
 
 const Homebrew = createClass({
+	displayName     : 'Homebrewery',
 	getDefaultProps : function() {
 		return {
 			url         : '',
@@ -49,6 +50,7 @@ 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,6 +7,7 @@ const MAX_TITLE_LENGTH = 50;
 
 
 const EditTitle = createClass({
+	displayName     : 'EditTitleNavItem',
 	getDefaultProps : function() {
 		return {
 			title    : '',

client/homebrew/navbar/help.navitem.jsx

@@ -0,0 +1,25 @@
+const React = require('react');
+const createClass = require('create-react-class');
+const _ = require('lodash');
+
+const Nav = require('naturalcrit/nav/nav.jsx');
+
+module.exports = function(props){
+	return <Nav.dropdown>
+		<Nav.item color='grey' icon='fas fa-question-circle'>
+			need help?
+		</Nav.item>
+		<Nav.item color='red' icon='fas fa-fw fa-bug'
+			href={`https://www.reddit.com/r/homebrewery/submit?selftext=true&title=${encodeURIComponent('[Issue] Describe Your Issue Here')}`}
+			newTab={true}
+			rel='noopener noreferrer'>
+			report issue
+		</Nav.item>
+		<Nav.item color='blue' icon='fas fa-fw fa-file-import'
+			href='/migrate'
+			newTab={true}
+			rel='noopener noreferrer'>
+			migrate
+		</Nav.item>
+	</Nav.dropdown>;
+};

client/homebrew/navbar/issue.navitem.jsx

@@ -1,13 +0,0 @@
-const React = require('react');
-const createClass = require('create-react-class');
-const Nav = require('naturalcrit/nav/nav.jsx');
-
-module.exports = function(props){
-	return <Nav.item
-		newTab={true}
-		color='red'
-		icon='fas fa-bug'
-		href={`https://www.reddit.com/r/homebrewery/submit?selftext=true&title=${encodeURIComponent('[Issue] Describe Your Issue Here')}`} >
-		report issue
-	</Nav.item>;
-};

client/homebrew/navbar/navbar.jsx

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

client/homebrew/navbar/navbar.less

@@ -1,5 +1,6 @@
+@import 'naturalcrit/styles/colors.less';
 @navbarHeight : 28px;
-@keyframes coloring {
+@keyframes pinkColoring {
 	//from {color: white;}
 	//to {color: red;}
 	0%   {color: pink;}
@@ -62,19 +63,21 @@
 		}
 		i{
 			.animate(color);
-			animation-name: coloring;
+			animation-name: pinkColoring;
 			animation-duration: 2s;
 			color: pink;
 		}
 	}
-	.recent.navItem{
+	.recent.navItem {
 		position : relative;
 		.dropdown{
-			position : absolute;
+			position   : absolute;
-			top      : 28px;
+			top        : 28px;
-			left     : 0px;
+			left       : 0px;
-			z-index  : 10000;
+			z-index    : 10000;
-			width    : 100%;
+			width      : 100%;
+			overflow   : hidden auto;
+			max-height : ~"calc(100vh - 28px)";
 			h4{
 				display          : block;
 				box-sizing       : border-box;
@@ -88,11 +91,12 @@
 				&:nth-of-type(2){ background-color: darken(@purple, 30%); }
 			}
 			.item{
+				#backgroundColors;
 				.animate(background-color);
 				position         : relative;
 				display          : block;
 				box-sizing       : border-box;
-				padding          : 13px 5px;
+				padding          : 8px 5px 13px;
 				background-color : #333;
 				color            : white;
 				text-decoration  : none;

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 : '',
@@ -123,8 +123,8 @@ const RecentItems = createClass({
 		if(!this.state.showDropdown) return null;
 
 		const makeItems = (brews)=>{
-			return _.map(brews, (brew)=>{
+			return _.map(brews, (brew, i)=>{
-				return <a href={brew.url} className='item' key={brew.id} target='_blank' rel='noopener noreferrer' title={brew.title || '[ no title ]'}>
+				return <a href={brew.url} className='item' key={`${brew.id}-${i}`} target='_blank' rel='noopener noreferrer' title={brew.title || '[ no title ]'}>
 					<span className='title'>{brew.title || '[ no title ]'}</span>
 					<span className='time'>{Moment(brew.ts).fromNow()}</span>
 				</a>;

client/homebrew/navbar/reddit.navitem.jsx

@@ -8,6 +8,7 @@ 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

@@ -10,7 +10,7 @@ const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
 
 const NewBrew = require('../../navbar/newbrew.navitem.jsx');
-const ReportIssue = require('../../navbar/issue.navitem.jsx');
+const HelpNavItem = require('../../navbar/help.navitem.jsx');
 const PrintLink = require('../../navbar/print.navitem.jsx');
 const Account = require('../../navbar/account.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
@@ -27,6 +27,7 @@ const googleDriveInactive = require('../../googleDriveMono.png');
 const SAVE_TIMEOUT = 3000;
 
 const EditPage = createClass({
+	displayName     : 'EditPage',
 	getDefaultProps : function() {
 		return {
 			brew : {
@@ -349,14 +350,14 @@ const EditPage = createClass({
 				</Nav.item>;
 			}
 
-			if(this.state.errors.status == '403' && this.state.errors.response.body.errors[0].reason == 'insufficientPermissions'){
+			if(this.state.errors.response.req.url.match(/^\/api\/.*Google.*$/m)){
 				return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
 					Oops!
 					<div className='errorContainer' onClick={this.clearErrors}>
 					Looks like your Google credentials have
-					expired! Visit the log in page to sign out
+					expired! Visit our log in page to sign out
-					and sign back in with Google
+					and sign back in with Google,
-					to save this to Google Drive!
+					then try saving again!
 						<a target='_blank' rel='noopener noreferrer'
 							href={`https://www.naturalcrit.com/login?redirect=${this.state.url}`}>
 							<div className='confirm'>
@@ -399,7 +400,21 @@ 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 &&
@@ -419,10 +434,21 @@ const EditPage = createClass({
 				{this.renderGoogleDriveIcon()}
 				{this.renderSaveButton()}
 				<NewBrew />
-				<ReportIssue />
+				<HelpNavItem/>
-				<Nav.item newTab={true} href={`/share/${this.processShareId()}`} color='teal' icon='fas fa-share-alt'>
+				<Nav.dropdown>
-					Share
+					<Nav.item color='teal' icon='fas fa-share-alt'>
-				</Nav.item>
+						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>
 				<PrintLink shareId={this.processShareId()} />
 				<RecentNavItem brew={this.state.brew} storageKey='edit' />
 				<Account />

client/homebrew/pages/errorPage/errorPage.jsx

@@ -7,8 +7,8 @@ const cx = require('classnames');
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
 const PatreonNavItem = require('../../navbar/patreon.navitem.jsx');
-const IssueNavItem = require('../../navbar/issue.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
+const HelpNavItem = require('../../navbar/help.navitem.jsx');
 
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
@@ -33,7 +33,7 @@ const ErrorPage = createClass({
 
 				<Nav.section>
 					<PatreonNavItem />
-					<IssueNavItem />
+					<HelpNavItem />
 					<RecentNavItem />
 				</Nav.section>
 			</Navbar>

client/homebrew/pages/homePage/homePage.jsx

@@ -9,7 +9,7 @@ const { Meta } = require('vitreum/headtags');
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
 const NewBrewItem = require('../../navbar/newbrew.navitem.jsx');
-const IssueNavItem = require('../../navbar/issue.navitem.jsx');
+const HelpNavItem = require('../../navbar/help.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 const AccountNavItem = require('../../navbar/account.navitem.jsx');
 
@@ -21,6 +21,7 @@ const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
 
 const HomePage = createClass({
+	displayName     : 'HomePage',
 	getDefaultProps : function() {
 		return {
 			brew : {
@@ -58,10 +59,7 @@ const HomePage = createClass({
 		return <Navbar ver={this.props.ver}>
 			<Nav.section>
 				<NewBrewItem />
-				<IssueNavItem />
+				<HelpNavItem />
-				<Nav.item newTab={true} href='/changelog' color='purple' icon='far fa-file-alt'>
-					Changelog
-				</Nav.item>
 				<RecentNavItem />
 				<AccountNavItem />
 			</Nav.section>

client/homebrew/pages/homePage/migrate.md

@@ -0,0 +1,202 @@
+# How to Convert a Legacy Document to v3
+Here you will find a number of steps to guide you through converting a Legacy document into a Homebrewery v3 document.
+
+**The first thing you'll want to do is switch the editor's rendering engine from `Legacy` to `v3`.** This will be the renderer we design features for moving forward.
+
+There are some examples of Legacy code in the code pane if you need more context behind some of the changes.
+
+**This document will evolve as users like yourself inform us of issues with it, or areas of conversion that it does not cover. _Please_ reach out if you have any suggestions for this document.**
+
+## Simple Replacements
+To make your life a little easier with this section, a text editor like [VSCode](https://code.visualstudio.com/) or Notepad will help a lot.
+
+The following table describes Legacy and other document elements and their Homebrewery counterparts. A simple find/replace should get these in working order.
+
+| Legacy / Other  | Homebrewery                  |
+|:----------------|:-----------------------------|
+| `\pagebreak`    | `\page`                      |
+| `======`        | `\page`                      |
+| `\pagebreaknum` | `{{pageNumber,auto}}\n\page` |
+| `@=====`        | `{{pageNumber,auto}}\n\page` |
+| `\columnbreak`  | `\column`                    |
+| `.phb`          | `.page`                      |
+
+## Classed or Styled Divs
+Anything that relies on the following syntax can be changed to the new Homebrewery v3 curly brace syntax:
+
+```
+<div class="classTable wide">
+...
+</div>
+```
+:
+The above example is equivalent to the following in v3 syntax.
+
+```
+{{classTable,wide
+...
+}}
+```
+:
+Some examples of this include class tables (as shown above), descriptive blocks, notes, and spell lists.
+
+\column
+
+## Margins and Padding
+Any manual margins and padding to push text down the page will likely need to be updated. Colons can be used on lines by themselves to push things down the page vertically if you'd rather not set pixel-perfect margins or padding.
+
+## Notes
+
+In Legacy, notes are denoted using markdown blockquote syntax. In Homebrewery v3, this is replaced by the curly brace syntax.
+
+<!--
+> ##### Catchy Title
+> Useful Information
+-->
+
+{{note
+##### Title
+Information
+}}
+
+## Split Tables
+Split tables also use the curly brace syntax, as the new renderer can handle style values separately from class names.
+
+<!--
+<div style='column-count:2'>
+
+| d8  | Loot |
+|:---:|:-----------:|
+|  1  | 100gp |
+|  2  | 200gp |
+|  3  | 300gp |
+|  4  | 400gp |
+
+| d8  | Loot |
+|:---:|:-----------:|
+|  5  | 500gp |
+|  6  | 600gp |
+|  7  | 700gp |
+|  8  | 1000gp |
+
+</div>
+-->
+
+##### Typical Difficulty Classes
+{{column-count:2
+| Task Difficulty | DC |
+|:----------------|:--:|
+| Very easy       | 5  |
+| Easy            | 10 |
+| Medium          | 15 |
+
+| Task Difficulty   | DC |
+|:------------------|:--:|
+| Hard              | 20 |
+| Very hard         | 25 |
+| Nearly impossible | 30 |
+}}
+
+## Blockquotes
+Blockquotes are denoted by the `>` character at the beginning of the line. In Homebrewery's v3 renderer, they hold virtually no meaning and have no CSS styling. You are free to use blockquotes when styling your document or creating themes without needing to worry about your CSS affecting other parts of the document.
+
+{{pageNumber,auto}}
+
+\page
+
+## Stat Blocks
+
+There are pretty significant differences between stat blocks on the Legacy renderer and Homebrewery v3. This section contains a list of changes that will need to be made to update the stat block.
+
+### Initial Changes
+You will want to **remove all leading** `___` that started the stat block in Legacy, and replace that with `{{monster` before the stat block, and `}}` after it.
+
+**If you want a frame** around the stat block, you can add `,frame` to the curly brace definition.
+
+**If the stat block was wide**, make sure to add `,wide` to the curly brace definition.
+
+### Blockquotes
+The key difference is the lack of blockquotes. Legacy documents use the `>` symbol at the start of the line for each line in the stat block, and the v3 renderer does not. **You will want to remove all `>` characters at the beginning of all lines, and delete any leading spaces.**
+
+### Lists
+The basic characteristics and advanced characteristics sections are not list elements in Homebrewery. You will want to **remove all `-` or `*` characters from the beginning of lines.**
+
+### Spacing
+In order to have the correct spacing after removing the list elements, you will want to **add two colons between the name of each basic/advanced characteristic and its value.** _(see example in the code pane)_
+
+Additionally, in the special traits and actions sections, you will want to add a colon at the beginning of each line that separates a trait/action from another, as seen below. **Any empty lines between special traits and actions should contain only a colon.** _(see example in the code pane)_
+
+\column
+
+{{margin-top:102px}}
+
+<!--
+### Legacy/Other Document Example:
+___
+> ## Centaur
+> *Large Monstrosity, neutral good*
+>___
+> - **Armor Class** 12
+> - **Hit Points** 45(6d10 + 12)
+> - **Speed** 50ft.
+>___
+>|STR|DEX|CON|INT|WIS|CHA|
+>|:---:|:---:|:---:|:---:|:---:|:---:|
+>|18 (+4)|14 (+2)|14 (+2)|9 (-1)|13 (+1)|11 (+0)|
+>___
+> - **Skills** Athletics +6, Perception +3, Survival +3
+> - **Senses** passive Perception 13
+> - **Languages** Elvish, Sylvan
+> - **Challenge** 2 (450 XP)
+> ___
+> ***Charge.*** If the centaur moves at least 30 feet straight toward a target and then hits it with a pike attack on the same turn, the target takes an extra 10 (3d6) piercing damage.
+>
+> ***Second Thing*** More details.
+>
+> ### Actions
+> ***Multiattack.*** The centaur makes two attacks: one with its pike and one with its hooves or two with its longbow.
+>
+> ***Pike.*** *Melee Weapon Attack:* +6 to hit, reach 10 ft., one target. *Hit:* 9 (1d10 + 4) piercing damage.
+>
+> ***Hooves.*** *Melee Weapon Attack:* +6 to hit, reach 5 ft., one target. *Hit:* 11 (2d6 + 4) bludgeoning damage.
+>
+> ***Longbow.*** *Ranged Weapon Attack:* +4 to hit, range 150/600 ft., one target. *Hit:* 6 (1d8 + 2) piercing damage.
+-->
+
+### Homebrewery v3 Example:
+
+{{monster
+## Centaur
+*Large monstrosity, neutral good*
+___
+**Armor Class** :: 12
+**Hit Points**  :: 45(6d10 + 12)
+**Speed**       :: 50ft.
+___
+|  STR  |  DEX  |  CON  |  INT  |  WIS  |  CHA  |
+|:-----:|:-----:|:-----:|:-----:|:-----:|:-----:|
+|18 (+4)|14 (+2)|14 (+2)|9 (-1) |13 (+1)|11 (+0)|
+___
+**Skills** :: Athletics +6, Perception +3, Survival +3
+**Senses** :: passive Perception 13
+**Languages** :: Elvish, Sylvan
+**Challenge** :: 2 (450 XP)
+___
+***Charge.*** If the centaur moves at least 30 feet straight toward a target and then hits it with a pike attack on the same turn, the target takes an extra 10 (3d6) piercing damage.
+:
+***Second Thing*** More details.
+
+### Actions
+***Multiattack.*** The centaur makes two attacks: one with its pike and one with its hooves or two with its longbow.
+:
+***Pike.*** *Melee Weapon Attack:* +6 to hit, reach 10 ft., one target. *Hit:* 9 (1d10 + 4) piercing damage.
+:
+***Hooves.*** *Melee Weapon Attack:* +6 to hit, reach 5 ft., one target. *Hit:* 11 (2d6 + 4) bludgeoning damage.
+:
+***Longbow.*** *Ranged Weapon Attack:* +4 to hit, range 150/600 ft., one target. *Hit:* 6 (1d8 + 2) piercing damage.
+}}
+
+{{pageNumber,auto}}
+
+
+

client/homebrew/pages/homePage/welcome_msg.md

@@ -1,4 +1,5 @@
 # The Homebrewery
+
 Welcome traveler from an antique land. Please sit and tell us of what you have seen. The unheard of monsters, who slither and bite. Tell us of the wondrous items and and artifacts you have found, their mysteries yet to be unlocked. Of the vexing vocations and surprising skills you have seen.
 
 ### Homebrew D&D made easy
@@ -45,7 +46,11 @@ 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?
-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!.
+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.
 
 ### 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.
@@ -53,17 +58,20 @@ 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/comments/3uwxx9/resources_open_to_the_community/).
+<a href='https://discord.gg/by3deKx' target='_blank'><img src='/assets/discordOfManyThings.svg' alt='Discord of Many Things Logo' title='Discord of Many Things Logo' style='width:50px; float: right; padding-left: 10px;'/></a>
+If you are looking for more 5e Homebrew resources check out [r/UnearthedArcana](https://www.reddit.com/r/UnearthedArcana/) and their list of useful resources [here](https://www.reddit.com/r/UnearthedArcana/wiki/resources). The Discord of Many Things is another great resource to connect with fellow homebrewers for help and feedback.
 
-
+<img src='https://i.imgur.com/hMna6G0.png' style='position:absolute;bottom:40px;right:30px;width:280px' />
-
-<img src='https://i.imgur.com/hMna6G0.png' style='position:absolute;bottom:50px;right:30px;width:280px' />
 
 <div class='pageNumber'>1</div>
 <div class='footnote'>PART 1 | FANCINESS</div>
 
-
+<div style='position: absolute; top: 40px; right: 60px;'>
-
+<a href='https://discord.gg/by3deKx' target='_blank' title='Discord of Many Things'><img src='/assets/discord.png' height='36px'/></a><span style='position: absolute; left: -4px; top: 40px'>Discord</span>
+<a href='https://github.com/naturalcrit/homebrewery' target='_blank' title='github' style='color: black; padding-left: 10px;'><img src='/assets/github.png' height='36px'/></a><span style='position: absolute; top: 40px; left: 48px'>Github</span>
+<a href='https://patreon.com/NaturalCrit' target='_blank' title='patreon' style='color: black; padding-left: 10px;'><img src='/assets/patreon.png' height='36px'/></a><span style='position: absolute; top: 40px; right: 46px'>Patreon</span>
+<a href='https://www.reddit.com/r/homebrewery/' target='_blank' title='reddit' style='color: black; padding-left: 10px;'><img src='/assets/reddit.png' height='36px'/></a><span style='position: absolute; top: 40px; right: 0px;'>Reddit</span>
+</div>
 
 \page
 

client/homebrew/pages/homePage/welcome_msg_v3.md

@@ -2,7 +2,6 @@
 .page #example + table td {
 	border:1px dashed #00000030;
 }
-
 .page {
 	padding-bottom : 1.1cm;
 }
@@ -34,25 +33,37 @@ 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 before you print
+If you want to save ink or have a monochrome printer, add the **PRINT → {{fas,fa-tint}} Ink Friendly** snippet to your brew!
 }}
 
-<img src='https://i.imgur.com/hMna6G0.png' style='position:absolute;bottom:50px;left:120px;width:180px' />
+![homebrew mug](http://i.imgur.com/hMna6G0.png) {position:absolute,bottom:20px,left:130px,width:220px}
 
-<div class='pageNumber'>1</div>
+{{artist,bottom:160px,left:100px
-<div class='footnote'>PART 1 | FANCINESS</div>
+##### Homebrew Mug
+[naturalcrit](https://homebrew.naturalcrit.com)
+}}
+
+{{position:absolute;top:40px;right:-580px
+<a href='https://discord.gg/by3deKx' target='_blank' title='discord' style='color: black;'><img src='/assets/discord.png' height='36px'/></a><span style='position: absolute; left: -6px; top: 40px'>Discord</span>
+<a href='https://github.com/naturalcrit/homebrewery' target='_blank' title='github' style='color: black; padding-left: 10px;'><img src='/assets/github.png' height='36px'/></a><span style='position: absolute; top: 40px; left: 47px'>Github</span>
+<a href='https://patreon.com/NaturalCrit' target='_blank' title='patreon' style='color: black; padding-left: 10px;'><img src='/assets/patreon.png' height='36px'/></a><span style='position: absolute; top: 40px; left: 93px'>Patreon</span>
+<a href='https://www.reddit.com/r/homebrewery/' target='_blank' title='reddit' style='color: black; padding-left: 10px;'><img src='/assets/reddit.png' height='36px'/></a><span style='position: absolute; top: 40px; left: 147px;'>Reddit</span>
+}}
+
+{{pageNumber 1}}
+{{footnote PART 1 | FANCINESS}}
 
 \column
 
 ## New in V3.0.0
-With the latest major update to *The Homebrewery* we've implemented an extended Markdown-like syntax for block and span elements, plus a few other changes, eliminating the need for HTML tags like `div` and `span` in most cases. No raw HTML tags should be needed in a brew, and going forward, raw HTML will no longer receive debugging support (*but can still be used if you insist*).
+We've implemented an extended Markdown-like syntax for block and span elements, plus a few other changes, eliminating the need for HTML tags like `div` and `span` in most cases. No raw HTML tags should be needed in a brew (*but can still be used if you insist*).
 
-Much of the syntax and styling has changed in V3. Code in one version may be broken in the other, and updating an older brew to V3 will require more than just a copy and paste. *However*, all brews made prior to the release of v3.0.0 will still render normally, and you may switch between the "Legacy" brew renderer and the newer "V3" renderer via the {{fa,fa-info-circle}} **Properties** button on your brew at any time.
+Much of the syntax and styling has changed in V3, so converting a Legacy brew to V3 (or vice-versa) will require tweaking your document. *However*, all brews made prior to the release of v3.0.0 will still render normally, and you may switch between the "Legacy" brew renderer and the newer "V3" renderer via the {{fa,fa-info-circle}} **Properties** button on your brew at any time.
 
 Scroll down to the next page for a brief summary of the changes and new features available in V3!
 
 #### New Things All The Time!
-What's new in the latest update? Check out the full changelog [here](/changelog).
+Check out the latest updates in 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.
@@ -60,6 +71,8 @@ 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.
@@ -72,9 +85,9 @@ 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 Resources
+### More Homebrew 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/).
+<a href='https://discord.gg/by3deKx' target='_blank'><img src='/assets/discordOfManyThings.svg' alt='Discord of Many Things Logo' title='Discord of Many Things Logo' style='width:50px; float: right; padding-left: 10px;'/></a>
-
+If you are looking for more 5e Homebrew resources check out [r/UnearthedArcana](https://www.reddit.com/r/UnearthedArcana/) and their list of useful resources [here](https://www.reddit.com/r/UnearthedArcana/wiki/resources). The <a href='https://discord.gg/by3deKx' target='_blank' title='Discord of Many Things'>Discord of Many Things</a> is another great resource to connect with fellow homebrewers for help and feedback.
 
 \page
 
@@ -84,7 +97,6 @@ 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:
 
@@ -97,7 +109,6 @@ 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.
 
@@ -118,9 +129,7 @@ A blank line can be achieved with a run of one or more `:` alone on a line. More
 Much nicer than `<br><br><br><br><br>`
 
 ### Definition Lists
-V3 uses HTML *definition lists* to create "lists" with hanging indents.
+**Example** :: V3 uses HTML *definition lists* to create "lists" with hanging indents.
-
-**Senses** :: Here is some text that is long and overflows into a second line, creating a "hanging indent".
 
 ### Column Breaks
 Column and page breaks with `\column` and `\page`.
@@ -148,9 +157,9 @@ These can be combined to span a cell across both columns and rows. Cells must ha
 | 6A     |    6B ^|    6C  |
 
 ## Images
-Images must be hosted online somewhere, like [Imgur](https://www.imgur.com). You use the address to that image to reference it in your brew\*. Images can be included using Markdown-style images.
+Images must be hosted online somewhere, like [Imgur](https://www.imgur.com). You use the address to that image to reference it in your brew\*.
 
-Using *Curly Injection* you can assign an id, classes, or specific inline CSS properties to the image.
+Using *Curly Injection* you can assign an id, classes, or inline CSS properties to the Markdown image syntax.
 
 ![alt-text](https://s-media-cache-ak0.pinimg.com/736x/4a/81/79/4a8179462cfdf39054a418efd4cb743e.jpg) {width:100px,border:"2px solid",border-radius:10px}
 
@@ -159,12 +168,8 @@ 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

@@ -11,7 +11,7 @@ const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
 const AccountNavItem = require('../../navbar/account.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
-const IssueNavItem = require('../../navbar/issue.navitem.jsx');
+const HelpNavItem = require('../../navbar/help.navitem.jsx');
 
 const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
 const Editor = require('../../editor/editor.jsx');
@@ -23,6 +23,7 @@ const METAKEY = 'homebrewery-new-meta';
 
 
 const NewPage = createClass({
+	displayName     : 'NewPage',
 	getDefaultProps : function() {
 		return {
 			brew : {
@@ -45,47 +46,44 @@ 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        : this.props.brew.text || '',
+				text        : brew.text || '',
-				style       : this.props.brew.style || undefined,
+				style       : brew.style || undefined,
 				gDrive      : false,
-				title       : this.props.brew.title || '',
+				title       : brew.title || '',
-				description : this.props.brew.description || '',
+				description : brew.description || '',
-				tags        : this.props.brew.tags || '',
+				tags        : brew.tags || '',
 				published   : false,
 				authors     : [],
-				systems     : this.props.brew.systems || [],
+				systems     : brew.systems || [],
-				renderer    : this.props.brew.renderer || 'legacy'
+				renderer    : brew.renderer || 'legacy'
 			},
 
 			isSaving   : false,
 			saveGoogle : (global.account && global.account.googleId ? true : false),
 			errors     : null,
-			htmlErrors : Markdown.validate(this.props.brew.text)
+			htmlErrors : Markdown.validate(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() {
@@ -146,14 +144,6 @@ const NewPage = createClass({
 		});
 	},
 
-	clearErrors : function(){
-		this.setState({
-			errors   : null,
-			isSaving : false
-
-		});
-	},
-
 	save : async function(){
 		this.setState({
 			isSaving : true
@@ -237,14 +227,14 @@ const NewPage = createClass({
 				</Nav.item>;
 			}
 
-			if(this.state.errors.status == '403' && this.state.errors.response.body.errors[0].reason == 'insufficientPermissions'){
+			if(this.state.errors.response.req.url.match(/^\/api\/.*Google.*$/m)){
 				return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
 					Oops!
 					<div className='errorContainer' onClick={this.clearErrors}>
 					Looks like your Google credentials have
-					expired! Visit the log in page to sign out
+					expired! Visit our log in page to sign out
-					and sign back in with Google
+					and sign back in with Google,
-					to save this to Google Drive!
+					then try saving again!
 						<a target='_blank' rel='noopener noreferrer'
 							href={`https://www.naturalcrit.com/login?redirect=${this.state.url}`}>
 							<div className='confirm'>
@@ -282,7 +272,6 @@ 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');
 	},
 
@@ -302,7 +291,7 @@ const NewPage = createClass({
 			<Nav.section>
 				{this.renderSaveButton()}
 				{this.renderLocalPrintButton()}
-				<IssueNavItem />
+				<HelpNavItem />
 				<RecentNavItem />
 				<AccountNavItem />
 			</Nav.section>

client/homebrew/pages/printPage/printPage.jsx

@@ -7,7 +7,12 @@ 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 : {},
@@ -21,23 +26,42 @@ const PrintPage = createClass({
 
 	getInitialState : function() {
 		return {
-			brewText : this.props.brew.text
+			brew : {
+				text     : this.props.brew.text || '',
+				style    : this.props.brew.style || undefined,
+				renderer : this.props.brew.renderer || 'legacy'
+			}
 		};
 	},
 
 	componentDidMount : function() {
-		if(this.props.query.local){
+		if(this.props.query.local == 'print'){
-			this.setState((prevState, prevProps)=>({
+			const brewStorage  = localStorage.getItem(BREWKEY);
-				brewText : localStorage.getItem(prevProps.query.local)
+			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.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.props.brew.renderer == 'legacy') {
+		if(this.state.brew.renderer == 'legacy') {
-			return _.map(this.state.brewText.split('\\page'), (pageText, index)=>{
+			return _.map(this.state.brew.text.split('\\page'), (pageText, index)=>{
 				return <div
 					className='phb page'
 					id={`p${index + 1}`}
@@ -45,7 +69,7 @@ const PrintPage = createClass({
 					key={index} />;
 			});
 		} else {
-			return _.map(this.state.brewText.split(/^\\page$/gm), (pageText, index)=>{
+			return _.map(this.state.brew.text.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} >
@@ -60,10 +84,12 @@ const PrintPage = createClass({
 	render : function(){
 		return <div>
 			<Meta name='robots' content='noindex, nofollow' />
-			<link href={`${this.props.brew.renderer == 'legacy' ? '/themes/5ePhbLegacy.style.css' : '/themes/5ePhb.style.css'}`} rel='stylesheet'/>
+			<link href={`${this.state.brew.renderer == 'legacy' ? '/themes/5ePhbLegacy.style.css' : '/themes/5ePhb.style.css'}`} rel='stylesheet'/>
 			{/* Apply CSS from Style tab */}
-			<div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style> ${this.props.brew.style} </style>` }} />
+			{this.renderStyle()}
-			{this.renderPages()}
+			<div className='pages' ref='pages'>
+				{this.renderPages()}
+			</div>
 		</div>;
 	}
 });

client/homebrew/pages/sharePage/sharePage.jsx

@@ -14,6 +14,7 @@ const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
 
 const SharePage = createClass({
+	displayName     : 'SharePage',
 	getDefaultProps : function() {
 		return {
 			brew : {
@@ -29,23 +30,19 @@ 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.props.brew.shareId}?dialog=true`, '_blank').focus();
+			window.open(`/print/${this.processShareId()}?dialog=true`, '_blank').focus();
 			e.stopPropagation();
 			e.preventDefault();
 		}
@@ -57,28 +54,6 @@ 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' />
@@ -90,12 +65,20 @@ const SharePage = createClass({
 				<Nav.section>
 					{this.props.brew.shareId && <>
 						<PrintLink shareId={this.processShareId()} />
-						<Nav.item icon='fas fa-code' color='red' className='source'
+						<Nav.dropdown>
-							onMouseEnter={()=>this.handleDropdown(true)}
+							<Nav.item color='red' icon='fas fa-code'>
-							onMouseLeave={()=>this.handleDropdown(false)}>
+								source
-							source
+							</Nav.item>
-							{this.renderDropdown()}
+							<Nav.item color='blue' href={`/source/${this.processShareId()}`}>
-						</Nav.item>
+								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>
 					</>}
 					<RecentNavItem brew={this.props.brew} storageKey='view' />
 					<Account />

client/homebrew/pages/sharePage/sharePage.less

@@ -2,49 +2,4 @@
 	.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,8 +7,10 @@ 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 : {
@@ -47,7 +49,7 @@ const BrewItem = createClass({
 	renderDeleteBrewLink : function(){
 		if(!this.props.brew.editId) return;
 
-		return <a onClick={this.deleteBrew}>
+		return <a className='deleteLink' onClick={this.deleteBrew}>
 			<i className='fas fa-trash-alt' title='Delete' />
 		</a>;
 	},
@@ -60,7 +62,7 @@ const BrewItem = createClass({
 			editLink = this.props.brew.googleId + editLink;
 		}
 
-		return <a href={`/edit/${editLink}`} target='_blank' rel='noopener noreferrer'>
+		return <a className='editLink' href={`/edit/${editLink}`} target='_blank' rel='noopener noreferrer'>
 			<i className='fas fa-pencil-alt' title='Edit' />
 		</a>;
 	},
@@ -73,7 +75,7 @@ const BrewItem = createClass({
 			shareLink = this.props.brew.googleId + shareLink;
 		}
 
-		return <a href={`/share/${shareLink}`} target='_blank' rel='noopener noreferrer'>
+		return <a className='shareLink' href={`/share/${shareLink}`} target='_blank' rel='noopener noreferrer'>
 			<i className='fas fa-share-alt' title='Share' />
 		</a>;
 	},
@@ -86,7 +88,7 @@ const BrewItem = createClass({
 			shareLink = this.props.brew.googleId + shareLink;
 		}
 
-		return <a href={`/download/${shareLink}`}>
+		return <a className='downloadLink' href={`/download/${shareLink}`}>
 			<i className='fas fa-download' title='Download' />
 		</a>;
 	},
@@ -110,6 +112,10 @@ 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>
@@ -118,14 +124,12 @@ const BrewItem = createClass({
 						<i className='far fa-file' /> {brew.pageCount}
 					</span>
 				}
-				<span>
+				<span title={dedent`
+					Created: ${moment(brew.createdAt).local().format(dateFormatString)}
+					Last updated: ${moment(brew.updatedAt).local().format(dateFormatString)}`}>
 					<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,12 +27,11 @@
 	.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,6 +13,7 @@ const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 const Account = require('../../navbar/account.navitem.jsx');
 const NewBrew = require('../../navbar/newbrew.navitem.jsx');
 const BrewItem = require('./brewItem/brewItem.jsx');
+const HelpNavItem = require('../../navbar/help.navitem.jsx');
 
 // const brew = {
 // 	title   : 'SUPER Long title woah now',
@@ -23,6 +24,7 @@ const BrewItem = require('./brewItem/brewItem.jsx');
 
 
 const UserPage = createClass({
+	displayName     : 'UserPage',
 	getDefaultProps : function() {
 		return {
 			username : '',
@@ -85,7 +87,7 @@ const UserPage = createClass({
 				  <button
 					  value={`${sortValue}`}
 					  onClick={this.handleSortOptionChange}
-					  className={`${(this.state.sortType == sortValue ? 'active' : '')}`}
+					  className={`sortOption ${(this.state.sortType == sortValue ? 'active' : '')}`}
 				  >
   					{`${sortTitle}`}
 		 		  </button>
@@ -101,7 +103,7 @@ const UserPage = createClass({
 
 	renderFilterOption : function(){
 		return <td>
-			<label>
+			<label className='filterOption'>
 				<i className='fas fa-search'></i>
 				<input
 					type='search'
@@ -162,6 +164,7 @@ const UserPage = createClass({
 			<Navbar>
 				<Nav.section>
 					<NewBrew />
+					<HelpNavItem />
 					<RecentNavItem />
 					<Account />
 				</Nav.section>

config/default.json

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

faq.md

@@ -0,0 +1,152 @@
+```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.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/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/install/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`).
 

install/README.UBUNTU.md

@@ -0,0 +1,35 @@
+# 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

@@ -0,0 +1,13 @@
+[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

@@ -0,0 +1,34 @@
+#!/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.0",
+  "version": "3.0.7",
   "engines": {
-    "node": "14.15.x"
+    "node": "16.11.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": "pico-check",
+    "test": "jest",
-    "test:dev": "pico-check -v -w",
+    "test:dev": "jest --verbose --watch",
     "phb": "node scripts/phb.js",
     "prod": "set NODE_ENV=production && npm run build",
     "postinstall": "npm run buildall",
@@ -30,42 +30,50 @@
   "eslintIgnore": [
     "build/*"
   ],
-  "pico-check": {
+  "jest": {
-    "require": "./tests/test.init.js"
+    "modulePaths": [
+      "mode_modules",
+      "shared",
+      "server"
+    ]
   },
   "babel": {
     "presets": [
       "@babel/preset-env",
       "@babel/preset-react"
+    ],
+    "plugins": [
+      "@babel/plugin-transform-runtime"
     ]
   },
   "dependencies": {
-    "@babel/core": "^7.15.0",
+    "@babel/core": "^7.17.0",
-    "@babel/plugin-transform-runtime": "^7.15.0",
+    "@babel/plugin-transform-runtime": "^7.17.0",
-    "@babel/preset-env": "^7.15.4",
+    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.14.5",
+    "@babel/preset-react": "^7.16.7",
-    "body-parser": "^1.19.0",
+    "body-parser": "^1.19.1",
     "classnames": "^2.3.1",
-    "codemirror": "^5.62.3",
+    "codemirror": "^5.65.1",
-    "cookie-parser": "^1.4.5",
+    "cookie-parser": "^1.4.6",
     "create-react-class": "^15.7.0",
-    "dedent-tabs": "^0.9.0",
+    "dedent-tabs": "^0.10.1",
-    "express": "^4.17.1",
+    "express": "^4.17.2",
-    "express-async-handler": "^1.1.4",
+    "express-async-handler": "^1.2.0",
     "express-static-gzip": "2.1.1",
     "fs-extra": "10.0.0",
-    "googleapis": "85.0.0",
+    "googleapis": "94.0.0",
+    "js-yaml": "^4.1.0",
     "jwt-simple": "^0.5.6",
     "less": "^3.13.1",
     "lodash": "^4.17.21",
-    "marked": "3.0.3",
+    "marked": "4.0.12",
+    "marked-extended-tables": "^1.0.3",
     "markedLegacy": "npm:marked@^0.3.19",
     "moment": "^2.29.1",
-    "mongoose": "^5.13.7",
+    "mongoose": "^6.2.0",
-    "nanoid": "3.1.25",
+    "nanoid": "3.2.0",
     "nconf": "^0.11.3",
-    "prop-types": "15.7.2",
+    "query-string": "7.1.0",
-    "query-string": "7.0.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-frame-component": "4.1.3",
@@ -75,8 +83,9 @@
     "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
   },
   "devDependencies": {
-    "eslint": "^7.32.0",
+    "eslint": "^8.8.0",
-    "eslint-plugin-react": "^7.25.1",
+    "eslint-plugin-react": "^7.28.0",
-    "pico-check": "^2.1.3"
+    "jest": "^27.4.5",
+    "supertest": "^6.2.2"
   }
 }

scripts/buildHomebrew.js

@@ -25,6 +25,7 @@ const build = async ({ bundle, render, ssr })=>{
 	await fs.outputFile('./build/homebrew/bundle.js', bundle);
 	await fs.outputFile('./build/homebrew/ssr.js', ssr);
 	await fs.copy('./themes/fonts', './build/fonts');
+	await fs.copy('./themes/assets', './build/assets');
 	let src = './themes/5ePhbLegacy.style.less';
 	//Parse brew theme files
 	less.render(fs.readFileSync(src).toString(), {
@@ -73,6 +74,6 @@ pack('./client/homebrew/homebrew.jsx', {
 if(isDev){
 	livereload('./build');
 	watchFile('./server.js', {
-		watch : ['./client'] // Watch additional folders if you want
+		watch : ['./client', './server'] // Watch additional folders if you want
 	});
 }

scripts/project.json

@@ -12,6 +12,18 @@
 		"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,286 +1,12 @@
-/*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
+const DB = require('./server/db.js');
-const _ = require('lodash');
+const server = require('./server/app.js');
-const jwt = require('jwt-simple');
+const config = require('./server/config.js');
-const express = require('express');
-const app = express();
 
-const homebrewApi = require('./server/homebrew.api.js');
+DB.connect(config).then(()=>{
-const GoogleActions = require('./server/googleActions.js');
+	// Ensure that we have successfully connected to the database
-const serveCompressedStaticAssets = require('./server/static-assets.mv.js');
+	// before launching server
-const sanitizeFilename = require('sanitize-filename');
+	const PORT = process.env.PORT || config.get('web_port') || 8000;
-const asyncHandler = require('express-async-handler');
+	server.app.listen(PORT, ()=>{
-
+		console.log(`server on port: ${PORT}`);
-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()
-	.env({ lowerCase: true })
-	.file('environment', { file: `config/${process.env.NODE_ENV}.json` })
-	.file('defaults', { file: 'config/default.json' });
-
-//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

@@ -0,0 +1,306 @@
+/*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
+// Set working directory to project root
+process.chdir(`${__dirname}/..`);
+
+const _ = require('lodash');
+const jwt = require('jwt-simple');
+const express = require('express');
+const yaml = require('js-yaml');
+const app = express();
+const config = require('./config.js');
+
+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(`build`));
+
+//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'));
+
+//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 migrateText    = require('fs').readFileSync('client/homebrew/pages/homePage/migrate.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(`robots.txt`, { root: process.cwd() });
+});
+
+//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();
+});
+
+//Legacy/Other Document -> v3 Migration Guide
+app.get('/migrate', async (req, res, next)=>{
+	const brew = {
+		text     : migrateText,
+		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/config.js

@@ -0,0 +1,5 @@
+module.exports = require('nconf')
+    .argv()
+    .env({ lowerCase: true })
+    .file('environment', { file: `config/${process.env.NODE_ENV}.json` })
+    .file('defaults', { file: 'config/default.json' });

server/db.js

@@ -0,0 +1,37 @@
+// 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

@@ -3,15 +3,11 @@ const _ = require('lodash');
 const { google } = require('googleapis');
 const { nanoid } = require('nanoid');
 const token = require('./token.js');
-const config = require('nconf')
+const config = require('./config.js');
-	.argv()
-	.env({ lowerCase: true })	// Load environment variables
-	.file('environment', { file: `config/${process.env.NODE_ENV}.json` })
-	.file('defaults', { file: 'config/default.json' });
 
 //let oAuth2Client;
 
-GoogleActions = {
+const GoogleActions = {
 
 	authCheck : (account, res)=>{
 		if(!account || !account.googleId){ // If not signed into Google
@@ -96,7 +92,7 @@ GoogleActions = {
 		const drive = google.drive({ version: 'v3', auth: oAuth2Client });
 
 		const obj = await drive.files.list({
-			pageSize : 100,
+			pageSize : 1000,
 			fields   : 'nextPageToken, files(id, name, description, createdTime, modifiedTime, properties)',
 			q        : 'mimeType != \'application/vnd.google-apps.folder\' and trashed = false'
 		})
@@ -120,10 +116,10 @@ GoogleActions = {
 				updatedAt   : file.modifiedTime,
 				gDrive      : true,
 				googleId    : file.id,
-				pageCount   : file.properties.pageCount,
+				pageCount   : parseInt(file.properties.pageCount),
 				title       : file.properties.title,
 				description : file.description,
-				views       : file.properties.views,
+				views       : parseInt(file.properties.views),
 				tags        : '',
 				published   : file.properties.published ? file.properties.published == 'true' : false,
 				authors     : [req.account.username],	//TODO: properly save and load authors to google drive

server/homebrew.api.js

@@ -4,6 +4,7 @@ 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) {
@@ -11,6 +12,22 @@ const Markdown = require('../shared/naturalcrit/markdown.js');
 // 	});
 // };
 
+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)=>{
@@ -28,16 +45,6 @@ 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;
 
@@ -46,7 +53,7 @@ const newBrew = (req, res)=>{
 	}
 
 	brew.authors = (req.account) ? [req.account.username] : [];
-	brew.text = mergeBrewText(brew.text, brew.style);
+	brew.text = mergeBrewText(brew);
 
 	delete brew.editId;
 	delete brew.shareId;
@@ -75,7 +82,7 @@ const updateBrew = (req, res)=>{
 		.then((brew)=>{
 			const updateBrew = excludePropsFromUpdate(req.body);
 			brew = _.merge(brew, updateBrew);
-			brew.text = mergeBrewText(brew.text, brew.style);
+			brew.text = mergeBrewText(brew);
 
 			// Compress brew text to binary before saving
 			brew.textBin = zlib.deflateRawSync(brew.text);
@@ -143,7 +150,7 @@ const newGoogleBrew = async (req, res, next)=>{
 	}
 
 	brew.authors = (req.account) ? [req.account.username] : [];
-	brew.text = mergeBrewText(brew.text, brew.style);
+	brew.text = mergeBrewText(brew);
 
 	delete brew.editId;
 	delete brew.shareId;
@@ -165,13 +172,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.text, brew.style);
+	brew.text = mergeBrewText(brew);
 
 	try {
 		const updatedBrew = await GoogleActions.updateGoogleBrew(oAuth2Client, brew);
 		return res.status(200).send(updatedBrew);
 	} catch (err) {
-		return res.status(err.response.status).send(err);
+		return res.status(err.response?.status || 500).send(err);
 	}
 };
 

server/token.js

@@ -1,11 +1,7 @@
 const jwt = require('jwt-simple');
 
 // Load configuration values
-const config = require('nconf')
+const config = require('./config.js');
-	.argv()
-	.env({ lowerCase: true })	// Load environment variables
-	.file('environment', { file: `config/${process.env.NODE_ENV}.json` })
-	.file('defaults', { file: 'config/default.json' });
 
 // Generate an Access Token for the given User ID
 const generateAccessToken = (account)=>{

shared/homebrewery/renderWarnings/renderWarnings.jsx

@@ -7,6 +7,7 @@ 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

@@ -0,0 +1,48 @@
+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,9 +1,10 @@
+/* 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'){
@@ -13,56 +14,168 @@ 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 : '',
+			language      : '',
-			value    : '',
+			value         : '',
-			wrap     : true,
+			wrap          : true,
-			onChange : ()=>{}
+			onChange      : ()=>{},
+			enableFolding : true
+		};
+	},
+
+	getInitialState : function() {
+		return {
+			docs : {}
 		};
 	},
 
 	componentDidMount : function() {
 		this.buildEditor();
+		const newDoc = CodeMirror.Doc(this.props.value, this.props.language);
+		this.codeMirror.swapDoc(newDoc);
 	},
 
 	componentDidUpdate : function(prevProps) {
-		if(prevProps.language !== this.props.language){ //rebuild editor when switching tabs
+		if(prevProps.view !== this.props.view){ //view changed; swap documents
-			this.buildEditor();
+			let newDoc;
-		}
+
-		if(this.codeMirror && this.codeMirror.getValue() != this.props.value) { //update editor contents if brew.text is changed from outside
+			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(this.props.enableFolding) {
+			this.codeMirror.setOption('foldOptions', this.foldOptions(this.codeMirror));
+		} else {
+			this.codeMirror.setOption('foldOptions', false);
+		}
 	},
 
 	buildEditor : function() {
 		this.codeMirror = CodeMirror(this.refs.editor, {
-			value          : this.props.value,
+			lineNumbers       : true,
-			lineNumbers    : true,
+			lineWrapping      : this.props.wrap,
-			lineWrapping   : this.props.wrap,
+			indentWithTabs    : true,
-			mode           : this.props.language, //TODO: CSS MODE DOESN'T SEEM TO LOAD PROPERLY
+			tabSize           : 2,
-			indentWithTabs : true,
+			historyEventDelay : 250,
-			tabSize        : 2,
+			extraKeys         : {
-			extraKeys      : {
+				'Ctrl-B'           : this.makeBold,
-				'Ctrl-B' : this.makeBold,
+				'Cmd-B'            : this.makeBold,
-				'Cmd-B'  : this.makeBold,
+				'Ctrl-I'           : this.makeItalic,
-				'Ctrl-I' : this.makeItalic,
+				'Cmd-I'            : this.makeItalic,
-				'Cmd-I'  : this.makeItalic,
+				'Ctrl-U'           : this.makeUnderline,
-				'Ctrl-M' : this.makeSpan,
+				'Cmd-U'            : this.makeUnderline,
-				'Cmd-M'  : this.makeSpan,
+				'Ctrl-.'           : this.makeNbsp,
-				'Ctrl-/' : this.makeComment,
+				'Cmd-.'            : this.makeNbsp,
-				'Cmd-/'  : this.makeComment
+				'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;
+			// }
 		});
+		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');
@@ -73,14 +186,55 @@ const CodeEditor = createClass({
 	},
 
 	makeItalic : function() {
-		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 1) === '_' && selection.slice(-1) === '_';
+		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 1) === '*' && selection.slice(-1) === '*';
-		this.codeMirror.replaceSelection(t ? selection.slice(1, -1) : `_${selection}_`, 'around');
+		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');
@@ -90,15 +244,83 @@ const CodeEditor = createClass({
 		}
 	},
 
-	makeComment : function() {
+	makeDiv : function() {
-		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 4) === '<!--' && selection.slice(-3) === '-->';
+		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '{{' && selection.slice(-2) === '}}';
-		this.codeMirror.replaceSelection(t ? selection.slice(4, -3) : `<!-- ${selection} -->`, 'around');
+		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, ch: cursor.ch - 4 });
+			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');
+		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 });
+		}
+	},
+
+	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(()=>{
@@ -112,10 +334,43 @@ 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' />;
+		return <div className='codeEditor' ref='editor' style={this.props.style}/>;
 	}
 });
 

shared/naturalcrit/codeEditor/codeEditor.less

@@ -1,5 +1,22 @@
 @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

@@ -0,0 +1,26 @@
+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,7 +1,8 @@
 /* eslint-disable max-lines */
 const _ = require('lodash');
-const Markdown = require('marked');
+const Marked = require('marked');
-const renderer = new Markdown.Renderer();
+const MarkedExtendedTables = require('marked-extended-tables');
+const renderer = new Marked.Renderer();
 
 //Processes the markdown within an HTML block if it's just a class-wrapper
 renderer.html = function (html) {
@@ -9,7 +10,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} ${Markdown(html)} </div>`;
+		return `${openTag} ${Marked.parse(html)} </div>`;
 	}
 	return html;
 };
@@ -235,200 +236,10 @@ const definitionLists = {
 	}
 };
 
-const spanTable = {
+Marked.use({ extensions: [mustacheSpans, mustacheDivs, mustacheInjectInline, definitionLists] });
-	name  : 'spanTable',
+Marked.use(MarkedExtendedTables());
-	level : 'block',                                   // Is this a block-level or inline-level tokenizer?
+Marked.use(mustacheInjectBlock);
-	start(src) { return src.match(/^\n *([^\n ].*\|.*)\n/)?.index; },  // Hint to Marked.js to stop and check for a match
+Marked.use({ smartypants: true });
-	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) {
@@ -509,9 +320,15 @@ const sanatizeScriptTags = (content)=>{
 const tagTypes = ['div', 'span', 'a'];
 const tagRegex = new RegExp(`(${
 	_.map(tagTypes, (type)=>{
-		return `\\<${type}|\\</${type}>`;
+		return `\\<${type}\\b|\\</${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?
@@ -526,11 +343,11 @@ const processStyleTags = (string)=>{
 };
 
 module.exports = {
-	marked : Markdown,
+	marked : Marked,
 	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 Markdown(
+		return Marked.parse(
 			sanatizeScriptTags(rawBrewText),
 			{ renderer: renderer }
 		);
@@ -552,6 +369,13 @@ 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,9 +99,15 @@ const sanatizeScriptTags = (content)=>{
 const tagTypes = ['div', 'span', 'a'];
 const tagRegex = new RegExp(`(${
 	_.map(tagTypes, (type)=>{
-		return `\\<${type}|\\</${type}>`;
+		return `\\<${type}\\b|\\</${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,
@@ -128,6 +134,13 @@ 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,7 +8,8 @@ const NaturalCritIcon = require('naturalcrit/svg/naturalcrit.svg.jsx');
 
 const Nav = {
 	base : createClass({
-		render : function(){
+		displayName : 'Nav.base',
+		render      : function(){
 			return <nav>
 				<div className='navContent'>
 					{this.props.children}
@@ -26,7 +27,8 @@ const Nav = {
 	},
 
 	section : createClass({
-		render : function(){
+		displayName : 'Nav.section',
+		render      : function(){
 			return <div className='navSection'>
 				{this.props.children}
 			</div>;
@@ -34,6 +36,7 @@ const Nav = {
 	}),
 
 	item : createClass({
+		displayName     : 'Nav.item',
 		getDefaultProps : function() {
 			return {
 				icon    : null,
@@ -68,6 +71,47 @@ 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,3 +1,12 @@
+@import '../styles/colors';
+@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{
@@ -41,6 +50,7 @@ nav{
 		}
 	}
 	.navItem{
+		#backgroundColors;
 		.animate(background-color);
 		padding          : 8px 12px;
 		cursor           : pointer;
@@ -50,32 +60,35 @@ nav{
 		color            : white;
 		text-decoration  : none;
 		text-transform   : uppercase;
+		line-height      : 13px;
 		i{
 			margin-left : 5px;
 			font-size   : 13px;
+			float       : right;
 		}
-		&.tealLight:hover{ background-color : @tealLight };
-		&.teal:hover{ background-color : @teal };
-		&.greenLight:hover{ background-color : @greenLight };
-		&.green:hover{ background-color : @green };
-		&.blueLight:hover{ background-color : @blueLight };
-		&.blue:hover{ background-color : @blue };
-		&.purpleLight:hover{ background-color : @purpleLight };
-		&.purple:hover{ background-color : @purple };
-		&.steelLight:hover{ background-color : @steelLight };
-		&.steel:hover{ background-color : @steel };
-		&.yellowLight:hover{ background-color : @yellowLight };
-		&.yellow:hover{ background-color : @yellow };
-		&.orangeLight:hover{ background-color : @orangeLight };
-		&.orange:hover{ background-color : @orange };
-		&.redLight:hover{ background-color : @redLight };
-		&.red:hover{ background-color : @red };
-		&.silverLight:hover{ background-color : @silverLight };
-		&.silver:hover{ background-color : @silver };
-		&.greyLight:hover{ background-color : @greyLight };
-		&.grey:hover{ background-color : @grey };
 	}
 	.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,6 +5,7 @@ const _ = require('lodash');
 const cx = require('classnames');
 
 const SplitPane = createClass({
+	displayName     : 'SplitPane',
 	getDefaultProps : function() {
 		return {
 			storageKey   : 'naturalcrit-pane-split',
@@ -40,8 +41,12 @@ 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 : e.pageX
+			size : newSize
 		});
 	},
 	/*
@@ -73,6 +78,7 @@ const SplitPane = createClass({
 });
 
 const Pane = createClass({
+	displayName     : 'Pane',
 	getDefaultProps : function() {
 		return {
 			width : null

shared/naturalcrit/splitPane/splitPane.less

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

shared/naturalcrit/styles/colors.less

@@ -20,4 +20,27 @@
 @silverLight : #ECF0F1;
 @silver      : #BDC3C7;
 @greyLight   : #95A5A6;
-@grey        : #7F8C8D;
+@grey        : #7F8C8D;
+
+#backgroundColors {
+  &.tealLight:hover{ background-color : @tealLight };
+  &.teal:hover{ background-color : @teal };
+  &.greenLight:hover{ background-color : @greenLight };
+  &.green:hover{ background-color : @green };
+  &.blueLight:hover{ background-color : @blueLight };
+  &.blue:hover{ background-color : @blue };
+  &.purpleLight:hover{ background-color : @purpleLight };
+  &.purple:hover{ background-color : @purple };
+  &.steelLight:hover{ background-color : @steelLight };
+  &.steel:hover{ background-color : @steel };
+  &.yellowLight:hover{ background-color : @yellowLight };
+  &.yellow:hover{ background-color : @yellow };
+  &.orangeLight:hover{ background-color : @orangeLight };
+  &.orange:hover{ background-color : @orange };
+  &.redLight:hover{ background-color : @redLight };
+  &.red:hover{ background-color : @red };
+  &.silverLight:hover{ background-color : @silverLight };
+  &.silver:hover{ background-color : @silver };
+  &.greyLight:hover{ background-color : @greyLight };
+  &.grey:hover{ background-color : @grey };
+}

tests/basic.test.js

@@ -1,7 +0,0 @@
-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

@@ -0,0 +1,15 @@
+/* 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

@@ -0,0 +1,128 @@
+/* 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

@@ -0,0 +1,27 @@
+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);
+	});
+
+	it('robots.txt works', ()=>{
+		return app.get('/robots.txt').expect(200);
+	});
+});

tests/test.init.js

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

themes/5ePhbLegacy.style.less

@@ -63,7 +63,7 @@ body {
 	// *****************************/
 	p{
 		padding-bottom : 0.8em;
-		line-height    : 1.3em;
+		line-height    : 1.269em;
 		&+p{
 			margin-top : -0.8em;
 		}
@@ -71,14 +71,14 @@ body {
 	ul{
 		margin-bottom       : 0.8em;
 		padding-left        : 1.4em;
-		line-height         : 1.3em;
+		line-height         : 1.269em;
 		list-style-position : outside;
 		list-style-type     : disc;
 	}
 	ol{
 		margin-bottom       : 0.8em;
 		padding-left        : 1.4em;
-		line-height         : 1.3em;
+		line-height         : 1.269em;
 		list-style-position : outside;
 		list-style-type     : decimal;
 	}
@@ -126,7 +126,7 @@ body {
 			font-family : Solberry;
 			font-size   : 10em;
 			color       : #222;
-			line-height : 0.8em;
+			line-height : 0.795em;
 		}
 	}
 	h2{
@@ -191,7 +191,7 @@ body {
 		box-shadow          : 1px 4px 14px #888;
 		p, ul{
 			font-size   : 0.352cm;
-			line-height : 1.1em;
+			line-height : 1.083em;
 		}
 	}
 	//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.3em;
+		line-height : 1.263em;
 	}
 	ul{
 		margin-bottom               : 0.5em;
@@ -425,7 +425,7 @@ body {
 	p{
 		display        : block;
 		padding-bottom : 0px;
-		line-height    : 1.5em;
+		line-height    : 1.47em;
 	}
 	p + p {
 		padding-top : .8em;
@@ -457,7 +457,7 @@ body {
 		p, p + p {
 			margin      : unset;
 			text-indent : unset;
-			line-height : 1em;
+			line-height : 0.941em;
 		}
 	 	h5 {
 			font-size   : 1.3em;

themes/assets/discordOfManyThings.svg

@@ -0,0 +1 @@
+<svg id="Layer_3" data-name="Layer 3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350.028 390.552"><defs><style>.cls-1{opacity:0.9;}.cls-2{fill:#001013;}.cls-3{fill:#fff;}.cls-4{fill:#aa2a29;}</style></defs><title>Discord of Many Things blank</title><g class="cls-1"><path d="M100.991,82.743c-1.649,3.324-3.395,5.768-4.1,8.482-1.49,5.753-3.44,11.644-3.455,17.482q-.332,125.259-.141,250.519c.007,20.122,12.708,36.368,31.407,40.239a38.328,38.328,0,0,0,7.722.761q103.611,0,207.222-.088h6.314c-3.256-11.462-9.664-34.015-9.664-34.015l2.431,2.023s41.561,37.755,62.33,56.6c2.489,2.26,3.694,4.462,3.593,7.885-.241,8.186-.078,16.383-.078,25.492-6.333-5.527-11.928-10.35-17.457-15.247-9.586-8.493-19.2-16.957-28.644-25.6a10.032,10.032,0,0,0-7.39-2.774q-117.228-.1-234.457-.334c-20.632-.031-33.959-9.189-41.021-28.578-.852-2.339-.783-5.091-.784-7.653q-.057-116.5-.031-233.007V119.145C74.791,102.517,84.2,89.068,100.991,82.743Z" transform="translate(-74.79 -67.573)"/></g><path class="cls-2" d="M338.234,371.589s5.556,19.924,8.513,30.53h-5.075c-69.335,0-138.67-.1-208,.074-16.925.043-35.116-9.515-40.505-33.247a26.538,26.538,0,0,1-.379-5.827q-.027-128.172.025-256.344c.021-19.276,15.226-36.749,34.427-38.688a82.669,82.669,0,0,1,8.279-.447q123.288-.034,246.578-.067c13.265-.016,24.7,3.79,33.278,14.235a39.273,39.273,0,0,1,9.447,25.5q-.015,167.477-.012,334.955c0,1.245-.1,2.49-.2,4.645-4.075-3.565-7.6-6.552-11.018-9.655q-35.236-31.992-70.44-64.017c-1.2-1.091-3.713-3.147-3.713-3.147l-2-1.775Z" transform="translate(-74.79 -67.573)"/><path class="cls-3" d="M419.838,435.934c-7.848-6.892-15.026-12.977-21.961-19.329q-28.235-25.86-56.253-51.954c-2.314-2.157-4.59-3.247-7.356-1.784-3.036,1.607-2.77,4.676-2.022,7.359,2.286,8.2,4.817,16.338,7.24,24.5a17.108,17.108,0,0,1,.294,1.851c-1.486.084-2.872.233-4.258.233-67.363.012-134.726-.155-202.088.123-18.267.075-32.955-13.095-34.769-29.353a92.257,92.257,0,0,1-.886-10.108Q97.7,233.488,97.793,109.5c.013-10.518,3.19-20.063,11.156-27.471a31.92,31.92,0,0,1,20.439-8.917c1.948-.109,3.9-.181,5.852-.181q123.5-.014,247-.063c9.957-.012,18.894,2.145,26.329,9.1,7.956,7.441,11.177,16.934,11.214,27.457.142,40.84.057,81.681.057,122.522V435.934Z" transform="translate(-74.79 -67.573)"/><path class="cls-4" d="M311.029,170.975c-11.8,45.005-23.315,88.959-35.123,134.016l-97.168-98.883Z" transform="translate(-74.79 -67.573)"/><path class="cls-4" d="M380.8,265.712l-95.97,40.316c11.438-43.808,22.639-86.709,33.839-129.609l1.08-.272Z" transform="translate(-74.79 -67.573)"/><path class="cls-4" d="M165.3,322.955c2.91-36.463,5.761-72.179,8.709-109.116l94.711,96.472Z" transform="translate(-74.79 -67.573)"/><path class="cls-4" d="M223.458,107.926l83.127,55.063L178.71,196.919Z" transform="translate(-74.79 -67.573)"/><path class="cls-4" d="M366.285,281.366l-72.5,73.414c-3.524-13.182-6.849-25.617-10.306-38.549Z" transform="translate(-74.79 -67.573)"/><path class="cls-4" d="M274.874,318.478c3.445,12.8,6.765,25.143,10.376,38.559l-98.635-26.556.032-1.153Z" transform="translate(-74.79 -67.573)"/><path class="cls-4" d="M374.888,241.261l-51.71-75.57,26.8-21.529,25.831,96.619Z" transform="translate(-74.79 -67.573)"/><path class="cls-4" d="M165.492,207.523c-2.39,30.748-4.736,60.942-7.083,91.135l-1.063.159c-8.5-31.936-17-63.872-25.705-96.581Z" transform="translate(-74.79 -67.573)"/><path class="cls-4" d="M317.039,159.316l-68.251-45.24.307-.794,93.794,25.212Z" transform="translate(-74.79 -67.573)"/><path class="cls-4" d="M136.517,193.952,203.5,125.03l1.086.832L167.794,198.9Z" transform="translate(-74.79 -67.573)"/></svg>