Up version to 3.13.0

Unify some emoji CSS across fonts

.circleci/config.yml

@@ -64,6 +64,12 @@ jobs:
       - run:
           name: Test - Mustache Spans
           command: npm run test:mustache-syntax
+      - run:
+          name: Test - Definition Lists
+          command: npm run test:definition-lists
+      - run:
+          name: Test - Variables
+          command: npm run test:variables
       - run:
           name: Test - Routes
           command: npm run test:route

.github/actions/limit-pull-requests/action.yml

@@ -0,0 +1,103 @@
+name: Limit pull requests
+description: >
+  Limit the number of open pull requests to the repository created by a user
+author: ZhongRuoyu (from Homebrew repository)
+branding:
+  icon: alert-triangle
+  color: yellow
+
+inputs:
+  token:
+    description: GitHub token
+    required: false
+    default: ${{ github.token }}
+  except-users:
+    description: The users exempted from the limit, one per line
+    required: false
+  # https://docs.github.com/en/graphql/reference/enums#commentauthorassociation
+  except-author-associations:
+    description: The author associations exempted from the limit, one per line
+    required: false
+  comment-limit:
+    description: >
+      Post the comment when the user's number of open pull requests exceeds this
+      number and `comment` is not empty
+    required: true
+    default: "10"
+  comment:
+    description: The comment to post when the limit is reached
+    required: false
+  close-limit:
+    description: >
+      Close the pull request when the user's number of open pull requests
+      exceeds this number and `close` is set to `true`
+    required: true
+    default: "50"
+  close:
+    description: Whether to close the pull request when the limit is reached
+    required: true
+    default: "false"
+
+runs:
+  using: composite
+  steps:
+    - name: Check the number of pull requests
+      id: count-pull-requests
+      run: |
+        # If the user is exempted, assume they have no pull requests.
+        if grep -Fiqx '${{ github.actor }}' <<<"$EXCEPT_USERS"; then
+          echo "::notice::@${{ github.actor }} is exempted from the limit."
+          echo "count=0" >>"$GITHUB_OUTPUT"
+          exit 0
+        fi
+        if grep -Fiqx '${{ github.event.pull_request.author_association }}' <<<"$EXCEPT_AUTHOR_ASSOCIATIONS"; then
+          echo "::notice::@{{ github.actor }} is a ${{ github.event.pull_request.author_association }} exempted from the limit."
+          echo "count=0" >>"$GITHUB_OUTPUT"
+          exit 0
+        fi
+
+        count="$(
+          gh api \
+            --method GET \
+            --header 'Accept: application/vnd.github+json' \
+            --header 'X-GitHub-Api-Version: 2022-11-28' \
+            --field state=open \
+            --paginate \
+            '/repos/{owner}/{repo}/pulls' |
+            jq \
+              --raw-output \
+              --arg USER '${{ github.actor }}' \
+              'map(select(.user.login == $USER)) | length'
+        )"
+        echo "::notice::@${{ github.actor }} has $count open pull request(s)."
+        echo "count=$count" >>"$GITHUB_OUTPUT"
+      env:
+        GH_REPO: ${{ github.repository }}
+        GH_TOKEN: ${{ inputs.token }}
+        EXCEPT_USERS: ${{ inputs.except-users }}
+        EXCEPT_AUTHOR_ASSOCIATIONS: ${{ inputs.except-author-associations }}
+      shell: bash
+
+    - name: Comment on pull request
+      if: >
+        fromJSON(steps.count-pull-requests.outputs.count) > fromJSON(inputs.comment-limit) &&
+        inputs.comment != ''
+      run: |
+        gh pr comment '${{ github.event.pull_request.number }}' \
+          --body="${COMMENT_BODY}"
+      env:
+        GH_REPO: ${{ github.repository }}
+        GH_TOKEN: ${{ inputs.token }}
+        COMMENT_BODY: ${{ inputs.comment }}
+      shell: bash
+
+    - name: Close pull request
+      if: >
+        fromJSON(steps.count-pull-requests.outputs.count) > fromJSON(inputs.close-limit) &&
+        inputs.close == 'true'
+      run: |
+        gh pr close '${{ github.event.pull_request.number }}'
+      env:
+        GH_REPO: ${{ github.repository }}
+        GH_TOKEN: ${{ inputs.token }}
+      shell: bash

.github/workflows/pr-check.yml

@@ -0,0 +1,29 @@
+name: PR Check
+on: pull_request_target
+env:
+  GH_REPO: ${{ github.repository }}
+  GH_NO_UPDATE_NOTIFIER: 1
+  GH_PROMPT_DISABLED: 1
+permissions:
+  contents: read
+  issues: write
+  pull-requests: write
+  statuses: write
+jobs:
+  limit-pull-requests:
+    if: always() && github.repository_owner == 'naturalcrit'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name : Run limit-pull-requests action
+        uses: ./.github/actions/limit-pull-requests
+        with:
+          except-users: |
+            dependabot
+          comment-limit: 3
+          comment: |
+            Hi, thanks for your contribution to the Homebrewery! You already have >=3 open pull requests. Consider completing some of your existing PRs before opening new ones. Thanks!
+          close-limit: 5
+          close: false

changelog.md

@@ -75,11 +75,292 @@ pre {
 .page {
 	padding-bottom: 1.5cm;
 }
+
+.varSyntaxTable th:first-of-type {
+  width:6cm;
+}
 ```
 
 ## changelog
 For a full record of development, visit our [Github Page](https://github.com/naturalcrit/homebrewery).
 
+### Friday 28/6/2024 - v3.13.0
+{{taskList
+
+##### calculuschild
+
+* [x] Add `:emoji:` Markdown syntax, with autosuggest; start typing after the first `:` for matching emojis from 
+:fab_font_awesome: FontAwesome, :df_d20: DiceFont, :ei_action: ElderberryInn, and a subset of :gi_broadsword: GameIcons
+
+* [x] Fix `{curly injection}` to append to, rather than erase and replace target CSS
+* [x] {{openSans **GET PDF**}} {{fa,fa-file-pdf}} now opens the print dialog directly, rather than redirecting to a separate page
+
+##### Gazook
+
+* [x] Several small style tweaks to the UI
+* [x] Cleaning and refactoring several large pieces of code
+
+##### 5e-Cleric
+
+* [x] For error pages, add links to user account and `/share` page if available
+
+Fixes issue [#3298](https://github.com/naturalcrit/homebrewery/issues/3298)
+
+* [x] Change FrontCover title to use stroke outline instead of faking it with dozens of shadows
+* [x] Cleaning and refactoring several large pieces of CSS
+
+##### abquintic
+
+* [x] Added additional {{openSans **TABLE OF CONTENTS**}} snippet options. Explicitly include or exclude items from the ToC generation via CSS properties  
+`--TOC:exclude` or `--TOC:include`, or change the included header depth from 3 to 6 (default 3) with `tocDepthH6`
+
+##### MurdoMaclachlan *(new contributor!)*
+
+* [x] Added "proficiency bonus" to Monster Stat Block snippet. 
+
+Fixes issue [#3397](https://github.com/naturalcrit/homebrewery/issues/3397)
+}}
+
+\column
+
+### Monday 18/3/2024 - v3.12.0
+{{taskList
+
+##### 5e-Cleric
+
+* [x] Fix language-specific hyphenation on print page
+
+Fixes issue [#3294](https://github.com/naturalcrit/homebrewery/issues/3294)
+
+* [x] Upgrade Font-Awesome to v6.51
+
+* [x] Allow downloaded files to be uploaded via {{openSans **NEW {{fa,fa-plus-square}} → FROM UPLOAD {{fa,fa-upload}}**}}
+
+##### G-Ambatte
+
+* [x] Fix an edge case crash with empty documents
+
+Fixes issue [#3315](https://github.com/naturalcrit/homebrewery/issues/3315)
+
+* [x] Brews on the user page can be searched by tag; clicking a tag adds it to the filter
+
+Fixes issue [#3164](https://github.com/naturalcrit/homebrewery/issues/3164)
+
+* [x] Add *DiceFont* icons {{df,d20-20}} `{{df,icon-name}}`
+
+##### abquintic
+
+* [x] Fix ^super^ and ^^sub^^ highlighting in the text editor
+
+* [x] Add new syntax for multiline Definition Lists:
+
+
+```
+Term
+::Definition 1
+::Definition 2
+with more text
+```
+
+produces:
+
+Term
+::Definition 1
+::Definition 2
+with more text
+
+Fixes issue [#2340](https://github.com/naturalcrit/homebrewery/issues/2340)
+
+##### RKuerten :
+* [x] Fix monster stat block backgrounds on print page
+
+Fixes issue [#3275](https://github.com/naturalcrit/homebrewery/issues/3275)
+
+* [x] Added new text editor theme: "Darkvision".
+
+##### calculuschild, G-Ambatte, 5e-Cleric
+
+* [x] Codebase and UI cleanup
+}}
+
+\page
+
+
+### Friday 21/2/2024 - v3.11.0
+{{taskList
+
+##### Gazook89
+
+* [x] Brew view count no longer increases when viewed by owner
+
+Fixes issue [#3037](https://github.com/naturalcrit/homebrewery/issues/3037)
+
+* [x] Small tweak to PHB H3 sizing
+
+Fixes issue [#2989](https://github.com/naturalcrit/homebrewery/issues/2989)
+
+* [x] Add **Fold/Unfold All** {{fas,fa-compress-alt}} / {{fas,fa-expand-alt}} buttons to editor bar 
+
+Fixes issue [#2965](https://github.com/naturalcrit/homebrewery/issues/2965)
+
+
+##### G-Ambatte
+
+* [x] Share link added to Editor Access error page
+
+Fixes issue [#3086](https://github.com/naturalcrit/homebrewery/issues/3086)
+
+* [x] Add Darkbrewery theme to Editor theme selector {{fas,fa-palette}}
+
+Fixes issue [#3034](https://github.com/naturalcrit/homebrewery/issues/3034)
+
+* [x] Fix Firefox prints with alternating blank pages
+
+Fixes issue [#3115](https://github.com/naturalcrit/homebrewery/issues/3115)
+
+* [x] Admin page working again
+
+Fixes issue [#2657](https://github.com/naturalcrit/homebrewery/issues/2657)
+
+
+##### 5e-Cleric
+
+* [x] Fix indenting issue with Monster Blocks and italics in Class Feature
+
+Fixes issues [#527](https://github.com/naturalcrit/homebrewery/issues/527),
+[#3247](https://github.com/naturalcrit/homebrewery/issues/3247)
+
+* [x] Allow CSS vars in curly syntax to be formatted as strings using single quotes
+
+`{{--customVar:"'a string'"}}`
+
+Fixes issue [#3066](https://github.com/naturalcrit/homebrewery/issues/3066)
+
+* [x] Add *Elderberry Inn* icons {{ei,action}} `{{ei,icon-name}}`
+
+Fixes issue [#3171](https://github.com/naturalcrit/homebrewery/issues/3171)
+
+* [x] New {{openSans **{{fas,fa-keyboard}} FONTS**  }} snippets!
+
+Fixes issue [#3171](https://github.com/naturalcrit/homebrewery/issues/3171)
+
+* [x] New page now opens in a new tab
+
+
+##### abquintic (new contributor!)
+
+* [x] Add ^super^ `^abc^` and ^^sub^^ `^^abc^^` syntax.
+ 
+Fixes issue [#2171](https://github.com/naturalcrit/homebrewery/issues/2171)
+
+* [x] Add HTML tag assignment to curly syntax `{{tag=value}}`
+ 
+Fixes issue [1488](https://github.com/naturalcrit/homebrewery/issues/1488)
+
+* [x] {{openSans **Brew → Clone to New**}} now clones tags
+ 
+Fixes issue [1488](https://github.com/naturalcrit/homebrewery/issues/1488)
+
+##### calculuschild
+
+* [x] Better error messages for "Out of Google Drive Storage" and "Not logged in to edit"
+
+Fixes issues [2510](https://github.com/naturalcrit/homebrewery/issues/2510),
+[2975](https://github.com/naturalcrit/homebrewery/issues/2975)
+
+* [x] Brew Variables
+}}
+
+\
+
+{{wide
+
+### Brew Variable Syntax
+
+You may already be familiar with `[link](url)` and `![image](url)` synax. We have expanded this to include a third `$[variable](text)` syntax. All three of these syntaxes now share a common set of features:
+
+{{varSyntaxTable
+| syntax | description |
+|:-------|-------------|
+| `[var]:content`  | Assigns a variable (must start on a line by itself, and ends at the next blank line) |
+| `[var](content)` | Assigns a variable and outputs it (can be inline) |
+| `[var]`  | Outputs the variable contents as a link, if formatted as a valid link |
+| `![var]` | Outputs as an image, if formatted as a valid image                    |
+| `$[var]` | Outputs as Markdown                                          |
+| `$[var1 + var2 - 2 * var3]` | Performs math operations and outputs result if all variables are valid numbers                                     |
+}}
+
+}}
+
+{{wide,margin-top:0,margin-bottom:0
+### Examples
+}}
+
+{{wide,columns:2,margin-top:0,margin-bottom:0
+
+```
+[first]: Bob
+
+[last]: Jones
+
+My name is $[first] $[last].
+```
+
+\column
+
+[first]: Bob
+
+[last]: Jones
+
+My name is $[first] $[last].
+
+}}
+
+{{wide,columns:2,margin-top:0,margin-bottom:0
+
+```
+[myTable]:
+| h1 | h2 |
+|----|----|
+| c1 | c2 |
+
+Here is my table:
+$[myTable]
+```
+
+\column
+
+[myTable]:
+| h1 | h2 |
+|----|----|
+| c1 | c2 |
+
+Here is my table:
+$[myTable]
+}}
+
+{{wide,columns:2,margin-top:0,margin-bottom:0
+
+```
+There are $[TableNum] tables total.
+
+#### Table $[TableNum](1): Horses
+
+#### Table $[TableNum]($[TableNum + 1]): Cows
+```
+
+\column
+
+There are $[TableNum] tables in this document. *(note: final value of `$[TableNum]` gets hoisted up if available)*
+
+
+#### Table $[TableNum](1): Horses
+
+#### Table $[TableNum]($[TableNum + 1]): Cows
+}}
+
+\page
+
 ### Friday 13/10/2023 - v3.10.0
 {{taskList
 
@@ -1335,7 +1616,7 @@ myStyle {color: black}
 ### Sunday, 29/05/2016 - v2.1.0
 - Finally added a syntax for doing spell lists. A bit in-depth about why this took so long. Essentially I'm running out of syntax to use in stardard Markdown. There are too many unique elements in the PHB-style to be mapped. I solved this earlier by stacking certain elements together (eg. an `<hr>` before a `blockquote` turns it into moster state block), but those are getting unweildly. I would like to simply wrap these in `div`s with classes, but unfortunately Markdown stops processing when within HTML blocks. To get around this I wrote my own override to the Markdown parser and lexer to process Markdown within a simple div class wrapper. This should open the door for more unique syntaxes in the future. Big step!
 - Override Ctrl+P (and cmd+P) to launch to the print page. Many people try to just print either the editing or share page to get a PDF. While this dones;t make much sense, I do get a ton of issues about it. So now if you try to do this, it'll just bring you imediately to the print page. Everybody wins!
-- The onboarding flow has also been confusing a few users (Homepage -> new -> save -> edit page). If you edit the Homepage text now, a Call to Action to save your work will pop-up.
+- The onboarding flow has also been confusing a few users (Homepage → new → save → edit page). If you edit the Homepage text now, a Call to Action to save your work will pop-up.
 - Added a 'Recently Edited' and 'Recently Viewed' nav item to the edit and share page respectively. Each will remember the last 8 items you edited or viewed and when you viewed it. Makes use of the new title attribute of brews to easy navigatation.
 - Paragraphs now indent properly after lists (thanks u/slitjen!)
 

client/admin/brewCleanup/brewCleanup.jsx

@@ -1,7 +1,6 @@
 require('./brewCleanup.less');
 const React       = require('react');
 const createClass = require('create-react-class');
-const cx          = require('classnames');
 
 const request = require('superagent');
 

client/admin/brewCompress/brewCompress.jsx

@@ -1,7 +1,6 @@
 require('./brewCompress.less');
 const React       = require('react');
 const createClass = require('create-react-class');
-const cx          = require('classnames');
 
 const request = require('superagent');
 

client/components/combobox.jsx

@@ -1,7 +1,6 @@
 const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
-const cx = require('classnames');
 require('./combobox.less');
 
 const Combobox = createClass({

client/components/dialog.jsx

@@ -0,0 +1,29 @@
+// Dialog box, for popups and modal blocking messages
+const React = require('react');
+const { useRef, useEffect } = React;
+
+function Dialog({ dismissKey, closeText = 'Close', blocking = false, ...rest }) {
+	const dialogRef = useRef(null);
+
+	useEffect(()=>{
+		if(!dismissKey || !localStorage.getItem(dismissKey)) {
+			blocking ? dialogRef.current?.showModal() : dialogRef.current?.show();
+		}
+	}, []);
+
+	const dismiss = ()=>{
+		dismissKey && localStorage.setItem(dismissKey, true);
+		dialogRef.current?.close();
+	};
+
+	return	(
+		<dialog ref={dialogRef} onCancel={dismiss} {...rest}>
+			{rest.children}
+			<button className='dismiss' onClick={dismiss}>
+				{closeText}
+			</button>
+		</dialog>
+	);
+};
+
+export default Dialog;

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -1,9 +1,8 @@
 /*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
 require('./brewRenderer.less');
 const React = require('react');
-const createClass = require('create-react-class');
+const { useState, useRef, useEffect } = React;
 const _ = require('lodash');
-const cx = require('classnames');
 
 const MarkdownLegacy = require('naturalcrit/markdownLegacy.js');
 const Markdown = require('naturalcrit/markdown.js');
@@ -13,244 +12,236 @@ const ErrorBar = require('./errorBar/errorBar.jsx');
 const RenderWarnings = require('homebrewery/renderWarnings/renderWarnings.jsx');
 const NotificationPopup = require('./notificationPopup/notificationPopup.jsx');
 const Frame = require('react-frame-component').default;
+const dedent = require('dedent-tabs').default;
+const { printCurrentBrew } = require('../../../shared/helpers.js');
+
+const DOMPurify = require('dompurify');
+const purifyConfig = { FORCE_BODY: true, SANITIZE_DOM: false };
 
 const Themes = require('themes/themes.json');
 
 const PAGE_HEIGHT = 1056;
-const PPR_THRESHOLD = 50;
 
-const BrewRenderer = createClass({
-	displayName     : 'BrewRenderer',
-	getDefaultProps : function() {
-		return {
-			text     : '',
-			style    : '',
-			renderer : 'legacy',
-			theme    : '5ePHB',
-			lang     : '',
-			errors   : []
-		};
-	},
-	getInitialState : function() {
-		let pages;
-		if(this.props.renderer == 'legacy') {
-			pages = this.props.text.split('\\page');
-		} else {
-			pages = this.props.text.split(/^\\page$/gm);
-		}
+const INITIAL_CONTENT = dedent`
+	<!DOCTYPE html><html><head>
+	<link href="//use.fontawesome.com/releases/v6.5.1/css/all.css" rel="stylesheet" type="text/css" />
+	<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
+	<link href='/homebrew/bundle.css' type="text/css" rel='stylesheet' />
+	<base target=_blank>
+	</head><body style='overflow: hidden'><div></div></body></html>`;
 
-		return {
-			viewablePageNumber : 0,
-			height             : 0,
-			isMounted          : false,
+//v=====----------------------< Brew Page Component >---------------------=====v//
+const BrewPage = (props)=>{
+	props = {
+		contents : '',
+		index    : 0,
+		...props
+	};
+	const cleanText = DOMPurify.sanitize(props.contents, purifyConfig);
+	return <div className={props.className} id={`p${props.index + 1}`} >
+	         <div className='columnWrapper' dangerouslySetInnerHTML={{ __html: cleanText }} />
+	       </div>;
+};
 
-			pages          : pages,
-			usePPR         : pages.length >= PPR_THRESHOLD,
-			visibility     : 'hidden',
-			initialContent : `<!DOCTYPE html><html><head>
-												<link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
-												<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
-												<link href='/homebrew/bundle.css' rel='stylesheet' />
-												<base target=_blank>
-												</head><body style='overflow: hidden'><div></div></body></html>`
-		};
-	},
-	height     : 0,
-	lastRender : <div></div>,
 
-	componentWillUnmount : function() {
-		window.removeEventListener('resize', this.updateSize);
-	},
+//v=====--------------------< Brew Renderer Component >-------------------=====v//
+const renderedPages = [];
+let rawPages      = [];
 
-	componentDidUpdate : function(prevProps) {
-		if(prevProps.text !== this.props.text) {
-			let pages;
-			if(this.props.renderer == 'legacy') {
-				pages = this.props.text.split('\\page');
-			} else {
-				pages = this.props.text.split(/^\\page$/gm);
-			}
-			this.setState({
-				pages  : pages,
-				usePPR : pages.length >= PPR_THRESHOLD
-			});
-		}
-	},
+const BrewRenderer = (props)=>{
+	props = {
+		text              : '',
+		style             : '',
+		renderer          : 'legacy',
+		theme             : '5ePHB',
+		lang              : '',
+		errors            : [],
+		currentEditorPage : 0,
+		...props
+	};
 
-	updateSize : function() {
-		this.setState({
-			height : this.refs.main.parentNode.clientHeight,
-		});
-	},
+	const [state, setState] = useState({
+		viewablePageNumber : 0,
+		height             : PAGE_HEIGHT,
+		isMounted          : false,
+		visibility         : 'hidden',
+	});
 
-	handleScroll : function(e){
-		const target = e.target;
-		this.setState((prevState)=>({
-			viewablePageNumber : Math.floor(target.scrollTop / target.scrollHeight * prevState.pages.length)
+	const mainRef  = useRef(null);
+
+	if(props.renderer == 'legacy') {
+		rawPages = props.text.split('\\page');
+	} else {
+		rawPages = props.text.split(/^\\page$/gm);
+	}
+
+	useEffect(()=>{ // Unmounting steps
+		return ()=>{window.removeEventListener('resize', updateSize);};
+	}, []);
+
+	const updateSize = ()=>{
+		setState((prevState)=>({
+			...prevState,
+			height : mainRef.current.parentNode.clientHeight,
 		}));
-	},
+	};
 
-	shouldRender : function(pageText, index){
-		if(!this.state.isMounted) return false;
+	const handleScroll = (e)=>{
+		const target = e.target;
+		setState((prevState)=>({
+			...prevState,
+			viewablePageNumber : Math.floor(target.scrollTop / target.scrollHeight * rawPages.length)
+		}));
+	};
 
-		const viewIndex = this.state.viewablePageNumber;
-		if(index == viewIndex - 3) return true;
-		if(index == viewIndex - 2) return true;
-		if(index == viewIndex - 1) return true;
-		if(index == viewIndex)     return true;
-		if(index == viewIndex + 1) return true;
-		if(index == viewIndex + 2) return true;
-		if(index == viewIndex + 3) return true;
+	const isInView = (index)=>{
+		if(!state.isMounted)
+			return false;
 
-		//Check for style tages
-		if(pageText.indexOf('<style>') !== -1) return true;
+		if(index == props.currentEditorPage)	//Already rendered before this step
+			return false;
+
+		if(Math.abs(index - state.viewablePageNumber) <= 3)
+			return true;
 
 		return false;
-	},
+	};
 
-	sanitizeScriptTags : function(content) {
-		return content
-			.replace(/<script/ig, '&lt;script')
-			.replace(/<\/script>/ig, '&lt;/script&gt;');
-	},
-
-	renderPageInfo : function(){
-		return <div className='pageInfo' ref='main'>
+	const renderPageInfo = ()=>{
+		return <div className='pageInfo' ref={mainRef}>
 			<div>
-				{this.props.renderer}
+				{props.renderer}
 			</div>
 			<div>
-				{this.state.viewablePageNumber + 1} / {this.state.pages.length}
+				{state.viewablePageNumber + 1} / {rawPages.length}
 			</div>
 		</div>;
-	},
+	};
 
-	renderPPRmsg : function(){
-		if(!this.state.usePPR) return;
-
-		return <div className='ppr_msg'>
-			Partial Page Renderer is enabled, because your brew is so large. May affect rendering.
-		</div>;
-	},
-
-	renderDummyPage : function(index){
+	const renderDummyPage = (index)=>{
 		return <div className='phb page' id={`p${index + 1}`} key={index}>
 			<i className='fas fa-spinner fa-spin' />
 		</div>;
-	},
+	};
 
-	renderStyle : function() {
-		if(!this.props.style) return;
-		const cleanStyle = this.sanitizeScriptTags(this.props.style);
-		//return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${this.sanitizeScriptTags(this.props.style)}\n} </style>` }} />;
+	const renderStyle = ()=>{
+		if(!props.style) return;
+		const cleanStyle = DOMPurify.sanitize(props.style, purifyConfig);
+		//return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${sanitizeScriptTags(props.style)}\n} </style>` }} />;
 		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style> ${cleanStyle} </style>` }} />;
-	},
+	};
 
-	renderPage : function(pageText, index){
-		let cleanPageText = this.sanitizeScriptTags(pageText);
-		if(this.props.renderer == 'legacy')
-			return <div className='phb page' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(cleanPageText) }} key={index} />;
-		else {
-			cleanPageText += `\n\n&nbsp;\n\\column\n&nbsp;`; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
-			return (
-				<div className='page' id={`p${index + 1}`} key={index} >
-					<div className='columnWrapper' dangerouslySetInnerHTML={{ __html: Markdown.render(cleanPageText) }} />
-				</div>
-			);
+	const renderPage = (pageText, index)=>{
+		if(props.renderer == 'legacy') {
+			const html = MarkdownLegacy.render(pageText);
+			return <BrewPage className='page phb' index={index} key={index} contents={html} />;
+		} 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);
+			return <BrewPage className='page' index={index} key={index} contents={html} />;
 		}
-	},
+	};
 
-	renderPages : function(){
-		if(this.state.usePPR){
-			return _.map(this.state.pages, (page, index)=>{
-				if(this.shouldRender(page, index) && typeof window !== 'undefined'){
-					return this.renderPage(page, index);
-				} else {
-					return this.renderDummyPage(index);
-				}
-			});
-		}
-		if(this.props.errors && this.props.errors.length) return this.lastRender;
-		this.lastRender = _.map(this.state.pages, (page, index)=>{
-			if(typeof window !== 'undefined') {
-				return this.renderPage(page, index);
-			} else {
-				return this.renderDummyPage(index);
+	const renderPages = ()=>{
+		if(props.errors && props.errors.length)
+			return renderedPages;
+
+		if(rawPages.length != renderedPages.length) // Re-render all pages when page count changes
+			renderedPages.length = 0;
+
+		// Render currently-edited page first so cross-page effects (variables, links) can propagate out first
+		renderedPages[props.currentEditorPage] = renderPage(rawPages[props.currentEditorPage], props.currentEditorPage);
+
+		_.forEach(rawPages, (page, index)=>{
+			if((isInView(index) || !renderedPages[index]) && typeof window !== 'undefined'){
+				renderedPages[index] = renderPage(page, index); // Render any page not yet rendered, but only re-render those in PPR range
 			}
 		});
-		return this.lastRender;
-	},
+		return renderedPages;
+	};
 
-	frameDidMount : function(){	//This triggers when iFrame finishes internal "componentDidMount"
+	const handleControlKeys = (e)=>{
+		if(!(e.ctrlKey || e.metaKey)) return;
+		const P_KEY = 80;
+		if(e.keyCode == P_KEY && props.allowPrint) printCurrentBrew();
+		if(e.keyCode == P_KEY) {
+			e.stopPropagation();
+			e.preventDefault();
+		}
+	};
+
+	const frameDidMount = ()=>{	//This triggers when iFrame finishes internal "componentDidMount"
 		setTimeout(()=>{	//We still see a flicker where the style isn't applied yet, so wait 100ms before showing iFrame
-			this.updateSize();
-			window.addEventListener('resize', this.updateSize);
-			this.renderPages(); //Make sure page is renderable before showing
-			this.setState({
+			updateSize();
+			window.addEventListener('resize', updateSize);
+			renderPages(); //Make sure page is renderable before showing
+			setState((prevState)=>({
+				...prevState,
 				isMounted  : true,
 				visibility : 'visible'
-			});
+			}));
 		}, 100);
-	},
+	};
 
-	emitClick : function(){
-		// console.log('iFrame clicked');
+	const emitClick = ()=>{ // Allow clicks inside iFrame to interact with dropdowns, etc. from outside
 		if(!window || !document) return;
 		document.dispatchEvent(new MouseEvent('click'));
-	},
+	};
 
-	render : function(){
-		//render in iFrame so broken code doesn't crash the site.
-		//Also render dummy page while iframe is mounting.
-		const rendererPath = this.props.renderer == 'V3' ? 'V3' : 'Legacy';
-		const themePath    = this.props.theme ?? '5ePHB';
-		const baseThemePath = Themes[rendererPath][themePath].baseTheme;
-		return (
-			<React.Fragment>
-				{!this.state.isMounted
-					? <div className='brewRenderer' onScroll={this.handleScroll}>
-						<div className='pages' ref='pages'>
-							{this.renderDummyPage(1)}
-						</div>
+	const rendererPath  = props.renderer == 'V3' ? 'V3' : 'Legacy';
+	const themePath     = props.theme ?? '5ePHB';
+	const baseThemePath = Themes[rendererPath][themePath].baseTheme;
+
+	return (
+		<>
+			{/*render dummy page while iFrame is mounting.*/}
+			{!state.isMounted
+				? <div className='brewRenderer' onScroll={handleScroll}>
+					<div className='pages'>
+						{renderDummyPage(1)}
 					</div>
-	        : null}
+				</div>
+				: null}
 
-				<Frame id='BrewRenderer' initialContent={this.state.initialContent}
-					style={{ width: '100%', height: '100%', visibility: this.state.visibility }}
-					contentDidMount={this.frameDidMount}
-					onClick={()=>{this.emitClick();}}
-				>
-					<div className={'brewRenderer'}
-						onScroll={this.handleScroll}
-						style={{ height: this.state.height }}>
+			<ErrorBar errors={props.errors} />
+			<div className='popups'>
+				<RenderWarnings />
+				<NotificationPopup />
+			</div>
 
-						<ErrorBar errors={this.props.errors} />
-						<div className='popups'>
-							<RenderWarnings />
-							<NotificationPopup />
-						</div>
-						<link href={`/themes/${rendererPath}/Blank/style.css`} rel='stylesheet'/>
-						{baseThemePath &&
-							<link href={`/themes/${rendererPath}/${baseThemePath}/style.css`} rel='stylesheet'/>
-						}
-						<link href={`/themes/${rendererPath}/${themePath}/style.css`} rel='stylesheet'/>
-						{/* Apply CSS from Style tab and render pages from Markdown tab */}
-						{this.state.isMounted
-							&&
-							<>
-								{this.renderStyle()}
-								<div className='pages' ref='pages' lang={`${this.props.lang || 'en'}`}>
-									{this.renderPages()}
-								</div>
-							</>
-						}
-					</div>
-				</Frame>
-				{this.renderPageInfo()}
-				{this.renderPPRmsg()}
-			</React.Fragment>
-		);
-	}
-});
+			{/*render in iFrame so broken code doesn't crash the site.*/}
+			<Frame id='BrewRenderer' initialContent={INITIAL_CONTENT}
+				style={{ width: '100%', height: '100%', visibility: state.visibility }}
+				contentDidMount={frameDidMount}
+				onClick={()=>{emitClick();}}
+			>
+				<div className={'brewRenderer'}
+					onScroll={handleScroll}
+					onKeyDown={handleControlKeys}
+					tabIndex={-1}
+					style={{ height: state.height }}>
+
+					<link href={`/themes/${rendererPath}/Blank/style.css`} type='text/css' rel='stylesheet'/>
+					{baseThemePath &&
+						<link href={`/themes/${rendererPath}/${baseThemePath}/style.css`} type='text/css' rel='stylesheet'/>
+					}
+					<link href={`/themes/${rendererPath}/${themePath}/style.css`} type='text/css' rel='stylesheet'/>
+
+					{/* Apply CSS from Style tab and render pages from Markdown tab */}
+					{state.isMounted
+						&&
+						<>
+							{renderStyle()}
+							<div className='pages' lang={`${props.lang || 'en'}`}>
+								{renderPages()}
+							</div>
+						</>
+					}
+				</div>
+			</Frame>
+			{renderPageInfo()}
+		</>
+	);
+};
 
 module.exports = BrewRenderer;

client/homebrew/brewRenderer/brewRenderer.less

@@ -1,46 +1,79 @@
 @import (multiple, less) 'shared/naturalcrit/styles/reset.less';
 
-.brewRenderer{
+.brewRenderer {
 	will-change : transform;
 	overflow-y  : scroll;
-	.pages{
+	:where(.pages) {
 		margin : 30px 0px;
-		&>.page{
+		& > :where(.page) {
+			width         : 215.9mm;
+			height        : 279.4mm;
 			margin-right  : auto;
 			margin-bottom : 30px;
 			margin-left   : auto;
-			box-shadow    : 1px 4px 14px #000;
+			box-shadow    : 1px 4px 14px #000000;
 		}
 	}
+
+	&::-webkit-scrollbar {
+		width: 20px;
+		&:horizontal{
+			height: 20px;
+			width:auto;
+		}
+		&-thumb {
+			background: linear-gradient(90deg, #d3c1af 15px, #00000000 15px);
+			&:horizontal{
+				background: linear-gradient(0deg, #d3c1af 15px, #00000000 15px);
+			}
+		}
+		&-corner {
+			visibility: hidden;
+		}
+	}
+	
+
+
+
+
 }
-.pane{
-	position : relative;
-}
-.pageInfo{
+.pane { position : relative; }
+.pageInfo {
 	position         : absolute;
 	right            : 17px;
 	bottom           : 0;
 	z-index          : 1000;
-	background-color : #333;
 	font-size        : 10px;
 	font-weight      : 800;
 	color            : white;
+	background-color : #333333;
 	div {
-		display: inline-block;
+		display          : inline-block;
 		padding          : 8px 10px;
-		&:not(:last-child){
-			border-right: 1px solid #666;
-		}
+		&:not(:last-child) { border-right : 1px solid #666666; }
 	}
 }
-.ppr_msg{
+.ppr_msg {
 	position         : absolute;
-	left             : 0px;
 	bottom           : 0;
+	left             : 0px;
 	z-index          : 1000;
 	padding          : 8px 10px;
-	background-color : #333;
 	font-size        : 10px;
 	font-weight      : 800;
 	color            : white;
+	background-color : #333333;
 }
+
+@media print {
+	.brewRenderer {
+		height: 100%;
+		overflow-y: unset;
+		.pages {
+			margin: 0px;
+			&>.page {
+				box-shadow: unset;
+			}
+		}
+	}
+}

client/homebrew/brewRenderer/errorBar/errorBar.jsx

@@ -2,7 +2,6 @@ require('./errorBar.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
-const cx    = require('classnames');
 
 const ErrorBar = createClass({
 	displayName     : 'ErrorBar',

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -1,84 +1,45 @@
 require('./notificationPopup.less');
 const React = require('react');
-const createClass = require('create-react-class');
 const _     = require('lodash');
-const cx    = require('classnames');	//Unused variable
+
+import Dialog from '../../../components/dialog.jsx';
 
 const DISMISS_KEY = 'dismiss_notification12-04-23';
+const DISMISS_BUTTON = <i className='fas fa-times dismiss' />;
 
-const NotificationPopup = createClass({
-	displayName     : 'NotificationPopup',
-	getInitialState : function() {
-		return {
-			notifications : {}
-		};
-	},
-	componentDidMount : function() {
-		this.checkNotifications();
-		window.addEventListener('resize', this.checkNotifications);
-	},
-	componentWillUnmount : function() {
-		window.removeEventListener('resize', this.checkNotifications);
-	},
-	notifications : {
-		psa : function(){
-			return (
-				<>
-					<li key='psa'>
-						<em>Broken default logo on <b>CoverPage</b> </em> <br />
-						If you have used the Cover Page snippet and notice the Naturalcrit
-						logo is showing as a broken image, this is due to some small tweaks
-						of this BETA feature. To fix the logo in your cover page, rename
-						the image link <b>"/assets/naturalCritLogoRed.svg"</b>. Remember
-						that any snippet marked "BETA" may have a similar change in the
-						future as we encounter any bugs or reworks.
-					</li>
+const NotificationPopup = ()=>{
+	return <Dialog className='notificationPopup' dismissKey={DISMISS_KEY} closeText={DISMISS_BUTTON} >
+		<div className='header'>
+			<i className='fas fa-info-circle info'></i>
+			<h3>Notice</h3>
+			<small>This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind:</small>
+		</div>
+		<ul>
+			<li key='psa'>
+				<em>Don't store IMAGES in Google Drive</em><br />
+				Google Drive is not an image service, and will block images from being used
+				in brews if they get more views than expected. Google has confirmed they won't fix
+				this, so we recommend you look for another image hosting service such as imgur, ImgBB or Google Photos.
+			</li>
 
-					<li key='googleDriveFolder'>
-						<em>Don't delete your Homebrewery folder on Google Drive!</em> <br />
-						We have had several reports of users losing their brews, not realizing
-						that they had deleted the files on their Google Drive. If you have a Homebrewery folder
-						on your Google Drive with *.txt files inside, <em>do not delete it</em>!
-						We cannot help you recover files that you have deleted from your own
-						Google Drive.
-					</li>
+			<li key='googleDriveFolder'>
+				<em>Don't delete your Homebrewery folder on Google Drive!</em> <br />
+				We have had several reports of users losing their brews, not realizing
+				that they had deleted the files on their Google Drive. If you have a Homebrewery folder
+				on your Google Drive with *.txt files inside, <em>do not delete it</em>!
+				We cannot help you recover files that you have deleted from your own
+				Google Drive.
+			</li>
 
-					<li key='faq'>
-						<em>Protect your work! </em> <br />
-						If you opt not to use your Google Drive, keep in mind that we do not save a history of your projects. Please make frequent backups of your brews!&nbsp;
-						<a target='_blank' href='https://www.reddit.com/r/homebrewery/comments/adh6lh/faqs_psas_announcements/'>
-							See the FAQ
-						</a> to learn how to avoid losing your work!
-					</li>
-				</>
-			);
-		}
-	},
-	checkNotifications : function(){
-		const hideDismiss = localStorage.getItem(DISMISS_KEY);
-		if(hideDismiss) return this.setState({ notifications: {} });
-
-		this.setState({
-			notifications : _.mapValues(this.notifications, (fn)=>{ return fn(); })	//Convert notification functions into their return text value
-		});
-	},
-	dismiss : function(){
-		localStorage.setItem(DISMISS_KEY, true);
-		this.checkNotifications();
-	},
-	render : function(){
-		if(_.isEmpty(this.state.notifications)) return null;
-
-		return <div className='notificationPopup'>
-			<i className='fas fa-times dismiss' onClick={this.dismiss}/>
-			<i className='fas fa-info-circle info' />
-			<div className='header'>
-				<h3>Notice</h3>
-				<small>This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind:</small>
-			</div>
-			<ul>{_.values(this.state.notifications)}</ul>
-		</div>;
-	}
-});
+			<li key='faq'>
+				<em>Protect your work! </em> <br />
+				If you opt not to use your Google Drive, keep in mind that we do not save a history of your projects. Please make frequent backups of your brews!&nbsp;
+				<a target='_blank' href='https://www.reddit.com/r/homebrewery/comments/adh6lh/faqs_psas_announcements/'>
+					See the FAQ
+				</a> to learn how to avoid losing your work!
+			</li>
+		</ul>
+	</Dialog>;
+};
 
 module.exports = NotificationPopup;

client/homebrew/brewRenderer/notificationPopup/notificationPopup.less

@@ -1,64 +1,60 @@
-.popups{
+.popups {
 	position         : fixed;
 	top              : @navbarHeight;
-	right            : 15px;
+	right            : 24px;
 	z-index          : 10001;
 	width            : 450px;
 }
 
-.notificationPopup{
+.notificationPopup {
 	position         : relative;
-	display          : inline-block;
 	width            : 100%;
 	padding          : 15px;
 	padding-bottom   : 10px;
 	padding-left     : 25px;
-	background-color : @blue;
 	color            : white;
-	a{
-		color       : #e0e5c1;
+	background-color : @blue;
+	border           : none;
+	&[open] { display : inline-block; }
+	a {
 		font-weight : 800;
+		color       : #E0E5C1;
 	}
-	i.info{
+	i.info {
 		position  : absolute;
 		top       : 12px;
 		left      : 12px;
-		opacity   : 0.8;
 		font-size : 2.5em;
+		opacity   : 0.8;
 	}
-	i.dismiss{
-		position : absolute;
-		top      : 10px;
-		right    : 10px;
-		cursor   : pointer;
-		opacity  : 0.6;
-		&:hover{
-			opacity : 1;
-		}
+	button.dismiss {
+		position         : absolute;
+		top              : 10px;
+		right            : 10px;
+		cursor           : pointer;
+		background-color : transparent;
+		opacity          : 0.6;
+		&:hover { opacity : 1; }
 	}
-	.header {
-		padding-left : 50px;
-	}
-	small{
-		opacity   : 0.7;
+	.header { padding-left : 50px; }
+	small {
 		font-size : 0.6em;
+		opacity   : 0.7;
 	}
-	h3{
+	h3 {
 		font-size   : 1.1em;
 		font-weight : 800;
 	}
-	ul{
+	ul {
 		margin-top          : 15px;
 		font-size           : 0.8em;
 		list-style-position : outside;
 		list-style-type     : disc;
-		li{
+		li {
+			margin-top  : 1.4em;
 			font-size   : 0.8em;
 			line-height : 1.4em;
-			margin-top  : 1.4em;
-			em{
-				font-weight : 800;
-			}
+			em { font-weight : 800; }
 		}
 	}
 }

client/homebrew/editor/editor.jsx

@@ -5,6 +5,7 @@ const createClass = require('create-react-class');
 const _ = require('lodash');
 const cx = require('classnames');
 const dedent = require('dedent-tabs').default;
+const Markdown = require('../../../shared/naturalcrit/markdown.js');
 
 const CodeEditor = require('naturalcrit/codeEditor/codeEditor.jsx');
 const SnippetBar = require('./snippetbar/snippetbar.jsx');
@@ -47,6 +48,9 @@ const Editor = createClass({
 		};
 	},
 
+	editor     : React.createRef(null),
+	codeEditor : React.createRef(null),
+
 	isText  : function() {return this.state.view == 'text';},
 	isStyle : function() {return this.state.view == 'style';},
 	isMeta  : function() {return this.state.view == 'meta';},
@@ -79,15 +83,15 @@ const Editor = createClass({
 	},
 
 	updateEditorSize : function() {
-		if(this.refs.codeEditor) {
-			let paneHeight = this.refs.main.parentNode.clientHeight;
-			paneHeight -= SNIPPETBAR_HEIGHT + 1;
-			this.refs.codeEditor.codeMirror.setSize(null, paneHeight);
+		if(this.codeEditor.current) {
+			let paneHeight = this.editor.current.parentNode.clientHeight;
+			paneHeight -= SNIPPETBAR_HEIGHT;
+			this.codeEditor.current.codeMirror.setSize(null, paneHeight);
 		}
 	},
 
 	handleInject : function(injectText){
-		this.refs.codeEditor?.injectText(injectText, false);
+		this.codeEditor.current?.injectText(injectText, false);
 	},
 
 	handleViewChange : function(newView){
@@ -98,7 +102,7 @@ const Editor = createClass({
 	},
 
 	getCurrentPage : function(){
-		const lines = this.props.brew.text.split('\n').slice(0, this.refs.codeEditor.getCursorPosition().line + 1);
+		const lines = this.props.brew.text.split('\n').slice(0, this.codeEditor.current.getCursorPosition().line + 1);
 		return _.reduce(lines, (r, line)=>{
 			if(
 				(this.props.renderer == 'legacy' && line.indexOf('\\page') !== -1)
@@ -110,9 +114,9 @@ const Editor = createClass({
 	},
 
 	highlightCustomMarkdown : function(){
-		if(!this.refs.codeEditor) return;
+		if(!this.codeEditor.current) return;
 		if(this.state.view === 'text')  {
-			const codeMirror = this.refs.codeEditor.codeMirror;
+			const codeMirror = this.codeEditor.current.codeMirror;
 
 			codeMirror.operation(()=>{ // Batch CodeMirror styling
 				//reset custom text styles
@@ -151,18 +155,43 @@ const Editor = createClass({
 
 						// definition lists
 						if(line.includes('::')){
-							const regex = /^([^\n]*?)::([^\n]*)(?:\n|$)/ym;
+							if(/^:*$/.test(line) == true){ return };
+							const regex = /^([^\n]*?:?\s?)(::[^\n]*)(?:\n|$)/ymd;  // the `d` flag, for match indices, throws an ESLint error.
 							let match;
 							while ((match = regex.exec(line)) != null){
-								codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[0]) }, { line: lineNumber, ch: line.indexOf(match[0]) + match[0].length }, { className: 'define' });
-								codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[1]) }, { line: lineNumber, ch: line.indexOf(match[1]) + match[1].length }, { className: 'term' });
-								codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[2]) }, { line: lineNumber, ch: line.indexOf(match[2]) + match[2].length }, { className: 'definition' });
+								codeMirror.markText({ line: lineNumber, ch: match.indices[0][0] }, { line: lineNumber, ch: match.indices[0][1] }, { className: 'dl-highlight' });
+								codeMirror.markText({ line: lineNumber, ch: match.indices[1][0] }, { line: lineNumber, ch: match.indices[1][1] }, { className: 'dt-highlight' });
+								codeMirror.markText({ line: lineNumber, ch: match.indices[2][0] }, { line: lineNumber, ch: match.indices[2][1] }, { className: 'dd-highlight' });
+								const ddIndex = match.indices[2][0];
+								let colons = /::/g;
+								let colonMatches = colons.exec(match[2]);
+								if(colonMatches !== null){
+									codeMirror.markText({ line: lineNumber, ch: colonMatches.index + ddIndex }, { line: lineNumber, ch: colonMatches.index + colonMatches[0].length + ddIndex }, { className: 'dl-colon-highlight'} )
+								}
+							}
+						}
+
+						// Subscript & Superscript
+						if(line.includes('^')) {
+							let startIndex = line.indexOf('^');
+							const superRegex = /\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^/gy;
+							const subRegex   = /\^\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^\^/gy;
+							
+							while (startIndex >= 0) {
+								superRegex.lastIndex = subRegex.lastIndex = startIndex;
+								let isSuper = false;
+								let match = subRegex.exec(line) || superRegex.exec(line);
+								if (match) {
+									isSuper = !subRegex.lastIndex;
+									codeMirror.markText({ line: lineNumber, ch: match.index }, { line: lineNumber, ch: match.index + match[0].length }, { className: isSuper ? 'superscript' : 'subscript' });
+								}
+								startIndex = line.indexOf('^', Math.max(startIndex + 1, subRegex.lastIndex, superRegex.lastIndex));
 							}
 						}
 
 						// Highlight injectors {style}
 						if(line.includes('{') && line.includes('}')){
-							const regex = /(?:^|[^{\n])({(?=((?::(?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':{}\s]*)*))\2})/gm;
+							const regex = /(?:^|[^{\n])({(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\2})/gm;
 							let match;
 							while ((match = regex.exec(line)) != null) {
 								codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[1]) }, { line: lineNumber, ch: line.indexOf(match[1]) + match[1].length }, { className: 'injection' });
@@ -170,7 +199,7 @@ const Editor = createClass({
 						}
 						// Highlight inline spans {{content}}
 						if(line.includes('{{') && line.includes('}}')){
-							const regex = /{{(?=((?::(?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':{}\s]*)*))\1 *|}}/g;
+							const regex = /{{(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\1 *|}}/g;
 							let match;
 							let blockCount = 0;
 							while ((match = regex.exec(line)) != null) {
@@ -189,11 +218,39 @@ const Editor = createClass({
 							// Highlight block divs {{\n Content \n}}
 							let endCh = line.length+1;
 
-							const match = line.match(/^ *{{(?=((?::(?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':{}\s]*)*))\1 *$|^ *}}$/);
+							const match = line.match(/^ *{{(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\1 *$|^ *}}$/);
 							if(match)
 								endCh = match.index+match[0].length;
 							codeMirror.markText({ line: lineNumber, ch: 0 }, { line: lineNumber, ch: endCh }, { className: 'block' });
 						}
+
+						// Emojis
+						if(line.match(/:[^\s:]+:/g)) {
+							let startIndex = line.indexOf(':');
+							const emojiRegex = /:[^\s:]+:/gy;
+
+							while (startIndex >= 0) {
+								emojiRegex.lastIndex = startIndex;
+								let match = emojiRegex.exec(line);
+								if (match) {
+									let tokens = Markdown.marked.lexer(match[0]);
+									tokens = tokens[0].tokens.filter(t => t.type == 'emoji')
+									if (!tokens.length)
+										return;
+
+									let startPos = { line: lineNumber, ch: match.index };
+									let endPos   = { line: lineNumber, ch: match.index + match[0].length };
+
+									// Iterate over conflicting marks and clear them
+									var marks = codeMirror.findMarks(startPos, endPos);
+									marks.forEach(function(marker) {
+										marker.clear();
+									});
+									codeMirror.markText(startPos, endPos, { className: 'emoji' });
+								}
+								startIndex = line.indexOf(':', Math.max(startIndex + 1, emojiRegex.lastIndex));
+							}
+						}
 					}
 				});
 			});
@@ -248,23 +305,23 @@ const Editor = createClass({
 
 				targetLine = lineCount - 1; //Scroll to `\page`, which is one line back.
 
-				let currentY = this.refs.codeEditor.codeMirror.getScrollInfo().top;
-				let targetY  = this.refs.codeEditor.codeMirror.heightAtLine(targetLine, 'local', true);
+				let currentY = this.codeEditor.current.codeMirror.getScrollInfo().top;
+				let targetY  = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true);
 
 				//Scroll 1/10 of the way every 10ms until 1px off.
 				const incrementalScroll = setInterval(()=>{
 					currentY += (targetY - currentY) / 10;
-					this.refs.codeEditor.codeMirror.scrollTo(null, currentY);
+					this.codeEditor.current.codeMirror.scrollTo(null, currentY);
 
 					// Update target: target height is not accurate until within +-10 lines of the visible window
 					if(Math.abs(targetY - currentY > 100))
-						targetY = this.refs.codeEditor.codeMirror.heightAtLine(targetLine, 'local', true);
+						targetY = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true);
 
 					// End when close enough
 					if(Math.abs(targetY - currentY) < 1) {
-						this.refs.codeEditor.codeMirror.scrollTo(null, targetY);  // Scroll any remaining difference
-						this.refs.codeEditor.setCursorPosition({ line: targetLine + 1, ch: 0 });
-						this.refs.codeEditor.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
+						this.codeEditor.current.codeMirror.scrollTo(null, targetY);  // Scroll any remaining difference
+						this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 });
+						this.codeEditor.current.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
 						clearInterval(incrementalScroll);
 					}
 				}, 10);
@@ -274,7 +331,7 @@ const Editor = createClass({
 
 	//Called when there are changes to the editor's dimensions
 	update : function(){
-		this.refs.codeEditor?.updateSize();
+		this.codeEditor.current?.updateSize();
 	},
 
 	updateEditorTheme : function(newTheme){
@@ -293,7 +350,7 @@ const Editor = createClass({
 		if(this.isText()){
 			return <>
 				<CodeEditor key='codeEditor'
-					ref='codeEditor'
+					ref={this.codeEditor}
 					language='gfm'
 					view={this.state.view}
 					value={this.props.brew.text}
@@ -305,7 +362,7 @@ const Editor = createClass({
 		if(this.isStyle()){
 			return <>
 				<CodeEditor key='codeEditor'
-					ref='codeEditor'
+					ref={this.codeEditor}
 					language='css'
 					view={this.state.view}
 					value={this.props.brew.style ?? DEFAULT_STYLE_TEXT}
@@ -330,20 +387,28 @@ const Editor = createClass({
 	},
 
 	redo : function(){
-		return this.refs.codeEditor?.redo();
+		return this.codeEditor.current?.redo();
 	},
 
 	historySize : function(){
-		return this.refs.codeEditor?.historySize();
+		return this.codeEditor.current?.historySize();
 	},
 
 	undo : function(){
-		return this.refs.codeEditor?.undo();
+		return this.codeEditor.current?.undo();
+	},
+
+	foldCode : function(){
+		return this.codeEditor.current?.foldAllCode();
+	},
+
+	unfoldCode : function(){
+		return this.codeEditor.current?.unfoldAllCode();
 	},
 
 	render : function(){
 		return (
-			<div className='editor' ref='main'>
+			<div className='editor' ref={this.editor}>
 				<SnippetBar
 					brew={this.props.brew}
 					view={this.state.view}
@@ -354,10 +419,12 @@ const Editor = createClass({
 					theme={this.props.brew.theme}
 					undo={this.undo}
 					redo={this.redo}
+					foldCode={this.foldCode}
+					unfoldCode={this.unfoldCode}
 					historySize={this.historySize()}
 					currentEditorTheme={this.state.editorTheme}
 					updateEditorTheme={this.updateEditorTheme}
-					cursorPos={this.refs.codeEditor?.getCursorPosition() || {}} />
+					cursorPos={this.codeEditor.current?.getCursorPosition() || {}} />
 
 				{this.renderEditor()}
 			</div>

client/homebrew/editor/editor.less

@@ -43,6 +43,38 @@
 			font-weight : bold;
 			color       : green;
 		}
+		.emoji:not(.cm-comment) {
+			margin-left    : 2px;
+			color          : #360034;
+			background     : #ffc8ff;
+			border-radius  : 6px;
+			font-weight    : bold;
+			padding-bottom : 1px;
+			outline-offset : -2px;
+			outline        : solid 2px #ff96fc;
+		}
+		.superscript:not(.cm-comment) {
+			font-weight    : bold;
+			color          : goldenrod;
+			vertical-align : super;
+			font-size      : 0.9em;
+		}
+		.subscript:not(.cm-comment) {
+			font-weight    : bold;
+			color          : rgb(123, 123, 15);
+			vertical-align : sub;
+			font-size      : 0.9em;
+		}
+		.dl-highlight {
+			&.dl-colon-highlight {
+				font-weight   : bold;
+				color         : #949494;
+				background    : #E5E5E5;
+				border-radius : 3px;
+			}
+			&.dt-highlight { color : rgb(96, 117, 143); }
+			&.dd-highlight { color : rgb(97, 57, 178); }
+		}		
 	}
 
 	.brewJump {

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -3,7 +3,6 @@ require('./metadataEditor.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
-const cx    = require('classnames');
 const request = require('../../utils/request-middleware.js');
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Combobox = require('client/components/combobox.jsx');

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -2,7 +2,7 @@
 
 .metadataEditor{
 	position         : absolute;
-	z-index          : 10000;
+	z-index          : 5;
 	box-sizing       : border-box;
 	width            : 100%;
 	padding          : 25px;

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -37,6 +37,8 @@ const Snippetbar = createClass({
 			undo              : ()=>{},
 			redo              : ()=>{},
 			historySize       : ()=>{},
+			foldCode          : ()=>{},
+			unfoldCode        : ()=>{},
 			updateEditorTheme : ()=>{},
 			cursorPos         : {}
 		};
@@ -72,6 +74,7 @@ const Snippetbar = createClass({
 		}
 	},
 
+
 	mergeCustomizer : function(valueA, valueB, key) {
 		if(key == 'snippets') {
 			const result = _.reverse(_.unionBy(_.reverse(valueB), _.reverse(valueA), 'name')); // Join snippets together, with preference for the current theme over the base theme
@@ -100,10 +103,12 @@ const Snippetbar = createClass({
 		this.props.onInject(injectedText);
 	},
 
-	toggleThemeSelector : function(){
-		this.setState({
-			themeSelector : !this.state.themeSelector
-		});
+	toggleThemeSelector : function(e){
+		if(e.target.tagName != 'SELECT'){
+			this.setState({
+				themeSelector : !this.state.themeSelector
+			});
+		}
 	},
 
 	changeTheme : function(e){
@@ -117,7 +122,7 @@ const Snippetbar = createClass({
 
 	renderThemeSelector : function(){
 		return <div className='themeSelector'>
-			<select value={this.props.currentEditorTheme} onChange={this.changeTheme} onMouseDown={(this.changeTheme)}>
+			<select value={this.props.currentEditorTheme} onChange={this.changeTheme} >
 				{EditorThemes.map((theme, key)=>{
 					return <option key={key} value={theme}>{theme}</option>;
 				})}
@@ -144,6 +149,22 @@ const Snippetbar = createClass({
 	renderEditorButtons : function(){
 		if(!this.props.showEditButtons) return;
 
+		let foldButtons;
+		if(this.props.view == 'text'){
+			foldButtons =
+				<>
+					<div className={`editorTool foldAll ${this.props.foldCode ? 'active' : ''}`}
+						onClick={this.props.foldCode} >
+						<i className='fas fa-compress-alt' />
+					</div>
+					<div className={`editorTool unfoldAll ${this.props.unfoldCode ? 'active' : ''}`}
+						onClick={this.props.unfoldCode} >
+						<i className='fas fa-expand-alt' />
+					</div>
+				</>;
+
+		}
+
 		return <div className='editors'>
 			<div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`}
 				onClick={this.props.undo} >
@@ -154,11 +175,13 @@ const Snippetbar = createClass({
 				<i className='fas fa-redo' />
 			</div>
 			<div className='divider'></div>
+			{foldButtons}
 			<div className={`editorTool editorTheme ${this.state.themeSelector ? 'active' : ''}`}
 				onClick={this.toggleThemeSelector} >
 				<i className='fas fa-palette' />
+				{this.state.themeSelector && this.renderThemeSelector()}
 			</div>
-			{this.state.themeSelector && this.renderThemeSelector()}
+
 			<div className='divider'></div>
 			<div className={cx('text', { selected: this.props.view === 'text' })}
 				 onClick={()=>this.props.onViewChange('text')}>
@@ -209,7 +232,7 @@ const SnippetGroup = createClass({
 		return _.map(snippets, (snippet)=>{
 			return <div className='snippet' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)}>
 				<i className={snippet.icon} />
-				<span className='name'>{snippet.name}</span>
+				<span className='name'title={snippet.name}>{snippet.name}</span>
 				{snippet.experimental && <span className='beta'>beta</span>}
 				{snippet.subsnippets && <>
 					<i className='fas fa-caret-right'></i>

client/homebrew/editor/snippetbar/snippetbar.less

@@ -1,162 +1,192 @@
 @import (less) './client/icons/customIcons.less';
-.snippetBar{
+@import (less) '././././themes/fonts/5e/fonts.less';
+
+.snippetBar {
 	@menuHeight      : 25px;
 	position         : relative;
 	height           : @menuHeight;
-	background-color : #ddd;
-	.editors{
+	color            : black;
+	background-color : #DDDDDD;
+
+	.editors {
 		position        : absolute;
-		display         : flex;
 		top             : 0px;
 		right           : 0px;
-		height          : @menuHeight;
-		width           : 125px;
+		display         : flex;
 		justify-content : space-between;
-		&>div{
-			height      : @menuHeight;
+		height          : @menuHeight;
+		& > div {
 			width       : @menuHeight;
-			cursor      : pointer;
+			height      : @menuHeight;
 			line-height : @menuHeight;
 			text-align  : center;
-			&:hover,&.selected{
-				background-color : #999;
-			}
-			&.text{
+			cursor      : pointer;
+			&:hover,&.selected { background-color : #999999; }
+			&.text {
 				.tooltipLeft('Brew Editor');
 			}
-			&.style{
+			&.style {
 				.tooltipLeft('Style Editor');
 			}
-			&.meta{
+			&.meta {
 				.tooltipLeft('Properties');
 			}
-			&.undo{
+			&.undo {
 				.tooltipLeft('Undo');
 				font-size : 0.75em;
 				color     : grey;
-				&.active{
-					color : black;
-				}
+				&.active { color : inherit; }
 			}
-			&.redo{
+			&.redo {
 				.tooltipLeft('Redo');
 				font-size : 0.75em;
 				color     : grey;
-				&.active{
-					color : black;
-				}
+				&.active { color : inherit; }
 			}
-			&.editorTheme{
+			&.foldAll {
+				.tooltipLeft('Fold All');
+				font-size : 0.75em;
+				color     : inherit;
+			}
+			&.unfoldAll {
+				.tooltipLeft('Unfold All');
+				font-size : 0.75em;
+				color     : inherit;
+			}
+			&.editorTheme {
 				.tooltipLeft('Editor Themes');
 				font-size : 0.75em;
 				color     : black;
-				&.active{
-					color : white;
-					background-color: black;
+				&.active {
+					position         : relative;
+					background-color : #999999;
 				}
 			}
 			&.divider {
-				background: linear-gradient(#000, #000) no-repeat center/1px 100%;
-				width: 5px;
-				&:hover{
-					background-color: inherit;
-				}
+				width      : 5px;
+				background : linear-gradient(currentColor, currentColor) no-repeat center/1px 100%;
+				&:hover { background-color : inherit; }
 			}
 		}
-		.themeSelector{
-			position: absolute;
-			left: -65px;
-			top: 30px;
-			z-index: 999;
-			width: 170px;
-			background-color: black;
-    		border-radius: 5px;
+		.themeSelector {
+			position         : absolute;
+			top              : 25px;
+			right            : 0;
+			z-index          : 10;
+			display          : flex;
+			align-items      : center;
+			justify-content  : center;
+			width            : 170px;
+			height           : inherit;
+			background-color : inherit;
 		}
 	}
-	.snippetBarButton{
-		height         : @menuHeight;
-		line-height    : @menuHeight;
+	.snippetBarButton {
 		display        : inline-block;
+		height         : @menuHeight;
 		padding        : 0px 5px;
-		font-weight    : 800;
 		font-size      : 0.625em;
+		font-weight    : 800;
+		line-height    : @menuHeight;
 		text-transform : uppercase;
 		cursor         : pointer;
-		&:hover, &.selected{
-			background-color : #999;
-		}
-		i{
-			vertical-align : middle;
+		&:hover, &.selected { background-color : #999999; }
+		i {
 			margin-right   : 3px;
 			font-size      : 1.4em;
+			vertical-align : middle;
 		}
 	}
-	.toggleMeta{
-		position     : absolute;
-		top          : 0px;
-		right        : 0px;
-		border-left  : 1px solid black;
-		.tooltipLeft("Edit Brew Properties");
+	.toggleMeta {
+		position    : absolute;
+		top         : 0px;
+		right       : 0px;
+		border-left : 1px solid black;
+		.tooltipLeft('Edit Brew Properties');
 	}
-	.snippetGroup{
-		border-right   : 1px solid black;
-		&:hover{
-			&>.dropdown{
-				visibility : visible;
-			}
+	.snippetGroup {
+		border-right   : 1px solid currentColor;
+		&:hover {
+			& > .dropdown { visibility : visible; }
 		}
-		.dropdown{
+		.dropdown {
 			position         : absolute;
 			top              : 100%;
-			visibility       : hidden;
 			z-index          : 1000;
-			margin-left      : -5px;
 			padding          : 0px;
-			background-color : #ddd;
-			.snippet{
-				position: relative;
-				.animate(background-color);
+			margin-left      : -5px;
+			visibility       : hidden;
+			background-color : #DDDDDD;
+			.snippet {
+				position    : relative;
 				display     : flex;
 				align-items : center;
 				min-width   : max-content;
 				padding     : 5px;
-				cursor      : pointer;
 				font-size   : 10px;
-				i{
+				cursor      : pointer;
+				.animate(background-color);
+				i {
+					height       : 1.2em;
 					margin-right : 8px;
 					font-size    : 1.2em;
-					height       : 1.2em;
-					&~i{
-						margin-right: 0;
-						margin-left: 5px;
+					min-width: 25px;
+					text-align: center;
+					& ~ i {
+						margin-right : 0;
+						margin-left  : 5px;
+					}
+					/* Fonts */
+					&.font {
+						height : auto;
+						&::before {
+							font-size : 1em;
+							content   : 'ABC';
+						}
+
+						&.OpenSans {font-family : 'OpenSans';}
+						&.CodeBold {font-family : 'CodeBold';}
+						&.CodeLight {font-family : 'CodeLight';}
+						&.ScalySansRemake {font-family : 'ScalySansRemake';}
+						&.BookInsanityRemake {font-family : 'BookInsanityRemake';}
+						&.MrEavesRemake {font-family : 'MrEavesRemake';}
+						&.SolberaImitationRemake {font-family : 'SolberaImitationRemake';}
+						&.ScalySansSmallCapsRemake {font-family : 'ScalySansSmallCapsRemake';}
+						&.WalterTurncoat {font-family : 'WalterTurncoat';}
+						&.Lato {font-family : 'Lato';}
+						&.Courier {font-family : 'Courier';}
+						&.NodestoCapsCondensed {font-family : 'NodestoCapsCondensed';}
+						&.Overpass {font-family : 'Overpass';}
+						&.Davek {font-family : 'Davek';}
+						&.Iokharic {font-family : 'Iokharic';}
+						&.Rellanic {font-family : 'Rellanic';}
+						&.TimesNewRoman {font-family : 'Times New Roman';}
 					}
 				}
-				.name {
-					margin-right  : auto;
-				}
+				.name { margin-right : auto; }
 				.beta {
-					color         : white;
-					padding       : 4px 6px;
-					line-height   : 1em;
-					margin-left   : 5px;
 					align-self    : center;
+					padding       : 4px 6px;
+					margin-left   : 5px;
+					font-family   : monospace;
+					line-height   : 1em;
+					color         : white;
 					background    : grey;
 					border-radius : 12px;
-					font-family   : monospace;
 				}
-				&:hover{
-					background-color : #999;
-					&>.dropdown{
+				&:hover {
+					background-color : #999999;
+					& > .dropdown {
 						visibility : visible;
 						&.side {
-							left: 100%;
-							top: 0%;
-							margin-left:0;
-							box-shadow: -1px 1px 2px 0px #999;
+							top         : 0%;
+							left        : 100%;
+							margin-left : 0;
+							box-shadow  : -1px 1px 2px 0px #999999;
 						}
 					}
 				}
 			}
 		}
 	}
-}
+}

client/homebrew/homebrew.jsx

@@ -10,7 +10,6 @@ const UserPage = require('./pages/userPage/userPage.jsx');
 const SharePage = require('./pages/sharePage/sharePage.jsx');
 const NewPage = require('./pages/newPage/newPage.jsx');
 const ErrorPage = require('./pages/errorPage/errorPage.jsx');
-const PrintPage = require('./pages/printPage/printPage.jsx');
 const AccountPage = require('./pages/accountPage/accountPage.jsx');
 
 const WithRoute = (props)=>{
@@ -72,15 +71,13 @@ const Homebrew = createClass({
 						<Route path='/new/:id' element={<WithRoute el={NewPage} brew={this.props.brew} />} />
 						<Route path='/new' element={<WithRoute el={NewPage}/>} />
 						<Route path='/user/:username' element={<WithRoute el={UserPage} brews={this.props.brews} />} />
-						<Route path='/print/:id' element={<WithRoute el={PrintPage} brew={this.props.brew} />} />
-						<Route path='/print' element={<WithRoute el={PrintPage} />} />
 						<Route path='/changelog' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
 						<Route path='/faq' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
-						<Route path='/account' element={<WithRoute el={AccountPage} brew={this.props.brew} uiItems={this.props.brew.uiItems} />} />
+						<Route path='/account' element={<WithRoute el={AccountPage} brew={this.props.brew} accountDetails={this.props.brew.accountDetails} />} />
 						<Route path='/legacy' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
 						<Route path='/error' element={<WithRoute el={ErrorPage} brew={this.props.brew} />} />
-					  	<Route path='/' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
-					  	<Route path='/*' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
+						<Route path='/' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
+						<Route path='/*' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
 					</Routes>
 				</div>
 			</Router>
@@ -88,15 +85,4 @@ const Homebrew = createClass({
 	}
 });
 
-module.exports = Homebrew;
-
-//TODO: Nicer Error page instead of just "cant get that"
-// 	'/share/:id' : (args)=>{
-// 		if(!this.props.brew.shareId){
-// 			return <ErrorPage errorId={args.id}/>;
-// 		}
-//
-// 		return <SharePage
-// 			id={args.id}
-// 			brew={this.props.brew} />;
-// 	},
+module.exports = Homebrew;

client/homebrew/homebrew.less

@@ -15,6 +15,23 @@
 		}
 		&.listPage .content {
 			overflow-y : scroll;
+
+			&::-webkit-scrollbar {
+				width: 20px;
+				&:horizontal{
+					height: 20px;
+					width:auto;
+				}
+				&-thumb {
+					background: linear-gradient(90deg, #d3c1af 15px, #00000000 15px);
+					&:horizontal{
+						background: linear-gradient(0deg, #d3c1af 15px, #00000000 15px);
+					}
+				}
+				&-corner {
+					visibility: hidden;
+				}
+			}
 		}
 	}
 }

client/homebrew/navbar/error-navitem.jsx

@@ -21,10 +21,11 @@ const ErrorNavItem = createClass({
 			this.props.parent.setState(state);
 		};
 
-		const error = this.props.error;
-		const response = error.response;
-		const status = response.status;
-		const message = response.body?.message;
+		const error       = this.props.error;
+		const response    = error.response;
+		const status      = response.status;
+		const HBErrorCode = response.body?.HBErrorCode;
+		const message     = response.body?.message;
 		let errMsg = '';
 		try {
 			errMsg += `${error.toString()}\n\n`;
@@ -40,7 +41,9 @@ const ErrorNavItem = createClass({
 					{message ?? 'Conflict: please refresh to get latest changes'}
 				</div>
 			</Nav.item>;
-		} else if(status === 412) {
+		}
+
+		if(status === 412) {
 			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
 				Oops!
 				<div className='errorContainer' onClick={clearError}>
@@ -49,6 +52,36 @@ const ErrorNavItem = createClass({
 			</Nav.item>;
 		}
 
+		if(HBErrorCode === '04') {
+			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+				Oops!
+				<div className='errorContainer' onClick={clearError}>
+					You are no longer signed in as an author of
+					this brew! Were you signed out from a different
+					window? Visit our log in page, then try again!
+					<br></br>
+					<a target='_blank' rel='noopener noreferrer'
+						href={`https://www.naturalcrit.com/login?redirect=${window.location.href}`}>
+						<div className='confirm'>
+							Sign In
+						</div>
+					</a>
+					<div className='deny'>
+						Not Now
+					</div>
+				</div>
+			</Nav.item>;
+		}
+
+		if(response.body?.errors?.[0].reason == 'storageQuotaExceeded') {
+			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+			Oops!
+				<div className='errorContainer' onClick={clearError}>
+				Can't save because your Google Drive seems to be full!
+				</div>
+			</Nav.item>;
+		}
+
 		if(response.req.url.match(/^\/api.*Google.*$/m)){
 			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
 				Oops!
@@ -57,6 +90,7 @@ const ErrorNavItem = createClass({
 					expired! Visit our log in page to sign out
 					and sign back in with Google,
 					then try saving again!
+					<br></br>
 					<a target='_blank' rel='noopener noreferrer'
 						href={`https://www.naturalcrit.com/login?redirect=${window.location.href}`}>
 						<div className='confirm'>

client/homebrew/navbar/help.navitem.jsx

@@ -1,6 +1,4 @@
 const React = require('react');
-const createClass = require('create-react-class');
-const _ = require('lodash');
 const dedent = require('dedent-tabs').default;
 
 const Nav = require('naturalcrit/nav/nav.jsx');

client/homebrew/navbar/metadata.navitem.jsx

@@ -1,6 +1,5 @@
 const React = require('react');
 const createClass = require('create-react-class');
-const _ = require('lodash');
 const Moment = require('moment');
 
 const Nav = require('naturalcrit/nav/nav.jsx');

client/homebrew/navbar/navbar.less

@@ -1,272 +1,351 @@
-@import "naturalcrit/styles/colors.less";
-@navbarHeight : 28px;
-@keyframes pinkColoring {
-  0%   {color : pink;}
-  50%  {color : pink;}
-  75%  {color : red;}
-  100% {color : pink;}
-}
-.homebrew nav {
-	.homebrewLogo {
-		.animate(color);
-		font-family : CodeBold;
-		font-size   : 12px;
-		color       : white;
-		div {
-			margin-top    : 2px;
-			margin-bottom : -2px;
-		}
-		&:hover {
-			color : @blue;
-		}
-	}
-	.editTitle.navItem {
-		padding : 2px 12px;
-		input {
-			font-family      : "Open Sans", sans-serif;
-			font-size        : 12px;
-			font-weight      : 800;
-			width            : 250px;
-			margin           : 0;
-			padding          : 2px;
-			text-align       : center;
-			color            : white;
-			border           : 1px solid @blue;
-			outline          : none;
-			background-color : transparent;
-		}
-		.charCount {
-			display        : inline-block;
-			margin-left    : 8px;
-			text-align     : right;
-			vertical-align : bottom;
-			color          : #666;
-			&.max {
-				color : @red;
-			}
-		}
-	}
-	.brewTitle.navItem {
-		font-size        : 12px;
-		font-weight      : 800;
-		height           : 100%;
-		text-align       : center;
-		text-transform   : initial;
-		color            : white;
-		background-color : transparent;
-		flex-grow        : 1;
-	}
-	.save-menu {
-		.dropdown {
-			z-index : 1000;
-		}
-		.navItem i.fa-power-off {
-			color : red;
-			&.active {
-				color  : rgb(0, 182, 52);
-				filter : drop-shadow(0 0 2px rgba(0, 182, 52, 0.765));
-			}
-		}
-	}
-	.patreon.navItem {
-		border-right : 1px solid #666;
-		border-left  : 1px solid #666;
-		&:hover i {
-			color : red;
-		}
-		i {
-			.animate(color);
-			animation-name     : pinkColoring;
-			animation-duration : 2s;
-			color              : pink;
-		}
-	}
-	.recent.navDropdownContainer {
-		position : relative;
-		.navDropdown .navItem {
-			overflow        : hidden auto;
-			max-height      : ~"calc(100vh - 28px)";
-			scrollbar-color : #666 #333;
-			scrollbar-width : thin;
-			
+@import 'naturalcrit/styles/colors.less';
 
-			#backgroundColorsHover;
-			.animate(background-color);
-			position         : relative;
-			display          : block;
-			overflow         : clip;
-			box-sizing       : border-box;
-			padding          : 8px 5px 13px;
-			text-decoration  : none;
-			color            : white;
-			border-top       : 1px solid #888;
-			background-color : #333;
-			.clear {
-				position         : absolute;
-				top              : 50%;
-				right            : 0;
-				display          : none;
-				width            : 20px;
-				height           : 100%;
-				transform        : translateY(-50%);
-				opacity          : 70%;
-				border-radius    : 3px;
-				background-color : #333;
-				&:hover {
-					opacity : 100%;
-				}
-				i {
-					font-size  : 10px;
-					width      : 100%;
-					height     : 100%;
-					margin     : 0;
-					text-align : center;
-				}
-			}
-			&:hover {
-				background-color : @blue;
-				.clear {
-					display       : grid;
-					place-content : center;
-				}
-			}
-			.title {
-				display       : inline-block;
-				overflow      : hidden;
-				width         : 100%;
-				white-space   : nowrap;
-				text-overflow : ellipsis;
-			}
-			.time {
-				font-size : 0.7em;
-				position  : absolute;
-				right     : 2px;
-				bottom    : 2px;
-				color     : #888;
-			}
-			&.header {
-				display          : block;
-				box-sizing       : border-box;
-				padding          : 5px 0;
-				text-align       : center;
-				color            : #BBB;
-				border-top       : 1px solid #888;
-				background-color : #333;
-				&:nth-of-type(1) {
-					background-color : darken(@teal, 20%);
-				}
-				&:nth-of-type(2) {
-					background-color : darken(@purple, 30%);
-				}
-			}
-		}
+@navbarHeight : 28px;
+
+@keyframes pinkColoring {
+	0% { color : pink; }
+	50% { color : pink; }
+	75% { color : red; }
+	100% { color : pink; }
+}
+
+@keyframes glideDropDown {
+	0% {
+		background-color : #333333;
+		opacity          : 0;
+		transform        : translate(0px, -100%);
 	}
-	.metadata.navItem {
-		position    : relative;
+	100% {
+		background-color : #333333;
+		opacity          : 1;
+		transform        : translate(0px, 0px);
+	}
+}
+
+.homebrew nav {
+	background-color : #333333;
+	.navContent {
+		position        : relative;
+		z-index         : 2;
+		display         : flex;
+		justify-content : space-between;
+	}
+	.navSection {
 		display     : flex;
 		align-items : center;
-		height      : 100%;
-		padding     : 0;
-		flex-grow   : 1;
-		i {
-			margin-right : 10px;
+		&:last-child .navItem { border-left : 1px solid #666666; }
+	}
+	// "NaturalCrit" logo
+	.navLogo {
+		display         : block;
+		margin-top      : 0px;
+		margin-right    : 8px;
+		margin-left     : 8px;
+		color           : white;
+		text-decoration : none;
+		&:hover {
+			.name { color : @orange; }
+			svg { fill : @orange; }
 		}
-		.window {
-			position         : absolute;
-			z-index          : -1;
-			bottom           : 0;
-			left             : 50%;
-			display          : flex;
-			justify-content  : flex-start;
-			width            : 440px;
-			max-height       : ~"calc(100vh - 28px)";
-			margin           : 0 auto;
-			padding          : 0 10px 5px;
-			transition       : transform 0.4s, opacity 0.4s;
-			border           : 3px solid #444;
-			border-top       : unset;
-			border-radius    : 0 0 5px 5px;
-			background-color : #333;
-			box-shadow       : inset 0 7px 9px -7px #111;
-			flex-flow        : row wrap;
-			align-content    : baseline;
-			&.active {
-				transform : translateX(-50%) translateY(100%);
-				opacity   : 1;
+		svg {
+			height       : 13px;
+			margin-right : 0.2em;
+			cursor       : pointer;
+			fill         : white;
+		}
+		span.name {
+			font-family : 'CodeLight';
+			font-size   : 15px;
+			span.crit { font-family : 'CodeBold'; }
+			small {
+				font-family    : 'Open Sans';
+				font-size      : 0.3em;
+				font-weight    : 800;
+				text-transform : uppercase;
 			}
-			&.inactive {
-				transform : translateX(-50%) translateY(0%);
-				opacity   : 0;
+		}
+	}
+	.navItem {
+		#backgroundColorsHover;
+		.animate(background-color);
+		padding          : 8px 12px;
+		font-size        : 10px;
+		font-weight      : 800;
+		line-height      : 13px;
+		color            : white;
+		text-decoration  : none;
+		text-transform   : uppercase;
+		cursor           : pointer;
+		background-color : #333333;
+		i {
+			float       : right;
+			margin-left : 5px;
+			font-size   : 13px;
+		}
+		&.patreon {
+			border-right : 1px solid #666666;
+			border-left  : 1px solid #666666;
+			&:hover i { color : red; }
+			i {
+				color              : pink;
+				.animate(color);
+				animation-name     : pinkColoring;
+				animation-duration : 2s;
 			}
-			.row {
-				display   : flex;
-				width     : 100%;
-				flex-flow : row wrap;
-				h4 {
-					display    : block;
-					box-sizing : border-box;
-					min-width  : 76px;
-					padding    : 5px 0;
-					text-align : center;
-					color      : #BBB;
-					flex-basis : 20%;
-					flex-grow  : 1;
+		}
+		&.editTitle {  // this is not needed at all currently - you used to be able to edit the title via the navbar.
+			padding : 2px 12px;
+			input {
+				width            : 250px;
+				padding          : 2px;
+				margin           : 0;
+				font-family      : 'Open Sans', sans-serif;
+				font-size        : 12px;
+				font-weight      : 800;
+				color            : white;
+				text-align       : center;
+				background-color : transparent;
+				border           : 1px solid @blue;
+				outline          : none;
+			}
+			.charCount {
+				display        : inline-block;
+				margin-left    : 8px;
+				color          : #666666;
+				text-align     : right;
+				vertical-align : bottom;
+				&.max { color : @red; }
+			}
+		}
+		&.brewTitle {
+			flex-grow        : 1;
+			font-size        : 12px;
+			font-weight      : 800;
+			color            : white;
+			text-align       : center;
+			text-transform   : initial;
+			background-color : transparent;
+		}
+		// "The Homebrewery" logo
+		&.homebrewLogo {
+			.animate(color);
+			font-family : 'CodeBold';
+			font-size   : 12px;
+			color       : white;
+			div {
+				margin-top    : 2px;
+				margin-bottom : -2px;
+			}
+			&:hover { color : @blue; }
+		}
+		&.metadata {
+			position    : relative;
+			display     : flex;
+			flex-grow   : 1;
+			align-items : center;
+			height      : 100%;
+			padding     : 0;
+			i { margin-right : 10px;}
+			.window {
+				position         : absolute;
+				bottom           : 0;
+				left             : 50%;
+				z-index          : -1;
+				display          : flex;
+				flex-flow        : row wrap;
+				align-content    : baseline;
+				justify-content  : flex-start;
+				width            : 440px;
+				max-height       : ~'calc(100vh - 28px)';
+				padding          : 0 10px 5px;
+				margin           : 0 auto;
+				background-color : #333333;
+				border           : 3px solid #444444;
+				border-top       : unset;
+				border-radius    : 0 0 5px 5px;
+				box-shadow       : inset 0 7px 9px -7px #111111;
+				transition       : transform 0.4s, opacity 0.4s;
+				&.active {
+					opacity   : 1;
+					transform : translateX(-50%) translateY(100%);
 				}
-				p {
-					font-family    : "Open Sans", sans-serif;
-					font-size      : 10px;
-					font-weight    : normal;
-					padding        : 5px 0;
-					text-transform : initial;
-					flex-basis     : 80%;
-					flex-grow      : 1;
-					.tag {
-						display          : inline-block;
-						margin           : 2px 2px;
-						padding          : 2px;
-						border           : 2px solid grey;
-						border-radius    : 5px;
-						background-color : #444;
+				&.inactive {
+					opacity   : 0;
+					transform : translateX(-50%) translateY(0%);
+				}
+				.row {
+					display   : flex;
+					flex-flow : row wrap;
+					width     : 100%;
+					h4 {
+						box-sizing : border-box;
+						display    : block;
+						flex-basis : 20%;
+						flex-grow  : 1;
+						min-width  : 76px;
+						padding    : 5px 0;
+						color      : #BBBBBB;
+						text-align : center;
 					}
-					a.userPageLink {
-						text-decoration : none;
-						color           : white;
-						&:hover {
-							text-decoration : underline;
+					p {
+						flex-basis     : 80%;
+						flex-grow      : 1;
+						padding        : 5px 0;
+						font-family    : 'Open Sans', sans-serif;
+						font-size      : 10px;
+						font-weight    : normal;
+						text-transform : initial;
+						.tag {
+							display          : inline-block;
+							padding          : 2px;
+							margin           : 2px 2px;
+							background-color : #444444;
+							border           : 2px solid grey;
+							border-radius    : 5px;
+						}
+						a.userPageLink {
+							color           : white;
+							text-decoration : none;
+							&:hover { text-decoration : underline; }
 						}
 					}
+					&:nth-of-type(even) { background-color : #555555; }
 				}
-				&:nth-of-type(even) {
-					background-color : #555;
+			}
+		}
+		&.warning {
+			position         : relative;
+			color            : white;
+			background-color : @orange;
+			&:hover > .dropdown { visibility : visible; }
+			.dropdown {
+				position         : absolute;
+				top              : 28px;
+				left             : 0;
+				z-index          : 10000;
+				box-sizing       : border-box;
+				display          : block;
+				width            : 100%;
+				padding          : 13px 5px;
+				text-align       : center;
+				visibility       : hidden;
+				background-color : #333333;
+			}
+		}
+		&.account {
+			min-width : 100px;
+			&.username { text-transform : none;}
+		}
+	}
+	.navDropdownContainer {
+		position : relative;
+		.navDropdown {
+			position: absolute;
+			top: 28px;
+			right: 0px;
+			z-index: 10000;
+			width: max-content;
+			min-width:100%;
+			max-height: calc(100vh - 28px);
+			overflow: hidden auto;
+			display: flex;
+			flex-direction: column;
+			align-items: flex-end;
+			.navItem {
+				position           : relative;
+				display            : flex;
+				justify-content    : space-between;
+				align-items        : center;
+				width              : 100%;
+				border             : 1px solid #888888;
+				border-bottom      : 0;
+				animation-name     : glideDropDown;
+				animation-duration : 0.4s;
+			}
+		}
+		&.recent {
+			position : relative;
+			.navDropdown .navItem {
+				#backgroundColorsHover;
+				.animate(background-color);
+				position         : relative;
+				box-sizing       : border-box;
+				display          : block;
+				max-width        : 15em;
+				max-height       : ~'calc(100vh - 28px)';			
+				padding          : 8px 5px 13px;
+				overflow         : hidden auto;
+				color            : white;
+				text-decoration  : none;
+				background-color : #333333;
+				border-top       : 1px solid #888888;
+				scrollbar-color  : #666666 #333333;
+				scrollbar-width  : thin;
+				.clear {
+					position         : absolute;
+					top              : 50%;
+					right            : 0;
+					display          : none;
+					width            : 20px;
+					height           : 100%;
+					background-color : #333333;
+					border-radius    : 3px;
+					opacity          : 70%;
+					transform        : translateY(-50%);
+					&:hover { opacity : 100%; }
+					i {
+						width      : 100%;
+						height     : 100%;
+						margin     : 0;
+						font-size  : 10px;
+						text-align : center;
+					}
+				}
+				&:hover {
+					background-color : @blue;
+					.clear {
+						display       : grid;
+						place-content : center;
+					}
+				}
+				.title {
+					display       : inline-block;
+					width         : 100%;
+					overflow      : hidden auto;
+					text-overflow : ellipsis;
+					white-space   : nowrap;
+				}
+				.time {
+					position  : absolute;
+					right     : 2px;
+					bottom    : 2px;
+					font-size : 0.7em;
+					color     : #888888;
+				}
+				&.header {
+					box-sizing       : border-box;
+					display          : block;
+					padding          : 5px 0;
+					color            : #BBBBBB;
+					text-align       : center;
+					background-color : #333333;
+					border-top       : 1px solid #888888;
+					&:nth-of-type(1) { background-color : darken(@teal, 20%); }
+					&:nth-of-type(2) { background-color : darken(@purple, 30%); }
 				}
 			}
 		}
 	}
-	.warning.navItem {
-		position         : relative;
-		color            : white;
-		background-color : @orange;
-		&:hover > .dropdown {
-			visibility : visible;
+}
+
+// this should likely be refactored into .navDropdownContainer
+.save-menu {
+	.dropdown { z-index : 1000; }
+	.navItem i.fa-power-off {
+		color : red;
+		&.active {
+			color  : rgb(0, 182, 52);
+			filter : drop-shadow(0 0 2px rgba(0, 182, 52, 0.765));
 		}
-		.dropdown {
-			position         : absolute;
-			z-index          : 10000;
-			top              : 28px;
-			left             : 0;
-			display          : block;
-			visibility       : hidden;
-			box-sizing       : border-box;
-			width            : 100%;
-			padding          : 13px 5px;
-			text-align       : center;
-			background-color : #333;
-		}
-	}
-	.account.navItem {
-		min-width : 100px;
-	}
-	.account.username.navItem {
-		text-transform : none;
 	}
 }

client/homebrew/navbar/newbrew.navitem.jsx

@@ -1,11 +1,64 @@
 const React = require('react');
+const _ = require('lodash');
 const Nav = require('naturalcrit/nav/nav.jsx');
+const { splitTextStyleAndMetadata } = require('../../../shared/helpers.js'); // Importing the function from helpers.js
 
-module.exports = function(props){
-	return <Nav.item
-		href='/new'
-		color='purple'
-		icon='fas fa-plus-square'>
-		new
-	</Nav.item>;
+const BREWKEY  = 'homebrewery-new';
+const STYLEKEY = 'homebrewery-new-style';
+const METAKEY  = 'homebrewery-new-meta';
+
+const NewBrew = ()=>{
+	const handleFileChange = (e)=>{
+		const file = e.target.files[0];
+		if(file) {
+			const reader = new FileReader();
+			reader.onload = (e)=>{
+				const fileContent = e.target.result;
+				const newBrew = {
+					text  : fileContent,
+					style : ''
+				};
+				if(fileContent.startsWith('```metadata')) {
+					splitTextStyleAndMetadata(newBrew); // Modify newBrew directly
+					localStorage.setItem(BREWKEY, newBrew.text);
+					localStorage.setItem(STYLEKEY, newBrew.style);
+					localStorage.setItem(METAKEY, JSON.stringify(_.pick(newBrew, ['title', 'description', 'tags', 'systems', 'renderer', 'theme', 'lang'])));
+					window.location.href = '/new';
+				} else {
+					alert('This file is invalid, please, enter a valid file');
+				}
+			};
+			reader.readAsText(file);
+		}
+	};
+
+	return (
+		<Nav.dropdown>
+			<Nav.item
+				className='new'
+				color='purple'
+				icon='fa-solid fa-plus-square'>
+                new
+			</Nav.item>
+			<Nav.item
+				className='fromBlank'
+				href='/new'
+				newTab={true}
+				color='purple'
+				icon='fa-solid fa-file'>
+                from blank
+			</Nav.item>
+
+			<Nav.item
+				className='fromFile'
+				color='purple'
+				icon='fa-solid fa-upload'
+				onClick={()=>{ document.getElementById('uploadTxt').click(); }}>
+				<input id='uploadTxt' className='newFromLocal' type='file' onChange={handleFileChange} style={{ display: 'none' }} />
+                from file
+			</Nav.item>
+		</Nav.dropdown>
+	);
 };
+
+module.exports = NewBrew;

client/homebrew/navbar/print.navitem.jsx

@@ -1,9 +1,9 @@
 const React = require('react');
-const createClass = require('create-react-class');
 const Nav = require('naturalcrit/nav/nav.jsx');
+const { printCurrentBrew } = require('../../../shared/helpers.js');
 
-module.exports = function(props){
-	return <Nav.item newTab={true} href={`/print/${props.shareId}?dialog=true`} color='purple' icon='far fa-file-pdf'>
+module.exports = function(){
+	return <Nav.item onClick={printCurrentBrew} color='purple' icon='far fa-file-pdf'>
 		get PDF
 	</Nav.item>;
 };

client/homebrew/navbar/reddit.navitem.jsx

@@ -1,9 +1,7 @@
 const React = require('react');
 const createClass = require('create-react-class');
-const cx = require('classnames');
 const Nav = require('naturalcrit/nav/nav.jsx');
 
-const MAX_URL_SIZE = 2083;
 const MAIN_URL = 'https://www.reddit.com/r/UnearthedArcana/submit?selftext=true';
 
 

client/homebrew/pages/accountPage/accountPage.jsx

@@ -1,102 +1,82 @@
-const React = require('react');
-const createClass = require('create-react-class');
-const _     = require('lodash');
-const cx    = require('classnames');
+const React  = require('react');
 const moment = require('moment');
-
 const UIPage = require('../basePages/uiPage/uiPage.jsx');
-
-const Nav = require('naturalcrit/nav/nav.jsx');
-const Navbar = require('../../navbar/navbar.jsx');
-
-const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
-const Account = require('../../navbar/account.navitem.jsx');
-const NewBrew = require('../../navbar/newbrew.navitem.jsx');
-const HelpNavItem = require('../../navbar/help.navitem.jsx');
-
 const NaturalCritIcon = require('naturalcrit/svg/naturalcrit.svg.jsx');
 
 let SAVEKEY = '';
 
-const AccountPage = createClass({
-	displayName     : 'AccountPage',
-	getDefaultProps : function() {
-		return {
-			brew    : {},
-			uiItems : {}
-		};
-	},
-	getInitialState : function() {
-		return {
-			uiItems : this.props.uiItems
-		};
-	},
-	componentDidMount : function(){
-		if(!this.state.saveLocation && this.props.uiItems.username) {
-			SAVEKEY = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${this.props.uiItems.username}`;
-			let saveLocation =  window.localStorage.getItem(SAVEKEY);
-			saveLocation = saveLocation ?? (this.state.uiItems.googleId ? 'GOOGLE-DRIVE' : 'HOMEBREWERY');
-			this.makeActive(saveLocation);
+const AccountPage = (props)=>{
+	// destructure props and set state for save location
+	const { accountDetails, brew } = props;
+	const [saveLocation, setSaveLocation] = React.useState('');
+
+	// initialize save location from local storage based on user id
+	React.useEffect(()=>{
+		if(!saveLocation && accountDetails.username) {
+			SAVEKEY = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${accountDetails.username}`;
+			// if no SAVEKEY in local storage, default save location to Google Drive if user has Google account.
+			let saveLocation = window.localStorage.getItem(SAVEKEY);
+			saveLocation = saveLocation ?? (accountDetails.googleId ? 'GOOGLE-DRIVE' : 'HOMEBREWERY');
+			setActiveSaveLocation(saveLocation);
 		}
-	},
+	}, []);
 
-	makeActive : function(newSelection){
-		if(this.state.saveLocation == newSelection) return;
+	const setActiveSaveLocation = (newSelection)=>{
+		if(saveLocation === newSelection) return;
 		window.localStorage.setItem(SAVEKEY, newSelection);
-		this.setState({
-			saveLocation : newSelection
-		});
-	},
+		setSaveLocation(newSelection);
+	};
 
-	renderButton : function(name, key, shouldRender=true){
-		if(!shouldRender) return;
-		return <button className={this.state.saveLocation==key ? 'active' :	''}	onClick={()=>{this.makeActive(key);}}>{name}</button>;
-	},
+	// todo: should this be a set of radio buttons (well styled) since it's either/or choice?
+	const renderSaveLocationButton = (name, key, shouldRender = true)=>{
+		if(!shouldRender) return null;
+		return (
+			<button className={saveLocation === key ? 'active' : ''} onClick={()=>{setActiveSaveLocation(key);}}>
+				{name}
+			</button>
+		);
+	};
 
-	renderNavItems : function() {
-		return <Navbar>
-			<Nav.section>
-				<NewBrew />
-				<HelpNavItem />
-				<RecentNavItem />
-				<Account />
-			</Nav.section>
-		</Navbar>;
-	},
+	// render the entirety of the account page content
+	const renderAccountPage = ()=>{
+		return (
+			<>
+				<div className='dataGroup'>
+					<h1>Account Information <i className='fas fa-user'></i></h1>
+					<p><strong>Username: </strong>{accountDetails.username || 'No user currently logged in'}</p>
+					<p><strong>Last Login: </strong>{moment(accountDetails.issued).format('dddd, MMMM Do YYYY, h:mm:ss a ZZ') || '-'}</p>
+				</div>
+				<div className='dataGroup'>
+					<h3>Homebrewery Information <NaturalCritIcon /></h3>
+					<p><strong>Brews on Homebrewery: </strong>{accountDetails.mongoCount}</p>
+				</div>
+				<div className='dataGroup'>
+					<h3>Google Information <i className='fab fa-google-drive'></i></h3>
+					<p><strong>Linked to Google: </strong>{accountDetails.googleId ? 'YES' : 'NO'}</p>
+					{accountDetails.googleId && (
+						<p>
+							<strong>Brews on Google Drive: </strong>{accountDetails.googleCount ?? (
+								<>
+									Unable to retrieve files - <a href='https://github.com/naturalcrit/homebrewery/discussions/1580'>follow these steps to renew your Google credentials.</a>
+								</>
+							)}
+						</p>
+					)}
+				</div>
+				<div className='dataGroup'>
+					<h4>Default Save Location</h4>
+					{renderSaveLocationButton('Homebrewery', 'HOMEBREWERY')}
+					{renderSaveLocationButton('Google Drive', 'GOOGLE-DRIVE', accountDetails.googleId)}
+				</div>
+			</>
+		);
+	};
 
-	renderUiItems : function() {
-		return 	<>
-			<div className='dataGroup'>
-				<h1>Account Information  <i className='fas fa-user'></i></h1>
-				<p><strong>Username: </strong> {this.props.uiItems.username || 'No user currently logged in'}</p>
-				<p><strong>Last Login: </strong> {moment(this.props.uiItems.issued).format('dddd, MMMM Do YYYY, h:mm:ss a ZZ') || '-'}</p>
-			</div>
-			<div className='dataGroup'>
-				<h3>Homebrewery Information <NaturalCritIcon /></h3>
-				<p><strong>Brews on Homebrewery: </strong> {this.props.uiItems.mongoCount}</p>
-			</div>
-			<div className='dataGroup'>
-				<h3>Google Information <i className='fab fa-google-drive'></i></h3>
-				<p><strong>Linked to Google: </strong> {this.props.uiItems.googleId ? 'YES' : 'NO'}</p>
-				{this.props.uiItems.googleId &&
-					<p>
-						<strong>Brews on Google Drive: </strong> {this.props.uiItems.googleCount ?? <>Unable to retrieve files - <a href='https://github.com/naturalcrit/homebrewery/discussions/1580'>follow these steps to renew your Google credentials.</a></>}
-					</p>
-				}
-			</div>
-			<div className='dataGroup'>
-				<h4>Default Save Location</h4>
-				{this.renderButton('Homebrewery', 'HOMEBREWERY')}
-				{this.renderButton('Google Drive', 'GOOGLE-DRIVE', this.state.uiItems.googleId)}
-			</div>
-		</>;
-	},
-
-	render : function(){
-		return <UIPage brew={this.props.brew}>
-			{this.renderUiItems()}
-		</UIPage>;
-	}
-});
+	// return the account page inside the base layout wrapper (with navbar etc).
+	return (
+		<UIPage brew={brew}>
+			{renderAccountPage()}
+		</UIPage>);
+};
 
 module.exports = AccountPage;

client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx

@@ -1,8 +1,6 @@
 require('./brewItem.less');
 const React = require('react');
 const createClass = require('create-react-class');
-const _     = require('lodash');
-const cx    = require('classnames');
 const moment = require('moment');
 const request = require('../../../../utils/request-middleware.js');
 
@@ -20,7 +18,8 @@ const BrewItem = createClass({
 				authors     : [],
 				stubbed     : true
 			},
-			reportError : ()=>{}
+			updateListFilter : ()=>{},
+			reportError      : ()=>{}
 		};
 	},
 
@@ -44,6 +43,10 @@ const BrewItem = createClass({
 			});
 	},
 
+	updateFilter : function(type, term){
+		this.props.updateListFilter(type, term);
+	},
+
 	renderDeleteBrewLink : function(){
 		if(!this.props.brew.editId) return;
 
@@ -109,6 +112,9 @@ const BrewItem = createClass({
 		const brew = this.props.brew;
 		if(Array.isArray(brew.tags)) {               // temporary fix until dud tags are cleaned
 			brew.tags = brew.tags?.filter((tag)=>tag); //remove tags that are empty strings
+			brew.tags.sort((a, b)=>{
+				return a.indexOf(':') - b.indexOf(':') != 0 ? a.indexOf(':') - b.indexOf(':') : a.toLowerCase().localeCompare(b.toLowerCase());
+			});
 		}
 		const dateFormatString = 'YYYY-MM-DD HH:mm:ss';
 
@@ -125,17 +131,21 @@ const BrewItem = createClass({
 			<div className='info'>
 
 				{brew.tags?.length ? <>
-					<div className='brewTags' title={`Tags:\n${brew.tags.join('\n')}`}>
+					<div className='brewTags' title={`${brew.tags.length} tags:\n${brew.tags.join('\n')}`}>
 						<i className='fas fa-tags'/>
 						{brew.tags.map((tag, idx)=>{
 							const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
-							return <span key={idx} className={matches[1]}>{matches[2]}</span>;
+							return <span key={idx} className={matches[1]} onClick={()=>{this.updateFilter(tag);}}>{matches[2]}</span>;
 						})}
 					</div>
 				</> : <></>
 				}
 				<span title={`Authors:\n${brew.authors?.join('\n')}`}>
-					<i className='fas fa-user'/> {brew.authors?.join(', ')}
+					<i className='fas fa-user'/> {brew.authors?.map((author, index)=>(
+  					<>
+    					<a key={index} href={`/user/${author}`}>{author}</a>
+    					{index < brew.authors.length - 1 && ', '}
+  					</>))}
 				</span>
 				<br />
 				<span title={`Last viewed: ${moment(brew.lastViewed).local().format(dateFormatString)}`}>

client/homebrew/pages/basePages/listPage/brewItem/brewItem.less

@@ -48,6 +48,10 @@
 		&>span{
 			margin-right : 12px;
 			line-height  : 1.5em;
+
+			a {
+				color:inherit;
+			}
 		}
 	}
 	.brewTags span {
@@ -59,6 +63,41 @@
 		white-space: nowrap;
 		display: inline-block;
 		font-weight: bold;
+		border-color: currentColor;
+		cursor : pointer;
+		&:before {
+			font-family: 'Font Awesome 5 Free';
+			font-size: 12px;
+			margin-right: 3px;
+		}
+		&.type {
+			background-color: #0080003b;
+			color: #008000;
+			&:before{
+				content: '\f0ad';
+			}
+		}
+		&.group {
+			background-color: #5050503b;
+			color: #000000;
+			&:before{
+				content: '\f500';
+			}
+		}
+		&.meta {
+			background-color: #0000803b;
+			color: #000080;
+			&:before{
+				content: '\f05a';
+			}
+		}
+		&.system {
+			background-color: #8000003b;
+			color: #800000;
+			&:before{
+				content: '\f518';
+			}
+		}
 	}
 	&:hover{
 		.links{

client/homebrew/pages/basePages/listPage/listPage.jsx

@@ -36,6 +36,7 @@ const ListPage = createClass({
 
 		return {
 			filterString   : this.props.query?.filter || '',
+			filterTags     : [],
 			sortType       : this.props.query?.sort || null,
 			sortDir        : this.props.query?.dir || null,
 			query          : this.props.query,
@@ -82,7 +83,7 @@ const ListPage = createClass({
 		if(!brews || !brews.length) return <div className='noBrews'>No Brews.</div>;
 
 		return _.map(brews, (brew, idx)=>{
-			return <BrewItem brew={brew} key={idx} reportError={this.props.reportError}/>;
+			return <BrewItem brew={brew} key={idx} reportError={this.props.reportError} updateListFilter={ (tag)=>{ this.updateUrl(this.state.filterString, this.state.sortType, this.state.sortDir, tag); }}/>;
 		});
 	},
 
@@ -136,13 +137,33 @@ const ListPage = createClass({
 		return;
 	},
 
-	updateUrl : function(filterTerm, sortType, sortDir){
+	updateUrl : function(filterTerm, sortType, sortDir, filterTag=''){
 		const url = new URL(window.location.href);
 		const urlParams = new URLSearchParams(url.search);
 
 		urlParams.set('sort', sortType);
 		urlParams.set('dir', sortDir);
 
+		let filterTags = urlParams.getAll('tag');
+		if(filterTag != '') {
+			if(filterTags.findIndex((tag)=>{return tag.toLowerCase()==filterTag.toLowerCase();}) == -1){
+				filterTags.push(filterTag);
+			} else {
+				filterTags = filterTags.filter((tag)=>{ return tag.toLowerCase() != filterTag.toLowerCase(); });
+			}
+		}
+		urlParams.delete('tag');
+		// Add tags to URL in the order they were clicked
+		filterTags.forEach((tag)=>{ urlParams.append('tag', tag); });
+		// Sort tags before updating state
+		filterTags.sort((a, b)=>{
+			return a.indexOf(':') - b.indexOf(':') != 0 ? a.indexOf(':') - b.indexOf(':') : a.toLowerCase().localeCompare(b.toLowerCase());
+		});
+
+		this.setState({
+			filterTags
+		});
+
 		if(!filterTerm)
 			urlParams.delete('filter');
 		else
@@ -166,6 +187,16 @@ const ListPage = createClass({
 		</div>;
 	},
 
+	renderTagsOptions : function(){
+		if(this.state.filterTags?.length == 0) return;
+		return <div className='tags-container'>
+			{_.map(this.state.filterTags, (tag, idx)=>{
+				const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
+				return <span key={idx} className={matches[1]} onClick={()=>{ this.updateUrl(this.state.filterString, this.state.sortType, this.state.sortDir, tag); }}>{matches[2]}</span>;
+			})}
+		</div>;
+	},
+
 	renderSortOptions : function(){
 		return <div className='sort-container'>
 			<h6>Sort by :</h6>
@@ -176,9 +207,6 @@ const ListPage = createClass({
 			{/* {this.renderSortOption('Latest', 'latest')} */}
 
 			{this.renderFilterOption()}
-
-
-
 		</div>;
 	},
 
@@ -186,14 +214,28 @@ const ListPage = createClass({
 		const testString = _.deburr(this.state.filterString).toLowerCase();
 
 		brews = _.filter(brews, (brew)=>{
+			// Filter by user entered text
 			const brewStrings = _.deburr([
 				brew.title,
 				brew.description,
 				brew.tags].join('\n')
 				.toLowerCase());
 
-			return brewStrings.includes(testString);
+			const filterTextTest = brewStrings.includes(testString);
+
+			// Filter by user selected tags
+			let filterTagTest = true;
+			if(this.state.filterTags.length > 0){
+				filterTagTest = Array.isArray(brew.tags) && this.state.filterTags?.every((tag)=>{
+					return brew.tags.findIndex((brewTag)=>{
+						return brewTag.toLowerCase() == tag.toLowerCase();
+					}) >= 0;
+				});
+			}
+
+			return filterTextTest && filterTagTest;
 		});
+
 		return _.orderBy(brews, (brew)=>{ return this.sortBrewOrder(brew); }, this.state.sortDir);
 	},
 
@@ -220,9 +262,11 @@ const ListPage = createClass({
 	render : function(){
 		return <div className='listPage sitePage'>
 			{/*<style>@layer V3_5ePHB, bundle;</style>*/}
-			<link href='/themes/V3/5ePHB/style.css' rel='stylesheet'/>
+			<link href='/themes/V3/Blank/style.css' type='text/css' rel='stylesheet'/>
+			<link href='/themes/V3/5ePHB/style.css' type='text/css' rel='stylesheet'/>
 			{this.props.navItems}
 			{this.renderSortOptions()}
+			{this.renderTagsOptions()}
 
 			<div className='content V3'>
 				<div className='page'>

client/homebrew/pages/basePages/listPage/listPage.less

@@ -2,17 +2,18 @@
 .noColumns(){
 	column-count         : auto;
 	column-fill          : auto;
-	column-gap           : auto;
+	column-gap           : normal;
 	column-width         : auto;
 	-webkit-column-count : auto;
 	-moz-column-count    : auto;
 	-webkit-column-width : auto;
 	-moz-column-width    : auto;
-	-webkit-column-gap   : auto;
-	-moz-column-gap      : auto;
+	-webkit-column-gap   : normal;
+	-moz-column-gap      : normal;
 	height               : auto;
 	min-height           : 279.4mm;
 	margin               : 20px auto;
+	contain				 : unset;
 }
 .listPage{
 	.content{
@@ -52,7 +53,7 @@
 			}
 		}
 	}
-	.sort-container{
+	.sort-container {
 		font-family        : 'Open Sans', sans-serif;
 		position           : sticky;
 		top                : 0;
@@ -124,4 +125,66 @@
 
 
 	}
+	.tags-container {
+		height             : 30px;
+		background-color   : #555;
+		border-top         : 1px solid #666;
+		border-bottom      : 1px solid #666;
+		color              : white;
+		display            : flex;
+		justify-content    : center;
+		align-items        : center;
+		column-gap         : 15px;
+		row-gap            : 5px;
+		flex-wrap          : wrap;
+		span {
+			font-family    : 'Open Sans', sans-serif;
+			font-size      : 11px;
+			font-weight    : bold;
+			border         : 1px solid;
+			border-radius  : 3px;
+			padding        : 3px;
+			cursor         : pointer;
+			color: #dfdfdf;
+			&:before {
+				font-family: 'Font Awesome 5 Free';
+				font-size: 12px;
+				margin-right: 3px;
+			}
+			&:after {
+				content: '\f00d';
+				font-family: 'Font Awesome 5 Free';
+				font-size: 12px;
+				margin-left: 3px;
+			}
+			&.type {
+				background-color: #008000;
+				border-color: #00a000;
+				&:before{
+					content: '\f0ad';
+				}
+			}
+			&.group {
+				background-color: #505050;
+				border-color: #000000;
+				&:before{
+					content: '\f500';
+				}
+			}
+			&.meta {
+				background-color: #000080;
+				border-color: #0000a0;
+				&:before{
+					content: '\f05a';
+				}
+			}
+			&.system {
+				background-color: #800000;
+				border-color: #a00000;
+				&:before{
+					content: '\f518';
+				}
+			}
+		}
+	}
 }

client/homebrew/pages/editPage/editPage.jsx

@@ -11,7 +11,7 @@ const Navbar = require('../../navbar/navbar.jsx');
 
 const NewBrew = require('../../navbar/newbrew.navitem.jsx');
 const HelpNavItem = require('../../navbar/help.navitem.jsx');
-const PrintLink = require('../../navbar/print.navitem.jsx');
+const PrintNavItem = require('../../navbar/print.navitem.jsx');
 const ErrorNavItem = require('../../navbar/error-navitem.jsx');
 const Account = require('../../navbar/account.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
@@ -20,9 +20,12 @@ const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
 const Editor = require('../../editor/editor.jsx');
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
+const LockNotification = require('./lockNotification/lockNotification.jsx');
+
 const Markdown = require('naturalcrit/markdown.js');
 
 const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
+const { printCurrentBrew } = require('../../../../shared/helpers.js');
 
 const googleDriveIcon = require('../../googleDrive.svg');
 
@@ -50,9 +53,13 @@ const EditPage = createClass({
 			url                    : '',
 			autoSave               : true,
 			autoSaveWarning        : false,
-			unsavedTime            : new Date()
+			unsavedTime            : new Date(),
+			currentEditorPage      : 0,
+			displayLockMessage     : this.props.brew.lock || false
 		};
 	},
+
+	editor    : React.createRef(null),
 	savedBrew : null,
 
 	componentDidMount : function(){
@@ -92,7 +99,7 @@ const EditPage = createClass({
 		const S_KEY = 83;
 		const P_KEY = 80;
 		if(e.keyCode == S_KEY) this.trySave(true);
-		if(e.keyCode == P_KEY) window.open(`/print/${this.processShareId()}?dialog=true`, '_blank').focus();
+		if(e.keyCode == P_KEY) printCurrentBrew();
 		if(e.keyCode == P_KEY || e.keyCode == S_KEY){
 			e.stopPropagation();
 			e.preventDefault();
@@ -100,7 +107,7 @@ const EditPage = createClass({
 	},
 
 	handleSplitMove : function(){
-		this.refs.editor.update();
+		this.editor.current.update();
 	},
 
 	handleTextChange : function(text){
@@ -109,9 +116,10 @@ const EditPage = createClass({
 		if(htmlErrors.length) htmlErrors = Markdown.validate(text);
 
 		this.setState((prevState)=>({
-			brew       : { ...prevState.brew, text: text },
-			isPending  : true,
-			htmlErrors : htmlErrors
+			brew              : { ...prevState.brew, text: text },
+			isPending         : true,
+			htmlErrors        : htmlErrors,
+			currentEditorPage : this.editor.current.getCurrentPage() - 1 //Offset index since Marked starts pages at 0
 		}), ()=>{if(this.state.autoSave) this.trySave();});
 	},
 
@@ -374,7 +382,7 @@ const EditPage = createClass({
 						post to reddit
 					</Nav.item>
 				</Nav.dropdown>
-				<PrintLink shareId={this.processShareId()} />
+				<PrintNavItem />
 				<RecentNavItem brew={this.state.brew} storageKey='edit' />
 				<Account />
 			</Nav.section>
@@ -388,9 +396,10 @@ const EditPage = createClass({
 			{this.renderNavbar()}
 
 			<div className='content'>
-				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
+				{this.props.brew.lock && <LockNotification shareId={this.props.brew.shareId} message={this.props.brew.lock.editMessage} />}
+				<SplitPane onDragFinish={this.handleSplitMove}>
 					<Editor
-						ref='editor'
+						ref={this.editor}
 						brew={this.state.brew}
 						onTextChange={this.handleTextChange}
 						onStyleChange={this.handleStyleChange}
@@ -405,6 +414,8 @@ const EditPage = createClass({
 						theme={this.state.brew.theme}
 						errors={this.state.htmlErrors}
 						lang={this.state.brew.lang}
+						currentEditorPage={this.state.currentEditorPage}
+						allowPrint={true}
 					/>
 				</SplitPane>
 			</div>

client/homebrew/pages/editPage/lockNotification/lockNotification.jsx

@@ -0,0 +1,30 @@
+require('./lockNotification.less');
+const React = require('react');
+import Dialog from '../../../../components/dialog.jsx';
+
+function LockNotification(props) {
+	props = {
+		shareId     : 0,
+		disableLock : ()=>{},
+		message     : '',
+		...props
+	};
+
+	const removeLock = ()=>{
+		alert(`Not yet implemented - ID ${props.shareId}`);
+	};
+
+	return <Dialog className='lockNotification' blocking closeText='CONTINUE TO EDITOR' >
+		<h1>BREW LOCKED</h1>
+		<p>This brew been locked by the Administrators. It will not be accessible by any method other than the Editor until the lock is removed.</p>
+		<hr />
+		<h3>LOCK REASON</h3>
+		<p>{props.message || 'Unable to retrieve Lock Message'}</p>
+		<hr />
+		<p>Once you have resolved this issue, click REQUEST LOCK REMOVAL to notify the Administrators for review.</p>
+		<p>Click CONTINUE TO EDITOR to temporarily hide this notification; it will reappear the next time the page is reloaded.</p>
+		<button onClick={removeLock}>REQUEST LOCK REMOVAL</button>
+	</Dialog>;
+};
+
+module.exports = LockNotification;

client/homebrew/pages/editPage/lockNotification/lockNotification.less

@@ -0,0 +1,27 @@
+.lockNotification {
+	z-index          : 1;
+	width            : 80%;
+	padding          : 10px;
+	margin           : 5% 10%;
+	line-height      : 1.5em;
+	color            : black;
+	text-align       : center;
+	background-color : #CCCCCC;
+
+	&::backdrop { background-color : #000000AA; }
+
+	button {
+		margin           : 10px;
+		color            : white;
+		background-color : #333333;
+
+		&:hover { background-color : #777777; }
+	}
+
+	h1, h3 {
+		font-family : 'Open Sans', sans-serif;
+		font-weight : 800;
+	}
+	h1 { font-size : 24px; }
+	h3 { font-size : 18px; }
+}

client/homebrew/pages/errorPage/errorPage.jsx

@@ -1,41 +1,25 @@
 require('./errorPage.less');
-const React = require('react');
-const createClass = require('create-react-class');
-const _ = require('lodash');
-const cx = require('classnames');
-
-const UIPage = require('../basePages/uiPage/uiPage.jsx');
-
-const Markdown = require('../../../../shared/naturalcrit/markdown.js');
-
+const React      = require('react');
+const UIPage     = require('../basePages/uiPage/uiPage.jsx');
+const Markdown   = require('../../../../shared/naturalcrit/markdown.js');
 const ErrorIndex = require('./errors/errorIndex.js');
 
-const ErrorPage = createClass({
-	displayName : 'ErrorPage',
+const ErrorPage = ({ brew })=>{
+	// Retrieving the error text based on the brew's error code from ErrorIndex
+	const errorText = ErrorIndex({ brew })[brew.HBErrorCode.toString()] || '';
 
-	getDefaultProps : function() {
-		return {
-			ver     : '0.0.0',
-			errorId : '',
-			text    : '# Oops \n We could not find a brew with that id. **Sorry!**',
-			error   : {}
-		};
-	},
-
-	render : function(){
-		const errorText = ErrorIndex(this.props)[this.props.brew.HBErrorCode.toString()] || '';
-
-		return <UIPage brew={{ title: 'Crit Fail!' }}>
+	return (
+		<UIPage brew={{ title: 'Crit Fail!' }}>
 			<div className='dataGroup'>
 				<div className='errorTitle'>
-					<h1>{`Error ${this.props.brew.status || '000'}`}</h1>
-					<h4>{this.props.brew.text || 'No error text'}</h4>
+					<h1>{`Error ${brew?.status || '000'}`}</h1>
+					<h4>{brew?.text || 'No error text'}</h4>
 				</div>
 				<hr />
 				<div dangerouslySetInnerHTML={{ __html: Markdown.render(errorText) }} />
 			</div>
-		</UIPage>;
-	}
-});
+		</UIPage>
+	);
+};
 
 module.exports = ErrorPage;

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

@@ -22,18 +22,18 @@ const errorIndex = (props)=>{
 			## We can't find this brew in Google Drive!
 			
 			This file was saved on Google Drive, but this link doesn't work anymore.
-			${ props.brew.authors?.length > 0
-				? `Note that this brew belongs to the Homebrewery account **${ props.brew.authors[0] }**,
-				${ props.brew.account
-					? `which is
+			${props.brew.authors?.length > 0
+		? `Note that this brew belongs to the Homebrewery account **${props.brew.authors[0]}**,
+				${props.brew.account
+		? `which is
 						${props.brew.authors[0] == props.brew.account
-							? `your account.`
-							: `not your account (you are currently signed in as **${props.brew.account}**).`
-						}`
-					: 'and you are not currently signed in to any account.'
-				}`
-				: ''
-			}
+		? `your account.`
+		: `not your account (you are currently signed in as **${props.brew.account}**).`
+}`
+		: 'and you are not currently signed in to any account.'
+}`
+		: ''
+}
 			The Homebrewery cannot delete files from Google Drive on its own, so there
 			are three most likely possibilities:
 			:
@@ -73,9 +73,13 @@ const errorIndex = (props)=>{
 		**Properties** tab, and adding your username to the "invited authors" list. You can
 		then try to access this document again.
 		
+		:
+
 		**Brew Title:** ${props.brew.brewTitle || 'Unable to show title'}
 
-		**Current Authors:** ${props.brew.authors?.map((author)=>{return `${author}`;}).join(', ') || 'Unable to list authors'}`,
+		**Current Authors:** ${props.brew.authors?.map((author)=>{return `[${author}](/user/${author})`;}).join(', ') || 'Unable to list authors'}
+		
+		[Click here to be redirected to the brew's share page.](/share/${props.brew.shareId})`,
 
 		// User is not signed in; must be a user on the Authors List
 		'04' : dedent`
@@ -84,9 +88,14 @@ const errorIndex = (props)=>{
 		You must be logged in to one of the accounts listed as an author of this brew.
 		User is not logged in. Please log in [here](${loginUrl}).
 		
+		:
+
 		**Brew Title:** ${props.brew.brewTitle || 'Unable to show title'}
 
-		**Current Authors:** ${props.brew.authors?.map((author)=>{return `${author}`;}).join(', ') || 'Unable to list authors'}`,
+		**Current Authors:** ${props.brew.authors?.map((author)=>{return `[${author}](/user/${author})`;}).join(', ') || 'Unable to list authors'}
+
+		[Click here to be redirected to the brew's share page.](/share/${props.brew.shareId})`,
+
 
 		// Brew load error
 		'05' : dedent`
@@ -95,6 +104,8 @@ const errorIndex = (props)=>{
 		The server could not locate the Homebrewery document. It was likely deleted by
 		its owner.
 		
+		:
+
 		**Requested access:** ${props.brew.accessType}
 
 		**Brew ID:**  ${props.brew.brewId}`,
@@ -111,6 +122,8 @@ const errorIndex = (props)=>{
 		
 		An error occurred while attempting to remove the Homebrewery document.
 		
+		:
+
 		**Brew ID:**  ${props.brew.brewId}`,
 
 		// Author delete error
@@ -119,7 +132,21 @@ const errorIndex = (props)=>{
 		
 		An error occurred while attempting to remove the user from the Homebrewery document author list!
 		
+		:
+
 		**Brew ID:**  ${props.brew.brewId}`,
+
+		// Brew locked by Administrators error
+		'100' : dedent`
+		## This brew has been locked.
+		
+		Only an author may request that this lock is removed.
+		
+		:
+
+		**Brew ID:**  ${props.brew.brewId}
+		
+		**Brew Title:** ${props.brew.brewTitle}`,
 	};
 };
 

client/homebrew/pages/hijackPrint.js

@@ -1,12 +0,0 @@
-//TODO: Depricate
-
-module.exports = function(shareId){
-	return function(event){
-		event = event || window.event;
-		if((event.ctrlKey || event.metaKey) && event.keyCode == 80){
-			const win = window.open(`/homebrew/print/${shareId}?dialog=true`, '_blank');
-			win.focus();
-			event.preventDefault();
-		}
-	};
-};

client/homebrew/pages/homePage/homePage.jsx

@@ -31,11 +31,15 @@ const HomePage = createClass({
 	},
 	getInitialState : function() {
 		return {
-			brew        : this.props.brew,
-			welcomeText : this.props.brew.text,
-			error       : undefined
+			brew              : this.props.brew,
+			welcomeText       : this.props.brew.text,
+			error             : undefined,
+			currentEditorPage : 0
 		};
 	},
+
+	editor : React.createRef(null),
+
 	handleSave : function(){
 		request.post('/api')
 			.send(this.state.brew)
@@ -49,11 +53,12 @@ const HomePage = createClass({
 			});
 	},
 	handleSplitMove : function(){
-		this.refs.editor.update();
+		this.editor.current.update();
 	},
 	handleTextChange : function(text){
 		this.setState((prevState)=>({
-			brew : { ...prevState.brew, text: text }
+			brew              : { ...prevState.brew, text: text },
+			currentEditorPage : this.editor.current.getCurrentPage() - 1 //Offset index since Marked starts pages at 0
 		}));
 	},
 	renderNavbar : function(){
@@ -77,15 +82,20 @@ const HomePage = createClass({
 			{this.renderNavbar()}
 
 			<div className='content'>
-				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
+				<SplitPane onDragFinish={this.handleSplitMove}>
 					<Editor
-						ref='editor'
+						ref={this.editor}
 						brew={this.state.brew}
 						onTextChange={this.handleTextChange}
 						renderer={this.state.brew.renderer}
 						showEditButtons={false}
 					/>
-					<BrewRenderer text={this.state.brew.text} style={this.state.brew.style} renderer={this.state.brew.renderer}/>
+					<BrewRenderer
+						text={this.state.brew.text}
+						style={this.state.brew.style}
+						renderer={this.state.brew.renderer}
+						currentEditorPage={this.state.currentEditorPage}
+					/>
 				</SplitPane>
 			</div>
 

client/homebrew/pages/homePage/welcome_msg.md

@@ -143,6 +143,7 @@ Much nicer than `<br><br><br><br><br>`
 ### Column Breaks
 Column and page breaks with `\column` and `\page`.
 
+\column
 ### Tables
 Tables now allow column & row spanning between cells. This is included in some updated snippets, but a simplified example is given below.
 

client/homebrew/pages/newPage/newPage.jsx

@@ -2,12 +2,12 @@
 require('./newPage.less');
 const React = require('react');
 const createClass = require('create-react-class');
-const _ = require('lodash');
 const request = require('../../utils/request-middleware.js');
 
 const Markdown = require('naturalcrit/markdown.js');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
+const PrintNavItem = require('../../navbar/print.navitem.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
 const AccountNavItem = require('../../navbar/account.navitem.jsx');
 const ErrorNavItem = require('../../navbar/error-navitem.jsx');
@@ -19,6 +19,7 @@ const Editor = require('../../editor/editor.jsx');
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
 const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js');
+const { printCurrentBrew } = require('../../../../shared/helpers.js');
 
 const BREWKEY  = 'homebrewery-new';
 const STYLEKEY = 'homebrewery-new-style';
@@ -38,14 +39,17 @@ const NewPage = createClass({
 		const brew = this.props.brew;
 
 		return {
-			brew       : brew,
-			isSaving   : false,
-			saveGoogle : (global.account && global.account.googleId ? true : false),
-			error      : null,
-			htmlErrors : Markdown.validate(brew.text)
+			brew              : brew,
+			isSaving          : false,
+			saveGoogle        : (global.account && global.account.googleId ? true : false),
+			error             : null,
+			htmlErrors        : Markdown.validate(brew.text),
+			currentEditorPage : 0
 		};
 	},
 
+	editor : React.createRef(null),
+
 	componentDidMount : function() {
 		document.addEventListener('keydown', this.handleControlKeys);
 
@@ -87,7 +91,7 @@ const NewPage = createClass({
 		const S_KEY = 83;
 		const P_KEY = 80;
 		if(e.keyCode == S_KEY) this.save();
-		if(e.keyCode == P_KEY) this.print();
+		if(e.keyCode == P_KEY) printCurrentBrew();
 		if(e.keyCode == P_KEY || e.keyCode == S_KEY){
 			e.stopPropagation();
 			e.preventDefault();
@@ -95,7 +99,7 @@ const NewPage = createClass({
 	},
 
 	handleSplitMove : function(){
-		this.refs.editor.update();
+		this.editor.current.update();
 	},
 
 	handleTextChange : function(text){
@@ -104,8 +108,9 @@ const NewPage = createClass({
 		if(htmlErrors.length) htmlErrors = Markdown.validate(text);
 
 		this.setState((prevState)=>({
-			brew       : { ...prevState.brew, text: text },
-			htmlErrors : htmlErrors
+			brew              : { ...prevState.brew, text: text },
+			htmlErrors        : htmlErrors,
+			currentEditorPage : this.editor.current.getCurrentPage() - 1 //Offset index since Marked starts pages at 0
 		}));
 		localStorage.setItem(BREWKEY, text);
 	},
@@ -177,16 +182,6 @@ const NewPage = createClass({
 		}
 	},
 
-	print : function(){
-		window.open('/print?dialog=true&local=print', '_blank');
-	},
-
-	renderLocalPrintButton : function(){
-		return <Nav.item color='purple' icon='far fa-file-pdf' onClick={this.print}>
-			get PDF
-		</Nav.item>;
-	},
-
 	renderNavbar : function(){
 		return <Navbar>
 
@@ -199,7 +194,7 @@ const NewPage = createClass({
 					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
 					this.renderSaveButton()
 				}
-				{this.renderLocalPrintButton()}
+				<PrintNavItem />
 				<HelpNavItem />
 				<RecentNavItem />
 				<AccountNavItem />
@@ -211,16 +206,25 @@ const NewPage = createClass({
 		return <div className='newPage sitePage'>
 			{this.renderNavbar()}
 			<div className='content'>
-				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
+				<SplitPane onDragFinish={this.handleSplitMove}>
 					<Editor
-						ref='editor'
+						ref={this.editor}
 						brew={this.state.brew}
 						onTextChange={this.handleTextChange}
 						onStyleChange={this.handleStyleChange}
 						onMetaChange={this.handleMetaChange}
 						renderer={this.state.brew.renderer}
 					/>
-					<BrewRenderer text={this.state.brew.text} style={this.state.brew.style} renderer={this.state.brew.renderer} theme={this.state.brew.theme} lang={this.state.brew.lang} errors={this.state.htmlErrors}/>
+					<BrewRenderer
+						text={this.state.brew.text}
+						style={this.state.brew.style}
+						renderer={this.state.brew.renderer}
+						theme={this.state.brew.theme}
+						errors={this.state.htmlErrors}
+						lang={this.state.brew.lang}
+						currentEditorPage={this.state.currentEditorPage}
+						allowPrint={true}
+					/>
 				</SplitPane>
 			</div>
 		</div>;

client/homebrew/pages/printPage/printPage.jsx

@@ -1,110 +0,0 @@
-require('./printPage.less');
-const React = require('react');
-const createClass = require('create-react-class');
-const _     = require('lodash');
-const cx    = require('classnames');
-const { Meta } = require('vitreum/headtags');
-const MarkdownLegacy = require('naturalcrit/markdownLegacy.js');
-const Markdown = require('naturalcrit/markdown.js');
-
-const Themes = require('themes/themes.json');
-
-const BREWKEY = 'homebrewery-new';
-const STYLEKEY = 'homebrewery-new-style';
-const METAKEY = 'homebrewery-new-meta';
-
-const PrintPage = createClass({
-	displayName     : 'PrintPage',
-	getDefaultProps : function() {
-		return {
-			query : {},
-			brew  : {
-				text     : '',
-				style    : '',
-				renderer : 'legacy'
-			}
-		};
-	},
-
-	getInitialState : function() {
-		return {
-			brew : {
-				text     : this.props.brew.text     || '',
-				style    : this.props.brew.style    || undefined,
-				renderer : this.props.brew.renderer || 'legacy',
-				theme    : this.props.brew.theme    || '5ePHB'
-			}
-		};
-	},
-
-	componentDidMount : function() {
-		if(this.props.query.local == 'print'){
-			const brewStorage  = localStorage.getItem(BREWKEY);
-			const styleStorage = localStorage.getItem(STYLEKEY);
-			const metaStorage = JSON.parse(localStorage.getItem(METAKEY));
-
-			this.setState((prevState, prevProps)=>{
-				return {
-					brew : {
-						text     : brewStorage,
-						style    : styleStorage,
-						renderer : metaStorage?.renderer || 'legacy',
-						theme    : metaStorage?.theme    || '5ePHB'
-					}
-				};
-			});
-		}
-
-		if(this.props.query.dialog) window.print();
-	},
-
-	renderStyle : function() {
-		if(!this.state.brew.style) return;
-		//return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${this.state.brew.style}\n} </style>` }} />;
-		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>\n${this.state.brew.style}\n</style>` }} />;
-	},
-
-	renderPages : function(){
-		if(this.state.brew.renderer == 'legacy') {
-			return _.map(this.state.brew.text.split('\\page'), (pageText, index)=>{
-				return <div
-					className='phb page'
-					id={`p${index + 1}`}
-					dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(pageText) }}
-					key={index} />;
-			});
-		} else {
-			return _.map(this.state.brew.text.split(/^\\page$/gm), (pageText, index)=>{
-				pageText += `\n\n&nbsp;\n\\column\n&nbsp;`; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
-				return (
-					<div className='page' id={`p${index + 1}`} key={index} >
-						<div className='columnWrapper' dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} />
-					</div>
-				);
-			});
-		}
-
-	},
-
-	render : function(){
-		const rendererPath = this.state.brew.renderer == 'V3' ? 'V3' : 'Legacy';
-		const themePath    = this.state.brew.theme ?? '5ePHB';
-		const baseThemePath = Themes[rendererPath][themePath].baseTheme;
-
-		return <div>
-			<Meta name='robots' content='noindex, nofollow' />
-			<link href={`/themes/${rendererPath}/Blank/style.css`} rel='stylesheet'/>
-			{baseThemePath &&
-				<link href={`/themes/${rendererPath}/${baseThemePath}/style.css`} rel='stylesheet'/>
-			}
-			<link href={`/themes/${rendererPath}/${themePath}/style.css`} rel='stylesheet'/>
-			{/* Apply CSS from Style tab */}
-			{this.renderStyle()}
-			<div className='pages' ref='pages'>
-				{this.renderPages()}
-			</div>
-		</div>;
-	}
-});
-
-module.exports = PrintPage;

client/homebrew/pages/printPage/printPage.less

@@ -1,3 +0,0 @@
-.printPage{
-
-}

client/homebrew/pages/sharePage/sharePage.jsx

@@ -6,14 +6,13 @@ const { Meta } = require('vitreum/headtags');
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
 const MetadataNav = require('../../navbar/metadata.navitem.jsx');
-const PrintLink = require('../../navbar/print.navitem.jsx');
+const PrintNavItem = require('../../navbar/print.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 const Account = require('../../navbar/account.navitem.jsx');
-
-
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
 const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
+const { printCurrentBrew } = require('../../../../shared/helpers.js');
 
 const SharePage = createClass({
 	displayName     : 'SharePage',
@@ -35,7 +34,7 @@ const SharePage = createClass({
 		if(!(e.ctrlKey || e.metaKey)) return;
 		const P_KEY = 80;
 		if(e.keyCode == P_KEY){
-			window.open(`/print/${this.processShareId()}?dialog=true`, '_blank').focus();
+			if(e.keyCode == P_KEY) printCurrentBrew();
 			e.stopPropagation();
 			e.preventDefault();
 		}
@@ -47,6 +46,19 @@ const SharePage = createClass({
 					 this.props.brew.shareId;
 	},
 
+	renderEditLink : function(){
+		if(!this.props.brew.editId) return;
+
+		let editLink = this.props.brew.editId;
+		if(this.props.brew.googleId && !this.props.brew.stubbed) {
+			editLink = this.props.brew.googleId + editLink;
+		}
+
+		return 	<Nav.item color='orange' icon='fas fa-pencil-alt' href={`/edit/${editLink}`}>
+					edit
+		</Nav.item>;
+	},
+
 	render : function(){
 		return <div className='sharePage sitePage'>
 			<Meta name='robots' content='noindex, nofollow' />
@@ -59,18 +71,19 @@ const SharePage = createClass({
 
 				<Nav.section>
 					{this.props.brew.shareId && <>
-						<PrintLink shareId={this.processShareId()} />
+						<PrintNavItem/>
 						<Nav.dropdown>
 							<Nav.item color='red' icon='fas fa-code'>
 								source
 							</Nav.item>
-							<Nav.item color='blue' href={`/source/${this.processShareId()}`}>
+							<Nav.item color='blue' icon='fas fa-eye' href={`/source/${this.processShareId()}`}>
 								view
 							</Nav.item>
-							<Nav.item color='blue' href={`/download/${this.processShareId()}`}>
+							{this.renderEditLink()}
+							<Nav.item color='blue' icon='fas fa-download' href={`/download/${this.processShareId()}`}>
 								download
 							</Nav.item>
-							<Nav.item color='blue' href={`/new/${this.processShareId()}`}>
+							<Nav.item color='blue' icon='fas fa-clone' href={`/new/${this.processShareId()}`}>
 								clone to new
 							</Nav.item>
 						</Nav.dropdown>
@@ -81,7 +94,13 @@ const SharePage = createClass({
 			</Navbar>
 
 			<div className='content'>
-				<BrewRenderer text={this.props.brew.text} style={this.props.brew.style} renderer={this.props.brew.renderer} theme={this.props.brew.theme} />
+				<BrewRenderer
+					text={this.props.brew.text}
+					style={this.props.brew.style}
+					renderer={this.props.brew.renderer}
+					theme={this.props.brew.theme}
+					allowPrint={true}
+				/>
 			</div>
 		</div>;
 	}

client/homebrew/pages/userPage/userPage.jsx

@@ -1,7 +1,6 @@
 const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
-const cx    = require('classnames');
 
 const ListPage = require('../basePages/listPage/listPage.jsx');
 

client/template.js

@@ -12,9 +12,9 @@ const template = async function(name, title='', props = {}){
 	<html>
 		<head>
 			<meta name="viewport" content="width=device-width, initial-scale=1, height=device-height, interactive-widget=resizes-visual" />
-			<link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
+			<link href="//use.fontawesome.com/releases/v6.5.1/css/all.css" rel="stylesheet" type="text/css" />
 			<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
-			<link href=${`/${name}/bundle.css`} rel='stylesheet' />
+			<link href=${`/${name}/bundle.css`} type="text/css" rel='stylesheet' />
 			<link rel="icon" href="/assets/favicon.ico" type="image/x-icon" />
 			${ogMetaTags}
 			<meta name="twitter:card" content="summary">

faq.md

@@ -102,7 +102,7 @@ The best way to avoid this is to leave space at the end of a column equal to one
 
 ### Why do I need to manually create a new page?  Why doesn't text flow between pages?
 
-A Homebrewery document is at it's core an HTML & CSS document, and currently limited by the specs of those technologies.  It is currently not possible to flow content from inside one box ("page") to the inside of another box.  It seems likely that someday CSS will add this capability, and if/when that happens, Homebrewery will adopt it as soon as possible.
+A Homebrewery document is at its core an HTML & CSS document, and currently limited by the specs of those technologies.  It is currently not possible to flow content from inside one box ("page") to the inside of another box.  It seems likely that someday CSS will add this capability, and if/when that happens, Homebrewery will adopt it as soon as possible.
 
 ### Where do I get images?
 The Homebrewery does not provide images for use besides some page elements and example images for snippets.  You will need to find your own images for use and be sure you are following the appropriate license requirements.  
@@ -126,4 +126,4 @@ The Homebrewery defaults to creating US Letter page sizes.  If you are printing
 
 ### Typing `#### Adhesion` in the text editor doesn't show the header at all in the completed page?
 
-Your ad-blocking software is mistakenly assuming your text to be an ad. Whitelist homebrewery.naturalcrit.com in your ad-blocking software.
+Your ad-blocking software is mistakenly assuming your text to be an ad. Whitelist homebrewery.naturalcrit.com in your ad-blocking software.

package.json

@@ -1,10 +1,10 @@
 {
   "name": "homebrewery",
   "description": "Create authentic looking D&D homebrews using only markdown",
-  "version": "3.10.0",
+  "version": "3.13.0",
   "engines": {
-		"npm": "^10.2.x",
-    "node": ">=20.8.x"
+    "npm": "^10.2.x",
+    "node": "^20.8.x"
   },
   "repository": {
     "type": "git",
@@ -26,10 +26,13 @@
     "test:coverage": "jest --coverage --silent --runInBand",
     "test:dev": "jest --verbose --watch",
     "test:basic": "jest tests/markdown/basic.test.js --verbose",
-    "test:mustache-syntax": "jest '.*(mustache-syntax).*' --verbose --noStackTrace",
-    "test:mustache-syntax:inline": "jest '.*(mustache-syntax).*' -t '^Inline:.*' --verbose --noStackTrace",
-    "test:mustache-syntax:block": "jest '.*(mustache-syntax).*' -t '^Block:.*' --verbose --noStackTrace",
-    "test:mustache-syntax:injection": "jest '.*(mustache-syntax).*' -t '^Injection:.*' --verbose --noStackTrace",
+    "test:variables": "jest tests/markdown/variables.test.js --verbose",
+    "test:mustache-syntax": "jest \".*(mustache-syntax).*\" --verbose --noStackTrace",
+    "test:mustache-syntax:inline": "jest \".*(mustache-syntax).*\" -t '^Inline:.*' --verbose --noStackTrace",
+    "test:mustache-syntax:block": "jest \".*(mustache-syntax).*\" -t '^Block:.*' --verbose --noStackTrace",
+    "test:mustache-syntax:injection": "jest \".*(mustache-syntax).*\" -t '^Injection:.*' --verbose --noStackTrace",
+    "test:definition-lists": "jest tests/markdown/definition-lists.test.js --verbose --noStackTrace",
+    "test:emojis": "jest tests/markdown/emojis.test.js --verbose --noStackTrace",
     "test:route": "jest tests/routes/static-pages.test.js --verbose",
     "phb": "node scripts/phb.js",
     "prod": "set NODE_ENV=production && npm run build",
@@ -79,53 +82,56 @@
     ]
   },
   "dependencies": {
-    "@babel/core": "^7.23.2",
-    "@babel/plugin-transform-runtime": "^7.23.2",
-    "@babel/preset-env": "^7.23.2",
-    "@babel/preset-react": "^7.22.15",
-    "@googleapis/drive": "^8.4.0",
+    "@babel/core": "^7.24.7",
+    "@babel/plugin-transform-runtime": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
+    "@googleapis/drive": "^8.10.0",
     "body-parser": "^1.20.2",
-    "classnames": "^2.3.2",
+    "classnames": "^2.5.1",
     "codemirror": "^5.65.6",
     "cookie-parser": "^1.4.6",
     "create-react-class": "^15.7.0",
     "dedent-tabs": "^0.10.3",
-    "express": "^4.18.2",
+    "dompurify": "^3.1.5",
+    "expr-eval": "^2.0.2",
+    "express": "^4.19.2",
     "express-async-handler": "^1.2.0",
     "express-static-gzip": "2.1.7",
-    "fs-extra": "11.1.1",
+    "fs-extra": "11.2.0",
     "js-yaml": "^4.1.0",
     "jwt-simple": "^0.5.6",
     "less": "^3.13.1",
     "lodash": "^4.17.21",
-    "marked": "5.1.1",
-    "marked-extended-tables": "^1.0.7",
-    "marked-gfm-heading-id": "^3.1.0",
-    "marked-smartypants-lite": "^1.0.1",
+    "marked": "11.2.0",
+    "marked-emoji": "^1.4.0",
+    "marked-extended-tables": "^1.0.8",
+    "marked-gfm-heading-id": "^3.1.3",
+    "marked-smartypants-lite": "^1.0.2",
     "markedLegacy": "npm:marked@^0.3.19",
-    "moment": "^2.29.4",
-    "mongoose": "^7.6.1",
+    "moment": "^2.30.1",
+    "mongoose": "^8.4.1",
     "nanoid": "3.3.4",
-    "nconf": "^0.12.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "nconf": "^0.12.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-frame-component": "^4.1.3",
-    "react-router-dom": "6.16.0",
+    "react-router-dom": "6.23.1",
     "sanitize-filename": "1.6.3",
-    "superagent": "^8.1.2",
+    "superagent": "^9.0.2",
     "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
   },
   "devDependencies": {
-    "eslint": "^8.51.0",
-    "eslint-plugin-jest": "^27.4.2",
-    "eslint-plugin-react": "^7.33.2",
+    "eslint": "^8.57.0",
+    "eslint-plugin-jest": "^28.6.0",
+    "eslint-plugin-react": "^7.34.2",
     "jest": "^29.7.0",
     "jest-expect-message": "^1.1.3",
     "postcss-less": "^6.0.0",
-    "stylelint": "^15.10.3",
-    "stylelint-config-recess-order": "^4.3.0",
+    "stylelint": "^15.11.0",
+    "stylelint-config-recess-order": "^4.6.0",
     "stylelint-config-recommended": "^13.0.0",
     "stylelint-stylistic": "^0.4.3",
-    "supertest": "^6.3.3"
+    "supertest": "^7.0.0"
   }
 }

scripts/buildHomebrew.js

@@ -101,7 +101,10 @@ fs.emptyDirSync('./build');
 
 	//v==---------------------------MOVE CM EDITOR THEMES -----------------------------==v//
 
-	editorThemeFiles = fs.readdirSync('./node_modules/codemirror/theme');
+	const editorThemesBuildDir = './build/homebrew/cm-themes';
+	await fs.copy('./node_modules/codemirror/theme', editorThemesBuildDir);
+	await fs.copy('./themes/codeMirror/customThemes', editorThemesBuildDir);
+	editorThemeFiles = fs.readdirSync(editorThemesBuildDir);
 
 	const editorThemeFile = './themes/codeMirror/editorThemes.json';
 	if(fs.existsSync(editorThemeFile)) fs.rmSync(editorThemeFile);
@@ -114,7 +117,7 @@ fs.emptyDirSync('./build');
 	stream.write('\n]\n');
 	stream.end();
 
-	await fs.copy('./node_modules/codemirror/theme', './build/homebrew/cm-themes');
+
 	await fs.copy('./themes/codeMirror', './build/homebrew/codeMirror');
 
 	//v==----------------------------- BUNDLE PACKAGES --------------------------------==v//
@@ -151,14 +154,14 @@ fs.emptyDirSync('./build');
 	// build(bundles);
 	//
 
-})().catch(console.error);
+	//In development, set up LiveReload (refreshes browser), and Nodemon (restarts server)
+	if(isDev){
+		livereload('./build');     // Install the Chrome extension LiveReload to automatically refresh the browser
+		watchFile('./server.js', { // Restart server when change detected to this file or any nested directory from here
+			ignore : ['./build', './client', './themes'],  // Ignore folders that are not running server code / avoids unneeded restarts
+			ext    : 'js json'                             // Extensions to watch (only .js/.json by default)
+			//watch : ['./server', './themes'],            // Watch additional folders if needed
+		});
+	}
 
-//In development, set up LiveReload (refreshes browser), and Nodemon (restarts server)
-if(isDev){
-	livereload('./build');     // Install the Chrome extension LiveReload to automatically refresh the browser
-	watchFile('./server.js', { // Restart server when change detected to this file or any nested directory from here
-		ignore : ['./build', './client', './themes'],  // Ignore folders that are not running server code / avoids unneeded restarts
-		ext    : 'js json'                             // Extensions to watch (only .js/.json by default)
-		//watch : ['./server', './themes'],            // Watch additional folders if needed
-	});
-}
+})().catch(console.error);

scripts/project.json

@@ -25,8 +25,8 @@
 		"codemirror/addon/edit/closetag.js",
 		"codemirror/addon/edit/trailingspace.js",
 		"codemirror/addon/selection/active-line.js",
+		"codemirror/addon/hint/show-hint.js",
 		"moment",
-		"superagent",
-		"marked"
+		"superagent"
 	]
 }

server.js

@@ -7,6 +7,14 @@ DB.connect(config).then(()=>{
 	// before launching server
 	const PORT = process.env.PORT || config.get('web_port') || 8000;
 	server.app.listen(PORT, ()=>{
-		console.log(`server on port: ${PORT}`);
+		const reset = '\x1b[0m'; // Reset to default style
+		const bright = '\x1b[1m'; // Bright (bold) style
+		const cyan = '\x1b[36m'; // Cyan color
+		const underline = '\x1b[4m'; // Underlined style
+
+		console.log(`\n\tserver started at: ${new Date().toLocaleString()}`);
+		console.log(`\tserver on port: ${PORT}`);
+		console.log(`\t${bright + cyan}Open in browser: ${reset}${underline + bright + cyan}http://localhost:${PORT}${reset}\n\n`);
+
 	});
 });

server/admin.api.js

@@ -26,85 +26,124 @@ const mw = {
 	}
 };
 
-
-/* Search for brews that are older than 3 days and that are shorter than a tweet */
-const junkBrewQuery = HomebrewModel.find({
-	'$where'  : 'this.text.length < 140',
-	createdAt : {
-		$lt : Moment().subtract(30, 'days').toDate()
-	}
-}).limit(100).maxTime(60000);
+const junkBrewPipeline = [
+	{	$match : {
+		updatedAt  : { $lt: Moment().subtract(30, 'days').toDate() },
+		lastViewed : { $lt: Moment().subtract(30, 'days').toDate() }
+	} },
+	{ $project: { textBinSize: { $binarySize: '$textBin' } } },
+	{ $match: { textBinSize: { $lt: 140 } } },
+	{ $limit: 100 }
+];
 
 /* Search for brews that aren't compressed (missing the compressed text field) */
 const uncompressedBrewQuery = HomebrewModel.find({
 	'text' : { '$exists': true }
 }).lean().limit(10000).select('_id');
 
+// Search for up to 100 brews that have not been viewed or updated in 30 days and are shorter than 140 bytes
 router.get('/admin/cleanup', mw.adminOnly, (req, res)=>{
-	junkBrewQuery.exec((err, objs)=>{
-		if(err) return res.status(500).send(err);
-		return res.json({ count: objs.length });
-	});
+	HomebrewModel.aggregate(junkBrewPipeline).option({ maxTimeMS: 60000 })
+		.then((objs)=>res.json({ count: objs.length }))
+		.catch((error)=>{
+			console.error(error);
+			res.status(500).json({ error: 'Internal Server Error' });
+		});
 });
-/* Removes all empty brews that are older than 3 days and that are shorter than a tweet */
+
+// Delete up to 100 brews that have not been viewed or updated in 30 days and are shorter than 140 bytes
 router.post('/admin/cleanup', mw.adminOnly, (req, res)=>{
-	junkBrewQuery.remove().exec((err, objs)=>{
-		if(err) return res.status(500).send(err);
-		return res.json({ count: objs.length });
-	});
+	HomebrewModel.aggregate(junkBrewPipeline).option({ maxTimeMS: 60000 })
+		.then((docs)=>{
+			const ids = docs.map((doc)=>doc._id);
+			return HomebrewModel.deleteMany({ _id: { $in: ids } });
+		}).then((result)=>{
+			res.json({ count: result.deletedCount });
+		}).catch((error)=>{
+			console.error(error);
+			res.status(500).json({ error: 'Internal Server Error' });
+		});
 });
 
 /* Searches for matching edit or share id, also attempts to partial match */
-router.get('/admin/lookup/:id', mw.adminOnly, (req, res, next)=>{
-	HomebrewModel.findOne({ $or : [
-		{ editId: { '$regex': req.params.id, '$options': 'i' } },
-		{ shareId: { '$regex': req.params.id, '$options': 'i' } },
-	] }).exec((err, brew)=>{
-		return res.json(brew);
+router.get('/admin/lookup/:id', mw.adminOnly, async (req, res, next)=>{
+	HomebrewModel.findOne({
+		$or : [
+			{ editId: { $regex: req.params.id, $options: 'i' } },
+			{ shareId: { $regex: req.params.id, $options: 'i' } },
+		]
+	}).exec()
+	.then((brew)=>{
+		if(!brew)	// No document found
+			return res.status(404).json({ error: 'Document not found' });
+		else
+			return res.json(brew);
+	})
+	.catch((err)=>{
+		console.error(err);
+		return res.status(500).json({ error: 'Internal Server Error' });
 	});
 });
 
 /* Find 50 brews that aren't compressed yet */
 router.get('/admin/finduncompressed', mw.adminOnly, (req, res)=>{
-	uncompressedBrewQuery.exec((err, objs)=>{
-		if(err) return res.status(500).send(err);
-		objs = objs.map((obj)=>{return obj._id;});
-		return res.json({ count: objs.length, ids: objs });
-	});
+	const query = uncompressedBrewQuery.clone();
+
+	query.exec()
+		.then((objs)=>{
+			const ids = objs.map((obj)=>obj._id);
+			res.json({ count: ids.length, ids });
+		})
+		.catch((err)=>{
+			console.error(err);
+			res.status(500).send(err.message || 'Internal Server Error');
+		});
 });
 
+
 /* Compresses the "text" field of a brew to binary */
 router.put('/admin/compress/:id', (req, res)=>{
-	HomebrewModel.get({ _id: req.params.id })
+	HomebrewModel.findOne({ _id: req.params.id })
 		.then((brew)=>{
-			brew.textBin = zlib.deflateRawSync(brew.text);	// Compress brew text to binary before saving
-			brew.text = undefined;							// Delete the non-binary text field since it's not needed anymore
+			if(!brew)
+				return res.status(404).send('Brew not found');
 
-			brew.save((err, obj)=>{
-				if(err) throw err;
-				return res.status(200).send(obj);
-			});
+			if(brew.text) {
+				brew.textBin = brew.textBin || zlib.deflateRawSync(brew.text);	//Don't overwrite textBin if exists
+				brew.text = undefined;
+			}
+
+			return brew.save();
 		})
+		.then((obj)=>res.status(200).send(obj))
 		.catch((err)=>{
-			console.log(err);
-			return res.status(500).send('Error while saving');
+			console.error(err);
+			res.status(500).send('Error while saving');
 		});
 });
 
-router.get('/admin/stats', mw.adminOnly, (req, res)=>{
-	HomebrewModel.count({}, (err, count)=>{
+
+router.get('/admin/stats', mw.adminOnly, async (req, res)=>{
+	try {
+		const totalBrewsCount = await HomebrewModel.countDocuments({});
+		const publishedBrewsCount = await HomebrewModel.countDocuments({ published: true });
+
 		return res.json({
-			totalBrews : count
+			totalBrews          : totalBrewsCount,
+			totalPublishedBrews : publishedBrewsCount
 		});
-	});
+	} catch (error) {
+		console.error(error);
+		return res.status(500).json({ error: 'Internal Server Error' });
+	}
 });
 
 router.get('/admin', mw.adminOnly, (req, res)=>{
 	templateFn('admin', {
 		url : req.originalUrl
 	})
-		.then((page)=>res.send(page))
-		.catch((err)=>res.sendStatus(500));
+	.then((page)=>res.send(page))
+	.catch((err)=>res.sendStatus(500));
 });
 
 module.exports = router;

server/app.js

@@ -17,26 +17,13 @@ const asyncHandler = require('express-async-handler');
 
 const { DEFAULT_BREW } = require('./brewDefaults.js');
 
-const splitTextStyleAndMetadata = (brew)=>{
-	brew.text = brew.text.replaceAll('\r\n', '\n');
-	if(brew.text.startsWith('```metadata')) {
-		const index = brew.text.indexOf('```\n\n');
-		const metadataSection = brew.text.slice(12, index - 1);
-		const metadata = yaml.load(metadataSection);
-		Object.assign(brew, _.pick(metadata, ['title', 'description', 'tags', 'systems', 'renderer', 'theme', 'lang']));
-		brew.text = brew.text.slice(index + 5);
-	}
-	if(brew.text.startsWith('```css')) {
-		const index = brew.text.indexOf('```\n\n');
-		brew.style = brew.text.slice(7, index - 1);
-		brew.text = brew.text.slice(index + 5);
-	}
-};
+const { splitTextStyleAndMetadata } = require('../shared/helpers.js');
+
 
 const sanitizeBrew = (brew, accessType)=>{
 	brew._id = undefined;
 	brew.__v = undefined;
-	if(accessType !== 'edit'){
+	if(accessType !== 'edit' && accessType !== 'shareAuthor') {
 		brew.editId = undefined;
 	}
 	return brew;
@@ -304,7 +291,8 @@ app.get('/new/:id', asyncHandler(getBrew('share')), (req, res, next)=>{
 		text     : req.brew.text,
 		style    : req.brew.style,
 		renderer : req.brew.renderer,
-		theme    : req.brew.theme
+		theme    : req.brew.theme,
+		tags     : req.brew.tags
 	};
 	req.brew = _.defaults(brew, DEFAULT_BREW);
 
@@ -319,7 +307,6 @@ app.get('/new/:id', asyncHandler(getBrew('share')), (req, res, next)=>{
 //Share Page
 app.get('/share/:id', asyncHandler(getBrew('share')), asyncHandler(async (req, res, next)=>{
 	const { brew } = req;
-
 	req.ogMeta = { ...defaultMetaTags,
 		title       : req.brew.title || 'Untitled Brew',
 		description : req.brew.description || 'No description.',
@@ -327,26 +314,23 @@ app.get('/share/:id', asyncHandler(getBrew('share')), asyncHandler(async (req, r
 		type        : 'article'
 	};
 
-	if(req.params.id.length > 12 && !brew._id) {
-		const googleId = brew.googleId;
-		const shareId = brew.shareId;
-		await GoogleActions.increaseView(googleId, shareId, 'share', brew)
-			.catch((err)=>{next(err);});
-	} else {
-		await HomebrewModel.increaseView({ shareId: brew.shareId });
-	}
-	sanitizeBrew(req.brew, 'share');
+	// increase visitor view count, do not include visits by author(s)
+	if(!brew.authors.includes(req.account?.username)){
+		if(req.params.id.length > 12 && !brew._id) {
+			const googleId = brew.googleId;
+			const shareId = brew.shareId;
+			await GoogleActions.increaseView(googleId, shareId, 'share', brew)
+				.catch((err)=>{next(err);});
+		} else {
+			await HomebrewModel.increaseView({ shareId: brew.shareId });
+		}
+	};
+
+	brew.authors.includes(req.account?.username) ? sanitizeBrew(req.brew, 'shareAuthor') : sanitizeBrew(req.brew, 'share');
 	splitTextStyleAndMetadata(req.brew);
 	return next();
 }));
 
-//Print Page
-app.get('/print/:id', asyncHandler(getBrew('share')), (req, res, next)=>{
-	sanitizeBrew(req.brew, 'share');
-	splitTextStyleAndMetadata(req.brew);
-	next();
-});
-
 //Account Page
 app.get('/account', asyncHandler(async (req, res, next)=>{
 	const data = {};
@@ -381,7 +365,7 @@ app.get('/account', asyncHandler(async (req, res, next)=>{
 				console.log(err);
 			});
 
-		data.uiItems = {
+		data.accountDetails = {
 			username    : req.account.username,
 			issued      : req.account.issued,
 			googleId    : Boolean(req.account.googleId),
@@ -469,9 +453,18 @@ const getPureError = (error)=>{
 };
 
 app.use(async (err, req, res, next)=>{
-	const status = err.status || err.code || 500;
+	err.originalUrl = req.originalUrl;
 	console.error(err);
 
+	if(err.originalUrl?.startsWith('/api/')) {
+		// console.log('API error');
+		res.status(err.status || err.response?.status || 500).send(err);
+		return;
+	}
+
+	// console.log('non-API error');
+	const status = err.status || err.code || 500;
+
 	req.ogMeta = { ...defaultMetaTags,
 		title       : 'Error Page',
 		description : 'Something went wrong!'

server/googleActions.js

@@ -1,5 +1,4 @@
 /* eslint-disable max-lines */
-const _ = require('lodash');
 const googleDrive = require('@googleapis/drive');
 const { nanoid } = require('nanoid');
 const token = require('./token.js');
@@ -7,7 +6,9 @@ const config = require('./config.js');
 
 let serviceAuth;
 if(!config.get('service_account')){
-	console.log('No Google Service Account in config files - Google Drive integration will not be available.');
+	const reset = '\x1b[0m'; // Reset to default style
+	const yellow = '\x1b[33m'; // yellow color
+	console.warn(`\n${yellow}No Google Service Account in config files - Google Drive integration will not be available.${reset}`);
 } else  {
 	const keys = typeof(config.get('service_account')) == 'string' ?
 		JSON.parse(config.get('service_account')) :
@@ -18,7 +19,7 @@ if(!config.get('service_account')){
 		serviceAuth.scopes = ['https://www.googleapis.com/auth/drive'];
 	} catch (err) {
 		console.warn(err);
-		console.log('Please make sure the Google Service Account is set up properly in your config files.');
+		console.warn('Please make sure the Google Service Account is set up properly in your config files.');
 	}
 }
 

server/homebrew.api.js

@@ -54,6 +54,10 @@ const api = {
 				});
 			stub = stub?.toObject();
 
+			if(stub?.lock?.locked && accessType != 'edit') {
+				throw { HBErrorCode: '100', code: stub.lock.code, message: stub.lock.shareMessage, brewId: stub.shareId, brewTitle: stub.title };
+			}
+
 			// If there is a google id, try to find the google brew
 			if(!stubOnly && (googleId || stub?.googleId)) {
 				let googleError;
@@ -79,9 +83,9 @@ const api = {
 			if(accessType === 'edit' && (authorsExist && !(isAuthor || isInvited))) {
 				const accessError = { name: 'Access Error', status: 401 };
 				if(req.account){
-					throw { ...accessError, message: 'User is not an Author', HBErrorCode: '03', authors: stub.authors, brewTitle: stub.title };
+					throw { ...accessError, message: 'User is not an Author', HBErrorCode: '03', authors: stub.authors, brewTitle: stub.title, shareId: stub.shareId };
 				}
-				throw { ...accessError, message: 'User is not logged in', HBErrorCode: '04', authors: stub.authors, brewTitle: stub.title };
+				throw { ...accessError, message: 'User is not logged in', HBErrorCode: '04', authors: stub.authors, brewTitle: stub.title, shareId: stub.shareId };
 			}
 
 			// If after all of that we still don't have a brew, throw an exception

server/homebrew.api.spec.js

@@ -117,7 +117,7 @@ describe('Tests for api', ()=>{
 					id : '123456789012345678901234567890123abcdefghijkl'
 				}
 			});
-			
+
 			expect(googleId).toEqual('123456789012345678901234567890123');
 			expect(id).toEqual('abcdefghijkl');
 		});
@@ -128,7 +128,7 @@ describe('Tests for api', ()=>{
 					id : '123456789012345678901234567890123abcdefghij'
 				}
 			});
-			
+
 			expect(googleId).toEqual('123456789012345678901234567890123');
 			expect(id).toEqual('abcdefghij');
 		});
@@ -298,6 +298,18 @@ describe('Tests for api', ()=>{
 			expect(model.get).toHaveBeenCalledWith({ shareId: '1' });
 			expect(google.getGoogleBrew).toHaveBeenCalledWith('2', '1', 'share');
 		});
+
+		it('access is denied to a locked brew', async()=>{
+			const lockBrew = { title: 'test brew', shareId: '1', lock: { locked: true, code: 404, shareMessage: 'brew locked' } };
+			model.get = jest.fn(()=>toBrewPromise(lockBrew));
+			api.getId = jest.fn(()=>({ id: '1', googleId: undefined }));
+
+			const fn = api.getBrew('share', false);
+			const req = { brew: {} };
+			const next = jest.fn();
+
+			await expect(fn(req, null, next)).rejects.toEqual({ 'HBErrorCode': '100', 'brewId': '1', 'brewTitle': 'test brew', 'code': 404, 'message': 'brew locked' });
+		});
 	});
 
 	describe('mergeBrewText', ()=>{

shared/helpers.js

@@ -0,0 +1,34 @@
+const _ = require('lodash');
+const yaml = require('js-yaml');
+
+const splitTextStyleAndMetadata = (brew)=>{
+	brew.text = brew.text.replaceAll('\r\n', '\n');
+	if(brew.text.startsWith('```metadata')) {
+		const index = brew.text.indexOf('```\n\n');
+		const metadataSection = brew.text.slice(12, index - 1);
+		const metadata = yaml.load(metadataSection);
+		Object.assign(brew, _.pick(metadata, ['title', 'description', 'tags', 'systems', 'renderer', 'theme', 'lang']));
+		brew.text = brew.text.slice(index + 5);
+	}
+	if(brew.text.startsWith('```css')) {
+		const index = brew.text.indexOf('```\n\n');
+		brew.style = brew.text.slice(7, index - 1);
+		brew.text = brew.text.slice(index + 5);
+	}
+};
+
+const printCurrentBrew = ()=>{
+	if(window.typeof !== 'undefined') {
+		window.frames['BrewRenderer'].contentWindow.print();
+		//Force DOM reflow; Print dialog causes a repaint, and @media print CSS somehow makes out-of-view pages disappear
+		const node = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer').item(0);
+		node.style.display='none';
+		node.offsetHeight; // accessing this is enough to trigger a reflow
+		node.style.display='';
+	}
+};
+
+module.exports = {
+	splitTextStyleAndMetadata,
+	printCurrentBrew
+};

shared/homebrewery/renderWarnings/renderWarnings.jsx

@@ -2,9 +2,8 @@ require('./renderWarnings.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
-const cx    = require('classnames');
 
-const DISMISS_KEY = 'dismiss_render_warning';
+import Dialog from '../../../client/components/dialog.jsx';
 
 const RenderWarnings = createClass({
 	displayName     : 'RenderWarnings',
@@ -35,9 +34,6 @@ const RenderWarnings = createClass({
 		},
 	},
 	checkWarnings : function(){
-		const hideDismiss = localStorage.getItem(DISMISS_KEY);
-		if(hideDismiss) return this.setState({ warnings: {} });
-
 		this.setState({
 			warnings : _.reduce(this.warnings, (r, fn, type)=>{
 				const element = fn();
@@ -46,20 +42,18 @@ const RenderWarnings = createClass({
 			}, {})
 		});
 	},
-	dismiss : function(){
-		localStorage.setItem(DISMISS_KEY, true);
-		this.checkWarnings();
-	},
 	render : function(){
 		if(_.isEmpty(this.state.warnings)) return null;
 
-		return <div className='renderWarnings'>
-			<i className='fas fa-times dismiss' onClick={this.dismiss}/>
+		const DISMISS_KEY = 'dismiss_render_warning';
+		const DISMISS_TEXT = <i className='fas fa-times dismiss' />;
+
+		return <Dialog className='renderWarnings' dismissKey={DISMISS_KEY} closeText={DISMISS_TEXT}>
 			<i className='fas fa-exclamation-triangle ohno' />
 			<h3>Render Warnings</h3>
 			<small>If this homebrew is rendering badly if might be because of the following:</small>
 			<ul>{_.values(this.state.warnings)}</ul>
-		</div>;
+		</Dialog>;
 	}
 });
 

shared/homebrewery/renderWarnings/renderWarnings.less

@@ -1,53 +1,48 @@
-.renderWarnings{
-	position		 : relative;
-	float			 : right;
-	display          : inline-block;
+.renderWarnings {
+	position         : relative;
+	float            : right;
 	width            : 350px;
 	padding          : 20px;
 	padding-bottom   : 10px;
 	padding-left     : 85px;
 	margin-bottom    : 10px;
-	background-color : @yellow;
 	color            : white;
-	a{
-		font-weight : 800;
-	}
-	i.ohno{
+	background-color : @yellow;
+	border           : none;
+	a { font-weight : 800; }
+	i.ohno {
 		position  : absolute;
 		top       : 24px;
 		left      : 24px;
-		opacity   : 0.8;
 		font-size : 2.5em;
+		opacity   : 0.8;
 	}
-	i.dismiss{
-		position : absolute;
-		top      : 10px;
-		right    : 10px;
-		cursor   : pointer;
-		opacity  : 0.6;
-		&:hover{
-			opacity : 1;
-		}
+	button.dismiss {
+		position         : absolute;
+		top              : 10px;
+		right            : 10px;
+		cursor           : pointer;
+		background-color : transparent;
+		opacity          : 0.6;
+		&:hover { opacity : 1; }
 	}
-	small{
-		opacity   : 0.7;
+	small {
 		font-size : 0.6em;
+		opacity   : 0.7;
 	}
-	h3{
+	h3 {
 		font-size   : 1.1em;
 		font-weight : 800;
 	}
-	ul{
+	ul {
 		margin-top          : 15px;
 		font-size           : 0.8em;
 		list-style-position : outside;
 		list-style-type     : disc;
-		li{
+		li {
 			font-size   : 0.8em;
 			line-height : 1.6em;
-			em{
-				font-weight : 800;
-			}
+			em { font-weight : 800; }
 		}
 	}
 }

shared/naturalcrit/codeEditor/autocompleteEmoji.js

@@ -0,0 +1,84 @@
+const diceFont      = require('../../../themes/fonts/iconFonts/diceFont.js');
+const elderberryInn = require('../../../themes/fonts/iconFonts/elderberryInn.js');
+const fontAwesome   = require('../../../themes/fonts/iconFonts/fontAwesome.js');
+const gameIcons     = require('../../../themes/fonts/iconFonts/gameIcons.js');
+
+const emojis = {
+	...diceFont,
+	...elderberryInn,
+	...fontAwesome,
+	...gameIcons
+};
+
+const showAutocompleteEmoji = function(CodeMirror, editor) {
+	CodeMirror.commands.autocomplete = function(editor) {
+		editor.showHint({
+			completeSingle : false,
+			hint           : function(editor) {
+				const cursor = editor.getCursor();
+				const line = cursor.line;
+				const lineContent = editor.getLine(line);
+				const start = lineContent.lastIndexOf(':', cursor.ch - 1) + 1;
+				const end = cursor.ch;
+				const currentWord = lineContent.slice(start, end);
+
+
+				const list = Object.keys(emojis).filter(function(emoji) {
+					return emoji.toLowerCase().indexOf(currentWord.toLowerCase()) >= 0;
+				}).sort((a, b)=>{
+					const lowerA = a.replace(/\d+/g, function(match) {	// Temporarily convert any numbers in emoji string
+						return match.padStart(4, '0');										// to 4-digits, left-padded with 0's, to aid in
+					}).toLowerCase();																		// sorting numbers, i.e., "d6, d10, d20", not "d10, d20, d6"
+					const lowerB = b.replace(/\d+/g, function(match) {	// Also make lowercase for case-insensitive alpha sorting
+						return match.padStart(4, '0');
+					}).toLowerCase();
+
+					if(lowerA < lowerB)
+						return -1;
+					return 1;
+				}).map(function(emoji) {
+					return {
+						text   : `${emoji}:`,														// Text to output to editor when option is selected
+						render : function(element, self, data) {				// How to display the option in the dropdown
+							const div = document.createElement('div');
+							div.innerHTML = `<i class="emojiPreview ${emojis[emoji]}"></i> ${emoji}`;
+							element.appendChild(div);
+						}
+					};
+				});
+
+				return {
+					list : list.length ? list : [],
+					from : CodeMirror.Pos(line, start),
+					to   : CodeMirror.Pos(line, end)
+				};
+			}
+		});
+	};
+
+	editor.on('inputRead', function(instance, change) {
+		const cursor = editor.getCursor();
+		const line = editor.getLine(cursor.line);
+
+		// Get the text from the start of the line to the cursor
+		const textToCursor = line.slice(0, cursor.ch);
+
+		// Do not autosuggest emojis in curly span/div/injector properties
+		if(line.includes('{')) {
+			const curlyToCursor = textToCursor.slice(textToCursor.indexOf(`{`));
+			const curlySpanRegex = /{(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\1$/g;
+
+			if(curlySpanRegex.test(curlyToCursor))
+				return;
+		}
+
+		// Check if the text ends with ':xyz'
+		if(/:[^\s:]+$/.test(textToCursor)) {
+			CodeMirror.commands.autocomplete(editor);
+		}
+	});
+};
+
+module.exports = {
+	showAutocompleteEmoji
+};

shared/naturalcrit/codeEditor/codeEditor.jsx

@@ -3,11 +3,11 @@ require('./codeEditor.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
-const cx = require('classnames');
 const closeTag = require('./close-tag');
+const autoCompleteEmoji = require('./autocompleteEmoji');
 
 let CodeMirror;
-if(typeof navigator !== 'undefined'){
+if(typeof window !== 'undefined'){
 	CodeMirror = require('codemirror');
 
 	//Language Modes
@@ -36,6 +36,8 @@ if(typeof navigator !== 'undefined'){
 	//XML code folding is a requirement of the auto-closing tag feature and is not enabled
 	require('codemirror/addon/fold/xml-fold.js');
 	require('codemirror/addon/edit/closetag.js');
+	//Autocompletion
+	require('codemirror/addon/hint/show-hint.js');
 
 	const foldCode = require('./fold-code');
 	foldCode.registerHomebreweryHelper(CodeMirror);
@@ -60,6 +62,8 @@ const CodeEditor = createClass({
 		};
 	},
 
+	editor : React.createRef(null),
+
 	componentDidMount : function() {
 		this.buildEditor();
 		const newDoc = CodeMirror.Doc(this.props.value, this.props.language);
@@ -99,7 +103,7 @@ const CodeEditor = createClass({
 	},
 
 	buildEditor : function() {
-		this.codeMirror = CodeMirror(this.refs.editor, {
+		this.codeMirror = CodeMirror(this.editor.current, {
 			lineNumbers       : true,
 			lineWrapping      : this.props.wrap,
 			indentWithTabs    : false,
@@ -112,6 +116,10 @@ const CodeEditor = createClass({
 				'Shift-Tab'        : this.dedent,
 				'Ctrl-B'           : this.makeBold,
 				'Cmd-B'            : this.makeBold,
+				'Shift-Ctrl-='     : this.makeSuper,
+				'Shift-Cmd-='      : this.makeSuper,
+				'Ctrl-='           : this.makeSub,
+				'Cmd-='            : this.makeSub,
 				'Ctrl-I'           : this.makeItalic,
 				'Cmd-I'            : this.makeItalic,
 				'Ctrl-U'           : this.makeUnderline,
@@ -173,7 +181,10 @@ const CodeEditor = createClass({
 			// 	return el;
 			// }
 		});
+
+		// Add custom behaviors (auto-close curlies and auto-complete emojis)
 		closeTag.autoCloseCurlyBraces(CodeMirror, this.codeMirror);
+		autoCompleteEmoji.showAutocompleteEmoji(CodeMirror, this.codeMirror);
 
 		// Note: codeMirror passes a copy of itself in this callback. cm === this.codeMirror. Either one works.
 		this.codeMirror.on('change', (cm)=>{this.props.onChange(cm.getValue());});
@@ -219,6 +230,25 @@ const CodeEditor = createClass({
 		}
 	},
 
+	makeSuper : function() {
+		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 1) === '^' && selection.slice(-1) === '^';
+		this.codeMirror.replaceSelection(t ? selection.slice(1, -1) : `^${selection}^`, 'around');
+		if(selection.length === 0){
+			const cursor = this.codeMirror.getCursor();
+			this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - 1 });
+		}
+	},
+
+	makeSub : function() {
+		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '^^' && selection.slice(-2) === '^^';
+		this.codeMirror.replaceSelection(t ? selection.slice(2, -2) : `^^${selection}^^`, 'around');
+		if(selection.length === 0){
+			const cursor = this.codeMirror.getCursor();
+			this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - 2 });
+		}
+	},
+
+
 	makeNbsp : function() {
 		this.codeMirror.replaceSelection(' ', 'end');
 	},
@@ -413,8 +443,8 @@ const CodeEditor = createClass({
 
 	render : function(){
 		return <>
-			<link href={`../homebrew/cm-themes/${this.props.editorTheme}.css`} rel='stylesheet' />
-			<div className='codeEditor' ref='editor' style={this.props.style}/>
+			<link href={`../homebrew/cm-themes/${this.props.editorTheme}.css`} type='text/css' rel='stylesheet' />
+			<div className='codeEditor' ref={this.editor} style={this.props.style}/>
 		</>;
 	}
 });

shared/naturalcrit/codeEditor/codeEditor.less

@@ -2,6 +2,13 @@
 @import (less) 'codemirror/addon/fold/foldgutter.css';
 @import (less) 'codemirror/addon/search/matchesonscrollbar.css';
 @import (less) 'codemirror/addon/dialog/dialog.css';
+@import (less) 'codemirror/addon/hint/show-hint.css';
+
+//Icon fonts included so they can appear in emoji autosuggest dropdown
+@import (less) './themes/fonts/iconFonts/diceFont.less';
+@import (less) './themes/fonts/iconFonts/elderberryInn.less';
+@import (less) './themes/fonts/iconFonts/gameIcons.less';
+@import (less) './themes/fonts/iconFonts/fontAwesome.less';
 
 @keyframes sourceMoveAnimation {
 	50%  {background-color: red;   color: white;}
@@ -17,13 +24,24 @@
     text-shadow: none;
     font-weight: 600;
     color: grey;
-}
+  }
 
   .sourceMoveFlash .CodeMirror-line{
     animation-name: sourceMoveAnimation;
     animation-duration: 0.4s;
   }
 
+  .CodeMirror-vscrollbar {
+    &::-webkit-scrollbar {
+      width: 20px;
+    }
+    &::-webkit-scrollbar-thumb {
+      width: 20px;
+      background: linear-gradient(90deg, #858585 15px, #808080 15px);
+    }
+  }
+
+
   //.cm-tab {
   //  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAQAAACOs/baAAAARUlEQVR4nGJgIAG8JkXxUAcCtDWemcGR1lY4MvgzCEKY7jSBjgxBDAG09UEQzAe0AMwMHrSOAwEGRtpaMIwAAAAA//8DAG4ID9EKs6YqAAAAAElFTkSuQmCC) no-repeat right;
   //}
@@ -34,3 +52,8 @@
   //  }
   //}
 }
+
+.emojiPreview {
+	font-size: 1.5em;
+	line-height: 1.2em;
+}

shared/naturalcrit/markdown.js

@@ -4,7 +4,48 @@ const Marked = require('marked');
 const MarkedExtendedTables = require('marked-extended-tables');
 const { markedSmartypantsLite: MarkedSmartypantsLite } = require('marked-smartypants-lite');
 const { gfmHeadingId: MarkedGFMHeadingId } = require('marked-gfm-heading-id');
+const { markedEmoji: MarkedEmojis } = require('marked-emoji');
+
+//Icon fonts included so they can appear in emoji autosuggest dropdown
+const diceFont      = require('../../themes/fonts/iconFonts/diceFont.js');
+const elderberryInn = require('../../themes/fonts/iconFonts/elderberryInn.js');
+const fontAwesome   = require('../../themes/fonts/iconFonts/fontAwesome.js');
+const gameIcons     = require('../../themes/fonts/iconFonts/gameIcons.js');
+
+const MathParser = require('expr-eval').Parser;
 const renderer = new Marked.Renderer();
+const tokenizer = new Marked.Tokenizer();
+
+//Limit math features to simple items
+const mathParser = new MathParser({
+	operators : {
+		// These default to true, but are included to be explicit
+		add      : true,
+		subtract : true,
+		multiply : true,
+		divide   : true,
+		power    : true,
+		round    : true,
+		floor    : true,
+		ceil     : true,
+
+		sin     : false, cos     : false, tan     : false, asin    : false, acos    : false,
+		atan    : false, sinh    : false, cosh    : false, tanh    : false, asinh   : false,
+		acosh   : false, atanh   : false, sqrt    : false, cbrt    : false, log     : false,
+		log2    : false, ln      : false, lg      : false, log10   : false, expm1   : false,
+		log1p   : false, abs     : false, trunc   : false, join    : false, sum     : false,
+		'-'     : false, '+'     : false, exp     : false, not     : false, length  : false,
+		'!'     : false, sign    : false, random  : false, fac     : false, min     : false,
+		max     : false, hypot   : false, pyt     : false, pow     : false, atan2   : false,
+		'if'    : false, gamma   : false, roundTo : false, map     : false, fold    : false,
+		filter  : false, indexOf : false,
+
+		remainder   : false, factorial   : false,
+		comparison  : false, concatenate : false,
+		logical     : false, assignment  : false,
+		array       : false, fndef       : false
+	}
+});
 
 //Processes the markdown within an HTML block if it's just a class-wrapper
 renderer.html = function (html) {
@@ -17,7 +58,7 @@ renderer.html = function (html) {
 	return html;
 };
 
-// Don't wrap {{ Divs or {{ empty Spans in <p> tags
+// Don't wrap {{ Spans alone on a line, or {{ Divs in <p> tags
 renderer.paragraph = function(text){
 	let match;
 	if(text.startsWith('<div') || text.startsWith('</div'))
@@ -28,24 +69,51 @@ renderer.paragraph = function(text){
 		return `<p>${text}</p>\n`;
 };
 
+//Fix local links in the Preview iFrame to link inside the frame
+renderer.link = function (href, title, text) {
+	let self = false;
+	if(href[0] == '#') {
+		self = true;
+	}
+	href = cleanUrl(this.options.sanitize, this.options.baseUrl, href);
+
+	if(href === null) {
+		return text;
+	}
+	let out = `<a href="${escape(href)}"`;
+	if(title) {
+		out += ` title="${title}"`;
+	}
+	if(self) {
+		out += ' target="_self"';
+	}
+	out += `>${text}</a>`;
+	return out;
+};
+
+// Disable default reflink behavior, as it steps on our variables extension
+tokenizer.def = function () {
+	return undefined;
+};
+
 const mustacheSpans = {
 	name  : 'mustacheSpans',
 	level : 'inline',                                   // Is this a block-level or inline-level tokenizer?
 	start(src) { return src.match(/{{[^{]/)?.index; },  // Hint to Marked.js to stop and check for a match
 	tokenizer(src, tokens) {
 		const completeSpan = /^{{[^\n]*}}/;               // Regex for the complete token
-		const inlineRegex = /{{(?=((?::(?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':{}\s]*)*))\1 *|}}/g;
+		const inlineRegex = /{{(?=((?:[:=](?:"['\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"=':{}\s]*)*))\1 *|}}/g;
 		const match = completeSpan.exec(src);
 		if(match) {
 			//Find closing delimiter
 			let blockCount = 0;
-			let tags = '';
+			let tags = {};
 			let endTags = 0;
 			let endToken = 0;
 			let delim;
 			while (delim = inlineRegex.exec(match[0])) {
-				if(!tags) {
-					tags = ` ${processStyleTags(delim[0].substring(2))}`;
+				if(_.isEmpty(tags)) {
+					tags = processStyleTags(delim[0].substring(2));
 					endTags = delim[0].length;
 				}
 				if(delim[0].startsWith('{{')) {
@@ -74,7 +142,14 @@ const mustacheSpans = {
 		}
 	},
 	renderer(token) {
-		return `<span class="inline-block${token.tags}>${this.parser.parseInline(token.tokens)}</span>`; // parseInline to turn child tokens into HTML
+		const tags = token.tags;
+		tags.classes = ['inline-block', tags.classes].join(' ').trim();
+		return `<span` +
+			`${tags.classes    ? ` class="${tags.classes}"` : ''}` +
+			`${tags.id         ? ` id="${tags.id}"`         : ''}` +
+			`${tags.styles     ? ` style="${tags.styles}"`  : ''}` +
+			`${tags.attributes ? ` ${Object.entries(tags.attributes).map(([key, value])=>`${key}="${value}"`).join(' ')}` : ''}` +
+			`>${this.parser.parseInline(token.tokens)}</span>`; // parseInline to turn child tokens into HTML
 	}
 };
 
@@ -84,19 +159,19 @@ const mustacheDivs = {
 	start(src) { return src.match(/\n *{{[^{]/m)?.index; },  // Hint to Marked.js to stop and check for a match
 	tokenizer(src, tokens) {
 		const completeBlock = /^ *{{[^\n}]* *\n.*\n *}}/s;                // Regex for the complete token
-		const blockRegex = /^ *{{(?=((?::(?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':{}\s]*)*))\1 *$|^ *}}$/gm;
+		const blockRegex = /^ *{{(?=((?:[:=](?:"['\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"=':{}\s]*)*))\1 *$|^ *}}$/gm;
 		const match = completeBlock.exec(src);
 		if(match) {
 			//Find closing delimiter
 			let blockCount = 0;
-			let tags = '';
+			let tags = {};
 			let endTags = 0;
 			let endToken = 0;
 			let delim;
 			while (delim = blockRegex.exec(match[0])?.[0].trim()) {
-				if(!tags) {
-					tags = ` ${processStyleTags(delim.substring(2))}`;
-					endTags = delim.length;
+				if(_.isEmpty(tags)) {
+					tags = processStyleTags(delim.substring(2));
+					endTags = delim.length + src.indexOf(delim);
 				}
 				if(delim.startsWith('{{')) {
 					blockCount++;
@@ -123,7 +198,14 @@ const mustacheDivs = {
 		}
 	},
 	renderer(token) {
-		return `<div class="block${token.tags}>${this.parser.parse(token.tokens)}</div>`; // parseInline to turn child tokens into HTML
+		const tags = token.tags;
+		tags.classes = ['block', tags.classes].join(' ').trim();
+		return `<div` +
+			`${tags.classes    ? ` class="${tags.classes}"` : ''}` +
+			`${tags.id         ? ` id="${tags.id}"`         : ''}` +
+			`${tags.styles     ? ` style="${tags.styles}"`  : ''}` +
+			`${tags.attributes ? ` ${Object.entries(tags.attributes).map(([key, value])=>`${key}="${value}"`).join(' ')}` : ''}` +
+			`>${this.parser.parse(token.tokens)}</div>`; // parse to turn child tokens into HTML
 	}
 };
 
@@ -132,30 +214,46 @@ const mustacheInjectInline = {
 	level : 'inline',
 	start(src) { return src.match(/ *{[^{\n]/)?.index; },  // Hint to Marked.js to stop and check for a match
 	tokenizer(src, tokens) {
-		const inlineRegex = /^ *{(?=((?::(?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':{}\s]*)*))\1}/g;
+		const inlineRegex = /^ *{(?=((?:[:=](?:"['\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"=':{}\s]*)*))\1}/g;
 		const match = inlineRegex.exec(src);
 		if(match) {
 			const lastToken = tokens[tokens.length - 1];
 			if(!lastToken || lastToken.type == 'mustacheInjectInline')
 				return false;
 
-			const tags = ` ${processStyleTags(match[1])}`;
+			const tags = processStyleTags(match[1]);
 			lastToken.originalType = lastToken.type;
 			lastToken.type         = 'mustacheInjectInline';
-			lastToken.tags         = tags;
+			lastToken.injectedTags = tags;
 			return {
-				type : 'text',            // Should match "name" above
+				type : 'mustacheInjectInline',            // Should match "name" above
 				raw  : match[0],          // Text to consume from the source
 				text : ''
 			};
 		}
 	},
 	renderer(token) {
+		if(!token.originalType){
+			return;
+		}
 		token.type = token.originalType;
 		const text = this.parser.parseInline([token]);
-		const openingTag = /(<[^\s<>]+)([^\n<>]*>.*)/s.exec(text);
+		const originalTags = extractHTMLStyleTags(text);
+		const injectedTags = token.injectedTags;
+		const tags = {
+			id         : injectedTags.id || originalTags.id || null,
+			classes    : [originalTags.classes,    injectedTags.classes].join(' ').trim() || null,
+			styles     : [originalTags.styles,     injectedTags.styles].join(' ').trim()  || null,
+			attributes : Object.assign(originalTags.attributes ?? {}, injectedTags.attributes ?? {})
+		};
+		const openingTag = /(<[^\s<>]+)[^\n<>]*(>.*)/s.exec(text);
 		if(openingTag) {
-			return `${openingTag[1]} class="${token.tags}${openingTag[2]}`;
+			return `${openingTag[1]}` +
+				`${tags.classes    ? ` class="${tags.classes}"` : ''}` +
+				`${tags.id         ? ` id="${tags.id}"`         : ''}` +
+				`${tags.styles     ? ` style="${tags.styles}"`  : ''}` +
+				`${!_.isEmpty(tags.attributes) ? ` ${Object.entries(tags.attributes).map(([key, value])=>`${key}="${value}"`).join(' ')}` : ''}` +
+				`${openingTag[2]}`; // parse to turn child tokens into HTML
 		}
 		return text;
 	}
@@ -167,7 +265,7 @@ const mustacheInjectBlock = {
 		level : 'block',
 		start(src) { return src.match(/\n *{[^{\n]/m)?.index; },  // Hint to Marked.js to stop and check for a match
 		tokenizer(src, tokens) {
-			const inlineRegex = /^ *{(?=((?::(?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':{}\s]*)*))\1}/ym;
+			const inlineRegex = /^ *{(?=((?:[:=](?:"['\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"=':{}\s]*)*))\1}/ym;
 			const match = inlineRegex.exec(src);
 			if(match) {
 				const lastToken = tokens[tokens.length - 1];
@@ -175,7 +273,7 @@ const mustacheInjectBlock = {
 					return false;
 
 				lastToken.originalType = 'mustacheInjectBlock';
-				lastToken.tags         = ` ${processStyleTags(match[1])}`;
+				lastToken.injectedTags = processStyleTags(match[1]);
 				return {
 					type : 'mustacheInjectBlock', // Should match "name" above
 					raw  : match[0],              // Text to consume from the source
@@ -189,9 +287,22 @@ const mustacheInjectBlock = {
 			}
 			token.type = token.originalType;
 			const text = this.parser.parse([token]);
-			const openingTag = /(<[^\s<>]+)([^\n<>]*>.*)/s.exec(text);
+			const originalTags = extractHTMLStyleTags(text);
+			const injectedTags = token.injectedTags;
+			const tags = {
+				id         : injectedTags.id || originalTags.id || null,
+				classes    : [originalTags.classes,    injectedTags.classes].join(' ').trim() || null,
+				styles     : [originalTags.styles,     injectedTags.styles].join(' ').trim()  || null,
+				attributes : Object.assign(originalTags.attributes ?? {}, injectedTags.attributes ?? {})
+			};
+			const openingTag = /(<[^\s<>]+)[^\n<>]*(>.*)/s.exec(text);
 			if(openingTag) {
-				return `${openingTag[1]} class="${token.tags}${openingTag[2]}`;
+				return `${openingTag[1]}` +
+					`${tags.classes    ? ` class="${tags.classes}"` : ''}` +
+					`${tags.id         ? ` id="${tags.id}"`         : ''}` +
+					`${tags.styles     ? ` style="${tags.styles}"`  : ''}` +
+					`${!_.isEmpty(tags.attributes) ? ` ${Object.entries(tags.attributes).map(([key, value])=>`${key}="${value}"`).join(' ')}` : ''}` +
+					`${openingTag[2]}`; // parse to turn child tokens into HTML
 			}
 			return text;
 		}
@@ -206,25 +317,62 @@ const mustacheInjectBlock = {
 	}
 };
 
-const definitionLists = {
-	name  : 'definitionLists',
+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 definitionListsSingleLine = {
+	name  : 'definitionListsSingleLine',
 	level : 'block',
-	start(src) { return src.match(/^.*?::.*/m)?.index; },  // Hint to Marked.js to stop and check for a match
+	start(src) { return src.match(/\n[^\n]*?::[^\n]*/m)?.index; },  // Hint to Marked.js to stop and check for a match
 	tokenizer(src, tokens) {
 		const regex = /^([^\n]*?)::([^\n]*)(?:\n|$)/ym;
 		let match;
 		let endIndex = 0;
 		const definitions = [];
 		while (match = regex.exec(src)) {
-			definitions.push({
-				dt : this.lexer.inlineTokens(match[1].trim()),
-				dd : this.lexer.inlineTokens(match[2].trim())
-			});
+			const originalLine = match[0];											// This line and below to handle conflict with emojis
+			let firstLine = originalLine;											// Remove in V4 when definitionListsInline updated to
+			this.lexer.inlineTokens(firstLine.trim())					// require spaces around `::`
+				.filter((t)=>t.type == 'emoji')
+				.map((emoji)=>firstLine = firstLine.replace(emoji.raw, 'x'.repeat(emoji.raw.length)));
+
+			const newMatch = /^([^\n]*?)::([^\n]*)(?:\n|$)/ym.exec(firstLine);
+			if(newMatch) {
+				definitions.push({
+					dt : this.lexer.inlineTokens(originalLine.slice(0, newMatch[1].length).trim()),
+					dd : this.lexer.inlineTokens(originalLine.slice(newMatch[1].length + 2).trim())
+				});
+			}																									// End of emoji hack.
 			endIndex = regex.lastIndex;
 		}
 		if(definitions.length) {
 			return {
-				type : 'definitionLists',
+				type : 'definitionListsSingleLine',
 				raw  : src.slice(0, endIndex),
 				definitions
 			};
@@ -238,33 +386,321 @@ const definitionLists = {
 	}
 };
 
-Marked.use({ extensions: [mustacheSpans, mustacheDivs, mustacheInjectInline, definitionLists] });
-Marked.use(mustacheInjectBlock);
-Marked.use({ renderer: renderer, mangle: false });
-Marked.use(MarkedExtendedTables(), MarkedGFMHeadingId(), MarkedSmartypantsLite());
-
-//Fix local links in the Preview iFrame to link inside the frame
-renderer.link = function (href, title, text) {
-	let self = false;
-	if(href[0] == '#') {
-		self = true;
+const definitionListsMultiLine = {
+	name  : 'definitionListsMultiLine',
+	level : 'block',
+	start(src) { return src.match(/\n[^\n]*\n::/m)?.index; },  // Hint to Marked.js to stop and check for a match
+	tokenizer(src, tokens) {
+		const regex = /(\n?\n?(?!::)[^\n]+?(?=\n::))|\n::(.(?:.|\n)*?(?=(?:\n::)|(?:\n\n)|$))/y;
+		let match;
+		let endIndex = 0;
+		const definitions = [];
+		while (match = regex.exec(src)) {
+			if(match[1]) {
+				if(this.lexer.blockTokens(match[1].trim())[0]?.type !== 'paragraph') // DT must not be another block-level token besides <p>
+					break;
+				definitions.push({
+					dt  : this.lexer.inlineTokens(match[1].trim()),
+					dds : []
+				});
+			}
+			if(match[2] && definitions.length) {
+				definitions[definitions.length - 1].dds.push(
+					this.lexer.inlineTokens(match[2].trim().replace(/\s/g, ' '))
+				);
+			}
+			endIndex = regex.lastIndex;
+		}
+		if(definitions.length) {
+			return {
+				type : 'definitionListsMultiLine',
+				raw  : src.slice(0, endIndex),
+				definitions
+			};
+		}
+	},
+	renderer(token) {
+		let returnVal = `<dl>`;
+		token.definitions.forEach((def)=>{
+			const dds = def.dds.map((s)=>{
+				return `\n<dd>${this.parser.parseInline(s).trim()}</dd>`;
+			}).join('');
+			returnVal += `<dt>${this.parser.parseInline(def.dt)}</dt>${dds}\n`;
+		});
+		returnVal = returnVal.trim();
+		return `${returnVal}</dl>`;
 	}
-	href = cleanUrl(this.options.sanitize, this.options.baseUrl, href);
-
-	if(href === null) {
-		return text;
-	}
-	let out = `<a href="${escape(href)}"`;
-	if(title) {
-		out += ` title="${title}"`;
-	}
-	if(self) {
-		out += ' target="_self"';
-	}
-	out += `>${text}</a>`;
-	return out;
 };
 
+//v=====--------------------< Variable Handling >-------------------=====v// 242 lines
+const replaceVar = function(input, hoist=false, allowUnresolved=false) {
+	const regex = /([!$]?)\[((?!\s*\])(?:\\.|[^\[\]\\])+)\]/g;
+	const match = regex.exec(input);
+
+	const prefix = match[1];
+	const label  = match[2];
+
+	//v=====--------------------< HANDLE MATH >-------------------=====v//
+	const mathRegex = /[a-z]+\(|[+\-*/^()]/g;
+	const matches = label.split(mathRegex);
+	const mathVars = matches.filter((match)=>isNaN(match))?.map((s)=>s.trim()); // Capture any variable names
+
+	let replacedLabel = label;
+
+	if(prefix[0] == '$' && mathVars?.[0] !== label.trim())  {// If there was mathy stuff not captured, let's do math!
+		mathVars?.forEach((variable)=>{
+			const foundVar = lookupVar(variable, globalPageNumber, hoist);
+			if(foundVar && foundVar.resolved && foundVar.content && !isNaN(foundVar.content)) // Only subsitute math values if fully resolved, not empty strings, and numbers
+				replacedLabel = replacedLabel.replaceAll(variable, foundVar.content);
+		});
+
+		try {
+			return mathParser.evaluate(replacedLabel);
+		} catch (error) {
+			return undefined;		// Return undefined if invalid math result
+		}
+	}
+	//^=====--------------------< HANDLE MATH >-------------------=====^//
+
+	const foundVar = lookupVar(label, globalPageNumber, hoist);
+
+	if(!foundVar || (!foundVar.resolved && !allowUnresolved))
+		return undefined;			// Return undefined if not found, or parially-resolved vars are not allowed
+
+	//                    url or <url>            "title"    or   'title'     or  (title)
+	const linkRegex =  /^([^<\s][^\s]*|<.*?>)(?: ("(?:\\"|[^"])*"|'(?:\\'|[^'])*'|\((?:\\\(|\\\)|[^()])*\)))?$/m;
+	const linkMatch = linkRegex.exec(foundVar.content);
+
+	const href  = linkMatch ? linkMatch[1]               : null; //TODO: TRIM OFF < > IF PRESENT
+	const title = linkMatch ? linkMatch[2]?.slice(1, -1) : null;
+
+	if(!prefix[0] && href)        // Link
+		return `[${label}](${href}${title ? ` "${title}"` : ''})`;
+
+	if(prefix[0] == '!' && href)  // Image
+		return `![${label}](${href} ${title ? ` "${title}"` : ''})`;
+
+	if(prefix[0] == '$')          // Variable
+		return foundVar.content;
+};
+
+const lookupVar = function(label, index, hoist=false) {
+	while (index >= 0) {
+		if(globalVarsList[index]?.[label] !== undefined)
+			return globalVarsList[index][label];
+		index--;
+	}
+
+	if(hoist) {	//If normal lookup failed, attempt hoisting
+		index = Object.keys(globalVarsList).length; // Move index to start from last page
+		while (index >= 0) {
+			if(globalVarsList[index]?.[label] !== undefined)
+				return globalVarsList[index][label];
+			index--;
+		}
+	}
+
+	return undefined;
+};
+
+const processVariableQueue = function() {
+	let resolvedOne = true;
+	let finalLoop   = false;
+	while (resolvedOne || finalLoop) { // Loop through queue until no more variable calls can be resolved
+		resolvedOne = false;
+		for (const item of varsQueue) {
+			if(item.type == 'text')
+				continue;
+
+			if(item.type == 'varDefBlock') {
+				const regex = /[!$]?\[((?!\s*\])(?:\\.|[^\[\]\\])+)\]/g;
+				let match;
+				let resolved = true;
+				let tempContent = item.content;
+				while (match = regex.exec(item.content)) { // regex to find variable calls
+					const value = replaceVar(match[0], true);
+
+					if(value == undefined)
+						resolved = false;
+					else
+						tempContent = tempContent.replaceAll(match[0], value);
+				}
+
+				if(resolved == true || item.content != tempContent) {
+					resolvedOne = true;
+					item.content = tempContent;
+				}
+
+				globalVarsList[globalPageNumber][item.varName] = {
+					content  : item.content,
+					resolved : resolved
+				};
+
+				if(resolved)
+					item.type = 'resolved';
+			}
+
+			if(item.type == 'varCallBlock' || item.type == 'varCallInline') {
+				const value = replaceVar(item.content, true, finalLoop); // final loop will just use the best value so far
+
+				if(value == undefined)
+					continue;
+
+				resolvedOne  = true;
+				item.content = value;
+				item.type    = 'text';
+			}
+		}
+		varsQueue = varsQueue.filter((item)=>item.type !== 'resolved'); // Remove any fully-resolved variable definitions
+
+		if(finalLoop)
+			break;
+		if(!resolvedOne)
+			finalLoop   = true;
+	}
+	varsQueue = varsQueue.filter((item)=>item.type !== 'varDefBlock');
+};
+
+function MarkedVariables() {
+	return {
+		hooks : {
+			preprocess(src) {
+				const codeBlockSkip   = /^(?: {4}[^\n]+(?:\n(?: *(?:\n|$))*)?)+|^ {0,3}(`{3,}(?=[^`\n]*(?:\n|$))|~{3,})(?:[^\n]*)(?:\n|$)(?:|(?:[\s\S]*?)(?:\n|$))(?: {0,3}\2[~`]* *(?=\n|$))|`[^`]*?`/;
+				const blockDefRegex   = /^[!$]?\[((?!\s*\])(?:\\.|[^\[\]\\])+)\]:(?!\() *((?:\n? *[^\s].*)+)(?=\n+|$)/; //Matches 3, [4]:5
+				const blockCallRegex  = /^[!$]?\[((?!\s*\])(?:\\.|[^\[\]\\])+)\](?=\n|$)/;                              //Matches 6, [7]
+				const inlineDefRegex  = /([!$]?\[((?!\s*\])(?:\\.|[^\[\]\\])+)\])\(([^\n]+)\)/;                         //Matches 8, 9[10](11)
+				const inlineCallRegex =  /[!$]?\[((?!\s*\])(?:\\.|[^\[\]\\])+)\](?!\()/;                                //Matches 12, [13]
+
+				// Combine regexes and wrap in parens like so: (regex1)|(regex2)|(regex3)|(regex4)
+				const combinedRegex = new RegExp([codeBlockSkip, blockDefRegex, blockCallRegex, inlineDefRegex, inlineCallRegex].map((s)=>`(${s.source})`).join('|'), 'gm');
+
+				let lastIndex = 0;
+				let match;
+				while ((match = combinedRegex.exec(src)) !== null) {
+					// Format any matches into tokens and store
+					if(match.index > lastIndex) { // Any non-variable stuff
+						varsQueue.push(
+							{ type    : 'text',
+								varName : null,
+								content : src.slice(lastIndex, match.index)
+							});
+					}
+					if(match[1]) {
+						varsQueue.push(
+							{ type    : 'text',
+								varName : null,
+								content : match[0]
+							});
+					}
+					if(match[3]) { // Block Definition
+						const label   = match[4] ? match[4].trim().replace(/\s+/g, ' ')    : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
+						const content = match[5] ? match[5].trim().replace(/[ \t]+/g, ' ') : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
+
+						varsQueue.push(
+							{ type    : 'varDefBlock',
+								varName : label,
+								content : content
+							});
+					}
+					if(match[6]) { // Block Call
+						const label = match[7] ? match[7].trim().replace(/\s+/g, ' ') : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
+
+						varsQueue.push(
+							{ type    : 'varCallBlock',
+								varName : label,
+								content : match[0]
+							});
+					}
+					if(match[8]) { // Inline Definition
+						const label = match[10] ? match[10].trim().replace(/\s+/g, ' ') : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
+						let content = match[11] ? match[11].trim().replace(/\s+/g, ' ') : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
+
+						// In case of nested (), find the correct matching end )
+						let level = 0;
+						let i;
+						for (i = 0; i < content.length; i++) {
+							if(content[i] === '\\') {
+								i++;
+							} else if(content[i] === '(') {
+								level++;
+							} else if(content[i] === ')') {
+								level--;
+								if(level < 0)
+									break;
+							}
+						}
+						if(i > -1) {
+							combinedRegex.lastIndex = combinedRegex.lastIndex - (content.length - i);
+							content = content.slice(0, i).trim().replace(/\s+/g, ' ');
+						}
+
+						varsQueue.push(
+							{ type    : 'varDefBlock',
+								varName : label,
+								content : content
+							});
+						varsQueue.push(
+							{ type    : 'varCallInline',
+								varName : label,
+								content : match[9]
+							});
+					}
+					if(match[12]) { // Inline Call
+						const label = match[13] ? match[13].trim().replace(/\s+/g, ' ') : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
+
+						varsQueue.push(
+							{ type    : 'varCallInline',
+								varName : label,
+								content : match[0]
+							});
+					}
+					lastIndex = combinedRegex.lastIndex;
+				}
+
+				if(lastIndex < src.length) {
+					varsQueue.push(
+						{ type    : 'text',
+							varName : null,
+							content : src.slice(lastIndex)
+						});
+				}
+
+				processVariableQueue();
+
+				const output = varsQueue.map((item)=>item.content).join('');
+				varsQueue = []; // Must clear varsQueue because custom HTML renderer uses Marked.parse which will preprocess again without clearing the array
+				return output;
+			}
+		}
+	};
+};
+//^=====--------------------< Variable Handling >-------------------=====^//
+
+// Emoji options
+// To add more icon fonts, need to do these things
+// 1) Add the font file as .woff2 to themes/fonts/iconFonts folder
+// 2) Create a .less file mapping CSS class names to the font character
+// 3) Create a .js file mapping Autosuggest names to CSS class names
+// 4) Import the .less file into shared/naturalcrit/codeEditor/codeEditor.less
+// 5) Import the .less file into themes/V3/blank.style.less
+// 6) Import the .js file to shared/naturalcrit/codeEditor/autocompleteEmoji.js and add to `emojis` object
+// 7) Import the .js file here to markdown.js, and add to `emojis` object below
+const MarkedEmojiOptions = {
+	emojis : {
+		...diceFont,
+		...elderberryInn,
+		...fontAwesome,
+		...gameIcons,
+	},
+	renderer : (token)=>`<i class="${token.emoji}"></i>`
+};
+
+Marked.use(MarkedVariables());
+Marked.use({ extensions: [definitionListsMultiLine, definitionListsSingleLine, superSubScripts, mustacheSpans, mustacheDivs, mustacheInjectInline] });
+Marked.use(mustacheInjectBlock);
+Marked.use({ renderer: renderer, tokenizer: tokenizer, mangle: false });
+Marked.use(MarkedExtendedTables(), MarkedGFMHeadingId(), MarkedSmartypantsLite(), MarkedEmojis(MarkedEmojiOptions));
+
 const nonWordAndColonTest = /[^\w:]/g;
 const cleanUrl = function (sanitize, base, href) {
 	if(sanitize) {
@@ -326,24 +762,73 @@ const voidTags = new Set([
 ]);
 
 const processStyleTags = (string)=>{
-	//split tags up. quotes can only occur right after colons.
+	//split tags up. quotes can only occur right after : or =.
 	//TODO: can we simplify to just split on commas?
-	const tags = string.match(/(?:[^, ":]+|:(?:"[^"]*"|))+/g);
+	const tags = string.match(/(?:[^, ":=]+|[:=](?:"[^"]*"|))+/g);
 
-	if(!tags)	return '"';
+	const id         = _.remove(tags, (tag)=>tag.startsWith('#')).map((tag)=>tag.slice(1))[0]        || null;
+	const classes    = _.remove(tags, (tag)=>(!tag.includes(':')) && (!tag.includes('='))).join(' ') || null;
+	const attributes = _.remove(tags, (tag)=>(tag.includes('='))).map((tag)=>tag.replace(/="?([^"]*)"?/g, '="$1"'))
+		?.filter((attr)=>!attr.startsWith('class="') && !attr.startsWith('style="') && !attr.startsWith('id="'))
+		.reduce((obj, attr)=>{
+			let [key, value] = attr.split('=');
+			value = value.replace(/"/g, '');
+			obj[key] = value;
+			return obj;
+		}, {}) || null;
+	const styles     = tags?.length ? tags.map((tag)=>tag.replace(/:"?([^"]*)"?/g, ':$1;').trim()).join(' ') : null;
 
-	const id      = _.remove(tags, (tag)=>tag.startsWith('#')).map((tag)=>tag.slice(1))[0];
-	const classes = _.remove(tags, (tag)=>!tag.includes(':'));
-	const styles  = tags.map((tag)=>tag.replace(/:"?([^"]*)"?/g, ':$1;'));
-	return `${classes.join(' ')}" ${id ? `id="${id}"` : ''} ${styles.length ? `style="${styles.join(' ')}"` : ''}`;
+	return {
+		id         : id,
+		classes    : classes,
+		styles     : styles,
+		attributes : _.isEmpty(attributes) ? null : attributes
+	};
 };
 
+const extractHTMLStyleTags = (htmlString)=>{
+	const id         = htmlString.match(/id="([^"]*)"/)?.[1]    || null;
+	const classes    = htmlString.match(/class="([^"]*)"/)?.[1] || null;
+	const styles     = htmlString.match(/style="([^"]*)"/)?.[1] || null;
+	const attributes = htmlString.match(/[a-zA-Z]+="[^"]*"/g)
+		?.filter((attr)=>!attr.startsWith('class="') && !attr.startsWith('style="') && !attr.startsWith('id="'))
+		.reduce((obj, attr)=>{
+			let [key, value] = attr.split('=');
+			value = value.replace(/"/g, '');
+			obj[key] = value;
+			return obj;
+		}, {}) || null;
+
+	return {
+		id         : id,
+		classes    : classes,
+		styles     : styles,
+		attributes : _.isEmpty(attributes) ? null : attributes
+	};
+};
+
+const globalVarsList    = {};
+let varsQueue       = [];
+let globalPageNumber = 0;
+
 module.exports = {
 	marked : Marked,
-	render : (rawBrewText)=>{
+	render : (rawBrewText, pageNumber=1)=>{
+		globalVarsList[pageNumber] = {};						//Reset global links for current page, to ensure values are parsed in order
+		varsQueue              = [];						//Could move into MarkedVariables()
+		globalPageNumber        = pageNumber;
+
 		rawBrewText = rawBrewText.replace(/^\\column$/gm, `\n<div class='columnSplit'></div>\n`)
 														 .replace(/^(:+)$/gm, (match)=>`${`<div class='blank'></div>`.repeat(match.length)}\n`);
-		return Marked.parse(rawBrewText);
+		const opts = Marked.defaults;
+
+		rawBrewText = opts.hooks.preprocess(rawBrewText);
+		const tokens = Marked.lexer(rawBrewText, opts);
+
+		Marked.walkTokens(tokens, opts.walkTokens);
+
+		const html = Marked.parser(tokens, opts);
+		return opts.hooks.postprocess(html);
 	},
 
 	validate : (rawBrewText)=>{

shared/naturalcrit/nav/nav.jsx

@@ -1,4 +1,4 @@
-require('./nav.less');
+require('client/homebrew/navbar/navbar.less');
 const React = require('react');
 const { useState, useRef, useEffect } = React;
 const createClass = require('create-react-class');
@@ -47,8 +47,8 @@ const Nav = {
 				color   : null
 			};
 		},
-		handleClick : function(){
-			this.props.onClick();
+		handleClick : function(e){
+			this.props.onClick(e);
 		},
 		render : function(){
 			const classes = cx('navItem', this.props.color, this.props.className);
@@ -104,7 +104,7 @@ const Nav = {
 		});
 
 		return (
-			<div className={`navDropdownContainer ${props.className}`}
+			<div className={`navDropdownContainer ${props.className ?? ''}`}
 				ref={myRef}
 				onMouseEnter = { props.trigger.includes('hover') ? ()=>handleDropdown(true)  : undefined }
 				onMouseLeave = { props.trigger.includes('hover') ? ()=>handleDropdown(false) : undefined }

shared/naturalcrit/nav/nav.less

@@ -1,97 +0,0 @@
-@import '../styles/colors';
-@keyframes glideDropDown {
-	0%   {transform : translate(0px, -100%);
-				opacity   : 0;
-			  background-color: #333;}
-	100% {transform : translate(0px, 0px);
-				opacity   : 1;
-			  background-color: #333;}
-}
-nav{
-	background-color : #333;
-	.navContent{
-		position			  : relative;
-		display         : flex;
-		justify-content : space-between;
-		z-index         : 2;
-	}
-	.navSection{
-		display     : flex;
-		align-items : center;
-	}
-	.navLogo{
-		display         : block;
-		margin-top      : 0px;
-		margin-right    : 8px;
-		margin-left     : 8px;
-		color           : white;
-		text-decoration : none;
-		&:hover{
-			.name{ color : @orange; }
-			svg{ fill : @orange }
-		}
-		svg{
-			height       : 13px;
-			margin-right : 0.2em;
-			cursor       : pointer;
-			fill         : white;
-		}
-		span.name{
-			font-family : 'CodeLight';
-			font-size   : 15px;
-			span.crit{
-				font-family : 'CodeBold';
-			}
-			small{
-				font-family    : 'Open Sans';
-				font-size      : 0.3em;
-				font-weight    : 800;
-				text-transform : uppercase;
-			}
-		}
-	}
-	.navItem{
-		#backgroundColorsHover;
-		.animate(background-color);
-		padding          : 8px 12px;
-		cursor           : pointer;
-		background-color : #333;
-		font-size        : 10px;
-		font-weight      : 800;
-		color            : white;
-		text-decoration  : none;
-		text-transform   : uppercase;
-		line-height      : 13px;
-		i{
-			margin-left : 5px;
-			font-size   : 13px;
-			float       : right;
-		}
-	}
-	.navSection:last-child .navItem{
-		border-left : 1px solid #666;
-	}
-	.navDropdownContainer{
-		position: relative;
-		.navDropdown {
-			position : absolute;
-			top      : 28px;
-			left     : 0px;
-			z-index  : 10000;
-			width    : 100%;
-			overflow : hidden auto;
-			max-height : calc(100vh - 28px);
-			.navItem{
-				animation-name: glideDropDown;
-				animation-duration: 0.4s;
-				position         : relative;
-				display          : block;
-				width            : 100%;
-				vertical-align   : middle;
-				padding          : 8px 5px;
-				border           : 1px solid #888;
-				border-bottom    : 0;
-			}
-		}
-	}
-}

shared/naturalcrit/splitPane/splitPane.jsx

@@ -1,7 +1,6 @@
 require('./splitPane.less');
 const React = require('react');
 const createClass = require('create-react-class');
-const _ = require('lodash');
 const cx = require('classnames');
 
 const SplitPane = createClass({
@@ -24,6 +23,9 @@ const SplitPane = createClass({
 		};
 	},
 
+	pane1 : React.createRef(null),
+	pane2 : React.createRef(null),
+
 	componentDidMount : function() {
 		const dividerPos = window.localStorage.getItem(this.props.storageKey);
 		if(dividerPos){
@@ -137,7 +139,6 @@ const SplitPane = createClass({
 	render : function(){
 		return <div className='splitPane' onPointerMove={this.handleMove} onPointerUp={this.handleUp}>
 			<Pane
-				ref='pane1'
 				width={this.state.currentDividerPos}
 			>
 				{React.cloneElement(this.props.children[0], {
@@ -147,7 +148,7 @@ const SplitPane = createClass({
 				})}
 			</Pane>
 			{this.renderDivider()}
-			<Pane ref='pane2' isDragging={this.state.isDragging}>{this.props.children[1]}</Pane>
+			<Pane isDragging={this.state.isDragging}>{this.props.children[1]}</Pane>
 		</div>;
 	}
 });

tests/markdown/definition-lists.test.js

@@ -0,0 +1,91 @@
+/* eslint-disable max-lines */
+
+const Markdown = require('naturalcrit/markdown.js');
+
+describe('Inline Definition Lists', ()=>{
+	test('No Term 1 Definition', function() {
+		const source = ':: My First Definition\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt></dt><dd>My First Definition</dd>\n</dl>');
+	});
+
+	test('Single Definition Term', function() {
+		const source = 'My term :: My First Definition\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>My term</dt><dd>My First Definition</dd>\n</dl>');
+	});
+
+	test('Multiple Definition Terms', function() {
+		const source = 'Term 1::Definition of Term 1\nTerm 2::Definition of Term 2\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt><dd>Definition of Term 1</dd>\n<dt>Term 2</dt><dd>Definition of Term 2</dd>\n</dl>');
+	});
+});
+
+describe('Multiline Definition Lists', ()=>{
+	test('Single Term, Single Definition', function() {
+		const source = 'Term 1\n::Definition 1\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt>\n<dd>Definition 1</dd></dl>');
+	});
+
+	test('Single Term, Plural Definitions', function() {
+		const source = 'Term 1\n::Definition 1\n::Definition 2\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt>\n<dd>Definition 1</dd>\n<dd>Definition 2</dd></dl>');
+	});
+
+	test('Multiple Term, Single Definitions', function() {
+		const source = 'Term 1\n::Definition 1\n\nTerm 2\n::Definition 1\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt>\n<dd>Definition 1</dd>\n<dt>Term 2</dt>\n<dd>Definition 1</dd></dl>');
+	});
+
+	test('Multiple Term, Plural Definitions', function() {
+		const source = 'Term 1\n::Definition 1\n::Definition 2\n\nTerm 2\n::Definition 1\n::Definition 2\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt>\n<dd>Definition 1</dd>\n<dd>Definition 2</dd>\n<dt>Term 2</dt>\n<dd>Definition 1</dd>\n<dd>Definition 2</dd></dl>');
+	});
+
+	test('Single Term, Single multi-line definition', function() {
+		const source = 'Term 1\n::Definition 1\nand more and\nmore and more\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt>\n<dd>Definition 1 and more and more and more</dd></dl>');
+	});
+
+	test('Single Term, Plural multi-line definitions', function() {
+		const source = 'Term 1\n::Definition 1\nand more and more\n::Definition 2\nand more\nand more\n::Definition 3\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt>\n<dd>Definition 1 and more and more</dd>\n<dd>Definition 2 and more and more</dd>\n<dd>Definition 3</dd></dl>');
+	});
+
+	test('Multiple Term, Single multi-line definition', function() {
+		const source = 'Term 1\n::Definition 1\nand more and more\n\nTerm 2\n::Definition 1\n::Definition 2\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt>\n<dd>Definition 1 and more and more</dd>\n<dt>Term 2</dt>\n<dd>Definition 1</dd>\n<dd>Definition 2</dd></dl>');
+	});
+
+	test('Multiple Term, Single multi-line definition, followed by an inline dl', function() {
+		const source = 'Term 1\n::Definition 1\nand more and more\n\nTerm 2\n::Definition 1\n::Definition 2\n\n::Inline Definition (no term)';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt>\n<dd>Definition 1 and more and more</dd>\n<dt>Term 2</dt>\n<dd>Definition 1</dd>\n<dd>Definition 2</dd></dl><dl><dt></dt><dd>Inline Definition (no term)</dd>\n</dl>');
+	});
+
+	test('Multiple Term, Single multi-line definition, followed by paragraph', function() {
+		const source = 'Term 1\n::Definition 1\nand more and more\n\nTerm 2\n::Definition 1\n::Definition 2\n\nParagraph';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt>\n<dd>Definition 1 and more and more</dd>\n<dt>Term 2</dt>\n<dd>Definition 1</dd>\n<dd>Definition 2</dd></dl><p>Paragraph</p>');
+	});
+
+	test('Block Token cannot be the Term of a multi-line definition', function() {
+		const source = '## Header\n::Definition 1 of a single-line DL\n::Definition 1 of another single-line DL';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<h2 id="header">Header</h2>\n<dl><dt></dt><dd>Definition 1 of a single-line DL</dd>\n<dt></dt><dd>Definition 1 of another single-line DL</dd>\n</dl>');
+	});
+
+	test('Inline DL has priority over Multiline', function() {
+		const source = 'Term 1 :: Inline definition 1\n:: Inline definition 2 (no DT)';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt><dd>Inline definition 1</dd>\n<dt></dt><dd>Inline definition 2 (no DT)</dd>\n</dl>');
+	});
+});

tests/markdown/emojis.test.js

@@ -0,0 +1,58 @@
+const Markdown = require('naturalcrit/markdown.js');
+const dedent = require('dedent-tabs').default;
+
+// Marked.js adds line returns after closing tags on some default tokens.
+// This removes those line returns for comparison sake.
+String.prototype.trimReturns = function(){
+	return this.replace(/\r?\n|\r/g, '');
+};
+
+const emoji = 'df_d12_2';
+
+describe(`When emojis/icons are active`, ()=>{
+	it('when a word is between two colons (:word:), and a matching emoji exists, it is rendered as an emoji', function() {
+		const source = `:${emoji}:`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p><i class="df d12-2"></i></p>`);
+	});
+
+	it('when a word is between two colons (:word:), and no matching emoji exists, it is not parsed', function() {
+		const source = `:invalid:`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>:invalid:</p>`);
+	});
+
+	it('two valid emojis with no whitespace are prioritized over definition lists', function() {
+		const source = `:${emoji}::${emoji}:`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p><i class="df d12-2"></i><i class="df d12-2"></i></p>`);
+	});
+
+	it('definition lists that are not also part of an emoji can coexist with normal emojis', function() {
+		const source = `definition :: term ${emoji}::${emoji}:`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<dl><dt>definition</dt><dd>term df_d12_2:<i class="df d12-2"></i></dd></dl>`);
+	});
+
+	it('A valid emoji is compatible with curly injectors', function() {
+		const source = `:${emoji}:{color:blue,myClass}`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p><i class="df d12-2 myClass" style="color:blue;"></i></p>`);
+	});
+
+	it('Emojis are not parsed inside of curly span CSS blocks', function() {
+		const source = `{{color:${emoji} text}}`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<span class="inline-block" style="color:df_d12_2;">text</span>`);
+	});
+
+	it('Emojis are not parsed inside of curly div CSS blocks', function() {
+		const source = dedent`{{color:${emoji}
+													text
+													}}`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block" style="color:df_d12_2;"><p>text</p></div>`);
+	});
+
+	// another test of the editor to confirm an autocomplete menu opens
+});

tests/markdown/mustache-syntax.test.js

@@ -13,209 +13,229 @@ String.prototype.trimReturns = function(){
 // Remove the `.failing()` method once you have fixed the issue.
 
 describe('Inline: When using the Inline syntax {{ }}', ()=>{
-	it.failing('Renders a mustache span with text only', function() {
+	it('Renders a mustache span with text only', function() {
 		const source = '{{ text}}';
 		const rendered = Markdown.render(source);
-		// FIXME: adds extra \s after class names
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block">text</span>');
 	});
 
-	it.failing('Renders a mustache span with text only, but with spaces', function() {
+	it('Renders a mustache span with text only, but with spaces', function() {
 		const source = '{{ this is a text}}';
 		const rendered = Markdown.render(source);
-		// FIXME: adds extra \s after class names
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block">this is a text</span>');
 	});
 
-	it.failing('Renders an empty mustache span', function() {
+	it('Renders an empty mustache span', function() {
 		const source = '{{}}';
 		const rendered = Markdown.render(source);
-		// FIXME: adds extra \s after class names
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block"></span>');
 	});
 
-	it.failing('Renders a mustache span with just a space', function() {
+	it('Renders a mustache span with just a space', function() {
 		const source = '{{ }}';
 		const rendered = Markdown.render(source);
-		// FIXME: adds extra \s after class names
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block"></span>');
 	});
 
-	it.failing('Renders a mustache span with a few spaces only', function() {
+	it('Renders a mustache span with a few spaces only', function() {
 		const source = '{{     }}';
 		const rendered = Markdown.render(source);
-		// FIXME: adds extra \s after class names
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block"></span>');
 	});
 
-	it.failing('Renders a mustache span with text and class', function() {
+	it('Renders a mustache span with text and class', function() {
 		const source = '{{my-class text}}';
 		const rendered = Markdown.render(source);
-		// FIXME: adds two extra \s before closing `>` in opening tag.
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block my-class">text</span>');
 	});
 
-	it.failing('Renders a mustache span with text and two classes', function() {
+	it('Renders a mustache span with text and two classes', function() {
 		const source = '{{my-class,my-class2 text}}';
 		const rendered = Markdown.render(source);
-		// FIXME: adds two extra \s before closing `>` in opening tag.
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block my-class my-class2">text</span>');
 	});
 
-	it.failing('Renders a mustache span with text with spaces and class', function() {
+	it('Renders a mustache span with text with spaces and class', function() {
 		const source = '{{my-class this is a text}}';
 		const rendered = Markdown.render(source);
-		// FIXME: adds two extra \s before closing `>` in opening tag
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block my-class">this is a text</span>');
 	});
 
-	it.failing('Renders a mustache span with text and id', function() {
+	it('Renders a mustache span with text and id', function() {
 		const source = '{{#my-span text}}';
 		const rendered = Markdown.render(source);
-		// FIXME: adds extra \s before closing `>` in opening tag, and another after class names
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" id="my-span">text</span>');
 	});
 
-	it.failing('Renders a mustache span with text and two ids', function() {
+	it('Renders a mustache span with text and two ids', function() {
 		const source = '{{#my-span,#my-favorite-span text}}';
 		const rendered = Markdown.render(source);
-		// FIXME: adds extra \s before closing `>` in opening tag, and another after class names
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" id="my-span">text</span>');
 	});
 
-	it.failing('Renders a mustache span with text and css property', function() {
+	it('Renders a mustache span with text and css property', function() {
 		const source = '{{color:red text}}';
 		const rendered = Markdown.render(source);
-		// FIXME: adds extra \s after class names
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" style="color:red;">text</span>');
 	});
 
-	it.failing('Renders a mustache span with text and two css properties', function() {
+	it('Renders a mustache span with text and two css properties', function() {
 		const source = '{{color:red,padding:5px text}}';
 		const rendered = Markdown.render(source);
-		// FIXME: adds extra \s after class names
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" style="color:red; padding:5px;">text</span>');
 	});
 
-	it.failing('Renders a mustache span with text and css property which contains quotes', function() {
+	it('Renders a mustache span with text and css property which contains quotes', function() {
 		const source = '{{font-family:"trebuchet ms" text}}';
 		const rendered = Markdown.render(source);
-		// FIXME: adds extra \s after class names
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" style="font-family:trebuchet ms;">text</span>');
 	});
 
-	it.failing('Renders a mustache span with text and two css properties which contains quotes', function() {
+	it('Renders a mustache span with text and two css properties which contains quotes', function() {
 		const source = '{{font-family:"trebuchet ms",padding:"5px 10px" text}}';
 		const rendered = Markdown.render(source);
-		// FIXME: adds extra \s after class names
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" style="font-family:trebuchet ms; padding:5px 10px;">text</span>');
 	});
 
 
-	it.failing('Renders a mustache span with text with quotes and css property which contains quotes', function() {
+	it('Renders a mustache span with text with quotes and css property which contains double quotes', function() {
 		const source = '{{font-family:"trebuchet ms" text "with quotes"}}';
 		const rendered = Markdown.render(source);
-		// FIXME: adds extra \s after class names
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" style="font-family:trebuchet ms;">text “with quotes”</span>');
 	});
 
+
+	it('Renders a mustache span with text with quotes and css property which contains double and simple quotes', function() {
+		const source = `{{--stringVariable:"'string'" text "with quotes"}}`;
+		const rendered = Markdown.render(source);
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<span class="inline-block" style="--stringVariable:'string';">text “with quotes”</span>`);
+	});
+
+
 	it('Renders a mustache span with text, id, class and a couple of css properties', function() {
 		const source = '{{pen,#author,color:orange,font-family:"trebuchet ms" text}}';
 		const rendered = Markdown.render(source);
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block pen" id="author" style="color:orange; font-family:trebuchet ms;">text</span>');
 	});
+
+	it('Renders a span with added attributes', function() {
+		const source = 'Text and {{pen,#author,color:orange,font-family:"trebuchet ms",a="b and c",d=e, text}} and more text!';
+		const rendered = Markdown.render(source);
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>Text and <span class="inline-block pen" id="author" style="color:orange; font-family:trebuchet ms;" a="b and c" d="e">text</span> and more text!</p>\n');
+	});
 });
 
 //  BLOCK SYNTAX
 
 describe(`Block: When using the Block syntax {{tags\\ntext\\n}}`, ()=>{
-	it.failing('Renders a div with text only', function() {
+	it('Renders a div with text only', function() {
 		const source = dedent`{{
-		text
-		}}`;
+													text
+													}}`;
 		const rendered = Markdown.render(source).trimReturns();
-		// FIXME: adds extra \s after class names
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block"><p>text</p></div>`);
 	});
 
-	it.failing('Renders an empty div', function() {
+	it('Renders an empty div', function() {
 		const source = dedent`{{
 
-		}}`;
+													}}`;
 		const rendered = Markdown.render(source).trimReturns();
-		// FIXME: adds extra \s after class names
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block"></div>`);
 	});
 
 	it('Renders a single paragraph with opening and closing brackets', function() {
 		const source = dedent`{{
-		}}`;
+													}}`;
 		const rendered = Markdown.render(source).trimReturns();
-		// this actually renders in HB as '{{ }}'...
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>{{}}</p>`);
 	});
 
-	it.failing('Renders a div with a single class', function() {
+	it('Renders a div with a single class', function() {
 		const source = dedent`{{cat
 
-		}}`;
+													}}`;
 		const rendered = Markdown.render(source).trimReturns();
-		// FIXME: adds two extra \s before closing `>` in opening tag
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block cat"></div>`);
 	});
 
-	it.failing('Renders a div with a single class and text', function() {
+	it('Renders a div with a single class and text', function() {
 		const source = dedent`{{cat
-		Sample text.
-		}}`;
+													Sample text.
+													}}`;
 		const rendered = Markdown.render(source).trimReturns();
-		// FIXME: adds two extra \s before closing `>` in opening tag
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block cat"><p>Sample text.</p></div>`);
 	});
 
-	it.failing('Renders a div with two classes and text', function() {
+	it('Renders a div with two classes and text', function() {
 		const source = dedent`{{cat,dog
-		Sample text.
-		}}`;
+													Sample text.
+													}}`;
 		const rendered = Markdown.render(source).trimReturns();
-		// FIXME: adds two extra \s before closing `>` in opening tag
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block cat dog"><p>Sample text.</p></div>`);
 	});
 
-	it.failing('Renders a div with a style and text', function() {
+	it('Renders a div with a style and text', function() {
 		const source = dedent`{{color:red
-		Sample text.
-		}}`;
+													Sample text.
+													}}`;
 		const rendered = Markdown.render(source).trimReturns();
-		// FIXME: adds two extra \s before closing `>` in opening tag
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block" style="color:red;"><p>Sample text.</p></div>`);
 	});
 
-	it.failing('Renders a div with a class, style and text', function() {
-		const source = dedent`{{cat,color:red
-		Sample text.
-		}}`;
+	it('Renders a div with a style that has a string variable, and text', function() {
+		const source = dedent`{{--stringVariable:"'string'"
+													Sample text.
+													}}`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block" style="--stringVariable:'string';"><p>Sample text.</p></div>`);
+	});
+
+	it('Renders a div with a style that has a string variable, and text', function() {
+		const source = dedent`{{--stringVariable:"'string'"
+													Sample text.
+													}}`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block" style="--stringVariable:'string';"><p>Sample text.</p></div>`);
+	});
+
+	it('Renders a div with a class, style and text', function() {
+		const source = dedent`{{cat,color:red
+													Sample text.
+													}}`;
 		const rendered = Markdown.render(source).trimReturns();
-		// FIXME: adds extra \s after the class attribute
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block cat" style="color:red;"><p>Sample text.</p></div>`);
 	});
 
 	it('Renders a div with an ID, class, style and text (different order)', function() {
 		const source = dedent`{{color:red,cat,#dog
-		Sample text.
-		}}`;
+													Sample text.
+													}}`;
 		const rendered = Markdown.render(source).trimReturns();
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block cat" id="dog" style="color:red;"><p>Sample text.</p></div>`);
 	});
 
-	it.failing('Renders a div with a single ID', function() {
+	it('Renders a div with a single ID', function() {
 		const source = dedent`{{#cat,#dog
-		Sample text.
-		}}`;
+													Sample text.
+													}}`;
 		const rendered = Markdown.render(source).trimReturns();
-		// FIXME: adds extra \s before closing `>` in opening tag, and another after class names
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block" id="cat"><p>Sample text.</p></div>`);
 	});
+
+	it('Renders a div with an ID, class, style and text, and a variable assignment', function() {
+		const source = dedent`{{color:red,cat,#dog,a="b and c",d="e"
+													Sample text.
+													}}`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class=\"block cat\" id=\"dog\" style=\"color:red;\" a=\"b and c\" d=\"e\"><p>Sample text.</p></div>`);
+	});
+
+	it('Renders a div with added attributes', function() {
+		const source = '{{pen,#author,color:orange,font-family:"trebuchet ms",a="b and c",d=e\nText and text and more text!\n}}\n';
+		const rendered = Markdown.render(source);
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<div class="block pen" id="author" style="color:orange; font-family:trebuchet ms;" a="b and c" d="e"><p>Text and text and more text!</p>\n</div>');
+	});
 });
 
 // MUSTACHE INJECTION SYNTAX
@@ -223,97 +243,199 @@ describe(`Block: When using the Block syntax {{tags\\ntext\\n}}`, ()=>{
 describe('Injection: When an injection tag follows an element', ()=>{
 	// FIXME: Most of these fail because injections currently replace attributes, rather than append to.  Or just minor extra whitespace issues.
 	describe('and that element is an inline-block', ()=>{
-		it.failing('Renders a span "text" with no injection', function() {
+		it('Renders a span "text" with no injection', function() {
 			const source = '{{ text}}{}';
 			const rendered = Markdown.render(source);
 			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block">text</span>');
 		});
 
-		it.failing('Renders a span "text" with injected Class name', function() {
+		it('Renders a span "text" with injected Class name', function() {
 			const source = '{{ text}}{ClassName}';
 			const rendered = Markdown.render(source);
 			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block ClassName">text</span>');
 		});
 
-		it.failing('Renders a span "text" with injected style', function() {
+		it('Renders a span "text" with injected attribute', function() {
+			const source = '{{ text}}{a="b and c"}';
+			const rendered = Markdown.render(source);
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" a="b and c">text</span>');
+		});
+
+		it('Renders a span "text" with injected style', function() {
 			const source = '{{ text}}{color:red}';
 			const rendered = Markdown.render(source);
 			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" style="color:red;">text</span>');
 		});
 
-		it.failing('Renders a span "text" with two injected styles', function() {
+		it('Renders a span "text" with injected style using a string variable', function() {
+			const source = `{{ text}}{--stringVariable:"'string'"}`;
+			const rendered = Markdown.render(source);
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<span class="inline-block" style="--stringVariable:'string';">text</span>`);
+		});
+
+		it('Renders a span "text" with two injected styles', function() {
 			const source = '{{ text}}{color:red,background:blue}';
 			const rendered = Markdown.render(source);
 			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" style="color:red; background:blue;">text</span>');
 		});
 
-		it.failing('Renders an emphasis element with injected Class name', function() {
+		it('Renders a span "text" with its own ID, overwritten with an injected ID', function() {
+			const source = '{{#oldId text}}{#newId}';
+			const rendered = Markdown.render(source);
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" id="newId">text</span>');
+		});
+
+		it('Renders a span "text" with its own attributes, overwritten with an injected attribute, plus a new one', function() {
+			const source = '{{attrA="old",attrB="old" text}}{attrA="new",attrC="new"}';
+			const rendered = Markdown.render(source);
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" attrA="new" attrB="old" attrC="new">text</span>');
+		});
+
+		it('Renders a span "text" with its own attributes, overwritten with an injected attribute, ignoring "class", "style", and "id"', function() {
+			const source = '{{attrA="old",attrB="old" text}}{attrA="new",attrC="new",class="new",style="new",id="new"}';
+			const rendered = Markdown.render(source);
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" attrA="new" attrB="old" attrC="new">text</span>');
+		});
+
+		it('Renders a span "text" with its own styles, appended with injected styles', function() {
+			const source = '{{color:blue,height:10px text}}{width:10px,color:red}';
+			const rendered = Markdown.render(source);
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" style="color:blue; height:10px; width:10px; color:red;">text</span>');
+		});
+
+		it('Renders a span "text" with its own classes, appended with injected classes', function() {
+			const source = '{{classA,classB text}}{classA,classC}';
+			const rendered = Markdown.render(source);
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block classA classB classA classC">text</span>');
+		});
+
+		it('Renders an emphasis element with injected Class name', function() {
 			const source = '*emphasis*{big}';
 			const rendered = Markdown.render(source).trimReturns();
 			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p><em class="big">emphasis</em></p>');
 		});
 
-		it.failing('Renders a code element with injected style', function() {
+		it('Renders a code element with injected style', function() {
 			const source = '`code`{background:gray}';
 			const rendered = Markdown.render(source).trimReturns();
 			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p><code style="background:gray;">code</code></p>');
 		});
 
-		it.failing('Renders an image element with injected style', function() {
+		it('Renders an image element with injected style', function() {
 			const source = '![alt text](http://i.imgur.com/hMna6G0.png){position:absolute}';
 			const rendered = Markdown.render(source).trimReturns();
-			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p><img src="http://i.imgur.com/hMna6G0.png" alt="homebrew mug" style="position:absolute;"></p>');
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p><img style="position:absolute;" src="http://i.imgur.com/hMna6G0.png" alt="alt text"></p>');
 		});
 
-		it.failing('Renders an element modified by only the first of two consecutive injections', function() {
+		it('Renders an element modified by only the first of two consecutive injections', function() {
 			const source = '{{ text}}{color:red}{background:blue}';
 			const rendered = Markdown.render(source).trimReturns();
 			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p><span class="inline-block" style="color:red;">text</span>{background:blue}</p>');
 		});
+
+		it('Renders an image with added attributes', function() {
+			const source = `![homebrew mug](https://i.imgur.com/hMna6G0.png) {position:absolute,bottom:20px,left:130px,width:220px,a="b and c",d=e}`;
+			const rendered = Markdown.render(source).trimReturns();
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p><img style="position:absolute; bottom:20px; left:130px; width:220px;" src="https://i.imgur.com/hMna6G0.png" alt="homebrew mug" a="b and c" d="e"></p>`);
+		});
 	});
 
 	describe('and that element is a block', ()=>{
-		it.failing('renders a div "text" with no injection', function() {
+		it('renders a div "text" with no injection', function() {
 			const source = '{{\ntext\n}}\n{}';
 			const rendered = Markdown.render(source).trimReturns();
 			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<div class="block"><p>text</p></div>');
 		});
 
-		it.failing('renders a div "text" with injected Class name', function() {
+		it('renders a div "text" with injected Class name', function() {
 			const source = '{{\ntext\n}}\n{ClassName}';
 			const rendered = Markdown.render(source).trimReturns();
 			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<div class="block ClassName"><p>text</p></div>');
 		});
 
-		it.failing('renders a div "text" with injected style', function() {
+		it('renders a div "text" with injected style', function() {
 			const source = '{{\ntext\n}}\n{color:red}';
 			const rendered = Markdown.render(source).trimReturns();
 			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<div class="block" style="color:red;"><p>text</p></div>');
 		});
 
-		it.failing('renders a div "text" with two injected styles', function() {
+		it('renders a div "text" with two injected styles', function() {
 			const source = dedent`{{
-			text
-			}}
-			{color:red,background:blue}`;
+														text
+														}}
+														{color:red,background:blue}`;
 			const rendered = Markdown.render(source).trimReturns();
-			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<div class="block" style="color:red; background:blue;"><p>text</p></div>');
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block" style="color:red; background:blue;"><p>text</p></div>`);
 		});
 
-		it.failing('renders an h2 header "text" with injected class name', function() {
+		it('renders a div "text" with injected variable string', function() {
+			const source = dedent`{{
+														text
+														}}
+														{--stringVariable:"'string'"}`;
+			const rendered = Markdown.render(source).trimReturns();
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block" style="--stringVariable:'string';"><p>text</p></div>`);
+		});
+
+		it('Renders a span "text" with its own ID, overwritten with an injected ID', function() {
+			const source = dedent`{{#oldId
+														text
+														}}
+														{#newId}`;
+			const rendered = Markdown.render(source).trimReturns();
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<div class="block" id="newId"><p>text</p></div>');
+		});
+
+		it('Renders a span "text" with its own attributes, overwritten with an injected attribute, plus a new one', function() {
+			const source = dedent`{{attrA="old",attrB="old"
+														text
+														}}
+														{attrA="new",attrC="new"}`;
+			const rendered = Markdown.render(source).trimReturns();
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<div class="block" attrA="new" attrB="old" attrC="new"><p>text</p></div>');
+		});
+
+		it('Renders a span "text" with its own attributes, overwritten with an injected attribute, ignoring "class", "style", and "id"', function() {
+			const source = dedent`{{attrA="old",attrB="old"
+														text
+														}}
+														{attrA="new",attrC="new",class="new",style="new",id="new"}`;
+			const rendered = Markdown.render(source).trimReturns();
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<div class="block" attrA="new" attrB="old" attrC="new"><p>text</p></div>');
+		});
+
+		it('Renders a span "text" with its own styles, appended with injected styles', function() {
+			const source = dedent`{{color:blue,height:10px
+														text
+														}}
+														{width:10px,color:red}`;
+			const rendered = Markdown.render(source).trimReturns();
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<div class="block" style="color:blue; height:10px; width:10px; color:red;"><p>text</p></div>');
+		});
+
+		it('Renders a span "text" with its own classes, appended with injected classes', function() {
+			const source = dedent`{{classA,classB
+														text
+														}}
+														{classA,classC}`;
+			const rendered = Markdown.render(source).trimReturns();
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<div class="block classA classB classA classC"><p>text</p></div>');
+		});
+
+		it('renders an h2 header "text" with injected class name', function() {
 			const source = dedent`## text
-			{ClassName}`;
+														{ClassName}`;
 			const rendered = Markdown.render(source).trimReturns();
-			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<h2 class="ClassName">text</h2>');
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<h2 class="ClassName" id="text">text</h2>');
 		});
 
-		it.failing('renders a table with injected class name', function() {
+		it('renders a table with injected class name', function() {
 			const source = dedent`| Experience Points | Level |
-			|:------------------|:-----:|
-			| 0                 | 1     |
-			| 300               | 2     |
+														|:------------------|:-----:|
+														| 0                 | 1     |
+														| 300               | 2     |
 
-			{ClassName}`;
+														{ClassName}`;
 			const rendered = Markdown.render(source).trimReturns();
 			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<table class="ClassName"><thead><tr><th align=left>Experience Points</th><th align=center>Level</th></tr></thead><tbody><tr><td align=left>0</td><td align=center>1</td></tr><tr><td align=left>300</td><td align=center>2</td></tr></tbody></table>`);
 		});
@@ -329,23 +451,23 @@ describe('Injection: When an injection tag follows an element', ()=>{
 		// 	expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`...`);   // FIXME: expect this to be injected into <ul>?  Currently injects into last <li>
 		// });
 
-		it.failing('renders an h2 header "text" with injected class name, and "secondInjection" as regular text on the next line.', function() {
+		it('renders an h2 header "text" with injected class name, and "secondInjection" as regular text on the next line.', function() {
 			const source = dedent`## text
 			{ClassName}
 			{secondInjection}`;
 			const rendered = Markdown.render(source).trimReturns();
-			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<h2 class="ClassName">text</h2><p>{secondInjection}</p>');
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<h2 class="ClassName" id="text">text</h2><p>{secondInjection}</p>');
 		});
 
-		it.failing('renders a div nested into another div, the inner with class=innerDiv and the other class=outerDiv', function() {
+		it('renders a div nested into another div, the inner with class=innerDiv and the other class=outerDiv', function() {
 			const source = dedent`{{
-			outer text
-			{{
-			inner text
-			}}
-			{innerDiv}
-			}}
-			{outerDiv}`;
+														outer text
+														{{
+														inner text
+														}}
+														{innerDiv}
+														}}
+														{outerDiv}`;
 			const rendered = Markdown.render(source).trimReturns();
 			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<div class="block outerDiv"><p>outer text</p><div class="block innerDiv"><p>inner text</p></div></div>');
 		});

tests/markdown/variables.test.js

@@ -0,0 +1,373 @@
+/* eslint-disable max-lines */
+
+const dedent = require('dedent-tabs').default;
+const Markdown = require('naturalcrit/markdown.js');
+
+// Marked.js adds line returns after closing tags on some default tokens.
+// This removes those line returns for comparison sake.
+String.prototype.trimReturns = function(){
+	return this.replace(/\r?\n|\r/g, '').trim();
+};
+
+renderAllPages = function(pages){
+	const outputs = [];
+	pages.forEach((page, index)=>{
+		const output = Markdown.render(page, index);
+		outputs.push(output);
+	});
+
+	return outputs;
+};
+
+// Adding `.failing()` method to `describe` or `it` will make failing tests "pass" as long as they continue to fail.
+// Remove the `.failing()` method once you have fixed the issue.
+
+describe('Block-level variables', ()=>{
+	it('Handles variable assignment and recall with simple text', function() {
+		const source = dedent`
+			[var]: string
+
+			$[var]
+		`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>string</p>');
+	});
+
+	it('Handles variable assignment and recall with multiline string', function() {
+		const source = dedent`
+			[var]: string
+			across multiple
+			lines
+
+			$[var]`;
+		const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>string across multiple lines</p>');
+	});
+
+	it('Handles variable assignment and recall with tables', function() {
+		const source = dedent`
+			[var]:
+			##### Title
+			| H1 | H2 | 
+			|:---|:--:|
+			| A  | B  |
+			| C  | D  |
+			
+			$[var]`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
+			<h5 id="title">Title</h5>
+			<table><thead><tr><th align=left>H1</th>
+			<th align=center>H2</th>
+			</tr></thead><tbody><tr><td align=left>A</td>
+			<td align=center>B</td>
+			</tr><tr><td align=left>C</td>
+			<td align=center>D</td>
+			</tr></tbody></table>`.trimReturns());
+	});
+
+	it('Hoists undefined variables', function() {
+		const source = dedent`
+			$[var]
+
+			[var]: string`;
+		const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>string</p>');
+	});
+
+	it('Hoists last instance of variable', function() {
+		const source = dedent`
+			$[var]
+
+			[var]: string
+
+			[var]: new string`;
+		const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>new string</p>');
+	});
+
+	it('Handles complex hoisting', function() {
+		const source = dedent`
+			$[titleAndName]: $[title] $[fullName]
+
+			$[title]: Mr.
+
+			$[fullName]: $[firstName] $[lastName]
+
+			[firstName]: Bob
+
+			Welcome, $[titleAndName]!
+
+			[lastName]: Jacob
+
+			[lastName]: $[lastName]son
+			`;
+		const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>Welcome, Mr. Bob Jacobson!</p>');
+	});
+
+	it('Handles variable reassignment', function() {
+		const source = dedent`
+			[var]: one
+
+			$[var]
+
+			[var]: two
+
+			$[var]
+			`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>one</p><p>two</p>'.trimReturns());
+	});
+
+	it('Handles variable reassignment with hoisting', function() {
+		const source = dedent`
+			$[var]
+		
+			[var]: one
+
+			$[var]
+
+			[var]: two
+
+			$[var]
+			`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>two</p><p>one</p><p>two</p>'.trimReturns());
+	});
+
+	it('Ignores undefined variables that can\'t be hoisted', function() {
+		const source = dedent`
+			$[var](My name is $[first] $[last])
+
+			$[last]: Jones
+			`;
+		const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>My name is $[first] Jones</p>`.trimReturns());
+	});
+});
+
+describe('Inline-level variables', ()=>{
+	it('Handles variable assignment and recall with simple text', function() {
+		const source = dedent`
+			$[var](string)
+
+			$[var]
+		`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>string</p><p>string</p>');
+	});
+
+	it('Hoists undefined variables when possible', function() {
+		const source = dedent`
+			$[var](My name is $[name] Jones)
+
+			[name]: Bob`;
+		const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>My name is Bob Jones</p>');
+	});
+
+	it('Hoists last instance of variable', function() {
+		const source = dedent`
+			$[var](My name is $[name] Jones)
+
+			$[name](Bob)
+
+			[name]: Bill`;
+		const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>My name is Bill Jones</p> <p>Bob</p>`.trimReturns());
+	});
+
+	it('Only captures nested parens if balanced', function() {
+		const source = dedent`
+			$[var1](A variable (with nested parens) inside)
+
+			$[var1]
+
+			$[var2](A variable ) with unbalanced parens)
+
+			$[var2]`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
+		<p>A variable (with nested parens) inside</p>
+		<p>A variable (with nested parens) inside</p>
+		<p>A variable with unbalanced parens)</p>
+		<p>A variable</p>
+		`.trimReturns());
+	});
+});
+
+describe('Math', ()=>{
+	it('Handles simple math using numbers only', function() {
+		const source = dedent`
+			$[1 + 3 * 5 - (1 / 4)]
+		`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>15.75</p>');
+	});
+
+	it('Handles round function', function() {
+		const source = dedent`
+			$[round(1/4)]`;
+		const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>0</p>');
+	});
+
+	it('Handles floor function', function() {
+		const source = dedent`
+			$[floor(0.6)]`;
+		const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>0</p>');
+	});
+
+	it('Handles ceil function', function() {
+		const source = dedent`
+			$[ceil(0.2)]`;
+		const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>1</p>');
+	});
+
+	it('Handles nested functions', function() {
+		const source = dedent`
+			$[ceil(floor(round(0.6)))]`;
+		const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>1</p>');
+	});
+
+	it('Handles simple math with variables', function() {
+		const source = dedent`
+			$[num1]: 5
+
+			$[num2]: 4
+
+			Answer is $[answer]($[1 + 3 * num1 - (1 / num2)]).
+		`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>Answer is 15.75.</p>');
+	});
+
+	it('Handles variable incrementing', function() {
+		const source = dedent`
+			$[num1]: 5
+
+			Increment num1 to get $[num1]($[num1 + 1]) and again to $[num1]($[num1 + 1]).
+		`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>Increment num1 to get 6 and again to 7.</p>');
+	});
+});
+
+describe('Code blocks', ()=>{
+	it('Ignores all variables in fenced code blocks', function() {
+		const source = dedent`
+		  \`\`\`
+			[var]: string
+
+			$[var]
+
+			$[var](new string)
+			\`\`\`
+		`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
+		 <pre><code>
+		 [var]: string
+		 
+		 $[var]
+		 
+		 $[var](new string)
+		 </code></pre>`.trimReturns());
+	});
+
+	it('Ignores all variables in indented code blocks', function() {
+		const source = dedent`
+			test
+
+			    [var]: string
+
+			    $[var]
+
+			    $[var](new string)
+		`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
+		 <p>test</p>
+
+		 <pre><code>
+		 [var]: string
+		 
+		 $[var]
+		 
+		 $[var](new string)
+		 </code></pre>`.trimReturns());
+	});
+
+	it('Ignores all variables in inline code blocks', function() {
+		const source = '[var](Hello) `[link](url)`. This `[var] does not work`';
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
+			<p><a href="Hello">var</a> <code>[link](url)</code>. This <code>[var] does not work</code></p>`.trimReturns());
+	});
+});
+
+describe('Normal Links and Images', ()=>{
+	it('Renders normal images', function() {
+		const source = `![alt text](url)`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
+			<p><img src="url" alt="alt text"></p>`.trimReturns());
+	});
+
+	it('Renders normal images with a title', function() {
+		const source = 'An image ![alt text](url "and title")!';
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
+			<p>An image <img src="url" alt="alt text" title="and title">!</p>`.trimReturns());
+	});
+
+	it('Applies curly injectors to images', function() {
+		const source = `![alt text](url){width:100px}`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
+			<p><img style="width:100px;" src="url" alt="alt text"></p>`.trimReturns());
+	});
+
+	it('Renders normal links', function() {
+		const source = 'A Link to my [website](url)!';
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
+		<p>A Link to my <a href="url">website</a>!</p>`.trimReturns());
+	});
+
+	it('Renders normal links with a title', function() {
+		const source = 'A Link to my [website](url "and title")!';
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
+		<p>A Link to my <a href="url" title="and title">website</a>!</p>`.trimReturns());
+	});
+});
+
+describe('Cross-page variables', ()=>{
+	it('Handles variable assignment and recall across pages', function() {
+		const source0 = `[var]: string`;
+		const source1 = `$[var]`;
+		const rendered = renderAllPages([source0, source1]).join('\n\\page\n').trimReturns();
+		expect(rendered, `Input:\n${[source0, source1].join('\n\\page\n')}`, { showPrefix: false }).toBe('\\page<p>string</p>');
+	});
+
+	it('Handles hoisting across pages', function() {
+		const source0 = `$[var]`;
+		const source1 = `[var]: string`;
+		renderAllPages([source0, source1]).join('\n\\page\n').trimReturns();	//Requires one full render of document before hoisting is picked up
+		const rendered = renderAllPages([source0, source1]).join('\n\\page\n').trimReturns();
+		expect(rendered, `Input:\n${[source0, source1].join('\n\\page\n')}`, { showPrefix: false }).toBe('<p>string</p>\\page');
+	});
+
+	it('Handles reassignment and hoisting across pages', function() {
+		const source0 = `$[var]\n\n[var]: one\n\n$[var]`;
+		const source1 = `[var]: two\n\n$[var]`;
+		renderAllPages([source0, source1]).join('\n\\page\n').trimReturns();	//Requires one full render of document before hoisting is picked up
+		const rendered = renderAllPages([source0, source1]).join('\n\\page\n').trimReturns();
+		expect(rendered, `Input:\n${[source0, source1].join('\n\\page\n')}`, { showPrefix: false }).toBe('<p>two</p><p>one</p>\\page<p>two</p>');
+	});
+});

themes/Legacy/5ePHB/style.less

@@ -40,7 +40,7 @@ body {
 	-webkit-column-gap   : 1cm;
 	-moz-column-gap      : 1cm;
 }
-.phb{
+.phb, .page{
 	.useColumns();
 	counter-increment : phb-page-numbers;
 	position          : relative;
@@ -59,6 +59,9 @@ body {
 	page-break-before : always;
 	page-break-after  : always;
 	contain           : size;
+}
+
+.phb{
 	//*****************************
 	// *            BASE
 	// *****************************/

themes/V3/5ePHB/snippets.js

@@ -21,9 +21,43 @@ module.exports = [
 		view      : 'text',
 		snippets  : [
 			{
-				name : 'Table of Contents',
-				icon : 'fas fa-book',
-				gen  : TableOfContentsGen
+				name         : 'Table of Contents',
+				icon         : 'fas fa-book',
+				gen          : TableOfContentsGen,
+				experimental : true,
+				subsnippets  : [
+					{
+						name         : 'Table of Contents',
+						icon         : 'fas fa-book',
+						gen          : TableOfContentsGen,
+						experimental : true
+					},
+					{
+						name : 'Include in ToC up to H3',
+						icon : 'fas fa-dice-three',
+						gen  : dedent `\n{{tocDepthH3
+							}}\n`,
+
+					},
+					{
+						name : 'Include in ToC up to H4',
+						icon : 'fas fa-dice-four',
+						gen  : dedent `\n{{tocDepthH4
+							}}\n`,
+					},
+					{
+						name : 'Include in ToC up to H5',
+						icon : 'fas fa-dice-five',
+						gen  : dedent `\n{{tocDepthH5
+							}}\n`,
+					},
+					{
+						name : 'Include in ToC up to H6',
+						icon : 'fas fa-dice-six',
+						gen  : dedent `\n{{tocDepthH6
+							}}\n`,
+					}
+				]
 			},
 			{
 				name         : 'Index',

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

@@ -42,8 +42,8 @@ module.exports = function(classname){
 
 		#### Equipment
 		You start with the following equipment, in addition to the equipment granted by your background:
-		- *(a)* a martial weapon and a shield or *(b)* two martial weapons
-		- *(a)* five javelins or *(b)* any simple melee weapon
+		- (*a*) a martial weapon and a shield or (*b*) two martial weapons
+		- (*a*) five javelins or (*b*) any simple melee weapon
 		- ${_.sample(['10 lint fluffs', '1 button', 'a cherished lost sock'])}
 		`;
 };

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

@@ -149,8 +149,6 @@ module.exports = {
 			![](/assets/naturalCritLogoWhite.svg)
 
 			Homebrewery.Naturalcrit.com
-			}}
-
-			\page`;
+			}}`;
 	}
 };

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

@@ -171,7 +171,7 @@ module.exports = {
 			**Condition Immunities** :: ${genList(['groggy', 'swagged', 'weak-kneed', 'buzzed', 'groovy', 'melancholy', 'drunk'], 3)}
 			**Senses**               :: darkvision 60 ft., passive Perception ${_.random(3, 20)}
 			**Languages**            :: ${genList(['Common', 'Pottymouth', 'Gibberish', 'Latin', 'Jive'], 2)}
-			**Challenge**            :: ${_.random(0, 15)} (${_.random(10, 10000)} XP)
+			**Challenge**            :: ${_.random(0, 15)} (${_.random(10, 10000)} XP) {{bonus **Proficiency Bonus** +${_.random(2, 6)}}}
 			___
 			${_.times(_.random(genLines, genLines + 2), function(){return genAbilities();}).join('\n:\n')}
 			:

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

@@ -1,47 +1,47 @@
-const _ = require("lodash");
+const _ = require('lodash');
 
 const quotes = [
-  "The sword glinted in the dim light, its edges keen and deadly. As the adventurer reached for it, he couldn't help but feel a surge of excitement mixed with fear. This was no ordinary blade.",
-  "The dragon's roar shook the ground beneath their feet, and the brave knight stood tall, his sword at the ready. He knew that this would be the battle of his life, but he was determined to emerge victorious.",
-  "The wizard's laboratory was a sight to behold, filled with bubbling cauldrons, ancient tomes, and strange artifacts from distant lands. As the apprentice gazed around in wonder, she knew that she was about to embark on a journey unlike any other.",
-  "The tavern was packed with rowdy patrons, their voices raised in song and laughter. The bard took center stage, strumming his lute and launching into a tale of adventure and heroism that had the crowd hanging on his every word.",
-  "The thief crept through the shadows, his eyes scanning the room for any sign of danger. He knew that one false move could mean the difference between success and failure, and he was determined to come out on top.",
-  "The elf queen stood atop her castle walls, surveying the kingdom below with a mix of pride and sadness. She knew that the coming war would be brutal, but she was determined to protect her people at all costs.",
-  "The necromancer's tower loomed in the distance, its dark spires piercing the sky. As the adventurers approached, they could feel the chill of death emanating from within",
-  "The ranger moved through the forest like a shadow, his senses attuned to every sound and movement around him. He knew that danger lurked behind every tree, but he was ready for whatever came his way.",
-  "The paladin knelt before the altar, his hands clasped in prayer. He knew that his faith would be tested in the days ahead, but he was ready to face whatever trials lay in store for him.",
-  "The druid communed with the spirits of nature, his mind merging with the trees, the animals, and the very earth itself. He knew that his power came with a great responsibility, and he was determined to use it for the greater good.",
+	'The sword glinted in the dim light, its edges keen and deadly. As the adventurer reached for it, he couldn\'t help but feel a surge of excitement mixed with fear. This was no ordinary blade.',
+	'The dragon\'s roar shook the ground beneath their feet, and the brave knight stood tall, his sword at the ready. He knew that this would be the battle of his life, but he was determined to emerge victorious.',
+	'The wizard\'s laboratory was a sight to behold, filled with bubbling cauldrons, ancient tomes, and strange artifacts from distant lands. As the apprentice gazed around in wonder, she knew that she was about to embark on a journey unlike any other.',
+	'The tavern was packed with rowdy patrons, their voices raised in song and laughter. The bard took center stage, strumming his lute and launching into a tale of adventure and heroism that had the crowd hanging on his every word.',
+	'The thief crept through the shadows, his eyes scanning the room for any sign of danger. He knew that one false move could mean the difference between success and failure, and he was determined to come out on top.',
+	'The elf queen stood atop her castle walls, surveying the kingdom below with a mix of pride and sadness. She knew that the coming war would be brutal, but she was determined to protect her people at all costs.',
+	'The necromancer\'s tower loomed in the distance, its dark spires piercing the sky. As the adventurers approached, they could feel the chill of death emanating from within',
+	'The ranger moved through the forest like a shadow, his senses attuned to every sound and movement around him. He knew that danger lurked behind every tree, but he was ready for whatever came his way.',
+	'The paladin knelt before the altar, his hands clasped in prayer. He knew that his faith would be tested in the days ahead, but he was ready to face whatever trials lay in store for him.',
+	'The druid communed with the spirits of nature, his mind merging with the trees, the animals, and the very earth itself. He knew that his power came with a great responsibility, and he was determined to use it for the greater good.',
 ];
 
 const authors = [
-    "Unknown",
-    "James Wyatt",
-    "Eolande Blackwood",
-    "Ragnar Ironheart",
-    "Lyra Nightshade",
-    "Valtorius Darkstar",
-    "Isadora Fireheart",
-    "Theron Shadowbane",
-    "Lirien Starweaver",
-    "Drogathar Bonecrusher",
-    "Kaelen Frostblade",
+	'Unknown',
+	'James Wyatt',
+	'Eolande Blackwood',
+	'Ragnar Ironheart',
+	'Lyra Nightshade',
+	'Valtorius Darkstar',
+	'Isadora Fireheart',
+	'Theron Shadowbane',
+	'Lirien Starweaver',
+	'Drogathar Bonecrusher',
+	'Kaelen Frostblade',
 ];
 
 const books = [
-    "The Blade of Destiny",
-    "Dragonfire and Steel",
-    "The Bard's Tale",
-    "Darkness Rising",
-    "The Sacred Quest",
-    "Shadows in the Forest",
-    "The Starweaver Chronicles",
-    "Beneath the Bones",
-    "Moonlit Magic",
-    "Frost and Fury",
+	'The Blade of Destiny',
+	'Dragonfire and Steel',
+	'The Bard\'s Tale',
+	'Darkness Rising',
+	'The Sacred Quest',
+	'Shadows in the Forest',
+	'The Starweaver Chronicles',
+	'Beneath the Bones',
+	'Moonlit Magic',
+	'Frost and Fury',
 
 ];
-module.exports = () => {
-  return `
+module.exports = ()=>{
+	return `
 {{quote
 ${_.sample(quotes)}
 

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

@@ -2,83 +2,74 @@ const _ = require('lodash');
 const dedent = require('dedent-tabs').default;
 
 const getTOC = (pages)=>{
-	const add1 = (title, page)=>{
-		res.push({
-			title    : title,
-			page     : page + 1,
-			children : []
-		});
-	};
-	const add2 = (title, page)=>{
-		if(!_.last(res)) add1(null, page);
-		_.last(res).children.push({
-			title    : title,
-			page     : page + 1,
-			children : []
-		});
-	};
-	const add3 = (title, page)=>{
-		if(!_.last(res)) add1(null, page);
-		if(!_.last(_.last(res).children)) add2(null, page);
-		_.last(_.last(res).children).children.push({
-			title    : title,
-			page     : page + 1,
-			children : []
-		});
+
+	const recursiveAdd = (title, page, targetDepth, child, curDepth=0)=>{
+		if(curDepth > 5) return; // Something went wrong.
+		if(curDepth == targetDepth) {
+			child.push({
+				title    : title,
+				page     : page + 1,
+				children : []
+			});
+		} else {
+			if(child.length == 0) {
+				child.push({
+					title    : null,
+					page     : page + 1,
+					children : []
+				});
+			}
+			recursiveAdd(title, page, targetDepth, _.last(child).children, curDepth+1,);
+		}
 	};
 
 	const res = [];
-	_.each(pages, (page, pageNum)=>{
-		if(!page.includes("{{frontCover}}") && !page.includes("{{insideCover}}") && !page.includes("{{partCover}}") && !page.includes("{{backCover}}")) {
-			const lines = page.split('\n');
-			_.each(lines, (line)=>{
-				if(_.startsWith(line, '# ')){
-					const title = line.replace('# ', '');
-					add1(title, pageNum);
-				}
-				if(_.startsWith(line, '## ')){
-					const title = line.replace('## ', '');
-					add2(title, pageNum);
-				}
-				if(_.startsWith(line, '### ')){
-					const title = line.replace('### ', '');
-					add3(title, pageNum);
-				}
-			});
+
+	const iframe = document.getElementById('BrewRenderer');
+	const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
+	const headings = iframeDocument.querySelectorAll('h1, h2, h3, h4, h5, h6');
+	const headerDepth = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'];
+
+	_.each(headings, (heading)=>{
+		const onPage = parseInt(heading.closest('.page').id?.replace(/^p/, ''));
+		const ToCExclude = getComputedStyle(heading).getPropertyValue('--TOC');
+
+		if(ToCExclude != 'exclude') {
+			recursiveAdd(heading.innerText.trim(), onPage, headerDepth.indexOf(heading.tagName), res);
 		}
 	});
 	return res;
 };
 
+
+const ToCIterate = (entries, curDepth=0)=>{
+	const levelPad = ['- ###', '  - ####', '    - ', '      - ', '        - ', '          - '];
+	const toc = [];
+	if(entries.title !== null){
+		toc.push(`${levelPad[curDepth]} [{{ ${entries.title}}}{{ ${entries.page}}}](#p${entries.page})`);
+	}
+	if(entries.children.length) {
+		_.each(entries.children, (entry, idx)=>{
+			const children = ToCIterate(entry, entry.title == null ? curDepth : curDepth+1);
+			if(children.length) {
+				toc.push(...children);
+			}
+		});
+	}
+	return toc;
+};
+
 module.exports = function(props){
 	const pages = props.brew.text.split('\\page');
 	const TOC = getTOC(pages);
 	const markdown = _.reduce(TOC, (r, g1, idx1)=>{
-		if(g1.title !== null) {
-			r.push(`- ### [{{ ${g1.title}}}{{ ${g1.page}}}](#p${g1.page})`);
-		}
-		if(g1.children.length){
-			_.each(g1.children, (g2, idx2)=>{
-				if(g2.title !== null) {
-					r.push(`  - #### [{{ ${g2.title}}}{{ ${g2.page}}}](#p${g2.page})`);
-				}
-				if(g2.children.length){
-					_.each(g2.children, (g3, idx3)=>{
-						if(g2.title !== null) {
-							r.push(`    - [{{ ${g3.title}}}{{ ${g3.page}}}](#p${g3.page})`);
-						} else { // Don't over-indent if no level-2 parent entry
-							r.push(`  - [{{ ${g3.title}}}{{ ${g3.page}}}](#p${g3.page})`);
-						}
-					});
-				}
-			});
-		}
+		r.push(ToCIterate(g1).join('\n'));
 		return r;
 	}, []).join('\n');
 
 	return dedent`
 		{{toc,wide
-		# Table Of Contents
+		# Contents
 
 		${markdown}
 		}}

themes/V3/5ePHB/style.less

@@ -1,4 +1,3 @@
-@import (less) './themes/fonts/5e/fonts.less';
 @import (less) './themes/assets/assets.less';
 
 :root {
@@ -14,16 +13,13 @@
 	--HB_Color_Footnotes             : #C9AD6A; // Gold
 }
 
-@page { margin : 0; }
-body { counter-reset : phb-page-numbers; }
-* { -webkit-print-color-adjust : exact; }
 .useSansSerif() {
-	font-family : "ScalySansRemake";
+	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; }
+	em { font-style : italic; }
 	strong {
 		font-weight    : 800;
 		letter-spacing : -0.02em;
@@ -42,55 +38,31 @@ body { counter-reset : phb-page-numbers; }
 	-webkit-column-gap   : 0.9cm;
 	-moz-column-gap      : 0.9cm;
 }
-.columnWrapper {
-	column-gap        : inherit;
-	max-height        : 100%;
-	column-span       : all;
-	columns           : inherit;
-}
 .page {
 	.useColumns();
-	position          : relative;
-	z-index           : 15;
-	box-sizing        : border-box;
-	width             : 215.9mm;
-	height            : 279.4mm;
-	padding           : 1.4cm 1.9cm 1.7cm;
-	overflow          : hidden;
-	font-family       : "BookInsanityRemake";
-	font-size         : 0.34cm;
-	counter-increment : phb-page-numbers;
-	background-color  : var(--HB_Color_Background);
-	background-image  : @backgroundImage;
-	text-rendering    : optimizeLegibility;
-	page-break-before : always;
-	page-break-after  : always;
+	font-family      : 'BookInsanityRemake';
+	font-size        : 0.34cm;
+	background-image : @backgroundImage;
 }
-//*****************************
+// *****************************
 // *            BASE
-	// *****************************/
+// *****************************/
 
 .page {
 	p {
-		display       : block;
-		line-height   : 1.25em;
-		overflow-wrap : break-word;		//TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS
-		& + * { margin-top : 0.325cm; }
+		line-height : 1.25em;
+		& + * { margin-top : 0.325cm; }  //TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS
 		& + p { margin-top : 0; }
 	}
 	ul {
-		padding-left        : 1.4em;
-		margin-bottom       : 0.8em;
-		line-height         : 1.25em;
-		list-style-position : outside;
-		list-style-type     : disc;
+		padding-left  : 1.4em;
+		margin-bottom : 0.8em;
+		line-height   : 1.25em;
 	}
 	ol {
-		padding-left        : 1.4em;
-		margin-bottom       : 0.8em;
-		line-height         : 1.25em;
-		list-style-position : outside;
-		list-style-type     : decimal;
+		padding-left  : 1.4em;
+		margin-bottom : 0.8em;
+		line-height   : 1.25em;
 	}
 	//Indents after p or lists
 	p + p, ul + p, ol + p { text-indent : 1em; }
@@ -99,24 +71,12 @@ body { counter-reset : phb-page-numbers; }
 		font-weight    : bold;
 		letter-spacing : -0.02em;
 	}
-	em { font-style : italic; }
-	sup {
-		font-size      : smaller;
-		line-height    : 0;
-		vertical-align : super;
-	}
-	sub {
-		font-size      : smaller;
-		line-height    : 0;
-		vertical-align : sub;
-	}
-	//*****************************
+	// *****************************
 	// *           HEADERS
 	// *****************************/
 	h1,h2,h3,h4 {
-		font-family   : "MrEavesRemake";
-		font-weight   : 800;
-		color         : var(--HB_Color_HeaderText);
+		font-family : 'MrEavesRemake';
+		color       : var(--HB_Color_HeaderText);
 	}
 	h1 {
 		margin-bottom       : 0.18cm; //Margin-bottom only because this is WIDE
@@ -132,7 +92,7 @@ body { counter-reset : phb-page-numbers; }
 			margin-top              : -0.3cm;
 			margin-bottom           : -20px;
 			margin-left             : -40px;
-			font-family             : "SolberaImitationRemake";
+			font-family             : 'SolberaImitationRemake';
 			font-size               : 3.5cm;
 			line-height             : 1em;
 			color                   : rgba(0, 0, 0, 0);
@@ -145,8 +105,8 @@ body { counter-reset : phb-page-numbers; }
 	h2 {
 		//margin-top    : 0px; //Font is misaligned. Shift up slightly
 		//margin-bottom : 0.05cm;
-		font-size     : 0.75cm;
-		line-height   : 0.988em; //Font is misaligned. Shift up slightly
+		font-size   : 0.75cm;
+		line-height : 0.988em; //Font is misaligned. Shift up slightly
 	}
 	h3 {
 		//margin-top    : -0.1cm; //Font is misaligned. Shift up slightly
@@ -162,8 +122,8 @@ body { counter-reset : phb-page-numbers; }
 	h4 {
 		//margin-top    : -0.02cm; //Font is misaligned. Shift up slightly
 		//margin-bottom : 0.02cm;
-		font-size     : 0.458cm;
-		line-height   : 0.971em; //Font is misaligned. Shift up slightly
+		font-size   : 0.458cm;
+		line-height : 0.971em; //Font is misaligned. Shift up slightly
 		& + * { margin-top : 0.09cm; }
 	}
 	* + h4 {
@@ -172,19 +132,17 @@ body { counter-reset : phb-page-numbers; }
 	h5 {
 		//margin-top    : -0.02cm; //Font is misaligned. Shift up slightly
 		//margin-bottom : 0.02cm;
-		font-family   : "ScalySansSmallCapsRemake";
-		font-size     : 0.423cm;
-		font-weight   : 900;
-		line-height   : 0.951em; //Font is misaligned. Shift up slightly
+		font-family : 'ScalySansSmallCapsRemake';
+		font-size   : 0.423cm;
+		line-height : 0.951em; //Font is misaligned. Shift up slightly
 		& + * { margin-top : 0.2cm; }
 	}
-	//*****************************
+	// *****************************
 	// *          TABLE
 	// *****************************/
 	table {
 		.useSansSerif();
-		width         : 100%;
-		line-height   : 16px;
+		line-height : 16px;
 		& + * { margin-top : 0.325cm; }
 		thead {
 			display     : table-row-group;
@@ -200,15 +158,15 @@ body { counter-reset : phb-page-numbers; }
 			tr {
 				td {
 					//padding : 0.14em 0.4em;
-					padding     : 0px 1.5px;   // Both of these are temporary, just to force
+					padding : 0px 1.5px;   // Both of these are temporary, just to force
 					//line-height : 16px;        // PDF to render at same height until Chrome 108
 				}
 				&:nth-child(odd) { background-color : var(--HB_Color_Accent); }
 			}
 		}
 	}
-	//*****************************
-	// *            	QUOTE
+	// *****************************
+	// *          QUOTE
 	// *****************************/
 	.quote {
 
@@ -241,9 +199,7 @@ body { counter-reset : phb-page-numbers; }
 		
 	}
 
-
-
-	//*****************************
+	// *****************************
 	// *            NOTE
 	// *****************************/
 	.note {
@@ -257,7 +213,7 @@ body { counter-reset : phb-page-numbers; }
 		border-image-outset : 9px 0px;
 		box-shadow          : 1px 4px 14px #888888;
 		.page :where(&) {
-			margin-top        : 9px; //Prevent top border getting cut off on colbreak
+			margin-top : 9px; //Prevent top border getting cut off on colbreak
 		}
 		& + * { margin-top : 0.45cm; }
 		h5 { font-size : 0.375cm; }
@@ -267,7 +223,7 @@ body { counter-reset : phb-page-numbers; }
 		}
 		:last-child { margin-bottom : 0; }
 	}
-	//************************************
+	// ************************************
 	// *       DESCRIPTIVE TEXT BOX
 	// ************************************/
 	.descriptive {
@@ -291,7 +247,7 @@ body { counter-reset : phb-page-numbers; }
 		}
 		:last-child { margin-bottom : 0; }
 	}
-	//*****************************
+	// *****************************
 	// *    Images Snippets
 	// *****************************/
 
@@ -299,7 +255,7 @@ body { counter-reset : phb-page-numbers; }
 	.artist {
 		position    : absolute;
 		width       : auto;
-		font-family : "WalterTurncoat";
+		font-family : 'WalterTurncoat';
 		font-size   : 0.27cm;
 		color       : var(--HB_Color_CaptionText);
 		text-align  : center;
@@ -309,7 +265,7 @@ body { counter-reset : phb-page-numbers; }
 			text-indent : unset;
 		}
 		h5 {
-			font-family : "WalterTurncoat";
+			font-family : 'WalterTurncoat';
 			font-size   : 1.3em;
 		}
 		a {
@@ -320,42 +276,10 @@ body { counter-reset : phb-page-numbers; }
 	}
 
 	/* Watermark */
-	.watermark {
-		position        : absolute;
-		top             : 0;
-		left            : 0;
-		z-index         : 500;
-		display         : grid !important;
-		place-items     : center;
-		justify-content : center;
-		width           : 100%;
-		height          : 100%;
-		font-size       : 120px;
-		color           : black;
-		text-transform  : uppercase;
-		mix-blend-mode  : overlay;
-		opacity         : 30%;
-		transform       : rotate(-45deg);
-		p { margin-bottom : none; }
-	}
+	.watermark { color : black; }
 
 	/* Watercolor */
-	[class*='watercolor'] {
-		position            : absolute;
-		z-index             : -2;
-		width               : 2000px;    /* dimensions need to be real big so the user can set */
-		height              : 2000px;    /* height or width and the image will maintain aspect ratio */
-		background-color    : var(--HB_Color_WatercolorStain);			/* default color */
-		background-size     : cover;
-		-webkit-mask-image  : var(--wc);
-		-webkit-mask-size   : contain;
-		-webkit-mask-repeat : no-repeat;
-		mask-image          : var(--wc);
-		mask-size           : contain;
-		mask-repeat         : no-repeat;
-		--wc                : @watercolor1;         /* default image */
-	}
-
+	
 	.watercolor1 { --wc : @watercolor1; }
 	.watercolor2 { --wc : @watercolor2; }
 	.watercolor3 { --wc : @watercolor3; }
@@ -369,7 +293,7 @@ body { counter-reset : phb-page-numbers; }
 	.watercolor11 { --wc : @watercolor11; }
 	.watercolor12 { --wc : @watercolor12; }
 
-	//*****************************
+	// *****************************
 	// *    MONSTER STAT BLOCK
 	// *****************************/
 	.monster {
@@ -381,7 +305,6 @@ body { counter-reset : phb-page-numbers; }
 			margin-left           : -0.16cm;
 			background-color      : var(--HB_Color_MonsterStatBackground);
 			background-image      : @monsterBlockBackground;
-			background-attachment : fixed;
 			background-blend-mode : overlay;
 			border-style          : solid;
 			border-width          : 7px 6px;
@@ -390,27 +313,24 @@ body { counter-reset : phb-page-numbers; }
 			box-shadow            : 1px 4px 14px #888888;
 		}
 
-		position          : relative;
-		padding           : 0px;
-		margin-bottom     : 0.325cm;
+		position      : relative;
+		padding       : 0px;
+		margin-bottom : 0.325cm;
 
 		//Headers
 		h2 {
-			margin        : 0;
-			font-size     : 0.62cm;
-			line-height   : 1em;
+			margin      : 0;
+			font-size   : 0.62cm;
+			line-height : 1em;
 			& + p {
 				margin-bottom : 0;
 				font-size     : 0.304cm; //Monster size and type subtext
 			}
 		}
 		h3 {
-			// margin-top     : 0.05cm;  //Font is misaligned. Shift up slightly
-			padding-bottom : 0.05cm;
-			font-family    : "ScalySansRemake";
-			font-weight    : 800;
-			font-variant   : small-caps;
-			border-bottom  : 2px solid var(--HB_Color_HeaderText);
+			font-family   : 'ScalySansSmallCapsRemake';
+			font-size     : 0.45cm;
+			border-bottom : 1.5px solid var(--HB_Color_HeaderText);
 		}
 
 		//Triangle dividers
@@ -434,6 +354,11 @@ body { counter-reset : phb-page-numbers; }
 			}
 		}
 
+		.bonus {
+			float: right;
+			padding-right: 0.5em;
+		}
+
 		// Monster Ability table
 		hr + table:first-of-type {
 			margin              : 0;
@@ -446,6 +371,8 @@ body { counter-reset : phb-page-numbers; }
 			tr { background-color : transparent; }
 			td,th { padding : 0px; }
 		}
+		//indent fix after bulleted lists
+		:is(ul,ol) + p { text-indent : 0; }
 
 		:last-child { margin-bottom : 0; }
 	}
@@ -455,10 +382,10 @@ body { counter-reset : phb-page-numbers; }
 		.useColumns(0.96, @fillMode: balance);
 	}
 
-	//*****************************
+	// *****************************
 	// *           FOOTER
 	// *****************************/
-	&:after {
+	&::after {
 		position         : absolute;
 		bottom           : 0px;
 		left             : 0px;
@@ -478,15 +405,9 @@ body { counter-reset : phb-page-numbers; }
 		}
 	}
 	.pageNumber {
-		position    : absolute;
 		right       : 2px;
 		bottom      : 22px;
-		width       : 50px;
-		font-size   : 0.9em;
 		color       : var(--HB_Color_Footnotes);
-		text-align  : center;
-		text-indent : 0;
-		&.auto::after { content : counter(phb-page-numbers); }
 	}
 	.footnote {
 		position   : absolute;
@@ -498,23 +419,18 @@ body { counter-reset : phb-page-numbers; }
 		color      : var(--HB_Color_Footnotes);
 		text-align : right;
 	}
-	//************************************
+	// ************************************
 	// *           CODE BLOCKS
 	// ************************************/
 	code {
 		padding          : 0px 4px;
-		font-family      : 'Courier New', "Courier", monospace;
-		font-size        : 0.325;
+		font-size        : 0.325cm;
 		color            : #58180D;
-		overflow-wrap    : break-word;
-		white-space      : pre-wrap;
 		background-color : #FAF7EA;
 		border-radius    : 4px;
 	}
 
 	pre code {
-		display             : inline-block;
-		width               : 100%;
 		padding             : 0.15cm;
 		margin-bottom       : 2px;
 		border-style        : solid;
@@ -528,26 +444,13 @@ body { counter-reset : phb-page-numbers; }
 		}
 		& + * { margin-top : 0.325cm; }
 	}
-	//*****************************
+	// *****************************
 	// *          EXTRAS
 	// *****************************/
 	hr {
 		margin     : 0px;
 		visibility : hidden;
 	}
-	.columnSplit {
-		visibility                 : hidden;
-		-webkit-column-break-after : always;
-		break-after                : always;
-		-moz-column-break-after    : always;
-	}
-	//Avoid breaking up
-	blockquote,table {
-		z-index                     : 15;
-		-webkit-column-break-inside : avoid;
-		page-break-inside           : avoid;
-		break-inside                : avoid;
-	}
 	//Text indent right after table
 	table + p { text-indent : 1em; }
 	// Nested lists
@@ -555,18 +458,13 @@ body { counter-reset : phb-page-numbers; }
 		margin-bottom : 0px;
 		margin-left   : 1.5em;
 	}
-	li {
-		-webkit-column-break-inside : avoid;
-		page-break-inside           : avoid;
-		break-inside                : avoid;
-	}
 }
-//*****************************
+// *****************************
 // *         SPELL LIST
 // *****************************/
 .page .spellList {
 	.useSansSerif();
-	column-count        : 2;
+	column-count : 2;
 	ul + h5 { margin-top : 15px; }
 	p, ul {
 		font-size   : 0.352cm;
@@ -584,7 +482,7 @@ body { counter-reset : phb-page-numbers; }
 	&.wide { column-count : 4; }
 }
 
-//*****************************
+// *****************************
 // *       CLASS TABLE
 // *****************************/
 .page .classTable {
@@ -631,38 +529,34 @@ body { counter-reset : phb-page-numbers; }
 	}
 	h5 + table { margin-top : 0.2cm; }
 }
-//*****************************
+// *****************************
 // *    FRONT COVER PAGE
 // *****************************/
 .page:has(.frontCover) {
 	columns    : 1;
 	text-align : center;
-	&::after { all : unset; }
+	&::after { display : none; }
 	h1 {
 		margin-top     : 1.2cm;
 		margin-bottom  : 0;
-		font-family    : "NodestoCapsCondensed";
+		font-family    : 'NodestoCapsCondensed';
 		font-size      : 2.245cm;
 		font-weight    : normal;
-		line-height    : 0.85em;
+		line-height    : 1.9cm;
 		color          : white;
 		text-shadow    : unset;
 		text-transform : uppercase;
-		filter         : drop-shadow(0 0 1.5px black) drop-shadow(0 0 0 black)
-			drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
-			drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
-			drop-shadow(0 0 0 black) drop-shadow(0 0 0 black);
+		-webkit-text-stroke: 0.2cm black;
+  		paint-order:stroke;
 	}
 	h2 {
-		font-family    : "NodestoCapsCondensed";
+		font-family    : 'NodestoCapsCondensed';
 		font-size      : 0.85cm;
 		font-weight    : normal;
 		color          : white;
 		letter-spacing : 0.1cm;
-		filter         : drop-shadow(0 0 1px black) drop-shadow(0 0 0 black)
-			drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
-			drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
-			drop-shadow(0 0 0 black) drop-shadow(0 0 0 black);
+		-webkit-text-stroke: 0.14cm black;
+  		paint-order:stroke;
 	}
 	hr {
 		position         : relative;
@@ -687,7 +581,7 @@ body { counter-reset : phb-page-numbers; }
 		height           : 1.7cm;
 		padding-top      : 0.1cm;
 		padding-left     : 1cm;
-		font-family      : "NodestoCapsCondensed";
+		font-family      : 'NodestoCapsCondensed';
 		font-size        : 1cm;
 		font-weight      : normal;
 		color            : white;
@@ -704,14 +598,12 @@ body { counter-reset : phb-page-numbers; }
 		width        : 70%;
 		margin-right : auto;
 		margin-left  : auto;
-		font-family  : "Overpass";
+		font-family  : 'Overpass';
 		font-size    : 0.496cm;
 		color        : white;
 		text-align   : center;
-		filter       : drop-shadow(0 0 0.7px black) drop-shadow(0 0 0 black)
-			drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
-			drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
-			drop-shadow(0 0 0 black) drop-shadow(0 0 0 black);
+		-webkit-text-stroke: 0.1cm black;
+  		paint-order:stroke;
 	}
 	.logo {
 		position   : absolute;
@@ -725,24 +617,24 @@ body { counter-reset : phb-page-numbers; }
 		}
 	}
 }
-//*****************************
+// *****************************
 // *    INSIDE COVER PAGE
 // *****************************/
 .page:has(.insideCover) {
 	columns    : 1;
 	text-align : center;
-	&::after { all	: unset; }
+	&::after { display	: none; }
 	h1 {
 		margin-top     : 1.2cm;
 		margin-bottom  : 0;
-		font-family    : "NodestoCapsCondensed";
+		font-family    : 'NodestoCapsCondensed';
 		font-size      : 2.1cm;
 		font-weight    : normal;
-		line-height    : 0.85em;
+		line-height    : 1.785cm;
 		text-transform : uppercase;
 	}
 	h2 {
-		font-family    : "NodestoCapsCondensed";
+		font-family    : 'NodestoCapsCondensed';
 		font-size      : 0.85cm;
 		font-weight    : normal;
 		letter-spacing : 0.5cm;
@@ -770,14 +662,14 @@ body { counter-reset : phb-page-numbers; }
 		}
 	}
 }
-//*****************************
+// *****************************
 // *      BACK COVER
 // *****************************/
 .page:has(.backCover) {
 	padding : 2.25cm 1.3cm 2cm 1.3cm;
 	color   : #FFFFFF;
 	columns : 1;
-	&::after { all : unset; }
+	&::after { display : none; }
 	.columnWrapper { width : 7.6cm; }
 	.backCover {
 		position          : absolute;
@@ -791,9 +683,9 @@ body { counter-reset : phb-page-numbers; }
 	.blank { height : 1.4em; }
 	h1 {
 		margin-bottom : 0.3cm;
-		font-family   : "NodestoCapsCondensed";
+		font-family   : 'NodestoCapsCondensed';
 		font-size     : 1.35cm;
-		line-height   : 0.95em;
+		line-height   : 1.28cm;
 		color         : #ED1C24;
 		text-align    : center;
 	}
@@ -817,9 +709,9 @@ body { counter-reset : phb-page-numbers; }
 		border           : none;
 	}
 	p {
-		font-family : "Overpass";
+		font-family : 'Overpass';
 		font-size   : 0.332cm;
-		line-height : 1.5em;
+		line-height : 0.35cm;
 	}
 	hr + p {
 		margin-top : 0.6cm;
@@ -841,21 +733,21 @@ body { counter-reset : phb-page-numbers; }
 		p {
 			position       : relative;
 			width          : 100%;
-			font-family    : "NodestoCapsWide";
+			font-family    : 'NodestoCapsWide';
 			font-size      : 0.4cm;
 			line-height    : 1em;
+			line-height    : 1.28cm;
 			color          : #FFFFFF;
 			text-align     : center;
 			text-indent    : 0;
-			letter-spacing : 0.08em;
 		}
 	}
 }
 
-//*****************************
+// *****************************
 // *      PART COVER
-	// *****************************/
-	.page:has(.partCover) {
+// *****************************/
+.page:has(.partCover) {
 	padding-top : 0;
 	text-align  : center;
 	columns     : 1;
@@ -874,7 +766,7 @@ body { counter-reset : phb-page-numbers; }
 	h1 {
 		position       : relative;
 		margin-top     : 0.4cm;
-		font-family    : "NodestoCapsCondensed";
+		font-family    : 'NodestoCapsCondensed';
 		font-size      : 2.3cm;
 		text-align     : center;
 		text-transform : uppercase;
@@ -885,15 +777,48 @@ body { counter-reset : phb-page-numbers; }
 		margin-top   : -0.7em;
 		margin-right : auto;
 		margin-left  : auto;
-		font-family  : "Overpass";
+		font-family  : 'Overpass';
 		font-size    : 0.45cm;
-		line-height  : 1.1em;
+		line-height  : 0.495cm;
 	}
 }
 
-//*****************************
+// *****************************
 // *      TABLE OF CONTENTS
 // *****************************/
+
+// Default Exclusions
+// Anything not exlcuded is included, default Headers are H1, H2, and H3.
+h4,
+h5,
+h6,
+.page:has(.frontCover), 
+.page:has(.backCover), 
+.page:has(.insideCover), 
+.monster,
+.noToC,
+.toc { --TOC: exclude; }
+
+.tocDepthH2 :is(h1, h2) {--TOC: include; }
+.tocDepthH3 :is(h1, h2, h3) {--TOC: include; }
+.tocDepthH4 :is(h1, h2, h3, h4) {--TOC: include; }
+.tocDepthH5 :is(h1, h2, h3, h4, h5) {--TOC: include; }
+.tocDepthH6 :is(h1, h2, h3, h4, h5, h6) {--TOC: include; }
+
+.tocIncludeH1 h1 {--TOC: include; }
+.tocIncludeH2 h2 {--TOC: include; }
+.tocIncludeH3 h3 {--TOC: include; }
+.tocIncludeH4 h4 {--TOC: include; }
+.tocIncludeH5 h5 {--TOC: include; }
+.tocIncludeH6 h6 {--TOC: include; }
+
+.page:has(.partCover) {
+	--TOC: exclude;
+	& h1 {
+	  --TOC: include;
+	}
+  }
+
 .page {
 	&:has(.toc)::after { display : none; }
 	.toc {
@@ -960,34 +885,25 @@ body { counter-reset : phb-page-numbers; }
 	}
 }
 
-//*****************************
+// *****************************
 // *    DEFINITION LISTS
 // *****************************/
 .page {
 	dl {
-		padding-left : 1em;
 		line-height  : 1.25em;
-		white-space  : pre-line;
-		& + * { margin-top : 0.28cm; }
+		& + * {	margin-top : 0.17cm; }
 	}
-	dl + * { margin-top : 0.17cm; }
 	p + dl { margin-top : 0.17cm; }
 	dt {
-		display      : inline;
 		margin-right : 5px;
 		margin-left  : -1em;
 	}
-	dd {
-		display     : inline;
-		margin-left : 0px;
-		text-indent : 0px;
-	}
 }
 
-//*****************************
+// *****************************
 // *         WIDE
 // *****************************/
-.page .wide { margin-bottom       : 0.325cm; }
+.page .wide { margin-bottom : 0.325cm; }
 
 .page h1 + * { margin-top : 0; }
 
@@ -1009,7 +925,7 @@ body { counter-reset : phb-page-numbers; }
 				outline        : 1px solid #000000;
 			}
 			th {
-				font-family : "BookInsanityRemake";
+				font-family : 'BookInsanityRemake';
 				font-size   : 0.45cm;
 			}
 			td { font-size : 0.7cm; }
@@ -1026,7 +942,7 @@ body { counter-reset : phb-page-numbers; }
 		}
 	}
 }
-//*****************************
+// *****************************
 // *       INDEX
 // *****************************/
 .page {

themes/V3/Blank/snippets.js

@@ -111,6 +111,21 @@ module.exports = [
 				icon : 'fas fa-code',
 				gen  : '<!-- This is a comment that will not be rendered into your brew. Hotkey (Ctrl/Cmd + /). -->'
 			},
+			{
+				name : 'Homebrewery Credit',
+				icon : 'fas fa-dice-d20',
+				gen  : function(){
+					return dedent`
+						{{homebreweryCredits
+						Made With
+						
+						{{homebreweryIcon}}
+						
+						The Homebrewery  
+						[Homebrewery.Naturalcrit.com](https://homebrewery.naturalcrit.com)
+						}}\n\n`;
+				},
+			}
 		]
 	},
 	{
@@ -289,6 +304,99 @@ module.exports = [
 			}
 		]
 	},
+	/**************** FONTS *************/
+	{
+		groupName : 'Fonts',
+		icon   	  : 'fas fa-keyboard',
+		view   	  : 'text',
+		snippets  : [
+			{
+				name : 'Open Sans',
+				icon : 'font OpenSans',
+				gen	 : dedent`{{font-family:OpenSans Dummy Text}}`
+			},
+			{
+				name : 'Code Bold',
+				icon : 'font CodeBold',
+				gen	 : dedent`{{font-family:CodeBold Dummy Text}}`
+			},
+			{
+				name : 'Code Light',
+				icon : 'font CodeLight',
+				gen	 : dedent`{{font-family:CodeLight Dummy Text}}`
+			},
+			{
+				name : 'Scaly Sans',
+				icon : 'font ScalySansRemake',
+				gen	 : dedent`{{font-family:ScalySansRemake Dummy Text}}`
+			},
+			{
+				name : 'Book Insanity',
+				icon : 'font BookInsanityRemake',
+				gen	 : dedent`{{font-family:BookInsanityRemake Dummy Text}}`
+			},
+			{
+				name : 'Mr Eaves',
+				icon : 'font MrEavesRemake',
+				gen	 : dedent`{{font-family:MrEavesRemake Dummy Text}}`
+			},
+			{
+				name : 'Solbera Imitation',
+				icon : 'font SolberaImitationRemake',
+				gen  : dedent`{{font-family:SolberaImitationRemake Dummy Text}}`
+			  },
+			  {
+				name : 'Scaly Sans Small Caps',
+				icon : 'font ScalySansSmallCapsRemake',
+				gen  : dedent`{{font-family:ScalySansSmallCapsRemake Dummy Text}}`
+			  },
+			  {
+				name : 'Walter Turncoat',
+				icon : 'font WalterTurncoat',
+				gen  : dedent`{{font-family:WalterTurncoat Dummy Text}}`
+			  },
+			  {
+				name : 'Lato',
+				icon : 'font Lato',
+				gen  : dedent`{{font-family:Lato Dummy Text}}`
+			  },
+			  {
+				name : 'Courier',
+				icon : 'font Courier',
+				gen  : dedent`{{font-family:Courier Dummy Text}}`
+			  },
+			  {
+				name : 'Nodesto Caps Condensed',
+				icon : 'font NodestoCapsCondensed',
+				gen  : dedent`{{font-family:NodestoCapsCondensed Dummy Text}}`
+			  },
+			  {
+				name : 'Overpass',
+				icon : 'font Overpass',
+				gen  : dedent`{{font-family:Overpass Dummy Text}}`
+			  },
+			  {
+				name : 'Davek',
+				icon : 'font Davek',
+				gen  : dedent`{{font-family:Davek Dummy Text}}`
+			  },
+			  {
+				name : 'Iokharic',
+				icon : 'font Iokharic',
+				gen  : dedent`{{font-family:Iokharic Dummy Text}}`
+			  },
+			  {
+				name : 'Rellanic',
+				icon : 'font Rellanic',
+				gen  : dedent`{{font-family:Rellanic Dummy Text}}`
+			  },
+			  {
+				name : 'Times New Roman',
+				icon : 'font TimesNewRoman',
+				gen  : dedent`{{font-family:"Times New Roman" Dummy Text}}`
+			  }
+		]
+	},
 
 	/**************** PAGE *************/
 

themes/V3/Blank/style.less

@@ -1,5 +1,9 @@
 @import (less) './themes/fonts/5e/fonts.less';
 @import (less) './themes/assets/assets.less';
+@import (less) './themes/fonts/iconFonts/elderberryInn.less';
+@import (less) './themes/fonts/iconFonts/diceFont.less';
+@import (less) './themes/fonts/iconFonts/gameIcons.less';
+@import (less) './themes/fonts/iconFonts/fontAwesome.less';
 
 :root {
 	//Colors
@@ -7,13 +11,9 @@
 	--HB_Color_WatercolorStain       : #000000; // Black
 }
 
-@page { margin: 0; }
-body {
-	counter-reset : phb-page-numbers;
-}
-*{
-	-webkit-print-color-adjust : exact;
-}
+@page { margin : 0; }
+body { counter-reset : page-numbers; }
+* { -webkit-print-color-adjust : exact; }
 
 //*****************************
 // *    MUSTACHE DIVS/SPANS
@@ -23,9 +23,7 @@ body {
 		break-inside      : avoid;
 		display           : inline-block;
 		width             : 100%;
-		img {
-			z-index : 0;
-		}
+		img { z-index : 0; }
 	}
 	.inline-block {
 		display     : inline-block;
@@ -33,99 +31,81 @@ body {
 	}
 }
 
-.useColumns(@multiplier : 1, @fillMode: auto){
+.useColumns(@multiplier : 1, @fillMode: auto) {
 	column-fill          : @fillMode;
 	column-count         : 2;
 }
-.columnWrapper{
+.columnWrapper {
+	column-gap        : inherit;
 	max-height        : 100%;
 	column-span       : all;
 	columns           : inherit;
-	column-gap        : inherit;
 	column-fill       : inherit;
 }
-.page{
+.page {
 	.useColumns();
-	height            : 279.4mm;
-	width             : 215.9mm;
-	padding           : 1.4cm 1.9cm 1.7cm;
-	counter-increment : phb-page-numbers;
-	background-color  : var(--HB_Color_Background);
 	position          : relative;
 	z-index           : 15;
 	box-sizing        : border-box;
+	width             : 215.9mm;
+	height            : 279.4mm;
+	padding           : 1.4cm 1.9cm 1.7cm;
 	overflow          : hidden;
+	counter-increment : page-numbers;
+	background-color  : var(--HB_Color_Background);
 	text-rendering    : optimizeLegibility;
-	page-break-before : always;
-	page-break-after  : always;
 	contain           : size;
 }
-	//*****************************
-	// *            BASE
+//*****************************
+// *            BASE
 	// *****************************/
-.page{
-	p{
-		overflow-wrap : break-word;
+.page {
+	p {
 		display       : block;
+		overflow-wrap : break-word;
 	}
-	strong{
-		font-weight : bold;
-	}
-	em{
-		font-style : italic;
-	}
-	sup{
+	strong { font-weight : bold; }
+	em { font-style : italic; }
+	sup {
+		font-size      : smaller;
+		line-height    : 0;
 		vertical-align : super;
-		font-size      : smaller;
-		line-height    : 0;
 	}
-	sub{
-		vertical-align : sub;
+	sub {
 		font-size      : smaller;
 		line-height    : 0;
+		vertical-align : sub;
 	}
 	ul {
+		padding-left        : 1.4em;
 		list-style-position : outside; //Needed for multiline list items
 		list-style-type     : disc;
-		padding-left        : 1.4em;
 	}
 	ol {
+		padding-left        : 1.4em;
 		list-style-position : outside;
 		list-style-type     : decimal;
-		padding-left        : 1.4em;
-	}
-	img{
-		z-index : -1;
 	}
+	img { z-index : -1; }
 
 	//*****************************
 	// *           HEADERS
 	// *****************************/
-	h1,h2,h3,h4,h5,h6{
+	h1,h2,h3,h4,h5,h6 {
 		font-weight  : bold;
 		line-height  : 1.2em;
 	}
-	h1{
-		font-size : 2em;
-	}
-	h2{
-		font-size : 1.5em;
-	}
-	h3{
-		font-size : 1.17em;
-	}
-	h4{
-		font-size : 1em;
-	}
-	h5{
-		font-size : 0.83em;
-	}
+	h1 { font-size : 2em; }
+	h2 { font-size : 1.5em; }
+	h3 { font-size : 1.17em; }
+	h4 { font-size : 1em; }
+	h5 { font-size : 0.83em; }
 	//*****************************
 	// *          TABLE
 	// *****************************/
-	table{
+	table {
 		width : 100%;
-		thead{
+		thead {
 			display     : table-row-group;
 			font-weight : bold;
 		}
@@ -137,42 +117,40 @@ body {
 	//************************************
 	// *           CODE BLOCKS
 	// ************************************/
-	code{
-    font-family      : "Courier New", Courier, monospace;
-		white-space      : pre-wrap;
+	code {
+		font-family      : 'Courier New', "Courier", monospace;
 		overflow-wrap    : break-word;
+		white-space      : pre-wrap;
 	}
 
-	pre code{
-		width               : 100%;
+	pre code {
 		display             : inline-block;
+		width               : 100%;
 	}
 	//*****************************
 	// *          EXTRAS
 	// *****************************/
 	.columnSplit {
+		margin-top                 : 0;
 		visibility                 : hidden;
 		-webkit-column-break-after : always;
 		break-after                : always;
 		-moz-column-break-after    : always;
-		margin-top                 : 0;
-		& + * {
-			margin-top : 0;
-		}
+		& + * { margin-top : 0; }
 	}
 	//Avoid breaking up
-	blockquote,table{
+	blockquote,table {
 		z-index                     : 15;
 		-webkit-column-break-inside : avoid;
 		page-break-inside           : avoid;
 		break-inside                : avoid;
 	}
 	// Nested lists
-	ul ul,ol ol,ul ol,ol ul{
+	ul ul,ol ol,ul ol,ol ul {
 		margin-bottom : 0px;
 		margin-left   : 1.5em;
 	}
-	li{
+	li {
 		-webkit-column-break-inside : avoid;
 		page-break-inside           : avoid;
 		break-inside                : avoid;
@@ -180,69 +158,65 @@ body {
 
 	/* Watermark */
 	.watermark {
-		display         : grid !important;
-		place-items     : center;
-		justify-content	: center;
 		position        : absolute;
-		margin          : 0;
 		top             : 0;
 		left            : 0;
+		z-index         : 500;
+		display         : grid !important;
+		place-items     : center;
+		justify-content : center;
 		width           : 100%;
 		height          : 100%;
+		margin          : 0;
 		font-size       : 120px;
-		text-transform	: uppercase;
-		mix-blend-mode  : overlay;
+		text-transform  : uppercase;
 		opacity         : 30%;
 		transform       : rotate(-45deg);
-		z-index         : 500;
-		p {
-			margin-bottom : none;
-		}
+		p { margin-bottom : none; }
 	}
 
 	/* Watercolor */
-	[class*="watercolor"] {
+	[class*='watercolor'] {
 		position            : absolute;
+		z-index             : -2;
 		width               : 2000px;    /* dimensions need to be real big so the user can set */
 		height              : 2000px;    /* height or width and the image will maintain aspect ratio */
+		background-color    : var(--HB_Color_WatercolorStain);			/* default color */
+		background-size     : cover;
 		-webkit-mask-image  : var(--wc);
 		-webkit-mask-size   : contain;
 		-webkit-mask-repeat : no-repeat;
 		mask-image          : var(--wc);
 		mask-size           : contain;
 		mask-repeat         : no-repeat;
-		background-size     : cover;
-		background-color    : var(--HB_Color_WatercolorStain);			/*default color*/
-		--wc                : @watercolor1;         /*default image*/
-		z-index             : -2;
+		--wc                : @watercolor1;         /* default image */
 	}
 
-	.watercolor1  { --wc : @watercolor1; }
-	.watercolor2  { --wc : @watercolor2; }
-	.watercolor3  { --wc : @watercolor3; }
-	.watercolor4  { --wc : @watercolor4; }
-	.watercolor5  { --wc : @watercolor5; }
-	.watercolor6  { --wc : @watercolor6; }
-	.watercolor7  { --wc : @watercolor7; }
-	.watercolor8  { --wc : @watercolor8; }
-	.watercolor9  { --wc : @watercolor9; }
+	.watercolor1 { --wc : @watercolor1; }
+	.watercolor2 { --wc : @watercolor2; }
+	.watercolor3 { --wc : @watercolor3; }
+	.watercolor4 { --wc : @watercolor4; }
+	.watercolor5 { --wc : @watercolor5; }
+	.watercolor6 { --wc : @watercolor6; }
+	.watercolor7 { --wc : @watercolor7; }
+	.watercolor8 { --wc : @watercolor8; }
+	.watercolor9 { --wc : @watercolor9; }
 	.watercolor10 { --wc : @watercolor10; }
 	.watercolor11 { --wc : @watercolor11; }
 	.watercolor12 { --wc : @watercolor12; }
 
 	/* Image Masks */
 
-	[class*="imageMask"] {
+	[class*='imageMask'] {
 		position              : absolute;
-		height                : 200%;
-		width                 : 200%;
-		left                  : 50%;
 		bottom                : 50%;
-		--rotation            : 0;
-		--revealer            : none;
-		--checkerboard        : none;
-		--scaleX              : 1;
-		--scaleY              : 1;
+		left                  : 50%;
+		z-index               : -1;
+		width                 : 200%;
+		height                : 200%;
+		background-image      : var(--checkerboard);
+		background-size       : 20px;
+		transform             : translateY(50%) translateX(-50%) rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
 		-webkit-mask-image    : var(--wc), var(--revealer);
 		-webkit-mask-repeat   : repeat-x;
 		-webkit-mask-size     : 50%; //Scale only X to fit page width, leave height at aspect ratio, designed to hang off the edge
@@ -251,61 +225,63 @@ body {
 		mask-repeat           : repeat-x;
 		mask-size             : 50%;
 		mask-position         : 50% calc(50% - var(--offset));
-		background-image      : var(--checkerboard);
-		background-size       : 20px;
-		z-index               : -1;
-		transform             : translateY(50%) translateX(-50%) rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
+		--rotation            : 0;
+		--revealer            : none;
+		--checkerboard        : none;
+		--scaleX              : 1;
+		--scaleY              : 1;
 		& > p:has(img) {
 			position   : absolute;
-			width      : 50%;
-			height     : 50%;
 			bottom     : 50%;
 			left       : 50%;
+			width      : 50%;
+			height     : 50%;
 			transform  : translateX(-50%) translateY(50%) rotate(calc(-1deg * var(--rotation))) scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)));
 		}
 		& img {
 			position : absolute;
-			display  : block;
 			bottom   : 0;
+			display  : block;
 		}
 		&.bottom {
 			--rotation : 0;
-			& img {bottom: 0;}
+			& img {bottom : 0;}
 		}
 		&.top {
 			--rotation : 180;
-			& img {top: 0;}
+			& img {top : 0;}
 		}
 		&.left {
 			--rotation : 90;
-			& img {left: 0;}
+			& img {left : 0;}
 		}
 		&.right {
 			--rotation : -90;
-			& img {right: 0;}
+			& img {right : 0;}
 		}
 		&.revealImage {
-			--revealer : linear-gradient(0deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,0.2));
-			--checkerboard : url(/assets/waterColorMasks/missingImage.png); //shows any masked regions not filled by image
+			--revealer     : linear-gradient(0deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2));
+			--checkerboard : url("/assets/waterColorMasks/missingImage.png"); //shows any masked regions not filled by image
 		}
 	}
 
 	.imageMaskEdge {
-		&1  { --wc : url(/assets/waterColorMasks/edge/0001.webp); }
-		&2  { --wc : url(/assets/waterColorMasks/edge/0002.webp); }
-		&3  { --wc : url(/assets/waterColorMasks/edge/0003.webp); }
-		&4  { --wc : url(/assets/waterColorMasks/edge/0004.webp); }
-		&5  { --wc : url(/assets/waterColorMasks/edge/0005.webp); }
-		&6  { --wc : url(/assets/waterColorMasks/edge/0006.webp); }
-		&7  { --wc : url(/assets/waterColorMasks/edge/0007.webp); }
-		&8  { --wc : url(/assets/waterColorMasks/edge/0008.webp); }
+		&1 { --wc : url("/assets/waterColorMasks/edge/0001.webp"); }
+		&2 { --wc : url("/assets/waterColorMasks/edge/0002.webp"); }
+		&3 { --wc : url("/assets/waterColorMasks/edge/0003.webp"); }
+		&4 { --wc : url("/assets/waterColorMasks/edge/0004.webp"); }
+		&5 { --wc : url("/assets/waterColorMasks/edge/0005.webp"); }
+		&6 { --wc : url("/assets/waterColorMasks/edge/0006.webp"); }
+		&7 { --wc : url("/assets/waterColorMasks/edge/0007.webp"); }
+		&8 { --wc : url("/assets/waterColorMasks/edge/0008.webp"); }
 	}
 
-	[class*="imageMaskCenter"] {
+	[class*='imageMaskCenter'] {
+		bottom                : calc(var(--offsetY));
+		left                  : calc(var(--offsetX));
 		width                 : 100%;
 		height                : 100%;
-		left                  : calc(var(--offsetX));
-		bottom                : calc(var(--offsetY));
+		transform             : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
 		-webkit-mask-image    : var(--wc), var(--revealer);
 		-webkit-mask-repeat   : no-repeat;
 		-webkit-mask-size     : 100% 100%; //Scale both dimensions to fit page size
@@ -314,48 +290,48 @@ body {
 		mask-repeat           : no-repeat;
 		mask-size             : 100% 100%; //Scale both dimensions to fit page size
 		mask-position         : 50% 50%;
-		transform             : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
 
 		& > p:has(img) {
 			position   : absolute;
-			width      : 100%;
-			height     : 100%;
 			bottom     : 0;
 			left       : 0;
+			width      : 100%;
+			height     : 100%;
 			transform  : unset;
 			transform  : scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)))
-									 rotate(calc(-1deg * var(--rotation)))
-			             translateX(calc(-1 * var(--offsetX)))
-									 translateY(calc(1 * var(--offsetY)));
+				rotate(calc(-1deg * var(--rotation)))
+				translateX(calc(-1 * var(--offsetX)))
+				translateY(calc(1 * var(--offsetY)));
 		}
 	}
 
 	.imageMaskCenter {
-		&1  { --wc : url(/assets/waterColorMasks/center/0001.webp); }
-		&2  { --wc : url(/assets/waterColorMasks/center/0002.webp); }
-		&3  { --wc : url(/assets/waterColorMasks/center/0003.webp); }
-		&4  { --wc : url(/assets/waterColorMasks/center/0004.webp); }
-		&5  { --wc : url(/assets/waterColorMasks/center/0005.webp); }
-		&6  { --wc : url(/assets/waterColorMasks/center/0006.webp); }
-		&7  { --wc : url(/assets/waterColorMasks/center/0007.webp); }
-		&8  { --wc : url(/assets/waterColorMasks/center/0008.webp); }
-		&9  { --wc : url(/assets/waterColorMasks/center/0009.webp); }
-		&10 { --wc : url(/assets/waterColorMasks/center/0010.webp); }
-		&11 { --wc : url(/assets/waterColorMasks/center/0011.webp); }
-		&12 { --wc : url(/assets/waterColorMasks/center/0012.webp); }
-		&13 { --wc : url(/assets/waterColorMasks/center/0013.webp); }
-		&14 { --wc : url(/assets/waterColorMasks/center/0014.webp); }
-		&15 { --wc : url(/assets/waterColorMasks/center/0015.webp); }
-		&16 { --wc : url(/assets/waterColorMasks/center/0016.webp); }
-		&special { --wc : url(/assets/waterColorMasks/center/special.webp); }
+		&1 { --wc : url("/assets/waterColorMasks/center/0001.webp"); }
+		&2 { --wc : url("/assets/waterColorMasks/center/0002.webp"); }
+		&3 { --wc : url("/assets/waterColorMasks/center/0003.webp"); }
+		&4 { --wc : url("/assets/waterColorMasks/center/0004.webp"); }
+		&5 { --wc : url("/assets/waterColorMasks/center/0005.webp"); }
+		&6 { --wc : url("/assets/waterColorMasks/center/0006.webp"); }
+		&7 { --wc : url("/assets/waterColorMasks/center/0007.webp"); }
+		&8 { --wc : url("/assets/waterColorMasks/center/0008.webp"); }
+		&9 { --wc : url("/assets/waterColorMasks/center/0009.webp"); }
+		&10 { --wc : url("/assets/waterColorMasks/center/0010.webp"); }
+		&11 { --wc : url("/assets/waterColorMasks/center/0011.webp"); }
+		&12 { --wc : url("/assets/waterColorMasks/center/0012.webp"); }
+		&13 { --wc : url("/assets/waterColorMasks/center/0013.webp"); }
+		&14 { --wc : url("/assets/waterColorMasks/center/0014.webp"); }
+		&15 { --wc : url("/assets/waterColorMasks/center/0015.webp"); }
+		&16 { --wc : url("/assets/waterColorMasks/center/0016.webp"); }
+		&special { --wc : url("/assets/waterColorMasks/center/special.webp"); }
 	}
 
 
-	[class*="imageMaskCorner"] {
-		height                : 200%;
-		width                 : 200%;
-		left                  : calc(-50% + var(--offsetX));
+	[class*='imageMaskCorner'] {
 		bottom                : calc(-50% + var(--offsetY));
+		left                  : calc(-50% + var(--offsetX));
+		width                 : 200%;
+		height                : 200%;
+		transform             : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
 		-webkit-mask-image    : var(--wc), var(--revealer);
 		-webkit-mask-repeat   : no-repeat;
 		-webkit-mask-size     : 100% 100%; //Scale both dimensions to fit page size
@@ -364,56 +340,55 @@ body {
 		mask-repeat           : no-repeat;
 		mask-size             : 100% 100%; //Scale both dimensions to fit page size
 		mask-position         : 50% 50%;
-		transform             : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
 		& > p:has(img) {
+			bottom     : 25%;
+			left       : 25%;
 			width      : 50%;
 			height     : 50%; //Complex transform below to handle mix of % and cm offsets
-			left       : 25%;
-			bottom     : 25%;
 			transform  : scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)))
-									 rotate(calc(-1deg * var(--rotation)))
-			             translateX(calc(-1 * var(--offsetX)))
-									 translateY(calc(1 * var(--offsetY)));
+				rotate(calc(-1deg * var(--rotation)))
+				translateX(calc(-1 * var(--offsetX)))
+				translateY(calc(1 * var(--offsetY)));
 		}
 	}
 	.imageMaskCorner {
-		&1  { --wc : url(/assets/waterColorMasks/corner/0001.webp); }
-		&2  { --wc : url(/assets/waterColorMasks/corner/0002.webp); }
-		&3  { --wc : url(/assets/waterColorMasks/corner/0003.webp); }
-		&4  { --wc : url(/assets/waterColorMasks/corner/0004.webp); }
-		&5  { --wc : url(/assets/waterColorMasks/corner/0005.webp); }
-		&6  { --wc : url(/assets/waterColorMasks/corner/0006.webp); }
-		&7  { --wc : url(/assets/waterColorMasks/corner/0007.webp); }
-		&8  { --wc : url(/assets/waterColorMasks/corner/0008.webp); }
-		&9  { --wc : url(/assets/waterColorMasks/corner/0009.webp); }
-		&10 { --wc : url(/assets/waterColorMasks/corner/0010.webp); }
-		&11 { --wc : url(/assets/waterColorMasks/corner/0011.webp); }
-		&12 { --wc : url(/assets/waterColorMasks/corner/0012.webp); }
-		&13 { --wc : url(/assets/waterColorMasks/corner/0013.webp); }
-		&14 { --wc : url(/assets/waterColorMasks/corner/0014.webp); }
-		&15 { --wc : url(/assets/waterColorMasks/corner/0015.webp); }
-		&16 { --wc : url(/assets/waterColorMasks/corner/0016.webp); }
-		&17 { --wc : url(/assets/waterColorMasks/corner/0017.webp); }
-		&18 { --wc : url(/assets/waterColorMasks/corner/0018.webp); }
-		&19 { --wc : url(/assets/waterColorMasks/corner/0019.webp); }
-		&20 { --wc : url(/assets/waterColorMasks/corner/0020.webp); }
-		&21 { --wc : url(/assets/waterColorMasks/corner/0021.webp); }
-		&22 { --wc : url(/assets/waterColorMasks/corner/0022.webp); }
-		&23 { --wc : url(/assets/waterColorMasks/corner/0023.webp); }
-		&24 { --wc : url(/assets/waterColorMasks/corner/0024.webp); }
-		&25 { --wc : url(/assets/waterColorMasks/corner/0025.webp); }
-		&26 { --wc : url(/assets/waterColorMasks/corner/0026.webp); }
-		&27 { --wc : url(/assets/waterColorMasks/corner/0027.webp); }
-		&28 { --wc : url(/assets/waterColorMasks/corner/0028.webp); }
-		&29 { --wc : url(/assets/waterColorMasks/corner/0029.webp); }
-		&30 { --wc : url(/assets/waterColorMasks/corner/0030.webp); }
-		&31 { --wc : url(/assets/waterColorMasks/corner/0031.webp); }
-		&32 { --wc : url(/assets/waterColorMasks/corner/0032.webp); }
-		&33 { --wc : url(/assets/waterColorMasks/corner/0033.webp); }
-		&34 { --wc : url(/assets/waterColorMasks/corner/0034.webp); }
-		&35 { --wc : url(/assets/waterColorMasks/corner/0035.webp); }
-		&36 { --wc : url(/assets/waterColorMasks/corner/0036.webp); }
-		&37 { --wc : url(/assets/waterColorMasks/corner/0037.webp); }
+		&1 { --wc : url("/assets/waterColorMasks/corner/0001.webp"); }
+		&2 { --wc : url("/assets/waterColorMasks/corner/0002.webp"); }
+		&3 { --wc : url("/assets/waterColorMasks/corner/0003.webp"); }
+		&4 { --wc : url("/assets/waterColorMasks/corner/0004.webp"); }
+		&5 { --wc : url("/assets/waterColorMasks/corner/0005.webp"); }
+		&6 { --wc : url("/assets/waterColorMasks/corner/0006.webp"); }
+		&7 { --wc : url("/assets/waterColorMasks/corner/0007.webp"); }
+		&8 { --wc : url("/assets/waterColorMasks/corner/0008.webp"); }
+		&9 { --wc : url("/assets/waterColorMasks/corner/0009.webp"); }
+		&10 { --wc : url("/assets/waterColorMasks/corner/0010.webp"); }
+		&11 { --wc : url("/assets/waterColorMasks/corner/0011.webp"); }
+		&12 { --wc : url("/assets/waterColorMasks/corner/0012.webp"); }
+		&13 { --wc : url("/assets/waterColorMasks/corner/0013.webp"); }
+		&14 { --wc : url("/assets/waterColorMasks/corner/0014.webp"); }
+		&15 { --wc : url("/assets/waterColorMasks/corner/0015.webp"); }
+		&16 { --wc : url("/assets/waterColorMasks/corner/0016.webp"); }
+		&17 { --wc : url("/assets/waterColorMasks/corner/0017.webp"); }
+		&18 { --wc : url("/assets/waterColorMasks/corner/0018.webp"); }
+		&19 { --wc : url("/assets/waterColorMasks/corner/0019.webp"); }
+		&20 { --wc : url("/assets/waterColorMasks/corner/0020.webp"); }
+		&21 { --wc : url("/assets/waterColorMasks/corner/0021.webp"); }
+		&22 { --wc : url("/assets/waterColorMasks/corner/0022.webp"); }
+		&23 { --wc : url("/assets/waterColorMasks/corner/0023.webp"); }
+		&24 { --wc : url("/assets/waterColorMasks/corner/0024.webp"); }
+		&25 { --wc : url("/assets/waterColorMasks/corner/0025.webp"); }
+		&26 { --wc : url("/assets/waterColorMasks/corner/0026.webp"); }
+		&27 { --wc : url("/assets/waterColorMasks/corner/0027.webp"); }
+		&28 { --wc : url("/assets/waterColorMasks/corner/0028.webp"); }
+		&29 { --wc : url("/assets/waterColorMasks/corner/0029.webp"); }
+		&30 { --wc : url("/assets/waterColorMasks/corner/0030.webp"); }
+		&31 { --wc : url("/assets/waterColorMasks/corner/0031.webp"); }
+		&32 { --wc : url("/assets/waterColorMasks/corner/0032.webp"); }
+		&33 { --wc : url("/assets/waterColorMasks/corner/0033.webp"); }
+		&34 { --wc : url("/assets/waterColorMasks/corner/0034.webp"); }
+		&35 { --wc : url("/assets/waterColorMasks/corner/0035.webp"); }
+		&36 { --wc : url("/assets/waterColorMasks/corner/0036.webp"); }
+		&37 { --wc : url("/assets/waterColorMasks/corner/0037.webp"); }
 	}
 }
 
@@ -425,16 +400,16 @@ body {
 		padding-left : 1em;
 		white-space  : pre-line;
 	}
-  dt {
-    display      : inline;
-    margin-right : 0.5ch;
+	dt {
+		display      : inline;
+		margin-right : 0.5ch;
 		margin-left  : -1em;
-  }
-  dd {
+	}
+	dd {
 		display     : inline;
 		margin-left : 0;
 		text-indent : 0;
-  }
+	}
 }
 
 //*****************************
@@ -444,9 +419,7 @@ body {
 	.blank {
 		height     : 1em;
 		margin-top : 0;
-		& + * {
-			margin-top : 0;
-		}
+		& + * { margin-top : 0; }
 	}
 }
 
@@ -454,12 +427,58 @@ body {
 // *         WIDE
 // *****************************/
 .page {
-	.wide{
+	.wide {
 		column-span         : all;
 		display             : block;
 		margin-bottom       : 1em;
-		&+* {
-			margin-top : 0;
-		}
+		& + * { margin-top : 0; }
+	}
+}
+
+//*****************************
+//*        CREDITS
+//*****************************/
+.page .homebreweryCredits {
+	p {
+		font-family    : 'NodestoCapsWide';
+		font-size      : 0.4cm;
+		line-height    : 1em;
+		text-align     : center;
+		text-indent    : 0;
+		letter-spacing : 0.08em;
+	}
+	a {
+		color           : inherit;
+		text-decoration : none;
+		&:hover { text-decoration : underline; }
+	}
+	.homebreweryIcon {
+		display          : block;
+		height           : 1.5cm;
+		margin           : 0 auto;
+		background-color : black;
+		-webkit-mask     : url("/assets/naturalCritLogoWhite.svg") center / contain no-repeat;
+		mask             : url("/assets/naturalCritLogoWhite.svg") center / contain no-repeat;
+	}
+	.homebreweryIcon.red { background-color : red; }
+	.homebreweryIcon.gold { background-image : linear-gradient(to top left, brown 22.5%, gold 40%, white 60%, gold 67.5%, brown 82.5%); }
+}
+
+//*****************************
+//*        Page Number
+//*****************************/
+.page {
+	.pageNumber {
+		position    : absolute;
+		right       : 30px;
+		bottom      : 30px;
+		width       : 50px;
+		font-size   : 0.9em;
+		text-align  : center;
+		&.auto::after { content : counter(page-numbers); }
+	}
+
+	&:nth-child(even) {
+		.pageNumber { left : 30px; }
 	}
 }

themes/V3/Journal/style.less

@@ -374,17 +374,9 @@
 	}
 	.pageNumber{
 		font-family : FrederickaTheGreat;
-		position    : absolute;
 		right       : 3cm;
 		bottom      : 1.25cm;
-		width       : 50px;
-		font-size   : 0.9em;
 		color       : var(--HB_Color_HeaderText);
-		text-align  : center;
-		text-indent : 0;
-		&.auto::after {
-			content : counter(phb-page-numbers);
-		}
 	}
 	.footnote{
 		position   : absolute;

themes/codeMirror/customEditorStyles.less

@@ -58,7 +58,7 @@
                 background-color: rgba(35,153,153,0.5);
             }
             .pageLine {
-                background-color: rgba(255,255,255,0.75);
+                background-color: rgba(255,255,255,0.5);
                 & ~ pre.CodeMirror-line {
                     color: black;
                 }
@@ -85,4 +85,4 @@
         // Future styling for themes with light backgrounds
         --dummyVar: 'currently unused';
     }
-}
+}

themes/codeMirror/customThemes/darkbrewery-v301.css

@@ -0,0 +1,129 @@
+/* Main BG color and normal text color */
+.CodeMirror {
+    background: #293134;
+    color: #91A6AA;
+}
+
+/* Brew BG */
+.brewRenderer {
+    background-color: #293134;
+}
+/* Blinking cursor */
+.CodeMirror-cursor {
+    border-left: 1px solid #e0e2e4;
+}
+
+/* HB DARK NAV START*/
+
+/* Bars at the top */
+.snippetBar {
+    background-color: #2F393C;
+    color: white;
+}
+nav {
+    background-color: #293134;
+}
+nav .navItem {
+    background-color: #293134;
+}
+/* Fix for Homebrewery custom Snippet icons */
+.snippetBar .fac {
+    filter: invert(1);
+}
+.snippetBar .snippetGroup .dropdown {
+    background-color: #2F393C;
+}
+/* HB DARK NAV END */
+
+/* Line number stuff */
+.CodeMirror-gutter-elt {
+    color: #81969A;
+}
+.CodeMirror-linenumber {
+    background-color: #293134;
+}
+.CodeMirror-gutter {
+    background-color: #293134;
+}
+/* column splits */
+.editor .codeEditor .columnSplit {
+    font-style: italic;
+    color: inherit;
+    background-color:#1f5763;
+    border-bottom: #299 solid 1px;
+}
+
+/* Colors for headings and such */
+/* ###Headings */
+.cm-s-default .cm-header {
+    color: #c51b1b;
+    -webkit-text-stroke-width: 0.1px; 
+    -webkit-text-stroke-color: #000; 
+}
+/* bold points */
+.cm-header, .cm-strong {
+    font-weight: bold;
+    color: #309dd2;
+}
+/* Link headings */
+.cm-s-default .cm-link {
+    color: #dd6300;
+}
+/* links */
+.cm-s-default .cm-string {
+    color: #aa8261;
+}
+/*@import*/
+.cm-s-default .cm-def {
+    color:#2986cc;
+}
+/* Bullets and such */
+.cm-s-default .cm-variable-2 {
+    color: #3cbf30;
+}
+/* blocks */
+.editor .codeEditor .block:not(.cm-comment) {
+    color: #e3e3e3;
+}
+/* inline blocks */
+.editor .codeEditor .inline-block {
+    color: #e3e3e3;
+}
+/* Tags (divs) */
+.cm-s-default .cm-tag {
+    color: #e3ff00;
+}
+.cm-s-default .cm-attribute {
+    color: #e3ff00;
+}
+.cm-s-default .cm-atom {
+    color:#000;
+}
+.cm-s-default .cm-qualifier{
+    color:#ee1919;
+}
+.cm-s-default .cm-comment{
+    color:#bbc700;
+}
+.cm-s-default .cm-keyword {
+    color:#c302df;
+    background-color:#b1b1b1;
+}
+.cm-s-default .cm-property.cm-error {
+    color:#c50202;
+}
+
+.CodeMirror-foldmarker {
+    color:#f0ff00;
+}
+
+/* New page  */
+.editor .codeEditor .pageLine {
+    background: #000;
+    color:#000;
+    border-bottom: 1px solid #fff;
+}
+
+.cm-s-default .cm-builtin {
+    color:#fff;
+}

themes/codeMirror/customThemes/darkvision.css

@@ -0,0 +1,121 @@
+.CodeMirror {
+	background: #0C0C0C;
+	color: #B9BDB6;
+}
+
+/* Brew BG */
+.brewRenderer {
+    background-color: #0C0C0C;
+}
+
+.cm-s-darkvision {
+    /* Blinking cursor and selection */
+    .CodeMirror-cursor {
+        border-left: 1px solid #B9BDB6;
+    }
+    .CodeMirror-selected {
+        background: #E0E8FF40;
+    }
+
+    /* Line number stuff */
+    .CodeMirror-gutter-elt {
+        color: #81969A;
+    }
+    .CodeMirror-linenumber {
+        background-color: #0C0C0C;
+    }
+    .CodeMirror-gutter {
+        background-color: #0C0C0C;
+    }
+
+    /* column splits */
+    .editor .codeEditor .columnSplit {
+        font-style: italic;
+        color: inherit;
+        background-color:#1F5763;
+        border-bottom: #299 solid 1px;
+    }
+
+    /* # headings */
+    .cm-header {
+        color: #C51B1B;
+        -webkit-text-stroke-width: 0.1px; 
+    }
+    /* bold points */
+    .cm-strong {
+        font-weight: bold;
+        color: #309DD2;
+    }
+    /* Link headings */
+    .cm-link {
+        color: #DD6300;
+    }
+    /* links */
+    .cm-string {
+        color: #5CE638;
+    }
+    /*@import*/
+    .cm-def {
+        color: #2986CC;
+    }
+    /* Bullets and such */
+    .cm-variable-2 {
+        color: #3CBF30;
+    }
+
+    /* Tags (divs) */
+    .cm-tag {
+        color: #E3FF00;
+    }
+    .cm-attribute {
+        color: #E3FF00;
+    }
+    .cm-atom {
+        color: #CF7EA9;
+    }
+    .cm-qualifier {
+        color: #EE1919;
+    }
+    .cm-comment {
+        color: #BBC700;
+    }
+    .cm-keyword {
+        color: #CC66FF;
+    }
+    .cm-property {
+        color: aqua;
+    }
+    .cm-error {
+        color: #C50202;
+    }
+    .CodeMirror-foldmarker {
+        color: #F0FF00;
+    }
+    /* New page  */
+    .cm-builtin {
+        color: #FFF;
+    }
+}
+
+.editor .codeEditor {
+    /* blocks */
+    .block:not(.cm-comment) {
+        color: magenta;
+    }    
+    /* definition lists */
+    .define.definition {
+        color: #FFAA3E;
+    }
+    .define.term {
+        color: #7290d9;
+    }
+    .define:not(.term):not(.definition) {
+        background: #333;
+    }
+    /* New page  */
+    .pageLine {
+        background: #000;
+        color: #000;
+        border-bottom: 1px solid #FFF;
+    }
+}

themes/codeMirror/editorThemes.json

@@ -15,6 +15,8 @@
 "cobalt",
 "colorforth",
 "darcula",
+"darkbrewery-v301",
+"darkvision",
 "dracula",
 "duotone-dark",
 "duotone-light",

themes/fonts/iconFonts/diceFont.js

@@ -0,0 +1,96 @@
+const diceFont = {
+	'df_f'                    : 'df F',
+	'df_f_minus'              : 'df F-minus',
+	'df_f_plus'               : 'df F-plus',
+	'df_f_zero'               : 'df F-zero',
+	'df_d10'                  : 'df d10',
+	'df_d10_1'                : 'df d10-1',
+	'df_d10_10'               : 'df d10-10',
+	'df_d10_2'                : 'df d10-2',
+	'df_d10_3'                : 'df d10-3',
+	'df_d10_4'                : 'df d10-4',
+	'df_d10_5'                : 'df d10-5',
+	'df_d10_6'                : 'df d10-6',
+	'df_d10_7'                : 'df d10-7',
+	'df_d10_8'                : 'df d10-8',
+	'df_d10_9'                : 'df d10-9',
+	'df_d12'                  : 'df d12',
+	'df_d12_1'                : 'df d12-1',
+	'df_d12_10'               : 'df d12-10',
+	'df_d12_11'               : 'df d12-11',
+	'df_d12_12'               : 'df d12-12',
+	'df_d12_2'                : 'df d12-2',
+	'df_d12_3'                : 'df d12-3',
+	'df_d12_4'                : 'df d12-4',
+	'df_d12_5'                : 'df d12-5',
+	'df_d12_6'                : 'df d12-6',
+	'df_d12_7'                : 'df d12-7',
+	'df_d12_8'                : 'df d12-8',
+	'df_d12_9'                : 'df d12-9',
+	'df_d2'                   : 'df d2',
+	'df_d2_1'                 : 'df d2-1',
+	'df_d2_2'                 : 'df d2-2',
+	'df_d20'                  : 'df d20',
+	'df_d20_1'                : 'df d20-1',
+	'df_d20_10'               : 'df d20-10',
+	'df_d20_11'               : 'df d20-11',
+	'df_d20_12'               : 'df d20-12',
+	'df_d20_13'               : 'df d20-13',
+	'df_d20_14'               : 'df d20-14',
+	'df_d20_15'               : 'df d20-15',
+	'df_d20_16'               : 'df d20-16',
+	'df_d20_17'               : 'df d20-17',
+	'df_d20_18'               : 'df d20-18',
+	'df_d20_19'               : 'df d20-19',
+	'df_d20_2'                : 'df d20-2',
+	'df_d20_20'               : 'df d20-20',
+	'df_d20_3'                : 'df d20-3',
+	'df_d20_4'                : 'df d20-4',
+	'df_d20_5'                : 'df d20-5',
+	'df_d20_6'                : 'df d20-6',
+	'df_d20_7'                : 'df d20-7',
+	'df_d20_8'                : 'df d20-8',
+	'df_d20_9'                : 'df d20-9',
+	'df_d4'                   : 'df d4',
+	'df_d4_1'                 : 'df d4-1',
+	'df_d4_2'                 : 'df d4-2',
+	'df_d4_3'                 : 'df d4-3',
+	'df_d4_4'                 : 'df d4-4',
+	'df_d6'                   : 'df d6',
+	'df_d6_1'                 : 'df d6-1',
+	'df_d6_2'                 : 'df d6-2',
+	'df_d6_3'                 : 'df d6-3',
+	'df_d6_4'                 : 'df d6-4',
+	'df_d6_5'                 : 'df d6-5',
+	'df_d6_6'                 : 'df d6-6',
+	'df_d8'                   : 'df d8',
+	'df_d8_1'                 : 'df d8-1',
+	'df_d8_2'                 : 'df d8-2',
+	'df_d8_3'                 : 'df d8-3',
+	'df_d8_4'                 : 'df d8-4',
+	'df_d8_5'                 : 'df d8-5',
+	'df_d8_6'                 : 'df d8-6',
+	'df_d8_7'                 : 'df d8-7',
+	'df_d8_8'                 : 'df d8-8',
+	'df_dot_d6'               : 'df dot-d6',
+	'df_dot_d6_1'             : 'df dot-d6-1',
+	'df_dot_d6_2'             : 'df dot-d6-2',
+	'df_dot_d6_3'             : 'df dot-d6-3',
+	'df_dot_d6_4'             : 'df dot-d6-4',
+	'df_dot_d6_5'             : 'df dot-d6-5',
+	'df_dot_d6_6'             : 'df dot-d6-6',
+	'df_small_dot_d6_1'       : 'df small-dot-d6-1',
+	'df_small_dot_d6_2'       : 'df small-dot-d6-2',
+	'df_small_dot_d6_3'       : 'df small-dot-d6-3',
+	'df_small_dot_d6_4'       : 'df small-dot-d6-4',
+	'df_small_dot_d6_5'       : 'df small-dot-d6-5',
+	'df_small_dot_d6_6'       : 'df small-dot-d6-6',
+	'df_solid_small_dot_d6_1' : 'df solid-small-dot-d6-1',
+	'df_solid_small_dot_d6_2' : 'df solid-small-dot-d6-2',
+	'df_solid_small_dot_d6_3' : 'df solid-small-dot-d6-3',
+	'df_solid_small_dot_d6_4' : 'df solid-small-dot-d6-4',
+	'df_solid_small_dot_d6_5' : 'df solid-small-dot-d6-5',
+	'df_solid_small_dot_d6_6' : 'df solid-small-dot-d6-6'
+};
+
+module.exports = diceFont;

themes/fonts/iconFonts/diceFont.less

@@ -0,0 +1,117 @@
+/* Icon Font: diceFont */
+@font-face {
+	font-family : 'DiceFont';
+	font-style : normal;
+	font-weight : normal;
+	src : url('../../../fonts/iconFonts/diceFont.woff2');
+} 
+
+.df {
+	display                 : inline;
+	font-family             : 'DiceFont';
+	font-style              : normal;
+	font-weight             : normal;
+	font-variant            : normal;
+	line-height             : 1;
+	text-decoration         : inherit;
+	text-transform          : none;
+	text-rendering          : optimizeLegibility;
+	
+	/* Better Font Rendering =========== */
+	-webkit-font-smoothing  : antialiased;
+	-moz-osx-font-smoothing : grayscale;
+
+	&.F::before { content : '\f190'; }
+	&.F-minus::before { content : '\f191'; }
+	&.F-plus::before { content : '\f192'; }
+	&.F-zero::before { content : '\f193'; }
+	&.d10::before { content : '\f194'; }
+	&.d10-0::before { content : '\f100'; }
+	&.d10-1::before { content : '\f101'; }
+	&.d10-10::before { content : '\f102'; }
+	&.d10-2::before { content : '\f103'; }
+	&.d10-3::before { content : '\f104'; }
+	&.d10-4::before { content : '\f105'; }
+	&.d10-5::before { content : '\f106'; }
+	&.d10-6::before { content : '\f107'; }
+	&.d10-7::before { content : '\f108'; }
+	&.d10-8::before { content : '\f109'; }
+	&.d10-9::before { content : '\f10a'; }
+	&.d12::before { content : '\f195'; }
+	&.d12-1::before { content : '\f10b'; }
+	&.d12-10::before { content : '\f10c'; }
+	&.d12-11::before { content : '\f10d'; }
+	&.d12-12::before { content : '\f10e'; }
+	&.d12-2::before { content : '\f10f'; }
+	&.d12-3::before { content : '\f110'; }
+	&.d12-4::before { content : '\f111'; }
+	&.d12-5::before { content : '\f112'; }
+	&.d12-6::before { content : '\f113'; }
+	&.d12-7::before { content : '\f114'; }
+	&.d12-8::before { content : '\f115'; }
+	&.d12-9::before { content : '\f116'; }
+	&.d2::before { content : '\f196'; }
+	&.d2-1::before { content : '\f117'; }
+	&.d2-2::before { content : '\f118'; }
+	&.d20::before { content : '\f197'; }
+	&.d20-1::before { content : '\f119'; }
+	&.d20-10::before { content : '\f11a'; }
+	&.d20-11::before { content : '\f11b'; }
+	&.d20-12::before { content : '\f11c'; }
+	&.d20-13::before { content : '\f11d'; }
+	&.d20-14::before { content : '\f11e'; }
+	&.d20-15::before { content : '\f11f'; }
+	&.d20-16::before { content : '\f120'; }
+	&.d20-17::before { content : '\f121'; }
+	&.d20-18::before { content : '\f122'; }
+	&.d20-19::before { content : '\f123'; }
+	&.d20-2::before { content : '\f124'; }
+	&.d20-20::before { content : '\f125'; }
+	&.d20-3::before { content : '\f126'; }
+	&.d20-4::before { content : '\f127'; }
+	&.d20-5::before { content : '\f128'; }
+	&.d20-6::before { content : '\f129'; }
+	&.d20-7::before { content : '\f12a'; }
+	&.d20-8::before { content : '\f12b'; }
+	&.d20-9::before { content : '\f12c'; }
+	&.d4::before { content : '\f198'; }
+	&.d4-1::before { content : '\f12d'; }
+	&.d4-2::before { content : '\f12e'; }
+	&.d4-3::before { content : '\f12f'; }
+	&.d4-4::before { content : '\f130'; }
+	&.d6::before { content : '\f199'; }
+	&.d6-1::before { content : '\f131'; }
+	&.d6-2::before { content : '\f132'; }
+	&.d6-3::before { content : '\f133'; }
+	&.d6-4::before { content : '\f134'; }
+	&.d6-5::before { content : '\f135'; }
+	&.d6-6::before { content : '\f136'; }
+	&.d8::before { content : '\f19a'; }
+	&.d8-1::before { content : '\f137'; }
+	&.d8-2::before { content : '\f138'; }
+	&.d8-3::before { content : '\f139'; }
+	&.d8-4::before { content : '\f13a'; }
+	&.d8-5::before { content : '\f13b'; }
+	&.d8-6::before { content : '\f13c'; }
+	&.d8-7::before { content : '\f13d'; }
+	&.d8-8::before { content : '\f13e'; }
+	&.dot-d6::before { content : '\f19b'; }
+	&.dot-d6-1::before { content : '\f13f'; }
+	&.dot-d6-2::before { content : '\f140'; }
+	&.dot-d6-3::before { content : '\f141'; }
+	&.dot-d6-4::before { content : '\f142'; }
+	&.dot-d6-5::before { content : '\f143'; }
+	&.dot-d6-6::before { content : '\f18f'; }
+	&.small-dot-d6-1::before { content : '\f183'; }
+	&.small-dot-d6-2::before { content : '\f184'; }
+	&.small-dot-d6-3::before { content : '\f185'; }
+	&.small-dot-d6-4::before { content : '\f186'; }
+	&.small-dot-d6-5::before { content : '\f187'; }
+	&.small-dot-d6-6::before { content : '\f188'; }
+	&.solid-small-dot-d6-1::before { content : '\f189'; }
+	&.solid-small-dot-d6-2::before { content : '\f18a'; }
+	&.solid-small-dot-d6-3::before { content : '\f18b'; }
+	&.solid-small-dot-d6-4::before { content : '\f18c'; }
+	&.solid-small-dot-d6-5::before { content : '\f18d'; }
+	&.solid-small-dot-d6-6::before { content : '\f18e'; }
+}

themes/fonts/iconFonts/diceFont_license.md

@@ -0,0 +1,18 @@
+# License
+
+DiceFont is open source. You can use it for commercial projects, personal
+projects or open source projects.
+
+## Font License
+
+Applies to all desktop and webfont files: [License: SIL OFL 1.1](http://scripts.sil.org/OFL)
+
+## Code License
+
+Applies to all CSS and LESS files: [License: MIT License](http://opensource.org/licenses/mit-license.html)
+
+## Documentation License
+
+Applies to all other files [CC BY 3.0](http://creativecommons.org/licenses/by/3.0/)
+
+Copyright [Franco Ponticelli](https://github.com/fponticelli).

themes/fonts/iconFonts/elderberryInn.js

@@ -0,0 +1,209 @@
+const elderberryInn = {
+	'ei_book'   : 'ei book',
+	'ei_screen' : 'ei screen',
+
+	/* Spell levels */
+	'ei_spell_0' : 'ei spell-0',
+	'ei_spell_1' : 'ei spell-1',
+	'ei_spell_2' : 'ei spell-2',
+	'ei_spell_3' : 'ei spell-3',
+	'ei_spell_4' : 'ei spell-4',
+	'ei_spell_5' : 'ei spell-5',
+	'ei_spell_6' : 'ei spell-6',
+	'ei_spell_7' : 'ei spell-7',
+	'ei_spell_8' : 'ei spell-8',
+	'ei_spell_9' : 'ei spell-9',
+
+	/* Damage types */
+	'ei_acid'        : 'ei acid',
+	'ei_bludgeoning' : 'ei bludgeoning',
+	'ei_cold'        : 'ei cold',
+	'ei_fire'        : 'ei fire',
+	'ei_force'       : 'ei force',
+	'ei_lightning'   : 'ei lightning',
+	'ei_necrotic'    : 'ei necrotic',
+	'ei_piercing'    : 'ei piercing',
+	'ei_poison'      : 'ei poison',
+	'ei_psychic'     : 'ei psychic',
+	'ei_radiant'     : 'ei radiant',
+	'ei_slashing'    : 'ei slashing',
+	'ei_thunder'     : 'ei thunder',
+
+	/* DnD Conditions */
+	'ei_blinded'       : 'ei blinded',
+	'ei_charmed'       : 'ei charmed',
+	'ei_deafened'      : 'ei deafened',
+	'ei_exhaust1'      : 'ei exhaust-1',
+	'ei_blinded'       : 'ei blinded',
+	'ei_exhaust2'      : 'ei exhaust-2',
+	'ei_exhaust3'      : 'ei exhaust-3',
+	'ei_exhaust4'      : 'ei exhaust-4',
+	'ei_exhaust5'      : 'ei exhaust-5',
+	'ei_exhaust6'      : 'ei exhaust-6',
+	'ei_frightened'    : 'ei frightened',
+	'ei_grappled'      : 'ei grappled',
+	'ei_incapacitated' : 'ei incapacitated',
+	'ei_invisible'     : 'ei invisible',
+	'ei_paralyzed'     : 'ei paralyzed',
+	'ei_petrified'     : 'ei petrified',
+	'ei_poisoned'      : 'ei poisoned',
+	'ei_prone'         : 'ei prone',
+	'ei_restrained'    : 'ei restrained',
+	'ei_stunned'       : 'ei stunned',
+	'ei_unconscious'   : 'ei unconscious',
+
+	/* Character Classes and Features */
+	'ei_barbarian_rage'            : 'ei barbarian-rage',
+	'ei_barbarian_reckless_attack' : 'ei barbarian-reckless-attack',
+	'ei_bardic_inspiration'        : 'ei bardic-inspiration',
+	'ei_cleric_channel_divinity'   : 'ei cleric-channel-divinity',
+	'ei_druid_wild_shape'          : 'ei druid-wild-shape',
+	'ei_fighter_action_surge'      : 'ei fighter-action-surge',
+	'ei_fighter_second_wind'       : 'ei fighter-second-wind',
+	'ei_monk_flurry_blows'         : 'ei monk-flurry-blows',
+	'ei_monk_patient_defense'      : 'ei monk-patient-defense',
+	'ei_monk_step_of_the_wind'     : 'ei monk-step-of-the-wind',
+	'ei_monk_step_of_the_wind2'    : 'ei monk-step-of-the-wind-2',
+	'ei_monk_step_of_the_wind3'    : 'ei monk-step-of-the-wind-3',
+	'ei_monk_stunning_strike'      : 'ei monk-stunning-strike',
+	'ei_monk_stunning_strike2'     : 'ei monk-stunning-strike-2',
+	'ei_paladin_divine_smite'      : 'ei paladin-divine-smite',
+	'ei_paladin_lay_on_hands'      : 'ei paladin-lay-on-hands',
+	'ei_barbarian_abilities'       : 'ei barbarian-abilities',
+	'ei_barbarian'                 : 'ei barbarian',
+	'ei_bard_abilities'            : 'ei bard-abilities',
+	'ei_bard'                      : 'ei bard',
+	'ei_cleric_abilities'          : 'ei cleric-abilities',
+	'ei_cleric'                    : 'ei cleric',
+	'ei_druid_abilities'           : 'ei druid-abilities',
+	'ei_druid'                     : 'ei druid',
+	'ei_fighter_abilities'         : 'ei fighter-abilities',
+	'ei_fighter'                   : 'ei fighter',
+	'ei_monk_abilities'            : 'ei monk-abilities',
+	'ei_monk'                      : 'ei monk',
+	'ei_paladin_abilities'         : 'ei paladin-abilities',
+	'ei_paladin'                   : 'ei paladin',
+	'ei_ranger_abilities'          : 'ei ranger-abilities',
+	'ei_ranger'                    : 'ei ranger',
+	'ei_rogue_abilities'           : 'ei rogue-abilities',
+	'ei_rogue'                     : 'ei rogue',
+	'ei_sorcerer_abilities'        : 'ei sorcerer-abilities',
+	'ei_sorcerer'                  : 'ei sorcerer',
+	'ei_warlock_abilities'         : 'ei warlock-abilities',
+	'ei_warlock'                   : 'ei warlock',
+	'ei_wizard_abilities'          : 'ei wizard-abilities',
+	'ei_wizard'                    : 'ei wizard',
+
+	/* Types of actions */
+	'ei_movement'     : 'ei movement',
+	'ei_action'       : 'ei action',
+	'ei_bonus_action' : 'ei bonus-action',
+	'ei_reaction'     : 'ei reaction',
+
+	/* SRD Spells */
+	'ei_acid_arrow'                    : 'ei acid-arrow',
+	'ei_action1'                       : 'ei action-1',
+	'ei_alter_self'                    : 'ei alter-self',
+	'ei_alter_self2'                   : 'ei alter-self-2',
+	'ei_magic_beans'                   : 'ei magic-beans',
+	'ei_animal_friendship'             : 'ei animal-friendship',
+	'ei_animate_dead'                  : 'ei animate-dead',
+	'ei_animate_objects'               : 'ei animate-objects',
+	'ei_animate_objects2'              : 'ei animate-objects-2',
+	'ei_bane'                          : 'ei bane',
+	'ei_bless'                         : 'ei bless',
+	'ei_blur'                          : 'ei blur',
+	'ei_bonus'                         : 'ei bonus',
+	'ei_branding_smite'                : 'ei branding-smite',
+	'ei_burning_hands'                 : 'ei burning-hands',
+	'ei_charm_person'                  : 'ei charm-person',
+	'ei_chill_touch'                   : 'ei chill-touch',
+	'ei_cloudkill'                     : 'ei cloudkill',
+	'ei_comprehend_languages'          : 'ei comprehend-languages',
+	'ei_cone_of_cold'                  : 'ei cone-of-cold',
+	'ei_conjure_elemental'             : 'ei conjure-elemental',
+	'ei_conjure_minor_elemental'       : 'ei conjure-minor-elemental',
+	'ei_control_water'                 : 'ei control-water',
+	'ei_counterspell'                  : 'ei counterspell',
+	'ei_cure_wounds'                   : 'ei cure-wounds',
+	'ei_dancing_lights'                : 'ei dancing-lights',
+	'ei_darkness'                      : 'ei darkness',
+	'ei_detect_magic'                  : 'ei detect-magic',
+	'ei_disguise_self'                 : 'ei disguise-self',
+	'ei_disintegrate'                  : 'ei disintegrate',
+	'ei_dispel_evil_and_good'          : 'ei dispel-evil-and-good',
+	'ei_dispel_magic'                  : 'ei dispel-magic',
+	'ei_dominate_monster'              : 'ei dominate-monster',
+	'ei_dominate_person'               : 'ei dominate-person',
+	'ei_eldritch_blast'                : 'ei eldritch-blast',
+	'ei_enlarge_reduce'                : 'ei enlarge-reduce',
+	'ei_entangle'                      : 'ei entangle',
+	'ei_faerie_fire'                   : 'ei faerie-fire',
+	'ei_faerie_fire2'                  : 'ei faerie-fire2',
+	'ei_feather_fall'                  : 'ei feather-fall',
+	'ei_find_familiar'                 : 'ei find-familiar',
+	'ei_finger_of_death'               : 'ei finger-of-death',
+	'ei_fireball'                      : 'ei fireball',
+	'ei_floating_disk'                 : 'ei floating-disk',
+	'ei_fly'                           : 'ei fly',
+	'ei_fog_cloud'                     : 'ei fog-cloud',
+	'ei_gaseous_form'                  : 'ei gaseous-form',
+	'ei_gaseous_form2'                 : 'ei gaseous-form2',
+	'ei_gentle_repose'                 : 'ei gentle-repose',
+	'ei_gentle_repose2'                : 'ei gentle-repose2',
+	'ei_globe_of_invulnerability'      : 'ei globe-of-invulnerability',
+	'ei_guiding_bolt'                  : 'ei guiding-bolt',
+	'ei_healing_word'                  : 'ei healing-word',
+	'ei_heat_metal'                    : 'ei heat-metal',
+	'ei_hellish_rebuke'                : 'ei hellish-rebuke',
+	'ei_heroes_feast'                  : 'ei heroes-feast',
+	'ei_heroism'                       : 'ei heroism',
+	'ei_hideous_laughter'              : 'ei hideous-laughter',
+	'ei_identify'                      : 'ei identify',
+	'ei_illusory_script'               : 'ei illusory-script',
+	'ei_inflict_wounds'                : 'ei inflict-wounds',
+	'ei_light'                         : 'ei light',
+	'ei_longstrider'                   : 'ei longstrider',
+	'ei_mage_armor'                    : 'ei mage-armor',
+	'ei_mage_hand'                     : 'ei mage-hand',
+	'ei_magic_missile'                 : 'ei magic-missile',
+	'ei_mass_cure_wounds'              : 'ei mass-cure-wounds',
+	'ei_mass_healing_word'             : 'ei mass-healing-word',
+	'ei_mending'                       : 'ei _mending',
+	'ei_message'                       : 'ei message',
+	'ei_minor_illusion'                : 'ei _minor-illusion',
+	'ei_movement1'                     : 'ei movement1',
+	'ei_polymorph'                     : 'ei polymorph',
+	'ei_power_word_kill'               : 'ei power-word-kill',
+	'ei_power_word_stun'               : 'ei power-word-stun',
+	'ei_prayer_of_healing'             : 'ei prayer-of-healing',
+	'ei_prestidigitation'              : 'ei prestidigitation',
+	'ei_protection_from_evil_and_good' : 'ei protection-from-evil-and-good',
+	'ei_raise_dead'                    : 'ei raise-dead',
+	'ei_raise_dead2'                   : 'ei raise-dead2',
+	'ei_reaction1'                     : 'ei reaction1',
+	'ei_resurrection'                  : 'ei resurrection',
+	'ei_resurrection2'                 : 'ei resurrection2',
+	'ei_revivify'                      : 'ei revivify',
+	'ei_revivify2'                     : 'ei revivify2',
+	'ei_sacred_flame'                  : 'ei sacred-flame',
+	'ei_sanctuary'                     : 'ei sanctuary',
+	'ei_scorching_ray'                 : 'ei scorching-ray',
+	'ei_sending'                       : 'ei sending',
+	'ei_shatter'                       : 'ei shatter',
+	'ei_shield'                        : 'ei shield',
+	'ei_silent_image'                  : 'ei silent-image',
+	'ei_sleep'                         : 'ei sleep',
+	'ei_speak_with_animals'            : 'ei speak-with-animals',
+	'ei_telekinesis'                   : 'ei telekinesis',
+	'ei_true_strike'                   : 'ei true-strike',
+	'ei_vicious_mockery'               : 'ei vicious-mockery',
+	'ei_wall_of_fire'                  : 'ei wall-of-fire',
+	'ei_wall_of_force'                 : 'ei wall-of-force',
+	'ei_wall_of_ice'                   : 'ei wall-of-ice',
+	'ei_wall_of_stone'                 : 'ei wall-of-stone',
+	'ei_wall_of_thorns'                : 'ei wall-of-thorns',
+	'ei_wish'                          : 'ei wish'
+};
+
+module.exports = elderberryInn;

themes/fonts/iconFonts/elderberryInn.less

@@ -0,0 +1,225 @@
+/* Icon Font: Elderberry Inn */
+@font-face {
+	font-family : 'Elderberry-Inn';
+	font-style : normal;
+	font-weight : normal;
+	src : url('../../../fonts/iconFonts/elderberryInn.woff2');
+}
+
+.ei {
+	display                 : inline;
+	font-family             : 'Elderberry-Inn';
+	line-height             : 1;
+	vertical-align          : baseline;
+	text-rendering          : auto;
+
+	/* Better Font Rendering =========== */
+	-webkit-font-smoothing  : antialiased;
+	-moz-osx-font-smoothing : grayscale;
+
+	&.book::before { content : '\E900'; }
+	&.screen::before { content : '\E901'; }
+
+	/* Spell levels */ 
+	&.spell-0::before { content : '\E902'; }
+	&.spell-1::before { content : '\E903'; }
+	&.spell-2::before { content : '\E904'; }
+	&.spell-3::before { content : '\E905'; }
+	&.spell-4::before { content : '\E906'; }
+	&.spell-5::before { content : '\E907'; }
+	&.spell-6::before { content : '\E908'; }
+	&.spell-7::before { content : '\E909'; }
+	&.spell-8::before { content : '\E90A'; }
+	&.spell-9::before { content : '\E90B'; }
+
+	/* Damage types */ 
+	&.acid::before { content : '\E90C'; }
+	&.bludgeoning::before { content : '\E90D'; }
+	&.cold::before { content : '\E90E'; }
+	&.fire::before { content : '\E90F'; }
+	&.force::before { content : '\E910'; }
+	&.lightning::before { content : '\E911'; }
+	&.necrotic::before { content : '\E912'; }
+	&.piercing::before { content : '\E913'; }
+	&.poison::before { content : '\E914'; }
+	&.psychic::before { content : '\E915'; }
+	&.radiant::before { content : '\E916'; }
+	&.slashing::before { content : '\E917'; }
+	&.thunder::before { content : '\E918'; }
+
+	/* DnD Conditions */ 
+	&.blinded::before { content : '\E919'; }
+	&.charmed::before { content : '\E91A'; }
+	&.deafened::before { content : '\E91B'; }
+	&.exhaust-1::before { content : '\E91C'; }
+	&.exhaust-2::before { content : '\E91D'; }
+	&.exhaust-3::before { content : '\E91E'; }
+	&.exhaust-4::before { content : '\E91F'; }
+	&.exhaust-5::before { content : '\E920'; }
+	&.exhaust-6::before { content : '\E921'; }
+	&.frightened::before { content : '\E922'; }
+	&.grappled::before { content : '\E923'; }
+	&.incapacitated::before { content : '\E924'; }
+	&.unconscious::before { content : '\E925'; }
+	&.invisible::before { content : '\E926'; }
+	&.paralyzed::before { content : '\E927'; }
+	&.petrified::before { content : '\E928'; }
+	&.poisoned::before { content : '\E929'; }
+	&.prone::before { content : '\E92A'; }
+	&.restrained::before { content : '\E92B'; }
+	&.stunned::before { content : '\E92C'; }
+	
+
+	/* Character Classes and Features */ 
+	&.barbarian-rage::before { content : '\E92D'; }
+	&.barbarian-reckless-attack::before { content : '\E92E'; }
+	&.bardic-inspiration::before { content : '\E92F'; }
+	&.cleric-channel-divinity::before { content : '\E930'; }
+	&.druid-wild-shape::before { content : '\E931'; }
+	&.fighter-action-surge::before { content : '\E932'; }
+	&.fighter-second-wind::before { content : '\E933'; }
+	&.monk-flurry-blows::before { content : '\E934'; }
+	&.monk-patient-defense::before { content : '\E935'; }
+	&.monk-step-of-the-wind::before { content : '\E936'; }
+	&.monk-step-of-the-wind-2::before { content : '\E937'; }
+	&.monk-step-of-the-wind-3::before { content : '\E938'; }
+	&.monk-stunning-strike::before { content : '\E939'; }
+	&.monk-stunning-strike-2::before { content : '\E93A'; }
+	&.paladin-divine-smite::before { content : '\E93B'; }
+	&.paladin-lay-on-hands::before { content : '\E93C'; }
+	&.barbarian-abilities::before { content : '\E93D'; }
+	&.barbarian::before { content : '\E93E'; }
+	&.bard-abilities::before { content : '\E93F'; }
+	&.bard::before { content : '\E940'; }
+	&.cleric-abilities::before { content : '\E941'; }
+	&.cleric::before { content : '\E942'; }
+	&.druid-abilities::before { content : '\E943'; }
+	&.druid::before { content : '\E944'; }
+	&.fighter-abilities::before { content : '\E945'; }
+	&.fighter::before { content : '\E946'; }
+	&.monk-abilities::before { content : '\E947'; }
+	&.monk::before { content : '\E948'; }
+	&.paladin-abilities::before { content : '\E949'; }
+	&.paladin::before { content : '\E94A'; }
+	&.ranger-abilities::before { content : '\E94B'; }
+	&.ranger::before { content : '\E94C'; }
+	&.rogue-abilities::before { content : '\E94D'; }
+	&.rogue::before { content : '\E94E'; }
+	&.sorcerer-abilities::before { content : '\E94F'; }
+	&.sorcerer::before { content : '\E950'; }
+	&.warlock-abilities::before { content : '\E951'; }
+	&.warlock::before { content : '\E952'; }
+	&.wizard-abilities::before { content : '\E953'; }
+	&.wizard::before { content : '\E954'; }
+
+	/* Types of actions */ 
+	&.movement::before { content : '\E955'; }
+	&.action::before { content : '\E956'; }
+	&.bonus-action::before { content : '\E957'; }
+	&.reaction::before { content : '\E958'; }
+
+	/* SRD Spells */ 
+	&.acid-arrow::before { content : '\E959'; }
+	&.action-1::before { content : '\E95A'; }
+	&.alter-self::before { content : '\E95B'; }
+	&.alter-self-2::before { content : '\E95C'; }
+	&.magic-beans::before { content : '\E95D'; }
+	&.animal-friendship::before { content : '\E95E'; }
+	&.animate-dead::before { content : '\E95F'; }
+	&.animate-objects::before { content : '\E960'; }
+	&.animate-objects-2::before { content : '\E961'; }
+	&.bane::before { content : '\E962'; }
+	&.bless::before { content : '\E963'; }
+	&.blur::before { content : '\E964'; }
+	&.bonus::before { content : '\E965'; }
+	&.branding-smite::before { content : '\E966'; }
+	&.burning-hands::before { content : '\E967'; }
+	&.charm-person::before { content : '\E968'; }
+	&.chill-touch::before { content : '\E969'; }
+	&.cloudkill::before { content : '\E96A'; }
+	&.comprehend-languages::before { content : '\E96B'; }
+	&.cone-of-cold::before { content : '\E96C'; }
+	&.conjure-elemental::before { content : '\E96D'; }
+	&.conjure-minor-elemental::before { content : '\E96E'; }
+	&.control-water::before { content : '\E96F'; }
+	&.counterspell::before { content : '\E970'; }
+	&.cure-wounds::before { content : '\E971'; }
+	&.dancing-lights::before { content : '\E972'; }
+	&.darkness::before { content : '\E973'; }
+	&.detect-magic::before { content : '\E974'; }
+	&.disguise-self::before { content : '\E975'; }
+	&.disintegrate::before { content : '\E976'; }
+	&.dispel-evil-and-good::before { content : '\E977'; }
+	&.dispel-magic::before { content : '\E978'; }
+	&.dominate-monster::before { content : '\E979'; }
+	&.dominate-person::before { content : '\E97A'; }
+	&.eldritch-blast::before { content : '\E97B'; }
+	&.enlarge-reduce::before { content : '\E97C'; }
+	&.entangle::before { content : '\E97D'; }
+	&.faerie-fire::before { content : '\E97E'; }
+	&.faerie-fire2::before { content : '\E97F'; }
+	&.feather-fall::before { content : '\E980'; }
+	&.find-familiar::before { content : '\E981'; }
+	&.finger-of-death::before { content : '\E982'; }
+	&.fireball::before { content : '\E983'; }
+	&.floating-disk::before { content : '\E984'; }
+	&.fly::before { content : '\E985'; }
+	&.fog-cloud::before { content : '\E986'; }
+	&.gaseous-form::before { content : '\E987'; }
+	&.gaseous-form2::before { content : '\E988'; }
+	&.gentle-repose::before { content : '\E989'; }
+	&.gentle-repose2::before { content : '\E98A'; }
+	&.globe-of-invulnerability::before { content : '\E98B'; }
+	&.guiding-bolt::before { content : '\E98C'; }
+	&.healing-word::before { content : '\E98D'; }
+	&.heat-metal::before { content : '\E98E'; }
+	&.hellish-rebuke::before { content : '\E98F'; }
+	&.heroes-feast::before { content : '\E990'; }
+	&.heroism::before { content : '\E991'; }
+	&.hideous-laughter::before { content : '\E992'; }
+	&.identify::before { content : '\E993'; }
+	&.illusory-script::before { content : '\E994'; }
+	&.inflict-wounds::before { content : '\E995'; }
+	&.light::before { content : '\E996'; }
+	&.longstrider::before { content : '\E997'; }
+	&.mage-armor::before { content : '\E998'; }
+	&.mage-hand::before { content : '\E999'; }
+	&.magic-missile::before { content : '\E99A'; }
+	&.mass-cure-wounds::before { content : '\E99B'; }
+	&.mass-healing-word::before { content : '\E99C'; }
+	&.Mending::before { content : '\E99D'; }
+	&.message::before { content : '\E99E'; }
+	&.Minor-illusion::before { content : '\E99F'; }
+	&.movement1::before { content : '\E9A0'; }
+	&.polymorph::before { content : '\E9A1'; }
+	&.power-word-kill::before { content : '\E9A2'; }
+	&.power-word-stun::before { content : '\E9A3'; }
+	&.prayer-of-healing::before { content : '\E9A4'; }
+	&.prestidigitation::before { content : '\E9A5'; }
+	&.protection-from-evil-and-good::before { content : '\E9A6'; }
+	&.raise-dead::before { content : '\E9A7'; }
+	&.raise-dead2::before { content : '\E9A8'; }
+	&.reaction1::before { content : '\E9A9'; }
+	&.resurrection::before { content : '\E9AA'; }
+	&.resurrection2::before { content : '\E9AB'; }
+	&.revivify::before { content : '\E9AC'; }
+	&.revivify2::before { content : '\E9AD'; }
+	&.sacred-flame::before { content : '\E9AE'; }
+	&.sanctuary::before { content : '\E9AF'; }
+	&.scorching-ray::before { content : '\E9B0'; }
+	&.sending::before { content : '\E9B1'; }
+	&.shatter::before { content : '\E9B2'; }
+	&.shield::before { content : '\E9B3'; }
+	&.silent-image::before { content : '\E9B4'; }
+	&.sleep::before { content : '\E9B5'; }
+	&.speak-with-animals::before { content : '\E9B6'; }
+	&.telekinesis::before { content : '\E9B7'; }
+	&.true-strike::before { content : '\E9B8'; }
+	&.vicious-mockery::before { content : '\E9B9'; }
+	&.wall-of-fire::before { content : '\E9BA'; }
+	&.wall-of-force::before { content : '\E9BB'; }
+	&.wall-of-ice::before { content : '\E9BC'; }
+	&.wall-of-stone::before { content : '\E9BD'; }
+	&.wall-of-thorns::before { content : '\E9BE'; }
+	&.wish::before { content : '\E9BF'; }
+}

themes/fonts/iconFonts/fontAwesome.less

@@ -0,0 +1,2 @@
+/* Icon Font: Font Awesome */
+.far,.fas,.fab { display : inline; }

themes/fonts/iconFonts/game-icons_license.md

@@ -0,0 +1,13 @@
+# Game Icons License
+
+The font used in gameIcons.woff / gameIcons.less / gameIcons.js, and usable in the Homebrewery as "gi" icons, are a subset of the Game-Icons.net library of icons.
+
+## The license
+
+Game-Icons has this to say about their license:
+
+> Game-icons.net is an online repository providing heaps of cool game related graphics.
+> 
+> They are provided provided under the terms of the Creative Commons 3.0 BY license.
+> 
+> It means that you can use them freely as long as you credit the original author in your creation(see below). A mention like "Icons made by {author;}. Available on https://game-icons.net" is fine.

themes/fonts/iconFonts/gameIcons.js

@@ -0,0 +1,509 @@
+/* eslint-disable max-lines */
+
+// This is a subset of the library of icons at game-icons.net -- the subset is from RPG-Awesome repo
+
+// The entire font can be downloaded as svg from game-icons.net,
+// and then loaded through icomoon.io to create webfont from svg,
+// and the css font file can be turned into below list using regex
+// regex used: \.([^:-]*)-([^:]*)(.*)
+// substitution: "$1$2" : "$1-$2",
+
+const gameIcons = {
+	'gi_zigzag_leaf'              : 'gi zigzag-leaf',
+	'gi_zebra_shield'             : 'gi zebra-shield',
+	'gi_x_mark'                   : 'gi x-mark',
+	'gi_wyvern'                   : 'gi wyvern',
+	'gi_wrench'                   : 'gi wrench',
+	'gi_wooden_sign'              : 'gi wooden-sign',
+	'gi_wolf_howl'                : 'gi wolf-howl',
+	'gi_wolf_head'                : 'gi wolf-head',
+	'gi_wireless_signal'          : 'gi wireless-signal',
+	'gi_wifi'                     : 'gi wifi',
+	'gi_water_drop'               : 'gi water-drop',
+	'gi_virgo'                    : 'gi virgo',
+	'gi_vine_whip'                : 'gi vine-whip',
+	'gi_vial'                     : 'gi vial',
+	'gi_vest'                     : 'gi vest',
+	'gi_venomous_snake'           : 'gi venomous-snake',
+	'gi_vase'                     : 'gi vase',
+	'gi_unplugged'                : 'gi unplugged',
+	'gi_underhand'                : 'gi underhand',
+	'gi_uncertainty'              : 'gi uncertainty',
+	'gi_two_hearts'               : 'gi two-hearts',
+	'gi_two_dragons'              : 'gi two-dragons',
+	'gi_turd'                     : 'gi turd',
+	'gi_trophy'                   : 'gi trophy',
+	'gi_triforce'                 : 'gi triforce',
+	'gi_trident'                  : 'gi trident',
+	'gi_trefoil_lily'             : 'gi trefoil-lily',
+	'gi_trail'                    : 'gi trail',
+	'gi_tower'                    : 'gi tower',
+	'gi_torch'                    : 'gi torch',
+	'gi_tooth'                    : 'gi tooth',
+	'gi_tombstone'                : 'gi tombstone',
+	'gi_toast'                    : 'gi toast',
+	'gi_tic_tac_toe'              : 'gi tic-tac-toe',
+	'gi_three_keys'               : 'gi three-keys',
+	'gi_thorny_vine'              : 'gi thorny-vine',
+	'gi_thorn_arrow'              : 'gi thorn-arrow',
+	'gi_tesla'                    : 'gi tesla',
+	'gi_tentacle'                 : 'gi tentacle',
+	'gi_telescope'                : 'gi telescope',
+	'gi_taurus'                   : 'gi taurus',
+	'gi_targeted'                 : 'gi targeted',
+	'gi_target_laser'             : 'gi target-laser',
+	'gi_target_arrows'            : 'gi target-arrows',
+	'gi_syringe'                  : 'gi syringe',
+	'gi_surveillance_camera'      : 'gi surveillance-camera',
+	'gi_supersonic_arrow'         : 'gi supersonic-arrow',
+	'gi_super_mushroom'           : 'gi super-mushroom',
+	'gi_sunbeams'                 : 'gi sunbeams',
+	'gi_sun'                      : 'gi sun',
+	'gi_sun_symbol'               : 'gi sun-symbol',
+	'gi_suits'                    : 'gi suits',
+	'gi_suckered_tentacle'        : 'gi suckered-tentacle',
+	'gi_stopwatch'                : 'gi stopwatch',
+	'gi_sprout'                   : 'gi sprout',
+	'gi_sprout_emblem'            : 'gi sprout-emblem',
+	'gi_spray_can'                : 'gi spray-can',
+	'gi_splash'                   : 'gi splash',
+	'gi_spiral_shell'             : 'gi spiral-shell',
+	'gi_spinning_sword'           : 'gi spinning-sword',
+	'gi_spiked_tentacle'          : 'gi spiked-tentacle',
+	'gi_spiked_mace'              : 'gi spiked-mace',
+	'gi_spikeball'                : 'gi spikeball',
+	'gi_spider_face'              : 'gi spider-face',
+	'gi_speech_bubbles'           : 'gi speech-bubbles',
+	'gi_speech_bubble'            : 'gi speech-bubble',
+	'gi_spear_head'               : 'gi spear-head',
+	'gi_spawn_node'               : 'gi spawn-node',
+	'gi_spades'                   : 'gi spades',
+	'gi_spades_card'              : 'gi spades-card',
+	'gi_soccer_ball'              : 'gi soccer-ball',
+	'gi_snowflake'                : 'gi snowflake',
+	'gi_snorkel'                  : 'gi snorkel',
+	'gi_snake'                    : 'gi snake',
+	'gi_snail'                    : 'gi snail',
+	'gi_small_fire'               : 'gi small-fire',
+	'gi_slash_ring'               : 'gi slash-ring',
+	'gi_skull'                    : 'gi skull',
+	'gi_skull_trophy'             : 'gi skull-trophy',
+	'gi_site'                     : 'gi site',
+	'gi_sideswipe'                : 'gi sideswipe',
+	'gi_sickle'                   : 'gi sickle',
+	'gi_shuriken'                 : 'gi shuriken',
+	'gi_shovel'                   : 'gi shovel',
+	'gi_shotgun_shell'            : 'gi shotgun-shell',
+	'gi_shot_through_the_heart'   : 'gi shot-through-the-heart',
+	'gi_shoe_prints'              : 'gi shoe-prints',
+	'gi_ship_emblem'              : 'gi ship-emblem',
+	'gi_shield'                   : 'gi shield',
+	'gi_sheriff'                  : 'gi sheriff',
+	'gi_sheep'                    : 'gi sheep',
+	'gi_shark'                    : 'gi shark',
+	'gi_seagull'                  : 'gi seagull',
+	'gi_sea_serpent'              : 'gi sea-serpent',
+	'gi_scythe'                   : 'gi scythe',
+	'gi_scroll_unfurled'          : 'gi scroll-unfurled',
+	'gi_scorpio'                  : 'gi scorpio',
+	'gi_save'                     : 'gi save',
+	'gi_satellite'                : 'gi satellite',
+	'gi_sapphire'                 : 'gi sapphire',
+	'gi_sagittarius'              : 'gi sagittarius',
+	'gi_rune_stone'               : 'gi rune-stone',
+	'gi_rss'                      : 'gi rss',
+	'gi_round_shield'             : 'gi round-shield',
+	'gi_round_bottom_flask'       : 'gi round-bottom-flask',
+	'gi_robot_arm'                : 'gi robot-arm',
+	'gi_roast_chicken'            : 'gi roast-chicken',
+	'gi_ringing_bell'             : 'gi ringing-bell',
+	'gi_rifle'                    : 'gi rifle',
+	'gi_revolver'                 : 'gi revolver',
+	'gi_reverse'                  : 'gi reverse',
+	'gi_repair'                   : 'gi repair',
+	'gi_relic_blade'              : 'gi relic-blade',
+	'gi_regeneration'             : 'gi regeneration',
+	'gi_recycle'                  : 'gi recycle',
+	'gi_reactor'                  : 'gi reactor',
+	'gi_raven'                    : 'gi raven',
+	'gi_radioactive'              : 'gi radioactive',
+	'gi_radial_balance'           : 'gi radial-balance',
+	'gi_radar_dish'               : 'gi radar-dish',
+	'gi_rabbit'                   : 'gi rabbit',
+	'gi_quill_ink'                : 'gi quill-ink',
+	'gi_queen_crown'              : 'gi queen-crown',
+	'gi_pyramids'                 : 'gi pyramids',
+	'gi_potion'                   : 'gi potion',
+	'gi_poison_cloud'             : 'gi poison-cloud',
+	'gi_podium'                   : 'gi podium',
+	'gi_player'                   : 'gi player',
+	'gi_player_thunder_struck'    : 'gi player-thunder-struck',
+	'gi_player_teleport'          : 'gi player-teleport',
+	'gi_player_shot'              : 'gi player-shot',
+	'gi_player_pyromaniac'        : 'gi player-pyromaniac',
+	'gi_player_pain'              : 'gi player-pain',
+	'gi_player_lift'              : 'gi player-lift',
+	'gi_player_king'              : 'gi player-king',
+	'gi_player_dodge'             : 'gi player-dodge',
+	'gi_player_despair'           : 'gi player-despair',
+	'gi_plain_dagger'             : 'gi plain-dagger',
+	'gi_pisces'                   : 'gi pisces',
+	'gi_ping_pong'                : 'gi ping-pong',
+	'gi_pine_tree'                : 'gi pine-tree',
+	'gi_pills'                    : 'gi pills',
+	'gi_pill'                     : 'gi pill',
+	'gi_perspective_dice_three'   : 'gi perspective-dice-three',
+	'gi_perspective_dice_six'     : 'gi perspective-dice-six',
+	'gi_perspective_dice_six_two' : 'gi perspective-dice-six-two',
+	'gi_perspective_dice_random'  : 'gi perspective-dice-random',
+	'gi_perspective_dice_one'     : 'gi perspective-dice-one',
+	'gi_perspective_dice_four'    : 'gi perspective-dice-four',
+	'gi_perspective_dice_five'    : 'gi perspective-dice-five',
+	'gi_pawprint'                 : 'gi pawprint',
+	'gi_pawn'                     : 'gi pawn',
+	'gi_palm_tree'                : 'gi palm-tree',
+	'gi_overmind'                 : 'gi overmind',
+	'gi_overhead'                 : 'gi overhead',
+	'gi_ophiuchus'                : 'gi ophiuchus',
+	'gi_on_target'                : 'gi on-target',
+	'gi_omega'                    : 'gi omega',
+	'gi_octopus'                  : 'gi octopus',
+	'gi_ocean_emblem'             : 'gi ocean-emblem',
+	'gi_ocarina'                  : 'gi ocarina',
+	'gi_nuclear'                  : 'gi nuclear',
+	'gi_noose'                    : 'gi noose',
+	'gi_nodular'                  : 'gi nodular',
+	'gi_nails'                    : 'gi nails',
+	'gi_musket'                   : 'gi musket',
+	'gi_muscle_up'                : 'gi muscle-up',
+	'gi_muscle_fat'               : 'gi muscle-fat',
+	'gi_mp5'                      : 'gi mp5',
+	'gi_moon_sun'                 : 'gi moon-sun',
+	'gi_montains'                 : 'gi montains',
+	'gi_monster_skull'            : 'gi monster-skull',
+	'gi_mirror'                   : 'gi mirror',
+	'gi_mining_diamonds'          : 'gi mining-diamonds',
+	'gi_mine_wagon'               : 'gi mine-wagon',
+	'gi_microphone'               : 'gi microphone',
+	'gi_metal_gate'               : 'gi metal-gate',
+	'gi_medical_pack'             : 'gi medical-pack',
+	'gi_meat'                     : 'gi meat',
+	'gi_meat_hook'                : 'gi meat-hook',
+	'gi_match'                    : 'gi match',
+	'gi_mass_driver'              : 'gi mass-driver',
+	'gi_magnet'                   : 'gi magnet',
+	'gi_maggot'                   : 'gi maggot',
+	'gi_love_howl'                : 'gi love-howl',
+	'gi_locked_fortress'          : 'gi locked-fortress',
+	'gi_load'                     : 'gi load',
+	'gi_lit_candelabra'           : 'gi lit-candelabra',
+	'gi_lion'                     : 'gi lion',
+	'gi_lightning'                : 'gi lightning',
+	'gi_lightning_trio'           : 'gi lightning-trio',
+	'gi_lightning_sword'          : 'gi lightning-sword',
+	'gi_lightning_storm'          : 'gi lightning-storm',
+	'gi_lightning_bolt'           : 'gi lightning-bolt',
+	'gi_lighthouse'               : 'gi lighthouse',
+	'gi_light_bulb'               : 'gi light-bulb',
+	'gi_libra'                    : 'gi libra',
+	'gi_lever'                    : 'gi lever',
+	'gi_level_two'                : 'gi level-two',
+	'gi_level_two_advanced'       : 'gi level-two-advanced',
+	'gi_level_three'              : 'gi level-three',
+	'gi_level_three_advanced'     : 'gi level-three-advanced',
+	'gi_level_four'               : 'gi level-four',
+	'gi_level_four_advanced'      : 'gi level-four-advanced',
+	'gi_leo'                      : 'gi leo',
+	'gi_leaf'                     : 'gi leaf',
+	'gi_lava'                     : 'gi lava',
+	'gi_laser_site'               : 'gi laser-site',
+	'gi_laser_blast'              : 'gi laser-blast',
+	'gi_large_hammer'             : 'gi large-hammer',
+	'gi_lantern_flame'            : 'gi lantern-flame',
+	'gi_kunai'                    : 'gi kunai',
+	'gi_knight_helmet'            : 'gi knight-helmet',
+	'gi_knife'                    : 'gi knife',
+	'gi_knife_fork'               : 'gi knife-fork',
+	'gi_kitchen_knives'           : 'gi kitchen-knives',
+	'gi_key'                      : 'gi key',
+	'gi_key_basic'                : 'gi key-basic',
+	'gi_kettlebell'               : 'gi kettlebell',
+	'gi_kaleidoscope'             : 'gi kaleidoscope',
+	'gi_jigsaw_piece'             : 'gi jigsaw-piece',
+	'gi_jetpack'                  : 'gi jetpack',
+	'gi_interdiction'             : 'gi interdiction',
+	'gi_insect_jaws'              : 'gi insect-jaws',
+	'gi_incense'                  : 'gi incense',
+	'gi_implosion'                : 'gi implosion',
+	'gi_ice_cube'                 : 'gi ice-cube',
+	'gi_hydra'                    : 'gi hydra',
+	'gi_hydra_shot'               : 'gi hydra-shot',
+	'gi_hourglass'                : 'gi hourglass',
+	'gi_hot_surface'              : 'gi hot-surface',
+	'gi_hospital_cross'           : 'gi hospital-cross',
+	'gi_horseshoe'                : 'gi horseshoe',
+	'gi_horns'                    : 'gi horns',
+	'gi_horn_call'                : 'gi horn-call',
+	'gi_hood'                     : 'gi hood',
+	'gi_honeycomb'                : 'gi honeycomb',
+	'gi_hole_ladder'              : 'gi hole-ladder',
+	'gi_hive_emblem'              : 'gi hive-emblem',
+	'gi_help'                     : 'gi help',
+	'gi_helmet'                   : 'gi helmet',
+	'gi_heavy_shield'             : 'gi heavy-shield',
+	'gi_heavy_fall'               : 'gi heavy-fall',
+	'gi_heat_haze'                : 'gi heat-haze',
+	'gi_hearts'                   : 'gi hearts',
+	'gi_hearts_card'              : 'gi hearts-card',
+	'gi_heartburn'                : 'gi heartburn',
+	'gi_heart_tower'              : 'gi heart-tower',
+	'gi_heart_bottle'             : 'gi heart-bottle',
+	'gi_health'                   : 'gi health',
+	'gi_health_increase'          : 'gi health-increase',
+	'gi_health_decrease'          : 'gi health-decrease',
+	'gi_harpoon_trident'          : 'gi harpoon-trident',
+	'gi_hand'                     : 'gi hand',
+	'gi_hand_saw'                 : 'gi hand-saw',
+	'gi_hand_emblem'              : 'gi hand-emblem',
+	'gi_hammer'                   : 'gi hammer',
+	'gi_hammer_drop'              : 'gi hammer-drop',
+	'gi_halberd'                  : 'gi halberd',
+	'gi_guillotine'               : 'gi guillotine',
+	'gi_guarded_tower'            : 'gi guarded-tower',
+	'gi_groundbreaker'            : 'gi groundbreaker',
+	'gi_grenade'                  : 'gi grenade',
+	'gi_grass'                    : 'gi grass',
+	'gi_grass_patch'              : 'gi grass-patch',
+	'gi_grappling_hook'           : 'gi grappling-hook',
+	'gi_gold_bar'                 : 'gi gold-bar',
+	'gi_gloop'                    : 'gi gloop',
+	'gi_glass_heart'              : 'gi glass-heart',
+	'gi_gemini'                   : 'gi gemini',
+	'gi_gem'                      : 'gi gem',
+	'gi_gem_pendant'              : 'gi gem-pendant',
+	'gi_gecko'                    : 'gi gecko',
+	'gi_gears'                    : 'gi gears',
+	'gi_gear_heart'               : 'gi gear-heart',
+	'gi_gear_hammer'              : 'gi gear-hammer',
+	'gi_gavel'                    : 'gi gavel',
+	'gi_gamepad_cross'            : 'gi gamepad-cross',
+	'gi_frozen_arrow'             : 'gi frozen-arrow',
+	'gi_frostfire'                : 'gi frostfire',
+	'gi_frost_emblem'             : 'gi frost-emblem',
+	'gi_fox'                      : 'gi fox',
+	'gi_forward'                  : 'gi forward',
+	'gi_forging'                  : 'gi forging',
+	'gi_footprint'                : 'gi footprint',
+	'gi_food_chain'               : 'gi food-chain',
+	'gi_focused_lightning'        : 'gi focused-lightning',
+	'gi_fluffy_swirl'             : 'gi fluffy-swirl',
+	'gi_flowers'                  : 'gi flowers',
+	'gi_flower'                   : 'gi flower',
+	'gi_flat_hammer'              : 'gi flat-hammer',
+	'gi_flask'                    : 'gi flask',
+	'gi_flaming_trident'          : 'gi flaming-trident',
+	'gi_flaming_claw'             : 'gi flaming-claw',
+	'gi_flaming_arrow'            : 'gi flaming-arrow',
+	'gi_flame_symbol'             : 'gi flame-symbol',
+	'gi_fizzing_flask'            : 'gi fizzing-flask',
+	'gi_fish'                     : 'gi fish',
+	'gi_fireball_sword'           : 'gi fireball-sword',
+	'gi_fire'                     : 'gi fire',
+	'gi_fire_symbol'              : 'gi fire-symbol',
+	'gi_fire_shield'              : 'gi fire-shield',
+	'gi_fire_ring'                : 'gi fire-ring',
+	'gi_fire_breath'              : 'gi fire-breath',
+	'gi_fire_bomb'                : 'gi fire-bomb',
+	'gi_fedora'                   : 'gi fedora',
+	'gi_feathered_wing'           : 'gi feathered-wing',
+	'gi_feather_wing'             : 'gi feather-wing',
+	'gi_fast_ship'                : 'gi fast-ship',
+	'gi_falling'                  : 'gi falling',
+	'gi_fall_down'                : 'gi fall-down',
+	'gi_fairy'                    : 'gi fairy',
+	'gi_fairy_wand'               : 'gi fairy-wand',
+	'gi_eyeball'                  : 'gi eyeball',
+	'gi_eye_shield'               : 'gi eye-shield',
+	'gi_eye_monster'              : 'gi eye-monster',
+	'gi_explosive_materials'      : 'gi explosive-materials',
+	'gi_explosion'                : 'gi explosion',
+	'gi_energise'                 : 'gi energise',
+	'gi_emerald'                  : 'gi emerald',
+	'gi_eggplant'                 : 'gi eggplant',
+	'gi_egg'                      : 'gi egg',
+	'gi_egg_pod'                  : 'gi egg-pod',
+	'gi_duel'                     : 'gi duel',
+	'gi_droplets'                 : 'gi droplets',
+	'gi_droplet'                  : 'gi droplet',
+	'gi_droplet_splash'           : 'gi droplet-splash',
+	'gi_dripping_sword'           : 'gi dripping-sword',
+	'gi_dripping_knife'           : 'gi dripping-knife',
+	'gi_dripping_blade'           : 'gi dripping-blade',
+	'gi_drill'                    : 'gi drill',
+	'gi_dragonfly'                : 'gi dragonfly',
+	'gi_dragon'                   : 'gi dragon',
+	'gi_dragon_wing'              : 'gi dragon-wing',
+	'gi_dragon_breath'            : 'gi dragon-breath',
+	'gi_doubled'                  : 'gi doubled',
+	'gi_double_team'              : 'gi double-team',
+	'gi_diving_dagger'            : 'gi diving-dagger',
+	'gi_divert'                   : 'gi divert',
+	'gi_dinosaur'                 : 'gi dinosaur',
+	'gi_dice_two'                 : 'gi dice-two',
+	'gi_dice_three'               : 'gi dice-three',
+	'gi_dice_six'                 : 'gi dice-six',
+	'gi_dice_one'                 : 'gi dice-one',
+	'gi_dice_four'                : 'gi dice-four',
+	'gi_dice_five'                : 'gi dice-five',
+	'gi_diamonds'                 : 'gi diamonds',
+	'gi_diamonds_card'            : 'gi diamonds-card',
+	'gi_diamond'                  : 'gi diamond',
+	'gi_desert_skull'             : 'gi desert-skull',
+	'gi_dervish_swords'           : 'gi dervish-swords',
+	'gi_demolish'                 : 'gi demolish',
+	'gi_defibrillate'             : 'gi defibrillate',
+	'gi_decapitation'             : 'gi decapitation',
+	'gi_death_skull'              : 'gi death-skull',
+	'gi_dead_tree'                : 'gi dead-tree',
+	'gi_daisy'                    : 'gi daisy',
+	'gi_daggers'                  : 'gi daggers',
+	'gi_cycle'                    : 'gi cycle',
+	'gi_cut_palm'                 : 'gi cut-palm',
+	'gi_cubes'                    : 'gi cubes',
+	'gi_crystals'                 : 'gi crystals',
+	'gi_crystal_wand'             : 'gi crystal-wand',
+	'gi_crystal_cluster'          : 'gi crystal-cluster',
+	'gi_crystal_ball'             : 'gi crystal-ball',
+	'gi_crush'                    : 'gi crush',
+	'gi_crowned_heart'            : 'gi crowned-heart',
+	'gi_crown'                    : 'gi crown',
+	'gi_crown_of_thorns'          : 'gi crown-of-thorns',
+	'gi_crossed_swords'           : 'gi crossed-swords',
+	'gi_crossed_sabres'           : 'gi crossed-sabres',
+	'gi_crossed_pistols'          : 'gi crossed-pistols',
+	'gi_crossed_bones'            : 'gi crossed-bones',
+	'gi_crossed_axes'             : 'gi crossed-axes',
+	'gi_crossbow'                 : 'gi crossbow',
+	'gi_croc_sword'               : 'gi croc-sword',
+	'gi_cracked_shield'           : 'gi cracked-shield',
+	'gi_cracked_helm'             : 'gi cracked-helm',
+	'gi_crab_claw'                : 'gi crab-claw',
+	'gi_corked_tube'              : 'gi corked-tube',
+	'gi_compass'                  : 'gi compass',
+	'gi_cold_heart'               : 'gi cold-heart',
+	'gi_cog'                      : 'gi cog',
+	'gi_cog_wheel'                : 'gi cog-wheel',
+	'gi_coffee_mug'               : 'gi coffee-mug',
+	'gi_cluster_bomb'             : 'gi cluster-bomb',
+	'gi_clovers'                  : 'gi clovers',
+	'gi_clovers_card'             : 'gi clovers-card',
+	'gi_clover'                   : 'gi clover',
+	'gi_clockwork'                : 'gi clockwork',
+	'gi_cloak_and_dagger'         : 'gi cloak-and-dagger',
+	'gi_circular_shield'          : 'gi circular-shield',
+	'gi_circular_saw'             : 'gi circular-saw',
+	'gi_circle_of_circles'        : 'gi circle-of-circles',
+	'gi_chicken_leg'              : 'gi chicken-leg',
+	'gi_chessboard'               : 'gi chessboard',
+	'gi_chemical_arrow'           : 'gi chemical-arrow',
+	'gi_cheese'                   : 'gi cheese',
+	'gi_chain'                    : 'gi chain',
+	'gi_cat'                      : 'gi cat',
+	'gi_castle_flag'              : 'gi castle-flag',
+	'gi_castle_emblem'            : 'gi castle-emblem',
+	'gi_carrot'                   : 'gi carrot',
+	'gi_capricorn'                : 'gi capricorn',
+	'gi_capitol'                  : 'gi capitol',
+	'gi_cannon_shot'              : 'gi cannon-shot',
+	'gi_candle'                   : 'gi candle',
+	'gi_candle_fire'              : 'gi candle-fire',
+	'gi_cancer'                   : 'gi cancer',
+	'gi_cancel'                   : 'gi cancel',
+	'gi_campfire'                 : 'gi campfire',
+	'gi_butterfly'                : 'gi butterfly',
+	'gi_burst_blob'               : 'gi burst-blob',
+	'gi_burning_meteor'           : 'gi burning-meteor',
+	'gi_burning_eye'              : 'gi burning-eye',
+	'gi_burning_embers'           : 'gi burning-embers',
+	'gi_burning_book'             : 'gi burning-book',
+	'gi_bullets'                  : 'gi bullets',
+	'gi_bubbling_potion'          : 'gi bubbling-potion',
+	'gi_broken_skull'             : 'gi broken-skull',
+	'gi_broken_shield'            : 'gi broken-shield',
+	'gi_broken_heart'             : 'gi broken-heart',
+	'gi_broken_bottle'            : 'gi broken-bottle',
+	'gi_broken_bone'              : 'gi broken-bone',
+	'gi_broadsword'               : 'gi broadsword',
+	'gi_broadhead_arrow'          : 'gi broadhead-arrow',
+	'gi_bridge'                   : 'gi bridge',
+	'gi_brandy_bottle'            : 'gi brandy-bottle',
+	'gi_brain_freeze'             : 'gi brain-freeze',
+	'gi_bowling_pin'              : 'gi bowling-pin',
+	'gi_bowie_knife'              : 'gi bowie-knife',
+	'gi_bottom_right'             : 'gi bottom-right',
+	'gi_bottled_bolt'             : 'gi bottled-bolt',
+	'gi_bottle_vapors'            : 'gi bottle-vapors',
+	'gi_boot_stomp'               : 'gi boot-stomp',
+	'gi_boomerang'                : 'gi boomerang',
+	'gi_book'                     : 'gi book',
+	'gi_bone_knife'               : 'gi bone-knife',
+	'gi_bone_bite'                : 'gi bone-bite',
+	'gi_bombs'                    : 'gi bombs',
+	'gi_bomb_explosion'           : 'gi bomb-explosion',
+	'gi_bolt_shield'              : 'gi bolt-shield',
+	'gi_bleeding_hearts'          : 'gi bleeding-hearts',
+	'gi_bleeding_eye'             : 'gi bleeding-eye',
+	'gi_blaster'                  : 'gi blaster',
+	'gi_blast'                    : 'gi blast',
+	'gi_blade_bite'               : 'gi blade-bite',
+	'gi_bird_mask'                : 'gi bird-mask',
+	'gi_bird_claw'                : 'gi bird-claw',
+	'gi_biohazard'                : 'gi biohazard',
+	'gi_bell'                     : 'gi bell',
+	'gi_beetle'                   : 'gi beetle',
+	'gi_beer'                     : 'gi beer',
+	'gi_bear_trap'                : 'gi bear-trap',
+	'gi_beam_wake'                : 'gi beam-wake',
+	'gi_batwings'                 : 'gi batwings',
+	'gi_battery_white'            : 'gi battery-white',
+	'gi_battery_positive'         : 'gi battery-positive',
+	'gi_battery_negative'         : 'gi battery-negative',
+	'gi_battery_black'            : 'gi battery-black',
+	'gi_battery_75'               : 'gi battery-75',
+	'gi_battery_50'               : 'gi battery-50',
+	'gi_battery_25'               : 'gi battery-25',
+	'gi_battery_100'              : 'gi battery-100',
+	'gi_battery_0'                : 'gi battery-0',
+	'gi_batteries'                : 'gi batteries',
+	'gi_battered_axe'             : 'gi battered-axe',
+	'gi_bat_sword'                : 'gi bat-sword',
+	'gi_barrier'                  : 'gi barrier',
+	'gi_barbed_arrow'             : 'gi barbed-arrow',
+	'gi_ball'                     : 'gi ball',
+	'gi_axe'                      : 'gi axe',
+	'gi_axe_swing'                : 'gi axe-swing',
+	'gi_aware'                    : 'gi aware',
+	'gi_aura'                     : 'gi aura',
+	'gi_arson'                    : 'gi arson',
+	'gi_arrow_flights'            : 'gi arrow-flights',
+	'gi_arrow_cluster'            : 'gi arrow-cluster',
+	'gi_aries'                    : 'gi aries',
+	'gi_arena'                    : 'gi arena',
+	'gi_archery_target'           : 'gi archery-target',
+	'gi_archer'                   : 'gi archer',
+	'gi_arcane_mask'              : 'gi arcane-mask',
+	'gi_aquarius'                 : 'gi aquarius',
+	'gi_apple'                    : 'gi apple',
+	'gi_anvil'                    : 'gi anvil',
+	'gi_ankh'                     : 'gi ankh',
+	'gi_angel_wings'              : 'gi angel-wings',
+	'gi_anchor'                   : 'gi anchor',
+	'gi_ammo_bag'                 : 'gi ammo-bag',
+	'gi_alligator_clip'           : 'gi alligator-clip',
+	'gi_all_for_one'              : 'gi all-for-one',
+	'gi_alien_fire'               : 'gi alien-fire',
+	'gi_acorn'                    : 'gi acorn',
+	'gi_acid'                     : 'gi acid'
+};
+
+module.exports = gameIcons;

themes/fonts/iconFonts/gameIcons.less

@@ -0,0 +1,516 @@
+@font-face {
+	font-family : 'Game-Icons';
+	font-style : normal;
+	font-weight : normal;
+	src : url('../../../fonts/iconFonts/gameIcons.woff') format('woff');
+	font-display : block;
+}
+  
+.gi {
+	/* use !important to prevent issues with browser extensions that change fonts */
+	display                 : inline;
+	font-family             : 'Game-Icons' !important;
+	line-height             : 1;
+	vertical-align          : baseline;
+	text-rendering          : auto;
+  
+	/* Better Font Rendering =========== */
+	-webkit-font-smoothing  : antialiased;
+	-moz-osx-font-smoothing : grayscale;
+  
+	&.zigzag-leaf::before { content : '\e900'; }
+	&.zebra-shield::before { content : '\e901'; }
+	&.x-mark::before { content : '\e902'; }
+	&.wyvern::before { content : '\e903'; }
+	&.wrench::before { content : '\e904'; }
+	&.wooden-sign::before { content : '\e905'; }
+	&.wolf-howl::before { content : '\e906'; }
+	&.wolf-head::before { content : '\e907'; }
+	&.wireless-signal::before { content : '\e908'; }
+	&.wifi::before { content : '\e909'; }
+	&.water-drop::before { content : '\e90a'; }
+	&.virgo::before { content : '\e90b'; }
+	&.vine-whip::before { content : '\e90c'; }
+	&.vial::before { content : '\e90d'; }
+	&.vest::before { content : '\e90e'; }
+	&.venomous-snake::before { content : '\e90f'; }
+	&.vase::before { content : '\e910'; }
+	&.unplugged::before { content : '\e911'; }
+	&.underhand::before { content : '\e912'; }
+	&.uncertainty::before { content : '\e913'; }
+	&.two-hearts::before { content : '\e914'; }
+	&.two-dragons::before { content : '\e915'; }
+	&.turd::before { content : '\e916'; }
+	&.trophy::before { content : '\e917'; }
+	&.triforce::before { content : '\e918'; }
+	&.trident::before { content : '\e919'; }
+	&.trefoil-lily::before { content : '\e91a'; }
+	&.trail::before { content : '\e91b'; }
+	&.tower::before { content : '\e91c'; }
+	&.torch::before { content : '\e91d'; }
+	&.tooth::before { content : '\e91e'; }
+	&.tombstone::before { content : '\e91f'; }
+	&.toast::before { content : '\e920'; }
+	&.tic-tac-toe::before { content : '\e921'; }
+	&.three-keys::before { content : '\e922'; }
+	&.thorny-vine::before { content : '\e923'; }
+	&.thorn-arrow::before { content : '\e924'; }
+	&.tesla::before { content : '\e925'; }
+	&.tentacle::before { content : '\e926'; }
+	&.telescope::before { content : '\e927'; }
+	&.taurus::before { content : '\e928'; }
+	&.targeted::before { content : '\e929'; }
+	&.target-laser::before { content : '\e92a'; }
+	&.target-arrows::before { content : '\e92b'; }
+	&.syringe::before { content : '\e92c'; }
+	&.surveillance-camera::before { content : '\e92d'; }
+	&.supersonic-arrow::before { content : '\e92e'; }
+	&.super-mushroom::before { content : '\e92f'; }
+	&.sunbeams::before { content : '\e930'; }
+	&.sun::before { content : '\e931'; }
+	&.sun-symbol::before { content : '\e932'; }
+	&.suits::before { content : '\e933'; }
+	&.suckered-tentacle::before { content : '\e934'; }
+	&.stopwatch::before { content : '\e935'; }
+	&.sprout::before { content : '\e936'; }
+	&.sprout-emblem::before { content : '\e937'; }
+	&.spray-can::before { content : '\e938'; }
+	&.splash::before { content : '\e939'; }
+	&.spiral-shell::before { content : '\e93a'; }
+	&.spinning-sword::before { content : '\e93b'; }
+	&.spiked-tentacle::before { content : '\e93c'; }
+	&.spiked-mace::before { content : '\e93d'; }
+	&.spikeball::before { content : '\e93e'; }
+	&.spider-face::before { content : '\e93f'; }
+	&.speech-bubbles::before { content : '\e940'; }
+	&.speech-bubble::before { content : '\e941'; }
+	&.spear-head::before { content : '\e942'; }
+	&.spawn-node::before { content : '\e943'; }
+	&.spades::before { content : '\e944'; }
+	&.spades-card::before { content : '\e945'; }
+	&.soccer-ball::before { content : '\e946'; }
+	&.snowflake::before { content : '\e947'; }
+	&.snorkel::before { content : '\e948'; }
+	&.snake::before { content : '\e949'; }
+	&.snail::before { content : '\e94a'; }
+	&.small-fire::before { content : '\e94b'; }
+	&.slash-ring::before { content : '\e94c'; }
+	&.skull::before { content : '\e94d'; }
+	&.skull-trophy::before { content : '\e94e'; }
+	&.site::before { content : '\e94f'; }
+	&.sideswipe::before { content : '\e950'; }
+	&.sickle::before { content : '\e951'; }
+	&.shuriken::before { content : '\e952'; }
+	&.shovel::before { content : '\e953'; }
+	&.shotgun-shell::before { content : '\e954'; }
+	&.shot-through-the-heart::before { content : '\e955'; }
+	&.shoe-prints::before { content : '\e956'; }
+	&.ship-emblem::before { content : '\e957'; }
+	&.shield::before { content : '\e958'; }
+	&.sheriff::before { content : '\e959'; }
+	&.sheep::before { content : '\e95a'; }
+	&.shark::before { content : '\e95b'; }
+	&.seagull::before { content : '\e95c'; }
+	&.sea-serpent::before { content : '\e95d'; }
+	&.scythe::before { content : '\e95e'; }
+	&.scroll-unfurled::before { content : '\e95f'; }
+	&.scorpio::before { content : '\e960'; }
+	&.save::before { content : '\e961'; }
+	&.satellite::before { content : '\e962'; }
+	&.sapphire::before { content : '\e963'; }
+	&.sagittarius::before { content : '\e964'; }
+	&.rune-stone::before { content : '\e965'; }
+	&.rss::before { content : '\e966'; }
+	&.round-shield::before { content : '\e967'; }
+	&.round-bottom-flask::before { content : '\e968'; }
+	&.robot-arm::before { content : '\e969'; }
+	&.roast-chicken::before { content : '\e96a'; }
+	&.ringing-bell::before { content : '\e96b'; }
+	&.rifle::before { content : '\e96c'; }
+	&.revolver::before { content : '\e96d'; }
+	&.reverse::before { content : '\e96e'; }
+	&.repair::before { content : '\e96f'; }
+	&.relic-blade::before { content : '\e970'; }
+	&.regeneration::before { content : '\e971'; }
+	&.recycle::before { content : '\e972'; }
+	&.reactor::before { content : '\e973'; }
+	&.raven::before { content : '\e974'; }
+	&.radioactive::before { content : '\e975'; }
+	&.radial-balance::before { content : '\e976'; }
+	&.radar-dish::before { content : '\e977'; }
+	&.rabbit::before { content : '\e978'; }
+	&.quill-ink::before { content : '\e979'; }
+	&.queen-crown::before { content : '\e97a'; }
+	&.pyramids::before { content : '\e97b'; }
+	&.potion::before { content : '\e97c'; }
+	&.poison-cloud::before { content : '\e97d'; }
+	&.podium::before { content : '\e97e'; }
+	&.player::before { content : '\e97f'; }
+	&.player-thunder-struck::before { content : '\e980'; }
+	&.player-teleport::before { content : '\e981'; }
+	&.player-shot::before { content : '\e982'; }
+	&.player-pyromaniac::before { content : '\e983'; }
+	&.player-pain::before { content : '\e984'; }
+	&.player-lift::before { content : '\e985'; }
+	&.player-king::before { content : '\e986'; }
+	&.player-dodge::before { content : '\e987'; }
+	&.player-despair::before { content : '\e988'; }
+	&.plain-dagger::before { content : '\e989'; }
+	&.pisces::before { content : '\e98a'; }
+	&.ping-pong::before { content : '\e98b'; }
+	&.pine-tree::before { content : '\e98c'; }
+	&.pills::before { content : '\e98d'; }
+	&.pill::before { content : '\e98e'; }
+	&.perspective-dice-three::before { content : '\e98f'; }
+	&.perspective-dice-six::before { content : '\e990'; }
+	&.perspective-dice-six-two::before { content : '\e991'; }
+	&.perspective-dice-random::before { content : '\e992'; }
+	&.perspective-dice-one::before { content : '\e993'; }
+	&.perspective-dice-four::before { content : '\e994'; }
+	&.perspective-dice-five::before { content : '\e995'; }
+	&.pawprint::before { content : '\e996'; }
+	&.pawn::before { content : '\e997'; }
+	&.palm-tree::before { content : '\e998'; }
+	&.overmind::before { content : '\e999'; }
+	&.overhead::before { content : '\e99a'; }
+	&.ophiuchus::before { content : '\e99b'; }
+	&.on-target::before { content : '\e99c'; }
+	&.omega::before { content : '\e99d'; }
+	&.octopus::before { content : '\e99e'; }
+	&.ocean-emblem::before { content : '\e99f'; }
+	&.ocarina::before { content : '\e9a0'; }
+	&.nuclear::before { content : '\e9a1'; }
+	&.noose::before { content : '\e9a2'; }
+	&.nodular::before { content : '\e9a3'; }
+	&.nails::before { content : '\e9a4'; }
+	&.musket::before { content : '\e9a5'; }
+	&.muscle-up::before { content : '\e9a6'; }
+	&.muscle-fat::before { content : '\e9a7'; }
+	&.mp5::before { content : '\e9a8'; }
+	&.moon-sun::before { content : '\e9a9'; }
+	&.montains::before { content : '\e9aa'; }
+	&.monster-skull::before { content : '\e9ab'; }
+	&.mirror::before { content : '\e9ac'; }
+	&.mining-diamonds::before { content : '\e9ad'; }
+	&.mine-wagon::before { content : '\e9ae'; }
+	&.microphone::before { content : '\e9af'; }
+	&.metal-gate::before { content : '\e9b0'; }
+	&.medical-pack::before { content : '\e9b1'; }
+	&.meat::before { content : '\e9b2'; }
+	&.meat-hook::before { content : '\e9b3'; }
+	&.match::before { content : '\e9b4'; }
+	&.mass-driver::before { content : '\e9b5'; }
+	&.magnet::before { content : '\e9b6'; }
+	&.maggot::before { content : '\e9b7'; }
+	&.love-howl::before { content : '\e9b8'; }
+	&.locked-fortress::before { content : '\e9b9'; }
+	&.load::before { content : '\e9ba'; }
+	&.lit-candelabra::before { content : '\e9bb'; }
+	&.lion::before { content : '\e9bc'; }
+	&.lightning::before { content : '\e9bd'; }
+	&.lightning-trio::before { content : '\e9be'; }
+	&.lightning-sword::before { content : '\e9bf'; }
+	&.lightning-storm::before { content : '\e9c0'; }
+	&.lightning-bolt::before { content : '\e9c1'; }
+	&.lighthouse::before { content : '\e9c2'; }
+	&.light-bulb::before { content : '\e9c3'; }
+	&.libra::before { content : '\e9c4'; }
+	&.lever::before { content : '\e9c5'; }
+	&.level-two::before { content : '\e9c6'; }
+	&.level-two-advanced::before { content : '\e9c7'; }
+	&.level-three::before { content : '\e9c8'; }
+	&.level-three-advanced::before { content : '\e9c9'; }
+	&.level-four::before { content : '\e9ca'; }
+	&.level-four-advanced::before { content : '\e9cb'; }
+	&.leo::before { content : '\e9cc'; }
+	&.leaf::before { content : '\e9cd'; }
+	&.lava::before { content : '\e9ce'; }
+	&.laser-site::before { content : '\e9cf'; }
+	&.laser-blast::before { content : '\e9d0'; }
+	&.large-hammer::before { content : '\e9d1'; }
+	&.lantern-flame::before { content : '\e9d2'; }
+	&.kunai::before { content : '\e9d3'; }
+	&.knight-helmet::before { content : '\e9d4'; }
+	&.knife::before { content : '\e9d5'; }
+	&.knife-fork::before { content : '\e9d6'; }
+	&.kitchen-knives::before { content : '\e9d7'; }
+	&.key::before { content : '\e9d8'; }
+	&.key-basic::before { content : '\e9d9'; }
+	&.kettlebell::before { content : '\e9da'; }
+	&.kaleidoscope::before { content : '\e9db'; }
+	&.jigsaw-piece::before { content : '\e9dc'; }
+	&.jetpack::before { content : '\e9dd'; }
+	&.interdiction::before { content : '\e9de'; }
+	&.insect-jaws::before { content : '\e9df'; }
+	&.incense::before { content : '\e9e0'; }
+	&.implosion::before { content : '\e9e1'; }
+	&.ice-cube::before { content : '\e9e2'; }
+	&.hydra::before { content : '\e9e3'; }
+	&.hydra-shot::before { content : '\e9e4'; }
+	&.hourglass::before { content : '\e9e5'; }
+	&.hot-surface::before { content : '\e9e6'; }
+	&.hospital-cross::before { content : '\e9e7'; }
+	&.horseshoe::before { content : '\e9e8'; }
+	&.horns::before { content : '\e9e9'; }
+	&.horn-call::before { content : '\e9ea'; }
+	&.hood::before { content : '\e9eb'; }
+	&.honeycomb::before { content : '\e9ec'; }
+	&.hole-ladder::before { content : '\e9ed'; }
+	&.hive-emblem::before { content : '\e9ee'; }
+	&.help::before { content : '\e9ef'; }
+	&.helmet::before { content : '\e9f0'; }
+	&.heavy-shield::before { content : '\e9f1'; }
+	&.heavy-fall::before { content : '\e9f2'; }
+	&.heat-haze::before { content : '\e9f3'; }
+	&.hearts::before { content : '\e9f4'; }
+	&.hearts-card::before { content : '\e9f5'; }
+	&.heartburn::before { content : '\e9f6'; }
+	&.heart-tower::before { content : '\e9f7'; }
+	&.heart-bottle::before { content : '\e9f8'; }
+	&.health::before { content : '\e9f9'; }
+	&.health-increase::before { content : '\e9fa'; }
+	&.health-decrease::before { content : '\e9fb'; }
+	&.harpoon-trident::before { content : '\e9fc'; }
+	&.hand::before { content : '\e9fd'; }
+	&.hand-saw::before { content : '\e9fe'; }
+	&.hand-emblem::before { content : '\e9ff'; }
+	&.hammer::before { content : '\ea00'; }
+	&.hammer-drop::before { content : '\ea01'; }
+	&.halberd::before { content : '\ea02'; }
+	&.guillotine::before { content : '\ea03'; }
+	&.guarded-tower::before { content : '\ea04'; }
+	&.groundbreaker::before { content : '\ea05'; }
+	&.grenade::before { content : '\ea06'; }
+	&.grass::before { content : '\ea07'; }
+	&.grass-patch::before { content : '\ea08'; }
+	&.grappling-hook::before { content : '\ea09'; }
+	&.gold-bar::before { content : '\ea0a'; }
+	&.gloop::before { content : '\ea0b'; }
+	&.glass-heart::before { content : '\ea0c'; }
+	&.gemini::before { content : '\ea0d'; }
+	&.gem::before { content : '\ea0e'; }
+	&.gem-pendant::before { content : '\ea0f'; }
+	&.gecko::before { content : '\ea10'; }
+	&.gears::before { content : '\ea11'; }
+	&.gear-heart::before { content : '\ea12'; }
+	&.gear-hammer::before { content : '\ea13'; }
+	&.gavel::before { content : '\ea14'; }
+	&.gamepad-cross::before { content : '\ea15'; }
+	&.frozen-arrow::before { content : '\ea16'; }
+	&.frostfire::before { content : '\ea17'; }
+	&.frost-emblem::before { content : '\ea18'; }
+	&.fox::before { content : '\ea19'; }
+	&.forward::before { content : '\ea1a'; }
+	&.forging::before { content : '\ea1b'; }
+	&.footprint::before { content : '\ea1c'; }
+	&.food-chain::before { content : '\ea1d'; }
+	&.focused-lightning::before { content : '\ea1e'; }
+	&.fluffy-swirl::before { content : '\ea1f'; }
+	&.flowers::before { content : '\ea20'; }
+	&.flower::before { content : '\ea21'; }
+	&.flat-hammer::before { content : '\ea22'; }
+	&.flask::before { content : '\ea23'; }
+	&.flaming-trident::before { content : '\ea24'; }
+	&.flaming-claw::before { content : '\ea25'; }
+	&.flaming-arrow::before { content : '\ea26'; }
+	&.flame-symbol::before { content : '\ea27'; }
+	&.fizzing-flask::before { content : '\ea28'; }
+	&.fish::before { content : '\ea29'; }
+	&.fireball-sword::before { content : '\ea2a'; }
+	&.fire::before { content : '\ea2b'; }
+	&.fire-symbol::before { content : '\ea2c'; }
+	&.fire-shield::before { content : '\ea2d'; }
+	&.fire-ring::before { content : '\ea2e'; }
+	&.fire-breath::before { content : '\ea2f'; }
+	&.fire-bomb::before { content : '\ea30'; }
+	&.fedora::before { content : '\ea31'; }
+	&.feathered-wing::before { content : '\ea32'; }
+	&.feather-wing::before { content : '\ea33'; }
+	&.fast-ship::before { content : '\ea34'; }
+	&.falling::before { content : '\ea35'; }
+	&.fall-down::before { content : '\ea36'; }
+	&.fairy::before { content : '\ea37'; }
+	&.fairy-wand::before { content : '\ea38'; }
+	&.eyeball::before { content : '\ea39'; }
+	&.eye-shield::before { content : '\ea3a'; }
+	&.eye-monster::before { content : '\ea3b'; }
+	&.explosive-materials::before { content : '\ea3c'; }
+	&.explosion::before { content : '\ea3d'; }
+	&.energise::before { content : '\ea3e'; }
+	&.emerald::before { content : '\ea3f'; }
+	&.eggplant::before { content : '\ea40'; }
+	&.egg::before { content : '\ea41'; }
+	&.egg-pod::before { content : '\ea42'; }
+	&.duel::before { content : '\ea43'; }
+	&.droplets::before { content : '\ea44'; }
+	&.droplet::before { content : '\ea45'; }
+	&.droplet-splash::before { content : '\ea46'; }
+	&.dripping-sword::before { content : '\ea47'; }
+	&.dripping-knife::before { content : '\ea48'; }
+	&.dripping-blade::before { content : '\ea49'; }
+	&.drill::before { content : '\ea4a'; }
+	&.dragonfly::before { content : '\ea4b'; }
+	&.dragon::before { content : '\ea4c'; }
+	&.dragon-wing::before { content : '\ea4d'; }
+	&.dragon-breath::before { content : '\ea4e'; }
+	&.doubled::before { content : '\ea4f'; }
+	&.double-team::before { content : '\ea50'; }
+	&.diving-dagger::before { content : '\ea51'; }
+	&.divert::before { content : '\ea52'; }
+	&.dinosaur::before { content : '\ea53'; }
+	&.dice-two::before { content : '\ea54'; }
+	&.dice-three::before { content : '\ea55'; }
+	&.dice-six::before { content : '\ea56'; }
+	&.dice-one::before { content : '\ea57'; }
+	&.dice-four::before { content : '\ea58'; }
+	&.dice-five::before { content : '\ea59'; }
+	&.diamonds::before { content : '\ea5a'; }
+	&.diamonds-card::before { content : '\ea5b'; }
+	&.diamond::before { content : '\ea5c'; }
+	&.desert-skull::before { content : '\ea5d'; }
+	&.dervish-swords::before { content : '\ea5e'; }
+	&.demolish::before { content : '\ea5f'; }
+	&.defibrillate::before { content : '\ea60'; }
+	&.decapitation::before { content : '\ea61'; }
+	&.death-skull::before { content : '\ea62'; }
+	&.dead-tree::before { content : '\ea63'; }
+	&.daisy::before { content : '\ea64'; }
+	&.daggers::before { content : '\ea65'; }
+	&.cycle::before { content : '\ea66'; }
+	&.cut-palm::before { content : '\ea67'; }
+	&.cubes::before { content : '\ea68'; }
+	&.crystals::before { content : '\ea69'; }
+	&.crystal-wand::before { content : '\ea6a'; }
+	&.crystal-cluster::before { content : '\ea6b'; }
+	&.crystal-ball::before { content : '\ea6c'; }
+	&.crush::before { content : '\ea6d'; }
+	&.crowned-heart::before { content : '\ea6e'; }
+	&.crown::before { content : '\ea6f'; }
+	&.crown-of-thorns::before { content : '\ea70'; }
+	&.crossed-swords::before { content : '\ea71'; }
+	&.crossed-sabres::before { content : '\ea72'; }
+	&.crossed-pistols::before { content : '\ea73'; }
+	&.crossed-bones::before { content : '\ea74'; }
+	&.crossed-axes::before { content : '\ea75'; }
+	&.crossbow::before { content : '\ea76'; }
+	&.croc-sword::before { content : '\ea77'; }
+	&.cracked-shield::before { content : '\ea78'; }
+	&.cracked-helm::before { content : '\ea79'; }
+	&.crab-claw::before { content : '\ea7a'; }
+	&.corked-tube::before { content : '\ea7b'; }
+	&.compass::before { content : '\ea7c'; }
+	&.cold-heart::before { content : '\ea7d'; }
+	&.cog::before { content : '\ea7e'; }
+	&.cog-wheel::before { content : '\ea7f'; }
+	&.coffee-mug::before { content : '\ea80'; }
+	&.cluster-bomb::before { content : '\ea81'; }
+	&.clovers::before { content : '\ea82'; }
+	&.clovers-card::before { content : '\ea83'; }
+	&.clover::before { content : '\ea84'; }
+	&.clockwork::before { content : '\ea85'; }
+	&.cloak-and-dagger::before { content : '\ea86'; }
+	&.circular-shield::before { content : '\ea87'; }
+	&.circular-saw::before { content : '\ea88'; }
+	&.circle-of-circles::before { content : '\ea89'; }
+	&.chicken-leg::before { content : '\ea8a'; }
+	&.chessboard::before { content : '\ea8b'; }
+	&.chemical-arrow::before { content : '\ea8c'; }
+	&.cheese::before { content : '\ea8d'; }
+	&.chain::before { content : '\ea8e'; }
+	&.cat::before { content : '\ea8f'; }
+	&.castle-flag::before { content : '\ea90'; }
+	&.castle-emblem::before { content : '\ea91'; }
+	&.carrot::before { content : '\ea92'; }
+	&.capricorn::before { content : '\ea93'; }
+	&.capitol::before { content : '\ea94'; }
+	&.cannon-shot::before { content : '\ea95'; }
+	&.candle::before { content : '\ea96'; }
+	&.candle-fire::before { content : '\ea97'; }
+	&.cancer::before { content : '\ea98'; }
+	&.cancel::before { content : '\ea99'; }
+	&.campfire::before { content : '\ea9a'; }
+	&.butterfly::before { content : '\ea9b'; }
+	&.burst-blob::before { content : '\ea9c'; }
+	&.burning-meteor::before { content : '\ea9d'; }
+	&.burning-eye::before { content : '\ea9e'; }
+	&.burning-embers::before { content : '\ea9f'; }
+	&.burning-book::before { content : '\eaa0'; }
+	&.bullets::before { content : '\eaa1'; }
+	&.bubbling-potion::before { content : '\eaa2'; }
+	&.broken-skull::before { content : '\eaa3'; }
+	&.broken-shield::before { content : '\eaa4'; }
+	&.broken-heart::before { content : '\eaa5'; }
+	&.broken-bottle::before { content : '\eaa6'; }
+	&.broken-bone::before { content : '\eaa7'; }
+	&.broadsword::before { content : '\eaa8'; }
+	&.broadhead-arrow::before { content : '\eaa9'; }
+	&.bridge::before { content : '\eaaa'; }
+	&.brandy-bottle::before { content : '\eaab'; }
+	&.brain-freeze::before { content : '\eaac'; }
+	&.bowling-pin::before { content : '\eaad'; }
+	&.bowie-knife::before { content : '\eaae'; }
+	&.bottom-right::before { content : '\eaaf'; }
+	&.bottled-bolt::before { content : '\eab0'; }
+	&.bottle-vapors::before { content : '\eab1'; }
+	&.boot-stomp::before { content : '\eab2'; }
+	&.boomerang::before { content : '\eab3'; }
+	&.book::before { content : '\eab4'; }
+	&.bone-knife::before { content : '\eab5'; }
+	&.bone-bite::before { content : '\eab6'; }
+	&.bombs::before { content : '\eab7'; }
+	&.bomb-explosion::before { content : '\eab8'; }
+	&.bolt-shield::before { content : '\eab9'; }
+	&.bleeding-hearts::before { content : '\eaba'; }
+	&.bleeding-eye::before { content : '\eabb'; }
+	&.blaster::before { content : '\eabc'; }
+	&.blast::before { content : '\eabd'; }
+	&.blade-bite::before { content : '\eabe'; }
+	&.bird-mask::before { content : '\eabf'; }
+	&.bird-claw::before { content : '\eac0'; }
+	&.biohazard::before { content : '\eac1'; }
+	&.bell::before { content : '\eac2'; }
+	&.beetle::before { content : '\eac3'; }
+	&.beer::before { content : '\eac4'; }
+	&.bear-trap::before { content : '\eac5'; }
+	&.beam-wake::before { content : '\eac6'; }
+	&.batwings::before { content : '\eac7'; }
+	&.battery-white::before { content : '\eac8'; }
+	&.battery-positive::before { content : '\eac9'; }
+	&.battery-negative::before { content : '\eaca'; }
+	&.battery-black::before { content : '\eacb'; }
+	&.battery-75::before { content : '\eacc'; }
+	&.battery-50::before { content : '\eacd'; }
+	&.battery-25::before { content : '\eace'; }
+	&.battery-100::before { content : '\eacf'; }
+	&.battery-0::before { content : '\ead0'; }
+	&.batteries::before { content : '\ead1'; }
+	&.battered-axe::before { content : '\ead2'; }
+	&.bat-sword::before { content : '\ead3'; }
+	&.barrier::before { content : '\ead4'; }
+	&.barbed-arrow::before { content : '\ead5'; }
+	&.ball::before { content : '\ead6'; }
+	&.axe::before { content : '\ead7'; }
+	&.axe-swing::before { content : '\ead8'; }
+	&.aware::before { content : '\ead9'; }
+	&.aura::before { content : '\eada'; }
+	&.arson::before { content : '\eadb'; }
+	&.arrow-flights::before { content : '\eadc'; }
+	&.arrow-cluster::before { content : '\eadd'; }
+	&.aries::before { content : '\eade'; }
+	&.arena::before { content : '\eadf'; }
+	&.archery-target::before { content : '\eae0'; }
+	&.archer::before { content : '\eae1'; }
+	&.arcane-mask::before { content : '\eae2'; }
+	&.aquarius::before { content : '\eae3'; }
+	&.apple::before { content : '\eae4'; }
+	&.anvil::before { content : '\eae5'; }
+	&.ankh::before { content : '\eae6'; }
+	&.angel-wings::before { content : '\eae7'; }
+	&.anchor::before { content : '\eae8'; }
+	&.ammo-bag::before { content : '\eae9'; }
+	&.alligator-clip::before { content : '\eaea'; }
+	&.all-for-one::before { content : '\eaeb'; }
+	&.alien-fire::before { content : '\eaec'; }
+	&.acorn::before { content : '\eaed'; }
+	&.acid::before { content : '\eaee'; }
+}