add letter size snippet

Fix minor v3.18.0 issues

.circleci/config.yml

@@ -73,9 +73,6 @@ jobs:
       - run:
           name: Test - Non-Breaking Spaces
           command: npm run test:non-breaking-spaces
-      - run:
-          name: Test - Paragraph Justification
-          command: npm run test:paragraph-justification
       - run:
           name: Test - Variables
           command: npm run test:variables

.stylelintrc.json

@@ -1,48 +1,48 @@
 {
-    "extends": [
-			"stylelint-config-recess-order",
-			"stylelint-config-recommended"],
-    "plugins": [
-			"@stylistic/stylelint-plugin",
-      "./stylelint_plugins/declaration-colon-align.js",
-			"./stylelint_plugins/declaration-colon-min-space-before",
-      "./stylelint_plugins/declaration-block-multi-line-min-declarations"
-    ],
-    "customSyntax": "postcss-less",
-    "rules": {
-			"no-descending-specificity"                                : null,
-			"at-rule-no-unknown"                                       : null,
-			"function-no-unknown"                                      : null,
-			"font-family-no-missing-generic-family-keyword"            : null,
-			"font-weight-notation"                                     : "named-where-possible",
-			"font-family-name-quotes"                                  : "always-unless-keyword",
-			"@stylistic/indentation"                                    : "tab",
-			"no-duplicate-selectors"                                   : true,
-			"@stylistic/color-hex-case"                                 : "upper",
-			"color-hex-length"                                         : "long",
-			"@stylistic/selector-combinator-space-after"                : "always",
-			"@stylistic/selector-combinator-space-before"               : "always",
-			"@stylistic/selector-attribute-operator-space-before"       : "never",
-			"@stylistic/selector-attribute-operator-space-after"        : "never",
-			"@stylistic/selector-attribute-brackets-space-inside"       : "never",
-			"selector-attribute-quotes"                                : "always",
-			"selector-pseudo-element-colon-notation"                   : "double",
-			"@stylistic/selector-pseudo-class-parentheses-space-inside" : "never",
-			"@stylistic/block-opening-brace-space-before"               : "always",
-			"naturalcrit/declaration-colon-min-space-before"           : 1,
-			"@stylistic/declaration-block-trailing-semicolon"           : "always",
-			"@stylistic/declaration-colon-space-after"                  : "always",
-			"@stylistic/number-leading-zero"                            : "always",
-			"function-url-quotes"                                      : ["always", { "except": ["empty"] }],
-			"function-url-scheme-disallowed-list"                      : ["data","http"],
-			"comment-whitespace-inside"                                : "always",
-			"@stylistic/string-quotes"                                  : "single",
-			"@stylistic/media-feature-range-operator-space-before"      : "always",
-			"@stylistic/media-feature-range-operator-space-after"       : "always",
-			"@stylistic/media-feature-parentheses-space-inside"         : "never",
-			"@stylistic/media-feature-colon-space-before"               : "always",
-			"@stylistic/media-feature-colon-space-after"                : "always",
-			"naturalcrit/declaration-colon-align"                      : true,
-			"naturalcrit/declaration-block-multi-line-min-declarations": 1
-    }
+	"extends": [
+		"stylelint-config-recess-order",
+		"stylelint-config-recommended"],
+	"plugins": [
+		"@stylistic/stylelint-plugin",
+		"./stylelint_plugins/declaration-colon-align.js",
+		"./stylelint_plugins/declaration-colon-min-space-before",
+		"./stylelint_plugins/declaration-block-multi-line-min-declarations"
+	],
+	"customSyntax": "postcss-less",
+	"rules": {
+		"no-descending-specificity"                                 : null,
+		"at-rule-no-unknown"                                        : null,
+		"function-no-unknown"                                       : null,
+		"font-family-no-missing-generic-family-keyword"             : null,
+		"font-weight-notation"                                      : "named-where-possible",
+		"font-family-name-quotes"                                   : "always-unless-keyword",
+		"@stylistic/indentation"                                    : "tab",
+		"no-duplicate-selectors"                                    : true,
+		"@stylistic/color-hex-case"                                 : "upper",
+		"color-hex-length"                                          : "long",
+		"@stylistic/selector-combinator-space-after"                : "always",
+		"@stylistic/selector-combinator-space-before"               : "always",
+		"@stylistic/selector-attribute-operator-space-before"       : "never",
+		"@stylistic/selector-attribute-operator-space-after"        : "never",
+		"@stylistic/selector-attribute-brackets-space-inside"       : "never",
+		"selector-attribute-quotes"                                 : "always",
+		"selector-pseudo-element-colon-notation"                    : "double",
+		"@stylistic/selector-pseudo-class-parentheses-space-inside" : "never",
+		"@stylistic/block-opening-brace-space-before"               : "always",
+		"naturalcrit/declaration-colon-min-space-before"            : 1,
+		"@stylistic/declaration-block-trailing-semicolon"           : "always",
+		"@stylistic/declaration-colon-space-after"                  : "always",
+		"@stylistic/number-leading-zero"                            : "always",
+		"function-url-quotes"                                       : ["always", { "except": ["empty"] }],
+		"function-url-scheme-disallowed-list"                       : ["data","http"],
+		"comment-whitespace-inside"                                 : "always",
+		"@stylistic/string-quotes"                                  : "single",
+		"@stylistic/media-feature-range-operator-space-before"      : "always",
+		"@stylistic/media-feature-range-operator-space-after"       : "always",
+		"@stylistic/media-feature-parentheses-space-inside"         : "never",
+		"@stylistic/media-feature-colon-space-before"               : "always",
+		"@stylistic/media-feature-colon-space-after"                : "always",
+		"naturalcrit/declaration-colon-align"                       : true,
+		"naturalcrit/declaration-block-multi-line-min-declarations" : 1
+	}
 }

changelog.md

@@ -77,14 +77,164 @@ pre {
 }
 
 .varSyntaxTable th:first-of-type {
-  width:6cm;
+	width:6cm;
+}
+
+.page .exampleTable td,th {
+	border:1px dashed #00000030;
 }
 ```
 
-
 ## changelog
 For a full record of development, visit our [Github Page](https://github.com/naturalcrit/homebrewery).
 
+### Tuesday 03/18/2025 - v3.18.1
+
+{{taskList
+##### G-Ambatte
+* [x] Revert colon rendering from br elements to blank divs
+
+##### 5e-Cleric
+* [x] Allow for local connections within a same network when running a local version
+Fixes issue [#4094](https://github.com/naturalcrit/homebrewery/issues/4094)
+
+* [x] Add US Letter size page snippet
+Fixes issue [#3893](https://github.com/naturalcrit/homebrewery/issues/3893)
+}}
+
+### Monday 03/10/2025 - v3.18.0
+
+{{taskList
+##### dbolack
+* [x] Add ability to paste in any Share ID/URL into a brew's {{openSans :fas_circle_info: **Properties** :fas_arrow_right: **THEMES**}} selection, as long as that brew has been tagged as `meta:theme`. You can now share your custom brew themes without needing to make a personal copy.
+* [x] Begin migration of custom Markdown extensions into their own NPM packages, for easier adoption by other users or projects
+* [x] Fix external HTML appearing in open codeblocks
+
+Fixes issue [#3206](https://github.com/naturalcrit/homebrewery/issues/3206)
+
+* [x] Fix tables not rendering when directly after text
+
+
+##### G-Ambatte
+* [x] Cleanup of "cover pages" in the {{openSans :fas_rectangle_list: **NAVIGATION**}} list
+* [x] Fix autosave triggering when no changes are present
+
+Fixes issue [#4051](https://github.com/naturalcrit/homebrewery/issues/4051)
+
+* [x] Remove empty table rows resulting from rowspan
+
+Fixes issue [#1729](https://github.com/naturalcrit/homebrewery/issues/1729)
+
+##### 5e-Cleric
+* [x] Style fixes for covers art and logos on A4 size pages
+* [x] Fix crash when trying to open brews that don't exist
+* [x] Tweaks and style update styling on {{openSans **VAULT** :fas_dungeon:}} page.
+
+Fixes issue [#4079](https://github.com/naturalcrit/homebrewery/issues/4079)
+
+##### Calculuschild
+* [x] `꞉꞉꞉꞉` now produces `<br>` instead of a `<div>`
+* [x] Fix typos in tables freezing the editor
+
+Fixes issue [#4059](https://github.com/naturalcrit/homebrewery/issues/4059)
+
+
+##### MollyMaclachlan (New Contributor!)
+* [x] Fixed typos in the Monster Stat Block snippet
+
+Fixes issue [#4073](https://github.com/naturalcrit/homebrewery/issues/4073)
+
+
+##### All
+* [x] Update dependencies and scripts
+* [x] Refactor components and backend tools
+}}
+
+\column
+
+### Thursday 01/30/2025 - v3.17.0
+
+{{taskList
+##### 5e-Cleric
+
+* [x] Update FAQ
+
+* [x] Fix styling for Vault buttons and checkboxes
+
+* [x] Improve navigation bar styling
+
+* [x] Add feature to change username at https://www.naturalcrit.com/account
+
+* [x] Fix Reddit link crash when title has non-latin chars
+
+##### dbolack
+
+* [x] Fix page shadows toolbar option
+
+Fixes issue [#3919](https://github.com/naturalcrit/homebrewery/issues/3919)
+
+* [x] Add `:>>>` syntax for horizontal :>>>>> spaces
+
+* [x] Update Docker install instructions
+
+Fixes issue [#1930](https://github.com/naturalcrit/homebrewery/issues/1930)
+
+* [x] Allow styling pages via `\page{myStyles}` (with calculuschild)
+
+Fixes issue [#3901](https://github.com/naturalcrit/homebrewery/issues/3901) 
+
+* [x] Update Ubuntu install instructions
+
+Fixes issue [#1952](https://github.com/naturalcrit/homebrewery/issues/1952)
+
+* [x] Add `:-:` `:-` `-:` syntax for paragraph alignment, similar to table column alignment; for example:
+
+-: -: Right-aligned
+
+:-: :-: Centered
+
+* [x] Add `:-- 50% --:` syntax to allow setting table column widths by percentage; for example:
+```
+| Narrow  | Wide   |
+|:- 10% -:|:-90%--:|
+|  Cell   | Cell   |
+```
+
+
+| Narrow  | Wide   |
+|:- 10% -:|:-90%--:|
+|Cell     | Cell   |
+{exampleTable}
+
+##### G-Ambatte
+
+* [x] Fix crash when opening brew Properties tab
+
+Fixes issue [#3927](https://github.com/naturalcrit/homebrewery/issues/3927)
+
+* [x] Update error pages with steps to refresh credentials 
+
+Fixes issue [#3955](https://github.com/naturalcrit/homebrewery/issues/3955)
+
+* [x] Add {{openSans :fas_rectangle_list: **NAVIGATION**}} menu to the viewer toolbar
+
+##### calculuschild
+
+* [x] Reduce display lag on large brews
+
+##### Gazook89
+
+* [x] Smarter detection of current page number
+
+Fixes issue [#3824](https://github.com/naturalcrit/homebrewery/issues/3824)
+
+##### All
+* [x] Update dependencies and scripts
+* [x] Refactor components and fix various errors
+}}
+
+\page
+
 ### Wednesday 11/27/2024 - v3.16.1
 
 {{taskList
@@ -2053,4 +2203,4 @@ Massive changelog incoming:
 
 * Added `phb.standalone.css` plus a build system for creating it
 * Added page numbers and footer text
-* Page accent now flips each page
+* Page accent now flips each page

client/admin/admin.jsx

@@ -1,47 +1,48 @@
-require('./admin.less');
-const React = require('react');
-const createClass = require('create-react-class');
-
+import './admin.less';
+import React, { useEffect, useState } from 'react';
 const BrewUtils = require('./brewUtils/brewUtils.jsx');
 const NotificationUtils = require('./notificationUtils/notificationUtils.jsx');
+import AuthorUtils from './authorUtils/authorUtils.jsx';
 
-const tabGroups = ['brew', 'notifications'];
+const tabGroups = ['brew', 'notifications', 'authors'];
 
-const Admin = createClass({
-	getDefaultProps : function() {
-		return {};
-	},
+const Admin = ()=>{
+	const [currentTab, setCurrentTab] = useState('brew');
 
-	getInitialState : function(){
-		return ({
-			currentTab : 'brew'
-		});
-	},
+	useEffect(()=>{
+		setCurrentTab(localStorage.getItem('hbAdminTab'));
+	}, []);
 
-	handleClick : function(newTab){
-		if(this.state.currentTab === newTab) return;
-		this.setState({
-			currentTab : newTab
-		});
-	},
+	useEffect(()=>{
+		localStorage.setItem('hbAdminTab', currentTab);
+	}, [currentTab]);
 
-	render : function(){
-		return <div className='admin'>
+	return (
+		<div className='admin'>
 			<header>
 				<div className='container'>
 					<i className='fas fa-rocket' />
-					homebrewery admin
+					The Homebrewery Admin Page
+					<a href='/'>back to homepage</a>
 				</div>
 			</header>
 			<main className='container'>
 				<nav className='tabs'>
-					{tabGroups.map((tab, idx)=>{ return <button className={tab===this.state.currentTab ? 'active' : ''} key={idx} onClick={()=>{ return this.handleClick(tab); }}>{tab.toUpperCase()}</button>; })}
+					{tabGroups.map((tab, idx)=>(
+						<button
+							className={tab === currentTab ? 'active' : ''}
+							key={idx}
+							onClick={()=>setCurrentTab(tab)}>
+							{tab.toUpperCase()}
+						</button>
+					))}
 				</nav>
-				{this.state.currentTab==='brew' && <BrewUtils />}
-				{this.state.currentTab==='notifications' && <NotificationUtils />}
+				{currentTab === 'brew' && <BrewUtils />}
+				{currentTab === 'notifications' && <NotificationUtils />}
+				{currentTab === 'authors' && <AuthorUtils />}
 			</main>
-		</div>;
-	}
-});
+		</div>
+	);
+};
 
 module.exports = Admin;

client/admin/admin.less

@@ -22,7 +22,7 @@ body {
 }
 
 :where(.admin) {
-
+	padding-bottom : 50px;
 	header {
 		padding          : 20px 0px;
 		margin-bottom    : 30px;
@@ -30,6 +30,7 @@ body {
 		color            : white;
 		background-color : @red;
 		i { margin-right : 30px; }
+		a { float : right; }
 	}
 
 	hr { margin : 30px 0px; }
@@ -48,21 +49,23 @@ body {
 		}
 
 		dl {
-			@maxItemWidth : 132px;
+			display               : grid;
+			grid-template-columns : 120px 1fr;
+			row-gap               : 10px;
+			align-items           : center;
+			justify-items         : start;
+			padding-top           : 0.5em;
 			dt {
-				float      : left;
-				width      : @maxItemWidth;
-				clear      : left;
-				text-align : right;
+				float       : left;
+				clear       : left;
+				height      : fit-content;
+				font-weight : 900;
+				text-align  : right;
 				&::after { content : ' : '; }
 			}
-			dd {
-				height      : 1em;
-				padding     : 0 0 0.5em 0;
-				margin-left : @maxItemWidth + 6px;
-			}
+			dd { height      : fit-content; }
 		}
-
+		
 		.tabs button {
 			margin-right     : 3px;
 			margin-left      : 3px;
@@ -90,11 +93,45 @@ body {
 		}
 	}
 
+	table {
+		padding    : 10px;
+
+		tr {
+			border-bottom : 1px solid;
+			&:last-of-type { border : none; }
+			&:nth-child(even) { background : #DDDDDD; }
+		}
+
+		thead {
+			background    : rgb(193,236,230);
+			border-bottom : 2px solid;
+		}
+        
+		th, td {
+			padding        : 5px 10px;
+			vertical-align : middle;
+			text-align     : center;
+			border-right   : 1px solid;
+
+			&:last-child { border-right : none; }
+		}
+
+		th { font-weight : 900; }
+
+		td {
+			&:first-child {
+				font-weight  : 900;
+				text-align   : left;
+			}
+		}
+	}
+
 	.error {
-		background: rgb(178, 54, 54);
-		color:white;
-		font-weight: 900;
-		margin-block:10px;
-		padding:10px;
+		float        : right;
+		padding      : 10px;
+		margin-block : 10px;
+		font-weight  : 900;
+		color        : white;
+		background   : rgb(178, 54, 54);
 	}
 }

client/admin/authorUtils/authorLookup/authorLookup.jsx

@@ -0,0 +1,87 @@
+import './authorLookup.less';
+
+import React from 'react';
+import request from 'superagent';
+
+const authorLookup = ()=>{
+	const [author, setAuthor] = React.useState('');
+	const [searching, setSearching] = React.useState(false);
+	const [results, setResults] = React.useState([]);
+
+	const lookup = async ()=>{
+		if(!author) return;
+
+		setSearching(true);
+		setResults([]);
+
+		const brews = await request.get(`/admin/user/list/${author}`);
+		setResults(brews.body);
+		setSearching(false);
+	};
+
+	const renderResults = ()=>{
+		if(results.length == 0) return <>
+			<h2>Results</h2>
+			<p>None found.</p>
+		</>;
+
+		return <>
+			<h2>{`Results - ${results.length} brews` }</h2>
+			<table className='resultsTable'>
+				<thead>
+					<tr>
+						<th>Title</th>
+						<th>Share</th>
+						<th>Edit</th>
+						<th>Last Update</th>
+						<th>Storage</th>
+					</tr>
+				</thead>
+				<tbody>
+					{results
+						.sort((a, b)=>{         // Sort brews from most recently updated
+							if(a.updatedAt > b.updatedAt) return -1;
+							return 1;
+						})
+						.map((brew, idx)=>{
+							return <tr key={idx}>
+								<td><strong>{brew.title}</strong></td>
+								<td><a href={`/share/${brew.shareId}`}>{brew.shareId}</a></td>
+								<td>{brew.editId}</td>
+								<td style={{ width: '200px' }}>{brew.updatedAt}</td>
+								<td>{brew.googleId ? 'Google' : 'Homebrewery'}</td>
+							</tr>;
+						})}
+				</tbody>
+			</table>
+		</>;
+	};
+
+	const handleKeyPress = (evt)=>{
+		if(evt.key === 'Enter') return lookup();
+	};
+
+	const handleChange = (evt)=>{
+		setAuthor(evt.target.value);
+	};
+
+	return (
+		<div className='authorLookup'>
+			<div className='authorLookupInputs'>
+				<h2>Author Lookup</h2>
+				<label className='field'>
+					Author Name:
+					<input className='fieldInput' value={author} onKeyDown={handleKeyPress} onChange={handleChange} />
+					<button onClick={lookup}>
+						<i className={`fas ${searching ? 'fa-spin fa-spinner' : 'fa-search'}`} />
+					</button>
+				</label>
+			</div>
+			<div className='authorLookupResults'>
+				{renderResults()}
+			</div>
+		</div>
+	);
+};
+
+module.exports = authorLookup;

client/admin/authorUtils/authorLookup/authorLookup.less

@@ -0,0 +1,29 @@
+.authorLookup {
+	position       : relative;
+	display        : flex;
+	flex-direction : column;
+
+	.field {
+		display               : flex;
+		gap                   : 5px;
+		align-items           : center;
+		justify-items         : stretch;
+		width                 : 100%;
+		margin-bottom         : 20px;
+   
+	
+		input {
+			height        : 33px;
+			padding       : 0px 10px;
+			margin-bottom : unset;
+			font-family   : monospace;
+		}
+	
+		button {
+			width: 50px;
+				
+			i { margin-right : 10px; }
+		}
+	}
+
+}

client/admin/authorUtils/authorUtils.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import AuthorLookup from './authorLookup/authorLookup.jsx';
+
+const authorUtils = ()=>{
+	return (
+		<section className='authorUtils'>
+			<AuthorLookup />
+		</section>
+	);
+};
+
+module.exports = authorUtils;

client/admin/brewUtils/brewCleanup/brewCleanup.jsx

@@ -1,10 +1,8 @@
-require('./brewCleanup.less');
 const React       = require('react');
 const createClass = require('create-react-class');
 
 const request = require('superagent');
 
-
 const BrewCleanup = createClass({
 	displayName : 'BrewCleanup',
 	getDefaultProps(){
@@ -39,9 +37,9 @@ const BrewCleanup = createClass({
 		if(!this.state.primed) return;
 
 		if(!this.state.count){
-			return <div className='removeBox'>No Matching Brews found.</div>;
+			return <div className='result noBrews'>No Matching Brews found.</div>;
 		}
-		return <div className='removeBox'>
+		return <div className='result'>
 			<button onClick={this.cleanup} className='remove'>
 				{this.state.pending
 					? <i className='fas fa-spin fa-spinner' />
@@ -52,7 +50,7 @@ const BrewCleanup = createClass({
 		</div>;
 	},
 	render(){
-		return <div className='BrewCleanup'>
+		return <div className='brewUtil brewCleanup'>
 			<h2> Brew Cleanup </h2>
 			<p>Removes very short brews to tidy up the database</p>
 
@@ -65,7 +63,7 @@ const BrewCleanup = createClass({
 			{this.renderPrimed()}
 
 			{this.state.error
-				&& <div className='error'>{this.state.error.toString()}</div>
+				&& <div className='error noBrews'>{this.state.error.toString()}</div>
 			}
 		</div>;
 	}

client/admin/brewUtils/brewCleanup/brewCleanup.less

@@ -1,9 +0,0 @@
-.BrewCleanup {
-	.removeBox {
-		margin-top : 20px;
-		button {
-			margin-right     : 10px;
-			background-color : @red;
-		}
-	}
-}

client/admin/brewUtils/brewCompress/brewCompress.jsx

@@ -1,10 +1,7 @@
-require('./brewCompress.less');
 const React       = require('react');
 const createClass = require('create-react-class');
-
 const request = require('superagent');
 
-
 const BrewCompress = createClass({
 	displayName : 'BrewCompress',
 	getDefaultProps(){
@@ -53,9 +50,9 @@ const BrewCompress = createClass({
 		if(!this.state.primed) return;
 
 		if(!this.state.count){
-			return <div className='removeBox'>No Matching Brews found.</div>;
+			return <div className='result noBrews'>No Matching Brews found.</div>;
 		}
-		return <div className='removeBox'>
+		return <div className='result'>
 			<button onClick={this.cleanup} className='remove'>
 				{this.state.pending
 					? <i className='fas fa-spin fa-spinner' />
@@ -69,7 +66,7 @@ const BrewCompress = createClass({
 		</div>;
 	},
 	render(){
-		return <div className='BrewCompress'>
+		return <div className='brewUtil brewCompress'>
 			<h2> Brew Compression </h2>
 			<p>Compresses the text in brews to binary</p>
 

client/admin/brewUtils/brewCompress/brewCompress.less

@@ -1,9 +0,0 @@
-.BrewCompress {
-	.removeBox {
-		margin-top : 20px;
-		button {
-			margin-right     : 10px;
-			background-color : @red;
-		}
-	}
-}

client/admin/brewUtils/brewLookup/brewLookup.jsx

@@ -1,5 +1,3 @@
-require('./brewLookup.less');
-
 const React = require('react');
 const createClass = require('create-react-class');
 const cx    = require('classnames');
@@ -55,7 +53,7 @@ const BrewLookup = createClass({
 
 	renderFoundBrew(){
 		const brew = this.state.foundBrew;
-		return <div className='foundBrew'>
+		return <div className='result'>
 			<dl>
 				<dt>Title</dt>
 				<dd>{brew.title}</dd>
@@ -90,7 +88,7 @@ const BrewLookup = createClass({
 	},
 
 	render(){
-		return <div className='brewLookup'>
+		return <div className='brewUtil brewLookup'>
 			<h2>Brew Lookup</h2>
 			<input type='text' value={this.state.query} onChange={this.handleChange} placeholder='edit or share id' />
 			<button onClick={this.lookup}>
@@ -106,7 +104,7 @@ const BrewLookup = createClass({
 
 			{this.state.foundBrew
 				? this.renderFoundBrew()
-				: <div className='noBrew'>No brew found.</div>
+				: <div className='result noBrew'>No brew found.</div>
 			}
 		</div>;
 	}

client/admin/brewUtils/brewLookup/brewLookup.less

@@ -1,6 +0,0 @@
-.brewLookup {
-    .cleanButton {
-        display : inline-block;
-        width   : 100%;
-    }
-}

client/admin/brewUtils/brewUtils.jsx

@@ -1,6 +1,6 @@
 const React = require('react');
 const createClass = require('create-react-class');
-
+require('./brewUtils.less');
 
 const BrewCleanup = require('./brewCleanup/brewCleanup.jsx');
 const BrewLookup = require('./brewLookup/brewLookup.jsx');

client/admin/brewUtils/brewUtils.less

@@ -0,0 +1,29 @@
+.brewUtil {
+	.result {
+		margin-top : 20px;
+		button {
+			margin-right     : 10px;
+			background-color : @red;
+		}
+	}
+	.cleanButton {
+		display : inline-block;
+		width   : 100%;
+	}
+}
+
+.stats {
+	position : relative;
+	
+	.pending {
+		position : absolute;
+		top      : 0.5em;
+		left     : 100px;
+		width    : 100%;
+		height   : 100%;
+	}
+
+	&:has(.pending) { opacity : 0.5; }
+
+	dl { grid-template-columns : 200px 250px; }
+}

client/admin/brewUtils/stats/stats.jsx

@@ -1,11 +1,8 @@
-require('./stats.less');
 const React       = require('react');
 const createClass = require('create-react-class');
-const cx          = require('classnames');
 
 const request = require('superagent');
 
-
 const Stats = createClass({
 	displayName : 'Stats',
 	getDefaultProps(){
@@ -14,7 +11,8 @@ const Stats = createClass({
 	getInitialState(){
 		return {
 			stats : {
-				totalBrews : 0
+				totalBrews          : 0,
+				totalPublishedBrews : 0
 			},
 			fetching : false
 		};
@@ -29,11 +27,13 @@ const Stats = createClass({
 			.finally(()=>this.setState({ fetching: false }));
 	},
 	render(){
-		return <div className='Stats'>
+		return <div className='brewUtil stats'>
 			<h2> Stats </h2>
 			<dl>
 				<dt>Total Brew Count</dt>
 				<dd>{this.state.stats.totalBrews}</dd>
+				<dt>Total Brews Published</dt>
+				<dd>{this.state.stats.totalPublishedBrews}</dd>
 			</dl>
 
 			{this.state.fetching

client/admin/brewUtils/stats/stats.less

@@ -1,13 +0,0 @@
-
-.Stats {
-	position : relative;
-	
-	.pending {
-		position         : absolute;
-		top              : 0px;
-		left             : 0px;
-		width            : 100%;
-		height           : 100%;
-		background-color : rgba(238,238,238, 0.5);
-	}
-}

client/admin/notificationUtils/notificationAdd/notificationAdd.less

@@ -6,18 +6,21 @@
 
 	.field {
 		display               : grid;
-		grid-template-columns : 120px 150px;
+		grid-template-columns : 120px 200px;
 		align-items           : center;
 		justify-items         : stretch;
 		width                 : 100%;
 		margin-bottom         : 20px;
-   
-	
+
 		input {
 			height        : 33px;
 			padding       : 0px 10px;
 			margin-bottom : unset;
 			font-family   : monospace;
+
+			&[type="date"] {
+				width:14ch;
+			}
 		}
 	
 		textarea {

client/admin/notificationUtils/notificationLookup/notificationLookup.less

@@ -1,8 +1,8 @@
-
 .notificationLookup {
 	width     : 450px;
 	height	  : fit-content;
 
+	.noNotification { margin-block : 20px; }
 	.notificationList {
 		display        : flex;
 		flex-direction : column;
@@ -30,11 +30,6 @@
 				font-size   : 20px;
 				font-weight : 900;
 			}
-
-			dl dt{
-				font-weight: 900;
-			}
 		}
 	}
-	.noNotification { margin-block : 20px; }
 }

client/components/combobox.jsx

@@ -45,6 +45,7 @@ const Combobox = createClass({
 	},
 	handleDropdown : function(show){
 		this.setState({
+			value        : show ? '' : this.props.default,
 			showDropdown : show,
 			inputFocused : this.props.autoSuggest.clearAutoSuggestOnClick ? show : false
 		});
@@ -58,10 +59,10 @@ const Combobox = createClass({
 			this.props.onEntry(e);
 		});
 	},
-	handleSelect : function(e){
+	handleSelect : function(value, data=value){
 		this.setState({
-			value : e.currentTarget.getAttribute('data-value')
-		}, ()=>{this.props.onSelect(this.state.value);});
+			value : value
+		}, ()=>{this.props.onSelect(data);});
 		;
 	},
 	renderTextInput : function(){
@@ -78,10 +79,11 @@ const Combobox = createClass({
 						if(!e.target.checkValidity()){
 							this.setState({
 								value : this.props.default
-							}, ()=>this.props.onEntry(e));
+							});
 						}
 					}}
 				/>
+				<i className='fas fa-caret-down'/>
 			</div>
 		);
 	},
@@ -92,11 +94,10 @@ const Combobox = createClass({
 			const filterOn = _.isString(this.props.autoSuggest.filterOn) ? [this.props.autoSuggest.filterOn] : this.props.autoSuggest.filterOn;
 			const filteredArrays = filterOn.map((attr)=>{
 				const children = dropdownChildren.filter((item)=>{
-					if(suggestMethod === 'includes'){
+					if(suggestMethod === 'includes')
 						return item.props[attr]?.toLowerCase().includes(this.state.value.toLowerCase());
-					} else if(suggestMethod === 'startsWith'){
+					if(suggestMethod === 'startsWith')
 						return item.props[attr]?.toLowerCase().startsWith(this.state.value.toLowerCase());
-					}
 				});
 				return children;
 			});
@@ -111,7 +112,7 @@ const Combobox = createClass({
 	},
 	render : function () {
 		const dropdownChildren = this.state.options.map((child, i)=>{
-			const clone = React.cloneElement(child, { onClick: (e)=>this.handleSelect(e) });
+			const clone = React.cloneElement(child, { onClick: ()=>this.handleSelect(child.props.value, child.props.data) });
 			return clone;
 		});
 		return (

client/components/combobox.less

@@ -1,50 +1,46 @@
 .dropdown-container {
-    position:relative;
-    input {
-        width: 100%;
-    }
-    .dropdown-options {
-        position:absolute;
-        background-color: white;
-        z-index: 100;
-        width: 100%;
-        border: 1px solid gray;
-        overflow-y: auto;
-        max-height: 200px;
+	position : relative;
+	input { width : 100%; }
+	.item i {
+		position : absolute;
+		right    : 10px;
+		color    : black;
+	}
+	.dropdown-options {
+		position         : absolute;
+		z-index          : 100;
+		width            : 100%;
+		max-height       : 200px;
+		overflow-y       : auto;
+		background-color : white;
+		border           : 1px solid gray;
 
-        &::-webkit-scrollbar {
-          width: 14px;
-        }
-        &::-webkit-scrollbar-track {
-          background: #ffffff;
-        }
-        &::-webkit-scrollbar-thumb {
-          background-color: #949494;
-          border-radius: 10px;
-          border: 3px solid #ffffff;
-        }
-
-        .item {
-            position:relative;
-            font-size: 11px;
-            font-family: Open Sans;
-            padding: 5px;
-            cursor: default;
-            margin: 0 3px;
-            //border-bottom: 1px solid darkgray;
-            &:hover {
-                filter: brightness(120%);
-                background-color: rgb(163, 163, 163);
-            }
-            .detail {
-                width:100%;
-                text-align: left;
-                color: rgb(124, 124, 124);
-                font-style:italic;
-                font-size: 9px;
-            }
-        }
-
-    }
+		&::-webkit-scrollbar { width : 14px; }
+		&::-webkit-scrollbar-track { background : #FFFFFF; }
+		&::-webkit-scrollbar-thumb {
+			background-color : #949494;
+			border           : 3px solid #FFFFFF;
+			border-radius    : 10px;
+		}
 
+		.item {
+			position    : relative;
+			padding     : 5px;
+			margin      : 0 3px;
+			font-family : "Open Sans";
+			font-size   : 11px;
+			cursor      : default;
+			&:hover {
+				background-color : rgb(163, 163, 163);
+				filter           : brightness(120%);
+			}
+			.detail {
+				width      : 100%;
+				font-size  : 9px;
+				font-style : italic;
+				color      : rgb(124, 124, 124);
+				text-align : left;
+			}
+		}
+	}
 }

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -17,10 +17,9 @@ const dedent = require('dedent-tabs').default;
 const { printCurrentBrew } = require('../../../shared/helpers.js');
 
 import HeaderNav from './headerNav/headerNav.jsx';
-
 import { safeHTML } from './safeHTML.js';
 
-
+const PAGEBREAK_REGEX_V3 = /^(?=\\page(?: *{[^\n{}]*})?$)/m;
 const PAGE_HEIGHT = 1056;
 
 const INITIAL_CONTENT = dedent`
@@ -40,7 +39,7 @@ const BrewPage = (props)=>{
 		...props
 	};
 	const pageRef = useRef(null);
-	const cleanText = safeHTML(props.contents);
+	const cleanText = safeHTML(`${props.contents}\n<div class="columnSplit"></div>\n`);
 
 	useEffect(()=>{
 		if(!pageRef.current) return;
@@ -78,7 +77,7 @@ const BrewPage = (props)=>{
 		};
 	}, []);
 
-	return <div className={props.className} id={`p${props.index + 1}`} data-index={props.index} ref={pageRef} style={props.style}>
+	return <div className={props.className} id={`p${props.index + 1}`} data-index={props.index} ref={pageRef} style={props.style} {...props.attributes}>
 	         <div className='columnWrapper' dangerouslySetInnerHTML={{ __html: cleanText }} />
 	       </div>;
 };
@@ -126,7 +125,7 @@ const BrewRenderer = (props)=>{
 	if(props.renderer == 'legacy') {
 		rawPages = props.text.split('\\page');
 	} else {
-		rawPages = props.text.split(/^\\page$/gm);
+		rawPages = props.text.split(PAGEBREAK_REGEX_V3);
 	}
 
 	const handlePageVisibilityChange = (pageNum, isVisible, isCenter)=>{
@@ -173,20 +172,33 @@ const BrewRenderer = (props)=>{
 
 	const renderPage = (pageText, index)=>{
 
-		const styles = {
+		let styles = {
 			...(!displayOptions.pageShadows ? { boxShadow: 'none' } : {})
 			// Add more conditions as needed
 		};
+		let classes    = 'page';
+		let attributes = {};
 
 		if(props.renderer == 'legacy') {
 			const html = MarkdownLegacy.render(pageText);
 
 			return <BrewPage className='page phb' index={index} key={index} contents={html} style={styles} onVisibilityChange={handlePageVisibilityChange} />;
 		} 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)
-			const html = Markdown.render(pageText, index);
+			if(pageText.startsWith('\\page')) {
+				const firstLineTokens  = Markdown.marked.lexer(pageText.split('\n', 1)[0])[0].tokens;
+				const injectedTags = firstLineTokens.find((obj)=>obj.injectedTags !== undefined)?.injectedTags;
+				if(injectedTags) {
+					styles     = { ...styles, ...injectedTags.styles };
+					styles     = _.mapKeys(styles, (v, k) => k.startsWith('--') ? k : _.camelCase(k)); // Convert CSS to camelCase for React
+					classes    = [classes, injectedTags.classes].join(' ').trim();
+					attributes = injectedTags.attributes;
+				}
+				pageText = pageText.includes('\n') ? pageText.substring(pageText.indexOf('\n') + 1) : ''; // Remove the \page line
+			}
 
-			return <BrewPage className='page' index={index} key={index} contents={html} style={styles} onVisibilityChange={handlePageVisibilityChange} />;
+			let html = Markdown.render(pageText, index);
+
+			return <BrewPage className={classes} index={index} key={index} contents={html} style={styles} attributes={attributes} onVisibilityChange={handlePageVisibilityChange} />;
 		}
 	};
 

client/homebrew/brewRenderer/headerNav/headerNav.jsx

@@ -3,7 +3,6 @@ require('./headerNav.less');
 import * as React from 'react';
 import * as _ from 'lodash';
 
-
 const MAX_TEXT_LENGTH = 40;
 
 const HeaderNav = React.forwardRef(({}, pagesRef)=>{
@@ -11,11 +10,30 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{
 	const renderHeaderLinks = ()=>{
 		if(!pagesRef.current) return;
 
+		// Top Level Pages
+		// Pages that contain an element with a specified class (e.g. cover pages, table of contents)
+		// will NOT have its content scanned for navigation headers, instead displaying a custom label
+		// ---
+		// The property name is class that will be used for detecting the page is a top level page
+		// The property value is a function that returns the text to be used
+
+		const topLevelPages = {
+			'.frontCover'  : (el, pageType)=>{ const text = getHeaderContent(el); return text ? `Cover: ${text}` : 'Cover Page'; },
+			'.insideCover' : (el, pageType)=>{ const text = getHeaderContent(el); return text ? `Interior: ${text}` : 'Interior Cover Page'; },
+			'.partCover'   : (el, pageType)=>{ const text = getHeaderContent(el); return text ? `Section: ${text}` : 'Section Cover Page'; },
+			'.backCover'   : (el, pageType)=>{ const text = getHeaderContent(el); return text ? `Back: ${text}` : 'Rear Cover Page'; },
+			'.toc'         : ()=>{ return 'Table of Contents'; },
+		};
+
+		const getHeaderContent = el => el.querySelector('h1')?.textContent;
+
+		const topLevelPageSelector = Object.keys(topLevelPages).join(',');
+
 		const selector = [
-			'.pages > .page',									// All page elements, which by definition have IDs
-			'.page:not(:has(.toc)) > [id]',						// All direct children of non-ToC .page with an ID (Legacy)
-			'.page:not(:has(.toc)) > .columnWrapper > [id]',	// All direct children of non-ToC .page > .columnWrapper with an ID (V3)
-			'.page:not(:has(.toc)) h2',							// All non-ToC H2 titles, like Monster frame titles
+			'.pages > .page',                                                   // All page elements, which by definition have IDs
+			`.page:not(:has(${topLevelPageSelector})) > [id]`,                  // All direct children of non-excluded .pages with an ID (Legacy)
+			`.page:not(:has(${topLevelPageSelector})) > .columnWrapper > [id]`, // All direct children of non-excluded .page > .columnWrapper with an ID (V3)
+			`.page:not(:has(${topLevelPageSelector})) h2`,                      // All non-excluded H2 titles, like Monster frame titles
 		];
 		const elements = pagesRef.current.querySelectorAll(selector.join(','));
 		if(!elements) return;
@@ -23,45 +41,37 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{
 
 		// navList is a list of objects which have the following structure:
 		// {
-		// 		depth		: how deeply indented the item should be
-		// 		text		: the text to display in the nav link
-		// 		link		: the hyperlink to navigate to when clicked
-		// 		className	: [optional] the class to apply to the nav link for styling
+		// 	depth     : how deeply indented the item should be
+		// 	text      : the text to display in the nav link
+		// 	link      : the hyperlink to navigate to when clicked
+		// 	className : [optional] the class to apply to the nav link for styling
 		// }
 
 		elements.forEach((el)=>{
-			if(el.className.match(/\bpage\b/)) {
-				let text = `Page ${el.id.slice(1)}`;	// The ID of a page *should* always be equal to `p` followed by the page number
-				if(el.querySelector('.toc')){			// If the page contains a table of contents, add "- Contents" to the display text
-					text += ' - Contents';
-				};
-				navList.push({
-					depth     : 0,						// Pages are always at the least indented level
-					text      : text,
-					link      : el.id,
-					className : 'pageLink'
-				});
-				return;
-			}
-			if(el.localName.match(/^h[1-6]/)){			// Header elements H1 through H6
-				navList.push({
-					depth : el.localName[1],			// Depth is set by the header level
-					text  : el.textContent,				// Use `textContent` because `innerText` is affected by rendering, e.g. 'content-visibility: auto'
-					link  : el.id
-				});
-				return;
-			}
-			navList.push({
-				depth : 7,								// All unmatched elements with IDs are set to the maximum depth (7)
-				text  : el.textContent,					// Use `textContent` because `innerText` is affected by rendering, e.g. 'content-visibility: auto'
+			const navEntry = {        // Default structure of a navList entry
+				depth : 7,              // All unmatched elements with IDs are set to the maximum depth (7)
+				text  : el.textContent, // Use `textContent` because `innerText` is affected by rendering, e.g. 'content-visibility: auto'
 				link  : el.id
-			});
-		});
-
-		return _.map(navList, (navItem, index)=>{
-			return <HeaderNavItem {...navItem} key={index} />;
+			}
+			if(el.classList.contains('page')) {
+				let text = `Page ${el.id.slice(1)}`; // Get the page # by trimming off the 'p' from the ID
+				const pageType = Object.keys(topLevelPages).find(pageType => el.querySelector(pageType));
+				if (pageType)
+					text += ` - ${topLevelPages[pageType](el, pageType)}` // If a Top Level Page, add extra label
+
+				navEntry.depth     = 0; // Pages are always at the least indented level
+				navEntry.text      = text;
+				navEntry.className = 'pageLink';
+			}
+			else if(el.localName.match(/^h[1-6]/)){  // Header elements H1 through H6
+				navEntry.depth = el.localName[1];      // Depth is set by the header level
+			}
+			navList.push(navEntry);
 		});
 
+		return _.map(navList, (navItem, index)=>
+			<HeaderNavItem {...navItem} key={index} />
+		);
 	};
 
 	return <nav className='headerNav'>
@@ -69,8 +79,7 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{
 			{renderHeaderLinks()}
 		</ul>
 	</nav>;
-}
-);
+});
 
 const HeaderNavItem = ({ link, text, depth, className })=>{
 

client/homebrew/brewRenderer/headerNav/headerNav.less

@@ -35,11 +35,11 @@
 				font-weight: 900;
 			}
 
-			@depths: 1,2,3,4,5,6,7;
+			@depths: 0,1,2,3,4,5,6,7;
 
 			each(@depths, {
 				&.depth-@{value} {
-					padding-left: ((@value - 1) * 0.5em);
+					padding-left: ((@value) * 0.5em);
 				}
 			});
 		}

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -1,6 +1,7 @@
 require('./notificationPopup.less');
 import React, { useEffect, useState } from 'react';
 import request from '../../utils/request-middleware.js';
+import Markdown from 'naturalcrit/markdown.js';
 
 import Dialog from '../../../components/dialog.jsx';
 
@@ -40,11 +41,10 @@ const NotificationPopup = ()=>{
 
 	const renderNotificationsList = ()=>{
 		if(error) return <div className='error'>{error}</div>;
-
 		return notifications.map((notification)=>(
 			<li key={notification.dismissKey} >
 				<em>{notification.title}</em><br />
-				<p dangerouslySetInnerHTML={{ __html: notification.text }}></p>
+				<p dangerouslySetInnerHTML={{ __html: Markdown.render(notification.text) }}></p>
 			</li>
 		));
 	};

client/homebrew/brewRenderer/notificationPopup/notificationPopup.less

@@ -48,17 +48,46 @@
 	}
 	ul {
 		margin-top          : 15px;
-		font-size           : 0.8em;
+		font-size           : 0.9em;
 		list-style-position : outside;
 		list-style-type     : disc;
 		li {
-			margin-top  : 1.4em;
-			font-size   : 0.8em;
-			line-height : 1.4em;
-			em { 
-				text-transform:capitalize;
-				font-weight : 800;
+			padding-left : 1em;
+			margin-top   : 1.5em;
+			font-size    : 0.9em;
+			line-height  : 1.5em;
+			em {
+				font-weight    : 800; 
+				text-transform : capitalize;
+			}
+			li {
+				margin-top      : 0;
+				line-height     : 1.2em; 
+				list-style-type : square;
 			}
 		}
+		ul ul,ol ol,ul ol,ol ul {
+			margin-bottom : 0px;
+			margin-left   : 1.5em;
+		}
 	}
-}
+
+	/* Markdown styling */
+	code {
+		padding          : 0.1em 0.5em;
+		font-family      : 'Courier New', 'Courier', monospace;
+		overflow-wrap    : break-word;
+		white-space      : pre-wrap;
+		background       : #08115A;
+		border-radius    : 2px;
+	}
+	pre code {
+		display          : inline-block;
+		width            : 100%;
+	}
+	.blank {
+		height : 1em;
+		margin-top: 0;
+		& + * { margin-top: 0; }
+	}
+}

client/homebrew/editor/editor.jsx

@@ -12,7 +12,8 @@ const MetadataEditor = require('./metadataEditor/metadataEditor.jsx');
 
 const EDITOR_THEME_KEY = 'HOMEBREWERY-EDITOR-THEME';
 
-const SNIPPETBAR_HEIGHT = 25;
+const PAGEBREAK_REGEX_V3 = /^(?=\\page(?: *{[^\n{}]*})?$)/m;
+const SNIPPETBAR_HEIGHT  = 25;
 const DEFAULT_STYLE_TEXT = dedent`
 				/*=======---  Example CSS styling  ---=======*/
 				/* Any CSS here will apply to your document! */
@@ -126,15 +127,15 @@ const Editor = createClass({
 	},
 
 	updateCurrentCursorPage : function(cursor) {
-		const lines = this.props.brew.text.split('\n').slice(0, cursor.line + 1);
-		const pageRegex = this.props.brew.renderer == 'V3' ? /^\\page$/ : /\\page/;
+		const lines = this.props.brew.text.split('\n').slice(1, cursor.line + 1);
+		const pageRegex = this.props.brew.renderer == 'V3' ? PAGEBREAK_REGEX_V3 : /\\page/;
 		const currentPage = lines.reduce((count, line)=>count + (pageRegex.test(line) ? 1 : 0), 1);
 		this.props.onCursorPageChange(currentPage);
 	},
 
 	updateCurrentViewPage : function(topScrollLine) {
-		const lines = this.props.brew.text.split('\n').slice(0, topScrollLine + 1);
-		const pageRegex = this.props.brew.renderer == 'V3' ? /^\\page$/ : /\\page/;
+		const lines = this.props.brew.text.split('\n').slice(1, topScrollLine + 1);
+		const pageRegex = this.props.brew.renderer == 'V3' ? PAGEBREAK_REGEX_V3 : /\\page/;
 		const currentPage = lines.reduce((count, line)=>count + (pageRegex.test(line) ? 1 : 0), 1);
 		this.props.onViewPageChange(currentPage);
 	},
@@ -174,7 +175,7 @@ const Editor = createClass({
 
 				for (let i=customHighlights.length - 1;i>=0;i--) customHighlights[i].clear();
 
-				let editorPageCount = 2; // start page count from page 2
+				let editorPageCount = 1; // start page count from page 1
 
 				_.forEach(this.props.brew.text.split('\n'), (line, lineNumber)=>{
 
@@ -190,7 +191,10 @@ const Editor = createClass({
 
 					// Styling for \page breaks
 					if((this.props.renderer == 'legacy' && line.includes('\\page')) ||
-				     (this.props.renderer == 'V3'     && line.match(/^\\page$/))) {
+				     (this.props.renderer == 'V3'     && line.match(PAGEBREAK_REGEX_V3))) {
+
+						if(lineNumber > 0)      // Since \page is optional on first line of document,
+							editorPageCount += 1; // don't use it to increment page count; stay at 1
 
 						// add back the original class 'background' but also add the new class '.pageline'
 						codeMirror.addLineClass(lineNumber, 'background', 'pageLine');
@@ -199,8 +203,6 @@ const Editor = createClass({
 							textContent : editorPageCount
 						});
 						codeMirror.setBookmark({ line: lineNumber, ch: line.length }, pageCountElement);
-
-						editorPageCount += 1;
 					};
 
 					// New Codemirror styling for V3 renderer
@@ -358,7 +360,7 @@ const Editor = createClass({
 		if(!this.isText() || isJumping)
 			return;
 
-		const textSplit  = this.props.renderer == 'V3' ? /^\\page$/gm : /\\page/;
+		const textSplit  = this.props.renderer == 'V3' ? PAGEBREAK_REGEX_V3 : /\\page/;
 		const textString = this.props.brew.text.split(textSplit).slice(0, targetPage-1).join(textSplit);
 		const targetLine = textString.match('\n') ? textString.split('\n').length - 1 : -1;
 
@@ -454,6 +456,7 @@ const Editor = createClass({
 					rerenderParent={this.rerenderParent} />
 				<MetadataEditor
 					metadata={this.props.brew}
+					themeBundle={this.props.themeBundle}
 					onChange={this.props.onMetaChange}
 					reportError={this.props.reportError}
 					userThemes={this.props.userThemes}/>

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -40,6 +40,7 @@ const MetadataEditor = createClass({
 				theme       : '5ePHB',
 				lang        : 'en'
 			},
+
 			onChange    : ()=>{},
 			reportError : ()=>{}
 		};
@@ -47,7 +48,7 @@ const MetadataEditor = createClass({
 
 	getInitialState : function(){
 		return {
-			showThumbnail : true
+			showThumbnail     : true
 		};
 	},
 
@@ -67,6 +68,11 @@ const MetadataEditor = createClass({
 		const inputRules = validations[name] ?? [];
 		const validationErr = inputRules.map((rule)=>rule(e.target.value)).filter(Boolean);
 
+		const debouncedReportValidity = _.debounce((target, errMessage) => {
+			callIfExists(target, 'setCustomValidity', errMessage);
+			callIfExists(target, 'reportValidity');
+		}, 300); // 300ms debounce delay, adjust as needed
+
 		// if no validation rules, save to props
 		if(validationErr.length === 0){
 			callIfExists(e.target, 'setCustomValidity', '');
@@ -74,14 +80,16 @@ const MetadataEditor = createClass({
 				...this.props.metadata,
 				[name] : e.target.value
 			});
+			return true;
 		} else {
 			// if validation issues, display built-in browser error popup with each error.
 			const errMessage = validationErr.map((err)=>{
 				return `- ${err}`;
 			}).join('\n');
 
-			callIfExists(e.target, 'setCustomValidity', errMessage);
-			callIfExists(e.target, 'reportValidity');
+			
+			debouncedReportValidity(e.target, errMessage);
+			return false;
 		}
 	},
 
@@ -112,6 +120,14 @@ const MetadataEditor = createClass({
 	handleTheme : function(theme){
 		this.props.metadata.renderer = theme.renderer;
 		this.props.metadata.theme    = theme.path;
+
+		this.props.onChange(this.props.metadata, 'theme');
+	},
+
+	handleThemeWritein : function(e) {
+		const shareId = e.target.value.split('/').pop(); //Extract just the ID if a URL was pasted in
+		this.props.metadata.theme = shareId;
+
 		this.props.onChange(this.props.metadata, 'theme');
 	},
 
@@ -200,7 +216,7 @@ const MetadataEditor = createClass({
 				if(theme.path == this.props.metadata.shareId) return;
 				const preview = theme.thumbnail || `/themes/${theme.renderer}/${theme.path}/dropdownPreview.png`;
 				const texture = theme.thumbnail || `/themes/${theme.renderer}/${theme.path}/dropdownTexture.png`;
-				return <div className='item' key={`${renderer}_${theme.name}`} onClick={()=>this.handleTheme(theme)} title={''}>
+				return <div className='item' key={`${renderer}_${theme.name}`} value={`${theme.author ?? renderer} : ${theme.name}`} data={theme} title={''}>
 					{theme.author ?? renderer} : {theme.name}
 					<div className='texture-container'>
 						<img src={texture}/>
@@ -210,26 +226,40 @@ const MetadataEditor = createClass({
 						<img src={preview}/>
 					</div>
 				</div>;
-			});
+			}).filter(Boolean);
 		};
 
 		const currentRenderer = this.props.metadata.renderer;
-		const currentTheme    = mergedThemes[`${_.upperFirst(this.props.metadata.renderer)}`][this.props.metadata.theme]
-													?? { name: `!!! THEME MISSING !!! ID=${this.props.metadata.theme}` };
+		const currentThemeDisplay = this.props.themeBundle?.name ? `${this.props.themeBundle.author ?? currentRenderer} : ${this.props.themeBundle.name}` : 'No Theme Selected';
 		let dropdown;
 
 		if(currentRenderer == 'legacy') {
 			dropdown =
-				<Nav.dropdown className='disabled value' trigger='disabled'>
-					<div> {`Themes are not supported in the Legacy Renderer`} <i className='fas fa-caret-down'></i> </div>
-				</Nav.dropdown>;
+				<div className='disabled value' trigger='disabled'>
+					<div> Themes are not supported in the Legacy Renderer </div>
+				</div>;
 		} else {
 			dropdown =
-				<Nav.dropdown className='value' trigger='click'>
-					<div> {currentTheme.author ?? _.upperFirst(currentRenderer)} : {currentTheme.name} <i className='fas fa-caret-down'></i> </div>
-
-					{listThemes(currentRenderer)}
-				</Nav.dropdown>;
+				<div className='value'>
+					<Combobox trigger='click'
+						className='themes-dropdown'
+						default={currentThemeDisplay}
+						placeholder='Select from below, or enter the Share URL or ID of a brew with the meta:theme tag'
+						onSelect={(value)=>this.handleTheme(value)}
+						onEntry={(e)=>{
+							e.target.setCustomValidity('');	//Clear the validation popup while typing
+							if(this.handleFieldChange('theme', e))
+								this.handleThemeWritein(e);
+						}}
+						options={listThemes(currentRenderer)}
+						autoSuggest={{
+							suggestMethod           : 'includes',
+							clearAutoSuggestOnClick : true,
+							filterOn                : ['value', 'title']
+						}}
+					/>
+					<small>Select from the list below (built-in themes and brews you have tagged "meta:theme"), or paste in the Share URL or Share ID of any brew.</small>
+				</div>;
 		}
 
 		return <div className='field themes'>
@@ -244,15 +274,13 @@ const MetadataEditor = createClass({
 			return _.map(langCodes.sort(), (code, index)=>{
 				const localName = new Intl.DisplayNames([code], { type: 'language' });
 				const englishName = new Intl.DisplayNames('en', { type: 'language' });
-				return <div className='item' title={`${englishName.of(code)}`} key={`${index}`} data-value={`${code}`} data-detail={`${localName.of(code)}`}>
-					{`${code}`}
-					<div className='detail'>{`${localName.of(code)}`}</div>
+				return <div className='item' title={englishName.of(code)} key={`${index}`} value={code} detail={localName.of(code)}>
+					{code}
+					<div className='detail'>{localName.of(code)}</div>
 				</div>;
 			});
 		};
 
-		const debouncedHandleFieldChange =  _.debounce(this.handleFieldChange, 500);
-
 		return <div className='field language'>
 			<label>language</label>
 			<div className='value'>
@@ -263,16 +291,15 @@ const MetadataEditor = createClass({
 					onSelect={(value)=>this.handleLanguage(value)}
 					onEntry={(e)=>{
 						e.target.setCustomValidity('');	//Clear the validation popup while typing
-						debouncedHandleFieldChange('lang', e);
+						this.handleFieldChange('lang', e);
 					}}
 					options={listLanguages()}
 					autoSuggest={{
 						suggestMethod           : 'startsWith',
 						clearAutoSuggestOnClick : true,
-						filterOn                : ['data-value', 'data-detail', 'title']
+						filterOn                : ['value', 'detail', 'title']
 					}}
-				>
-				</Combobox>
+				/>
 				<small>Sets the HTML Lang property for your brew. May affect hyphenation or spellcheck.</small>
 			</div>
 
@@ -345,7 +372,7 @@ const MetadataEditor = createClass({
 				placeholder='add tag' unique={true}
 				values={this.props.metadata.tags}
 				onChange={(e)=>this.handleFieldChange('tags', e)}
-				/>
+			/>
 
 			<div className='field systems'>
 				<label>systems</label>
@@ -370,7 +397,7 @@ const MetadataEditor = createClass({
 				values={this.props.metadata.invitedAuthors}
 				notes={['Invited author usernames are case sensitive.', 'After adding an invited author, send them the edit link. There, they can choose to accept or decline the invitation.']}
 				onChange={(e)=>this.handleFieldChange('invitedAuthors', e)}
-				/>
+			/>
 
 			<h2>Privacy</h2>
 

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -1,9 +1,12 @@
 @import 'naturalcrit/styles/colors.less';
 
+.userThemeName {
+	padding-left: 10px;
+	padding-right: 10px;
+}
 
 .metadataEditor {
 	position         : absolute;
-	z-index          : 5;
 	box-sizing       : border-box;
 	width            : 100%;
 	height           : calc(100vh - 54px); // 54px is the height of the navbar + snippet bar.  probably a better way to dynamic get this.
@@ -71,8 +74,7 @@
 			border : 1px solid gray;
 			&:focus { outline : 1px solid #444444; }
 		}
-		&.thumbnail {
-			height      : 1.4em;
+		&.thumbnail, &.themes{
 			label { line-height : 2.0em; }
 			.value {
 				overflow      : hidden;
@@ -88,6 +90,17 @@
 			}
 		}
 
+		&.themes{
+			.value {
+				overflow      : visible;
+				text-overflow : auto;
+			}
+			button {
+				padding-left: 5px;
+				padding-right: 5px;
+			}
+		}
+
 		&.description {
 			flex : 1;
 			textarea.value {
@@ -156,89 +169,73 @@
 	}
 
 	.themes.field {
-		.navDropdownContainer {
+		& .dropdown-container {
 			position         : relative;
 			z-index          : 100;
 			background-color : white;
-			&.disabled {
-				font-style       : italic;
-				color            : dimgray;
-				background-color : darkgray;
-			}
-			& > div:first-child {
-				padding           : 3px 3px;
-				background-color  : inherit;
-				border            : 1px solid gray;
-				i { float	: right; }
-				&:hover {
-					color            : white;
-					background-color : @blue;
+		}
+		& .dropdown-options {
+			overflow-y : visible;
+		}
+		.disabled {
+			font-style       : italic;
+			color            : dimgray;
+			background-color : darkgray;
+		}
+		.item {
+			position          : relative;
+			padding           : 3px 3px;
+			overflow          : visible;
+			background-color  : white;
+			border-top        : 1px solid rgb(118, 118, 118);
+			.preview {
+				position       : absolute;
+				top            : 0;
+				right          : 0;
+				z-index        : 1;
+				display        : flex;
+				flex-direction : column;
+				width          : 200px;
+				overflow       : hidden;
+				color          : black;
+				background     : #CCCCCC;
+				border-radius  : 5px;
+				box-shadow     : 0 0 5px black;
+				opacity        : 0;
+				transition     : opacity 250ms ease;
+				h6 {
+					padding-block  : 0.5em;
+					padding-inline : 1em;
+					font-weight    : 900;
+					border-bottom  : 2px solid hsl(0,0%,40%);
 				}
 			}
-			.navDropdown .item > p {
-				width         : 45%;
-				height        : 1.1em;
-				overflow      : hidden;
-				text-overflow : ellipsis;
-				white-space   : nowrap;
-			}			
-			.navDropdown {
-				position	  : absolute;
-				width		    : 100%;
-				box-shadow	: 0px 5px 10px rgba(0, 0, 0, 0.3);
-				.item {
-					position          : relative;
-					padding           : 3px 3px;
-					overflow          : visible;
-					background-color  : white;
-					border-top        : 1px solid rgb(118, 118, 118);
-					.preview {
-						position       : absolute;
-						top            : 0;
-						right          : 0;
-						z-index        : 1;
-						display        : flex;
-						flex-direction : column;
-						width          : 200px;
-						overflow       : hidden;
-						color          : black;
-						background     : #CCCCCC;
-						border-radius  : 5px;
-						box-shadow     : 0 0 5px black;
-						opacity        : 0;
-						transition     : opacity 250ms ease;
-						h6 {
-							padding-block  : 0.5em;
-							padding-inline : 1em;
-							font-weight    : 900;
-							border-bottom  : 2px solid hsl(0,0%,40%);
-						}
-					}
-					&:hover {
-						color            : white;
-						background-color : @blue;
-					}
-					&:hover > .preview { opacity : 1; }
-					.texture-container {
-						position   : absolute;
-						top        : 0;
-						left       : 0;
-						width      : 100%;
-						height     : 100%;
-						min-height : 100%;
-						overflow   : hidden;
-						> img {
-							position            : absolute;
-							top                 : 0px;
-							right               : 0;
-							width               : 50%;
-							min-height          : 100%;
-							-webkit-mask-image  : linear-gradient(90deg, transparent, black 20%);
-							mask-image          : linear-gradient(90deg, transparent, black 20%);
-						}
-					}
+
+			.texture-container {
+				position   : absolute;
+				top        : 0;
+				left       : 0;
+				width      : 100%;
+				height     : 100%;
+				min-height : 100%;
+				overflow   : hidden;
+				> img {
+					position            : absolute;
+					top                 : 0;
+					right               : 0;
+					width               : 50%;
+					min-height          : 100%;
+					-webkit-mask-image  : linear-gradient(90deg, transparent, black 20%);
+					mask-image          : linear-gradient(90deg, transparent, black 20%);
 				}
 			}
+
+			&:hover {
+				color            : white;
+				background-color : @blue;
+				filter           : unset;
+			}
+			&:hover > .preview { opacity : 1; }
 		}
 	}
 

client/homebrew/editor/metadataEditor/validations.js

@@ -27,6 +27,19 @@ module.exports = {
 		(value)=>{
 			return new RegExp(/^([a-zA-Z]{2,3})(-[a-zA-Z]{4})?(-(?:[0-9]{3}|[a-zA-Z]{2}))?$/).test(value) === false && (value.length > 0) ? 'Invalid language code.' : null;
 		}
+	],
+	theme: [
+		(value) => {
+			const URL = global.config.baseUrl.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'); //Escape any regex characters
+			const shareIDPattern = '[a-zA-Z0-9-_]{12}';
+			const shareURLRegex  = new RegExp(`^${URL}\\/share\\/${shareIDPattern}$`);
+			const shareIDRegex   = new RegExp(`^${shareIDPattern}$`);
+			if (value?.length === 0)       return null;
+			if (shareURLRegex.test(value)) return null;
+			if (shareIDRegex.test(value))  return null;
+
+			return 'Must be a valid Share URL or a 12-character ID.';
+		}	
 	]
 };
 

client/homebrew/navbar/error-navitem.jsx

@@ -116,6 +116,19 @@ const ErrorNavItem = createClass({
 			</Nav.item>;
 		}
 
+		if(HBErrorCode === '10') {
+			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+				Oops!
+				<div className='errorContainer' onClick={clearError}>
+					Looks like the brew you have selected
+					as a theme is not tagged for use as a
+					theme. Verify that
+					brew <a className='lowercase' target='_blank' rel='noopener noreferrer' href={`/share/${response.body.brewId}`}>
+						{response.body.brewId}</a> has the <span className='lowercase'>meta:theme</span> tag!
+				</div>
+			</Nav.item>;
+		}
+
 		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
 			Oops!
 			<div className='errorContainer'>

client/homebrew/pages/basePages/uiPage/uiPage.less

@@ -60,9 +60,11 @@
 				list-style   : square;
 			}
 			.blank {
-				height     : 1em;
-				margin-top : 0;
-				& + * { margin-top : 0; }
+				height: 1em;
+				margin-top: 0;
+				& + * {
+					margin-top: 0;
+				}
 			}
 		}
 	}

client/homebrew/pages/editPage/editPage.jsx

@@ -102,6 +102,14 @@ const EditPage = createClass({
 		window.onbeforeunload = function(){};
 		document.removeEventListener('keydown', this.handleControlKeys);
 	},
+	componentDidUpdate : function(){
+		const hasChange = this.hasChanges();
+		if(this.state.isPending != hasChange){
+			this.setState({
+				isPending : hasChange
+			});
+		}
+	},
 
 	handleControlKeys : function(e){
 		if(!(e.ctrlKey || e.metaKey)) return;
@@ -138,15 +146,13 @@ const EditPage = createClass({
 
 		this.setState((prevState)=>({
 			brew       : { ...prevState.brew, text: text },
-			isPending  : true,
 			htmlErrors : htmlErrors,
 		}), ()=>{if(this.state.autoSave) this.trySave();});
 	},
 
 	handleStyleChange : function(style){
 		this.setState((prevState)=>({
-			brew      : { ...prevState.brew, style: style },
-			isPending : true
+			brew : { ...prevState.brew, style: style }
 		}), ()=>{if(this.state.autoSave) this.trySave();});
 	},
 
@@ -158,8 +164,7 @@ const EditPage = createClass({
 			brew : {
 				...prevState.brew,
 				...metadata
-			},
-			isPending : true,
+			}
 		}), ()=>{if(this.state.autoSave) this.trySave();});
 	},
 
@@ -247,16 +252,17 @@ const EditPage = createClass({
 			});
 		if(!res) return;
 
-		this.savedBrew = res.body;
+		this.savedBrew = {
+			...this.state.brew,
+			googleId : res.body.googleId ? res.body.googleId : null,
+			editId 	 : res.body.editId,
+			shareId  : res.body.shareId,
+			version  : res.body.version
+		};
 		history.replaceState(null, null, `/edit/${this.savedBrew.editId}`);
 
-		this.setState((prevState)=>({
-			brew : { ...prevState.brew,
-				googleId : this.savedBrew.googleId ? this.savedBrew.googleId : null,
-				editId 	 : this.savedBrew.editId,
-				shareId  : this.savedBrew.shareId,
-				version  : this.savedBrew.version
-			},
+		this.setState(()=>({
+			brew        : this.savedBrew,
 			isPending   : false,
 			isSaving    : false,
 			unsavedTime : new Date()
@@ -311,7 +317,14 @@ const EditPage = createClass({
 	},
 
 	renderSaveButton : function(){
-		if(this.state.autoSaveWarning && this.hasChanges()){
+
+		// #1 - Currently saving, show SAVING
+		if(this.state.isSaving){
+			return <Nav.item className='save' icon='fas fa-spinner fa-spin'>saving...</Nav.item>;
+		}
+
+		// #2 - Unsaved changes exist, autosave is OFF and warning timer has expired, show AUTOSAVE WARNING
+		if(this.state.isPending && this.state.autoSaveWarning){
 			this.setAutosaveWarning();
 			const elapsedTime = Math.round((new Date() - this.state.unsavedTime) / 1000 / 60);
 			const text = elapsedTime == 0 ? 'Autosave is OFF.' : `Autosave is OFF, and you haven't saved for ${elapsedTime} minutes.`;
@@ -324,18 +337,17 @@ const EditPage = createClass({
 			</Nav.item>;
 		}
 
-		if(this.state.isSaving){
-			return <Nav.item className='save' icon='fas fa-spinner fa-spin'>saving...</Nav.item>;
+		// #3 - Unsaved changes exist, click to save, show SAVE NOW
+		// Use trySave(true) instead of save() to use debounced save function
+		if(this.state.isPending){
+			return <Nav.item className='save' onClick={()=>this.trySave(true)} color='blue' icon='fas fa-save'>Save Now</Nav.item>;
 		}
-		if(this.state.isPending && this.hasChanges()){
-			return <Nav.item className='save' onClick={this.save} color='blue' icon='fas fa-save'>Save Now</Nav.item>;
-		}
-		if(!this.state.isPending && !this.state.isSaving && this.state.autoSave){
+		// #4 - No unsaved changes, autosave is ON, show AUTO-SAVED
+		if(this.state.autoSave){
 			return <Nav.item className='save saved'>auto-saved.</Nav.item>;
 		}
-		if(!this.state.isPending && !this.state.isSaving){
-			return <Nav.item className='save saved'>saved.</Nav.item>;
-		}
+		// DEFAULT - No unsaved changes, show SAVED
+		return <Nav.item className='save saved'>saved.</Nav.item>;
 	},
 
 	handleAutoSave : function(){
@@ -379,7 +391,7 @@ const EditPage = createClass({
 		const title = `${this.props.brew.title} ${systems}`;
 		const text = `Hey guys! I've been working on this homebrew. I'd love your feedback. Check it out.
 
-**[Homebrewery Link](${global.config.publicUrl}/share/${shareLink})**`;
+**[Homebrewery Link](${global.config.baseUrl}/share/${shareLink})**`;
 
 		return `https://www.reddit.com/r/UnearthedArcana/submit?title=${encodeURIComponent(title.toWellFormed())}&text=${encodeURIComponent(text)}`;
 	},
@@ -410,7 +422,7 @@ const EditPage = createClass({
 					<Nav.item color='blue' href={`/share/${shareLink}`}>
 						view
 					</Nav.item>
-					<Nav.item color='blue' onClick={()=>{navigator.clipboard.writeText(`${global.config.publicUrl}/share/${shareLink}`);}}>
+					<Nav.item color='blue' onClick={()=>{navigator.clipboard.writeText(`${global.config.baseUrl}/share/${shareLink}`);}}>
 						copy url
 					</Nav.item>
 					<Nav.item color='blue' href={this.getRedditLink()} newTab={true} rel='noopener noreferrer'>
@@ -443,6 +455,7 @@ const EditPage = createClass({
 						reportError={this.errorReported}
 						renderer={this.state.brew.renderer}
 						userThemes={this.props.userThemes}
+						themeBundle={this.state.themeBundle}
 						snippetBundle={this.state.themeBundle.snippets}
 						updateBrew={this.updateBrew}
 						onCursorPageChange={this.handleEditorCursorPageChange}

client/homebrew/pages/errorPage/errors/errorIndex.js

@@ -2,6 +2,11 @@ const dedent = require('dedent-tabs').default;
 
 const loginUrl = 'https://www.naturalcrit.com/login';
 
+// Prevent parsing text (e.g. document titles) as markdown
+const escape = (text = '')=>{
+	return text.split('').map((char)=>`&#${char.charCodeAt(0)};`).join('');
+};
+
 //001-050 : Brew errors
 //050-100 : Other pages errors
 
@@ -89,7 +94,7 @@ const errorIndex = (props)=>{
 		
 		:
 
-		**Brew Title:** ${props.brew.brewTitle || 'Unable to show title'}
+		**Brew Title:** ${escape(props.brew.brewTitle) || 'Unable to show title'}
 
 		**Current Authors:** ${props.brew.authors?.map((author)=>{return `[${author}](/user/${author})`;}).join(', ') || 'Unable to list authors'}
 		
@@ -104,7 +109,7 @@ const errorIndex = (props)=>{
 		
 		:
 
-		**Brew Title:** ${props.brew.brewTitle || 'Unable to show title'}
+		**Brew Title:** ${escape(props.brew.brewTitle) || 'Unable to show title'}
 
 		**Current Authors:** ${props.brew.authors?.map((author)=>{return `[${author}](/user/${author})`;}).join(', ') || 'Unable to list authors'}
 
@@ -162,6 +167,14 @@ const errorIndex = (props)=>{
 		**Requested access:** ${props.brew.accessType}
 
 		**Brew ID:**  ${props.brew.brewId}`,
+		
+		// Theme Not Valid
+		'10' : dedent`
+		## The selected theme is not tagged as a theme.
+		
+		The brew selected as a theme exists, but has not been marked for use as a theme with the \`theme:meta\` tag.
+		
+		If the selected brew is your document, you may designate it as a theme by adding the \`theme:meta\` tag.`,
 
 		//account page when account is not defined
 		'50' : dedent`
@@ -181,7 +194,7 @@ const errorIndex = (props)=>{
 
 		**Brew ID:**  ${props.brew.brewId}
 		
-		**Brew Title:** ${props.brew.brewTitle}`,
+		**Brew Title:** ${escape(props.brew.brewTitle)}`,
 
 		// ####### Admin page error #######
 		'52' : dedent`

client/homebrew/pages/newPage/newPage.jsx

@@ -233,6 +233,7 @@ const NewPage = createClass({
 					onMetaChange={this.handleMetaChange}
 					renderer={this.state.brew.renderer}
 					userThemes={this.props.userThemes}
+					themeBundle={this.state.themeBundle}
 					snippetBundle={this.state.themeBundle.snippets}
 					onCursorPageChange={this.handleEditorCursorPageChange}
 					onViewPageChange={this.handleEditorViewPageChange}

client/homebrew/pages/vaultPage/vaultPage.jsx

@@ -99,14 +99,14 @@ const VaultPage = (props)=>{
 		setSearching(true);
 		setError(null);
 
-		const title  = titleRef.current.value || '';
-		const author = authorRef.current.value || '';
-		const count  = countRef.current.value || 10;
-		const v3     = v3Ref.current.checked != false;
-		const legacy = legacyRef.current.checked != false;
+		const title      = titleRef.current.value || '';
+		const author     = authorRef.current.value || '';
+		const count      = countRef.current.value || 10;
+		const v3         = v3Ref.current.checked != false;
+		const legacy     = legacyRef.current.checked != false;
 		const sortOption = sort || 'title';
-		const dirOption = dir || 'asc';
-		const pageProp = page || 1;
+		const dirOption  = dir || 'asc';
+		const pageProp   = page || 1;
 
 		setSort(sortOption);
 		setdir(dirOption);
@@ -247,7 +247,7 @@ const VaultPage = (props)=>{
 					</li>
 					<li>
 						Some common words like "a", "after", "through", "itself", "here", etc.,
-						are ignored in searches. The full list can be found &nbsp;
+						are ignored in searches. The full list can be found&nbsp;
 						<a href='https://github.com/mongodb/mongo/blob/0e3b3ca8480ddddf5d0105d11a94bd4698335312/src/mongo/db/fts/stop_words_english.txt'>
 							here
 						</a>
@@ -286,9 +286,9 @@ const VaultPage = (props)=>{
 	};
 
 	const renderPaginationControls = ()=>{
-		if(!totalBrews) return null;
+		if(!totalBrews || totalBrews < 10) return null;
 
-		const countInt = parseInt(props.query.count || 20);
+		const countInt = parseInt(brewCollection.length || 20);
 		const totalPages = Math.ceil(totalBrews / countInt);
 
 		let startPage, endPage;
@@ -355,7 +355,7 @@ const VaultPage = (props)=>{
 	};
 
 	const renderFoundBrews = ()=>{
-		if(searching) {
+		if(searching && !brewCollection) {
 			return (
 				<div className='foundBrews searching'>
 					<h3 className='searchAnim'>Searching</h3>
@@ -395,6 +395,7 @@ const VaultPage = (props)=>{
 					{`Brews found: `}
 					<span>{totalBrews}</span>
 				</span>
+				{brewCollection.length > 10 && renderPaginationControls()}
 				{brewCollection.map((brew, index)=>{
 					return (
 						<BrewItem
@@ -415,14 +416,14 @@ const VaultPage = (props)=>{
 			<link href='/themes/V3/Blank/style.css' rel='stylesheet' />
 			<link href='/themes/V3/5ePHB/style.css' rel='stylesheet' />
 			{renderNavItems()}
-			<div className="content">
-			<SplitPane showDividerButtons={false}>
-				<div className='form dataGroup'>{renderForm()}</div>
-				<div className='resultsContainer dataGroup'>
-					{renderSortBar()}
-					{renderFoundBrews()}
-				</div>
-			</SplitPane>
+			<div className='content'>
+				<SplitPane showDividerButtons={false}>
+					<div className='form dataGroup'>{renderForm()}</div>
+					<div className='resultsContainer dataGroup'>
+						{renderSortBar()}
+						{renderFoundBrews()}
+					</div>
+				</SplitPane>
 			</div>
 		</div>
 	);

client/homebrew/pages/vaultPage/vaultPage.less

@@ -5,7 +5,7 @@
 
 	*:not(input) { user-select : none; }
 
-	.content .dataGroup {
+	:where(.content .dataGroup) {
 		width      : 100%;
 		height     : 100%;
 		background : white;
@@ -169,9 +169,10 @@
 				width            : 100%;
 				height           : 100%;
 				max-height       : 100%;
-				padding          : 50px 50px 70px 50px;
+				padding          : 70px 50px;
 				overflow-y       : scroll;
 				background-color : #2C3E50;
+				container-type   : inline-size;
 
 				h3 { font-size : 25px; }
 
@@ -236,6 +237,7 @@
 					margin-right     : 40px;
 					color            : black;
 					isolation        : isolate;
+					transition       : width 0.5s;
 						
 					&::after {
 						position         : absolute;
@@ -269,8 +271,8 @@
 					.links { z-index : 2; }
 
 					hr {
-						margin     : 0px;
 						visibility : hidden;
+						margin     : 0px;
 					}
 
 					.thumbnail { z-index : -1; }
@@ -278,30 +280,37 @@
 
 				.paginationControls {
 					position              : absolute;
+					top                   : 35px;
 					left                  : 50%;
 					display               : grid;
 					grid-template-areas   : 'previousPage currentPage nextPage';
 					grid-template-columns : 50px 1fr 50px;
+					gap                   : 20px;
 					place-items           : center;
 					width                 : auto;
+					font-size             : 15px;
 					translate             : -50%;
 
+					&:last-child { top : unset; }
+
 					.pages {
 						display         : flex;
 						grid-area       : currentPage;
+						gap             : 1em;
 						justify-content : space-evenly;
 						width           : 100%;
 						height          : 100%;
-						padding         : 5px 8px;
 						text-align      : center;
 
 						.pageNumber {
-							margin-inline           : 1vw;
+							place-content           : center;
+							width                   : fit-content;
+							min-width               : 2em;
 							font-family             : 'Open Sans';
 							font-weight             : 900;
 							color                   : white;
-							text-underline-position : under;
 							text-wrap               : nowrap;
+							text-underline-position : under;
 							cursor                  : pointer;
 
 							&.currentPage {
@@ -329,7 +338,6 @@
 			}
 		}
 	}
-	
 }
 
 @keyframes trailingDots {
@@ -344,8 +352,7 @@
 	100% { content : ' ...'; }
 }
 
-// media query for when the page is smaller than 1079 px in width
-@media screen and (max-width : 1079px) {
+@container (width < 670px) {
 	.vaultPage {
 
 		.dataGroup.form .brewLookup { padding : 1px 20px 20px 10px; }

install/README.UBUNTU.md

@@ -24,12 +24,16 @@ These instructions assume that you are installing to a completely new, fresh Ubu
 
 These installation instructions have been tested on the following Ubuntu releases:
 
-- *ubuntu-20.04.3-desktop-amd64*
+  - *ubuntu-24.04.1-desktop-amd64*
+  - *ubuntu-22.04.5-desktop-amd64*
+  - *ubuntu-20.04.6-desktop-amd64*
 
 ## Final Notes
 
 While this installation process works successfully at the time of writing (December 19, 2021), it relies on all of the Node.JS packages used in the HomeBrewery project retaining their cross-platform capabilities to continue to function. This is one of the inherent advantages of Node.JS, but it is by no means guaranteed and as such, functionality or even installation may fail without warning at some point in the future.
 
+Earlier versions of Ubuntu may requier an alternate Mongo setup, see https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-ubuntu/ for assistance.
+
 Regards,  
 G  
 December 19, 2021

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

@@ -3,7 +3,8 @@ Description=Homebrewery Web Server
 
 [Service]
 User=root
-After=mongodb
+BindsTo=mongod.service
+After=mongod.service
 Environment=NODE_ENV=local
 WorkingDirectory=/usr/local/homebrewery
 ExecStart=node server.js

install/ubuntu/install.sh

@@ -1,14 +1,60 @@
 #!/bin/sh
 
+# Detect Ubuntu Version
+export DISTRO=$(grep "^NAME=" /etc/os-release | awk -F '=' '{print $2}' | sed 's/"//g')
+export DISTRO_VER=$(grep "VERSION_ID=" /etc/os-release | awk -F '=' '{print $2}' | sed 's/"//g')
+export MATCHED="Yes"
+
+if [ "${DISTRO}" != "Ubuntu" ]; 
+then
+  echo :: Ubuntu not detected. Are you using an alternate spin or derivative?
+  echo ::  Detected - ${DISTRO}
+  read -p [y/N] YESNO
+  if [ "${YESNO}" != "Y" ] && [ ]"${YESNO}" != "y" ]; then 
+    exit
+  fi
+
+  MATCHED="No"
+fi
+
 # Install CURL and add required NodeJS source to package repo
 echo ::Install CURL
 apt install -y curl
 echo ::Add NodeJS source to package repo
-curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
+curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
 
+# Add Mongo CE Source
+if [ ${DISTRO} = "Ubuntu" ];
+    then
+        echo ::Add Mongo CE source to package repo
+        curl -fsSL https://www.mongodb.org/static/pgp/server-8.0.asc | \
+            sudo gpg -o /usr/share/keyrings/mongodb-server-8.0.gpg \
+            --dearmor
+        if [ "${DISTRO_VER}" == "24.04" ]; then 
+            echo "deb [ arch=amd64,arm64 signed-by=/usr/share/keyrings/mongodb-server-8.0.gpg ] https://repo.mongodb.org/apt/ubuntu noble/mongodb-org/8.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-8.0.list
+        elif [ "${DISTRO_VER}" == "22.04" ]; then 
+            echo "deb [ arch=amd64,arm64 signed-by=/usr/share/keyrings/mongodb-server-8.0.gpg ] https://repo.mongodb.org/apt/ubuntu jammy/mongodb-org/8.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-8.0.list
+        elif [ "${DISTRO_VER}" == "20.04" ]; then 
+            echo "deb [ arch=amd64,arm64 signed-by=/usr/share/keyrings/mongodb-server-8.0.gpg ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/8.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-8.0.list
+        else
+            MATCHED="No"
+        fi
+    sudo apt-get update
+fi
+
+if [ ${MATCHED} == "No" ]; then
+    echo :: WARNING
+    echo :: Unable to determine Ubuntu version for Mongo installation purposes.
+    echo :: Please check your spin/distro documentation to install Mongo CE and enable it on startup.
+fi
+    
 # Install required packages
 echo ::Install Homebrewery requirements
-apt satisfy -y git nodejs npm mongodb
+apt satisfy -y git nodejs npm mongodb-org
+
+# Enable and start Mongo
+systemctl enable mongod
+systemctl start mongod
 
 # Clone Homebrewery repo
 echo ::Get Homebrewery files

package.json

@@ -1,7 +1,7 @@
 {
   "name": "homebrewery",
   "description": "Create authentic looking D&D homebrews using only markdown",
-  "version": "3.16.1",
+  "version": "3.18.1",
   "type": "module",
   "engines": {
     "npm": "^10.2.x",
@@ -39,7 +39,6 @@
     "test:definition-lists": "jest tests/markdown/definition-lists.test.js --verbose --noStackTrace",
     "test:hard-breaks": "jest tests/markdown/hard-breaks.test.js --verbose --noStackTrace",
     "test:non-breaking-spaces": "jest tests/markdown/non-breaking-spaces.test.js --verbose --noStackTrace",
-    "test:paragraph-justification": "jest tests/markdown/paragraph-justification.test.js --verbose --noStackTrace",
     "test:emojis": "jest tests/markdown/emojis.test.js --verbose --noStackTrace",
     "test:route": "jest tests/routes/static-pages.test.js --verbose",
     "test:safehtml": "jest tests/html/safeHTML.test.js --verbose",
@@ -85,20 +84,19 @@
     ]
   },
   "dependencies": {
-    "@babel/core": "^7.26.0",
-    "@babel/plugin-transform-runtime": "^7.25.9",
-    "@babel/preset-env": "^7.26.0",
+    "@babel/core": "^7.26.9",
+    "@babel/plugin-transform-runtime": "^7.26.9",
+    "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
-    "@googleapis/drive": "^8.14.0",
+    "@googleapis/drive": "^8.16.0",
     "body-parser": "^1.20.2",
     "classnames": "^2.5.1",
     "codemirror": "^5.65.6",
     "cookie-parser": "^1.4.7",
-    "core-js": "^3.40.0",
+    "core-js": "^3.41.0",
     "cors": "^2.8.5",
     "create-react-class": "^15.7.0",
     "dedent-tabs": "^0.10.3",
-    "dompurify": "^3.2.3",
     "expr-eval": "^2.0.2",
     "express": "^4.21.2",
     "express-async-handler": "^1.2.0",
@@ -109,36 +107,37 @@
     "jwt-simple": "^0.5.6",
     "less": "^3.13.1",
     "lodash": "^4.17.21",
-    "marked": "11.2.0",
-    "marked-emoji": "^1.4.3",
-    "marked-extended-tables": "^1.1.0",
-    "marked-gfm-heading-id": "^3.2.0",
-    "marked-smartypants-lite": "^1.0.2",
+    "marked": "14.0.0",
+    "marked-emoji": "^2.0.0",
+    "marked-extended-tables": "^2.0.1",
+    "marked-gfm-heading-id": "^4.0.1",
+    "marked-smartypants-lite": "^1.0.3",
+    "marked-subsuper-text": "^1.0.3",
     "markedLegacy": "npm:marked@^0.3.19",
     "moment": "^2.30.1",
-    "mongoose": "^8.9.5",
-    "nanoid": "5.0.9",
+    "mongoose": "^8.12.1",
+    "nanoid": "5.1.3",
     "nconf": "^0.12.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-frame-component": "^5.2.7",
-    "react-router": "^7.1.3",
+    "react-frame-component": "^4.1.3",
+    "react-router": "^7.3.0",
     "sanitize-filename": "1.6.3",
     "superagent": "^10.1.1",
     "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
   },
   "devDependencies": {
-    "@stylistic/stylelint-plugin": "^3.1.1",
+    "@stylistic/stylelint-plugin": "^3.1.2",
     "babel-plugin-transform-import-meta": "^2.3.2",
-    "eslint": "^9.18.0",
+    "eslint": "^9.22.0",
     "eslint-plugin-jest": "^28.11.0",
     "eslint-plugin-react": "^7.37.4",
-    "globals": "^15.14.0",
+    "globals": "^16.0.0",
     "jest": "^29.7.0",
     "jest-expect-message": "^1.1.3",
     "jsdom-global": "^3.0.2",
     "postcss-less": "^6.0.0",
-    "stylelint": "^16.13.2",
+    "stylelint": "^16.15.0",
     "stylelint-config-recess-order": "^6.0.0",
     "stylelint-config-recommended": "^15.0.0",
     "supertest": "^7.0.0"

server/admin.api.js

@@ -93,7 +93,7 @@ router.get('/admin/finduncompressed', mw.adminOnly, (req, res)=>{
 
 /* Cleans `<script` and `</script>` from the "text" field of a brew */
 router.put('/admin/clean/script/:id', asyncHandler(HomebrewAPI.getBrew('admin', false)), async (req, res)=>{
-	console.log(`[ADMIN] Cleaning script tags from ShareID ${req.params.id}`);
+	console.log(`[ADMIN: ${req.account?.username || 'Not Logged In'}] Cleaning script tags from ShareID ${req.params.id}`);
 
 	function cleanText(text){return text.replaceAll(/(<\/?s)cript/gi, '');};
 
@@ -114,6 +114,18 @@ router.put('/admin/clean/script/:id', asyncHandler(HomebrewAPI.getBrew('admin',
 	return await HomebrewAPI.updateBrew(req, res);
 });
 
+/* Get list of a user's documents */
+router.get('/admin/user/list/:user', mw.adminOnly, async (req, res)=>{
+	const username = req.params.user;
+	const fields = { _id: 0, text: 0, textBin: 0 };		// Remove unnecessary fields from document lists
+
+	console.log(`[ADMIN: ${req.account?.username || 'Not Logged In'}] Get brew list for ${username}`);
+
+	const brews = await HomebrewModel.getByUser(username, true, fields);
+
+	return res.json(brews);
+});
+
 /* Compresses the "text" field of a brew to binary */
 router.put('/admin/compress/:id', (req, res)=>{
 	HomebrewModel.findOne({ _id: req.params.id })
@@ -135,7 +147,6 @@ router.put('/admin/compress/:id', (req, res)=>{
 		});
 });
 
-
 router.get('/admin/stats', mw.adminOnly, async (req, res)=>{
 	try {
 		const totalBrewsCount = await HomebrewModel.countDocuments({});

server/app.js

@@ -71,7 +71,8 @@ const corsOptions = {
 		];
 
 		if(isLocalEnvironment) {
-			allowedOrigins.push('http://localhost:8000', 'http://localhost:8010');
+			const localNetworkRegex = /^http:\/\/(localhost|127\.0\.0\.1|10\.\d+\.\d+\.\d+|192\.168\.\d+\.\d+|172\.(1[6-9]|2\d|3[0-1])\.\d+\.\d+):\d+$/;
+			allowedOrigins.push(localNetworkRegex);
 		}
 
 		const herokuRegex = /^https:\/\/(?:homebrewery-pr-\d+\.herokuapp\.com|naturalcrit-pr-\d+\.herokuapp\.com)$/; // Matches any Heroku app
@@ -352,7 +353,7 @@ app.get('/user/:username', async (req, res, next)=>{
 app.put('/api/user/rename', async (req, res)=>{
 	const { username, newUsername } = req.body;
 	const ownAccount = req.account && (req.account.username == newUsername);
-	
+
 	if(!username || !newUsername)
 		return res.status(400).json({ error: 'Username and newUsername are required.' });
 	if(!ownAccount)
@@ -552,6 +553,7 @@ const renderPage = async (req, res)=>{
 	const configuration = {
 		local       : isLocalEnvironment,
 		publicUrl   : config.get('publicUrl') ?? '',
+		baseUrl     : `${req.protocol}://${req.get('host')}`,
 		environment : nodeEnv,
 		deployment  : config.get('heroku_app_name') ?? ''
 	};

server/homebrew.api.js

@@ -1,6 +1,6 @@
 /* eslint-disable max-lines */
 import _                             from 'lodash';
-import {model as HomebrewModel}      from './homebrew.model.js';
+import { model as HomebrewModel }    from './homebrew.model.js';
 import express                       from 'express';
 import zlib                          from 'zlib';
 import GoogleActions                 from './googleActions.js';
@@ -279,6 +279,8 @@ const api = {
 		let currentTheme;
 		const completeStyles   = [];
 		const completeSnippets = [];
+		let themeName;
+		let themeAuthor;
 
 		while (req.params.id) {
 			//=== User Themes ===//
@@ -292,6 +294,10 @@ const api = {
 
 				currentTheme = req.brew;
 				splitTextStyleAndMetadata(currentTheme);
+				if(!currentTheme.tags.some(tag => tag === "meta:theme" || tag === "meta:Theme"))
+					throw { brewId: req.params.id, name: 'Invalid Theme Selected', message: 'Selected theme does not have the meta:theme tag', status: 422, HBErrorCode: '10' };
+				themeName   ??= currentTheme.title;
+				themeAuthor ??= currentTheme.authors?.[0];
 
 				// If there is anything in the snippets or style members, append them to the appropriate array
 				if(currentTheme?.snippets) completeSnippets.push(JSON.parse(currentTheme.snippets));
@@ -301,6 +307,7 @@ const api = {
 				req.params.renderer = currentTheme.renderer;
 			} else {
 			//=== Static Themes ===//
+				themeName ??= req.params.id;
 				const localSnippets = `${req.params.renderer}_${req.params.id}`; // Just log the name for loading on client
 				const localStyle    = `@import url(\"/themes/${req.params.renderer}/${req.params.id}/style.css\");`;
 				completeSnippets.push(localSnippets);
@@ -313,7 +320,9 @@ const api = {
 		const returnObj = {
 			// Reverse the order of the arrays so they are listed oldest parent to youngest child.
 			styles   : completeStyles.reverse(),
-			snippets : completeSnippets.reverse()
+			snippets : completeSnippets.reverse(),
+			name     : themeName,
+			author   : themeAuthor
 		};
 
 		res.setHeader('Content-Type', 'application/json');

server/homebrew.api.spec.js

@@ -576,7 +576,7 @@ brew`);
 	describe('Theme bundle', ()=>{
 		it('should return Theme Bundle for a User Theme', async ()=>{
 			const brews = {
-				userThemeAID : { title: 'User Theme A', renderer: 'V3', theme: null, shareId: 'userThemeAID', style: 'User Theme A Style' }
+				userThemeAID : { title: 'User Theme A', renderer: 'V3', theme: null, shareId: 'userThemeAID', style: 'User Theme A Style', tags: ['meta:theme'], authors: ['authorName'] }
 			};
 
 			const toBrewPromise = (brew)=>new Promise((res)=>res({ toObject: ()=>brew }));
@@ -587,6 +587,8 @@ brew`);
 
 			expect(res.status).toHaveBeenCalledWith(200);
 			expect(res.send).toHaveBeenCalledWith({
+				name     : 'User Theme A',
+				author   : 'authorName',
 				styles   : ['/* From Brew: https://localhost/share/userThemeAID */\n\nUser Theme A Style'],
 				snippets : []
 			});
@@ -594,9 +596,9 @@ brew`);
 
 		it('should return Theme Bundle for nested User Themes', async ()=>{
 			const brews = {
-				userThemeAID : { title: 'User Theme A', renderer: 'V3', theme: 'userThemeBID', shareId: 'userThemeAID', style: 'User Theme A Style' },
-				userThemeBID : { title: 'User Theme B', renderer: 'V3', theme: 'userThemeCID', shareId: 'userThemeBID', style: 'User Theme B Style' },
-				userThemeCID : { title: 'User Theme C', renderer: 'V3', theme: null, shareId: 'userThemeCID', style: 'User Theme C Style' }
+				userThemeAID : { title: 'User Theme A', renderer: 'V3', theme: 'userThemeBID', shareId: 'userThemeAID', style: 'User Theme A Style', tags: ['meta:theme'], authors: ['authorName'] },
+				userThemeBID : { title: 'User Theme B', renderer: 'V3', theme: 'userThemeCID', shareId: 'userThemeBID', style: 'User Theme B Style', tags: ['meta:theme'], authors: ['authorName'] },
+				userThemeCID : { title: 'User Theme C', renderer: 'V3', theme: null, shareId: 'userThemeCID', style: 'User Theme C Style', tags: ['meta:theme'], authors: ['authorName'] }
 			};
 
 			const toBrewPromise = (brew)=>new Promise((res)=>res({ toObject: ()=>brew }));
@@ -607,6 +609,8 @@ brew`);
 
 			expect(res.status).toHaveBeenCalledWith(200);
 			expect(res.send).toHaveBeenCalledWith({
+				name   : 'User Theme A',
+				author : 'authorName',
 				styles : [
 					'/* From Brew: https://localhost/share/userThemeCID */\n\nUser Theme C Style',
 					'/* From Brew: https://localhost/share/userThemeBID */\n\nUser Theme B Style',
@@ -623,6 +627,8 @@ brew`);
 
 			expect(res.status).toHaveBeenCalledWith(200);
 			expect(res.send).toHaveBeenCalledWith({
+				name   : '5ePHB',
+				author : undefined,
 				styles : [
 					`/* From Theme Blank */\n\n@import url("/themes/V3/Blank/style.css");`,
 					`/* From Theme 5ePHB */\n\n@import url("/themes/V3/5ePHB/style.css");`
@@ -636,9 +642,9 @@ brew`);
 
 		it('should return Theme Bundle for nested User and Static Themes together', async ()=>{
 			const brews = {
-				userThemeAID : { title: 'User Theme A', renderer: 'V3', theme: 'userThemeBID', shareId: 'userThemeAID', style: 'User Theme A Style' },
-				userThemeBID : { title: 'User Theme B', renderer: 'V3', theme: 'userThemeCID', shareId: 'userThemeBID', style: 'User Theme B Style' },
-				userThemeCID : { title: 'User Theme C', renderer: 'V3', theme: '5eDMG', shareId: 'userThemeCID', style: 'User Theme C Style' }
+				userThemeAID : { title: 'User Theme A', renderer: 'V3', theme: 'userThemeBID', shareId: 'userThemeAID', style: 'User Theme A Style', tags: ['meta:theme'], authors: ['authorName'] },
+				userThemeBID : { title: 'User Theme B', renderer: 'V3', theme: 'userThemeCID', shareId: 'userThemeBID', style: 'User Theme B Style', tags: ['meta:theme'], authors: ['authorName'] },
+				userThemeCID : { title: 'User Theme C', renderer: 'V3', theme: '5eDMG', shareId: 'userThemeCID', style: 'User Theme C Style', tags: ['meta:theme'], authors: ['authorName'] }
 			};
 
 			const toBrewPromise = (brew)=>new Promise((res)=>res({ toObject: ()=>brew }));
@@ -649,6 +655,8 @@ brew`);
 
 			expect(res.status).toHaveBeenCalledWith(200);
 			expect(res.send).toHaveBeenCalledWith({
+				name   : 'User Theme A',
+				author : 'authorName',
 				styles : [
 					`/* From Theme Blank */\n\n@import url("/themes/V3/Blank/style.css");`,
 					`/* From Theme 5ePHB */\n\n@import url("/themes/V3/5ePHB/style.css");`,
@@ -665,9 +673,9 @@ brew`);
 			});
 		});
 
-		it('should fail for an invalid Theme in the chain', async()=>{
+		it('should fail for a missing Theme in the chain', async()=>{
 			const brews = {
-				userThemeAID : { title: 'User Theme A', renderer: 'V3', theme: 'missingTheme', shareId: 'userThemeAID', style: 'User Theme A Style' },
+				userThemeAID : { title: 'User Theme A', renderer: 'V3', theme: 'missingTheme', shareId: 'userThemeAID', style: 'User Theme A Style', tags: ['meta:theme'], authors: ['authorName'] },
 			};
 
 			const toBrewPromise = (brew)=>new Promise((res)=>res({ toObject: ()=>brew }));
@@ -686,6 +694,27 @@ brew`);
 				name        : 'ThemeLoad Error',
 				status      : 404 });
 		});
+
+		it('should fail for a User Theme not tagged with meta:theme', async ()=>{
+			const brews = {
+				userThemeAID : { title: 'User Theme A', renderer: 'V3', theme: null, shareId: 'userThemeAID', style: 'User Theme A Style' }
+			};
+
+			const toBrewPromise = (brew)=>new Promise((res)=>res({ toObject: ()=>brew }));
+			model.get = jest.fn((getParams)=>toBrewPromise(brews[getParams.shareId]));
+			const req = { params: { renderer: 'V3', id: 'userThemeAID' }, get: ()=>{ return 'localhost'; }, protocol: 'https' };
+
+			let err;
+			await api.getThemeBundle(req, res)
+			.catch((e)=>err = e);
+
+			expect(err).toEqual({
+				HBErrorCode : '10',
+				brewId      : 'userThemeAID',
+				message     : 'Selected theme does not have the meta:theme tag',
+				name        : 'Invalid Theme Selected',
+				status      : 422 });
+		});
 	});
 
 	describe('deleteBrew', ()=>{

server/vault.api.js

@@ -1,6 +1,6 @@
 import express    from 'express';
 import asyncHandler from 'express-async-handler';
-import {model as HomebrewModel }     from './homebrew.model.js';
+import { model as HomebrewModel }     from './homebrew.model.js';
 
 const router = express.Router();
 
@@ -29,7 +29,7 @@ const rendererConditions = (legacy, v3)=>{
 	return {}; // If all renderers selected, renderer field not needed in query for speed
 };
 
-const sortConditions = (sort, dir) => {
+const sortConditions = (sort, dir)=>{
 	return { [sort]: dir === 'asc' ? 1 : -1 };
 };
 

shared/helpers.js

@@ -44,13 +44,19 @@ const fetchThemeBundle = async (obj, renderer, theme)=>{
 			.catch((err)=>{
 				obj.setState({ error: err });
 			});
-	if(!res) return;
-
+	if(!res) {
+		obj.setState((prevState)=>({
+			...prevState,
+			themeBundle : {}
+		}));
+		return;
+	}
 	const themeBundle = res.body;
 	themeBundle.joinedStyles = themeBundle.styles.map((style)=>`<style>${style}</style>`).join('\n\n');
 	obj.setState((prevState)=>({
 		...prevState,
-		themeBundle : themeBundle
+		themeBundle : themeBundle,
+		error       : null
 	}));
 };
 

shared/naturalcrit/markdown.js

@@ -7,6 +7,7 @@ import MarkedExtendedTables     from 'marked-extended-tables';
 import { markedSmartypantsLite as MarkedSmartypantsLite }                                from 'marked-smartypants-lite';
 import { gfmHeadingId as MarkedGFMHeadingId, resetHeadings as MarkedGFMResetHeadingIDs } from 'marked-gfm-heading-id';
 import { markedEmoji as MarkedEmojis }                                                   from 'marked-emoji';
+import MarkedSubSuperText from 'marked-subsuper-text';
 
 //Icon fonts included so they can appear in emoji autosuggest dropdown
 import diceFont      from '../../themes/fonts/iconFonts/diceFont.js';
@@ -60,7 +61,8 @@ mathParser.functions.signed = function (a) {
 };
 
 //Processes the markdown within an HTML block if it's just a class-wrapper
-renderer.html = function (html) {
+renderer.html = function (token) {
+	let html = token.text;
 	if(_.startsWith(_.trim(html), '<div') && _.endsWith(_.trim(html), '</div>')){
 		const openTag = html.substring(0, html.indexOf('>')+1);
 		html = html.substring(html.indexOf('>')+1);
@@ -71,18 +73,21 @@ renderer.html = function (html) {
 };
 
 // Don't wrap {{ Spans alone on a line, or {{ Divs in <p> tags
-renderer.paragraph = function(text){
+renderer.paragraph = function(token){
 	let match;
+	const text = this.parser.parseInline(token.tokens);
 	if(text.startsWith('<div') || text.startsWith('</div'))
 		return `${text}`;
-	else if(match = text.match(/(^|^.*?\n)<span class="inline-block(.*?<\/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
+	else
 		return `<p>${text}</p>\n`;
 };
 
 //Fix local links in the Preview iFrame to link inside the frame
-renderer.link = function (href, title, text) {
+renderer.link = function (token) {
+	let {href, title, tokens} = token;
+	const text = this.parser.parseInline(tokens)
 	let self = false;
 	if(href[0] == '#') {
 		self = true;
@@ -104,8 +109,8 @@ renderer.link = function (href, title, text) {
 };
 
 // Expose `src` attribute as `--HB_src` to make the URL accessible via CSS
-renderer.image = function (href, title, text) {
-	href = cleanUrl(href);
+renderer.image = function (token) {
+	let {href, title, text} = token;
 	if(href === null)
 		return text;
 
@@ -333,35 +338,6 @@ const mustacheInjectBlock = {
 	}
 };
 
-const superSubScripts = {
-	name  : 'superSubScript',
-	level : 'inline',
-	start(src) { return src.match(/\^/m)?.index; },  // Hint to Marked.js to stop and check for a match
-	tokenizer(src, tokens) {
-		const superRegex = /^\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^/m;
-		const subRegex   = /^\^\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^\^/m;
-		let isSuper = false;
-		let match = subRegex.exec(src);
-		if(!match){
-			match = superRegex.exec(src);
-			if(match)
-				isSuper = true;
-		}
-		if(match?.length) {
-			return {
-				type   : 'superSubScript', // Should match "name" above
-				raw    : match[0],          // Text to consume from the source
-				tag    : isSuper ? 'sup' : 'sub',
-				tokens : this.lexer.inlineTokens(match[1])
-			};
-		}
-	},
-	renderer(token) {
-		return `<${token.tag}>${this.parser.parseInline(token.tokens)}</${token.tag}>`;
-	}
-};
-
-
 const justifiedParagraphClasses = [];
 justifiedParagraphClasses[2] = 'Left';
 justifiedParagraphClasses[4] = 'Right';
@@ -415,7 +391,7 @@ const forcedParagraphBreaks = {
 		}
 	},
 	renderer(token) {
-		return `<div class='blank'></div>`.repeat(token.length).concat('\n');
+		return `<div class='blank'></div>\n`.repeat(token.length);
 	}
 };
 
@@ -796,10 +772,11 @@ const tableTerminators = [
 
 Marked.use(MarkedVariables());
 Marked.use({ extensions : [justifiedParagraphs, definitionListsMultiLine, definitionListsSingleLine, forcedParagraphBreaks,
-	nonbreakingSpaces, superSubScripts, mustacheSpans, mustacheDivs, mustacheInjectInline] });
+	nonbreakingSpaces, mustacheSpans, mustacheDivs, mustacheInjectInline] });
 Marked.use(mustacheInjectBlock);
+Marked.use(MarkedSubSuperText());
 Marked.use({ renderer: renderer, tokenizer: tokenizer, mangle: false });
-Marked.use(MarkedExtendedTables(tableTerminators), MarkedGFMHeadingId({ globalSlugs: true }),
+Marked.use(MarkedExtendedTables({interruptPatterns : tableTerminators}), MarkedGFMHeadingId({ globalSlugs: true }),
 	MarkedSmartypantsLite(), MarkedEmojis(MarkedEmojiOptions));
 
 function cleanUrl(href) {

stylelint_plugins/declaration-block-multi-line-min-declarations.js

@@ -1,5 +1,5 @@
-const stylelint = require('stylelint');
-const { isNumber } = require('stylelint/lib/utils/validateTypes.cjs');
+import stylelint  from 'stylelint';
+import { isNumber } from 'stylelint/lib/utils/validateTypes.mjs';
 
 const { report, ruleMessages, validateOptions } = stylelint.utils;
 const ruleName = 'naturalcrit/declaration-block-multi-line-min-declarations';
@@ -7,9 +7,8 @@ const messages = ruleMessages(ruleName, {
 	expected : (decls)=>`Rule with ${decls} declaration${decls == 1 ? '' : 's'} should be single line`,
 });
 
-
-module.exports = stylelint.createPlugin(ruleName, function getPlugin(primaryOption, secondaryOptionObject, context) {
-	return function lint(postcssRoot, postcssResult) {
+const ruleFunction = (primaryOption, secondaryOptionObject, context)=>{
+	return (postcssRoot, postcssResult)=>{
 
 		const validOptions = validateOptions(
 			postcssResult,
@@ -20,26 +19,23 @@ module.exports = stylelint.createPlugin(ruleName, function getPlugin(primaryOpti
 			}
 		);
 
-		if(!validOptions) { //If the options are invalid, don't lint
+		if(!validOptions) //If the options are invalid, don't lint
 			return;
-		}
+
 		const isAutoFixing = Boolean(context.fix);
 
 		postcssRoot.walkRules((rule)=>{ //Iterate CSS rules
 
 			//Apply rule only if all children are decls (no further nested rules)
-			if(rule.nodes.length > primaryOption || !rule.nodes.every((node)=>node.type === 'decl')) {
+			if(rule.nodes.length > primaryOption || !rule.nodes.every((node)=>node.type === 'decl'))
 				return;
-			}
 
 			//Ignore if already one line
 			if(!rule.nodes.some((node)=>node.raws.before.includes('\n')) && !rule.raws.after.includes('\n'))
 				return;
 
 			if(isAutoFixing) { //We are in “fix” mode
-				rule.each((decl)=>{
-					decl.raws.before = ' ';
-				});
+				rule.each((decl)=>decl.raws.before = ' ');
 				rule.raws.after = ' ';
 			} else {
 				report({
@@ -52,7 +48,9 @@ module.exports = stylelint.createPlugin(ruleName, function getPlugin(primaryOpti
 			}
 		});
 	};
-});
+};
 
-module.exports.ruleName = ruleName;
-module.exports.messages = messages;
+ruleFunction.ruleName = ruleName;
+ruleFunction.messages = messages;
+
+export default stylelint.createPlugin(ruleName, ruleFunction);

stylelint_plugins/declaration-colon-align.js

@@ -1,32 +1,29 @@
-const stylelint = require('stylelint');
-
+import stylelint from 'stylelint';
 const { report, ruleMessages, validateOptions } = stylelint.utils;
+
 const ruleName = 'naturalcrit/declaration-colon-align';
 const messages = ruleMessages(ruleName, {
 	expected : (rule)=>`Expected colons aligned within rule "${rule}"`,
 });
 
-
-module.exports = stylelint.createPlugin(ruleName, function getPlugin(primaryOption, secondaryOptionObject, context) {
-	return function lint(postcssRoot, postcssResult) {
+const ruleFunction = (primaryOption, secondaryOptionObject, context)=>{
+	return (postcssRoot, postcssResult)=>{
 
 		const validOptions = validateOptions(
 			postcssResult,
 			ruleName,
 			{
 				actual   : primaryOption,
-				possible : [
-					true,
-					false
-				]
+				possible : [true, false]
 			}
 		);
 
-		if(!validOptions) { //If the options are invalid, don't lint
+		if(!validOptions) // If the options are invalid, don't lint
 			return;
-		}
+
 		const isAutoFixing = Boolean(context.fix);
-		postcssRoot.walkRules((rule)=>{ //Iterate CSS rules
+
+		postcssRoot.walkRules((rule)=>{ // Iterate CSS rules
 
 			let maxColonPos = 0;
 			let misaligned = false;
@@ -36,33 +33,37 @@ module.exports = stylelint.createPlugin(ruleName, function getPlugin(primaryOpti
 					return;
 
 				const colonPos = declaration.prop.length + declaration.raws.between.indexOf(':');
-				if(maxColonPos > 0 && colonPos != maxColonPos) {
+
+				if(maxColonPos > 0 && colonPos != maxColonPos)
 					misaligned = true;
-				}
+
 				maxColonPos = Math.max(maxColonPos, colonPos);
 			});
 
-			if(misaligned) {
-				if(isAutoFixing) { //We are in “fix” mode
-					rule.each((declaration)=>{
-						if(declaration.type != 'decl')
-							return;
+			if(!misaligned)
+				return;
 
-						declaration.raws.between = `${' '.repeat(maxColonPos - declaration.prop.length)}:${declaration.raws.between.split(':')[1]}`;
-					});
-				} else { //We are in “report only” mode
-					report({
-						ruleName,
-						result  : postcssResult,
-						message : messages.expected(rule.selector), // Build the reported message
-						node    : rule, // Specify the reported node
-						word    : rule.selector, // Which exact word caused the error? This positions the error properly
-					});
-				}
+			if(isAutoFixing) { // We are in “fix” mode
+				rule.each((declaration)=>{
+					if(declaration.type != 'decl')
+						return;
+
+					declaration.raws.between = `${' '.repeat(maxColonPos - declaration.prop.length)}:${declaration.raws.between.split(':')[1]}`;
+				});
+			} else { // We are in “report only” mode
+				report({
+					ruleName,
+					result  : postcssResult,
+					message : messages.expected(rule.selector), // Build the reported message
+					node    : rule, // Specify the reported node
+					word    : rule.selector, // Which exact word caused the error? This positions the error properly
+				});
 			}
 		});
 	};
-});
+};
 
-module.exports.ruleName = ruleName;
-module.exports.messages = messages;
+ruleFunction.ruleName = ruleName;
+ruleFunction.messages = messages;
+
+export default stylelint.createPlugin(ruleName, ruleFunction);

stylelint_plugins/declaration-colon-min-space-before.js

@@ -1,5 +1,5 @@
-const stylelint = require('stylelint');
-const { isNumber } = require('stylelint/lib/utils/validateTypes.cjs');
+import stylelint  from 'stylelint';
+import { isNumber } from 'stylelint/lib/utils/validateTypes.mjs';
 
 const { report, ruleMessages, validateOptions } = stylelint.utils;
 const ruleName = 'naturalcrit/declaration-colon-min-space-before';
@@ -7,9 +7,8 @@ const messages = ruleMessages(ruleName, {
 	expected : (num)=>`Expected at least ${num} space${num == 1 ? '' : 's'} before ":"`
 });
 
-
-module.exports = stylelint.createPlugin(ruleName, function getPlugin(primaryOption, secondaryOptionObject, context) {
-	return function lint(postcssRoot, postcssResult) {
+const ruleFunction = (primaryOption, secondaryOptionObject, context)=>{
+	return (postcssRoot, postcssResult)=>{
 
 		const validOptions = validateOptions(
 			postcssResult,
@@ -30,9 +29,9 @@ module.exports = stylelint.createPlugin(ruleName, function getPlugin(primaryOpti
 			const between = decl.raws.between;
 			const colonIndex = between.indexOf(':');
 
-			if(between.slice(0, colonIndex).length >= primaryOption) {
+			if(between.slice(0, colonIndex).length >= primaryOption)
 				return;
-			}
+
 			if(isAutoFixing) { //We are in “fix” mode
 				decl.raws.between = between.slice(0, colonIndex).replace(/\s*$/, ' '.repeat(primaryOption)) + between.slice(colonIndex);
 			} else {
@@ -46,7 +45,9 @@ module.exports = stylelint.createPlugin(ruleName, function getPlugin(primaryOpti
 			}
 		});
 	};
-});
+};
 
-module.exports.ruleName = ruleName;
-module.exports.messages = messages;
+ruleFunction.ruleName = ruleName;
+ruleFunction.messages = messages;
+
+export default stylelint.createPlugin(ruleName, ruleFunction);

tests/markdown/definition-lists.test.js

@@ -1,4 +1,4 @@
-/* eslint-disable max-lines */
+
 
 import Markdown from 'naturalcrit/markdown.js';
 
@@ -92,12 +92,12 @@ describe('Multiline Definition Lists', ()=>{
 	test('Multiline Definition Term must have at least one non-empty Definition', function() {
 		const source = 'Term 1\n::';
 		const rendered = Markdown.render(source).trim();
-		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>Term 1</p>\n<div class='blank'></div><div class='blank'></div>`);
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>Term 1</p>\n<div class='blank'></div>\n<div class='blank'></div>`);
 	});
 
 	test('Multiline Definition List must have at least one non-newline character after ::', function() {
 		const source = 'Term 1\n::\nDefinition 1\n\n';
 		const rendered = Markdown.render(source).trim();
-		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>Term 1</p>\n<div class='blank'></div><div class='blank'></div>\n<p>Definition 1</p>`);
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>Term 1</p>\n<div class='blank'></div>\n<div class='blank'></div>\n<p>Definition 1</p>`);
 	});
 });

tests/markdown/hard-breaks.test.js

@@ -1,4 +1,4 @@
-/* eslint-disable max-lines */
+
 
 import Markdown from 'naturalcrit/markdown.js';
 
@@ -12,31 +12,31 @@ describe('Hard Breaks', ()=>{
 	test('Double Break', function() {
 		const source = '::\n\n';
 		const rendered = Markdown.render(source).trim();
-		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class='blank'></div><div class='blank'></div>`);
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class='blank'></div>\n<div class='blank'></div>`);
 	});
 
 	test('Triple Break', function() {
 		const source = ':::\n\n';
 		const rendered = Markdown.render(source).trim();
-		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class='blank'></div><div class='blank'></div><div class='blank'></div>`);
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>`);
 	});
 
 	test('Many Break', function() {
 		const source = '::::::::::\n\n';
 		const rendered = Markdown.render(source).trim();
-		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class='blank'></div><div class='blank'></div><div class='blank'></div><div class='blank'></div><div class='blank'></div><div class='blank'></div><div class='blank'></div><div class='blank'></div><div class='blank'></div><div class='blank'></div>`);
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>`);
 	});
 
 	test('Multiple sets of Breaks', function() {
 		const source = ':::\n:::\n:::';
 		const rendered = Markdown.render(source).trim();
-		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class='blank'></div><div class='blank'></div><div class='blank'></div>\n<div class='blank'></div><div class='blank'></div><div class='blank'></div>\n<div class='blank'></div><div class='blank'></div><div class='blank'></div>`);
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>`);
 	});
 
 	test('Break directly between two paragraphs', function() {
 		const source = 'Line 1\n::\nLine 2';
 		const rendered = Markdown.render(source).trim();
-		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>Line 1</p>\n<div class='blank'></div><div class='blank'></div>\n<p>Line 2</p>`);
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>Line 1</p>\n<div class='blank'></div>\n<div class='blank'></div>\n<p>Line 2</p>`);
 	});
 
 	test('Ignored inside a code block', function() {

themes/V3/5ePHB/snippets/monsterblock.gen.js

@@ -148,7 +148,7 @@ const genAction = function(){
 		'Turnbuckle Roll'
 	]);
 
-	return `***${name}.*** *Melee Weapon Attack:* +4 to hit, reach 5ft., one target. *Hit* 5 (1d6 + 2) `;
+	return `***${name}.*** *Melee Weapon Attack:* +4 to hit, reach 5 ft., one target. *Hit:* 5 (1d6 + 2) `;
 };
 
 
@@ -161,8 +161,8 @@ module.exports = {
 			*${getType()}, ${getAlignment()}*
 			___
 			**Armor Class** :: ${_.random(10, 20)} (chain mail, shield)
-			**Hit Points**  :: ${_.random(1, 150)}(1d4 + 5)
-			**Speed**       :: ${_.random(0, 50)}ft.
+			**Hit Points**  :: ${_.random(1, 150)} (1d4 + 5)
+			**Speed**       :: ${_.random(0, 50)} ft.
 			___
 			|  STR  |  DEX  |  CON  |  INT  |  WIS  |  CHA  |
 			|:-----:|:-----:|:-----:|:-----:|:-----:|:-----:|

themes/V3/5ePHB/style.less

@@ -17,7 +17,6 @@
 .useSansSerif() {
 	font-family : 'ScalySansRemake';
 	font-size   : 0.318cm;
-	line-height : 1.2em;
 	p,dl,ul,ol { line-height : 1.2em; }
 	ul, ol { padding-left : 1em; }
 	em { font-style : italic; }
@@ -546,8 +545,9 @@
 	columns    : 1;
 	text-align : center;
 	&::after { display : none; }
+	.frontCover { position : absolute; }
 	h1 {
-		margin-top     : 1.2cm;
+		margin-top     : 1.55cm;
 		margin-bottom  : 0;
 		font-family    : 'NodestoCapsCondensed';
 		font-size      : 2.245cm;
@@ -622,7 +622,6 @@
 		left       : 0;
 		filter     : drop-shadow(0 0 0.075cm black);
 		img {
-			width  : 100%;
 			height : 2cm;
 		}
 	}
@@ -634,8 +633,9 @@
 	columns    : 1;
 	text-align : center;
 	&::after { display	: none; }
+	.insideCover { position : absolute; }
 	h1 {
-		margin-top     : 1.2cm;
+		margin-top     : 1.55cm;
 		margin-bottom  : 0;
 		font-family    : 'NodestoCapsCondensed';
 		font-size      : 2.1cm;
@@ -667,7 +667,6 @@
 		left     : 0;
 		height   : 2cm;
 		img {
-			width  : 100%;
 			height : 2cm;
 		}
 	}
@@ -679,18 +678,18 @@
 	padding : 2.25cm 1.3cm 2cm 1.3cm;
 	color   : #FFFFFF;
 	columns : 1;
+	line-height : 1.4em;
 	&::after { display : none; }
 	.columnWrapper { width : 7.6cm; }
 	.backCover {
 		position          : absolute;
 		inset             : 0;
 		z-index           : -1;
-		width             : 11cm;
 		background-image  : @backCover;
 		background-repeat : no-repeat;
 		background-size   : contain;
 	}
-	.blank { height : 1.4em; }
+	.blank { height: 1.4em; }
 	h1 {
 		margin-bottom : 0.3cm;
 		font-family   : 'NodestoCapsCondensed';
@@ -737,7 +736,6 @@
 		img {
 			position : relative;
 			z-index  : 0;
-			width    : 100%;
 			height   : 1.5cm;
 		}
 		p {

themes/V3/Blank/snippets.js

@@ -438,6 +438,15 @@ module.exports = [
 		icon      : 'fas fa-print',
 		view      : 'style',
 		snippets  : [
+			{
+				name : 'US Letter Page Size',
+				icon : 'far fa-file',
+				gen  : dedent`/* US Letter Page Size */
+					.page {
+						width  : 215.9mm; /* 8.5in */
+						height : 279.4mm; /* 11in */
+					}\n\n`,
+			},
 			{
 				name : 'A3 Page Size',
 				icon : 'far fa-file',

themes/V3/Blank/style.less

@@ -427,17 +427,6 @@ body { counter-reset : page-numbers 0; }
 	}
 }
 
-//*****************************
-// *    BLANK LINE
-// *****************************/
-.page {
-	.blank {
-		height     : 1em;
-		margin-top : 0;
-		& + * { margin-top : 0; }
-	}
-}
-
 //*****************************
 // *         WIDE
 // *****************************/
@@ -448,6 +437,13 @@ body { counter-reset : page-numbers 0; }
 		margin-bottom       : 1em;
 		& + * { margin-top : 0; }
 	}
+	.blank {
+		height: 1em;
+		margin-top: 0;
+		& + * {
+			margin-top: 0;
+		}
+	}
 }
 
 //*****************************