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

Puts adjacent `term :: definition` s into the same `dl` block for easier spacing of sets of terms.

.eslintrc.js

@@ -32,7 +32,7 @@ module.exports = {
 			skipBlankLines : true,
 		}],
 		'max-depth'            : ['warn', { max: 4 }],
-		'max-params'           : ['warn', { max: 4 }],
+		'max-params'           : ['warn', { max: 5 }],
 		'no-restricted-syntax' : ['warn', 'ClassDeclaration', 'SwitchStatement'],
 		'no-unused-vars'       : ['warn', {
 			vars              : 'all',

.gitignore

@@ -6,7 +6,8 @@ storage
 *.log
 build/*
 config/local.*
+config/docker.*
 
-todo.md
-startDB.bat
-startMViewer.bat
+todo.md
+startDB.bat
+startMViewer.bat

changelog.md

@@ -1,11 +1,253 @@
-<style>
+```css
 h5 {
 	font-size: .35cm !important;
 }
-</style>
+
+.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 p + pre {
+	margin-top : 0.1cm;
+}
+```
 
 # changelog
 
+### Saturday, 11/09/2021 - v3.0.0
+
+We have been working on v3 for a *very* long time. We want to thank everyone for being paitent.
+
+
+Some features planned for V3 have actually been released over the recent months as part of V2, and some are still on the way. But at its core, V3 provides brand new Markdown-to-Brew rendering system, which was no simple task. This has opened up access to all sorts of bugfixes, tweaks, and potential for new features that just wouldn't be possible on the old system.
+
+***BE WARNED:*** As we continue to develop V3, expect small tweaks in the styling, fonts, and snippets; your brews may look slightly different from day-to-day; some things might break completely while we tackle any bugs in this early stage. All of your old documents will continue to work as normal. We are not touching them. If you don't want to deal With the possibility of slight formatting changes, you may choose to stick with the Legacy renderer on any of your brews for as long as you like. However, most new features added from now on will only be available for brews using the V3 renderer.
+
+Massive changelog incoming:
+
+#### Markdown+
+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. This should hopefully aid non-coders with readability, and also allows us a few tricks in the background to fix some old issues. 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*).
+
+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. Much of the syntax and styling has changed in V3, so code in one version may be broken in the other.
+
+Visit [this page](/v3_preview) for brief examples of the new syntax!
+
+#### Extended Markdown Syntax:
+
+{{taskList
+* [x] Add Divs and Spans for all your custom styling needs, via a simplified Markdown-like syntax:
+  ```
+  {{myDivClass,#myId,color:red
+  My Div content
+  }}
+
+  Hello {{mySpan,color:blue World}} !
+  ```
+
+  Fixes issues: [#348](https://github.com/naturalcrit/homebrewery/issues/348)
+}}
+
+\column
+
+{{taskList
+* [x] Add inline CSS to Markdown objects via "curly injection" syntax:
+  ```
+  Hello *world*{myClass,#id,color:red}
+  ```
+  Fixes issues: [#403](https://github.com/naturalcrit/homebrewery/issues/403)
+
+* [x] Rowspan, Colspan, and multiple header rows with extended table syntax:
+```
+| Header 1a | Header 1b | Header 1c |
+| Header 2a | Header 2b | Header 2c |
+|:---------:|:----------|:---------:|
+| Span 2 columns       || Span 2    |
+| one col   |  one col  | rows     ^|
+```
+  Fixes issues: [#773](https://github.com/naturalcrit/homebrewery/issues/773), [#191](https://github.com/naturalcrit/homebrewery/issues/191)
+
+* [x] Hanging indents via `<dl>` tags, as seen in the **PHB → Spell** snippet. Add via "double-colon" syntax:
+```
+Term :: big long definition that bleeds onto multiple lines
+```
+  Fixes issues: [#182](https://github.com/naturalcrit/homebrewery/issues/182), [#149](https://github.com/naturalcrit/homebrewery/issues/149)
+
+* [x] Easier vertical spacing via colons alone on a line:
+  ```
+   :::
+  ```
+  Fixes issues: [#374](https://github.com/naturalcrit/homebrewery/issues/374)
+
+* [x] Avoid paragraph indendation by ending the previous paragraph with a backslash `\` or two spaces `  `
+  ```
+  Paragraph one\
+  Paragraph two
+  ```
+  Fixes issues: [#636](https://github.com/naturalcrit/homebrewery/issues/636)
+
+* [x] Code blocks can be inserted by surrounding it with rows of three backticks ` ``` `, for demonstration purposes or to share custom styles. Inline-code can be inserted with single backticks <code>&#96;code&#96;</code>
+ <pre><code>&#96;&#96;&#96;
+ Here is some code!
+&#96;&#96;&#96;
+</code></pre>
+
+  Fixes issues: [#465](https://github.com/naturalcrit/homebrewery/issues/465)
+
+#### New and Fixed Snippets
+
+* [x] Column breaks now use `\column` instead of ` ``` ` backticks.
+
+  Fixes issues: [#607](https://github.com/naturalcrit/homebrewery/issues/607)
+
+* [x] Page breaks using `\page` now only trigger when placed alone at the start of a line.
+
+  Fixes issues: [#1147](https://github.com/naturalcrit/homebrewery/issues/1147)
+}}
+
+\page
+{{taskList
+* [x] New **EDITOR → QR Code** snippet.
+
+  Fixes issues: [#538](https://github.com/naturalcrit/homebrewery/issues/538)
+
+* [x] New **IMAGES → Watercolor Splatter** snippet, which adds one of a range of stylish stains to your brew.
+
+* [x] New **IMAGES → Watermark** snippet, which adds transparent text diagonally across the page.
+
+* [x] New **PHB → Magic Item** snippet.
+
+  Fixes issues: [#671](https://github.com/naturalcrit/homebrewery/issues/671)
+
+* [x] New **TABLES → 1/3 Class Table** snippet for 1/3 casters.
+
+  Fixes issues: [#191](https://github.com/naturalcrit/homebrewery/issues/191)
+
+* [x] Improved **EDITOR → Table of Contents** snippet to actually look like the PHB style. Will auto-generate based on the headers in your brew.
+
+  Fixes issues: [#304](https://github.com/naturalcrit/homebrewery/issues/304)
+
+* [x] Improved **PHB → Monster Stat Block** snippet with textures, and an option to remove the frame entirely.
+
+* [x] Improved **PHB → Spell List** snippet can now be made single-column.
+
+  Fixes issues: [#509](https://github.com/naturalcrit/homebrewery/issues/509), [#914](https://github.com/naturalcrit/homebrewery/issues/914)
+
+* [x] Improved **TABLES → Class Table** snippet is now cleaned up, has an option to remove the frame entirely, and includes additional boundary decorations.
+
+  Fixes issues: [#773](https://github.com/naturalcrit/homebrewery/issues/773), [#302](https://github.com/naturalcrit/homebrewery/issues/302)
+
+#### Miscellaneous Formatting Fixes
+
+* [x] Paragraphs are now able to split across columns.
+
+  Fixes issues: [#239](https://github.com/naturalcrit/homebrewery/issues/239)
+
+* [x] Multiple fixes for bold/italicize using asterisks `* *`
+
+  Fixes issues: [#1321](https://github.com/naturalcrit/homebrewery/issues/1321), [#852](https://github.com/naturalcrit/homebrewery/issues/852)
+
+* [x] Multiple for list items not displaying correctly.
+
+  Fixes issues: [#1085](https://github.com/naturalcrit/homebrewery/issues/1085), [#588](https://github.com/naturalcrit/homebrewery/issues/588)
+
+* [x] "Smart quotes", so left and right quotes are different.
+
+  Fixes issues: [#849](https://github.com/naturalcrit/homebrewery/issues/849)
+
+* [x] Long URLs in links now wrap properly.
+
+  Fixes issues: [#1136](https://github.com/naturalcrit/homebrewery/issues/1136)
+
+* [x] Better support for `wide` blocks that span across the whole page! No more problems with contents getting shunted off the edge, and each new wide element in a page will restart the next item back at column one. Manual `\column` breaks will help organize subsequent content between the columns as needed.
+
+  Fixes issues: [#144](https://github.com/naturalcrit/homebrewery/issues/144), [#1024](https://github.com/naturalcrit/homebrewery/issues/1024)
+
+* [x] Fonts now support a wider range of latin characters for non-English brews, including áéíóúñ¡¿, etc...
+
+  Fixes issues: [#116](https://github.com/naturalcrit/homebrewery/issues/116)
+
+* [x] Drop-caps (fancy first letters) have been re-styled and re-aligned to correct the ugly overlapping and cut-off on some characters like K and Y.
+
+  Fixes issues: [#848](https://github.com/naturalcrit/homebrewery/issues/848)
+}}
+
+\column
+
+### Under-the-Hood Stuff
+We had to make a whole lot of background upgrades and changes to get all of this working, and now that the framework is in place, there's a lot more planned and upcoming *"sometime"* :
+
+{{taskList
+* [ ] New Themes to style your brews. DMG, MM, a custom Homebrewery theme, and others.
+* [ ] The ability to build your own custom themes using CSS, apply it to other brews, and share it with others!
+* [ ] Easy control of item colors. Change your monster blocks, tables, and notes from yellow to green to red!
+* [ ] New image-based snippets, including handwritten notes, title illustrations, and alternative decorations.
+* [ ] New fun fonts like Elvish, Draconic, Orcish, etc.
+* [ ] Better organization of personal brews using tags.
+* [ ] ....a log-out button...?
+* [ ] AND MORE.
+}}
+
+### Interface
+::
+#### 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.
+
+
+
+\page
+### Thursday, 09/09/2021 - v2.13.5
+- Slightly better error logging and messages for users.
+
+##### G-Ambatte :
+- Added a search bar to the User page to help find your brews.
+- Added page counts to brews in the User page; page count will be updated the next time a brew is edited.
+- Fixed edge case where view counts could get reset.
+- Fixed edge case where last-modified time was not accurate for Google Doc brews.
+
+##### Gazook89 :
+- Fixed typo in the **PRINT → Ink-Friendly** snippet.
+
+
+
+### Tuesday, 17/08/2021 - v2.13.4
+- Fixed User page crashing when user has an untitled brew
+
+##### G-Ambatte:
+- Tweaks to user page tool tips
+- Fix view counts being reset on Google Drive files
+
+##### Gazook89 :
+- New **PHB → Artist Credit** snippet
+- **PRINT** snippets moved to the **Style Editor** tab
+
+### Monday, 09/08/2021 - v2.13.3
+
+##### G-Ambatte :
+- Tooltips hovering over brews in dropdowns / user page.
+- Fixed sort-by created date on user page.
+
+##### Gazook89 :
+- Hotkey Ctrl-/ and snippets to add HTML comments; use for notes that won't appear in your brew.
+
 ### Friday, 30/07/2021 - v2.13.2
 
 - Background work to allow new themes in the future
@@ -39,7 +281,6 @@ myStyle {color: black}
 - Pasting your brew into a "New" page and saving will transfer any CSS in the code fence to the Style tab.
 - Unsaved work in the New page Style tab is now cached to your browser storage if you navigate away.
 
-
 ### Thursday, 10/6/2021 - v2.12.0
 
 - New "style" tab to better organize custom CSS in preparation for new themes and sharable styles.
@@ -50,6 +291,8 @@ myStyle {color: black}
 - Fix for edge case where brews could accidentally transfer from Google Drive back to Homebrewery.
 - Move cursor to end of snippet after insertion
 
+\page
+
 ### Saturday, 20/3/2021 - v2.11.1
 
 - Warning when opening brew in your Google Drive trash
@@ -57,9 +300,6 @@ myStyle {color: black}
 ##### G-Ambatte :
 - Snippet to remove drop caps (fancy first letter after title)
 
-```
-```
-
 ### Saturday, 13/3/2021 - v2.11.0
 
 - Many background things for upcoming v3. Get pumped.
@@ -93,6 +333,8 @@ myStyle {color: black}
 ### Wednesday, 25/11/2020 - v2.10.4
 - Fixed Google Drive brews not saving metadata (view count, description, etc.) Note that we are still working on making published Google brews visible to the public when viewing your profile page.
 
+\column
+
 ### Thursday, 22/10/2020 - v2.10.3
 - Fixed brews with broken code crashing the edit page when loaded (the "blue screen of death" bug).
 
@@ -103,8 +345,6 @@ myStyle {color: black}
 - Fixed issue with users unable to create new brews
 - Fixing brews being lost when loaded via back button
 
-\page
-
 ### Wednesday, 07/10/2020 - v2.10.0
 - Google Drive integration -- Sign in with your Google account to link it with your Homebrewery profile. A new button in the Edit page will let you transfer your file to your personal Google Drive storage, and Google will keep a backup of each version! No more lost work surprises!
 
@@ -134,8 +374,10 @@ myStyle {color: black}
 - "Report Issue" navbar button now links to the subreddit
 - Refactored background code
 
+\page
+
 ### Sunday, 04/06/2017 - v2.7.5
-- Fixed the class feature snippet duplicating the entire brew
+- Fixed Class Feature snippet duplicating entire brew
 - Fixed headers in tables being duplicated
 - Fixed border-image being scrambled on class tables and descriptive text boxes
 - Fixed pages going out of sync in large brews, causing them to be rendered off-page
@@ -161,7 +403,7 @@ myStyle {color: black}
 
 ### Sunday, 25/12/2016 - v2.7.0
 - Switching over to using Vitreum v4
-  - Removed gulp, all tasks are run through npm scripts
+- Removed gulp, all tasks are run through npm scripts
 - Updating docs for local dev
 - Removing support for Docker. I have never used it, nor will I ever test for it, so I don't want to continue to explictly support it on this repo. Feel free to make a fork and make it docker-able though :)
 - Changed icon for the metadata
@@ -171,6 +413,8 @@ myStyle {color: black}
 - Removed a lot of unused files in shared
 - vitreum v4 now lets me use codemirror as a pure node dependacy
 
+\column
+
 ### Saturday, 03/12/2016 - v2.6.0
 - Added report back to the edit page
 - Changed metaeditor icon
@@ -191,8 +435,6 @@ myStyle {color: black}
 - Added a hover tooltip to fully read the brew description
 - Made the brew items take up only 25% allowing you to view more per row.
 
-\page
-
 ### Wednesday, 23/11/2016 - v2.5.0
 - Metadata can now be added to brews
 - Added a metadata editor onto the edit and new pages
@@ -212,6 +454,8 @@ myStyle {color: black}
 - Added final touches to the html validator and updating the rest of the branch
 - If anyone finds issues with the new HTML validator, please let me know. I hope this will bring a more consistent feel to Homebrewery rendering.
 
+\page
+
 ### Friday, 09/09/2016 - v2.4.0
 - Adding in a HTML validator that will display warnings whenever you save. This should stop a lot of the issues generated with pages not showing up.
 
@@ -239,7 +483,7 @@ myStyle {color: black}
 - Even works after you print to pdf!
 
 ### Tuesday, 07/06/2016 - v2.2.2
-- Fixed bug with new markdown lexer and aprser not working on print page
+- Fixed bug with new markdown lexer and parser not working on print page
 
 ### Sunday, 05/06/2016 - v2.2.1
 - Adding in a new Class table div block. The old Class table block used weird stacking of HTML elements, resulting is difficult to control behaviour and poor interactiosn with the rest of the page. This new block is much easier to style and work with.
@@ -247,8 +491,10 @@ myStyle {color: black}
 - Added in a new auto-incremeting page number snippet (thakns u/Ryrok!)
 - Lists in monster stat blocks should be fixed now
 
+\column
+
 ### Saturday, 04/06/2016 - v2.2.0
-- MIgrating The Homebrewery over to hombrewery.naturalcrit.com. It know runs on it's own server, with it's own repo separate from the other tools I'm working on. Makes updating and deploying much easier.
+- Migrating The Homebrewery over to hombrewery.naturalcrit.com. It now runs on it's own server, with it's own repo separate from the other tools I'm working on. Makes updating and deploying much easier.
 
 ### Sunday, 29/05/2016 - v2.1.0
 - Finally added a syntax for doing spell lists. A bit in-depth about why this took so long. Essentially I'm running out of syntax to use in stardard Markdown. There are too many unique elements in the PHB-style to be mapped. I solved this earlier by stacking certain elements together (eg. an `<hr>` before a `blockquote` turns it into moster state block), but those are getting unweildly. I would like to simply wrap these in `div`s with classes, but unfortunately Markdown stops processing when within HTML blocks. To get around this I wrote my own override to the Markdown parser and lexer to process Markdown within a simple div class wrapper. This should open the door for more unique syntaxes in the future. Big step!

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -30,7 +30,7 @@ const BrewRenderer = createClass({
 		if(this.props.renderer == 'legacy') {
 			pages = this.props.text.split('\\page');
 		} else {
-			pages = this.props.text.split(/^\\page/gm);
+			pages = this.props.text.split(/^\\page$/gm);
 		}
 
 		return {
@@ -62,7 +62,7 @@ const BrewRenderer = createClass({
 			if(this.props.renderer == 'legacy') {
 				pages = this.props.text.split('\\page');
 			} else {
-				pages = this.props.text.split(/^\\page/gm);
+				pages = this.props.text.split(/^\\page$/gm);
 			}
 			this.setState({
 				pages  : pages,
@@ -130,8 +130,14 @@ const BrewRenderer = createClass({
 	renderPage : function(pageText, index){
 		if(this.props.renderer == 'legacy')
 			return <div className='phb page' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(pageText) }} key={index} />;
-		else
-			return <div className='phb3 page' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} key={index} />;
+		else {
+			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} >
+					<div className='columnWrapper' dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} />
+				</div>
+			);
+		}
 	},
 
 	renderPages : function(){

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -4,7 +4,7 @@ const createClass = require('create-react-class');
 const _     = require('lodash');
 const cx    = require('classnames');	//Unused variable
 
-const DISMISS_KEY = 'dismiss_notification7-10-20';
+const DISMISS_KEY = 'dismiss_notification09-9-21';
 
 const NotificationPopup = createClass({
 	getInitialState : function() {
@@ -22,22 +22,39 @@ const NotificationPopup = createClass({
 	notifications : {
 		psa : function(){
 			return <li key='psa'>
-				<em>Google Drive Integration!</em> <br />
-				We have added Google Drive integration to the Homebrewery! <a target='_blank' href='https://www.naturalcrit.com/login'>Sign in</a> with
-				your Google account to link it with your Homebrewery profile. A new button in the Edit page will let you transfer your file to your personal
-				Google Drive storage, and Google will keep a backup of each version! No more lost work surprises!
+				<em>V3.0.0 Released!</em> <br />
+				After a long and bumpy road, we decided it was high time we finally release version 3 of the homebrewery into the wild. You can check out a
+				brief overview and see how to opt-in to the new features here:&nbsp;
+				<a target='_blank' href='https://homebrewery.naturalcrit.com/v3_preview'>V3 Welcome Page</a> and&nbsp;
+				<a target='_blank' href='https://homebrewery.naturalcrit.com/changelog'>the Changelog</a>.
 				<br /><br />
-				However, we are aware that there may be uncaught bugs. We encourage you to copy your brew into a text document before transferring to Google
-				Drive just in case any issues arise as this update is rolled out.
+				<em>BE WARNED:</em> As we continue to develop V3, expect small tweaks in the styling, fonts, and snippets; your brews may look slightly
+				different from day-to-day. All of your old documents will continue to work as normal; we are not touching them. If you don't want to deal
+				with the possibility of slight formatting changes, you may choose to stick with the Legacy renderer on any of your brews for as long as you like.
 				<br /><br />
-				<b>Note:</b> Transferring an existing brew to Google Drive will change the edit and share links of your document. If you have shared your
-				document online, remember to update the links there as well.
+				With this in mind, if you still wish to try out V3, you can opt-in any of your brews to the the V3 renderer.
+				This will likely break much of your formatting as a lot of the Markdown code has been updated, and starting from scratch may be cleaner.
+				(Don't worry, you can always change the renderer back to Legacy	for any brew at any time).
+			</li>;
+		},
+		refreshGoogle : function (){
+			return <li key='refreshGoogle'>
+				<em>Refresh your Google Drive Credentials!</em> <br />
+				Currently a lot of people are striking issues with their Google credentials expiring, which happens one year after the last sign in via
+				Google. This can cause errors when trying to save your brews. If this happens, simply visit the&nbsp;
+				<a target='_blank' href='https://www.naturalcrit.com/login'>
+				logout page
+				</a>
+				, sign out, and then sign	back in "with Google" to refresh your credentials. See&nbsp;
+				<a target='_blank' href='https://github.com/naturalcrit/homebrewery/discussions/1580'>
+					this discussion on Github
+				</a> for more details.
 			</li>;
 		},
 		faq : function(){
 			return <li key='faq'>
 				<em>Protect your work! </em> <br />
-				If you opt not to use your Google Drive, keep in mind that we do not save a history of your projects. Please make frequent backups of your brews!  &nbsp;
+				If you opt not to use your Google Drive, keep in mind that we do not save a history of your projects. Please make frequent backups of your brews!&nbsp;
 				<a target='_blank' href='https://www.reddit.com/r/homebrewery/comments/adh6lh/faqs_psas_announcements/'>
 					See the FAQ
 				</a> to learn how to avoid losing your work!
@@ -62,8 +79,10 @@ const NotificationPopup = createClass({
 		return <div className='notificationPopup'>
 			<i className='fas fa-times dismiss' onClick={this.dismiss}/>
 			<i className='fas fa-info-circle info' />
-			<h3>Notice</h3>
-			<small>This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind:</small>
+			<div className='header'>
+				<h3>Notice</h3>
+				<small>This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind:</small>
+			</div>
 			<ul>{_.values(this.state.notifications)}</ul>
 		</div>;
 	}

client/homebrew/brewRenderer/notificationPopup/notificationPopup.less

@@ -1,23 +1,22 @@
 .popups{
 	position         : fixed;
-	top				 : @navbarHeight;
+	top              : @navbarHeight;
 	right            : 15px;
 	z-index          : 10001;
-	width            : 350px;
+	width            : 450px;
 }
 
 .notificationPopup{
-	position		 : relative;
-	float			 : right;
+	position         : relative;
 	display          : inline-block;
-	width            : 350px;
+	width            : 100%;
 	padding          : 15px;
 	padding-bottom   : 10px;
-	padding-left     : 55px;
+	padding-left     : 25px;
 	background-color : @blue;
 	color            : white;
 	a{
-		color       : @steel;
+		color       : #e0e5c1;
 		font-weight : 800;
 	}
 	i.info{
@@ -37,6 +36,9 @@
 			opacity : 1;
 		}
 	}
+	.header {
+		padding-left : 50px;
+	}
 	small{
 		opacity   : 0.7;
 		font-size : 0.6em;

client/homebrew/editor/editor.jsx

@@ -68,15 +68,18 @@ const Editor = createClass({
 	},
 
 	handleInject : function(injectText){
-		const text = (this.isText() ? this.props.brew.text : this.props.brew.style);
+		let text;
+		if(this.isText())  text = this.props.brew.text;
+		if(this.isStyle()) text = this.props.brew.style ?? DEFAULT_STYLE_TEXT;
 
 		const lines = text.split('\n');
 		const cursorPos = this.refs.codeEditor.getCursorPosition();
 		lines[cursorPos.line] = splice(lines[cursorPos.line], cursorPos.ch, injectText);
 
-		this.refs.codeEditor.setCursorPosition(cursorPos.line + injectText.split('\n').length, cursorPos.ch  + injectText.length);
+		const injectLines = injectText.split('\n');
+		this.refs.codeEditor.setCursorPosition(cursorPos.line + injectLines.length, cursorPos.ch  + injectLines[injectLines.length - 1].length);
 
-		if(this.isText()) this.props.onTextChange(lines.join('\n'));
+		if(this.isText())  this.props.onTextChange(lines.join('\n'));
 		if(this.isStyle()) this.props.onStyleChange(lines.join('\n'));
 	},
 
@@ -119,7 +122,7 @@ const Editor = createClass({
 
 				// New Codemirror styling for V3 renderer
 				if(this.props.renderer == 'V3') {
-					if(line.startsWith('\\page')){
+					if(line.match(/^\\page$/)){
 						codeMirror.addLineClass(lineNumber, 'background', 'pageLine');
 						r.push(lineNumber);
 					}

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -167,6 +167,10 @@ const MetadataEditor = createClass({
 						onChange={(e)=>this.handleRenderer('V3', e)} />
 					V3
 				</label>
+
+				<a href='/v3_preview' target='_blank' rel='noopener noreferrer'>
+					Click here for a quick intro to V3!
+				</a>
 			</div>
 		</div>;
 	},

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -43,6 +43,11 @@
 			display        : inline-flex;
 			align-items    : center;
 		}
+		a {
+			font-size   : 0.7em;
+			font-weight : 800;
+			display     : inline-flex;
+		}
 		input{
 			vertical-align : middle;
 			cursor         : pointer;
@@ -62,9 +67,6 @@
 			.button(@silver);
 		}
 		small{
-			position   : absolute;
-			bottom     : -15px;
-			left       : 0px;
 			font-size  : 0.6em;
 			font-style : italic;
 		}

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -39,12 +39,10 @@ const Snippetbar = createClass({
 	renderSnippetGroups : function(){
 		let snippets = [];
 
-		if(this.props.view === 'text') {
-			if(this.props.renderer === 'V3')
-				snippets = SnippetsV3;
-			else
-				snippets = SnippetsLegacy;
-		}
+		if(this.props.renderer === 'V3')
+			snippets = SnippetsV3.filter((snippetGroup)=>snippetGroup.view === this.props.view);
+		else
+			snippets = SnippetsLegacy.filter((snippetGroup)=>snippetGroup.view === this.props.view);
 
 		return _.map(snippets, (snippetGroup)=>{
 			return <SnippetGroup

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

@@ -1,4 +1,5 @@
 const _ = require('lodash');
+const dedent = require('dedent-tabs').default;
 
 module.exports = function(classname){
 
@@ -10,33 +11,32 @@ module.exports = function(classname){
 	const hitDie = _.sample([4, 6, 8, 10, 12]);
 
 	const abilityList = ['Strength', 'Dexerity', 'Constitution', 'Wisdom', 'Charisma', 'Intelligence'];
-	const skillList = ['Acrobatics ', 'Animal Handling', 'Arcana', 'Athletics', 'Deception', 'History', 'Insight', 'Intimidation', 'Investigation', 'Medicine', 'Nature', 'Perception', 'Performance', 'Persuasion', 'Religion', 'Sleight of Hand', 'Stealth', 'Survival'];
+	const skillList = ['Acrobatics', 'Animal Handling', 'Arcana', 'Athletics', 'Deception', 'History', 'Insight', 'Intimidation', 'Investigation', 'Medicine', 'Nature', 'Perception', 'Performance', 'Persuasion', 'Religion', 'Sleight of Hand', 'Stealth', 'Survival'];
 
 
-	return [
-		'## Class Features',
-		`As a ${classname}, you gain the following class features`,
-		'#### Hit Points',
-		'___',
-		`- **Hit Dice:** 1d${hitDie} per ${classname} level`,
-		`- **Hit Points at 1st Level:** ${hitDie} + your Constitution modifier`,
-		`- **Hit Points at Higher Levels:** 1d${hitDie} (or ${hitDie/2 + 1}) + your Constitution modifier per ${classname} level after 1st`,
-		'',
-		'#### Proficiencies',
-		'___',
-		`- **Armor:** ${_.sampleSize(['Light armor', 'Medium armor', 'Heavy armor', 'Shields'], _.random(0, 3)).join(', ') || 'None'}`,
-		`- **Weapons:** ${_.sampleSize(['Squeegee', 'Rubber Chicken', 'Simple weapons', 'Martial weapons'], _.random(0, 2)).join(', ') || 'None'}`,
-		`- **Tools:** ${_.sampleSize(['Artian\'s tools', 'one musical instrument', 'Thieve\'s tools'], _.random(0, 2)).join(', ') || 'None'}`,
-		'',
-		'___',
-		`- **Saving Throws:** ${_.sampleSize(abilityList, 2).join(', ')}`,
-		`- **Skills:** Choose two from ${_.sampleSize(skillList, _.random(4, 6)).join(', ')}`,
-		'',
-		'#### Equipment',
-		'You start with the following equipment, in addition to the equipment granted by your background:',
-		'- *(a)* a martial weapon and a shield or *(b)* two martial weapons',
-		'- *(a)* five javelins or *(b)* any simple melee weapon',
-		`- ${_.sample(['10 lint fluffs', '1 button', 'a cherished lost sock'])}`,
-		'\n\n\n'
-	].join('\n');
+	return dedent`
+		## Class Features
+		As a ${classname}, you gain the following class features
+		#### Hit Points
+
+		**Hit Dice:**                    :: 1d${hitDie} per ${classname} level
+		**Hit Points at 1st Level:**     :: ${hitDie} + your Constitution modifier
+		**Hit Points at Higher Levels:** :: 1d${hitDie} (or ${hitDie/2 + 1}) + your Constitution modifier per ${classname} level after 1st
+
+		#### Proficiencies
+
+		**Armor:**   :: ${_.sampleSize(['Light armor', 'Medium armor', 'Heavy armor', 'Shields'], _.random(0, 3)).join(', ') || 'None'}
+		**Weapons:** :: ${_.sampleSize(['Squeegee', 'Rubber Chicken', 'Simple weapons', 'Martial weapons'], _.random(0, 2)).join(', ') || 'None'}
+		**Tools:**   :: ${_.sampleSize(['Artian\'s tools', 'one musical instrument', 'Thieve\'s tools'], _.random(0, 2)).join(', ') || 'None'}
+
+		**Saving Throws:** :: ${_.sampleSize(abilityList, 2).join(', ')}
+		**Skills:**        :: Choose two from ${_.sampleSize(skillList, _.random(4, 6)).join(', ')}
+
+		#### Equipment
+		You start with the following equipment, in addition to the equipment granted by your background:
+		- *(a)* a martial weapon and a shield or *(b)* two martial weapons
+		- *(a)* five javelins or *(b)* any simple melee weapon
+		- ${_.sample(['10 lint fluffs', '1 button', 'a cherished lost sock'])}
+
+		`;
 };

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

@@ -2,85 +2,77 @@ const _ = require('lodash');
 
 const features = [
 	'Astrological Botany',
-	'Astrological Chemistry',
 	'Biochemical Sorcery',
-	'Civil Alchemy',
-	'Consecrated Biochemistry',
+	'Civil Divination',
+	'Consecrated Augury',
 	'Demonic Anthropology',
 	'Divinatory Mineralogy',
-	'Genetic Banishing',
-	'Hermetic Geography',
-	'Immunological Incantations',
-	'Nuclear Illusionism',
-	'Ritual Astronomy',
-	'Seismological Divination',
-	'Spiritual Biochemistry',
-	'Statistical Occultism',
-	'Police Necromancer',
-	'Sixgun Poisoner',
-	'Pharmaceutical Gunslinger',
-	'Infernal Banker',
-	'Spell Analyst',
-	'Gunslinger Corruptor',
-	'Torque Interfacer',
 	'Exo Interfacer',
+	'Genetic Banishing',
 	'Gunpowder Torturer',
-	'Orbital Gravedigger',
-	'Phased Linguist',
-	'Mathematical Pharmacist',
-	'Plasma Outlaw',
+	'Gunslinger Corruptor',
+	'Hermetic Geography',
+	'Immunological Cultist',
 	'Malefic Chemist',
-	'Police Cultist'
+	'Mathematical Pharmacy',
+	'Nuclear Biochemistry',
+	'Orbital Gravedigger',
+	'Pharmaceutical Outlaw',
+	'Phased Linguist',
+	'Plasma Gunslinger',
+	'Police Necromancer',
+	'Ritual Astronomy',
+	'Sixgun Poisoner',
+	'Seismological Alchemy',
+	'Spiritual Illusionism',
+	'Statistical Occultism',
+	'Spell Analyst',
+	'Torque Interfacer'
 ];
 
-const classnames = ['Archivist', 'Fancyman', 'Linguist', 'Fletcher',
-	'Notary', 'Berserker-Typist', 'Fishmongerer', 'Manicurist', 'Haberdasher', 'Concierge'];
+const classnames = ['Ackerman', 'Berserker-Typist', 'Concierge', 'Fishmonger',
+	                  'Haberdasher', 'Manicurist', 'Netrunner', 'Weirkeeper'];
 
-const levels = ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th', '8th', '9th', '10th', '11th', '12th', '13th', '14th', '15th', '16th', '17th', '18th', '19th', '20th'];
+const levels = ['1st', '2nd', '3rd', '4th', '5th',
+              	'6th', '7th', '8th', '9th', '10th',
+	              '11th', '12th', '13th', '14th', '15th',
+              	'16th', '17th', '18th', '19th', '20th'];
 
 const profBonus = [2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 6, 6, 6, 6];
 
-const getFeature = (level)=>{
-	let res = [];
-	if(_.includes([4, 6, 8, 12, 14, 16, 19], level+1)){
-		res = ['Ability Score Improvement'];
-	}
-	res = _.union(res, _.sampleSize(features, _.sample([0, 1, 1, 1, 1, 1])));
-	if(!res.length) return '─';
-	return res.join(', ');
+const maxes = [4, 3, 3, 3, 3, 2, 2, 1, 1];
+
+const drawSlots = function(Slots, rows, padding){
+	let slots = Number(Slots);
+	return _.times(rows, function(i){
+		const max = maxes[i];
+		if(slots < 1) return _.pad('—', padding);
+		const res = _.min([max, slots]);
+		slots -= res;
+		return _.pad(res.toString(), padding);
+	}).join(' | ');
 };
 
 module.exports = {
-	full : function(){
+	full : function(classes){
 		const classname = _.sample(classnames);
 
-		const maxes = [4, 3, 3, 3, 3, 2, 2, 1, 1];
-		const drawSlots = function(Slots){
-			let slots = Number(Slots);
-			return _.times(9, function(i){
-				const max = maxes[i];
-				if(slots < 1) return '—';
-				const res = _.min([max, slots]);
-				slots -= res;
-				return res;
-			}).join(' | ');
-		};
-
 
 		let cantrips = 3;
 		let spells = 1;
 		let slots = 2;
-		return `<div class='classTable wide'>\n##### The ${classname}\n` +
-		`| Level | Proficiency Bonus | Features | Cantrips Known | Spells Known | 1st | 2nd | 3rd | 4th | 5th | 6th | 7th | 8th | 9th |\n`+
-		`|:---:|:---:|:---|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|\n${
+		return `{{${classes}\n##### The ${classname}\n` +
+		`| Level | Proficiency | Features     | Cantrips | Spells | --- Spell Slots Per Spell Level ---|||||||||\n`+
+		`|      ^| Bonus      ^|             ^| Known   ^| Known ^|1st |2nd |3rd |4th |5th |6th |7th |8th |9th |\n`+
+		`|:-----:|:-----------:|:-------------|:--------:|:------:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|\n${
 			_.map(levels, function(levelName, level){
 				const res = [
-					levelName,
-					`+${profBonus[level]}`,
-					getFeature(level),
-					cantrips,
-					spells,
-					drawSlots(slots)
+					_.pad(levelName, 5),
+					_.pad(`+${profBonus[level]}`, 2),
+					_.padEnd(_.sample(features), 21),
+					_.pad(cantrips.toString(), 8),
+					_.pad(spells.toString(), 6),
+					drawSlots(slots, 9, 2),
 				].join(' | ');
 
 				cantrips += _.random(0, 1);
@@ -88,27 +80,53 @@ module.exports = {
 				slots += _.random(0, 2);
 
 				return `| ${res} |`;
-			}).join('\n')}\n</div>\n\n`;
+			}).join('\n')}\n}}\n\n`;
 	},
 
-	half : function(){
+	half : function(classes){
 		const classname =  _.sample(classnames);
 
 		let featureScore = 1;
-		return `<div class='classTable'>\n##### The ${classname}\n` +
-		`| Level | Proficiency Bonus | Features | ${_.sample(features)}|\n` +
-		`|:---:|:---:|:---|:---:|\n${
+		return `{{${classes}\n##### The ${classname}\n` +
+		`| Level | Proficiency Bonus | Features | ${_.pad(_.sample(features), 21)} |\n` +
+		`|:-----:|:-----------------:|:---------|:---------------------:|\n${
 			_.map(levels, function(levelName, level){
 				const res = [
-					levelName,
-					`+${profBonus[level]}`,
-					getFeature(level),
-					`+${featureScore}`
+					_.pad(levelName, 5),
+					_.pad(`+${profBonus[level]}`, 2),
+					_.padEnd(_.sample(features), 23),
+					_.pad(`+${featureScore}`, 21),
 				].join(' | ');
 
 				featureScore += _.random(0, 1);
 
 				return `| ${res} |`;
-			}).join('\n')}\n</div>\n\n`;
+			}).join('\n')}\n}}\n\n`;
+	},
+
+	third : function(classes){
+		const classname = _.sample(classnames);
+
+		let cantrips = 3;
+		let spells = 1;
+		let slots = 2;
+		return `{{${classes}\n##### ${classname} Spellcasting\n` +
+		`| Class  | Cantrips | Spells  |--- Spells Slots per Spell Level ---||||\n` +
+		`| Level ^| Known   ^| Known  ^|   1st   |   2nd   |   3rd   |   4th   |\n` +
+		`|:------:|:--------:|:-------:|:-------:|:-------:|:-------:|:-------:|\n${
+			_.map(levels, function(levelName, level){
+				const res = [
+					_.pad(levelName, 6),
+					_.pad(cantrips.toString(), 8),
+					_.pad(spells.toString(), 7),
+					drawSlots(slots, 4, 7),
+				].join(' | ');
+
+				cantrips += _.random(0, 1);
+				spells += _.random(0, 1);
+				slots += _.random(0, 1);
+
+				return `| ${res} |`;
+			}).join('\n')}\n}}\n\n`;
 	}
 };

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

@@ -60,13 +60,13 @@ module.exports = {
 		const levels = ['Cantrips (0 Level)', '1st Level', '2nd Level', '3rd Level', '4th Level', '5th Level', '6th Level', '7th Level', '8th Level', '9th Level'];
 
 		const content = _.map(levels, (level)=>{
-			const spells = _.map(_.sampleSize(spellNames, _.random(5, 15)), (spell)=>{
+			const spells = _.map(_.sampleSize(spellNames, _.random(4, 10)), (spell)=>{
 				return `- ${spell}`;
 			}).join('\n');
 			return `##### ${level} \n${spells} \n`;
 		}).join('\n');
 
-		return `{{spellList\n${content}\n}}`;
+		return `{{spellList,wide\n${content}\n}}`;
 	},
 
 	spell : function(){

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

@@ -7,6 +7,7 @@ const ClassFeatureGen = require('./classfeature.gen.js');
 const CoverPageGen = require('./coverpage.gen.js');
 const TableOfContentsGen = require('./tableOfContents.gen.js');
 const dedent = require('dedent-tabs').default;
+const watercolorGen = require('./watercolor.gen.js');
 
 
 module.exports = [
@@ -14,6 +15,7 @@ module.exports = [
 	{
 		groupName : 'Editor',
 		icon      : 'fas fa-pencil-alt',
+		view      : 'text',
 		snippets  : [
 			{
 				name : 'Column Break',
@@ -42,23 +44,11 @@ module.exports = [
 					{{wide
 					Everything in here will be extra wide. Tables, text, everything!
 					Beware though, CSS columns can behave a bit weird sometimes. You may
-					have to rely on the automatic column-break rather than \`\column\` if
-					you mix columns and wide blocks on the same page.
+					have to manually place column breaks with \`\column\` to make the
+					surrounding text flow with this wide block the way you want.
 					}}
 					\n`
 			},
-			{
-				name : 'Image',
-				icon : 'fas fa-image',
-				gen  : dedent`
-					![cat warrior](https://s-media-cache-ak0.pinimg.com/736x/4a/81/79/4a8179462cfdf39054a418efd4cb743e.jpg) {width:325px}
-					Credit: Kyounghwan Kim`
-			},
-			{
-				name : 'Background Image',
-				icon : 'fas fa-tree',
-				gen  : `![homebrew mug](http://i.imgur.com/hMna6G0.png) {position:absolute,top:50px,right:30px,width:280px}`
-			},
 			{
 				name : 'QR Code',
 				icon : 'fas fa-qrcode',
@@ -68,7 +58,6 @@ module.exports = [
 							`https://homebrewery.naturalcrit.com/share/${brew.shareId}` +
 							`&size=100x100) {width:100px;mix-blend-mode:multiply}`;
 				}
-
 			},
 			{
 				name : 'Page Number',
@@ -113,6 +102,55 @@ module.exports = [
 						'  }\n' +
 						'</style>'
 			},
+			{
+				name : 'Add Comment',
+				icon : 'fas fa-code',  /* might need to be fa-solid fa-comment-code --not sure, Gazook */
+				gen  : dedent`\n
+					<!-- This is a comment that will not be rendered into your brew. Hotkey (Ctrl/Cmd + /). -->
+					`
+			},
+		]
+	},
+
+	/*********************** IMAGES *******************/
+	{
+		groupName : 'Images',
+		icon      : 'fas fa-images',
+		view      : 'text',
+		snippets  : [
+			{
+				name : 'Image',
+				icon : 'fas fa-image',
+				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
+					##### Cat Warrior
+					[Kyoung Hwan Kim](https://www.artstation.com/tahra)
+					}}`
+			},
+			{
+				name : 'Background Image',
+				icon : 'fas fa-tree',
+				gen  : dedent`
+					![homebrew mug](http://i.imgur.com/hMna6G0.png) {position:absolute,top:50px,right:30px,width:280px}
+
+					{{artist,top:90px,right:30px
+					##### Homebrew Mug
+					[naturalcrit](https://homebrew.naturalcrit.com)
+					}}`
+			},
+			{
+				name : 'Watercolor Splatter',
+				icon : 'fas fa-fill-drip',
+				gen  : watercolorGen,
+			},
+			{
+				name : 'Watermark',
+				icon : 'fas fa-id-card',
+				gen  : dedent`
+				{{watermark Homebrewery}}\n`
+			},
 		]
 	},
 
@@ -122,6 +160,7 @@ module.exports = [
 	{
 		groupName : 'PHB',
 		icon      : 'fas fa-book',
+		view      : 'text',
 		snippets  : [
 			{
 				name : 'Spell',
@@ -191,6 +230,18 @@ module.exports = [
 				icon : 'fas fa-hat-wizard',
 				gen  : MagicGen.item,
 			},
+			{
+				name : 'Artist Credit',
+				icon : 'fas fa-signature',
+				gen  : function(){
+					return dedent`
+						{{artist,top:90px,right:30px
+						##### Starry Night
+						[Van Gogh](https://www.vangoghmuseum.nl/en)
+						}}
+						\n`;
+				},
+			},
 		]
 	},
 
@@ -201,16 +252,37 @@ module.exports = [
 	{
 		groupName : 'Tables',
 		icon      : 'fas fa-table',
+		view      : 'text',
 		snippets  : [
 			{
 				name : 'Class Table',
 				icon : 'fas fa-table',
-				gen  : ClassTableGen.full,
+				gen  : ClassTableGen.full('classTable,frame,decoration,wide'),
 			},
 			{
-				name : 'Half Class Table',
+				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,
+				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',
@@ -278,33 +350,54 @@ module.exports = [
 
 
 
-	/**************** PRINT *************/
+	/**************** PAGE *************/
 
 	{
 		groupName : 'Print',
 		icon      : 'fas fa-print',
+		view      : 'style',
 		snippets  : [
 			{
-				name : 'A4 PageSize',
+				name : 'A4 Page Size',
 				icon : 'far fa-file',
-				gen  : ['<style>',
-					'  .phb{',
-					'    width : 210mm;',
-					'    height : 296.8mm;',
-					'  }',
-					'</style>'
+				gen  : ['/* A4 Page Size */',
+					'.page{',
+					'	width  : 210mm;',
+					'	height : 296.8mm;',
+					'}',
+					''
+				].join('\n')
+			},
+			{
+				name : 'Square Page Size',
+				icon : 'far fa-file',
+				gen  : ['/* Square Page Size */',
+					'.page {',
+					'	width   : 125mm;',
+					'	height  : 125mm;',
+					'	padding : 12.5mm;',
+					'	columns : unset;',
+					'}',
+					''
 				].join('\n')
 			},
 			{
 				name : 'Ink Friendly',
 				icon : 'fas fa-tint',
-				gen  : ['<style>',
-					'  .phb{ background : white;}',
-					'  .phb img{ display : none;}',
-					'  .phb hr+blockquote{background : white;}',
-					'</style>',
-					''
-				].join('\n')
+				gen  : dedent`
+					/* Ink Friendly */
+					.pages *:is(.page,.monster,.note,.descriptive) {
+						background : white !important;
+						box-shadow : 0px 0px 3px !important;
+					}
+
+					.page .note:before {
+						box-shadow : 0px 0px 3px;
+					}
+
+					.page img {
+						visibility : hidden;
+					}`
 			},
 		]
 	},

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

@@ -0,0 +1,5 @@
+const _ = require('lodash');
+
+module.exports = ()=>{
+	return `{{watercolor${_.random(1, 12)},top:20px,left:30px,width:300px,background-color:#BBAD82,opacity:80%}}\n\n`;
+};

client/homebrew/editor/snippetbar/snippetsLegacy/magic.gen.js

@@ -51,7 +51,7 @@ const spellNames = [
 module.exports = {
 
 	spellList : function(){
-		const levels = ['Cantrips (0 Level)', '2nd Level', '3rd Level', '4th Level', '5th Level', '6th Level', '7th Level', '8th Level', '9th Level'];
+		const levels = ['Cantrips (0 Level)', '1st Level', '2nd Level', '3rd Level', '4th Level', '5th Level', '6th Level', '7th Level', '8th Level', '9th Level'];
 
 		const content = _.map(levels, (level)=>{
 			const spells = _.map(_.sampleSize(spellNames, _.random(5, 15)), (spell)=>{
@@ -88,4 +88,4 @@ module.exports = {
 			'\n\n\n'
 		].join('\n');
 	}
-};
+};

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

@@ -6,13 +6,14 @@ const MonsterBlockGen = require('./monsterblock.gen.js');
 const ClassFeatureGen = require('./classfeature.gen.js');
 const CoverPageGen = require('./coverpage.gen.js');
 const TableOfContentsGen = require('./tableOfContents.gen.js');
-
+const dedent = require('dedent-tabs').default;
 
 module.exports = [
 
 	{
 		groupName : 'Editor',
 		icon      : 'fas fa-pencil-alt',
+		view      : 'text',
 		snippets  : [
 			{
 				name : 'Column Break',
@@ -100,6 +101,11 @@ module.exports = [
 						'  }\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`
+			}
 		]
 	},
 
@@ -109,6 +115,7 @@ module.exports = [
 	{
 		groupName : 'PHB',
 		icon      : 'fas fa-book',
+		view      : 'text',
 		snippets  : [
 			{
 				name : 'Spell',
@@ -166,6 +173,14 @@ module.exports = [
 				icon : 'far fa-file-word',
 				gen  : CoverPageGen,
 			},
+			{
+				name : 'Artist Credit',
+				icon : 'fas fa-signature',
+				gen  : '<div class=\'artist\' style=\'top:90px;right:30px;\'>\n' +
+						'##### Starry Night\n' +
+						'[Van Gogh](https://www.vangoghmuseum.nl/en)\n' +
+						'</div>\n'
+			},
 		]
 	},
 
@@ -176,6 +191,7 @@ module.exports = [
 	{
 		groupName : 'Tables',
 		icon      : 'fas fa-table',
+		view      : 'text',
 		snippets  : [
 			{
 				name : 'Class Table',
@@ -260,28 +276,44 @@ module.exports = [
 	{
 		groupName : 'Print',
 		icon      : 'fas fa-print',
+		view      : 'style',
 		snippets  : [
 			{
-				name : 'A4 PageSize',
+				name : 'A4 Page Size',
 				icon : 'far fa-file',
-				gen  : ['<style>',
-					'  .phb{',
-					'    width : 210mm;',
-					'    height : 296.8mm;',
-					'  }',
-					'</style>'
+				gen  : ['/* A4 Page Size */',
+					'.phb {',
+					'	width  : 210mm;',
+					'	height : 296.8mm;',
+					'}'
+				].join('\n')
+			},
+			{
+				name : 'Square Page Size',
+				icon : 'far fa-file',
+				gen  : ['/* Square Page Size */',
+					'.phb {',
+					'	width   : 125mm;',
+					'	height  : 125mm;',
+					'	padding : 12.5mm;',
+					'	columns : unset;',
+					'}',
+					''
 				].join('\n')
 			},
 			{
 				name : 'Ink Friendly',
 				icon : 'fas fa-tint',
-				gen  : ['<style>',
-					'  .phb{ background : white;}',
-					'  .phb img{ display : none;}',
-					'  .phb hr+blockquote{background : white;}',
-					'</style>',
-					''
-				].join('\n')
+				gen  : dedent`
+					/* Ink Friendly */
+					.phb, .phb blockquote, .phb hr+blockquote {
+						background : white;
+						box-shadow : 0px 0px 3px;
+					}
+
+					.phb img {
+						visibility : hidden;
+					}`
 			},
 		]
 	},

client/homebrew/homebrew.jsx

@@ -49,6 +49,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='/v3_preview' exact component={()=><HomePage brew={this.props.brew} />}/>
 						<Route path='/' component={()=><HomePage brew={this.props.brew} />}/>
 					</Switch>
 				</div>

client/homebrew/navbar/recent.navitem.jsx

@@ -124,7 +124,7 @@ const RecentItems = createClass({
 
 		const makeItems = (brews)=>{
 			return _.map(brews, (brew)=>{
-				return <a href={brew.url} className='item' key={brew.id} target='_blank' rel='noopener noreferrer'>
+				return <a href={brew.url} className='item' key={brew.id} 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/pages/editPage/editPage.jsx

@@ -196,11 +196,14 @@ const EditPage = createClass({
 
 		const transfer = this.state.saveGoogle == _.isNil(this.state.brew.googleId);
 
+		const brew = this.state.brew;
+		brew.pageCount = ((brew.renderer=='legacy' ? brew.text.match(/\\page/g) : brew.text.match(/^\\page$/gm)) || []).length + 1;
+
 		if(this.state.saveGoogle) {
 			if(transfer) {
 				const res = await request
 				.post('/api/newGoogle/')
-				.send(this.state.brew)
+				.send(brew)
 				.catch((err)=>{
 					console.log(err.status === 401
 						? 'Not signed in!'
@@ -211,7 +214,7 @@ const EditPage = createClass({
 				if(!res) { return; }
 
 				console.log('Deleting Local Copy');
-				await request.delete(`/api/${this.state.brew.editId}`)
+				await request.delete(`/api/${brew.editId}`)
 				.send()
 				.catch((err)=>{
 					console.log('Error deleting Local Copy');
@@ -221,8 +224,8 @@ const EditPage = createClass({
 				history.replaceState(null, null, `/edit/${this.savedBrew.googleId}${this.savedBrew.editId}`); //update URL to match doc ID
 			} else {
 				const res = await request
-				.put(`/api/updateGoogle/${this.state.brew.editId}`)
-				.send(this.state.brew)
+				.put(`/api/updateGoogle/${brew.editId}`)
+				.send(brew)
 				.catch((err)=>{
 					console.log(err.status === 401
 						? 'Not signed in!'
@@ -236,14 +239,14 @@ const EditPage = createClass({
 		} else {
 			if(transfer) {
 				const res = await request.post('/api')
-				.send(this.state.brew)
+				.send(brew)
 				.catch((err)=>{
 					console.log('Error creating Local Copy');
 					this.setState({ errors: err });
 					return;
 				});
 
-				await request.get(`/api/removeGoogle/${this.state.brew.googleId}${this.state.brew.editId}`)
+				await request.get(`/api/removeGoogle/${brew.googleId}${brew.editId}`)
 				.send()
 				.catch((err)=>{
 					console.log('Error Deleting Google Brew');
@@ -253,8 +256,8 @@ const EditPage = createClass({
 				history.replaceState(null, null, `/edit/${this.savedBrew.editId}`); //update URL to match doc ID
 			} else {
 				const res = await request
-				.put(`/api/update/${this.state.brew.editId}`)
-				.send(this.state.brew)
+				.put(`/api/update/${brew.editId}`)
+				.send(brew)
 				.catch((err)=>{
 					console.log('Error Updating Local Brew');
 					this.setState({ errors: err });
@@ -322,7 +325,9 @@ const EditPage = createClass({
 			let errMsg = '';
 			try {
 				errMsg += `${this.state.errors.toString()}\n\n`;
-				errMsg += `\`\`\`\n${JSON.stringify(this.state.errors.response.error, null, '  ')}\n\`\`\``;
+				errMsg += `\`\`\`\n${this.state.errors.stack}\n`;
+				errMsg += `${JSON.stringify(this.state.errors.response.error, null, '  ')}\n\`\`\``;
+				console.log(errMsg);
 			} catch (e){}
 
 			if(this.state.errors.status == '401'){
@@ -344,6 +349,27 @@ const EditPage = createClass({
 				</Nav.item>;
 			}
 
+			if(this.state.errors.status == '403' && this.state.errors.response.body.errors[0].reason == 'insufficientPermissions'){
+				return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+					Oops!
+					<div className='errorContainer' onClick={this.clearErrors}>
+					Looks like your Google credentials have
+					expired! Visit the log in page to sign out
+					and sign back in with Google
+					to save this to Google Drive!
+						<a target='_blank' rel='noopener noreferrer'
+							href={`https://www.naturalcrit.com/login?redirect=${this.state.url}`}>
+							<div className='confirm'>
+								Sign In
+							</div>
+						</a>
+						<div className='deny'>
+							Not Now
+						</div>
+					</div>
+				</Nav.item>;
+			}
+
 			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
 				Oops!
 				<div className='errorContainer'>

client/homebrew/pages/homePage/homePage.jsx

@@ -1,6 +1,7 @@
 require('./homePage.less');
 const React = require('react');
 const createClass = require('create-react-class');
+const _ = require('lodash');
 const cx = require('classnames');
 const request = require('superagent');
 const { Meta } = require('vitreum/headtags');
@@ -49,9 +50,9 @@ const HomePage = createClass({
 		this.refs.editor.update();
 	},
 	handleTextChange : function(text){
-		this.setState({
-			brew : { text: text }
-		});
+		this.setState((prevState)=>({
+			brew : _.merge({}, prevState.brew, { text: text })
+		}));
 	},
 	renderNavbar : function(){
 		return <Navbar ver={this.props.ver}>
@@ -81,7 +82,7 @@ const HomePage = createClass({
 						renderer={this.state.brew.renderer}
 						showEditButtons={false}
 					/>
-					<BrewRenderer text={this.state.brew.text} />
+					<BrewRenderer text={this.state.brew.text} style={this.state.brew.style} renderer={this.state.brew.renderer}/>
 				</SplitPane>
 			</div>
 

client/homebrew/pages/homePage/homePage.less

@@ -5,7 +5,7 @@
 		position         : absolute;
 		display          : block;
 		right            : 70px;
-		bottom           : 70px;
+		bottom           : 50px;
 		z-index          : 100;
 		z-index          : 5001;
 		padding          : 1em;
@@ -23,7 +23,7 @@
 		position         : absolute;
 		display          : block;
 		right            : 200px;
-		bottom           : 90px;
+		bottom           : 70px;
 		z-index          : 100;
 		z-index          : 5000;
 		padding          : 0.8em;
@@ -40,4 +40,4 @@
 			right : 350px;
 		}
 	}
-}
+}

client/homebrew/pages/homePage/welcome_msg.md

@@ -4,7 +4,7 @@ Welcome traveler from an antique land. Please sit and tell us of what you have s
 ### Homebrew D&D made easy
 The Homebrewery makes the creation and sharing of authentic looking Fifth-Edition homebrews easy. It uses [Markdown](https://help.github.com/articles/markdown-basics/) with a little CSS magic to make your brews come to life.
 
-**Try it! **Simply edit the text on the left and watch it *update live* on the right.
+**Try it!** Simply edit the text on the left and watch it *update live* on the right.
 
 
 
@@ -14,7 +14,7 @@ When you create your own homebrew you will be given a *edit url* and a *share ur
 Anyone with the *share url* will be able to access a read-only version of your homebrew.
 
 ## Helping out
-Like this tool? Want to buy me a beer? [Head here](https://www.patreon.com/stolksdorf) to help me keep the servers running.
+Like this tool? Want to buy me a beer? [Head here](https://www.patreon.com/Naturalcrit) to help me keep the servers running.
 
 This tool will **always** be free, never have ads, and I will never offer any "premium" features or whatever.
 
@@ -36,8 +36,10 @@ This tool will **always** be free, never have ads, and I will never offer any "p
 ```
 ```
 
-## Big things coming in v3.0.0
-With the next major release of Homebrewery, v3.0.0, this tool *will no longer support raw HTML input for brew code*. All brews made previous to the release of v3.0.0 will still render normally.
+## V3.0.0 Released!
+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*).
+
+**You can enable V3 via the <span class="fa fa-info-circle" style="text-indent:0"></span> Properties button!**
 
 ## New Things All The Time!
 What's new in the latest update? Check out the full changelog [here](/changelog)
@@ -46,9 +48,9 @@ What's new in the latest update? Check out the full changelog [here](/changelog)
 Have an idea of how to make The Homebrewery better? Or did you find something that wasn't quite right? Head [here](https://www.reddit.com/r/homebrewery/submit?selftext=true&title=%5BIssue%5D%20Describe%20Your%20Issue%20Here) and let me know!.
 
 ### Legal Junk
-The Homebrewery is licensed using the [MIT License](https://github.com/naturalcrit/homebrewery/blob/master/license). Which means you are free to use The Homebrewery is any way that you want, except for claiming that you made it yourself.
+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.
 
-If you wish to sell or in some way gain profit for what's created on this site, it's your responsibility to ensure you have the proper licenses/rights for any images or resources used.
+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/).
@@ -96,5 +98,3 @@ If you'd like to credit The Homebrewery in your brew, I'd be flattered! Just ref
 
 <div class='pageNumber'>2</div>
 <div class='footnote'>PART 2 | BORING STUFF</div>
-
-

client/homebrew/pages/homePage/welcome_msg_v3.md

@@ -0,0 +1,170 @@
+```css
+.page #example + table td {
+	border:1px dashed #00000030;
+}
+
+.page {
+	padding-bottom : 1.1cm;
+}
+```
+
+# The Homebrewery *V3*
+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
+The Homebrewery makes the creation and sharing of authentic looking Fifth-Edition homebrews easy. It uses [Markdown](https://help.github.com/articles/markdown-basics/) with a little CSS magic to make your brews come to life.
+
+**Try it!** Simply edit the text on the left and watch it *update live* on the right. Note that not every button is visible on this demo page. Click New {{fas,fa-plus-square}} in the navbar above to start brewing with all the features!
+
+### Editing and Sharing
+When you create your own homebrew, you will be given a *edit url* and a *share url*.
+
+Any changes you make while on the *edit url* will be automatically saved to the database within a few seconds. Anyone with the edit url will be able to make edits to your homebrew, so be careful about who you share it with.
+
+Anyone with the *share url* will be able to access a read-only version of your homebrew.
+
+{{note
+##### PDF Creation
+PDF Printing works best in Google Chrome. If you are having quality/consistency issues, try using Chrome to print instead.
+
+After clicking the "Print" item in the navbar a new page will open and a print dialog will pop-up.
+* Set the **Destination** to "Save as PDF"
+* Set **Paper Size** to "Letter"
+* If you are printing on A4 paper, make sure to have the **PRINT → {{far,fa-file}} A4 Pagesize** snippet in your brew
+* 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
+}}
+
+<img src='https://i.imgur.com/hMna6G0.png' style='position:absolute;bottom:50px;left:120px;width:180px' />
+
+<div class='pageNumber'>1</div>
+<div class='footnote'>PART 1 | FANCINESS</div>
+
+\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*).
+
+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.
+
+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).
+
+### 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.
+
+This tool will **always** be free, never have ads, and I will never offer any "premium" features or whatever.
+
+### Bugs, Issues, Suggestions?
+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). Which means you are free to use The Homebrewery codebase any way that you want, except for claiming that you made it yourself.
+
+If you wish to sell or in some way gain profit for what's created on this site, it's your responsibility to ensure you have the proper licenses/rights for any images or resources used.
+
+#### 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
+If you are looking for more 5e Homebrew resources check out [r/UnearthedArcana](https://www.reddit.com/r/UnearthedArcana/) and their list of useful resources [here](https://www.reddit.com/r/UnearthedArcana/comments/3uwxx9/resources_open_to_the_community/).
+
+
+\page
+
+## Markdown+
+The Homebrewery aims to make homebrewing as simple as possible, providing a live editor with Markdown syntax that is more human-readable and faster to write with than raw HTML.
+
+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:
+
+#### Span
+My favorite author is {{pen,#author,color:orange,font-family:"trebuchet ms" Brandon Sanderson}}.  The orange text has a class of `pen`, an id of `author`, is colored orange, and given a new font. The first space outside of quotes marks the beginning of the content.
+
+
+#### Block
+{{purple,#book,text-align:center,background:#aa88aa55
+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.
+
+Inline elements like *italics* {color:#D35400} or images require the injection on the same line.
+
+Block elements like headers require the injection to start on the line immediately following.
+
+##### A Purple Header
+{color:purple,text-align:center}
+
+\* *this does not currently work for tables yet*
+
+### Vertical Spacing
+A blank line can be achieved with a run of one or more `:` alone on a line. More `:`'s will create more space.
+
+::
+
+Much nicer than `<br><br><br><br><br>`
+
+### Definition Lists
+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`.
+
+\column
+
+### Tables
+Tables now allow column & row spanning between cells. This is included in some updated snippets, but a simplified example is given below.
+
+A cell can be spanned across columns by grouping multiple pipe `|` characters at the end of a cell.
+
+Row spanning is achieved by adding a `^` at the end of a cell just before the `|`.  
+
+These can be combined to span a cell across both columns and rows. Cells must have the same colspan if they are to be rowspan'd.
+
+##### Example
+| Head A | Spanned Header ||
+| Head B | Head C | Head D |
+|:-------|:------:|:------:|
+| 1A     |    1B  |    1C  |
+| 2A    ^|    2B  |    2C  |
+| 3A    ^|    3B       3C ||
+| 4A     |    4B       4C^||
+| 5A    ^|    5B  |    5C  |
+| 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.
+
+Using *Curly Injection* you can assign an id, classes, or specific inline CSS properties to the image.
+
+![alt-text](https://s-media-cache-ak0.pinimg.com/736x/4a/81/79/4a8179462cfdf39054a418efd4cb743e.jpg) {width:100px,border:"2px solid",border-radius:10px}
+
+\* *When using Imgur-hosted images, use the "direct link", which can be found when you click into your image in the Imgur interace.*
+
+## 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.
+
+
+
+<div class='pageNumber'>2</div>
+<div class='footnote'>PART 2 | BORING STUFF</div>

client/homebrew/pages/newPage/newPage.jsx

@@ -19,6 +19,7 @@ const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
 const BREWKEY = 'homebrewery-new';
 const STYLEKEY = 'homebrewery-new-style';
+const METAKEY = 'homebrewery-new-meta';
 
 
 const NewPage = createClass({
@@ -60,7 +61,7 @@ const NewPage = createClass({
 
 			isSaving   : false,
 			saveGoogle : (global.account && global.account.googleId ? true : false),
-			errors     : [],
+			errors     : null,
 			htmlErrors : Markdown.validate(this.props.brew.text)
 		};
 	},
@@ -68,12 +69,16 @@ const NewPage = createClass({
 	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.props.brew.text || !this.props.brew.style){
-			brew.text = this.props.brew.text  || (brewStorage  ?? '');
-			brew.style = this.props.brew.style || (styleStorage ?? undefined);
+		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)=>({
@@ -126,7 +131,27 @@ const NewPage = createClass({
 		this.setState((prevState)=>({
 			brew : _.merge({}, prevState.brew, metadata),
 		}));
+		localStorage.setItem(METAKEY, JSON.stringify({
+			// 'title'       : this.state.brew.title,
+			// 'description' : this.state.brew.description,
+			'renderer' : this.state.brew.renderer
+		}));
+	},
 
+	clearErrors : function(){
+		this.setState({
+			errors   : null,
+			isSaving : false
+
+		});
+	},
+
+	clearErrors : function(){
+		this.setState({
+			errors   : null,
+			isSaving : false
+
+		});
 	},
 
 	save : async function(){
@@ -144,6 +169,8 @@ const NewPage = createClass({
 			brew.text = brew.text.slice(index + 5);
 		};
 
+		brew.pageCount=((brew.renderer=='legacy' ? brew.text.match(/\\page/g) : brew.text.match(/^\\page$/gm)) || []).length + 1;
+
 		if(this.state.saveGoogle) {
 			const res = await request
 			.post('/api/newGoogle/')
@@ -152,13 +179,14 @@ const NewPage = createClass({
 				console.log(err.status === 401
 					? 'Not signed in!'
 					: 'Error Creating New Google Brew!');
-				this.setState({ isSaving: false });
+				this.setState({ isSaving: false, errors: err });
 				return;
 			});
 
 			brew = res.body;
 			localStorage.removeItem(BREWKEY);
 			localStorage.removeItem(STYLEKEY);
+			localStorage.removeItem(METAKEY);
 			window.location = `/edit/${brew.googleId}${brew.editId}`;
 		} else {
 			request.post('/api')
@@ -174,18 +202,80 @@ const NewPage = createClass({
 				brew = res.body;
 				localStorage.removeItem(BREWKEY);
 				localStorage.removeItem(STYLEKEY);
+				localStorage.removeItem(METAKEY);
 				window.location = `/edit/${brew.editId}`;
 			});
 		}
 	},
 
 	renderSaveButton : function(){
+		if(this.state.errors){
+			let errMsg = '';
+			try {
+				errMsg += `${this.state.errors.toString()}\n\n`;
+				errMsg += `\`\`\`\n${this.state.errors.stack}\n`;
+				errMsg += `${JSON.stringify(this.state.errors.response.error, null, '  ')}\n\`\`\``;
+				console.log(errMsg);
+			} catch (e){}
+
+			if(this.state.errors.status == '401'){
+				return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+					Oops!
+					<div className='errorContainer' onClick={this.clearErrors}>
+					You must be signed in to a Google account
+						to save this to<br />Google Drive!<br />
+						<a target='_blank' rel='noopener noreferrer'
+							href={`https://www.naturalcrit.com/login?redirect=${this.state.url}`}>
+							<div className='confirm'>
+								Sign In
+							</div>
+						</a>
+						<div className='deny'>
+							Not Now
+						</div>
+					</div>
+				</Nav.item>;
+			}
+
+			if(this.state.errors.status == '403' && this.state.errors.response.body.errors[0].reason == 'insufficientPermissions'){
+				return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+					Oops!
+					<div className='errorContainer' onClick={this.clearErrors}>
+					Looks like your Google credentials have
+					expired! Visit the log in page to sign out
+					and sign back in with Google
+					to save this to Google Drive!
+						<a target='_blank' rel='noopener noreferrer'
+							href={`https://www.naturalcrit.com/login?redirect=${this.state.url}`}>
+							<div className='confirm'>
+								Sign In
+							</div>
+						</a>
+						<div className='deny'>
+							Not Now
+						</div>
+					</div>
+				</Nav.item>;
+			}
+
+			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+				Oops!
+				<div className='errorContainer'>
+					Looks like there was a problem saving. <br />
+					Report the issue <a target='_blank' rel='noopener noreferrer'
+						href={`https://github.com/naturalcrit/homebrewery/issues/new?body=${encodeURIComponent(errMsg)}`}>
+						here
+					</a>.
+				</div>
+			</Nav.item>;
+		}
+
 		if(this.state.isSaving){
-			return <Nav.item icon='fas fa-spinner fa-spin' className='saveButton'>
+			return <Nav.item icon='fas fa-spinner fa-spin' className='save'>
 				save...
 			</Nav.item>;
 		} else {
-			return <Nav.item icon='fas fa-save' className='saveButton' onClick={this.save}>
+			return <Nav.item icon='fas fa-save' className='save' onClick={this.save}>
 				save
 			</Nav.item>;
 		}

client/homebrew/pages/newPage/newPage.less

@@ -1,10 +1,82 @@
 .newPage{
-
-	.saveButton{
+	.navItem.save{
 		background-color: @orange;
 		&:hover{
 			background-color: @green;
 		}
+		&.error{
+			position         : relative;
+			background-color : @red;
+		}
 	}
-
-}
+	.errorContainer{
+		animation-name: glideDown;
+		animation-duration: 0.4s;
+		position         : absolute;
+		top              : 100%;
+		left             : 50%;
+		z-index          : 100000;
+		width            : 140px;
+		padding          : 3px;
+		color            : white;
+		background-color : #333;
+		border           : 3px solid #444;
+		border-radius    : 5px;
+		transform        : translate(-50% + 3px, 10px);
+		text-align       : center;
+		font-size        : 10px;
+		font-weight      : 800;
+		text-transform   : uppercase;
+		a{
+			color : @teal;
+		}
+		&:before {
+			content: "";
+			width: 0px;
+			height: 0px;
+			position: absolute;
+			border-left: 10px solid transparent;
+			border-right: 10px solid transparent;
+			border-top: 10px solid transparent;
+			border-bottom: 10px solid #444;
+			left: 53px;
+			top: -23px;
+		}
+		&:after {
+			content: "";
+			width: 0px;
+			height: 0px;
+			position: absolute;
+			border-left: 10px solid transparent;
+			border-right: 10px solid transparent;
+			border-top: 10px solid transparent;
+			border-bottom: 10px solid #333;
+			left: 53px;
+			top: -19px;
+		}
+		.deny {
+			width            : 48%;
+			margin           : 1px;
+			padding          : 5px;
+			background-color : #333;
+			display          : inline-block;
+			border-left      : 1px solid #666;
+			.animate(background-color);
+			&:hover{
+				background-color : red;
+			}
+		}
+		.confirm {
+			width            : 48%;
+			margin           : 1px;
+			padding          : 5px;
+			background-color : #333;
+			display          : inline-block;
+			color            : white;
+			.animate(background-color);
+			&:hover{
+				background-color : teal;
+			}
+		}
+	}
+}

client/homebrew/pages/printPage/printPage.jsx

@@ -37,20 +37,21 @@ const PrintPage = createClass({
 
 	renderPages : function(){
 		if(this.props.brew.renderer == 'legacy') {
-			return _.map(this.state.brewText.split('\\page'), (page, index)=>{
+			return _.map(this.state.brewText.split('\\page'), (pageText, index)=>{
 				return <div
 					className='phb page'
 					id={`p${index + 1}`}
-					dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(page) }}
+					dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(pageText) }}
 					key={index} />;
 			});
 		} else {
-			return _.map(this.state.brewText.split(/^\\page/gm), (page, index)=>{
-				return <div
-					className='phb3 page'
-					id={`p${index + 1}`}
-					dangerouslySetInnerHTML={{ __html: Markdown.render(page) }}
-					key={index} />;
+			return _.map(this.state.brewText.split(/^\\page$/gm), (pageText, index)=>{
+				pageText += `\n\n&nbsp;\n\\column\n&nbsp;`; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
+				return (
+					<div className='page' id={`p${index + 1}`} key={index} >
+						<div className='columnWrapper' dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} />
+					</div>
+				);
 			});
 		}
 

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

@@ -48,7 +48,7 @@ const BrewItem = createClass({
 		if(!this.props.brew.editId) return;
 
 		return <a onClick={this.deleteBrew}>
-			<i className='fas fa-trash-alt' />
+			<i className='fas fa-trash-alt' title='Delete' />
 		</a>;
 	},
 
@@ -61,7 +61,7 @@ const BrewItem = createClass({
 		}
 
 		return <a href={`/edit/${editLink}`} target='_blank' rel='noopener noreferrer'>
-			<i className='fas fa-pencil-alt' />
+			<i className='fas fa-pencil-alt' title='Edit' />
 		</a>;
 	},
 
@@ -74,7 +74,7 @@ const BrewItem = createClass({
 		}
 
 		return <a href={`/share/${shareLink}`} target='_blank' rel='noopener noreferrer'>
-			<i className='fas fa-share-alt' />
+			<i className='fas fa-share-alt' title='Share' />
 		</a>;
 	},
 
@@ -87,7 +87,7 @@ const BrewItem = createClass({
 		}
 
 		return <a href={`/download/${shareLink}`}>
-			<i className='fas fa-download' />
+			<i className='fas fa-download' title='Download' />
 		</a>;
 	},
 
@@ -101,22 +101,31 @@ const BrewItem = createClass({
 
 	render : function(){
 		const brew = this.props.brew;
-		return <div className='brewItem'>
-			<h2>{brew.title}</h2>
-			<p className='description' >{brew.description}</p>
-			<hr />
+		const dateFormatString = 'YYYY-MM-DD HH:mm:ss';
 
+		return <div className='brewItem'>
+			<div className='text'>
+				<h2>{brew.title}</h2>
+				<p className='description'>{brew.description}</p>
+			</div>
+			<hr />
 			<div className='info'>
-				<span>
-					<i className='fas fa-user' /> {brew.authors.join(', ')}
-				</span>
-				<span>
-					<i className='fas fa-eye' /> {brew.views}
+				<span title={`Last viewed: ${moment(brew.lastViewed).local().format(dateFormatString)}`}>
+					<i className='fas fa-eye'/> {brew.views}
 				</span>
+				{brew.pageCount &&
+					<span title={`Page count: ${brew.pageCount}`}>
+						<i className='far fa-file' /> {brew.pageCount}
+					</span>
+				}
 				<span>
 					<i className='fas fa-sync-alt' /> {moment(brew.updatedAt).fromNow()}
 				</span>
 				{this.renderGoogleDriveIcon()}
+				<br />
+				<span title={`Authors:\n${brew.authors.join('\n')}`}>
+					<i className='fas fa-user'/> {brew.authors.join(', ')}
+				</span>
 			</div>
 
 			<div className='links'>

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

@@ -10,24 +10,28 @@
 	min-height                  : 105px;
 	margin-right                : 15px;
 	margin-bottom               : 15px;
-	padding                     : 5px 15px 5px 8px;
+	padding                     : 5px 15px 2px 8px;
 	padding-right               : 15px;
 	border                      : 1px solid #c9ad6a;
 	border-radius               : 5px;
 	-webkit-column-break-inside : avoid;
 	page-break-inside           : avoid;
 	break-inside                : avoid;
-	h4{
-		margin-bottom : 5px;
-		font-size     : 2.2em;
+	.text {
+		min-height : 54px;
+		h4{
+			margin-bottom : 5px;
+			font-size     : 2.2em;
+		}
 	}
 	.info{
-		position: absolute;
-		bottom: 0px;
+		position: initial;
+		bottom: 2px;
 		margin-bottom: 4px;
 		font-family : ScalySans;
 		font-size   : 1.2em;
 		&>span{
+			display      : float;
 			margin-right : 12px;
 		}
 	}

client/homebrew/pages/userPage/userPage.jsx

@@ -4,6 +4,8 @@ const createClass = require('create-react-class');
 const _     = require('lodash');
 const cx    = require('classnames');
 
+const moment = require('moment');
+
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
 
@@ -29,8 +31,9 @@ const UserPage = createClass({
 	},
 	getInitialState : function() {
 		return {
-			sortType : 'alpha',
-			sortDir  : 'asc'
+			sortType     : 'alpha',
+			sortDir      : 'asc',
+			filterString : ''
 		};
 	},
 	getUsernameWithS : function() {
@@ -50,13 +53,13 @@ const UserPage = createClass({
 	},
 
 	sortBrewOrder : function(brew){
-		if(!brew.title){brew.title = 'No Title';};
+		if(!brew.title){brew.title = 'No Title';}
 		const mapping = {
 			'alpha'   : _.deburr(brew.title.toLowerCase()),
-			'created' : brew.createdAt,
-			'updated' : brew.updatedAt,
+			'created' : moment(brew.createdAt).format(),
+			'updated' : moment(brew.updatedAt).format(),
 			'views'   : brew.views,
-			'latest'  : brew.lastViewed
+			'latest'  : moment(brew.lastViewed).format()
 		};
 		return mapping[this.state.sortType];
 	},
@@ -89,6 +92,26 @@ const UserPage = createClass({
 		  </td>;
 	},
 
+	handleFilterTextChange : function(e){
+		this.setState({
+			filterString : e.target.value
+		});
+		return;
+	},
+
+	renderFilterOption : function(){
+		return <td>
+			<label>
+				<i className='fas fa-search'></i>
+				<input
+					type='search'
+					placeholder='search title/description'
+					onChange={this.handleFilterTextChange}
+				/>
+			</label>
+		</td>;
+	},
+
 	renderSortOptions : function(){
 		return <div className='sort-container'>
 			<table>
@@ -113,6 +136,7 @@ const UserPage = createClass({
 								{`${(this.state.sortDir == 'asc' ? '\u25B2 ASC' : '\u25BC DESC')}`}
 							</button>
 						</td>
+						{this.renderFilterOption()}
 					</tr>
 				</tbody>
 			</table>
@@ -120,7 +144,12 @@ const UserPage = createClass({
 	},
 
 	getSortedBrews : function(){
-		return _.groupBy(this.props.brews, (brew)=>{
+		const testString = _.deburr(this.state.filterString).toLowerCase();
+		const brewCollection = this.state.filterString ? _.filter(this.props.brews, (brew)=>{
+			return (_.deburr(brew.title).toLowerCase().includes(testString)) ||
+			(_.deburr(brew.description).toLowerCase().includes(testString));
+		}) : this.props.brews;
+		return _.groupBy(brewCollection, (brew)=>{
 			return (brew.published ? 'published' : 'private');
 		});
 	},
@@ -141,14 +170,16 @@ const UserPage = createClass({
 			<div className='content V3'>
 				<div className='phb'>
 					{this.renderSortOptions()}
-					<div>
-						<h1>{this.getUsernameWithS()} brews</h1>
+					<div className='published'>
+						<h1>{this.getUsernameWithS()} published brews</h1>
 						{this.renderBrews(brews.published)}
 					</div>
-					<div>
-						<h1>{this.getUsernameWithS()} unpublished brews</h1>
-						{this.renderBrews(brews.private)}
-					</div>
+					{this.props.username == global.account?.username &&
+						<div className='unpublished'>
+							<h1>{this.getUsernameWithS()} unpublished brews</h1>
+							{this.renderBrews(brews.private)}
+						</div>
+					}
 				</div>
 			</div>
 		</div>;

client/homebrew/pages/userPage/userPage.less

@@ -34,8 +34,9 @@
 		font-family        : 'Open Sans', sans-serif;
 		position           : fixed;
 		top                : 35px;
+		left               : calc(50vw - 408px);
 		border             : 2px solid #58180D;
-		width              : 675px;
+		width              : 800px;
 		background-color   : #EEE5CE;
 		padding            : 2px;
 		text-align         : center;
@@ -52,6 +53,9 @@
 			vertical-align : middle;
 			tbody tr{
 				background-color: transparent !important;
+				i{
+					padding-right : 5px
+				}
 			button{
 					background-color : transparent;
 					color            : #58180D;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "homebrewery",
   "description": "Create authentic looking D&D homebrews using only markdown",
-  "version": "2.13.2",
+  "version": "3.0.0",
   "engines": {
     "node": "14.15.x"
   },
@@ -40,13 +40,13 @@
     ]
   },
   "dependencies": {
-    "@babel/core": "^7.14.8",
-    "@babel/plugin-transform-runtime": "^7.14.5",
-    "@babel/preset-env": "^7.14.8",
+    "@babel/core": "^7.15.0",
+    "@babel/plugin-transform-runtime": "^7.15.0",
+    "@babel/preset-env": "^7.15.4",
     "@babel/preset-react": "^7.14.5",
     "body-parser": "^1.19.0",
     "classnames": "^2.3.1",
-    "codemirror": "^5.62.2",
+    "codemirror": "^5.62.3",
     "cookie-parser": "^1.4.5",
     "create-react-class": "^15.7.0",
     "dedent-tabs": "^0.9.0",
@@ -54,29 +54,29 @@
     "express-async-handler": "^1.1.4",
     "express-static-gzip": "2.1.1",
     "fs-extra": "10.0.0",
-    "googleapis": "82.0.0",
+    "googleapis": "85.0.0",
     "jwt-simple": "^0.5.6",
     "less": "^3.13.1",
     "lodash": "^4.17.21",
-    "marked": "2.1.3",
+    "marked": "3.0.3",
     "markedLegacy": "npm:marked@^0.3.19",
     "moment": "^2.29.1",
-    "mongoose": "^5.13.4",
-    "nanoid": "3.1.23",
+    "mongoose": "^5.13.7",
+    "nanoid": "3.1.25",
     "nconf": "^0.11.3",
     "prop-types": "15.7.2",
     "query-string": "7.0.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-frame-component": "4.1.3",
-    "react-router-dom": "5.2.0",
+    "react-router-dom": "5.3.0",
     "sanitize-filename": "1.6.3",
     "superagent": "^6.1.0",
     "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
   },
   "devDependencies": {
-    "eslint": "^7.31.0",
-    "eslint-plugin-react": "^7.24.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-react": "^7.25.1",
     "pico-check": "^2.1.3"
   }
 }

scripts/buildAdmin.js

@@ -14,10 +14,10 @@ const transforms = {
 };
 
 const build = async ({ bundle, render, ssr })=>{
-	await fs.outputFile('./build/admin/bundle.css', await lessTransform.generate({ paths: './shared' }));
+	const css = await lessTransform.generate({ paths: './shared' });
+	await fs.outputFile('./build/admin/bundle.css', css);
 	await fs.outputFile('./build/admin/bundle.js', bundle);
 	await fs.outputFile('./build/admin/ssr.js', ssr);
-	await fs.outputFile('./build/admin/render.js', render);
 };
 
 fs.emptyDirSync('./build/admin');

server.js

@@ -32,11 +32,7 @@ const getBrewFromId = asyncHandler(async (id, accessType)=>{
 	if(accessType == 'raw') {
 		return brew;
 	}
-	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);
-	}
+	splitTextAndStyle(brew);
 	return brew;
 });
 
@@ -49,6 +45,15 @@ const sanitizeBrew = (brew, full=false)=>{
 	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);
@@ -94,9 +99,10 @@ app.use((req, res, 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 changelogText = require('fs').readFileSync('./changelog.md', 'utf8');
+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);};
 
@@ -114,12 +120,25 @@ app.get('/', async (req, res, next)=>{
 	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
+		title    : 'Changelog',
+		text     : changelogText,
+		renderer : 'V3'
 	};
+	splitTextAndStyle(brew);
 	req.brew = brew;
 	return next();
 });

server/googleActions.js

@@ -17,7 +17,7 @@ GoogleActions = {
 		if(!account || !account.googleId){ // If not signed into Google
 			const err = new Error('Not Signed In');
 			err.status = 401;
-			throw err;
+			throw (err);
 		}
 
 		const oAuth2Client = new google.auth.OAuth2(
@@ -60,6 +60,7 @@ GoogleActions = {
 		.catch((err)=>{
 			console.log('Error searching Google Drive Folders');
 			console.error(err);
+			throw (err);
 		});
 
 		let folderId;
@@ -69,8 +70,9 @@ GoogleActions = {
 				resource : fileMetadata
 			})
 			.catch((err)=>{
-				console.log('Error creating google app folder');
+				console.log('Error creating Google Drive folder');
 				console.error(err);
+				throw (err);
 			});
 
 			folderId = obj.data.id;
@@ -95,11 +97,13 @@ GoogleActions = {
 
 		const obj = await drive.files.list({
 			pageSize : 100,
-			fields   : 'nextPageToken, files(id, name, description, modifiedTime, properties)',
+			fields   : 'nextPageToken, files(id, name, description, createdTime, modifiedTime, properties)',
 			q        : 'mimeType != \'application/vnd.google-apps.folder\' and trashed = false'
 		})
 		.catch((err)=>{
-	    return console.error(`Error Listing Google Brews: ${err}`);
+	    console.log(`Error Listing Google Brews`);
+			console.error(err);
+			throw (err);
 			//TODO: Should break out here, but continues on for some reason.
 	  });
 
@@ -109,24 +113,23 @@ GoogleActions = {
 
 		const brews = obj.data.files.map((file)=>{
 	    return {
-	      text      : '',
-	      shareId   : file.properties.shareId,
-	      editId    : file.properties.editId,
-	      createdAt : file.createdTime,
-	      updatedAt : file.modifiedTime,
-	      gDrive    : true,
-	      googleId  : file.id,
-
-	      title       : file.properties.title,
-	      description : file.description,
+				text        : '',
+				shareId     : file.properties.shareId,
+				editId      : file.properties.editId,
+				createdAt   : file.createdTime,
+				updatedAt   : file.modifiedTime,
+				gDrive      : true,
+				googleId    : file.id,
+				pageCount   : file.properties.pageCount,
+				title       : file.properties.title,
+				description : file.description,
 				views       : file.properties.views,
-	      tags        : '',
-	      published   : file.properties.published ? file.properties.published == 'true' : false,
-	      authors     : [req.account.username],	//TODO: properly save and load authors to google drive
-	      systems     : []
-	    };
-	  });
-
+				tags        : '',
+				published   : file.properties.published ? file.properties.published == 'true' : false,
+				authors     : [req.account.username],	//TODO: properly save and load authors to google drive
+				systems     : []
+			};
+		});
 	  return brews;
 	},
 
@@ -136,7 +139,7 @@ GoogleActions = {
 		const result = await drive.files.get({ fileId: id })
 		.catch((err)=>{
 			console.log('error checking file exists...');
-			console.log(err);
+			console.error(err);
 			return false;
 		});
 
@@ -151,23 +154,28 @@ GoogleActions = {
 		if(await GoogleActions.existsGoogleBrew(auth, brew.googleId) == true) {
 			await drive.files.update({
 				fileId   : brew.googleId,
-				resource : { name        : `${brew.title}.txt`,
-										 description : `${brew.description}`,
-										 properties  : { title      : brew.title,
-										 							 	 published  : brew.published,
-																	   lastViewed : brew.lastViewed,
-																	   views      : brew.views,
-																	   version    : brew.version,
-																		 renderer   : brew.renderer,
-																	   tags       : brew.tags,
-																	   systems    : brew.systems.join() }
-									 },
-				media : { mimeType : 'text/plain',
-								  body     : brew.text }
+				resource : {
+					name        : `${brew.title}.txt`,
+					description : `${brew.description}`,
+					properties  : {
+						title     : brew.title,
+						published : brew.published,
+						version   : brew.version,
+						renderer  : brew.renderer,
+						tags      : brew.tags,
+						pageCount : brew.pageCount,
+						systems   : brew.systems.join()
+					}
+				},
+				media : {
+					mimeType : 'text/plain',
+					body     : brew.text
+				}
 			})
 			.catch((err)=>{
 				console.log('Error saving to google');
 				console.error(err);
+				throw (err);
 				//return res.status(500).send('Error while saving');
 			});
 		}
@@ -190,10 +198,12 @@ GoogleActions = {
 			'description' : `${brew.description}`,
 			'parents'     : [folderId],
 			'properties'  : {								//AppProperties is not accessible
-				'shareId' : nanoid(12),
-				'editId'  : nanoid(12),
-				'title'   : brew.title,
-				'views'   : '0'
+				'shareId'   : nanoid(12),
+				'editId'    : nanoid(12),
+				'title'     : brew.title,
+				'views'     : '0',
+				'pageCount' : brew.pageCount,
+				'renderer'  : brew.renderer || 'legacy'
 			}
 		};
 
@@ -202,8 +212,9 @@ GoogleActions = {
 			media    : media
 		})
 		.catch((err)=>{
+			console.log('Error while creating new Google brew');
 			console.error(err);
-			return res.status(500).send('Error while creating google brew');
+			throw (err);
 		});
 
 		if(!obj) return;
@@ -227,6 +238,7 @@ GoogleActions = {
 			updatedAt : new Date(),
 			gDrive    : true,
 			googleId  : obj.data.id,
+			pageCount : fileMetadata.properties.pageCount,
 
 			title       : brew.title,
 			description : brew.description,
@@ -298,6 +310,7 @@ GoogleActions = {
 				createdAt  : obj.data.createdTime,
 				updatedAt  : obj.data.modifiedTime,
 				lastViewed : obj.data.properties.lastViewed,
+				pageCount  : obj.data.properties.pageCount,
 				views      : parseInt(obj.data.properties.views) || 0, //brews with no view parameter will return undefined
 				version    : parseInt(obj.data.properties.version) || 0,
 				renderer   : obj.data.properties.renderer ? obj.data.properties.renderer : 'legacy',
@@ -358,8 +371,13 @@ GoogleActions = {
 
 		await drive.files.update({
 			fileId   : brew.googleId,
-			resource : { properties : { views      : brew.views + 1,
-		 															lastViewed : new Date() } }
+			resource : {
+				modifiedTime : brew.updatedAt,
+				properties   : {
+					views      : brew.views + 1,
+		 			lastViewed : new Date()
+				}
+			}
 		})
 		.catch((err)=>{
 			console.log('Error updating Google views');

server/homebrew.api.js

@@ -19,6 +19,15 @@ const getGoodBrewTitle = (text)=>{
 				 .slice(0, MAX_TITLE_LENGTH);
 };
 
+const excludePropsFromUpdate = (brew)=>{
+	// Remove undesired properties
+	const propsToExclude = ['views', 'lastViewed'];
+	for (const prop of propsToExclude) {
+		delete brew[prop];
+	};
+	return brew;
+};
+
 const mergeBrewText = (text, style)=>{
 	if(typeof style !== 'undefined') {
 		text = `\`\`\`css\n` +
@@ -64,7 +73,8 @@ const newBrew = (req, res)=>{
 const updateBrew = (req, res)=>{
 	HomebrewModel.get({ editId: req.params.id })
 		.then((brew)=>{
-			brew = _.merge(brew, req.body);
+			const updateBrew = excludePropsFromUpdate(req.body);
+			brew = _.merge(brew, updateBrew);
 			brew.text = mergeBrewText(brew.text, brew.style);
 
 			// Compress brew text to binary before saving
@@ -141,9 +151,12 @@ const newGoogleBrew = async (req, res, next)=>{
 
 	req.body = brew;
 
-	const newBrew = await GoogleActions.newGoogleBrew(oAuth2Client, brew);
-
-	return res.status(200).send(newBrew);
+	try {
+		const newBrew = await GoogleActions.newGoogleBrew(oAuth2Client, brew);
+		return res.status(200).send(newBrew);
+	} catch (err) {
+		return res.status(err.response.status).send(err);
+	}
 };
 
 const updateGoogleBrew = async (req, res, next)=>{
@@ -151,12 +164,15 @@ 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 = req.body;
+	const brew = excludePropsFromUpdate(req.body);
 	brew.text = mergeBrewText(brew.text, brew.style);
 
-	const updatedBrew = await GoogleActions.updateGoogleBrew(oAuth2Client, brew);
-
-	return res.status(200).send(updatedBrew);
+	try {
+		const updatedBrew = await GoogleActions.updateGoogleBrew(oAuth2Client, brew);
+		return res.status(200).send(updatedBrew);
+	} catch (err) {
+		return res.status(err.response.status).send(err);
+	}
 };
 
 router.post('/api', newBrew);

server/homebrew.model.js

@@ -4,11 +4,12 @@ const _ = require('lodash');
 const zlib = require('zlib');
 
 const HomebrewSchema = mongoose.Schema({
-	shareId : { type: String, default: ()=>{return nanoid(12);}, index: { unique: true } },
-	editId  : { type: String, default: ()=>{return nanoid(12);}, index: { unique: true } },
-	title   : { type: String, default: '' },
-	text    : { type: String, default: '' },
-	textBin : { type: Buffer },
+	shareId   : { type: String, default: ()=>{return nanoid(12);}, index: { unique: true } },
+	editId    : { type: String, default: ()=>{return nanoid(12);}, index: { unique: true } },
+	title     : { type: String, default: '' },
+	text      : { type: String, default: '' },
+	textBin   : { type: Buffer },
+	pageCount : { type: Number, default: 1 },
 
 	description : { type: String, default: '' },
 	tags        : { type: String, default: '' },

shared/naturalcrit/codeEditor/codeEditor.jsx

@@ -53,6 +53,8 @@ const CodeEditor = createClass({
 				'Cmd-I'  : this.makeItalic,
 				'Ctrl-M' : this.makeSpan,
 				'Cmd-M'  : this.makeSpan,
+				'Ctrl-/' : this.makeComment,
+				'Cmd-/'  : this.makeComment
 			}
 		});
 
@@ -88,6 +90,15 @@ const CodeEditor = createClass({
 		}
 	},
 
+	makeComment : function() {
+		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 4) === '<!--' && selection.slice(-3) === '-->';
+		this.codeMirror.replaceSelection(t ? selection.slice(4, -3) : `<!-- ${selection} -->`, 'around');
+		if(selection.length === 0){
+			const cursor = this.codeMirror.getCursor();
+			this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - 4 });
+		}
+	},
+
 	//=-- Externally used -==//
 	setCursorPosition : function(line, char){
 		setTimeout(()=>{

shared/naturalcrit/markdown.js

@@ -19,7 +19,7 @@ renderer.paragraph = function(text){
 	let match;
 	if(text.startsWith('<div') || text.startsWith('</div'))
 		return `${text}`;
-	else if(match = text.match(/(^|^.*?\n)<span class="inline(.*?<\/span>)$/)) {
+	else if(match = text.match(/(^|^.*?\n)<span class="inline-block(.*?<\/span>)$/)) {
 		return `${match[1].trim() ? `<p>${match[1]}</p>` : ''}<span class="inline-block${match[2]}`;
 	} else
 		return `<p>${text}</p>\n`;
@@ -65,13 +65,13 @@ const mustacheSpans = {
 					raw    : raw,                       // Text to consume from the source
 					text   : text,                      // Additional custom properties
 					tags   : tags,
-					tokens : this.inlineTokens(text)    // inlineTokens to process **bold**, *italics*, etc.
+					tokens : this.lexer.inlineTokens(text)    // inlineTokens to process **bold**, *italics*, etc.
 				};
 			}
 		}
 	},
 	renderer(token) {
-		return `<span class="inline${token.tags}>${this.parseInline(token.tokens)}</span>`; // parseInline to turn child tokens into HTML
+		return `<span class="inline-block${token.tags}>${this.parser.parseInline(token.tokens)}</span>`; // parseInline to turn child tokens into HTML
 	}
 };
 
@@ -114,13 +114,13 @@ const mustacheDivs = {
 					raw    : raw,                                 // Text to consume from the source
 					text   : text,                                // Additional custom properties
 					tags   : tags,
-					tokens : this.inline(this.blockTokens(text))
+					tokens : this.lexer.blockTokens(text)
 				};
 			}
 		}
 	},
 	renderer(token) {
-		return `<div class="block${token.tags}>${this.parse(token.tokens)}</div>`; // parseInline to turn child tokens into HTML
+		return `<div class="block${token.tags}>${this.parser.parse(token.tokens)}</div>`; // parseInline to turn child tokens into HTML
 	}
 };
 
@@ -149,7 +149,7 @@ const mustacheInjectInline = {
 	},
 	renderer(token) {
 		token.type = token.originalType;
-		const text = this.parseInline([token]);
+		const text = this.parser.parseInline([token]);
 		const openingTag = /(<[^\s<>]+)([^\n<>]*>.*)/s.exec(text);
 		if(openingTag) {
 			return `${openingTag[1]} class="${token.tags}${openingTag[2]}`;
@@ -174,15 +174,18 @@ const mustacheInjectBlock = {
 				lastToken.originalType = 'mustacheInjectBlock';
 				lastToken.tags         = ` ${processStyleTags(match[1])}`;
 				return {
-					type : 'text',            // Should match "name" above
-					raw  : match[0],          // Text to consume from the source
+					type : 'mustacheInjectBlock', // Should match "name" above
+					raw  : match[0],              // Text to consume from the source
 					text : ''
 				};
 			}
 		},
 		renderer(token) {
+			if(!token.originalType){
+				return;
+			}
 			token.type = token.originalType;
-			const text = this.parse([token]);
+			const text = this.parser.parse([token]);
 			const openingTag = /(<[^\s<>]+)([^\n<>]*>.*)/s.exec(text);
 			if(openingTag) {
 				return `${openingTag[1]} class="${token.tags}${openingTag[2]}`;
@@ -205,14 +208,14 @@ const definitionLists = {
 	level : 'block',
 	start(src) { return src.match(/^.*?::.*/m)?.index; },  // Hint to Marked.js to stop and check for a match
 	tokenizer(src, tokens) {
-		const regex = /^([^\n]*?)::([^\n]*)/ym;
+		const regex = /^([^\n]*?)::([^\n]*)(?:\n|$)/ym;
 		let match;
 		let endIndex = 0;
 		const definitions = [];
 		while (match = regex.exec(src)) {
 			definitions.push({
-				dt : this.inlineTokens(match[1].trim()),
-				dd : this.inlineTokens(match[2].trim())
+				dt : this.lexer.inlineTokens(match[1].trim()),
+				dd : this.lexer.inlineTokens(match[2].trim())
 			});
 			endIndex = regex.lastIndex;
 		}
@@ -225,16 +228,205 @@ const definitionLists = {
 		}
 	},
 	renderer(token) {
-		return `<dl>
-						${token.definitions.reduce((html, def)=>{
-		return `${html}<dt>${this.parseInline(def.dt)}</dt>`
-									 + `<dd>${this.parseInline(def.dd)}</dd>\n`;
-	}, '')}
-		 				</dl>`;
+		return `<dl>${token.definitions.reduce((html, def)=>{
+			return `${html}<dt>${this.parser.parseInline(def.dt)}</dt>`
+			            + `<dd>${this.parser.parseInline(def.dd)}</dd>\n`;
+		}, '')}</dl>`;
 	}
 };
 
-Markdown.use({ extensions: [mustacheSpans, mustacheDivs, mustacheInjectInline, definitionLists] });
+const spanTable = {
+	name  : 'spanTable',
+	level : 'block',                                   // Is this a block-level or inline-level tokenizer?
+	start(src) { return src.match(/^\n *([^\n ].*\|.*)\n/)?.index; },  // Hint to Marked.js to stop and check for a match
+	tokenizer(src, tokens) {
+		//const regex = this.tokenizer.rules.block.table;
+		const regex = new RegExp('^ *([^\\n ].*\\|.*\\n(?: *[^\\s].*\\n)*?)' // Header
+		    + ' {0,3}(?:\\| *)?(:?-+:? *(?:\\| *:?-+:? *)*)\\|?' // Align
+		    + '(?:\\n *((?:(?!\\n| {0,3}((?:- *){3,}|(?:_ *){3,}|(?:\\* *){3,})' // Cells
+				+ '(?:\\n+|$)| {0,3}#{1,6} | {0,3}>| {4}[^\\n]| {0,3}(?:`{3,}'
+				+ '(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n| {0,3}(?:[*+-]|1[.)]) |'
+				+ '<\\/?(?:address|article|aside|base|basefont|blockquote|body|'
+				+ 'caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option|p|param|section|source|summary|table|tbody|td|tfoot|th|thead|title|tr|track|ul)(?: +|\\n|\\/?>)|<(?:script|pre|style|textarea|!--)).*(?:\\n|$))*)\\n*|$)'); // Cells
+		const cap = regex.exec(src);
+
+		if(cap) {
+			const item = {
+				type   : 'spanTable',
+				header : cap[1].replace(/\n$/, '').split('\n'),
+				align  : cap[2].replace(/^ *|\| *$/g, '').split(/ *\| */),
+				rows   : cap[3] ? cap[3].replace(/\n$/, '').split('\n') : []
+			};
+
+			// Get first header row to determine how many columns
+			item.header[0] = splitCells(item.header[0]);
+
+			const colCount = item.header[0].reduce((length, header)=>{
+				return length + header.colspan;
+			}, 0);
+
+			if(colCount === item.align.length) {
+				item.raw = cap[0];
+
+				let i, j, k, row;
+
+				// Get alignment row (:---:)
+				let l = item.align.length;
+
+				for (i = 0; i < l; i++) {
+					if(/^ *-+: *$/.test(item.align[i])) {
+						item.align[i] = 'right';
+					} else if(/^ *:-+: *$/.test(item.align[i])) {
+						item.align[i] = 'center';
+					} else if(/^ *:-+ *$/.test(item.align[i])) {
+						item.align[i] = 'left';
+					} else {
+						item.align[i] = null;
+					}
+				}
+
+				// Get any remaining header rows
+				l = item.header.length;
+				for (i = 1; i < l; i++) {
+					item.header[i] = splitCells(item.header[i], colCount, item.header[i-1]);
+				}
+
+				// Get main table cells
+				l = item.rows.length;
+				for (i = 0; i < l; i++) {
+					item.rows[i] = splitCells(item.rows[i], colCount, item.rows[i-1]);
+				}
+
+				// header child tokens
+				l = item.header.length;
+				for (j = 0; j < l; j++) {
+					row = item.header[j];
+					for (k = 0; k < row.length; k++) {
+						row[k].tokens = [];
+						this.lexer.inlineTokens(row[k].text, row[k].tokens);
+					}
+				}
+
+				// cell child tokens
+				l = item.rows.length;
+				for (j = 0; j < l; j++) {
+					row = item.rows[j];
+					for (k = 0; k < row.length; k++) {
+						row[k].tokens = [];
+						this.lexer.inlineTokens(row[k].text, row[k].tokens);
+					}
+				}
+				return item;
+			}
+		}
+	},
+	renderer(token) {
+		let i, j, row, cell, col, text;
+		let output = `<table>`;
+		output += `<thead>`;
+		for (i = 0; i < token.header.length; i++) {
+			row = token.header[i];
+			let col = 0;
+			output += `<tr>`;
+			for (j = 0; j < row.length; j++) {
+				cell = row[j];
+				text = this.parser.parseInline(cell.tokens);
+				output += getTableCell(text, cell, 'th', token.align[col]);
+				col += cell.colspan;
+			}
+			output += `</tr>`;
+		}
+		output += `</thead>`;
+		if(token.rows.length) {
+			output += `<tbody>`;
+			for (i = 0; i < token.rows.length; i++) {
+				row = token.rows[i];
+				col = 0;
+				output += `<tr>`;
+				for (j = 0; j < row.length; j++) {
+					cell = row[j];
+					text = this.parser.parseInline(cell.tokens);
+					output += getTableCell(text, cell, 'td', token.align[col]);
+					col += cell.colspan;
+				}
+				output += `</tr>`;
+			}
+			output += `</tbody>`;
+		}
+		output += `</table>`;
+		return output;
+	}
+};
+
+const getTableCell = (text, cell, type, align)=>{
+	if(!cell.rowspan) {
+		return '';
+	}
+	const tag = `<${type}`
+						+ `${cell.colspan > 1 ? ` colspan=${cell.colspan}` : ''}`
+						+ `${cell.rowspan > 1 ? ` rowspan=${cell.rowspan}` : ''}`
+						+ `${align ? ` align=${align}` : ''}>`;
+	return `${tag + text}</${type}>\n`;
+};
+
+const splitCells = (tableRow, count, prevRow = [])=>{
+	const cells = [...tableRow.matchAll(/(?:[^|\\]|\\.?)+(?:\|+|$)/g)].map((x)=>x[0]);
+
+	// Remove first/last cell in a row if whitespace only and no leading/trailing pipe
+	if(!cells[0]?.trim()) { cells.shift(); }
+	if(!cells[cells.length - 1]?.trim()) { cells.pop(); }
+
+	let numCols = 0;
+	let i, j, trimmedCell, prevCell, prevCols;
+
+	for (i = 0; i < cells.length; i++) {
+		trimmedCell = cells[i].split(/\|+$/)[0];
+		cells[i] = {
+			rowspan : 1,
+			colspan : Math.max(cells[i].length - trimmedCell.length, 1),
+			text    : trimmedCell.trim().replace(/\\\|/g, '|')
+			// display escaped pipes as normal character
+		};
+
+		// Handle Rowspan
+		if(trimmedCell.slice(-1) == '^' && prevRow.length) {
+			// Find matching cell in previous row
+			prevCols = 0;
+			for (j = 0; j < prevRow.length; j++) {
+				prevCell = prevRow[j];
+				if((prevCols == numCols) && (prevCell.colspan == cells[i].colspan)) {
+					// merge into matching cell in previous row (the "target")
+					cells[i].rowSpanTarget = prevCell.rowSpanTarget ?? prevCell;
+					cells[i].rowSpanTarget.text += ` ${cells[i].text.slice(0, -1)}`;
+					cells[i].rowSpanTarget.rowspan += 1;
+					cells[i].rowspan = 0;
+					break;
+				}
+				prevCols += prevCell.colspan;
+				if(prevCols > numCols)
+					break;
+			}
+		}
+
+		numCols += cells[i].colspan;
+	}
+
+	// Force main cell rows to match header column count
+	if(numCols > count) {
+		cells.splice(count);
+	} else {
+		while (numCols < count) {
+			cells.push({
+				colspan : 1,
+				text    : ''
+			});
+			numCols += 1;
+		}
+	}
+	return cells;
+};
+
+Markdown.use({ extensions: [mustacheSpans, mustacheDivs, mustacheInjectInline, definitionLists, spanTable] });
 Markdown.use(mustacheInjectBlock);
 Markdown.use({ smartypants: true });
 
@@ -336,7 +528,7 @@ const processStyleTags = (string)=>{
 module.exports = {
 	marked : Markdown,
 	render : (rawBrewText)=>{
-		rawBrewText = rawBrewText.replace(/^\\column$/gm, `<div class='columnSplit'></div>`)
+		rawBrewText = rawBrewText.replace(/^\\column$/gm, `\n<div class='columnSplit'></div>\n`)
 														 .replace(/^(:+)$/gm, (match)=>`${`<div class='blank'></div>`.repeat(match.length)}\n`);
 		return Markdown(
 			sanatizeScriptTags(rawBrewText),

themes/5ePhb.style.less

@@ -2,12 +2,14 @@
 @import (less) './themes/assets/assets.less';
 
 //Colors
-@background            : #EEE5CE;
-@noteGreen             : #e0e5c1;
-@headerUnderline       : #c9ad6a;
-@horizontalRule        : #9c2b1b;
-@headerText            : #58180D;
-@monsterStatBackground : #EEDBAB;
+@background            : #EEE5CE; // Light parchment
+@noteGreen             : #e0e5c1; // Pastel green
+@headerUnderline       : #c9ad6a; // Gold
+@horizontalRule        : #9c2b1b; // Maroon
+@headerText            : #58180D; // Dark maroon
+@monsterStatBackground : #EEDBAB; // Light orange parchment
+@captionText           : #766649; // Brown
+@watercolorStain       : #BBAD82; // Light brown
 @page { margin: 0; }
 body {
 	counter-reset : phb-page-numbers;
@@ -17,7 +19,7 @@ body {
 }
 .useSansSerif(){
 	font-family : ScalySansRemake;
-	font-size   : 0.325cm;
+	font-size   : 0.318cm;
 	line-height : 1.2em;
 	p,dl,ul,ol {
 		line-height : 1.2em;
@@ -32,10 +34,13 @@ body {
 		font-weight    : 800;
 		letter-spacing : -0.02em;
 	}
+	h5 + * {
+		margin-top : 0.1cm;
+	}
 }
-.useColumns(@multiplier : 1){
+.useColumns(@multiplier : 1, @fillMode: balance){
 	column-count         : 2;
-	column-fill          : auto;
+	column-fill          : @fillMode;
 	column-gap           : 0.9cm;
 	column-width         : 8cm * @multiplier;
 	-webkit-column-count : 2;
@@ -45,6 +50,12 @@ body {
 	-webkit-column-gap   : 0.9cm;
 	-moz-column-gap      : 0.9cm;
 }
+.columnWrapper{
+	max-height        : 100%;
+	column-span       : all;
+	columns           : inherit;
+	column-gap        : inherit;
+}
 .page{
 	.useColumns();
 	counter-increment : phb-page-numbers;
@@ -54,9 +65,9 @@ body {
 	overflow          : hidden;
 	height            : 279.4mm;
 	width             : 215.9mm;
-	padding           : 1.4cm 1.9cm 1.7cm;
 	background-color  : @background;
 	background-image  : @backgroundImage;
+	padding           : 1.4cm 1.9cm 1.7cm;
 	font-family       : BookInsanityRemake;
 	font-size         : 0.34cm;
 	text-rendering    : optimizeLegibility;
@@ -67,10 +78,13 @@ body {
 	// *****************************/
 	p{
 		overflow-wrap : break-word;		//TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS
-		margin-bottom : 0.8em;
+		display       : block;
 		line-height   : 1.3em;
+		&+* {
+			margin-top : 0.325cm;
+		}
 		&+p{
-			margin-top  : -0.8em;
+			margin-top : 0;
 		}
 	}
 	ul{
@@ -120,53 +134,55 @@ body {
 		color         : @headerText;
 	}
 	h1{
-		margin-bottom       : 0.18cm;
+		margin-bottom       : 0.18cm; //Margin-bottom only because this is WIDE
 		column-span         : all;
 		font-size           : 0.89cm;
 		-webkit-column-span : all;
 		-moz-column-span    : all;
 		&+p::first-letter{
-			float       : left;
-			font-family : SolberaImitationRemake;
-			line-height : 0.8em;
-			font-size: 3.5cm;
-			padding-left: 40px;
-			margin-left: -40px;
-			padding-top:10px;
-			margin-top:-8px;
-			padding-bottom:10px;
-			margin-bottom:-20px;
-			background-image: linear-gradient(-45deg, #322814, #998250, #322814);
-	    background-clip: text;
-	    -webkit-background-clip: text;
-	    color: rgba(0, 0, 0, 0);
+			float                   : left;
+			font-family             : SolberaImitationRemake;
+			line-height             : 1em;
+			font-size               : 3.5cm;
+			padding-left            : 40px; //Allow background color to extend into margins
+			margin-left             : -40px;
+			margin-top              :-0.3cm;
+			padding-bottom          :2px;
+			margin-bottom           :-20px;
+			background-image        : linear-gradient(-45deg, #322814, #998250, #322814);
+	    background-clip         : text;
+	    -webkit-background-clip : text;
+	    color                   : rgba(0, 0, 0, 0);
 		}
 		&+p::first-line{
 			font-variant : small-caps;
 		}
 	}
 	h2{
-		margin-top    : 0px;
-		margin-bottom : 0.05cm;
+		//margin-top    : 0px; //Font is misaligned. Shift up slightly
+		//margin-bottom : 0.05cm;
 		font-size     : 0.75cm;
 	}
 	h3{
-		margin-top    : -0.1cm;
-		margin-bottom : 0.1cm;
+		//margin-top    : -0.1cm; //Font is misaligned. Shift up slightly
+		//margin-bottom : 0.1cm;
 		font-size     : 0.575cm;
 		border-bottom : 2px solid @headerUnderline;
 	}
 	h4{
-		margin-top    : -0.02cm;
-		margin-bottom : 0.02cm;
+		//margin-top    : -0.02cm; //Font is misaligned. Shift up slightly
+		//margin-bottom : 0.02cm;
 		font-size     : 0.458cm;
 	}
 	h5{
-		margin-top    : -0.02cm;
-		margin-bottom : 0.02cm;
+		//margin-top    : -0.02cm; //Font is misaligned. Shift up slightly
+		//margin-bottom : 0.02cm;
 		font-family   : ScalySansSmallCapsRemake;
 		font-size     : 0.423cm;
 		font-weight   : 900;
+		& + * {
+			margin-top : 0.2cm;
+		}
 	}
 	//*****************************
 	// *          TABLE
@@ -174,7 +190,9 @@ body {
 	table{
 		.useSansSerif();
 		width         : 100%;
-		margin-bottom : 1em;
+		& + * {
+			margin-top : 0.325cm;
+		}
 		thead{
 			display: table-row-group;
 			font-weight : 800;
@@ -198,29 +216,23 @@ body {
 	// *            NOTE
 	// *****************************/
 	.note{
-		&::before{
-			content             : "";
-			box-sizing          : border-box;
-			border-style        : solid;
-			border-width        : 11px;
-			border-image        : @noteBorderImage 12;
-			border-image-outset : 9px 0px;
-			box-shadow          : 1px 4px 14px #888;
-			position            : absolute;
-			width               : 100%;
-			height              : 100%;
-			top                 : 0;
-			left                : 0;
-		}
 		.useSansSerif();
-		position            : relative;
-		margin-top          : 1.3em;
-		margin-left         : -0.1em;
-		margin-right        : -0.1em;
 		background-color    : @noteGreen;
-		padding             : 0.5em 0.6em;
+		border-style        : solid;
+		border-width        : 1px;
+		border-image        : @noteBorderImage 12 stretch;
+		border-image-outset : 9px 0px;
+		border-image-width  : 11px;
+		padding             : 0.13cm 0.16cm;
+		filter              : drop-shadow(1px 4px 6px #888);
+		.page :where(&) {
+			margin-top        : 9px; //Prevent top border getting cut off on colbreak
+		}
 		& + * {
-			margin-top : 1.3em;
+			margin-top : 0.45cm;
+		}
+		h5 {
+			font-size : 0.375cm;
 		}
 		p{
 			display        : block;
@@ -230,7 +242,7 @@ body {
 			padding-top : .8em;
 		}
 		:last-child {
-			margin-bottom : 0em;
+			margin-bottom : 0;
 		}
 	}
 	//************************************
@@ -238,18 +250,21 @@ body {
 	// ************************************/
 	.descriptive{
 		.useSansSerif();
-		display             : block-inline;
-		margin-top          : 1.4em;
 		background-color    : #faf7ea;
-		font-family         : ScalySansRemake;
 		border-style        : solid;
 		border-width        : 7px;
 		border-image        : @descriptiveBoxImage 12 stretch;
 		border-image-outset : 4px;
-		box-shadow          : 0px 0px 6px #faf7ea;
 		padding             : 0.1em;
+		filter              : drop-shadow(0 0 3px #faf7ea);
+		.page :where(&) {
+			margin-top        : 4px; //Prevent top border getting cut off on colbreak
+		}
 		& + * {
-			margin-top : 1.4em;
+			margin-top : 0.45cm;
+		}
+		h5 {
+			font-size : 0.375cm;
 		}
 		p{
 			display        : block;
@@ -260,13 +275,95 @@ body {
 			padding-top : .8em;
 		}
 		:last-child {
-			margin-bottom : 0em;
+			margin-bottom : 0;
 		}
 	}
+	//*****************************
+	// *    Images Snippets
+	// *****************************/
+
+	/* Arist Credit */
+	.artist {
+		position    : absolute;
+		text-align  : center;
+		font-family : WalterTurncoat;
+		font-size   : 0.27cm;
+		color       : @captionText;
+		p, p + p {
+			margin      : unset;
+			text-indent : unset;
+			line-height : 1em;
+		}
+	 	h5 {
+			font-size   : 1.3em;
+			font-family : WalterTurncoat;
+		}
+		a{
+			color           : inherit;
+			text-decoration : unset;
+			&:hover {
+				text-decoration : underline;
+			}
+		}
+	}
+
+	/* Watermark */
+	.watermark {
+		display			: grid !important;
+		place-items		: center;
+		justify-content	: center;
+		position		: absolute;
+		top				: 0;
+		left			: 0;
+		width			: 100%;
+		height			: 100%;
+		font-size		: 120px;
+		text-transform	: uppercase;
+		color			: black;
+		mix-blend-mode 	: overlay;
+		opacity			: 30%;
+		transform		: rotate(-45deg);
+		z-index			: 500;
+		p {
+			margin-bottom : none;
+		}
+	}
+
+	/* Watercolor */
+	[class*="watercolor"] {
+		position            : absolute;
+		width               : 2000px;    /* dimensions need to be real big so the user can set */
+		height              : 2000px;    /* height or width and the image will maintain aspect ratio */
+		-webkit-mask-image  : var(--wc);
+		-webkit-mask-size   : contain;
+		-webkit-mask-repeat : no-repeat;
+		mask-image          : var(--wc);
+		mask-size           : contain;
+		mask-repeat         : no-repeat;
+		background-size     : cover;
+		background-color    : @watercolorStain;			/*default color*/
+		--wc                : @watercolor1;         /*default image*/
+		z-index             : -2;
+	}
+
+	.watercolor1  { --wc : @watercolor1; }
+	.watercolor2  { --wc : @watercolor2; }
+	.watercolor3  { --wc : @watercolor3; }
+	.watercolor4  { --wc : @watercolor4; }
+	.watercolor5  { --wc : @watercolor5; }
+	.watercolor6  { --wc : @watercolor6; }
+	.watercolor7  { --wc : @watercolor7; }
+	.watercolor8  { --wc : @watercolor8; }
+	.watercolor9  { --wc : @watercolor9; }
+	.watercolor10 { --wc : @watercolor10; }
+	.watercolor11 { --wc : @watercolor11; }
+	.watercolor12 { --wc : @watercolor12; }
+
 	//*****************************
 	// *    MONSTER STAT BLOCK
 	// *****************************/
 	.monster {
+		.useSansSerif();
 		&.frame {
 			border-style          : solid;
 			border-width          : 7px 6px;
@@ -276,15 +373,15 @@ body {
 			border-image-outset   : 0px 2px;
 			background-blend-mode : overlay;
 			background-attachment : fixed;
-			box-shadow            : 1px 4px 14px #888;
+			filter                : drop-shadow(1px 4px 6px #888);
 			padding               : 4px 2px;
-			margin                : 0px -6px 1em;
+			margin-left           : -6px;
+			margin-right          : -6px;
 		}
-		.useSansSerif();
-		//-webkit-transform : translateZ(0); //Prevents shadows from breaking across columns, but breaks internal columns...
+
 		position          : relative;
 		padding           : 0px;
-		margin-bottom     : 1em;
+		margin-bottom     : 0.325cm;
 
 		p{
 			margin-bottom : 0.3cm;
@@ -330,16 +427,19 @@ body {
 		dl {
 			color : @headerText;
 		}
+		hr:last-of-type~dl{
+			color : inherit; // After the HRs, hanging indents remain black.
+		}
 
 		// Monster Ability table
 		hr + table:first-of-type{
 			margin              : 0;
-			column-span         : 1;
+			column-span         : none;
 			color               : @headerText;
 			background-color    : transparent;
 			border-style        : none;
 			border-image        : none;
-			-webkit-column-span : 1;
+			-webkit-column-span : none;
 			tr {
 				background-color : transparent;
 			}
@@ -351,12 +451,9 @@ body {
 
 	//Full Width
 	.monster.wide{
-		.useColumns(0.96);
+		.useColumns(0.96, @fillMode: balance);
 	}
 
-	hr+hr+blockquote{
-		.useColumns(0.96);
-	}
 	//*****************************
 	// *           FOOTER
 	// *****************************/
@@ -410,22 +507,32 @@ body {
 	// *           CODE BLOCKS
 	// ************************************/
 	code{
-    font-family: "Courier New", Courier, monospace;
-    font-size: 0.325;
-    padding: 2px 4px;
-    color: #58180d;
-    background-color: #faf7ea;
-    border-radius: 4px;
+    font-family      : "Courier New", Courier, monospace;
+		font-size        : 0.325;
+		padding          : 0px 4px;
+		color            : #58180d;
+		background-color : #faf7ea;
+		border-radius    : 4px;
+		white-space      : pre-wrap
 	}
 
 	pre code{
 		width               : 100%;
-		display             : block;
-		border              : 4px solid;
+		display             : inline-block;
+		border-style        : solid;
+		border-width        : 1px;
 		border-image        : @codeBorderImage 26 stretch;
 		border-image-width  : 10px;
 		border-image-outset : 2px;
 		border-radius       : 12px;
+		margin-bottom       : 2px;
+		padding             : 0.15cm;
+		.page :where(&) {
+			margin-top        : 2px; //Prevent top border getting cut off on colbreak
+		}
+		& + * {
+			margin-top : 0.325cm;
+		}
 	}
 	//*****************************
 	// *          EXTRAS
@@ -434,13 +541,6 @@ body {
 		visibility : hidden;
 		margin     : 0px;
 	}
-	//Modified unorder list, used in spells
-	hr+ul{
-		margin-bottom   : 0.5em;
-		padding-left    : 1em;
-		text-indent     : -1em;
-		list-style-type : none;
-	}
 	.columnSplit {
 		visibility                 : hidden;
 		-webkit-column-break-after : always;
@@ -449,16 +549,12 @@ body {
 		break-before               : column;
 	}
 	//Avoid breaking up
-	p,blockquote,table{
+	blockquote,table{
 		z-index                     : 15;
 		-webkit-column-break-inside : avoid;
 		page-break-inside           : avoid;
 		break-inside                : avoid;
 	}
-	//Better spacing for spell blocks
-	h4+p+hr+ul{
-		margin-top : -0.5em
-	}
 	//Text indent right after table
 	table+p{
 		text-indent : 1em;
@@ -479,10 +575,7 @@ body {
 // *****************************/
 .page .spellList{
 	.useSansSerif();
-	column-count        : 4;
-	column-span         : all;
-	-webkit-column-span : all;
-	-moz-column-span    : all;
+	column-count        : 2;
 	ul+h5{
 		margin-top : 15px;
 	}
@@ -499,32 +592,56 @@ body {
 		page-break-inside           : auto;
 		break-inside                : auto;
 	}
+	&.wide{
+		column-count : 4;
+	}
 }
-//*****************************
-// *         WIDE
-// *****************************/
-.page .wide{
-	column-span         : all;
-	-webkit-column-span : all;
-	-moz-column-span    : all;
-}
+
 //*****************************
 // *       CLASS TABLE
 // *****************************/
 .page .classTable{
-	margin-top          : 25px;
-	margin-bottom       : 40px;
-	border-collapse     : separate;
-	background-color    : white;
-	border              : initial;
-	border-style        : solid;
-	border-image-outset : 25px 17px;
-	border-image-repeat : stretch;
-	border-image-slice  : 150 200 150 200;
-	border-image-source : @frameBorderImage;
-	border-image-width  : 47px;
-	h5{
-		margin-bottom : 10px;
+	th[colspan]:not([rowspan]) {
+		white-space : nowrap;
+	}
+	&.frame {
+		margin-top          : 0.66cm;
+		margin-bottom       : 1.05cm;
+		margin-left         : -0.1cm;
+		margin-right        : -0.1cm;
+		border-collapse     : separate;
+		background-color    : white;
+		border              : initial;
+		border-style        : solid;
+		border-image-outset : 0.55cm 0.3cm;
+		border-image-repeat : stretch;
+		border-image-slice  : 200;
+		border-image-source : @frameBorderImage;
+		border-image-width  : 47px;
+	}
+	&.decoration {
+		transform-style : preserve-3d;
+	}
+	&.decoration::before {
+		content           :'';
+		position          : absolute;
+		background-image  : @classTableDecoration;
+		background-size   : contain;
+		background-repeat : space;
+		width             : 7.75cm;
+		height            : calc(100% + 3.3cm);
+		top               : 50%;
+		left              : 50%;
+		transform         : translateY(-50%) translateX(-50%) translateZ(-1px);
+		filter            : drop-shadow(0px 0px 1px #C8C5C080)
+	}
+	&.decoration.wide::before {
+		width             : calc(100% + 3.3cm);
+		height            : 7.75cm;
+		top               : calc(50% + 0.4cm);
+	}
+	h5 + table{
+		margin-top : 0.2cm;
 	}
 }
 //*****************************
@@ -536,7 +653,7 @@ body {
 	break-inside                : avoid;
 	h1 {
 		text-align    : center;
-		margin-bottom : 0.1cm;
+		margin-bottom : 0cm;
 	}
 	a{
 		display         : table;
@@ -547,7 +664,13 @@ body {
 		}
 	}
 	h4 {
-		margin-top : 0.1cm;
+		margin-top : 0.14cm;
+		& + ul li {
+			line-height: 1.2em;
+		}
+	}
+	& > ul {
+		margin-top: 0.52cm;
 	}
 	ul{
 		padding-left    : 0;
@@ -567,22 +690,22 @@ body {
 				&::after {
 					content       : "";
 					position      : absolute;
-					bottom        : 0.08cm;        /* Set as you want */
+					bottom        : 0.08cm;
 					margin-left   : 0.06cm;        /* Spacing before dot leaders */
 					width         : 100%;
 					border-bottom : 0.05cm dotted #000;
 				}
 			}
 			&:last-child {
-				font-family		 : BookInsanityRemake;
-				font-size   	 : 0.34cm;
-				font-weight		 : normal;
-				color		       : black;
+				font-family    : BookInsanityRemake;
+				font-size      : 0.34cm;
+				font-weight    : normal;
+				color          : black;
 				text-align     : right;
-				vertical-align : bottom;       /* Keep Price text bottom-aligned */
+				vertical-align : bottom; /* Keep page number bottom-aligned */
 				width          : 1%;
-				padding-left   : 0.06cm;       /* Spacing after dot leaders */
-				/*white-space: nowrap;         /* Uncomment if needed */
+				padding-left   : 0.06cm; /* Spacing after dot leaders */
+				/*white-space  : nowrap; /* Uncomment if needed */
 			}
 		}
 		ul { /*List indent*/
@@ -590,7 +713,7 @@ body {
 		}
 	}
 	&.wide{
-		.useColumns(0.96);
+		.useColumns(0.96, @fillMode: balance);
 	}
 }
 
@@ -599,16 +722,14 @@ body {
 // *****************************/
 .page {
 	.block {
-		break-inside : avoid;
-		-webkit-transform   : translateZ(0); //Prevents shadows from breaking across columns
+		break-inside      : avoid;
+		display           : inline-block;
+		min-width         : 100%;
+		//-webkit-transform : translateZ(0); //Prevents shadows from breaking across columns
 	}
 	.inline-block {
 		display : inline-block;
 		text-indent : initial;
-		line-height : 1.3em;
-	}
-	div {
-		column-gap : 0.5cm; //Default spacing if a div uses multicolumns
 	}
 }
 
@@ -619,20 +740,24 @@ body {
 	dl {
 		line-height  : 1.3em;
 		padding-left : 1em;
-		text-indent  : -1em;
+		white-space  : pre-line;
+		& + * {
+			margin-top : 0.28cm;
+		}
 	}
-	dl + p {
-  	margin-top: 0.5em;
+	dl + * {
+  	margin-top : 0.17cm;
   }
 	p + dl {
-		margin-top: -0.5em;
+		margin-top: 0.17cm;
 	}
   dt {
-    float: left;
-    //clear: left;  //Doesn't seem necessary
-    margin-right: 5px;
+    display      : inline;
+    margin-right : 5px;
+		margin-left  : -1em;
   }
   dd {
+		display     : inline;
 		margin-left : 0px;
 		text-indent : 0px;
   }
@@ -649,3 +774,17 @@ body {
 		margin-top: -1em;
 	}
 }
+
+//*****************************
+// *         WIDE
+// *****************************/
+.page .wide{
+	column-span         : all;
+	-webkit-column-span : all;
+	-moz-column-span    : all;
+	display             : block;
+	margin-bottom       : 0.34cm;
+	&+* {
+		margin-top : 0;
+	}
+}

themes/5ePhbLegacy.style.less

@@ -2,12 +2,13 @@
 @import (less) './themes/assets/assets.less';
 @import (less) './themes/phb.depricated.less';
 //Colors
-@background            : #EEE5CE;
-@noteGreen             : #e0e5c1;
-@headerUnderline       : #c9ad6a;
-@horizontalRule        : #9c2b1b;
-@headerText            : #58180D;
-@monsterStatBackground : #FDF1DC;
+@background            : #EEE5CE; // Light parchment
+@noteGreen             : #e0e5c1; // Pastel green
+@headerUnderline       : #c9ad6a; // Gold
+@horizontalRule        : #9c2b1b; // Maroon
+@headerText            : #58180D; // Dark maroon
+@monsterStatBackground : #FDF1DC; // Lighter parchment
+@captionText           : #766649; // Brown
 @page { margin: 0; }
 body {
 	counter-reset : phb-page-numbers;
@@ -230,11 +231,9 @@ body {
 		// Monster Ability table
 		hr+table{
 			margin              : 0;
-			column-span         : 1;
 			background-color    : transparent;
 			border-style        : none;
 			border-image        : none;
-			-webkit-column-span : 1;
 			tbody{
 				tr:nth-child(odd), tr:nth-child(even){
 					background-color : transparent;
@@ -415,7 +414,6 @@ body {
 // *       DESCRIPTIVE TEXT BOX
 // ************************************/
 .phb .descriptive{
-	display             : block-inline;
 	margin-bottom       : 1em;
 	background-color    : #faf7ea;
 	font-family         : ScalySans;
@@ -445,6 +443,35 @@ body {
 .phb pre+.descriptive{
 	margin-top : 8px;
 }
+
+//*****************************
+// *    ARTIST CREDIT BLOCK
+// *****************************/
+.phb {
+	.artist {
+		position    : absolute;
+		text-align  : center;
+		font-family : WalterTurncoat;
+		font-size   : 0.27cm;
+		color       : @captionText;
+		p, p + p {
+			margin      : unset;
+			text-indent : unset;
+			line-height : 1em;
+		}
+	 	h5 {
+			font-size   : 1.3em;
+			font-family : WalterTurncoat;
+		}
+		a{
+			color           : inherit;
+			text-decoration : unset;
+			&:hover {
+				text-decoration : underline;
+			}
+		}
+	}
+}
 //*****************************
 // *      TABLE OF CONTENTS
 // *****************************/

themes/assets/assets.less

@@ -1,3 +1,4 @@
+// PHB
 @footerAccentImage        : data-uri('./themes/assets/footerAccent.png');
 @frameBorderImage         : data-uri('./themes/assets/frameBorder.png');
 @backgroundImage          : data-uri('./themes/assets/parchmentBackground.jpg');
@@ -8,3 +9,18 @@
 @monsterBlockBackground   : data-uri('./themes/assets/parchmentBackgroundGrayscale.jpg');
 @monsterBorderImage       : data-uri('./themes/assets/monsterBorderFancy.png');
 @codeBorderImage          : data-uri('./themes/assets/codeBorder.png');
+@classTableDecoration     : data-uri('./themes/assets/classTableDecoration.png');
+
+// Watercolor Images
+@watercolor1  : data-uri('./themes/assets/watercolor/watercolor1.png');
+@watercolor2  : data-uri('./themes/assets/watercolor/watercolor2.png');
+@watercolor3  : data-uri('./themes/assets/watercolor/watercolor3.png');
+@watercolor4  : data-uri('./themes/assets/watercolor/watercolor4.png');
+@watercolor5  : data-uri('./themes/assets/watercolor/watercolor5.png');
+@watercolor6  : data-uri('./themes/assets/watercolor/watercolor6.png');
+@watercolor7  : data-uri('./themes/assets/watercolor/watercolor7.png');
+@watercolor8  : data-uri('./themes/assets/watercolor/watercolor8.png');
+@watercolor9  : data-uri('./themes/assets/watercolor/watercolor9.png');
+@watercolor10 : data-uri('./themes/assets/watercolor/watercolor10.png');
+@watercolor11 : data-uri('./themes/assets/watercolor/watercolor11.png');
+@watercolor12 : data-uri('./themes/assets/watercolor/watercolor12.png');

themes/fonts/5e legacy/fonts.less

@@ -37,6 +37,12 @@
 	font-weight: normal;
 	font-style: normal;
 }
+@font-face {
+	font-family: WalterTurncoat;
+	src: url('../fonts/5e legacy/WalterTurncoat-Regular.woff2');
+	font-weight: normal;
+	font-style: normal;
+}
 
 /* Headers */
 @font-face {

themes/fonts/5e/fonts.less

@@ -55,6 +55,12 @@
 	font-weight: normal;
 	font-style: normal;
 }
+@font-face {
+	font-family: WalterTurncoat;
+	src: url('../fonts/5e/WalterTurncoat-Regular.woff2');
+	font-weight: normal;
+	font-style: normal;
+}
 
 /* Headers */
 @font-face {