Merge branch 'master' of https://github.com/naturalcrit/homebrewery into add-remove-author-if-owner

README.DOCKER.md

@@ -47,9 +47,7 @@ Make an changes you need to `config/docker.json` then build the image. If it doe
 "naturalcrit_url" : "local.naturalcrit.com:8010",
 "secret" : "secret",
 "web_port" : 8000,
-"enable_v3" : true,
 "mongodb_uri": "mongodb://172.17.0.2/homebrewery",
-"enable_themes" : true,
 }
 ```
 
@@ -90,6 +88,13 @@ docker run --name homebrewery-mongodb -d --restart unless-stopped -v mongodata:/
 docker run --name homebrewery-app -d --restart unless-stopped -e NODE_ENV=docker -v $(pwd)/config/docker.json:/usr/src/app/config/docker.json -p 8000:8000 docker.io/library/homebrewery:latest
 ```
 
+**NOTE:** If you are running from the Windows command line, this will not work as `$(pwd)` is not valid syntax. Use this command instead:
+```shell
+# Make sure you run this in the homebrewery directory
+docker run --name homebrewery-app -d --restart unless-stopped -e NODE_ENV=docker -v %cd%/config/docker.json:/usr/src/app/config/docker.json -p 8000:8000 docker.io/library/homebrewery:latest
+```
+
+
 ## Updating the Image
 
 When Homebrewery code updates, your docker container will not automatically follow the changes. To do so you will need to rebuild your homebrewery image. 
@@ -117,3 +122,9 @@ docker-compose build homebrewery
 docker run --name homebrewery-app -d --restart unless-stopped -e NODE_ENV=docker -v $(pwd)/config/docker.json:/usr/src/app/config/docker.json -p 8000:8000 docker.io/library/homebrewery:latest
 ```
 
+**NOTE:** If you are running from the Windows command line, this will not work as `$(pwd)` is not valid syntax. Use this command instead:
+```shell
+# Make sure you run this in the homebrewery directory
+docker run --name homebrewery-app -d --restart unless-stopped -e NODE_ENV=docker -v %cd%/config/docker.json:/usr/src/app/config/docker.json -p 8000:8000 docker.io/library/homebrewery:latest
+```
+

README.md

@@ -75,8 +75,9 @@ it using the two commands:
 1. `npm install`
 1. `npm start`
 
-You should now be able to go to [http://localhost:8000](http://localhost:8000)
-in your browser and use The Homebrewery offline.
+When the Homebrewery server is started for the first time, it will modify the database to create the indexes required for better Homebrewery performance. This may take a few moments to complete for each index, dependent on how much content is in your local database - a brand new, empty database should be done in seconds.
+
+On completion, you should be able to go to [http://localhost:8000](http://localhost:8000) in your browser and use The Homebrewery offline.
 
 If you had any issue at all, here are some links that may be useful:
 - [Course](https://learn.mongodb.com/courses/m103-basic-cluster-administration) on cluster administration, useful for beginners
@@ -145,3 +146,4 @@ your contribution to the project, please join our [gitter chat][gitter-url].
 [github-pr-docs-url]: https://docs.github.com/en/free-pro-team@latest/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request
 [gitter-url]: https://gitter.im/naturalcrit/Lobby
 
+

client/admin/admin.jsx

@@ -7,15 +7,17 @@ import LockTools  from './lockTools/lockTools.jsx';
 
 const tabGroups = ['brew', 'notifications', 'authors', 'locks'];
 
+const ADMIN_TAB = 'HB_adminPage_currentTab';
+
 const Admin = ()=>{
 	const [currentTab, setCurrentTab] = useState('');
 
 	useEffect(()=>{
-		setCurrentTab(localStorage.getItem('hbAdminTab') || 'brew');
+		setCurrentTab(localStorage.getItem(ADMIN_TAB) || 'brew');
 	}, []);
 
 	useEffect(()=>{
-		localStorage.setItem('hbAdminTab', currentTab);
+		localStorage.setItem(ADMIN_TAB, currentTab);
 	}, [currentTab]);
 
 	return (

client/components/codeEditor/autocompleteEmoji.js

@@ -1,7 +1,7 @@
-import diceFont      from '../../../themes/fonts/iconFonts/diceFont.js';
-import elderberryInn from '../../../themes/fonts/iconFonts/elderberryInn.js';
-import fontAwesome   from '../../../themes/fonts/iconFonts/fontAwesome.js';
-import gameIcons     from '../../../themes/fonts/iconFonts/gameIcons.js';
+import diceFont      from 'themes/fonts/iconFonts/diceFont.js';
+import elderberryInn from 'themes/fonts/iconFonts/elderberryInn.js';
+import fontAwesome   from 'themes/fonts/iconFonts/fontAwesome.js';
+import gameIcons     from 'themes/fonts/iconFonts/gameIcons.js';
 
 const emojis = {
 	...diceFont,

client/components/codeEditor/codeEditor.less

@@ -38,15 +38,11 @@
 		animation-duration : 0.4s;
 	}
 
-	.CodeMirror-vscrollbar {
-		&::-webkit-scrollbar { width : 20px; }
-		&::-webkit-scrollbar-thumb {
-			width      : 20px;
-			background : linear-gradient(90deg, #858585 15px, #808080 15px);
-		}
+	.CodeMirror-search-field {
+		width:25em !important;
+		outline:1px inset #00000055 !important;
 	}
 
-
 	//.cm-tab {
 	//  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAQAAACOs/baAAAARUlEQVR4nGJgIAG8JkXxUAcCtDWemcGR1lY4MvgzCEKY7jSBjgxBDAG09UEQzAe0AMwMHrSOAwEGRtpaMIwAAAAA//8DAG4ID9EKs6YqAAAAAElFTkSuQmCC) no-repeat right;
 	//}

client/components/renderWarnings/renderWarnings.jsx

@@ -3,7 +3,7 @@ const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
 
-import Dialog from '../../../client/components/dialog.jsx';
+import Dialog from '../dialog.jsx';
 
 const RenderWarnings = createClass({
 	displayName     : 'RenderWarnings',
@@ -25,7 +25,7 @@ const RenderWarnings = createClass({
 			if(!isChrome){
 				return <li key='chrome'>
 					<em>Built for Chrome </em> <br />
-					Other browsers have not been tested for compatiblilty. If you
+					Other browsers have not been tested for compatibility. If you
 					experience issues with your document not rendering or printing
 					properly, please try using the latest version of Chrome before
 					submitting a bug report.

client/components/splitPane/splitPane.jsx

@@ -2,7 +2,8 @@ require('./splitPane.less');
 const React = require('react');
 const { useState, useEffect } = React;
 
-const storageKey = 'naturalcrit-pane-split';
+const PANE_WIDTH_KEY = 'HB_editor_splitWidth';
+const LIVE_SCROLL_KEY = 'HB_editor_liveScroll';
 
 const SplitPane = (props)=>{
 	const {
@@ -18,9 +19,9 @@ const SplitPane = (props)=>{
 	const [liveScroll, setLiveScroll] = useState(false);
 
 	useEffect(()=>{
-		const savedPos = window.localStorage.getItem(storageKey);
+		const savedPos = window.localStorage.getItem(PANE_WIDTH_KEY);
 		setDividerPos(savedPos ? limitPosition(savedPos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)) : window.innerWidth / 2);
-		setLiveScroll(window.localStorage.getItem('liveScroll') === 'true');
+		setLiveScroll(window.localStorage.getItem(LIVE_SCROLL_KEY) === 'true');
 
 		window.addEventListener('resize', handleResize);
 		return ()=>window.removeEventListener('resize', handleResize);
@@ -29,13 +30,13 @@ const SplitPane = (props)=>{
 	const limitPosition = (x, min = 1, max = window.innerWidth - 13)=>Math.round(Math.min(max, Math.max(min, x)));
 
 	//when resizing, the divider should grow smaller if less space is given, then grow back if the space is restored, to the original position
-	const handleResize = ()=>setDividerPos(limitPosition(window.localStorage.getItem(storageKey), 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)));
+	const handleResize = ()=>setDividerPos(limitPosition(window.localStorage.getItem(PANE_WIDTH_KEY), 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)));
 
 	const handleUp =(e)=>{
 		e.preventDefault();
 		if(isDragging) {
 			onDragFinish(dividerPos);
-			window.localStorage.setItem(storageKey, dividerPos);
+			window.localStorage.setItem(PANE_WIDTH_KEY, dividerPos);
 		}
 		setIsDragging(false);
 	};
@@ -52,7 +53,7 @@ const SplitPane = (props)=>{
 	};
 
 	const liveScrollToggle = ()=>{
-		window.localStorage.setItem('liveScroll', String(!liveScroll));
+		window.localStorage.setItem(LIVE_SCROLL_KEY, String(!liveScroll));
 		setLiveScroll(!liveScroll);
 	};
 

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -4,13 +4,13 @@ const React = require('react');
 const { useState, useRef, useMemo, useEffect } = React;
 const _ = require('lodash');
 
-const MarkdownLegacy = require('naturalcrit/markdownLegacy.js');
-import Markdown from 'naturalcrit/markdown.js';
+const MarkdownLegacy = require('markdownLegacy.js');
+import Markdown from 'markdown.js';
 const ErrorBar = require('./errorBar/errorBar.jsx');
 const ToolBar  = require('./toolBar/toolBar.jsx');
 
 //TODO: move to the brew renderer
-const RenderWarnings = require('homebrewery/renderWarnings/renderWarnings.jsx');
+const RenderWarnings = require('client/components/renderWarnings/renderWarnings.jsx');
 const NotificationPopup = require('./notificationPopup/notificationPopup.jsx');
 const Frame = require('react-frame-component').default;
 const dedent = require('dedent-tabs').default;
@@ -24,6 +24,8 @@ const PAGEBREAK_REGEX_LEGACY = /\\page(?:break)?/m;
 const COLUMNBREAK_REGEX_LEGACY = /\\column(:?break)?/m;
 const PAGE_HEIGHT = 1056;
 
+const TOOLBAR_STATE_KEY = 'HB_renderer_toolbarState';
+
 const INITIAL_CONTENT = dedent`
 	<!DOCTYPE html><html><head>
 	<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
@@ -39,8 +41,8 @@ const BrewPage = (props)=>{
 		index    : 0,
 		...props
 	};
-	const pageRef = useRef(null);
-	const cleanText = safeHTML(`${props.contents}\n<div class="columnSplit"></div>\n`);
+	const pageRef   = useRef(null);
+	const cleanText = safeHTML(props.contents);
 
 	useEffect(()=>{
 		if(!pageRef.current) return;
@@ -122,7 +124,7 @@ const BrewRenderer = (props)=>{
 
 	//useEffect to store or gather toolbar state from storage
 	useEffect(()=>{
-		const toolbarState = JSON.parse(window.localStorage.getItem('hb_toolbarState'));
+		const toolbarState = JSON.parse(window.localStorage.getItem(TOOLBAR_STATE_KEY));
 		toolbarState &&	setDisplayOptions(toolbarState);
 	}, []);
 
@@ -284,7 +286,7 @@ const BrewRenderer = (props)=>{
 
 	const handleDisplayOptionsChange = (newDisplayOptions)=>{
 		setDisplayOptions(newDisplayOptions);
-		localStorage.setItem('hb_toolbarState', JSON.stringify(newDisplayOptions));
+		localStorage.setItem(TOOLBAR_STATE_KEY, JSON.stringify(newDisplayOptions));
 	};
 
 	const pagesStyle = {
@@ -293,12 +295,6 @@ const BrewRenderer = (props)=>{
 		rowGap    : `${displayOptions.rowGap}px`
 	};
 
-	const styleObject = {};
-
-	if(global.config.deployment) {
-		styleObject.backgroundImage = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='40px' width='200px'><text x='0' y='15' fill='%23fff7' font-size='20'>${global.config.deployment}</text></svg>")`;
-	}
-
 	const renderedStyle = useMemo(()=>renderStyle(), [props.style, props.themeBundle]);
 	renderedPages = useMemo(()=>renderPages(), [props.text, displayOptions]);
 
@@ -327,10 +323,9 @@ const BrewRenderer = (props)=>{
 				contentDidMount={frameDidMount}
 				onClick={()=>{emitClick();}}
 			>
-				<div className={`brewRenderer ${global.config.deployment && 'deployment'}`}
+				<div className='brewRenderer'
 					onKeyDown={handleControlKeys}
 					tabIndex={-1}
-					style={ styleObject }
 				>
 
 					{/* Apply CSS from Style tab and render pages from Markdown tab */}

client/homebrew/brewRenderer/brewRenderer.less

@@ -6,7 +6,6 @@
 	overflow-y    : scroll;
 	will-change   : transform;
 	&:has(.facing, .flow) { padding : 60px 30px; }
-	&.deployment { background-color : darkred; }
 	:where(.pages) {
 		&.facing {
 			display               : grid; 

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -1,7 +1,7 @@
 require('./notificationPopup.less');
 import React, { useEffect, useState } from 'react';
 import request from '../../utils/request-middleware.js';
-import Markdown from 'naturalcrit/markdown.js';
+import Markdown from 'markdown.js';
 
 import Dialog from '../../../components/dialog.jsx';
 

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -9,6 +9,8 @@ import { Anchored, AnchoredBox, AnchoredTrigger } from '../../../components/Anch
 const MAX_ZOOM = 300;
 const MIN_ZOOM = 10;
 
+const TOOLBAR_VISIBILITY = 'HB_renderer_toolbarVisibility';
+
 const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPages, headerState, setHeaderState })=>{
 
 	const [pageNum, setPageNum]     = useState(1);
@@ -21,8 +23,8 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 	}, [visiblePages]);
 
 	useEffect(()=>{
-		const Visibility = localStorage.getItem('hb_toolbarVisibility');
-		if (Visibility) setToolsVisible(Visibility === 'true');
+		const Visibility = localStorage.getItem(TOOLBAR_VISIBILITY);
+		if(Visibility) setToolsVisible(Visibility === 'true');
 
 	}, []);
 
@@ -100,7 +102,7 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 			<div className='toggleButton'>
 				<button title={`${toolsVisible ? 'Hide' : 'Show'} Preview Toolbar`} onClick={()=>{
 					setToolsVisible(!toolsVisible);
-					localStorage.setItem('hb_toolbarVisibility', !toolsVisible);
+					localStorage.setItem(TOOLBAR_VISIBILITY, !toolsVisible);
 				}}><i className='fas fa-glasses' /></button>
 				<button title={`${headerState ? 'Hide' : 'Show'} Header Navigation`} onClick={()=>{setHeaderState(!headerState);}}><i className='fas fa-rectangle-list' /></button>
 			</div>

client/homebrew/editor/editor.jsx

@@ -4,13 +4,13 @@ const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
 const dedent = require('dedent-tabs').default;
-import Markdown from '../../../shared/naturalcrit/markdown.js';
+import Markdown from '../../../shared/markdown.js';
 
-const CodeEditor = require('naturalcrit/codeEditor/codeEditor.jsx');
+const CodeEditor = require('client/components/codeEditor/codeEditor.jsx');
 const SnippetBar = require('./snippetbar/snippetbar.jsx');
 const MetadataEditor = require('./metadataEditor/metadataEditor.jsx');
 
-const EDITOR_THEME_KEY = 'HOMEBREWERY-EDITOR-THEME';
+const EDITOR_THEME_KEY = 'HB_editor_theme';
 
 const PAGEBREAK_REGEX_V3 = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m;
 const SNIPPETBREAK_REGEX_V3 = /^\\snippet\ .*$/;
@@ -40,11 +40,8 @@ const Editor = createClass({
 				style : ''
 			},
 
-			onTextChange  : ()=>{},
-			onStyleChange : ()=>{},
-			onMetaChange  : ()=>{},
-			onSnipChange  : ()=>{},
-			reportError   : ()=>{},
+			onBrewChange : ()=>{},
+			reportError  : ()=>{},
 
 			onCursorPageChange : ()=>{},
 			onViewPageChange   : ()=>{},
@@ -143,7 +140,7 @@ const Editor = createClass({
 
 	handleViewChange : function(newView){
 		this.props.setMoveArrows(newView === 'text');
-		
+
 		this.setState({
 			view : newView
 		}, ()=>{
@@ -328,10 +325,10 @@ const Editor = createClass({
 		const brewRenderer = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer')[0];
 		const currentPos = brewRenderer.scrollTop;
 		const targetPos = window.frames['BrewRenderer'].contentDocument.getElementById(`p${targetPage}`).getBoundingClientRect().top;
-
-		const checkIfScrollComplete = ()=>{
-			let scrollingTimeout;
-			clearTimeout(scrollingTimeout); // Reset the timer every time a scroll event occurs
+		
+		let scrollingTimeout;
+		const checkIfScrollComplete = ()=>{	// Prevent interrupting a scroll in progress if user clicks multiple times
+			clearTimeout(scrollingTimeout);   // Reset the timer every time a scroll event occurs
 			scrollingTimeout = setTimeout(()=>{
 				isJumping = false;
 				brewRenderer.removeEventListener('scroll', checkIfScrollComplete);
@@ -372,8 +369,8 @@ const Editor = createClass({
 		let currentY = this.codeEditor.current.codeMirror.getScrollInfo().top;
 		let targetY  = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true);
 
-		const checkIfScrollComplete = ()=>{
-			let scrollingTimeout;
+		let scrollingTimeout;
+		const checkIfScrollComplete = ()=>{ // Prevent interrupting a scroll in progress if user clicks multiple times
 			clearTimeout(scrollingTimeout); // Reset the timer every time a scroll event occurs
 			scrollingTimeout = setTimeout(()=>{
 				isJumping = false;
@@ -412,7 +409,6 @@ const Editor = createClass({
 
 	//Called when there are changes to the editor's dimensions
 	update : function(){
-		this.codeEditor.current?.updateSize();
 		const snipHeight = document.querySelector('.editor > .snippetBar').offsetHeight;
 		if(snipHeight !== this.state.snippetbarHeight)
 			this.setState({ snippetbarHeight: snipHeight });
@@ -438,7 +434,7 @@ const Editor = createClass({
 					language='gfm'
 					view={this.state.view}
 					value={this.props.brew.text}
-					onChange={this.props.onTextChange}
+					onChange={this.props.onBrewChange('text')}
 					editorTheme={this.state.editorTheme}
 					rerenderParent={this.rerenderParent}
 					style={{  height: `calc(100% - ${this.state.snippetbarHeight}px)` }} />
@@ -451,7 +447,7 @@ const Editor = createClass({
 					language='css'
 					view={this.state.view}
 					value={this.props.brew.style ?? DEFAULT_STYLE_TEXT}
-					onChange={this.props.onStyleChange}
+					onChange={this.props.onBrewChange('style')}
 					enableFolding={true}
 					editorTheme={this.state.editorTheme}
 					rerenderParent={this.rerenderParent}
@@ -467,7 +463,7 @@ const Editor = createClass({
 				<MetadataEditor
 					metadata={this.props.brew}
 					themeBundle={this.props.themeBundle}
-					onChange={this.props.onMetaChange}
+					onChange={this.props.onBrewChange('metadata')}
 					reportError={this.props.reportError}
 					userThemes={this.props.userThemes}/>
 			</>;
@@ -481,7 +477,7 @@ const Editor = createClass({
 					language='gfm'
 					view={this.state.view}
 					value={this.props.brew.snippets}
-					onChange={this.props.onSnipChange}
+					onChange={this.props.onBrewChange('snippets')}
 					enableFolding={true}
 					editorTheme={this.state.editorTheme}
 					rerenderParent={this.rerenderParent}

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -250,8 +250,6 @@ const MetadataEditor = createClass({
 	},
 
 	renderThemeDropdown : function(){
-		if(!global.enable_themes) return;
-
 		const mergedThemes = _.merge(Themes, this.props.userThemes);
 
 		const listThemes = (renderer)=>{
@@ -350,8 +348,6 @@ const MetadataEditor = createClass({
 	},
 
 	renderRenderOptions : function(){
-		if(!global.enable_v3) return;
-
 		return <div className='field systems'>
 			<label>Renderer</label>
 			<div className='value'>

client/homebrew/editor/metadataEditor/validations.js

@@ -18,7 +18,7 @@ module.exports = {
 			try {
 				Boolean(new URL(value));
 				return null;
-			} catch (e) {
+			} catch {
 				return 'Must be a valid URL';
 			}
 		}

client/homebrew/homebrew.jsx

@@ -4,6 +4,8 @@ import './homebrew.less';
 import React from 'react';
 import { StaticRouter as Router, Route, Routes, useParams, useSearchParams } from 'react-router';
 
+import { updateLocalStorage } from './utils/updateLocalStorage/updateLocalStorageKeys.js';
+
 import HomePage    from './pages/homePage/homePage.jsx';
 import EditPage    from './pages/editPage/editPage.jsx';
 import UserPage    from './pages/userPage/userPage.jsx';
@@ -17,7 +19,6 @@ const WithRoute = ({ el: Element, ...rest })=>{
 	const params = useParams();
 	const [searchParams] = useSearchParams();
 	const queryParams = Object.fromEntries(searchParams?.entries() || []);
-
 	return <Element {...rest} {...params} query={queryParams} />;
 };
 
@@ -26,8 +27,6 @@ const Homebrew = (props)=>{
 		url = '',
 		version = '0.0.0',
 		account = null,
-		enable_v3 = false,
-		enable_themes,
 		config,
 		brew = {
 			title     : '',
@@ -44,13 +43,22 @@ const Homebrew = (props)=>{
 
 	global.account       = account;
 	global.version       = version;
-	global.enable_v3     = enable_v3;
-	global.enable_themes = enable_themes;
 	global.config        = config;
 
+	const backgroundObject = ()=>{
+		if(global.config.deployment || (config.local && config.development)){
+  			const bgText = global.config.deployment || 'Local';
+  			return {
+    			backgroundImage : `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100px' width='200px'><text x='0' y='15' fill='%23fff7' font-size='20'>${bgText}</text></svg>")`
+  			};
+		}
+		return null;
+	};
+	updateLocalStorage();
+
 	return (
 		<Router location={url}>
-			<div className='homebrew'>
+			<div className={`homebrew${(config.deployment || config.local) ? ' deployment' : ''}`} style={backgroundObject()}>
 				<Routes>
 					<Route path='/edit/:id' element={<WithRoute el={EditPage} brew={brew} userThemes={userThemes}/>} />
 					<Route path='/share/:id' element={<WithRoute el={SharePage} brew={brew} />} />

client/homebrew/homebrew.less

@@ -1,12 +1,14 @@
 @import 'naturalcrit/styles/core.less';
 .homebrew {
 	height : 100%;
+	background-color:@steel;
+	&.deployment { background-color : darkred; }
+
 	.sitePage {
 		display          : flex;
 		flex-direction   : column;
 		height           : 100%;
 		overflow-y       : hidden;
-		background-color : @steel;
 		.content {
 			position   : relative;
 			flex       : auto;

client/homebrew/navbar/account.navitem.jsx

@@ -1,6 +1,6 @@
 const React = require('react');
 const createClass = require('create-react-class');
-const Nav = require('naturalcrit/nav/nav.jsx');
+const Nav = require('client/homebrew/navbar/nav.jsx');
 const request = require('superagent');
 
 const Account = createClass({

client/homebrew/navbar/error-navitem.jsx

@@ -1,157 +1,147 @@
 require('./error-navitem.less');
 const React = require('react');
-const Nav = require('naturalcrit/nav/nav.jsx');
-const createClass = require('create-react-class');
+const Nav = require('client/homebrew/navbar/nav.jsx');
 
-const ErrorNavItem = createClass({
-	getDefaultProps : function() {
-		return {
-			error  : '',
-			parent : null
-		};
-	},
-	render : function() {
-		const clearError = ()=>{
-			const state = {
-				error : null
-			};
-			if(this.props.parent.state.isSaving) {
-				state.isSaving = false;
-			}
-			this.props.parent.setState(state);
-		};
+const ErrorNavItem = ({ error = '', clearError })=>{
+	const response    = error.response;
+	const errorCode   = error.code;
+	const status      = response?.status;
+	const HBErrorCode = response?.body?.HBErrorCode;
+	const message     = response?.body?.message;
 
-		const error       = this.props.error;
-		const response    = error.response;
-		const status      = response?.status;
-		const errorCode   = error.code
-		const HBErrorCode = response?.body?.HBErrorCode;
-		const message     = response?.body?.message;
-		let errMsg = '';
-		try {
-			errMsg += `${error.toString()}\n\n`;
-			errMsg += `\`\`\`\n${error.stack}\n`;
-			errMsg += `${JSON.stringify(response?.error, null, '  ')}\n\`\`\``;
-			console.log(errMsg);
-		} catch (e){}
-
-		if(status === 409) {
-			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-				Oops!
-				<div className='errorContainer' onClick={clearError}>
-					{message ?? 'Conflict: please refresh to get latest changes'}
-				</div>
-			</Nav.item>;
-		}
-
-		if(status === 412) {
-			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-				Oops!
-				<div className='errorContainer' onClick={clearError}>
-					{message ?? 'Your client is out of date. Please save your changes elsewhere and refresh.'}
-				</div>
-			</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!
-				<div className='errorContainer' onClick={clearError}>
-					Looks like your Google credentials have
-					expired! Visit our log in page to sign out
-					and sign back in with Google,
-					then try saving again!
-					<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(HBErrorCode === '09') {
-			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-				Oops!
-				<div className='errorContainer' onClick={clearError}>
-					Looks like there was a problem retreiving
-					the theme, or a theme that it inherits,
-					for this brew. Verify that brew <a className='lowercase' target='_blank' rel='noopener noreferrer' href={`/share/${response.body.brewId}`}>
-						{response.body.brewId}</a> still exists!
-				</div>
-			</Nav.item>;
-		}
-
-		if(HBErrorCode === '10') {
-			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-				Oops!
-				<div className='errorContainer' onClick={clearError}>
-					Looks like the brew you have selected
-					as a theme is not tagged for use as a
-					theme. Verify that
-					brew <a className='lowercase' target='_blank' rel='noopener noreferrer' href={`/share/${response.body.brewId}`}>
-						{response.body.brewId}</a> has the <span className='lowercase'>meta:theme</span> tag!
-				</div>
-			</Nav.item>;
-		}
-
-		if(errorCode === 'ECONNABORTED') {
-			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-				Oops!
-				<div className='errorContainer' onClick={clearError}>
-					The request to the server was interrupted or timed out.
-					This can happen due to a network issue, or if
-					trying to save a particularly large brew.
-					Please check your internet connection and try again.
-				</div>
-			</Nav.item>;
-		}
+	let errMsg = '';
+	try {
+		errMsg += `${error.toString()}\n\n`;
+		errMsg += `\`\`\`\n${error.stack}\n`;
+		errMsg += `${JSON.stringify(response?.error, null, '  ')}\n\`\`\``;
+		console.log(errMsg);
+	} catch {}
 
+	if(status === 409) {
 		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
 			Oops!
-			<div className='errorContainer'>
-				Looks like there was a problem saving. <br />
-				Report the issue <a target='_blank' rel='noopener noreferrer' href={`https://github.com/naturalcrit/homebrewery/issues/new?template=save_issue.yml&error-code=${encodeURIComponent(errMsg)}`}>
-				here
-				</a>.
+			<div className='errorContainer' onClick={clearError}>
+				{message ?? 'Conflict: please refresh to get latest changes'}
 			</div>
 		</Nav.item>;
 	}
-});
+
+	if(status === 412) {
+		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+			Oops!
+			<div className='errorContainer' onClick={clearError}>
+				{message ?? 'Your client is out of date. Please save your changes elsewhere and refresh.'}
+			</div>
+		</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!
+			<div className='errorContainer' onClick={clearError}>
+				Looks like your Google credentials have
+				expired! Visit our log in page to sign out
+				and sign back in with Google,
+				then try saving again!
+				<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(HBErrorCode === '09') {
+		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+			Oops!
+			<div className='errorContainer' onClick={clearError}>
+				Looks like there was a problem retreiving
+				the theme, or a theme that it inherits,
+				for this brew. Verify that brew <a className='lowercase' target='_blank' rel='noopener noreferrer' href={`/share/${response.body.brewId}`}>
+					{response.body.brewId}</a> still exists!
+			</div>
+		</Nav.item>;
+	}
+
+	if(HBErrorCode === '10') {
+		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+			Oops!
+			<div className='errorContainer' onClick={clearError}>
+				Looks like the brew you have selected
+				as a theme is not tagged for use as a
+				theme. Verify that
+				brew <a className='lowercase' target='_blank' rel='noopener noreferrer' href={`/share/${response.body.brewId}`}>
+					{response.body.brewId}</a> has the <span className='lowercase'>meta:theme</span> tag!
+			</div>
+		</Nav.item>;
+	}
+
+	if(HBErrorCode === '13') {
+		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+			Oops!
+			<div className='errorContainer' onClick={clearError}>
+				Server has lost connection to the database.
+			</div>
+		</Nav.item>;
+	}
+
+	if(errorCode === 'ECONNABORTED') {
+		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+			Oops!
+			<div className='errorContainer' onClick={clearError}>
+				The request to the server was interrupted or timed out.
+				This can happen due to a network issue, or if
+				trying to save a particularly large brew.
+				Please check your internet connection and try again.
+			</div>
+		</Nav.item>;
+	}
+
+	return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+		Oops!
+		<div className='errorContainer'>
+			Looks like there was a problem saving. <br />
+			Report the issue <a target='_blank' rel='noopener noreferrer' href={`https://github.com/naturalcrit/homebrewery/issues/new?template=save_issue.yml&error-code=${encodeURIComponent(errMsg)}`}>
+			here
+			</a>.
+		</div>
+	</Nav.item>;
+};
 
 module.exports = ErrorNavItem;

client/homebrew/navbar/help.navitem.jsx

@@ -1,7 +1,7 @@
 const React = require('react');
 const dedent = require('dedent-tabs').default;
 
-const Nav = require('naturalcrit/nav/nav.jsx');
+const Nav = require('client/homebrew/navbar/nav.jsx');
 
 module.exports = function(props){
 	return <Nav.dropdown>

client/homebrew/navbar/metadata.navitem.jsx

@@ -2,7 +2,7 @@ const React = require('react');
 const createClass = require('create-react-class');
 const Moment = require('moment');
 
-const Nav = require('naturalcrit/nav/nav.jsx');
+const Nav = require('client/homebrew/navbar/nav.jsx');
 
 
 const MetadataNav = createClass({

client/homebrew/navbar/nav.jsx

@@ -5,7 +5,7 @@ const createClass = require('create-react-class');
 const _ = require('lodash');
 const cx = require('classnames');
 
-const NaturalCritIcon = require('naturalcrit/svg/naturalcrit.svg.jsx');
+const NaturalCritIcon = require('client/components/svg/naturalcrit-d20.svg.jsx');
 
 const Nav = {
 	base : createClass({

client/homebrew/navbar/navbar.jsx

@@ -2,7 +2,7 @@ require('./navbar.less');
 const React = require('react');
 const createClass = require('create-react-class');
 
-const Nav = require('naturalcrit/nav/nav.jsx');
+const Nav = require('client/homebrew/navbar/nav.jsx');
 const PatreonNavItem = require('./patreon.navitem.jsx');
 
 const Navbar = createClass({

client/homebrew/navbar/navbar.less

@@ -37,7 +37,10 @@
 
 		&:has(.brewTitle) {
 			flex-grow : 1;
-			min-width : 300px; 
+			min-width : 300px;
+		}
+		>.brewTitle {
+			cursor:auto;
 		}
 	}
 	// "NaturalCrit" logo

client/homebrew/navbar/newbrew.navitem.jsx

@@ -1,37 +1,49 @@
 const React = require('react');
 const _ = require('lodash');
-const Nav = require('naturalcrit/nav/nav.jsx');
+const Nav = require('client/homebrew/navbar/nav.jsx');
 const { splitTextStyleAndMetadata } = require('../../../shared/helpers.js'); // Importing the function from helpers.js
 
 const BREWKEY  = 'homebrewery-new';
 const STYLEKEY = 'homebrewery-new-style';
-const METAKEY  = 'homebrewery-new-meta';
+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);
-		}
+		if(!file) return;
+
+		const currentNew = localStorage.getItem(BREWKEY);
+		if(currentNew && !confirm(
+			`You have some text in the new brew space, if you load a file that text will be lost, are you sure you want to load the file?`
+		)) return;
+
+		const reader = new FileReader();
+		reader.onload = (e)=>{
+			const fileContent = e.target.result;
+			const newBrew = { text: fileContent, style: '' };
+
+			if(fileContent.startsWith('```metadata')) {
+				splitTextStyleAndMetadata(newBrew);
+				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';
+				return;
+			}
+
+			const type = file.name.split('.').pop().toLowerCase();
+
+			alert(`This file is invalid: ${!type ? 'Missing file extension' :`.${type} files are not supported`}. Only .txt files exported from the Homebrewery are allowed.`);
+
+
+			console.log(file);
+		};
+		reader.readAsText(file);
 	};
 
+
 	return (
 		<Nav.dropdown>
 			<Nav.item

client/homebrew/navbar/patreon.navitem.jsx

@@ -1,5 +1,5 @@
 const React = require('react');
-const Nav = require('naturalcrit/nav/nav.jsx');
+const Nav = require('client/homebrew/navbar/nav.jsx');
 
 module.exports = function(props){
 	return <Nav.item

client/homebrew/navbar/print.navitem.jsx

@@ -1,5 +1,5 @@
 const React = require('react');
-const Nav = require('naturalcrit/nav/nav.jsx');
+const Nav = require('client/homebrew/navbar/nav.jsx');
 const { printCurrentBrew } = require('../../../shared/helpers.js');
 
 module.exports = function(){

client/homebrew/navbar/recent.navitem.jsx

@@ -3,10 +3,10 @@ const createClass = require('create-react-class');
 const _ = require('lodash');
 const Moment = require('moment');
 
-const Nav = require('naturalcrit/nav/nav.jsx');
+const Nav = require('client/homebrew/navbar/nav.jsx');
 
-const EDIT_KEY = 'homebrewery-recently-edited';
-const VIEW_KEY = 'homebrewery-recently-viewed';
+const EDIT_KEY = 'HB_nav_recentlyEdited';
+const VIEW_KEY = 'HB_nav_recentlyViewed';
 
 
 const RecentItems = createClass({

client/homebrew/navbar/share.navitem.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import dedent from 'dedent-tabs';
+import Nav from 'client/homebrew/navbar/nav.jsx';
+
+const getShareId = (brew)=>(
+	brew.googleId && !brew.stubbed
+		? brew.googleId + brew.shareId
+		: brew.shareId
+);
+
+const getRedditLink = (brew)=>{
+	const text = dedent`
+			Hey guys! I've been working on this homebrew. I'd love your feedback. Check it out.
+
+			**[Homebrewery Link](${global.config.baseUrl}/share/${getShareId(brew)})**`;
+
+	return `https://www.reddit.com/r/UnearthedArcana/submit?title=${encodeURIComponent(brew.title.toWellFormed())}&text=${encodeURIComponent(text)}`;
+};
+
+export default ({ brew })=>(
+	<Nav.dropdown>
+		<Nav.item color='teal' icon='fas fa-share-alt'>
+			share
+		</Nav.item>
+		<Nav.item color='blue' href={`/share/${getShareId(brew)}`}>
+			view
+		</Nav.item>
+		<Nav.item color='blue' onClick={()=>{navigator.clipboard.writeText(`${global.config.baseUrl}/share/${getShareId(brew)}`);}}>
+			copy url
+		</Nav.item>
+		<Nav.item color='blue' href={getRedditLink(brew)} newTab rel='noopener noreferrer'>
+			post to reddit
+		</Nav.item>
+	</Nav.dropdown>
+);

client/homebrew/navbar/vault.navitem.jsx

@@ -1,6 +1,6 @@
 const React = require('react');
 
-const Nav = require('naturalcrit/nav/nav.jsx');
+const Nav = require('client/homebrew/navbar/nav.jsx');
 
 module.exports = function (props) {
 	return (

client/homebrew/pages/accountPage/accountPage.jsx

@@ -1,7 +1,7 @@
 const React  = require('react');
 const moment = require('moment');
 const UIPage = require('../basePages/uiPage/uiPage.jsx');
-const NaturalCritIcon = require('naturalcrit/svg/naturalcrit.svg.jsx');
+const NaturalCritIcon = require('client/components/svg/naturalcrit-d20.svg.jsx');
 
 let SAVEKEY = '';
 
@@ -13,7 +13,7 @@ const AccountPage = (props)=>{
 	// initialize save location from local storage based on user id
 	React.useEffect(()=>{
 		if(!saveLocation && accountDetails.username) {
-			SAVEKEY = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${accountDetails.username}`;
+			SAVEKEY = `HB_editor_defaultSave_${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');

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

@@ -7,7 +7,9 @@ const moment      = require('moment');
 
 const BrewItem    = require('./brewItem/brewItem.jsx');
 
-const USERPAGE_KEY_PREFIX = 'HOMEBREWERY-LISTPAGE';
+const USERPAGE_SORT_DIR = 'HB_listPage_sortDir';
+const USERPAGE_SORT_TYPE = 'HB_listPage_sortType';
+const USERPAGE_GROUP_VISIBILITY_PREFIX = 'HB_listPage_visibility_group';
 
 const DEFAULT_SORT_TYPE = 'alpha';
 const DEFAULT_SORT_DIR = 'asc';
@@ -50,12 +52,12 @@ const ListPage = createClass({
 
 		// LOAD FROM LOCAL STORAGE
 		if(typeof window !== 'undefined') {
-			const newSortType = (this.state.sortType ?? (localStorage.getItem(`${USERPAGE_KEY_PREFIX}-SORTTYPE`) || DEFAULT_SORT_TYPE));
-			const newSortDir = (this.state.sortDir ?? (localStorage.getItem(`${USERPAGE_KEY_PREFIX}-SORTDIR`) || DEFAULT_SORT_DIR));
+			const newSortType = (this.state.sortType ?? (localStorage.getItem(USERPAGE_SORT_TYPE) || DEFAULT_SORT_TYPE));
+			const newSortDir = (this.state.sortDir ?? (localStorage.getItem(USERPAGE_SORT_DIR) || DEFAULT_SORT_DIR));
 			this.updateUrl(this.state.filterString, newSortType, newSortDir);
 
 			const brewCollection = this.props.brewCollection.map((brewGroup)=>{
-				brewGroup.visible = (localStorage.getItem(`${USERPAGE_KEY_PREFIX}-VISIBILITY-${brewGroup.class}`) ?? 'true')=='true';
+				brewGroup.visible = (localStorage.getItem(`${USERPAGE_GROUP_VISIBILITY_PREFIX}_${brewGroup.class}`) ?? 'true')=='true';
 				return brewGroup;
 			});
 
@@ -73,10 +75,10 @@ const ListPage = createClass({
 
 	saveToLocalStorage : function() {
 		this.state.brewCollection.map((brewGroup)=>{
-			localStorage.setItem(`${USERPAGE_KEY_PREFIX}-VISIBILITY-${brewGroup.class}`, `${brewGroup.visible}`);
+			localStorage.setItem(`${USERPAGE_GROUP_VISIBILITY_PREFIX}_${brewGroup.class}`, `${brewGroup.visible}`);
 		});
-		localStorage.setItem(`${USERPAGE_KEY_PREFIX}-SORTTYPE`, this.state.sortType);
-		localStorage.setItem(`${USERPAGE_KEY_PREFIX}-SORTDIR`, this.state.sortDir);
+		localStorage.setItem(USERPAGE_SORT_TYPE, this.state.sortType);
+		localStorage.setItem(USERPAGE_SORT_DIR, this.state.sortDir);
 	},
 
 	renderBrews : function(brews){

client/homebrew/pages/basePages/uiPage/uiPage.jsx

@@ -2,12 +2,12 @@ require('./uiPage.less');
 const React = require('react');
 const createClass = require('create-react-class');
 
-const Nav = require('naturalcrit/nav/nav.jsx');
-const Navbar = require('../../../navbar/navbar.jsx');
-const NewBrewItem = require('../../../navbar/newbrew.navitem.jsx');
-const HelpNavItem = require('../../../navbar/help.navitem.jsx');
-const RecentNavItem = require('../../../navbar/recent.navitem.jsx').both;
-const Account = require('../../../navbar/account.navitem.jsx');
+const Nav = require('client/homebrew/navbar/nav.jsx');
+const Navbar = require('client/homebrew/navbar/navbar.jsx');
+const NewBrewItem = require('client/homebrew/navbar/newbrew.navitem.jsx');
+const HelpNavItem = require('client/homebrew/navbar/help.navitem.jsx');
+const RecentNavItem = require('client/homebrew/navbar/recent.navitem.jsx').both;
+const Account = require('client/homebrew/navbar/account.navitem.jsx');
 
 
 const UIPage = createClass({

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

@@ -29,6 +29,7 @@
 						&::before {
 							margin-right : 5px;
 							font-family  : 'Font Awesome 6 Free';
+							font-weight  : 900;
 							content      : '\f00c';
 						}
 					}

client/homebrew/pages/editPage/editPage.jsx

@@ -1,529 +1,415 @@
 /* eslint-disable max-lines */
-require('./editPage.less');
-const React = require('react');
-const _ = require('lodash');
-const createClass = require('create-react-class');
-import {makePatches, applyPatches, stringifyPatches, parsePatches} from '@sanity/diff-match-patch';
-import { md5 } from 'hash-wasm';
-import { gzipSync, strToU8 } from 'fflate';
+import './editPage.less';
 
-import request from '../../utils/request-middleware.js';
-const { Meta } = require('vitreum/headtags');
+// Common imports
+import React, { useState, useEffect, useRef } from 'react';
+import request                                from '../../utils/request-middleware.js';
+import Markdown                               from 'markdown.js';
+import _                                      from 'lodash';
 
-const Nav = require('naturalcrit/nav/nav.jsx');
-const Navbar = require('../../navbar/navbar.jsx');
+import { DEFAULT_BREW_LOAD }                  from '../../../../server/brewDefaults.js';
+import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '../../../../shared/helpers.js';
 
-const NewBrew = require('../../navbar/newbrew.navitem.jsx');
-const HelpNavItem = require('../../navbar/help.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;
-const VaultNavItem = require('../../navbar/vault.navitem.jsx');
+import SplitPane    from 'client/components/splitPane/splitPane.jsx';
+import Editor       from '../../editor/editor.jsx';
+import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
 
-const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
-const Editor = require('../../editor/editor.jsx');
-const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
+import Nav                       from 'client/homebrew/navbar/nav.jsx';
+import Navbar                    from 'client/homebrew/navbar/navbar.jsx';
+import NewBrewItem               from 'client/homebrew/navbar/newbrew.navitem.jsx';
+import AccountNavItem            from 'client/homebrew/navbar/account.navitem.jsx';
+import ErrorNavItem              from 'client/homebrew/navbar/error-navitem.jsx';
+import HelpNavItem               from 'client/homebrew/navbar/help.navitem.jsx';
+import VaultNavItem              from 'client/homebrew/navbar/vault.navitem.jsx';
+import PrintNavItem              from 'client/homebrew/navbar/print.navitem.jsx';
+import { both as RecentNavItem } from 'client/homebrew/navbar/recent.navitem.jsx';
 
-const LockNotification = require('./lockNotification/lockNotification.jsx');
-
-import Markdown from 'naturalcrit/markdown.js';
-
-const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
-const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js');
+// Page specific imports
+import { Meta }                          from 'vitreum/headtags';
+import { md5 }                           from 'hash-wasm';
+import { gzipSync, strToU8 }             from 'fflate';
+import { makePatches, stringifyPatches } from '@sanity/diff-match-patch';
 
+import ShareNavItem              from 'client/homebrew/navbar/share.navitem.jsx';
+import LockNotification from './lockNotification/lockNotification.jsx';
 import { updateHistory, versionHistoryGarbageCollection } from '../../utils/versionHistory.js';
-
-const googleDriveIcon = require('../../googleDrive.svg');
+import googleDriveIcon from '../../googleDrive.svg';
 
 const SAVE_TIMEOUT = 10000;
+const UNSAVED_WARNING_TIMEOUT = 900000; //Warn user afer 15 minutes of unsaved changes
+const UNSAVED_WARNING_POPUP_TIMEOUT = 4000; //Show the warning for 4 seconds
 
-const EditPage = createClass({
-	displayName     : 'EditPage',
-	getDefaultProps : function() {
-		return {
-			brew : DEFAULT_BREW_LOAD
-		};
-	},
 
-	getInitialState : function() {
-		return {
-			brew                       : this.props.brew,
-			isSaving                   : false,
-			unsavedChanges             : false,
-			alertTrashedGoogleBrew     : this.props.brew.trashed,
-			alertLoginToTransfer       : false,
-			saveGoogle                 : this.props.brew.googleId ? true : false,
-			confirmGoogleTransfer      : false,
-			error                      : null,
-			htmlErrors                 : Markdown.validate(this.props.brew.text),
-			url                        : '',
-			autoSave                   : true,
-			autoSaveWarning            : false,
-			unsavedTime                : new Date(),
-			currentEditorViewPageNum   : 1,
-			currentEditorCursorPageNum : 1,
-			currentBrewRendererPageNum : 1,
-			displayLockMessage         : this.props.brew.lock || false,
-			themeBundle                : {}
-		};
-	},
+const AUTOSAVE_KEY = 'HB_editor_autoSaveOn';
+const BREWKEY  = 'HB_newPage_content';
+const STYLEKEY = 'HB_newPage_style';
+const SNIPKEY  = 'HB_newPage_snippets';
+const METAKEY  = 'HB_newPage_meta';
 
-	editor    : React.createRef(null),
-	savedBrew : null,
+const useLocalStorage = false;
+const neverSaved			= false;
 
-	componentDidMount : function(){
-		this.setState({
-			url : window.location.href
-		});
+const EditPage = (props)=>{
+	props = {
+		brew : DEFAULT_BREW_LOAD,
+		...props
+	};
 
-		this.savedBrew = JSON.parse(JSON.stringify(this.props.brew)); //Deep copy
+	const [currentBrew               , setCurrentBrew               ] = useState(props.brew);
+	const [isSaving                  , setIsSaving                  ] = useState(false);
+	const [lastSavedTime             , setLastSavedTime             ] = useState(new Date());
+  const [saveGoogle                , setSaveGoogle                ] = useState(!!props.brew.googleId);
+	const [error                     , setError                     ] = useState(null);
+	const [HTMLErrors                , setHTMLErrors                ] = useState(Markdown.validate(props.brew.text));
+	const [currentEditorViewPageNum  , setCurrentEditorViewPageNum  ] = useState(1);
+	const [currentEditorCursorPageNum, setCurrentEditorCursorPageNum] = useState(1);
+	const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1);
+	const [themeBundle               , setThemeBundle               ] = useState({});
+	const [unsavedChanges            , setUnsavedChanges            ] = useState(false);
+	const [alertTrashedGoogleBrew    , setAlertTrashedGoogleBrew    ] = useState(props.brew.trashed);
+	const [alertLoginToTransfer      , setAlertLoginToTransfer      ] = useState(false);
+	const [confirmGoogleTransfer     , setConfirmGoogleTransfer     ] = useState(false);
+	const [autoSaveEnabled           , setAutoSaveEnabled           ] = useState(true);
+	const [warnUnsavedChanges        , setWarnUnsavedChanges        ] = useState(true);
 
-		this.setState({ autoSave: JSON.parse(localStorage.getItem('AUTOSAVE_ON')) ?? true }, ()=>{
-			if(this.state.autoSave){
-				this.trySave();
-			} else {
-				this.setState({ autoSaveWarning: true });
+	const editorRef          = useRef(null);
+	const lastSavedBrew      = useRef(_.cloneDeep(props.brew));
+	const saveTimeout        = useRef(null);
+	const warnUnsavedTimeout = useRef(null);
+	const trySaveRef         = useRef(trySave); // CTRL+S listener lives outside React and needs ref to use trySave with latest copy of brew
+	const unsavedChangesRef  = useRef(unsavedChanges); // Similarly, onBeforeUnload lives outside React and needs ref to unsavedChanges
+
+	useEffect(()=>{
+		const autoSavePref = JSON.parse(localStorage.getItem(AUTOSAVE_KEY) ?? true);
+		setAutoSaveEnabled(autoSavePref);
+		setWarnUnsavedChanges(!autoSavePref);
+		setHTMLErrors(Markdown.validate(currentBrew.text));
+		fetchThemeBundle(setError, setThemeBundle, currentBrew.renderer, currentBrew.theme);
+
+		const handleControlKeys = (e)=>{
+			if(!(e.ctrlKey || e.metaKey)) return;
+			if(e.keyCode === 83) trySaveRef.current(true);
+			if(e.keyCode === 80) printCurrentBrew();
+			if([83, 80].includes(e.keyCode)) {
+				e.stopPropagation();
+				e.preventDefault();
 			}
-		});
+		};
 
+		document.addEventListener('keydown', handleControlKeys);
 		window.onbeforeunload = ()=>{
-			if(this.state.isSaving || this.state.unsavedChanges){
+			if(unsavedChangesRef.current)
 				return 'You have unsaved changes!';
-			}
 		};
+		return ()=>{
+			document.removeEventListener('keydown', handleControlKeys);
+			window.onBeforeUnload = null;
+		};
+	}, []);
 
-		this.setState((prevState)=>({
-			htmlErrors : Markdown.validate(prevState.brew.text)
-		}));
+	useEffect(()=>{
+		trySaveRef.current = trySave;
+		unsavedChangesRef.current = unsavedChanges;
+	});
 
-		fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme);
+	useEffect(()=>{
+		const hasChange = !_.isEqual(currentBrew, lastSavedBrew.current);
+		setUnsavedChanges(hasChange);
 
-		document.addEventListener('keydown', this.handleControlKeys);
-	},
-	componentWillUnmount : function() {
-		window.onbeforeunload = function(){};
-		document.removeEventListener('keydown', this.handleControlKeys);
-	},
-	componentDidUpdate : function(){
-		const hasChange = this.hasChanges();
-		if(this.state.unsavedChanges != hasChange){
-			this.setState({
-				unsavedChanges : hasChange
-			});
+		if(autoSaveEnabled) trySave(false, hasChange);
+	}, [currentBrew]);
+
+	const handleSplitMove = ()=>{
+		editorRef.current?.update();
+	};
+
+	const handleBrewChange = (field)=>(value, subfield)=>{	//'text', 'style', 'snippets', 'metadata'
+		if(subfield == 'renderer' || subfield == 'theme')
+			fetchThemeBundle(setError, setThemeBundle, value.renderer, value.theme);
+
+		//If there are HTML errors, run the validator on every change to give quick feedback
+		if(HTMLErrors.length && (field == 'text' || field == 'snippets'))
+			setHTMLErrors(Markdown.validate(value));
+
+		if(field == 'metadata') setCurrentBrew((prev)=>({ ...prev, ...value }));
+		else                    setCurrentBrew((prev)=>({ ...prev, [field]: value }));
+
+		if(useLocalStorage) {
+			if(field == 'text')     localStorage.setItem(BREWKEY, value);
+			if(field == 'style')    localStorage.setItem(STYLEKEY, value);
+			if(field == 'snippets') localStorage.setItem(SNIPKEY, value);
+			if(field == 'metadata') localStorage.setItem(METAKEY, JSON.stringify({
+				renderer : value.renderer,
+				theme    : value.theme,
+				lang     : value.lang
+			}));
 		}
-	},
+	};
 
-	handleControlKeys : function(e){
-		if(!(e.ctrlKey || e.metaKey)) return;
-		const S_KEY = 83;
-		const P_KEY = 80;
-		if(e.keyCode == S_KEY) this.trySave(true);
-		if(e.keyCode == P_KEY) printCurrentBrew();
-		if(e.keyCode == P_KEY || e.keyCode == S_KEY){
-			e.stopPropagation();
-			e.preventDefault();
-		}
-	},
+	const updateBrew = (newData)=>setCurrentBrew((prevBrew)=>({
+		...prevBrew,
+		style    : newData.style,
+		text     : newData.text,
+		snippets : newData.snippets
+	}));
 
-	handleSplitMove : function(){
-		this.editor.current.update();
-	},
+	const resetWarnUnsavedTimer = ()=>{
+		setTimeout(()=>setWarnUnsavedChanges(false), UNSAVED_WARNING_POPUP_TIMEOUT); // Hide the warning after 4 seconds
+		clearTimeout(warnUnsavedTimeout.current);
+		warnUnsavedTimeout.current = setTimeout(()=>setWarnUnsavedChanges(true), UNSAVED_WARNING_TIMEOUT); // 15 minutes between unsaved work warnings
+	};
 
-	handleEditorViewPageChange : function(pageNumber){
-		this.setState({ currentEditorViewPageNum: pageNumber });
-	},
-
-	handleEditorCursorPageChange : function(pageNumber){
-		this.setState({ currentEditorCursorPageNum: pageNumber });
-	},
-
-	handleBrewRendererPageChange : function(pageNumber){
-		this.setState({ currentBrewRendererPageNum: pageNumber });
-	},
-
-	handleTextChange : function(text){
-		//If there are errors, run the validator on every change to give quick feedback
-		let htmlErrors = this.state.htmlErrors;
-		if(htmlErrors.length) htmlErrors = Markdown.validate(text);
-
-		this.setState((prevState)=>({
-			brew       : { ...prevState.brew, text: text },
-			htmlErrors : htmlErrors,
-		}), ()=>{if(this.state.autoSave) this.trySave();});
-	},
-
-	handleSnipChange : function(snippet){
-		//If there are errors, run the validator on every change to give quick feedback
-		let htmlErrors = this.state.htmlErrors;
-		if(htmlErrors.length) htmlErrors = Markdown.validate(snippet);
-
-		this.setState((prevState)=>({
-			brew           : { ...prevState.brew, snippets: snippet },
-			unsavedChanges : true,
-			htmlErrors     : htmlErrors,
-		}), ()=>{if(this.state.autoSave) this.trySave();});
-	},
-
-	handleStyleChange : function(style){
-		this.setState((prevState)=>({
-			brew : { ...prevState.brew, style: style }
-		}), ()=>{if(this.state.autoSave) this.trySave();});
-	},
-
-	handleMetaChange : function(metadata, field=undefined){
-		if(field == 'theme' || field == 'renderer')	// Fetch theme bundle only if theme or renderer was changed
-			fetchThemeBundle(this, metadata.renderer, metadata.theme);
-
-		this.setState((prevState)=>({
-			brew : {
-				...prevState.brew,
-				...metadata
-			}
-		}), ()=>{if(this.state.autoSave) this.trySave();});
-	},
-
-	hasChanges : function(){
-		return !_.isEqual(this.state.brew, this.savedBrew);
-	},
-
-	updateBrew : function(newData){
-		this.setState((prevState)=>({
-			brew : {
-				...prevState.brew,
-				style    : newData.style,
-				text     : newData.text,
-				snippets : newData.snippets
-			}
-		}));
-	},
-
-	trySave : function(immediate=false){
-		if(!this.debounceSave) this.debounceSave = _.debounce(this.save, SAVE_TIMEOUT);
-		if(this.state.isSaving)
-			return;
-
-		if(immediate) {
-			this.debounceSave();
-			this.debounceSave.flush();
-			return;
-		}
-		
-		if(this.hasChanges())
-			this.debounceSave();
-		else
-			this.debounceSave.cancel();
-	},
-
-	handleGoogleClick : function(){
+	const handleGoogleClick = ()=>{
 		if(!global.account?.googleId) {
-			this.setState({
-				alertLoginToTransfer : true
-			});
+			setAlertLoginToTransfer(true);
 			return;
 		}
-		this.setState((prevState)=>({
-			confirmGoogleTransfer : !prevState.confirmGoogleTransfer
-		}));
-		this.setState({
-			error    : null
-		});
-	},
 
-	closeAlerts : function(event){
-		event.stopPropagation();	//Only handle click once so alert doesn't reopen
-		this.setState({
-			alertTrashedGoogleBrew : false,
-			alertLoginToTransfer   : false,
-			confirmGoogleTransfer  : false
-		});
-	},
+		setConfirmGoogleTransfer((prev)=>!prev);
+		setError(null);
+	};
 
-	toggleGoogleStorage : function(){
-		this.setState((prevState)=>({
-			saveGoogle : !prevState.saveGoogle,
-			error      : null
-		}), ()=>this.trySave(true));
-	},
+	const closeAlerts = (e)=>{
+		e.stopPropagation(); //Only handle click once so alert doesn't reopen
+		setAlertTrashedGoogleBrew(false);
+		setAlertLoginToTransfer(false);
+		setConfirmGoogleTransfer(false);
+	};
 
-	save : async function(){
-		if(this.debounceSave && this.debounceSave.cancel) this.debounceSave.cancel();
+	const toggleGoogleStorage = ()=>{
+		setSaveGoogle((prev)=>!prev);
+		setError(null);
+		trySave(true);
+	};
 
-		const brewState       = this.state.brew; // freeze the current state
-		const preSaveSnapshot = { ...brewState };
+	const trySave = (immediate = false, hasChanges = true)=>{
+		clearTimeout(saveTimeout.current);
+		if(isSaving) return;
+		if(!hasChanges && !immediate) return;
+		const newTimeout = immediate ? 0 : SAVE_TIMEOUT;
 
-		this.setState((prevState)=>({
-			isSaving   : true,
-			error      : null,
-			htmlErrors : Markdown.validate(prevState.brew.text)
-		}));
+		saveTimeout.current = setTimeout(async ()=>{
+			setIsSaving(true);
+			setError(null);
+			await save(currentBrew, saveGoogle)
+			.catch((err)=>{
+				setError(err);
+			});
+			setIsSaving(false);
+			setLastSavedTime(new Date());
+			if(!autoSaveEnabled) resetWarnUnsavedTimer();
+		}, newTimeout);
+	};
 
-		await updateHistory(this.state.brew).catch(console.error);
+	const save = async (brew, saveToGoogle)=>{
+		setHTMLErrors(Markdown.validate(brew.text));
+
+		await updateHistory(brew).catch(console.error);
 		await versionHistoryGarbageCollection().catch(console.error);
 
 		//Prepare content to send to server
-		const brew          = { ...brewState };
-		brew.text           = brew.text.normalize('NFC');
-		this.savedBrew.text = this.savedBrew.text.normalize('NFC');
-		brew.pageCount      = ((brew.renderer=='legacy' ? brew.text.match(/\\page/g) : brew.text.match(/^\\page$/gm)) || []).length + 1;
-		brew.patches        = stringifyPatches(makePatches(encodeURI(this.savedBrew.text), encodeURI(brew.text)));
-		brew.hash           = await md5(this.savedBrew.text);
-		//brew.text           = undefined; - Temporary parallel path
-		brew.textBin        = undefined;
+		const brewToSave = {
+			...brew,
+			text      : brew.text.normalize('NFC'),
+			pageCount : ((brew.renderer === 'legacy' ? brew.text.match(/\\page/g) : brew.text.match(/^\\page$/gm)) || []).length + 1,
+			patches   : stringifyPatches(makePatches(encodeURI(lastSavedBrew.current.text.normalize('NFC')), encodeURI(brew.text.normalize('NFC')))),
+			hash      : await md5(lastSavedBrew.current.text),
+			textBin   : undefined,
+			version   : lastSavedBrew.current.version
+		};
 
-		const compressedBrew = gzipSync(strToU8(JSON.stringify(brew)));
+		const compressedBrew = gzipSync(strToU8(JSON.stringify(brewToSave)));
+		const transfer = saveToGoogle === _.isNil(brew.googleId);
+		const params = transfer ? `?${saveToGoogle ? 'saveToGoogle' : 'removeFromGoogle'}=true` : '';
 
-		const transfer = this.state.saveGoogle == _.isNil(this.state.brew.googleId);
-		const params = `${transfer ? `?${this.state.saveGoogle ? 'saveToGoogle' : 'removeFromGoogle'}=true` : ''}`;
 		const res = await request
-			.put(`/api/update/${brew.editId}${params}`)
+			.put(`/api/update/${brewToSave.editId}${params}`)
 			.set('Content-Encoding', 'gzip')
 			.set('Content-Type', 'application/json')
 			.send(compressedBrew)
 			.catch((err)=>{
-				console.log('Error Updating Local Brew');
-				this.setState({ error: err });
+				console.error('Error Updating Local Brew');
+				setError(err);
 			});
 		if(!res) return;
 
-		this.savedBrew = {
-			...preSaveSnapshot,
-			googleId : res.body.googleId ? res.body.googleId : null,
-			editId 	 : res.body.editId,
+		const updatedFields = {
+			googleId : res.body.googleId ?? null,
+			editId   : res.body.editId,
 			shareId  : res.body.shareId,
 			version  : res.body.version
 		};
 
-		this.setState((prevState) => ({
-			brew: {
-				...prevState.brew,
-				googleId : res.body.googleId ? res.body.googleId : null,
-				editId 	 : res.body.editId,
-				shareId  : res.body.shareId,
-				version  : res.body.version
-			},
-			isSaving    : false,
-			unsavedTime : new Date()
-		}), ()=>{
-			this.setState({ unsavedChanges : this.hasChanges() });
-		});
+		lastSavedBrew.current = {
+			...brew,
+			...updatedFields
+		};
 
-		history.replaceState(null, null, `/edit/${this.savedBrew.editId}`);
-	},
+		setCurrentBrew((prevBrew)=>({
+			...prevBrew,
+			...updatedFields
+		}));
 
-	renderGoogleDriveIcon : function(){
-		return <Nav.item className='googleDriveStorage' onClick={this.handleGoogleClick}>
-			<img src={googleDriveIcon} className={this.state.saveGoogle ? '' : 'inactive'} alt='Google Drive icon'/>
+		history.replaceState(null, null, `/edit/${res.body.editId}`);
+	};
 
-			{this.state.confirmGoogleTransfer &&
-				<div className='errorContainer' onClick={this.closeAlerts}>
-					{ this.state.saveGoogle
-						?	`Would you like to transfer this brew from your Google Drive storage back to the Homebrewery?`
-						: `Would you like to transfer this brew from the Homebrewery to your personal Google Drive storage?`
-					}
+	const renderGoogleDriveIcon = ()=>(
+		<Nav.item className='googleDriveStorage' onClick={handleGoogleClick}>
+			<img src={googleDriveIcon} className={saveGoogle ? '' : 'inactive'} alt='Google Drive icon' />
+
+			{confirmGoogleTransfer && (
+				<div className='errorContainer' onClick={closeAlerts}>
+					{saveGoogle
+						? 'Would you like to transfer this brew from your Google Drive storage back to the Homebrewery?'
+						: 'Would you like to transfer this brew from the Homebrewery to your personal Google Drive storage?'}
 					<br />
-					<div className='confirm' onClick={this.toggleGoogleStorage}>
-						Yes
-					</div>
-					<div className='deny'>
-						No
-					</div>
+					<div className='confirm' onClick={toggleGoogleStorage}> Yes </div>
+					<div className='deny'>                                  No  </div>
 				</div>
-			}
+			)}
 
-			{this.state.alertLoginToTransfer &&
-				<div className='errorContainer' onClick={this.closeAlerts}>
-					You must be signed in to a Google account to transfer
-					between the homebrewery and Google Drive!
-					<a target='_blank' rel='noopener noreferrer'
-						href={`https://www.naturalcrit.com/login?redirect=${this.state.url}`}>
-						<div className='confirm'>
-							Sign In
-						</div>
+			{alertLoginToTransfer && (
+				<div className='errorContainer' onClick={closeAlerts}>
+					You must be signed in to a Google account to transfer between the homebrewery and Google Drive!
+					<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 className='deny'>      Not Now </div>
 				</div>
-			}
+			)}
 
-			{this.state.alertTrashedGoogleBrew &&
-				<div className='errorContainer' onClick={this.closeAlerts}>
-				This brew is currently in your Trash folder on Google Drive!<br />If you want to keep it, make sure to move it before it is deleted permanently!<br />
-					<div className='confirm'>
-						OK
-					</div>
+			{alertTrashedGoogleBrew && (
+				<div className='errorContainer' onClick={closeAlerts}>
+					This brew is currently in your Trash folder on Google Drive!<br />
+					If you want to keep it, make sure to move it before it is deleted permanently!<br />
+					<div className='confirm'> OK </div>
 				</div>
-			}
-		</Nav.item>;
-	},
-
-	renderSaveButton : function(){
+			)}
+		</Nav.item>
+	);
 
+	const renderSaveButton = ()=>{
 		// #1 - Currently saving, show SAVING
-		if(this.state.isSaving){
+		if(isSaving)
 			return <Nav.item className='save' icon='fas fa-spinner fa-spin'>saving...</Nav.item>;
-		}
 
 		// #2 - Unsaved changes exist, autosave is OFF and warning timer has expired, show AUTOSAVE WARNING
-		if(this.state.unsavedChanges && this.state.autoSaveWarning){
-			this.setAutosaveWarning();
-			const elapsedTime = Math.round((new Date() - this.state.unsavedTime) / 1000 / 60);
-			const text = elapsedTime == 0 ? 'Autosave is OFF.' : `Autosave is OFF, and you haven't saved for ${elapsedTime} minutes.`;
+		if(unsavedChanges && warnUnsavedChanges) {
+			resetWarnUnsavedTimer();
+			const elapsedTime = Math.round((new Date() - lastSavedTime) / 1000 / 60);
+			const text = elapsedTime === 0
+				? 'Autosave is OFF.'
+				: `Autosave is OFF, and you haven't saved for ${elapsedTime} minutes.`;
 
 			return <Nav.item className='save error' icon='fas fa-exclamation-circle'>
-			Reminder...
-				<div className='errorContainer'>
-					{text}
-				</div>
+							Reminder...
+				<div className='errorContainer'>{text}</div>
 			</Nav.item>;
 		}
 
 		// #3 - Unsaved changes exist, click to save, show SAVE NOW
-		// Use trySave(true) instead of save() to use debounced save function
-		if(this.state.unsavedChanges){
-			return <Nav.item className='save' onClick={()=>this.trySave(true)} color='blue' icon='fas fa-save'>Save Now</Nav.item>;
-		}
+		if(unsavedChanges)
+			return <Nav.item className='save' onClick={()=>trySave(true)} color='blue' icon='fas fa-save'>save now</Nav.item>;
+
 		// #4 - No unsaved changes, autosave is ON, show AUTO-SAVED
-		if(this.state.autoSave){
-			return <Nav.item className='save saved'>auto-saved.</Nav.item>;
-		}
+		if(autoSaveEnabled)
+			return <Nav.item className='save saved'>auto-saved</Nav.item>;
+
+		// #5 - No unsaved changes, and has never been saved, hide the button
+		if(neverSaved)
+			return <Nav.item className='save neverSaved'>save now</Nav.item>;
+
 		// DEFAULT - No unsaved changes, show SAVED
-		return <Nav.item className='save saved'>saved.</Nav.item>;
-	},
+		return <Nav.item className='save saved'>saved</Nav.item>;
+	};
 
-	handleAutoSave : function(){
-		if(this.warningTimer) clearTimeout(this.warningTimer);
-		this.setState((prevState)=>({
-			autoSave        : !prevState.autoSave,
-			autoSaveWarning : prevState.autoSave
-		}), ()=>{
-			localStorage.setItem('AUTOSAVE_ON', JSON.stringify(this.state.autoSave));
-		});
-	},
+	const toggleAutoSave = ()=>{
+		clearTimeout(warnUnsavedTimeout.current);
+		clearTimeout(saveTimeout.current);
+		localStorage.setItem(AUTOSAVE_KEY, JSON.stringify(!autoSaveEnabled));
+		setAutoSaveEnabled(!autoSaveEnabled);
+		setWarnUnsavedChanges(autoSaveEnabled);
+	};
 
-	setAutosaveWarning : function(){
-		setTimeout(()=>this.setState({ autoSaveWarning: false }), 4000);                           // 4 seconds to display
-		this.warningTimer = setTimeout(()=>{this.setState({ autoSaveWarning: true });}, 900000);   // 15 minutes between warnings
-		this.warningTimer;
-	},
+	const renderAutoSaveButton = ()=>(
+		<Nav.item onClick={toggleAutoSave}>
+			Autosave <i className={autoSaveEnabled ? 'fas fa-power-off active' : 'fas fa-power-off'}></i>
+		</Nav.item>
+	);
 
-	errorReported : function(error) {
-		this.setState({
-			error
-		});
-	},
-
-	renderAutoSaveButton : function(){
-		return <Nav.item onClick={this.handleAutoSave}>
-			Autosave <i className={this.state.autoSave ? 'fas fa-power-off active' : 'fas fa-power-off'}></i>
-		</Nav.item>;
-	},
-
-	processShareId : function() {
-		return this.state.brew.googleId && !this.state.brew.stubbed ?
-					 this.state.brew.googleId + this.state.brew.shareId :
-					 this.state.brew.shareId;
-	},
-
-	getRedditLink : function(){
-
-		const shareLink = this.processShareId();
-		const systems = this.props.brew.systems.length > 0 ? ` [${this.props.brew.systems.join(' - ')}]` : '';
-		const title = `${this.props.brew.title} ${systems}`;
-		const text = `Hey guys! I've been working on this homebrew. I'd love your feedback. Check it out.
-
-**[Homebrewery Link](${global.config.baseUrl}/share/${shareLink})**`;
-
-		return `https://www.reddit.com/r/UnearthedArcana/submit?title=${encodeURIComponent(title.toWellFormed())}&text=${encodeURIComponent(text)}`;
-	},
-
-	renderNavbar : function(){
-		const shareLink = this.processShareId();
+	const clearError = ()=>{
+		setError(null);
+		setIsSaving(false);
+	};
 
+	const renderNavbar = ()=>{
 		return <Navbar>
 			<Nav.section>
-				<Nav.item className='brewTitle'>{this.state.brew.title}</Nav.item>
+				<Nav.item className='brewTitle'>{currentBrew.title}</Nav.item>
 			</Nav.section>
 
 			<Nav.section>
-				{this.renderGoogleDriveIcon()}
-				{this.state.error ?
-					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
-					<Nav.dropdown className='save-menu'>
-						{this.renderSaveButton()}
-						{this.renderAutoSaveButton()}
-					</Nav.dropdown>
-				}
-				<NewBrew />
-				<HelpNavItem/>
-				<Nav.dropdown>
-					<Nav.item color='teal' icon='fas fa-share-alt'>
-						share
-					</Nav.item>
-					<Nav.item color='blue' href={`/share/${shareLink}`}>
-						view
-					</Nav.item>
-					<Nav.item color='blue' onClick={()=>{navigator.clipboard.writeText(`${global.config.baseUrl}/share/${shareLink}`);}}>
-						copy url
-					</Nav.item>
-					<Nav.item color='blue' href={this.getRedditLink()} newTab={true} rel='noopener noreferrer'>
-						post to reddit
-					</Nav.item>
-				</Nav.dropdown>
+				{renderGoogleDriveIcon()}
+				{error
+					? <ErrorNavItem error={error} clearError={clearError} />
+					: <Nav.dropdown className='save-menu'>
+						{renderSaveButton()}
+						{renderAutoSaveButton()}
+					</Nav.dropdown>}
+				<NewBrewItem />
 				<PrintNavItem />
+				<HelpNavItem />
 				<VaultNavItem />
-				<RecentNavItem brew={this.state.brew} storageKey='edit' />
-				<Account />
+				<ShareNavItem brew={currentBrew} />
+				<RecentNavItem brew={currentBrew} storageKey='edit' />
+				<AccountNavItem/>
 			</Nav.section>
-
 		</Navbar>;
-	},
+	};
 
-	render : function(){
-		return <div className='editPage sitePage'>
+	return (
+		<div className='editPage sitePage'>
 			<Meta name='robots' content='noindex, nofollow' />
-			{this.renderNavbar()}
 
-			{this.props.brew.lock && <LockNotification shareId={this.props.brew.shareId} message={this.props.brew.lock.editMessage} reviewRequested={this.props.brew.lock.reviewRequested} />}
+			{renderNavbar()}
+
+			{currentBrew.lock && <LockNotification shareId={currentBrew.shareId} message={currentBrew.lock.editMessage} reviewRequested={currentBrew.lock.reviewRequested}/>}
+
 			<div className='content'>
-				<SplitPane onDragFinish={this.handleSplitMove}>
+				<SplitPane onDragFinish={handleSplitMove}>
 					<Editor
-						ref={this.editor}
-						brew={this.state.brew}
-						onTextChange={this.handleTextChange}
-						onStyleChange={this.handleStyleChange}
-						onSnipChange={this.handleSnipChange}
-						onMetaChange={this.handleMetaChange}
-						reportError={this.errorReported}
-						renderer={this.state.brew.renderer}
-						userThemes={this.props.userThemes}
-						themeBundle={this.state.themeBundle}
-						updateBrew={this.updateBrew}
-						onCursorPageChange={this.handleEditorCursorPageChange}
-						onViewPageChange={this.handleEditorViewPageChange}
-						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
+						ref={editorRef}
+						brew={currentBrew}
+						onBrewChange={handleBrewChange}
+						reportError={setError}
+						renderer={currentBrew.renderer}
+						userThemes={props.userThemes}
+						themeBundle={themeBundle}
+						updateBrew={updateBrew}
+						onCursorPageChange={setCurrentEditorCursorPageNum}
+						onViewPageChange={setCurrentEditorViewPageNum}
+						currentEditorViewPageNum={currentEditorViewPageNum}
+						currentEditorCursorPageNum={currentEditorCursorPageNum}
+						currentBrewRendererPageNum={currentBrewRendererPageNum}
 					/>
 					<BrewRenderer
-						text={this.state.brew.text}
-						style={this.state.brew.style}
-						renderer={this.state.brew.renderer}
-						theme={this.state.brew.theme}
-						themeBundle={this.state.themeBundle}
-						errors={this.state.htmlErrors}
-						lang={this.state.brew.lang}
-						onPageChange={this.handleBrewRendererPageChange}
-						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
+						text={currentBrew.text}
+						style={currentBrew.style}
+						renderer={currentBrew.renderer}
+						theme={currentBrew.theme}
+						themeBundle={themeBundle}
+						errors={HTMLErrors}
+						lang={currentBrew.lang}
+						onPageChange={setCurrentBrewRendererPageNum}
+						currentEditorViewPageNum={currentEditorViewPageNum}
+						currentEditorCursorPageNum={currentEditorCursorPageNum}
+						currentBrewRendererPageNum={currentBrewRendererPageNum}
 						allowPrint={true}
 					/>
 				</SplitPane>
 			</div>
-		</div>;
-	}
-});
+		</div>
+	);
+};
 
 module.exports = EditPage;

client/homebrew/pages/errorPage/errorPage.jsx

@@ -1,7 +1,7 @@
 require('./errorPage.less');
 const React      = require('react');
 const UIPage     = require('../basePages/uiPage/uiPage.jsx');
-import Markdown  from '../../../../shared/naturalcrit/markdown.js';
+import Markdown  from '../../../../shared/markdown.js';
 const ErrorIndex = require('./errors/errorIndex.js');
 
 const ErrorPage = ({ brew })=>{

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

@@ -196,6 +196,12 @@ const errorIndex = (props)=>{
 
 		**Brew ID:**  ${props.brew.brewId}`,
 
+		// Database Connection Lost
+		'13' : dedent`
+		## Database connection has been lost.
+		
+		The server could not communicate with the database.`,
+
 		//account page when account is not defined
 		'50' : dedent`
 		## You are not signed in

client/homebrew/pages/homePage/homePage.jsx

@@ -1,141 +1,224 @@
-require('./homePage.less');
-const React = require('react');
-const createClass = require('create-react-class');
-const cx = require('classnames');
-import request from '../../utils/request-middleware.js';
-const { Meta } = require('vitreum/headtags');
+/* eslint-disable max-lines */
+import './homePage.less';
 
-const Nav = require('naturalcrit/nav/nav.jsx');
-const Navbar = require('../../navbar/navbar.jsx');
-const NewBrewItem = require('../../navbar/newbrew.navitem.jsx');
-const HelpNavItem = require('../../navbar/help.navitem.jsx');
-const VaultNavItem = require('../../navbar/vault.navitem.jsx');
-const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
-const AccountNavItem = require('../../navbar/account.navitem.jsx');
-const ErrorNavItem = require('../../navbar/error-navitem.jsx');
-const { fetchThemeBundle } = require('../../../../shared/helpers.js');
+// Common imports
+import React, { useState, useEffect, useRef } from 'react';
+import request                                from '../../utils/request-middleware.js';
+import Markdown                               from 'markdown.js';
+import _                                      from 'lodash';
 
-const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
-const Editor = require('../../editor/editor.jsx');
-const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
+import { DEFAULT_BREW }                       from '../../../../server/brewDefaults.js';
+import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '../../../../shared/helpers.js';
 
-const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js');
+import SplitPane    from 'client/components/splitPane/splitPane.jsx';
+import Editor       from '../../editor/editor.jsx';
+import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
 
-const HomePage = createClass({
-	displayName     : 'HomePage',
-	getDefaultProps : function() {
-		return {
-			brew : DEFAULT_BREW,
-			ver  : '0.0.0'
+import Nav                       from 'client/homebrew/navbar/nav.jsx';
+import Navbar                    from 'client/homebrew/navbar/navbar.jsx';
+import NewBrewItem               from 'client/homebrew/navbar/newbrew.navitem.jsx';
+import AccountNavItem            from 'client/homebrew/navbar/account.navitem.jsx';
+import ErrorNavItem              from 'client/homebrew/navbar/error-navitem.jsx';
+import HelpNavItem               from 'client/homebrew/navbar/help.navitem.jsx';
+import VaultNavItem              from 'client/homebrew/navbar/vault.navitem.jsx';
+import PrintNavItem              from 'client/homebrew/navbar/print.navitem.jsx';
+import { both as RecentNavItem } from 'client/homebrew/navbar/recent.navitem.jsx';
+
+// Page specific imports
+import { Meta }                               from 'vitreum/headtags';
+
+const BREWKEY  = 'homebrewery-new';
+const STYLEKEY = 'homebrewery-new-style';
+const SNIPKEY  = 'homebrewery-new-snippets';
+const METAKEY  = 'homebrewery-new-meta';
+
+const useLocalStorage = false;
+const neverSaved      = true;
+
+const HomePage =(props)=>{
+	props = {
+		brew : DEFAULT_BREW,
+		ver  : '0.0.0',
+		...props
+	};
+
+	const [currentBrew               , setCurrentBrew]                = useState(props.brew);
+	const [error                     , setError]                      = useState(undefined);
+	const [HTMLErrors                , setHTMLErrors]                 = useState(Markdown.validate(props.brew.text));
+	const [currentEditorViewPageNum  , setCurrentEditorViewPageNum]   = useState(1);
+	const [currentEditorCursorPageNum, setCurrentEditorCursorPageNum] = useState(1);
+	const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1);
+	const [themeBundle               , setThemeBundle]                = useState({});
+	const [unsavedChanges            , setUnsavedChanges]             = useState(false);
+	const [isSaving                  , setIsSaving]                   = useState(false);
+	const [autoSaveEnabled           , setAutoSaveEnable]             = useState(false);
+
+	const editorRef     = useRef(null);
+	const lastSavedBrew = useRef(_.cloneDeep(props.brew));
+
+	useEffect(()=>{
+		fetchThemeBundle(setError, setThemeBundle, currentBrew.renderer, currentBrew.theme);
+
+		const handleControlKeys = (e)=>{
+			if(!(e.ctrlKey || e.metaKey)) return;
+			if(e.keyCode === 83) trySaveRef.current(true);
+			if(e.keyCode === 80) printCurrentBrew();
+			if([83, 80].includes(e.keyCode)) {
+				e.stopPropagation();
+				e.preventDefault();
+			}
 		};
-	},
-	getInitialState : function() {
-		return {
-			brew                       : this.props.brew,
-			welcomeText                : this.props.brew.text,
-			error                      : undefined,
-			currentEditorViewPageNum   : 1,
-			currentEditorCursorPageNum : 1,
-			currentBrewRendererPageNum : 1,
-			themeBundle                : {}
+
+		document.addEventListener('keydown', handleControlKeys);
+
+		return ()=>{
+			document.removeEventListener('keydown', handleControlKeys);
 		};
-	},
+	}, []);
 
-	editor : React.createRef(null),
-
-	componentDidMount : function() {
-		fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme);
-	},
-
-	handleSave : function(){
+	const save = ()=>{
 		request.post('/api')
-			.send(this.state.brew)
+			.send(currentBrew)
 			.end((err, res)=>{
 				if(err) {
-					this.setState({ error: err });
+					setError(err);
 					return;
 				}
-				const brew = res.body;
-				window.location = `/edit/${brew.editId}`;
+				const saved = res.body;
+				window.location = `/edit/${saved.editId}`;
 			});
-	},
-	handleSplitMove : function(){
-		this.editor.current.update();
-	},
+	};
 
-	handleEditorViewPageChange : function(pageNumber){
-		this.setState({ currentEditorViewPageNum: pageNumber });
-	},
+	useEffect(()=>{
+		const hasChange = !_.isEqual(currentBrew, lastSavedBrew.current);
+		setUnsavedChanges(hasChange);
 
-	handleEditorCursorPageChange : function(pageNumber){
-		this.setState({ currentEditorCursorPageNum: pageNumber });
-	},
+		if(autoSaveEnabled) trySave(false, hasChange);
+	}, [currentBrew]);
 
-	handleBrewRendererPageChange : function(pageNumber){
-		this.setState({ currentBrewRendererPageNum: pageNumber });
-	},
+	const handleSplitMove = ()=>{
+		editorRef.current.update();
+	};
 
-	handleTextChange : function(text){
-		this.setState((prevState)=>({
-			brew : { ...prevState.brew, text: text },
-		}));
-	},
-	renderNavbar : function(){
-		return <Navbar ver={this.props.ver}>
+	const handleBrewChange = (field)=>(value, subfield)=>{	//'text', 'style', 'snippets', 'metadata'
+		if(subfield == 'renderer' || subfield == 'theme')
+			fetchThemeBundle(setError, setThemeBundle, value.renderer, value.theme);
+
+		//If there are HTML errors, run the validator on every change to give quick feedback
+		if(HTMLErrors.length && (field == 'text' || field == 'snippets'))
+			setHTMLErrors(Markdown.validate(value));
+
+		if(field == 'metadata') setCurrentBrew((prev)=>({ ...prev, ...value }));
+		else                    setCurrentBrew((prev)=>({ ...prev, [field]: value }));
+
+		if(useLocalStorage) {
+			if(field == 'text')     localStorage.setItem(BREWKEY, value);
+			if(field == 'style')    localStorage.setItem(STYLEKEY, value);
+			if(field == 'snippets') localStorage.setItem(SNIPKEY, value);
+			if(field == 'metadata') localStorage.setItem(METAKEY, JSON.stringify({
+				renderer : value.renderer,
+				theme    : value.theme,
+				lang     : value.lang
+			}));
+		}
+	};
+
+	const renderSaveButton = ()=>{
+		// #1 - Currently saving, show SAVING
+		if(isSaving)
+			return <Nav.item className='save' icon='fas fa-spinner fa-spin'>saving...</Nav.item>;
+
+		// #2 - Unsaved changes exist, autosave is OFF and warning timer has expired, show AUTOSAVE WARNING
+		// if(unsavedChanges && warnUnsavedChanges) {
+		// 	resetWarnUnsavedTimer();
+		// 	const elapsedTime = Math.round((new Date() - lastSavedTime) / 1000 / 60);
+		// 	const text = elapsedTime === 0
+		// 		? 'Autosave is OFF.'
+		// 		: `Autosave is OFF, and you haven't saved for ${elapsedTime} minutes.`;
+
+		// 	return <Nav.item className='save error' icon='fas fa-exclamation-circle'>
+		// 					Reminder...
+		// 		<div className='errorContainer'>{text}</div>
+		// 	</Nav.item>;
+		// }
+
+		// #3 - Unsaved changes exist, click to save, show SAVE NOW
+		if(unsavedChanges)
+			return <Nav.item className='save' onClick={save} color='blue' icon='fas fa-save'>save now</Nav.item>;
+
+		// #4 - No unsaved changes, autosave is ON, show AUTO-SAVED
+		if(autoSaveEnabled)
+			return <Nav.item className='save saved'>auto-saved</Nav.item>;
+
+		// #5 - No unsaved changes, and has never been saved, hide the button
+		if(neverSaved)
+			return <Nav.item className='save neverSaved'>save now</Nav.item>;
+
+		// DEFAULT - No unsaved changes, show SAVED
+		return <Nav.item className='save saved'>saved</Nav.item>;
+	};
+
+	const clearError = ()=>{
+		setError(null);
+		setIsSaving(false);
+	};
+
+	const renderNavbar = ()=>{
+		return <Navbar ver={props.ver}>
 			<Nav.section>
-				{this.state.error ?
-					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
-					null
-				}
+				{error
+					? <ErrorNavItem error={error} clearError={clearError} />
+					: renderSaveButton()}
 				<NewBrewItem />
+				<PrintNavItem />
 				<HelpNavItem />
 				<VaultNavItem />
 				<RecentNavItem />
 				<AccountNavItem />
 			</Nav.section>
 		</Navbar>;
-	},
+	};
 
-	render : function(){
-		return <div className='homePage sitePage'>
+	return (
+		<div className='homePage sitePage'>
 			<Meta name='google-site-verification' content='NwnAQSSJZzAT7N-p5MY6ydQ7Njm67dtbu73ZSyE5Fy4' />
-			{this.renderNavbar()}
+			{renderNavbar()}
 			<div className='content'>
-				<SplitPane onDragFinish={this.handleSplitMove}>
+				<SplitPane onDragFinish={handleSplitMove}>
 					<Editor
-						ref={this.editor}
-						brew={this.state.brew}
-						onTextChange={this.handleTextChange}
-						renderer={this.state.brew.renderer}
+						ref={editorRef}
+						brew={currentBrew}
+						onBrewChange={handleBrewChange}
+						renderer={currentBrew.renderer}
 						showEditButtons={false}
-						themeBundle={this.state.themeBundle}
-						onCursorPageChange={this.handleEditorCursorPageChange}
-						onViewPageChange={this.handleEditorViewPageChange}
-						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
+						themeBundle={themeBundle}
+						onCursorPageChange={setCurrentEditorCursorPageNum}
+						onViewPageChange={setCurrentEditorViewPageNum}
+						currentEditorViewPageNum={currentEditorViewPageNum}
+						currentEditorCursorPageNum={currentEditorCursorPageNum}
+						currentBrewRendererPageNum={currentBrewRendererPageNum}
 					/>
 					<BrewRenderer
-						text={this.state.brew.text}
-						style={this.state.brew.style}
-						renderer={this.state.brew.renderer}
-						onPageChange={this.handleBrewRendererPageChange}
-						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
-						themeBundle={this.state.themeBundle}
+						text={currentBrew.text}
+						style={currentBrew.style}
+						renderer={currentBrew.renderer}
+						onPageChange={setCurrentBrewRendererPageNum}
+						currentEditorViewPageNum={currentEditorViewPageNum}
+						currentEditorCursorPageNum={currentEditorCursorPageNum}
+						currentBrewRendererPageNum={currentBrewRendererPageNum}
+						themeBundle={themeBundle}
 					/>
 				</SplitPane>
 			</div>
-			<div className={cx('floatingSaveButton', { show: this.state.welcomeText != this.state.brew.text })} onClick={this.handleSave}>
+			<div className={`floatingSaveButton${unsavedChanges ? ' show' : ''}`} onClick={save}>
 				Save current <i className='fas fa-save' />
 			</div>
 
 			<a href='/new' className='floatingNewButton'>
 				Create your own <i className='fas fa-magic' />
 			</a>
-		</div>;
-	}
-});
+		</div>
+	);
+};
 
 module.exports = HomePage;

client/homebrew/pages/homePage/homePage.less

@@ -35,6 +35,14 @@
 
 	.navItem.save {
 		background-color : @orange;
+		transition:all 0.2s;
 		&:hover { background-color : @green; }
+		
+		&.neverSaved {
+			translate:-100%;
+			opacity: 0;
+			background-color :#333;
+			cursor:auto;
+		}
 	}
 }

client/homebrew/pages/newPage/newPage.jsx

@@ -1,275 +1,279 @@
-/*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
-require('./newPage.less');
-const React = require('react');
-const createClass = require('create-react-class');
-import request from '../../utils/request-middleware.js';
+/* eslint-disable max-lines */
+import './newPage.less';
 
-import Markdown from 'naturalcrit/markdown.js';
+// Common imports
+import React, { useState, useEffect, useRef } from 'react';
+import request                                from '../../utils/request-middleware.js';
+import Markdown                               from 'markdown.js';
+import _                                      from 'lodash';
 
-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');
-const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
-const HelpNavItem = require('../../navbar/help.navitem.jsx');
+import { DEFAULT_BREW }                       from '../../../../server/brewDefaults.js';
+import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '../../../../shared/helpers.js';
 
-const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
-const Editor = require('../../editor/editor.jsx');
-const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
+import SplitPane    from 'client/components/splitPane/splitPane.jsx';
+import Editor       from '../../editor/editor.jsx';
+import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
 
-const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js');
-const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js');
+import Nav                       from 'client/homebrew/navbar/nav.jsx';
+import Navbar                    from 'client/homebrew/navbar/navbar.jsx';
+import NewBrewItem               from 'client/homebrew/navbar/newbrew.navitem.jsx';
+import AccountNavItem            from 'client/homebrew/navbar/account.navitem.jsx';
+import ErrorNavItem              from 'client/homebrew/navbar/error-navitem.jsx';
+import HelpNavItem               from 'client/homebrew/navbar/help.navitem.jsx';
+import VaultNavItem              from 'client/homebrew/navbar/vault.navitem.jsx';
+import PrintNavItem              from 'client/homebrew/navbar/print.navitem.jsx';
+import { both as RecentNavItem } from 'client/homebrew/navbar/recent.navitem.jsx';
 
-const BREWKEY  = 'homebrewery-new';
-const STYLEKEY = 'homebrewery-new-style';
-const METAKEY  = 'homebrewery-new-meta';
-let SAVEKEY;
+// Page specific imports
+import { Meta }                  from 'vitreum/headtags';
 
+const BREWKEY  = 'HB_newPage_content';
+const STYLEKEY = 'HB_newPage_style';
+const METAKEY  = 'HB_newPage_metadata';
+const SNIPKEY  = 'HB_newPage_snippets';
+const SAVEKEYPREFIX  = 'HB_editor_defaultSave_';
 
-const NewPage = createClass({
-	displayName     : 'NewPage',
-	getDefaultProps : function() {
-		return {
-			brew : DEFAULT_BREW
+const useLocalStorage = true;
+const neverSaved      = true;
+
+const NewPage = (props)=>{
+	props = {
+		brew : DEFAULT_BREW,
+		...props
+	};
+
+	const [currentBrew               , setCurrentBrew               ] = useState(props.brew);
+	const [isSaving                  , setIsSaving                  ] = useState(false);
+	const [saveGoogle                , setSaveGoogle                ] = useState(global.account?.googleId ? true : false);
+	const [error                     , setError                     ] = useState(null);
+	const [HTMLErrors                , setHTMLErrors                ] = useState(Markdown.validate(props.brew.text));
+	const [currentEditorViewPageNum  , setCurrentEditorViewPageNum  ] = useState(1);
+	const [currentEditorCursorPageNum, setCurrentEditorCursorPageNum] = useState(1);
+	const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1);
+	const [themeBundle               , setThemeBundle               ] = useState({});
+	const [unsavedChanges            , setUnsavedChanges            ] = useState(false);
+	const [autoSaveEnabled           , setAutoSaveEnabled           ] = useState(false);
+
+	const editorRef     = useRef(null);
+	const lastSavedBrew = useRef(_.cloneDeep(props.brew));
+	// const saveTimeout        = useRef(null);
+	// const warnUnsavedTimeout = useRef(null);
+	const trySaveRef         = useRef(trySave); // CTRL+S listener lives outside React and needs ref to use trySave with latest copy of brew
+	const unsavedChangesRef  = useRef(unsavedChanges); // Similarly, onBeforeUnload lives outside React and needs ref to unsavedChanges
+
+	useEffect(()=>{
+		loadBrew();
+		fetchThemeBundle(setError, setThemeBundle, currentBrew.renderer, currentBrew.theme);
+
+		const handleControlKeys = (e)=>{
+			if(!(e.ctrlKey || e.metaKey)) return;
+			if(e.keyCode === 83) trySaveRef.current(true);
+			if(e.keyCode === 80) printCurrentBrew();
+			if([83, 80].includes(e.keyCode)) {
+				e.stopPropagation();
+				e.preventDefault();
+			}
 		};
-	},
 
-	getInitialState : function() {
-		const brew = this.props.brew;
+		document.addEventListener('keydown', handleControlKeys);
 
-		return {
-			brew                       : brew,
-			isSaving                   : false,
-			saveGoogle                 : (global.account && global.account.googleId ? true : false),
-			error                      : null,
-			htmlErrors                 : Markdown.validate(brew.text),
-			currentEditorViewPageNum   : 1,
-			currentEditorCursorPageNum : 1,
-			currentBrewRendererPageNum : 1,
-			themeBundle                : {}
+		return ()=>{
+			document.removeEventListener('keydown', handleControlKeys);
 		};
-	},
+	}, []);
 
-	editor : React.createRef(null),
-
-	componentDidMount : function() {
-		document.addEventListener('keydown', this.handleControlKeys);
-
-		const brew = this.state.brew;
-
-		if(!this.props.brew.shareId && typeof window !== 'undefined') { //Load from localStorage if in client browser
+	const loadBrew = ()=>{
+		const brew = { ...currentBrew };
+		if(!brew.shareId && typeof window !== 'undefined') { //Load from localStorage if in client browser
 			const brewStorage  = localStorage.getItem(BREWKEY);
 			const styleStorage = localStorage.getItem(STYLEKEY);
-			const metaStorage = JSON.parse(localStorage.getItem(METAKEY));
+			const metaStorage  = JSON.parse(localStorage.getItem(METAKEY));
 
-			brew.text  = brewStorage  ?? brew.text;
-			brew.style = styleStorage ?? brew.style;
-			// brew.title = metaStorage?.title || this.state.brew.title;
-			// brew.description = metaStorage?.description || this.state.brew.description;
+			brew.text     = brewStorage           ?? brew.text;
+			brew.style    = styleStorage          ?? brew.style;
 			brew.renderer = metaStorage?.renderer ?? brew.renderer;
 			brew.theme    = metaStorage?.theme    ?? brew.theme;
 			brew.lang     = metaStorage?.lang     ?? brew.lang;
 		}
 
-		SAVEKEY = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${global.account?.username || ''}`;
+		const SAVEKEY = `${SAVEKEYPREFIX}${global.account?.username}`;
 		const saveStorage = localStorage.getItem(SAVEKEY) || 'HOMEBREWERY';
 
-		this.setState({
-			brew       : brew,
-			saveGoogle : (saveStorage == 'GOOGLE-DRIVE' && this.state.saveGoogle)
-		});
-
-		fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme);
+		setCurrentBrew(brew);
+		lastSavedBrew.current = brew;
+		setSaveGoogle(saveStorage == 'GOOGLE-DRIVE' && saveGoogle);
 
 		localStorage.setItem(BREWKEY, brew.text);
 		if(brew.style)
 			localStorage.setItem(STYLEKEY, brew.style);
-		localStorage.setItem(METAKEY, JSON.stringify({ 'renderer': brew.renderer, 'theme': brew.theme, 'lang': brew.lang }));
-		if(window.location.pathname != '/new') {
+		localStorage.setItem(METAKEY, JSON.stringify({ renderer: brew.renderer, theme: brew.theme, lang: brew.lang }));
+		if(window.location.pathname !== '/new')
 			window.history.replaceState({}, window.location.title, '/new/');
-		}
-	},
-	componentWillUnmount : function() {
-		document.removeEventListener('keydown', this.handleControlKeys);
-	},
+	};
 
-	handleControlKeys : function(e){
-		if(!(e.ctrlKey || e.metaKey)) return;
-		const S_KEY = 83;
-		const P_KEY = 80;
-		if(e.keyCode == S_KEY) this.save();
-		if(e.keyCode == P_KEY) printCurrentBrew();
-		if(e.keyCode == P_KEY || e.keyCode == S_KEY){
-			e.stopPropagation();
-			e.preventDefault();
-		}
-	},
+	useEffect(()=>{
+		const hasChange = !_.isEqual(currentBrew, lastSavedBrew.current);
+		setUnsavedChanges(hasChange);
 
-	handleSplitMove : function(){
-		this.editor.current.update();
-	},
+		if(autoSaveEnabled) trySave(false, hasChange);
+	}, [currentBrew]);
 
-	handleEditorViewPageChange : function(pageNumber){
-		this.setState({ currentEditorViewPageNum: pageNumber });
-	},
+	useEffect(()=>{
+		trySaveRef.current = trySave;
+		unsavedChangesRef.current = unsavedChanges;
+	});
 
-	handleEditorCursorPageChange : function(pageNumber){
-		this.setState({ currentEditorCursorPageNum: pageNumber });
-	},
+	const handleSplitMove = ()=>{
+		editorRef.current.update();
+	};
 
-	handleBrewRendererPageChange : function(pageNumber){
-		this.setState({ currentBrewRendererPageNum: pageNumber });
-	},
+	const handleBrewChange = (field)=>(value, subfield)=>{	//'text', 'style', 'snippets', 'metadata'
+		if(subfield == 'renderer' || subfield == 'theme')
+			fetchThemeBundle(setError, setThemeBundle, value.renderer, value.theme);
 
-	handleTextChange : function(text){
-		//If there are errors, run the validator on every change to give quick feedback
-		let htmlErrors = this.state.htmlErrors;
-		if(htmlErrors.length) htmlErrors = Markdown.validate(text);
+		//If there are HTML errors, run the validator on every change to give quick feedback
+		if(HTMLErrors.length && (field == 'text' || field == 'snippets'))
+			setHTMLErrors(Markdown.validate(value));
 
-		this.setState((prevState)=>({
-			brew       : { ...prevState.brew, text: text },
-			htmlErrors : htmlErrors,
-		}));
-		localStorage.setItem(BREWKEY, text);
-	},
+		if(field == 'metadata') setCurrentBrew((prev)=>({ ...prev, ...value }));
+		else                    setCurrentBrew((prev)=>({ ...prev, [field]: value }));
 
-	handleStyleChange : function(style){
-		this.setState((prevState)=>({
-			brew : { ...prevState.brew, style: style },
-		}));
-		localStorage.setItem(STYLEKEY, style);
-	},
-
-	handleSnipChange : function(snippet){
-		//If there are errors, run the validator on every change to give quick feedback
-		let htmlErrors = this.state.htmlErrors;
-		if(htmlErrors.length) htmlErrors = Markdown.validate(snippet);
-
-		this.setState((prevState)=>({
-			brew       : { ...prevState.brew, snippets: snippet },
-			htmlErrors : htmlErrors,
-		}), ()=>{if(this.state.autoSave) this.trySave();});
-	},
-
-	handleMetaChange : function(metadata, field=undefined){
-		if(field == 'theme' || field == 'renderer')	// Fetch theme bundle only if theme or renderer was changed
-			fetchThemeBundle(this, metadata.renderer, metadata.theme);
-
-		this.setState((prevState)=>({
-			brew : { ...prevState.brew, ...metadata },
-		}), ()=>{
-			localStorage.setItem(METAKEY, JSON.stringify({
-				// 'title'       : this.state.brew.title,
-				// 'description' : this.state.brew.description,
-				'renderer' : this.state.brew.renderer,
-				'theme'    : this.state.brew.theme,
-				'lang'     : this.state.brew.lang
+		if(useLocalStorage) {
+			if(field == 'text')     localStorage.setItem(BREWKEY, value);
+			if(field == 'style')    localStorage.setItem(STYLEKEY, value);
+			if(field == 'snippets') localStorage.setItem(SNIPKEY, value);
+			if(field == 'metadata') localStorage.setItem(METAKEY, JSON.stringify({
+				renderer : value.renderer,
+				theme    : value.theme,
+				lang     : value.lang
 			}));
-		});
-		;
-	},
-
-	save : async function(){
-		this.setState({
-			isSaving : true
-		});
-
-		let brew = this.state.brew;
-		// Split out CSS to Style if CSS codefence exists
-		if(brew.text.startsWith('```css') && brew.text.indexOf('```\n\n') > 0) {
-			const index = brew.text.indexOf('```\n\n');
-			brew.style = `${brew.style ? `${brew.style}\n` : ''}${brew.text.slice(7, index - 1)}`;
-			brew.text = brew.text.slice(index + 5);
 		}
+	};
+
+	const trySave = async ()=>{
+  	setIsSaving(true);
+
+		const updatedBrew = { ...currentBrew };
+		splitTextStyleAndMetadata(updatedBrew);
+
+		const pageRegex = updatedBrew.renderer === 'legacy' ? /\\page/g : /^\\page$/gm;
+		updatedBrew.pageCount = (updatedBrew.text.match(pageRegex) || []).length + 1;
 
-		brew.pageCount=((brew.renderer=='legacy' ? brew.text.match(/\\page/g) : brew.text.match(/^\\page$/gm)) || []).length + 1;
 		const res = await request
-			.post(`/api${this.state.saveGoogle ? '?saveToGoogle=true' : ''}`)
-			.send(brew)
+			.post(`/api${saveGoogle ? '?saveToGoogle=true' : ''}`)
+			.send(updatedBrew)
 			.catch((err)=>{
-				this.setState({ isSaving: false, error: err });
+				setIsSaving(false);
+				setError(err);
 			});
+
+		setIsSaving(false);
 		if(!res) return;
 
-		brew = res.body;
+		const savedBrew = res.body;
+
 		localStorage.removeItem(BREWKEY);
 		localStorage.removeItem(STYLEKEY);
 		localStorage.removeItem(METAKEY);
-		window.location = `/edit/${brew.editId}`;
-	},
+		window.location = `/edit/${savedBrew.editId}`;
+	};
 
-	renderSaveButton : function(){
-		if(this.state.isSaving){
-			return <Nav.item icon='fas fa-spinner fa-spin' className='save'>
-				save...
-			</Nav.item>;
-		} else {
-			return <Nav.item icon='fas fa-save' className='save' onClick={this.save}>
-				save
-			</Nav.item>;
-		}
-	},
+	const renderSaveButton = ()=>{
+		// #1 - Currently saving, show SAVING
+		if(isSaving)
+			return <Nav.item className='save' icon='fas fa-spinner fa-spin'>saving...</Nav.item>;
 
-	renderNavbar : function(){
-		return <Navbar>
+		// #2 - Unsaved changes exist, autosave is OFF and warning timer has expired, show AUTOSAVE WARNING
+		// if(unsavedChanges && warnUnsavedChanges) {
+		// 	resetWarnUnsavedTimer();
+		// 	const elapsedTime = Math.round((new Date() - lastSavedTime) / 1000 / 60);
+		// 	const text = elapsedTime === 0
+		// 		? 'Autosave is OFF.'
+		// 		: `Autosave is OFF, and you haven't saved for ${elapsedTime} minutes.`;
 
+		// 	return <Nav.item className='save error' icon='fas fa-exclamation-circle'>
+		// 					Reminder...
+		// 		<div className='errorContainer'>{text}</div>
+		// 	</Nav.item>;
+		// }
+
+		// #3 - Unsaved changes exist, click to save, show SAVE NOW
+		if(unsavedChanges)
+			return <Nav.item className='save' onClick={trySave} color='blue' icon='fas fa-save'>save now</Nav.item>;
+
+		// #4 - No unsaved changes, autosave is ON, show AUTO-SAVED
+		if(autoSaveEnabled)
+			return <Nav.item className='save saved'>auto-saved</Nav.item>;
+
+		// #5 - No unsaved changes, and has never been saved, hide the button
+		if(neverSaved)
+			return <Nav.item className='save neverSaved'>save now</Nav.item>;
+
+		// DEFAULT - No unsaved changes, show SAVED
+		return <Nav.item className='save saved'>saved</Nav.item>;
+	};
+
+	const clearError = ()=>{
+		setError(null);
+		setIsSaving(false);
+	};
+
+	const renderNavbar = ()=>(
+		<Navbar>
 			<Nav.section>
-				<Nav.item className='brewTitle'>{this.state.brew.title}</Nav.item>
+				<Nav.item className='brewTitle'>{currentBrew.title}</Nav.item>
 			</Nav.section>
 
 			<Nav.section>
-				{this.state.error ?
-					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
-					this.renderSaveButton()
-				}
+				{error
+					? <ErrorNavItem error={error} clearError={clearError} />
+					: renderSaveButton()}
+				<NewBrewItem />
 				<PrintNavItem />
 				<HelpNavItem />
+				<VaultNavItem />
 				<RecentNavItem />
 				<AccountNavItem />
 			</Nav.section>
-		</Navbar>;
-	},
+		</Navbar>
+	);
 
-	render : function(){
-		return <div className='newPage sitePage'>
-			{this.renderNavbar()}
+	return (
+		<div className='newPage sitePage'>
+			{renderNavbar()}
 			<div className='content'>
-				<SplitPane onDragFinish={this.handleSplitMove}>
+				<SplitPane onDragFinish={handleSplitMove}>
 					<Editor
-						ref={this.editor}
-						brew={this.state.brew}
-						onTextChange={this.handleTextChange}
-						onStyleChange={this.handleStyleChange}
-						onMetaChange={this.handleMetaChange}
-						onSnipChange={this.handleSnipChange}
-						renderer={this.state.brew.renderer}
-						userThemes={this.props.userThemes}
-						themeBundle={this.state.themeBundle}
-						onCursorPageChange={this.handleEditorCursorPageChange}
-						onViewPageChange={this.handleEditorViewPageChange}
-						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
+						ref={editorRef}
+						brew={currentBrew}
+						onBrewChange={handleBrewChange}
+						renderer={currentBrew.renderer}
+						userThemes={props.userThemes}
+						themeBundle={themeBundle}
+						onCursorPageChange={setCurrentEditorCursorPageNum}
+						onViewPageChange={setCurrentEditorViewPageNum}
+						currentEditorViewPageNum={currentEditorViewPageNum}
+						currentEditorCursorPageNum={currentEditorCursorPageNum}
+						currentBrewRendererPageNum={currentBrewRendererPageNum}
 					/>
 					<BrewRenderer
-						text={this.state.brew.text}
-						style={this.state.brew.style}
-						renderer={this.state.brew.renderer}
-						theme={this.state.brew.theme}
-						themeBundle={this.state.themeBundle}
-						errors={this.state.htmlErrors}
-						lang={this.state.brew.lang}
-						onPageChange={this.handleBrewRendererPageChange}
-						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
+						text={currentBrew.text}
+						style={currentBrew.style}
+						renderer={currentBrew.renderer}
+						theme={currentBrew.theme}
+						themeBundle={themeBundle}
+						errors={HTMLErrors}
+						lang={currentBrew.lang}
+						onPageChange={setCurrentBrewRendererPageNum}
+						currentEditorViewPageNum={currentEditorViewPageNum}
+						currentEditorCursorPageNum={currentEditorCursorPageNum}
+						currentBrewRendererPageNum={currentBrewRendererPageNum}
 						allowPrint={true}
 					/>
 				</SplitPane>
 			</div>
-		</div>;
-	}
-});
+		</div>
+	);
+};
 
 module.exports = NewPage;

client/homebrew/pages/newPage/newPage.less

@@ -1,6 +1,12 @@
 .newPage {
 	.navItem.save {
+		.fadeInRight();
+		.transition(opacity);
 		background-color : @orange;
 		&:hover { background-color : @green; }
+		&.neverSaved {
+			.fadeOutRight();
+			opacity: 0;
+		}
 	}
 }

client/homebrew/pages/sharePage/sharePage.jsx

@@ -3,12 +3,12 @@ const React = require('react');
 const { useState, useEffect, useCallback } = React;
 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 PrintNavItem = require('../../navbar/print.navitem.jsx');
-const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
-const Account = require('../../navbar/account.navitem.jsx');
+const Nav = require('client/homebrew/navbar/nav.jsx');
+const Navbar = require('client/homebrew/navbar/navbar.jsx');
+const MetadataNav = require('client/homebrew/navbar/metadata.navitem.jsx');
+const PrintNavItem = require('client/homebrew/navbar/print.navitem.jsx');
+const RecentNavItem = require('client/homebrew/navbar/recent.navitem.jsx').both;
+const Account = require('client/homebrew/navbar/account.navitem.jsx');
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
 const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
@@ -17,15 +17,11 @@ const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpe
 const SharePage = (props)=>{
 	const { brew = DEFAULT_BREW_LOAD, disableMeta = false } = props;
 
-	const [state, setState] = useState({
-		themeBundle                : {},
-		currentBrewRendererPageNum : 1,
-	});
+	const [themeBundle,                setThemeBundle]                = useState({});
+	const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1);
 
 	const handleBrewRendererPageChange = useCallback((pageNumber)=>{
-		setState((prevState)=>({
-			currentBrewRendererPageNum : pageNumber,
-			...prevState }));
+		setCurrentBrewRendererPageNum(pageNumber);
 	}, []);
 
 	const handleControlKeys = (e)=>{
@@ -40,11 +36,7 @@ const SharePage = (props)=>{
 
 	useEffect(()=>{
 		document.addEventListener('keydown', handleControlKeys);
-		fetchThemeBundle(
-			{ setState },
-			brew.renderer,
-			brew.theme
-		);
+		fetchThemeBundle(undefined, setThemeBundle, brew.renderer, brew.theme);
 
 		return ()=>{
 			document.removeEventListener('keydown', handleControlKeys);
@@ -114,9 +106,9 @@ const SharePage = (props)=>{
 					lang={brew.lang}
 					renderer={brew.renderer}
 					theme={brew.theme}
-					themeBundle={state.themeBundle}
+					themeBundle={themeBundle}
 					onPageChange={handleBrewRendererPageChange}
-					currentBrewRendererPageNum={state.currentBrewRendererPageNum}
+					currentBrewRendererPageNum={currentBrewRendererPageNum}
 					allowPrint={true}
 				/>
 			</div>

client/homebrew/pages/userPage/userPage.jsx

@@ -4,14 +4,14 @@ const _ = require('lodash');
 
 const ListPage = require('../basePages/listPage/listPage.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 ErrorNavItem = require('../../navbar/error-navitem.jsx');
-const VaultNavitem = require('../../navbar/vault.navitem.jsx');
+const Nav = require('client/homebrew/navbar/nav.jsx');
+const Navbar = require('client/homebrew/navbar/navbar.jsx');
+const RecentNavItem = require('client/homebrew/navbar/recent.navitem.jsx').both;
+const Account = require('client/homebrew/navbar/account.navitem.jsx');
+const NewBrew = require('client/homebrew/navbar/newbrew.navitem.jsx');
+const HelpNavItem = require('client/homebrew/navbar/help.navitem.jsx');
+const ErrorNavItem = require('client/homebrew/navbar/error-navitem.jsx');
+const VaultNavitem = require('client/homebrew/navbar/vault.navitem.jsx');
 
 const UserPage = (props)=>{
 	props = {
@@ -39,10 +39,14 @@ const UserPage = (props)=>{
 		}] : [])
 	];
 
+	const clearError = ()=>{
+		setError(null);
+	};
+
 	const navItems = (
 		<Navbar>
 			<Nav.section>
-				{error && (<ErrorNavItem error={error} parent={null}></ErrorNavItem>)}
+				{error && (<ErrorNavItem error={error} clearError={clearError}></ErrorNavItem>)}
 				<NewBrew />
 				<HelpNavItem />
 				<VaultNavitem />

client/homebrew/pages/vaultPage/vaultPage.jsx

@@ -5,14 +5,14 @@ require('./vaultPage.less');
 const React = require('react');
 const { useState, useEffect, useRef } = React;
 
-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 Nav           = require('client/homebrew/navbar/nav.jsx');
+const Navbar        = require('client/homebrew/navbar/navbar.jsx');
+const RecentNavItem = require('client/homebrew/navbar/recent.navitem.jsx').both;
+const Account       = require('client/homebrew/navbar/account.navitem.jsx');
+const NewBrew       = require('client/homebrew/navbar/newbrew.navitem.jsx');
+const HelpNavItem   = require('client/homebrew/navbar/help.navitem.jsx');
 const BrewItem      = require('../basePages/listPage/brewItem/brewItem.jsx');
-const SplitPane     = require('../../../../shared/naturalcrit/splitPane/splitPane.jsx');
+const SplitPane     = require('client/components/splitPane/splitPane.jsx');
 const ErrorIndex    = require('../errorPage/errors/errorIndex.js');
 
 import request from '../../utils/request-middleware.js';

client/homebrew/pages/vaultPage/vaultPage.less

@@ -1,14 +1,16 @@
 .vaultPage {
 	height           : 100%;
 	overflow-y       : hidden;
-	background-color : #2C3E50;
 
 	*:not(input) { user-select : none; }
 
+	.form {
+		background:white;
+	}
+
 	:where(.content .dataGroup) {
 		width      : 100%;
 		height     : 100%;
-		background : white;
 
 		&.form .brewLookup {
 			position : relative;
@@ -171,7 +173,6 @@
 				max-height       : 100%;
 				padding          : 70px 50px;
 				overflow-y       : scroll;
-				background-color : #2C3E50;
 				container-type   : inline-size;
 
 				h3 { font-size : 25px; }

client/homebrew/utils/request-middleware.spec.js

@@ -0,0 +1,74 @@
+import requestMiddleware from './request-middleware';
+
+jest.mock('superagent');
+import request from 'superagent';
+
+describe('request-middleware', ()=>{
+	let version;
+
+	let setFn;
+	let testFn;
+
+	beforeEach(()=>{
+		jest.resetAllMocks();
+		version = global.version;
+
+		global.version = '999';
+
+		setFn = jest.fn();
+		testFn = jest.fn(()=>{ return { set: setFn }; });
+	});
+
+	afterEach(()=>{
+		global.version = version;
+	});
+
+	it('should add header to get', ()=>{
+		// Ensure tests functions have been reset
+		expect(testFn).not.toHaveBeenCalled();
+		expect(setFn).not.toHaveBeenCalled();
+
+		request.get = testFn;
+
+		requestMiddleware.get('path');
+
+		expect(testFn).toHaveBeenCalledWith('path');
+		expect(setFn).toHaveBeenCalledWith('Homebrewery-Version', '999');
+	});
+
+	it('should add header to put', ()=>{
+		expect(testFn).not.toHaveBeenCalled();
+		expect(setFn).not.toHaveBeenCalled();
+
+		request.put = testFn;
+
+		requestMiddleware.put('path');
+
+		expect(testFn).toHaveBeenCalledWith('path');
+		expect(setFn).toHaveBeenCalledWith('Homebrewery-Version', '999');
+	});
+
+	it('should add header to post', ()=>{
+		expect(testFn).not.toHaveBeenCalled();
+		expect(setFn).not.toHaveBeenCalled();
+
+		request.post = testFn;
+
+		requestMiddleware.post('path');
+
+		expect(testFn).toHaveBeenCalledWith('path');
+		expect(setFn).toHaveBeenCalledWith('Homebrewery-Version', '999');
+	});
+
+	it('should add header to delete', ()=>{
+		expect(testFn).not.toHaveBeenCalled();
+		expect(setFn).not.toHaveBeenCalled();
+
+		request.delete = testFn;
+
+		requestMiddleware.delete('path');
+
+		expect(testFn).toHaveBeenCalledWith('path');
+		expect(setFn).toHaveBeenCalledWith('Homebrewery-Version', '999');
+	});
+});

client/homebrew/utils/updateLocalStorage/localStorageKeyMap.js

@@ -0,0 +1,35 @@
+
+const getLocalStorageMap = function(){
+	const localStorageMap = {
+		'AUTOSAVE_ON'              : 'HB_editor_autoSaveOn',
+		'HOMEBREWERY-EDITOR-THEME' : 'HB_editor_theme',
+		'liveScroll'               : 'HB_editor_liveScroll',
+		'naturalcrit-pane-split'   : 'HB_editor_splitWidth',
+
+		'HOMEBREWERY-LISTPAGE-SORTDIR'                : 'HB_listPage_sortDir',
+		'HOMEBREWERY-LISTPAGE-SORTTYPE'               : 'HB_listPage_sortType',
+		'HOMEBREWERY-LISTPAGE-VISIBILITY-published'   : 'HB_listPage_visibility_group_published',
+		'HOMEBREWERY-LISTPAGE-VISIBILITY-unpublished' : 'HB_listPage_visibility_group_unpublished',
+
+		'hbAdminTab' : 'HB_adminPage_currentTab',
+
+		'homebrewery-new'       : 'HB_newPage_content',
+		'homebrewery-new-meta'  : 'HB_newPage_metadata',
+		'homebrewery-new-style' : 'HB_newPage_style',
+
+		'homebrewery-recently-edited' : 'HB_nav_recentlyEdited',
+		'homebrewery-recently-viewed' : 'HB_nav_recentlyViewed',
+
+		'hb_toolbarState'      : 'HB_renderer_toolbarState',
+		'hb_toolbarVisibility' : 'HB_renderer_toolbarVisibility'
+	};
+
+	if(global?.account?.username){
+		const username = global.account.username;
+		localStorageMap[`HOMEBREWERY-DEFAULT-SAVE-LOCATION-${username}`] = `HB_editor_defaultSave_${username}`;
+	}
+
+	return localStorageMap;
+};
+
+export default getLocalStorageMap;

client/homebrew/utils/updateLocalStorage/updateLocalStorageKeys.js

@@ -0,0 +1,22 @@
+import getLocalStorageMap from './localStorageKeyMap.js';
+
+const updateLocalStorage = function(){
+	// Return if no window and thus no local storage
+	if(typeof window === 'undefined') return;
+
+	const localStorageKeyMap = getLocalStorageMap();
+	const storage = window.localStorage;
+
+	Object.keys(localStorageKeyMap).forEach((key)=>{
+		if(storage[key]){
+			if(!storage[localStorageKeyMap[key]]){
+				const data = storage.getItem(key);
+				storage.setItem(localStorageKeyMap[key], data);
+			};
+			storage.removeItem(key);
+		}
+	});
+
+};
+
+export { updateLocalStorage };

config/default.json

@@ -1,10 +1,9 @@
 {
+	"development": true,
 	"host" : "homebrewery.local.naturalcrit.com:8000",
 	"naturalcrit_url" : "local.naturalcrit.com:8010",
 	"secret" : "secret",
 	"web_port" : 8000,
-	"enable_v3" : true,
-	"enable_themes" : true,
 	"local_environments" : ["docker", "local"],
 	"publicUrl" : "https://homebrewery.naturalcrit.com",
 	"hb_images" : null,

package.json

@@ -44,7 +44,9 @@
     "phb": "node --experimental-require-module scripts/phb.js",
     "prod": "set NODE_ENV=production && npm run build",
     "postinstall": "npm run build",
-    "start": "node --experimental-require-module server.js"
+    "start": "node --experimental-require-module server.js",
+    "docker:build": "docker build -t ${DOCKERID}/homebrewery:$npm_package_version .",
+    "docker:publish": "docker login && docker push  ${DOCKERID}/homebrewery:$npm_package_version"
   },
   "author": "stolksdorf",
   "license": "MIT",
@@ -83,19 +85,19 @@
     ]
   },
   "dependencies": {
-    "@babel/core": "^7.27.1",
-    "@babel/plugin-transform-runtime": "^7.28.0",
-    "@babel/preset-env": "^7.28.0",
+    "@babel/core": "^7.28.4",
+    "@babel/plugin-transform-runtime": "^7.28.3",
+    "@babel/preset-env": "^7.28.3",
     "@babel/preset-react": "^7.27.1",
-    "@babel/runtime": "^7.27.6",
+    "@babel/runtime": "^7.28.4",
     "@dmsnell/diff-match-patch": "^1.1.0",
-    "@googleapis/drive": "^13.0.1",
+    "@googleapis/drive": "^18.0.0",
     "@sanity/diff-match-patch": "^3.2.0",
     "body-parser": "^2.2.0",
     "classnames": "^2.5.1",
     "codemirror": "^5.65.6",
     "cookie-parser": "^1.4.7",
-    "core-js": "^3.44.0",
+    "core-js": "^3.46.0",
     "cors": "^2.8.5",
     "create-react-class": "^15.7.0",
     "dedent-tabs": "^0.10.3",
@@ -104,7 +106,7 @@
     "express-async-handler": "^1.2.0",
     "express-static-gzip": "3.0.0",
     "fflate": "^0.8.2",
-    "fs-extra": "11.3.0",
+    "fs-extra": "11.3.2",
     "hash-wasm": "^4.12.0",
     "idb-keyval": "^6.2.2",
     "js-yaml": "^4.1.0",
@@ -119,16 +121,17 @@
     "marked-gfm-heading-id": "^4.1.2",
     "marked-nonbreaking-spaces": "^1.0.1",
     "marked-smartypants-lite": "^1.0.3",
-    "marked-subsuper-text": "^1.0.3",
+    "marked-subsuper-text": "^1.0.4",
+    "marked-variables": "^1.0.4",
     "markedLegacy": "npm:marked@^0.3.19",
     "moment": "^2.30.1",
-    "mongoose": "^8.16.3",
-    "nanoid": "5.1.5",
+    "mongoose": "^8.19.1",
+    "nanoid": "5.1.6",
     "nconf": "^0.13.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-frame-component": "^4.1.3",
-    "react-router": "^7.6.3",
+    "react-router": "^7.9.4",
     "romans": "^3.1.0",
     "sanitize-filename": "1.6.3",
     "superagent": "^10.2.1",
@@ -136,19 +139,19 @@
     "written-number": "^0.11.1"
   },
   "devDependencies": {
-    "@stylistic/stylelint-plugin": "^3.1.3",
+    "@stylistic/stylelint-plugin": "^4.0.0",
     "babel-plugin-transform-import-meta": "^2.3.3",
-    "eslint": "^9.31.0",
+    "eslint": "^9.37.0",
     "eslint-plugin-jest": "^29.0.1",
     "eslint-plugin-react": "^7.37.5",
-    "globals": "^16.3.0",
-    "jest": "^30.0.4",
+    "globals": "^16.4.0",
+    "jest": "^30.2.0",
     "jest-expect-message": "^1.1.3",
     "jsdom-global": "^3.0.2",
     "postcss-less": "^6.0.0",
-    "stylelint": "^16.21.1",
-    "stylelint-config-recess-order": "^7.1.0",
-    "stylelint-config-recommended": "^16.0.0",
-    "supertest": "^7.1.3"
+    "stylelint": "^16.25.0",
+    "stylelint-config-recess-order": "^7.3.0",
+    "stylelint-config-recommended": "^17.0.0",
+    "supertest": "^7.1.4"
   }
 }

server/app.js

@@ -35,6 +35,7 @@ import contentNegotiation from './middleware/content-negotiation.js';
 import bodyParser         from 'body-parser';
 import cookieParser       from 'cookie-parser';
 import forceSSL           from './forcessl.mw.js';
+import dbCheck            from './middleware/dbCheck.js';
 
 
 const sanitizeBrew = (brew, accessType)=>{
@@ -274,7 +275,7 @@ app.get('/metadata/:id', asyncHandler(getBrew('share')), (req, res)=>{
 app.get('/css/:id', asyncHandler(getBrew('share')), (req, res)=>{getCSS(req, res);});
 
 //User Page
-app.get('/user/:username', async (req, res, next)=>{
+app.get('/user/:username', dbCheck, async (req, res, next)=>{
 	const ownAccount = req.account && (req.account.username == req.params.username);
 
 	req.ogMeta = { ...defaultMetaTags,
@@ -346,7 +347,7 @@ app.get('/user/:username', async (req, res, next)=>{
 });
 
 //Change author name on brews
-app.put('/api/user/rename', async (req, res)=>{
+app.put('/api/user/rename', dbCheck, async (req, res)=>{
 	const { username, newUsername } = req.body;
 	const ownAccount = req.account && (req.account.username == newUsername);
 
@@ -432,7 +433,7 @@ app.get('/new', asyncHandler(async(req, res, next)=>{
 }));
 
 //Share Page
-app.get('/share/:id', asyncHandler(getBrew('share')), asyncHandler(async (req, res, next)=>{
+app.get('/share/:id', dbCheck, asyncHandler(getBrew('share')), asyncHandler(async (req, res, next)=>{
 	const { brew } = req;
 	req.ogMeta = { ...defaultMetaTags,
 		title       : `${req.brew.title || 'Untitled Brew'} - ${req.brew.authors[0] || 'No author.'}`,
@@ -459,7 +460,7 @@ app.get('/share/:id', asyncHandler(getBrew('share')), asyncHandler(async (req, r
 }));
 
 //Account Page
-app.get('/account', asyncHandler(async (req, res, next)=>{
+app.get('/account', dbCheck, asyncHandler(async (req, res, next)=>{
 	const data = {};
 	data.title = 'Account Information Page';
 
@@ -487,8 +488,8 @@ app.get('/account', asyncHandler(async (req, res, next)=>{
 		const query = { authors: req.account.username, googleId: { $exists: false } };
 		const mongoCount = await HomebrewModel.countDocuments(query)
 			.catch((err)=>{
-				mongoCount = 0;
 				console.log(err);
+				return 0;
 			});
 
 		data.accountDetails = {
@@ -562,8 +563,6 @@ const renderPage = async (req, res)=>{
 		brews         : req.brews,
 		googleBrews   : req.googleBrews,
 		account       : req.account,
-		enable_v3     : config.get('enable_v3'),
-		enable_themes : config.get('enable_themes'),
 		config        : configuration,
 		ogMeta        : req.ogMeta,
 		userThemes    : req.userThemes

server/db.js

@@ -22,16 +22,29 @@ const handleConnectionError = (error)=>{
 	}
 };
 
+const addListeners = (conn)=>{
+	conn.connection.on('disconnecting', ()=>{console.log('Mongo disconnecting...');});
+	conn.connection.on('disconnected', ()=>{console.log('Mongo disconnected!');});
+	conn.connection.on('connecting', ()=>{console.log('Mongo connecting...');});
+	conn.connection.on('connected', ()=>{console.log('Mongo connected!');});
+	return conn;
+};
+
 const disconnect = async ()=>{
 	return await Mongoose.disconnect();
 };
 
 const connect = async (config)=>{
-	return await Mongoose.connect(getMongoDBURL(config), { retryWrites: false })
-		.catch((error)=>handleConnectionError(error));
+	return await Mongoose.connect(getMongoDBURL(config), {
+		retryWrites : false,
+		autoIndex   : (config.get('local_environments').includes(config.get('node_env')))
+	})
+	.then(addListeners(Mongoose))
+	.catch((error)=>handleConnectionError(error));
 };
 
 export default {
 	connect,
 	disconnect
 };
+

server/homebrew.api.js

@@ -4,15 +4,16 @@ import { model as HomebrewModel }    from './homebrew.model.js';
 import express                       from 'express';
 import zlib                          from 'zlib';
 import GoogleActions                 from './googleActions.js';
-import Markdown                      from '../shared/naturalcrit/markdown.js';
+import Markdown                      from '../shared/markdown.js';
 import yaml                          from 'js-yaml';
 import asyncHandler                  from 'express-async-handler';
 import { nanoid }                    from 'nanoid';
-import {makePatches, applyPatches, stringifyPatches, parsePatch} from '@sanity/diff-match-patch';
+import { makePatches, applyPatches, stringifyPatches, parsePatch } from '@sanity/diff-match-patch';
 import { md5 }                       from 'hash-wasm';
-import { splitTextStyleAndMetadata, 
+import { splitTextStyleAndMetadata,
 		 brewSnippetsToJSON, debugTextMismatch }        from '../shared/helpers.js';
 import checkClientVersion            from './middleware/check-client-version.js';
+import dbCheck                       from './middleware/dbCheck.js';
 
 
 const router = express.Router();
@@ -374,14 +375,14 @@ const api = {
 			// Patch to a throwaway variable while parallelizing - we're more concerned with error/no error.
 			const patchedResult = decodeURI(applyPatches(patches, encodeURI(brewFromServer.text))[0]);
 			if(patchedResult != brewFromClient.text)
-				throw("Patches did not apply cleanly, text mismatch detected");
+				throw ('Patches did not apply cleanly, text mismatch detected');
 			// brew.text = applyPatches(patches, brewFromServer.text)[0];
 		} catch (err) {
 			//debugTextMismatch(brewFromClient.text, brewFromServer.text, `edit/${brewFromClient.editId}`);
 			console.error('Failed to apply patches:', {
 				//patches : brewFromClient.patches,
-				brewId  : brewFromClient.editId || 'unknown',
-				error   : err
+				brewId : brewFromClient.editId || 'unknown',
+				error  : err
 			});
 			// While running in parallel, don't throw the error upstream.
 			// throw err; // rethrow to preserve the 500 behavior
@@ -477,6 +478,7 @@ const api = {
 				await HomebrewModel.deleteOne({ editId: id });
 				return next();
 			}
+			throw(err);
 		}
 
 		let brew = req.brew;
@@ -527,6 +529,8 @@ const api = {
 	}
 };
 
+router.use(dbCheck);
+
 router.post('/api', checkClientVersion, asyncHandler(api.newBrew));
 router.put('/api/:id', checkClientVersion, asyncHandler(api.getBrew('edit', false)), asyncHandler(api.updateBrew));
 router.put('/api/update/:id', checkClientVersion, asyncHandler(api.getBrew('edit', false)), asyncHandler(api.updateBrew));

server/homebrew.model.js

@@ -7,29 +7,29 @@ import zlib       from 'zlib';
 const HomebrewSchema = mongoose.Schema({
 	shareId   : { type: String, default: ()=>{return nanoid(12);}, index: { unique: true } },
 	editId    : { type: String, default: ()=>{return nanoid(12);}, index: { unique: true } },
-	googleId  : { type: String },
-	title     : { type: String, default: '' },
+	googleId  : { type: String, index: true },
+	title     : { type: String, default: '', index: true },
 	text      : { type: String, default: '' },
 	textBin   : { type: Buffer },
-	pageCount : { type: Number, default: 1 },
+	pageCount : { type: Number, default: 1, index: true },
 
 	description    : { type: String, default: '' },
-	tags           : [String],
+	tags           : { type: [String], index: true },
 	systems        : [String],
-	lang           : { type: String, default: 'en' },
-	renderer       : { type: String, default: '' },
-	authors        : [String],
+	lang           : { type: String, default: 'en', index: true },
+	renderer       : { type: String, default: '', index: true },
+	authors        : { type: [String], index: true },
 	invitedAuthors : [String],
-	published      : { type: Boolean, default: false },
-	thumbnail      : { type: String, default: '' },
+	published      : { type: Boolean, default: false, index: true },
+	thumbnail      : { type: String, default: '', index: true },
 
-	createdAt  : { type: Date, default: Date.now },
-	updatedAt  : { type: Date, default: Date.now },
-	lastViewed : { type: Date, default: Date.now },
+	createdAt  : { type: Date, default: Date.now, index: true },
+	updatedAt  : { type: Date, default: Date.now, index: true },
+	lastViewed : { type: Date, default: Date.now, index: true },
 	views      : { type: Number, default: 0 },
-	version    : { type: Number, default: 1 },
+	version    : { type: Number, default: 1, index: true },
 
-	lock : { type: Object }
+	lock : { type: Object, index: true }
 }, { versionKey: false });
 
 HomebrewSchema.statics.increaseView = async function(query) {
@@ -43,6 +43,8 @@ HomebrewSchema.statics.increaseView = async function(query) {
 	return brew;
 };
 
+// STATIC FUNCTIONS
+
 HomebrewSchema.statics.get = async function(query, fields=null){
 	const brew = await Homebrew.findOne(query, fields).orFail()
 		.catch((error)=>{throw 'Can not find brew';});
@@ -63,6 +65,15 @@ HomebrewSchema.statics.getByUser = async function(username, allowAccess=false, f
 	return brews;
 };
 
+// INDEXES
+
+HomebrewSchema.index({ updatedAt: -1, lastViewed: -1 });
+HomebrewSchema.index({ published: 1, title: 'text' });
+
+HomebrewSchema.index({ lock: 1, sparse: true });
+HomebrewSchema.path('lock.reviewRequested').index({ sparse: true });
+
+
 const Homebrew = mongoose.model('Homebrew', HomebrewSchema);
 
 export {

server/middleware/dbCheck.js

@@ -0,0 +1,15 @@
+import mongoose from 'mongoose';
+import config from '../config.js';
+
+export default (req, res, next)=>{
+	// Bypass DB checks during testing
+	if(config.get('node_env') == 'test') return next();
+
+	if(mongoose.connection.readyState == 1) return next();
+	throw {
+		HBErrorCode : '13',
+		name        : 'Database Connection Error',
+		message     : 'Unable to connect to database',
+		status      : mongoose.connection.readyState
+	};
+};

server/middleware/dbCheck.spec.js

@@ -0,0 +1,28 @@
+import mongoose from 'mongoose';
+import dbCheck from './dbCheck.js';
+import config from '../config.js';
+
+describe('dbCheck middleware', ()=>{
+	const next = jest.fn();
+
+	afterEach(()=>jest.clearAllMocks());
+
+	it('should skip check in test mode', ()=>{
+		config.get = jest.fn(()=>'test');
+		expect(()=>dbCheck({}, {}, next)).not.toThrow();
+		expect(next).toHaveBeenCalled();
+	});
+
+	it('should call next if readyState == 1', ()=>{
+		config.get = jest.fn(()=>'production');
+		mongoose.connection.readyState = 1;
+		dbCheck({}, {}, next);
+		expect(next).toHaveBeenCalled();
+	});
+
+	it('should throw if readyState != 1', ()=>{
+		config.get = jest.fn(()=>'production');
+		mongoose.connection.readyState = 99;
+		expect(()=>dbCheck({}, {}, next)).toThrow(/Unable to connect/);
+	});
+});

shared/helpers.js

@@ -8,7 +8,7 @@ const brewSnippetsToJSON = (menuTitle, userBrewSnippets, themeBundleSnippets=nul
 	const mpAsSnippets = [];
 	// Snippets from Themes first.
 	if(themeBundleSnippets) {
-		for (let themes of themeBundleSnippets) {
+		for (const themes of themeBundleSnippets) {
 			if(typeof themes !== 'string') {
 				const userSnippets = [];
 				const snipSplit = themes.snippets.trim().split(textSplit).slice(1);
@@ -76,9 +76,9 @@ const yamlSnippetsToText = (yamlObj)=>{
 	if(typeof yamlObj == 'string') return yamlObj;
 
 	let snippetsText = '';
-	
-	for (let snippet of yamlObj) {
-		for (let subSnippet of snippet.subsnippets) {
+
+	for (const snippet of yamlObj) {
+		for (const subSnippet of snippet.subsnippets) {
 			snippetsText = `${snippetsText}\\snippet ${subSnippet.name}\n${subSnippet.gen || ''}\n`;
 		}
 	}
@@ -116,37 +116,31 @@ const printCurrentBrew = ()=>{
 	}
 };
 
-const fetchThemeBundle = async (obj, renderer, theme)=>{
+const fetchThemeBundle = async (setError, setThemeBundle, renderer, theme)=>{
 	if(!renderer || !theme) return;
 	const res = await request
 			.get(`/api/theme/${renderer}/${theme}`)
 			.catch((err)=>{
-				obj.setState({ error: err });
+				setError(err);
 			});
 	if(!res) {
-		obj.setState((prevState)=>({
-			...prevState,
-			themeBundle : {}
-		}));
+		setThemeBundle({});
 		return;
 	}
 	const themeBundle = res.body;
 	themeBundle.joinedStyles = themeBundle.styles.map((style)=>`<style>${style}</style>`).join('\n\n');
-	obj.setState((prevState)=>({
-		...prevState,
-		themeBundle : themeBundle,
-		error       : null
-	}));
+	setThemeBundle(themeBundle);
+	setError(null);
 };
 
-const debugTextMismatch = (clientTextRaw, serverTextRaw, label) => {
+const debugTextMismatch = (clientTextRaw, serverTextRaw, label)=>{
 	const clientText = clientTextRaw?.normalize('NFC') || '';
 	const serverText = serverTextRaw?.normalize('NFC') || '';
 
 	const clientBuffer = Buffer.from(clientText, 'utf8');
 	const serverBuffer = Buffer.from(serverText, 'utf8');
 
-	if (clientBuffer.equals(serverBuffer)) {
+	if(clientBuffer.equals(serverBuffer)) {
 		console.log(`✅ ${label} text matches byte-for-byte.`);
 		return;
 	}
@@ -157,7 +151,7 @@ const debugTextMismatch = (clientTextRaw, serverTextRaw, label) => {
 
 	// Byte-level diff
 	for (let i = 0; i < Math.min(clientBuffer.length, serverBuffer.length); i++) {
-		if (clientBuffer[i] !== serverBuffer[i]) {
+		if(clientBuffer[i] !== serverBuffer[i]) {
 			console.log(`Byte mismatch at offset ${i}: client=0x${clientBuffer[i].toString(16)} server=0x${serverBuffer[i].toString(16)}`);
 			break;
 		}
@@ -165,14 +159,14 @@ const debugTextMismatch = (clientTextRaw, serverTextRaw, label) => {
 
 	// Char-level diff
 	for (let i = 0; i < Math.min(clientText.length, serverText.length); i++) {
-		if (clientText[i] !== serverText[i]) {
+		if(clientText[i] !== serverText[i]) {
 			console.log(`Char mismatch at index ${i}:`);
 			console.log(`  Client: '${clientText[i]}' (U+${clientText.charCodeAt(i).toString(16).toUpperCase()})`);
 			console.log(`  Server: '${serverText[i]}' (U+${serverText.charCodeAt(i).toString(16).toUpperCase()})`);
 			break;
 		}
 	}
-}
+};
 
 export {
 	splitTextStyleAndMetadata,

shared/markdown.js

@@ -1,117 +1,29 @@
 /* eslint-disable max-depth */
 /* eslint-disable max-lines */
 import _                        from 'lodash';
-import { Parser as MathParser } from 'expr-eval';
 import { marked as Marked }     from 'marked';
 import MarkedExtendedTables     from 'marked-extended-tables';
 import MarkedDefinitionLists    from 'marked-definition-lists';
 import MarkedAlignedParagraphs  from 'marked-alignment-paragraphs';
 import MarkedNonbreakingSpaces  from 'marked-nonbreaking-spaces';
 import MarkedSubSuperText       from 'marked-subsuper-text';
+import { markedVariables,
+				setMarkedVariablePage,
+				setMarkedVariable,
+				getMarkedVariable }  from 'marked-variables';
 import { markedSmartypantsLite as MarkedSmartypantsLite }                                from 'marked-smartypants-lite';
 import { gfmHeadingId as MarkedGFMHeadingId, resetHeadings as MarkedGFMResetHeadingIDs } from 'marked-gfm-heading-id';
 import { markedEmoji as MarkedEmojis }                                                   from 'marked-emoji';
-import { romanize } from 'romans';
-import writtenNumber from 'written-number';
 
 //Icon fonts included so they can appear in emoji autosuggest dropdown
-import diceFont      from '../../themes/fonts/iconFonts/diceFont.js';
-import elderberryInn from '../../themes/fonts/iconFonts/elderberryInn.js';
-import gameIcons     from '../../themes/fonts/iconFonts/gameIcons.js';
-import fontAwesome   from '../../themes/fonts/iconFonts/fontAwesome.js';
+import diceFont      from '../themes/fonts/iconFonts/diceFont.js';
+import elderberryInn from '../themes/fonts/iconFonts/elderberryInn.js';
+import gameIcons     from '../themes/fonts/iconFonts/gameIcons.js';
+import fontAwesome   from '../themes/fonts/iconFonts/fontAwesome.js';
 
 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,
-		abs      : 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, trunc   : false, join    : false, sum     : false, indexOf : 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,
-
-		remainder   : false, factorial   : false,
-		comparison  : false, concatenate : false,
-		logical     : false, assignment  : false,
-		array       : false, fndef       : false
-	}
-});
-// Add sign function
-mathParser.functions.sign = function (a) {
-	if(a >= 0) return '+';
-	return '-';
-};
-// Add signed function
-mathParser.functions.signed = function (a) {
-	if(a >= 0) return `+${a}`;
-	return `${a}`;
-};
-// Add Roman numeral functions
-mathParser.functions.toRomans = function (a) {
-	return romanize(a);
-};
-mathParser.functions.toRomansUpper = function (a) {
-	return romanize(a).toUpperCase();
-};
-mathParser.functions.toRomansLower = function (a) {
-	return romanize(a).toLowerCase();
-};
-// Add character functions
-mathParser.functions.toChar = function (a) {
-	if(a <= 0) return a;
-	const genChars = function (i) {
-		return (i > 26 ? genChars(Math.floor((i - 1) / 26)) : '') + 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'[(i - 1) % 26];
-	};
-	return genChars(a);
-};
-mathParser.functions.toCharUpper = function (a) {
-	return mathParser.functions.toChar(a).toUpperCase();
-};
-mathParser.functions.toCharLower = function (a) {
-	return mathParser.functions.toChar(a).toLowerCase();
-};
-// Add word functions
-mathParser.functions.toWords = function (a) {
-	return writtenNumber(a);
-};
-mathParser.functions.toWordsUpper = function (a) {
-	return mathParser.functions.toWords(a).toUpperCase();
-};
-mathParser.functions.toWordsLower = function (a) {
-	return mathParser.functions.toWords(a).toLowerCase();
-};
-mathParser.functions.toWordsCaps = function (a) {
-	const words = mathParser.functions.toWords(a).split(' ');
-	return words.map((word)=>{
-		return word.replace(/(?:^|\b|\s)(\w)/g, function(w, index) {
-			return index === 0 ? w.toLowerCase() : w.toUpperCase();
-		  });
-	}).join(' ');
-};
-
-// Normalize variable names; trim edge spaces and shorten blocks of whitespace to 1 space
-const normalizeVarNames = (label)=>{
-	return label.trim().replace(/\s+/g, ' ');
-};
-
 //Processes the markdown within an HTML block if it's just a class-wrapper
 renderer.html = function (token) {
 	let html = token.text;
@@ -185,7 +97,7 @@ const mustacheSpans = {
 	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
@@ -242,7 +154,7 @@ 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
@@ -297,7 +209,7 @@ 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];
@@ -343,7 +255,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];
@@ -411,248 +323,6 @@ const forcedParagraphBreaks = {
 	}
 };
 
-//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  = normalizeVarNames(match[2]); // Ensure the label name is normalized as it should be in the var stack.
-
-	//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(new RegExp(`(?<!\\w)(${variable})(?!\\w)`, 'g'), 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] ? normalizeVarNames(match[4]) : null;
-						const content = match[5] ? match[5].trim().replace(/[ \t]+/g, ' ') : null; // Normalize text content (except newlines for block-level content)
-
-						varsQueue.push(
-							{ type    : 'varDefBlock',
-								varName : label,
-								content : content
-							});
-					}
-					if(match[6]) { // Block Call
-						const label = match[7] ? normalizeVarNames(match[7]) : null;
-
-						varsQueue.push(
-							{ type    : 'varCallBlock',
-								varName : label,
-								content : match[0]
-							});
-					}
-					if(match[8]) { // Inline Definition
-						const label = match[10] ? normalizeVarNames(match[10]) : null;
-						let content = match[11] || null;
-
-						// 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;
-							}
-						}
-						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] ? normalizeVarNames(match[13]) : null;
-
-						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
@@ -678,9 +348,9 @@ const tableTerminators = [
 	` *{{[^{\n]*\n.*?\n}}`  // mustacheDiv
 ];
 
-Marked.use(MarkedVariables());
+Marked.use(markedVariables());
 Marked.use(MarkedDefinitionLists());
-Marked.use({ extensions : [forcedParagraphBreaks, mustacheSpans, mustacheDivs, mustacheInjectInline] });
+Marked.use({ extensions: [forcedParagraphBreaks, mustacheSpans, mustacheDivs, mustacheInjectInline] });
 Marked.use(mustacheInjectBlock);
 Marked.use(MarkedAlignedParagraphs());
 Marked.use(MarkedSubSuperText());
@@ -805,25 +475,17 @@ const mergeHTMLTags = (originalTags, newTags)=>{
 	};
 };
 
-const globalVarsList    = {};
-let varsQueue       = [];
-let globalPageNumber = 0;
-
 const Markdown = {
 	marked : Marked,
 	render : (rawBrewText, pageNumber=0)=>{
-		const lastPageNumber = pageNumber > 0 ? globalVarsList[pageNumber - 1].HB_pageNumber.content : 0;
-		globalVarsList[pageNumber] = {							//Reset global links for current page, to ensure values are parsed in order
-			'HB_pageNumber' : {									//Add document variables for this page
-				content  : !isNaN(Number(lastPageNumber)) ? Number(lastPageNumber) + 1 : lastPageNumber,
-				resolved : true
-			}
-		};
-		varsQueue                  = [];						//Could move into MarkedVariables()
-		globalPageNumber           = pageNumber;
-		if(pageNumber==0) {
-			MarkedGFMResetHeadingIDs();
-		}
+		setMarkedVariablePage(pageNumber);
+
+		const lastPageNumber = pageNumber > 0 ? getMarkedVariable('HB_pageNumber', pageNumber - 1) : 0;
+		setMarkedVariable('HB_pageNumber',  //Add document variables for this page
+			!isNaN(Number(lastPageNumber)) ? Number(lastPageNumber) + 1 : lastPageNumber,
+			pageNumber);
+
+		if(pageNumber==0) MarkedGFMResetHeadingIDs();
 
 		rawBrewText = rawBrewText.replace(/^\\column(?:break)?$/gm, `\n<div class='columnSplit'></div>\n`);
 

shared/markdownLegacy.js

@@ -49,7 +49,7 @@ const cleanUrl = function (sanitize, base, href) {
 			prot = decodeURIComponent(unescape(href))
         .replace(nonWordAndColonTest, '')
         .toLowerCase();
-		} catch (e) {
+		} catch {
 			return null;
 		}
 		if(prot.indexOf('javascript:') === 0 || prot.indexOf('vbscript:') === 0 || prot.indexOf('data:') === 0) {
@@ -58,7 +58,7 @@ const cleanUrl = function (sanitize, base, href) {
 	}
 	try {
 		href = encodeURI(href).replace(/%25/g, '%');
-	} catch (e) {
+	} catch {
 		return null;
 	}
 	return href;

shared/naturalcrit/svg/combat.svg.jsx

@@ -1,3 +0,0 @@
-module.exports = function(props){
-	return <svg version='1.1' x='0px' y='0px' viewBox='0 0 80 100' enableBackground='new 0 0 80 80'><g><g><polygon fill='#000000' points='12.9,71.4 7.6,66.1 19.3,54.4 20.7,55.8 10.4,66.1 12.9,68.6 23.2,58.3 24.6,59.7   '/></g><g><path fill='#000000' d='M29,61.6c-1.7,0-3.4-0.7-4.6-1.9l-5.1-5.1c-2.5-2.5-2.5-6.6,0-9.2l0.7-0.7L34.3,59l-0.7,0.7    C32.4,60.9,30.8,61.6,29,61.6z M20.1,47.6c-1.1,1.7-0.9,4.1,0.6,5.6l5.1,5.1c0.8,0.8,2,1.3,3.2,1.3c0.9,0,1.7-0.2,2.4-0.7    L20.1,47.6z'/></g><g><path fill='#000000' d='M12.3,74.8c-0.8,0-1.5-0.3-2-0.8l-5.2-5.2c-0.5-0.5-0.8-1.2-0.8-2c0-0.8,0.3-1.5,0.8-2    c1.1-1.1,2.9-1.1,4,0l5.2,5.2c1.1,1.1,1.1,2.9,0,4C13.8,74.5,13.1,74.8,12.3,74.8z M7.1,65.9c-0.2,0-0.4,0.1-0.6,0.2    c-0.2,0.2-0.2,0.4-0.2,0.6s0.1,0.4,0.2,0.6l5.2,5.2c0.3,0.3,0.9,0.3,1.2,0c0.3-0.3,0.3-0.8,0-1.2l-5.2-5.2    C7.5,66,7.3,65.9,7.1,65.9z'/></g><g><polygon fill='#000000' points='31.7,58.7 30.3,57.3 70,17.6 70,9 62.4,9 23.3,49.4 21.9,48 61.6,7 72,7 72,18.4   '/></g><g><rect x='46' y='6.7' transform='matrix(0.7168 0.6973 -0.6973 0.7168 35.9716 -23.568)' fill='#000000' width='2' height='51.6'/></g><g><rect x='13' y='61' fill='#000000' width='2' height='7'/></g><g><rect x='17' y='57' fill='#000000' width='2' height='7'/></g></g><g><g><polygon fill='#000000' points='68.4,71.4 56.7,59.7 58.1,58.3 68.4,68.6 70.8,66.1 60.5,55.8 61.9,54.4 73.6,66.1   '/></g><g><path fill='#000000' d='M52.2,61.6c-1.7,0-3.4-0.7-4.6-1.9L46.9,59l14.3-14.3l0.7,0.7c2.5,2.5,2.5,6.6,0,9.2l-5.1,5.1    C55.6,60.9,53.9,61.6,52.2,61.6z M49.8,58.9c0.7,0.4,1.5,0.7,2.4,0.7c1.2,0,2.3-0.5,3.2-1.3l5.1-5.1c1.5-1.5,1.7-3.8,0.6-5.6    L49.8,58.9z'/></g><g><path fill='#000000' d='M68.9,74.8c-0.8,0-1.5-0.3-2-0.8c-1.1-1.1-1.1-2.9,0-4l5.2-5.2c1.1-1.1,2.9-1.1,4,0c0.5,0.5,0.8,1.2,0.8,2    c0,0.8-0.3,1.5-0.8,2L70.9,74C70.4,74.5,69.7,74.8,68.9,74.8z M74.2,65.9c-0.2,0-0.4,0.1-0.6,0.2l-5.2,5.2c-0.3,0.3-0.3,0.8,0,1.2    c0.3,0.3,0.9,0.3,1.2,0l5.2-5.2c0.2-0.2,0.2-0.4,0.2-0.6s-0.1-0.4-0.2-0.6C74.6,66,74.4,65.9,74.2,65.9z'/></g><g><rect x='38.6' y='52.3' transform='matrix(0.7082 0.706 -0.706 0.7082 50.8397 -16.4875)' fill='#000000' width='13.4' height='2'/></g><g><polygon fill='#000000' points='30.6,39.9 9,18.4 9,7 19.7,7 41.1,29.1 39.7,30.5 18.8,9 11,9 11,17.6 32,38.5   '/></g><g><rect x='47.8' y='43.1' transform='matrix(0.6959 0.7181 -0.7181 0.6959 48.1381 -25.5246)' fill='#000000' width='12.8' height='2'/></g><g><rect x='12' y='23.1' transform='matrix(0.6974 0.7167 -0.7167 0.6974 25.1384 -11.3825)' fill='#000000' width='28.1' height='2'/></g><g><rect x='43.8' y='46.4' transform='matrix(0.6974 0.7167 -0.7167 0.6974 48.7492 -20.5985)' fill='#000000' width='10' height='2'/></g><g><rect x='66' y='61' fill='#000000' width='2' height='7'/></g><g><rect x='62' y='57' fill='#000000' width='2' height='7'/></g></g></svg>;
-};

tests/markdown/basic.test.js

@@ -1,6 +1,6 @@
 
 
-import Markdown from 'naturalcrit/markdown.js';
+import Markdown from 'markdown.js';
 
 test('Processes the markdown within an HTML block if its just a class wrapper', function() {
 	const source = '<div>*Bold text*</div>';

tests/markdown/definition-lists.test.js

@@ -1,6 +1,6 @@
 
 
-import Markdown from 'naturalcrit/markdown.js';
+import Markdown from 'markdown.js';
 
 describe('Inline Definition Lists', ()=>{
 	test('No Term 1 Definition', function() {

tests/markdown/emojis.test.js

@@ -1,4 +1,4 @@
-import Markdown from 'naturalcrit/markdown.js';
+import Markdown from 'markdown.js';
 const dedent = require('dedent-tabs').default;
 
 // Marked.js adds line returns after closing tags on some default tokens.

tests/markdown/hard-breaks.test.js

@@ -1,6 +1,6 @@
 
 
-import Markdown from 'naturalcrit/markdown.js';
+import Markdown from 'markdown.js';
 
 describe('Hard Breaks', ()=>{
 	test('Single Break', function() {

tests/markdown/mustache-syntax.test.js

@@ -1,7 +1,7 @@
 /* eslint-disable max-lines */
 
 const dedent = require('dedent-tabs').default;
-import Markdown from 'naturalcrit/markdown.js';
+import Markdown from 'markdown.js';
 
 // Marked.js adds line returns after closing tags on some default tokens.
 // This removes those line returns for comparison sake.

tests/markdown/non-breaking-spaces.test.js

@@ -1,6 +1,6 @@
 
 
-import Markdown from 'naturalcrit/markdown.js';
+import Markdown from 'markdown.js';
 
 describe('Non-Breaking Spaces Interactions', ()=>{
 	test('I am actually a single-line definition list!', function() {

tests/markdown/paragraph-justification.test.js

@@ -1,6 +1,6 @@
 
 
-import Markdown from 'naturalcrit/markdown.js';
+import Markdown from 'markdown.js';
 
 describe('Justification', ()=>{
 	test('Left Justify', function() {

tests/markdown/variables.test.js

@@ -1,7 +1,7 @@
 /* eslint-disable max-lines */
 
 const dedent = require('dedent-tabs').default;
-import Markdown from 'naturalcrit/markdown.js';
+import Markdown from 'markdown.js';
 
 // Marked.js adds line returns after closing tags on some default tokens.
 // This removes those line returns for comparison sake.

themes/V3/5ePHB/style.less

@@ -418,6 +418,7 @@
 		color       : var(--HB_Color_Footnotes);
 	}
 	.footnote {
+		text-transform: uppercase;
 		position   : absolute;
 		right      : 80px;
 		bottom     : 32px;

themes/V3/Blank/snippets.js

@@ -1,11 +1,17 @@
 /* eslint-disable max-lines */
 
-const WatercolorGen = require('./snippets/watercolor.gen.js');
-const ImageMaskGen  = require('./snippets/imageMask.gen.js');
-const FooterGen     = require('./snippets/footer.gen.js');
-const dedent        = require('dedent-tabs').default;
-const TableOfContentsGen = require('./snippets/tableOfContents.gen.js');
-const indexGen           = require('./snippets/index.gen.js');
+const WatercolorGen 			= require('./snippets/watercolor.gen.js');
+const ImageMaskGen              = require('./snippets/imageMask.gen.js');
+const FooterGen                 = require('./snippets/footer.gen.js');
+const LicenseGenWotC            = require('./snippets/licenseWotC.gen.js');
+const LicenseGenGNU             = require('./snippets/licenseGNU.gen.js');
+const LicenseGen 			    = require('./snippets/license.gen.js');
+const LicenseGenAelf            = require('./snippets/licenseAELF.js');
+const LicenseDTTRPGGCC          = require('./snippets/licenseDTRPGCC.gen.js');
+const LicenseMongoosePublishing = require('./snippets/licenseMongoose.gen.js');
+const dedent                    = require('dedent-tabs').default;
+const TableOfContentsGen        = require('./snippets/tableOfContents.gen.js');
+const indexGen                  = require('./snippets/index.gen.js');
 
 module.exports = [
 
@@ -197,6 +203,412 @@ module.exports = [
 
 		]
 	},
+	{
+		groupName : 'License',
+		icon      : 'fas fa-copyright',
+		view      : 'text',
+		snippets  : [
+			{
+				name : 'AELF',
+				subsnippets : [
+					{
+						name : 'Title Page Declaration',
+						icon : 'fas fa-sticky-note',
+						gen  : LicenseGenAelf.aelfTitleNotice
+					},
+					{
+						name : 'Legal Declaration',
+						icon : 'fas fa-sticky-note',
+						gen  : LicenseGenAelf.aelfLegalNotice
+					},
+					{
+						name : 'AELF License',
+						icon : 'fas fa-legal',
+						gen  : LicenseGenAelf.aelf10a
+					}
+				]
+			},
+			{
+				name        : 'Creative Commons',
+				icon        : 'fab fa-creative-commons',
+				subsnippets : [
+					{
+						name        : 'Text Declarations',
+						icon        : 'fab fa-creative-commons',
+						subsnippets : [
+							{
+								name : 'CC0 4.0',
+								icon : 'fab fa-creative-commons',
+								gen	 : LicenseGen.cczero,
+							},
+
+							{
+								name : 'CC-BY-4.0',
+								icon : 'fab fa-creative-commons',
+								gen	 : LicenseGen.ccby,
+							},
+
+							{
+								name : 'CC-BY-SA 4.0',
+								icon : 'fab fa-creative-commons',
+								gen	 : LicenseGen.ccbysa,
+							},
+
+							{
+								name : 'CC-BY-NC 4.0',
+								icon : 'fab fa-creative-commons',
+								gen	 : LicenseGen.ccbync,
+							},
+
+							{
+								name : 'CC-BY-NC-SA 4.0',
+								icon : 'fab fa-creative-commons',
+								gen	 : LicenseGen.ccbyncsa,
+							},
+
+							{
+								name : 'CC-BY-ND 4.0',
+								icon : 'fab fa-creative-commons',
+								gen	 : LicenseGen.ccbynd,
+							},
+
+							{
+								name : 'CC-BY-NC-ND 4.0',
+								icon : 'fab fa-creative-commons',
+								gen	 : LicenseGen.ccbyncnd,
+							},
+						]
+					},
+					{
+						name        : 'Badges',
+						icon        : 'fab fa-creative-commons',
+						subsnippets : [
+							{
+								name : 'CC0 4.0',
+								icon : 'fab fa-creative-commons',
+								gen	 : LicenseGen.cczeroBadge,
+							},
+
+							{
+								name : 'CC-BY-4.0',
+								icon : 'fab fa-creative-commons',
+								gen	 : LicenseGen.ccbyBadge,
+							},
+
+							{
+								name : 'CC-BY-SA 4.0',
+								icon : 'fab fa-creative-commons',
+								gen	 : LicenseGen.ccbysaBadge,
+							},
+
+							{
+								name : 'CC-BY-NC 4.0',
+								icon : 'fab fa-creative-commons',
+								gen	 : LicenseGen.ccbyncBadge,
+							},
+
+							{
+								name : 'CC-BY-NC-SA 4.0',
+								icon : 'fab fa-creative-commons',
+								gen	 : LicenseGen.ccbyncsaBadge,
+							},
+
+							{
+								name : 'CC-BY-ND 4.0',
+								icon : 'fab fa-creative-commons',
+								gen	 : LicenseGen.ccbyndBadge,
+							},
+
+							{
+								name : 'CC-BY-NC-ND 4.0',
+								icon : 'fab fa-creative-commons',
+								gen	 : LicenseGen.ccbyncndBadge,
+							},
+						]
+					},
+				]
+			},
+			{
+				name  : 'DTRPG Community Content',
+				incon : 'fab fa-dtrpg',
+				subsnippets : [
+					{
+						name : "Chronicle System Guild Colophon",
+						gen	 : LicenseDTTRPGGCC.greenRoninChronicleSystemGuildColophon,
+					},
+
+					{
+						name : 'Green Ronin\'s Age Creator\'s Alliance',
+						subsnippets : [
+							{
+								name : "Required Text",
+								subsnippets : [
+									{
+										name : "Colophon",
+										gen	 : LicenseDTTRPGGCC.greenRoninAgeCreatorsAllianceColophon,
+									},
+
+									{
+										name : "Cover",
+										gen	 : LicenseDTTRPGGCC.greenRoninAgeCreatorsAllianceCover,
+									},
+								]
+							},
+							{
+								name : "Logos",
+								subsnippets : [
+									{
+										name : "Age",
+										gen	 : LicenseDTTRPGGCC.greenRoninAgeCreatorsAllianceLogo,
+									},
+
+									{
+										name : "Blue Rose",
+										gen	 : LicenseDTTRPGGCC.greenRoninAgeCreatorsAllianceBlueRoseLogo,
+									},
+
+									{
+										name : "Fantasy Age Compatible",
+										gen	 : LicenseDTTRPGGCC.greenRoninAgeCreatorsAllianceFantasyAgeCompatible,
+									},
+
+									{
+										name : "Modern AGE Compatible",
+										gen	 : LicenseDTTRPGGCC.greenRoninAgeCreatorsAllianceModernAGECompatible,
+									},
+								]
+							}
+						]
+					},
+
+					{
+						name : "Hero Kid\'s Creators Guild",
+						subsnippets : [
+
+							{
+								name: "Required Text",
+								subsnippets : [
+							
+									{
+										name : "heroForgeHeroKidsCreatorsGuildColophon",
+										gen	 : LicenseDTTRPGGCC.heroForgeHeroKidsCreatorsGuildColophon,
+									},
+
+									{
+										name : "heroForgeHeroKidsCreatorsGuildSuperKidsColophon",
+										gen	 : LicenseDTTRPGGCC.heroForgeHeroKidsCreatorsGuildSuperKidsColophon,
+									},
+
+									{
+										name : "heroForgeHeroKidsCreatorsGuildCover",
+										gen	 : LicenseDTTRPGGCC.heroForgeHeroKidsCreatorsGuildCover,
+									},
+
+									{
+										name : "heroForgeHeroKidsCreatorsGuildSuperKidsCover",
+										gen	 : LicenseDTTRPGGCC.heroForgeHeroKidsCreatorsGuildSuperKidsCover,
+									},
+								]
+							}
+						]
+					},
+
+					{
+						name : "Travellers' Aid Society",
+						subsnippets : [
+							{
+								name : "Legal Statement",
+								gen  : LicenseMongoosePublishing.TASLegal,
+							}
+						]
+					},
+          
+					{
+						name : "Super-Powered by M&M",
+						subsnippets : [
+							{
+								name : "Required Text",
+								subsnippets : [
+									{
+										name : "Colophon",
+										gen	 : LicenseDTTRPGGCC.greenRoninSuperPoweredMMColophon,
+									},
+
+									{
+										name : "Cover",
+										gen	 : LicenseDTTRPGGCC.greenRoninSuperPoweredMMCover,
+									},
+
+									{
+										name : "Section 15",
+										gen	 : LicenseDTTRPGGCC.greenRoninSuperPoweredMMSection15,
+									},
+								]
+							}
+						]
+					},
+				]
+			},
+			{
+				name        : 'GNU',
+				icon        : 'fas fa-w',
+				subsnippets : [
+
+					{
+						name : 'GNU Free Documentation License',
+						icon : 'fas fa-w',
+						gen	 : LicenseGenGNU.gfdl,
+					},
+
+					{
+						name : 'GNU FDL Title Page',
+						icon : 'fas fa-w',
+						gen	 : LicenseGenGNU.gfdltitle,
+					},
+
+					{
+						name : 'GNU FDL Title Page w/alterations',
+						icon : 'fas fa-w',
+						gen	 : LicenseGenGNU.gfdltitleinvariant,
+					},
+
+					{
+						name : 'GNU General Public License v3',
+						icon : 'fas fa-w',
+						gen	 : LicenseGenGNU.gpl3,
+					},
+
+					{
+						name : 'GNU GPLv3 Title Page',
+						icon : 'fas fa-w',
+						gen	 : LicenseGenGNU.gpl3title,
+					},
+				]
+			},
+			{
+				name        : 'Icons',
+				icon        : 'fas fa-i',
+				subsnippets : [
+					{
+						name        : 'Text Declarations',
+						icon        : null,
+						subsnippets : [
+							{
+								name : 'Compatibility',
+								icon : 'fas fa-i',
+								gen	 : LicenseGen.iconsCompatibility,
+							},
+							{
+								name : 'Section 15',
+								icon : 'fas fa-i',
+								gen	 : LicenseGen.icondsSection15,
+							},
+							{
+								name : 'Trademark',
+								icon : 'fas fa-i',
+								gen	 : LicenseGen.iconsTrademark,
+							},
+						]
+					},
+					{
+						name : 'Compatibility Logo',
+						icon : 'fas fa-i',
+						gen	 : LicenseGen.iconsCompatibilityLogo
+					}
+				]
+			},
+
+			{
+				name : 'MIT License',
+				icon : 'fas fa-mit',
+				gen  : LicenseGen.mit,
+			},
+
+			{
+				name        : 'Mongoose Publishing Fair Use',
+				icon        : 'fas fa-mongoosepub',
+				subsnippets : [
+					{
+						name : 'Long Form Fair Use',
+						icon : null,
+						gen  : LicenseMongoosePublishing.fairUseLong,
+					},
+					{
+						name : 'Traveller Fair Use',
+						icon : null,
+						gen  : LicenseMongoosePublishing.fairUseTraveller,
+					},
+					{
+						name : '2300AD Fair Use',
+						icon : null,
+						gen  : LicenseMongoosePublishing.fairUse2300AD,
+					},
+					{
+						name : 'Twilight: 2000 Fair Use',
+						icon : null,
+						gen  : LicenseMongoosePublishing.fairUseTwilight2000,
+					},
+
+				]
+			},
+
+			{
+				name : 'ORC Notice',
+				icon : 'fas fa-Paizo',
+				gen	 : LicenseGen.orc1,
+			},
+
+
+			{
+				name        : 'Shadowdark',
+				icon        : 'fab fa-shadowdark',
+				subsnippets : [
+					{
+						name        : 'Logos',
+						icon        : 'fas fa-image',
+						subsnippets : [
+							{
+								name : 'Compatibility Logo - Black',
+								icon : 'fas fa-image',
+								gen  : LicenseGen.shadowDarkBlack
+							},
+							{
+								name : 'Compatibility Logo - White',
+								icon : 'fas fa-image',
+								gen  : LicenseGen.shadowDarkWhite
+							}
+						]
+					},
+					{
+						name : 'License Statement',
+						icon : 'fas fa-alt',
+						gen  : LicenseGen.shadowDarkNotice
+					}
+
+				]
+
+			},
+
+			{
+				name        : 'Wizards of the Coast',
+				icon        : 'fab fa-wizards-of-the-coast',
+				subsnippets : [
+
+					{
+						name : 'OGL 1.0 A',
+						icon : 'fab fa-wizards-of-the-coast',
+						gen	 : LicenseGenWotC.ogl1a,
+					},
+
+					{
+						name : 'WoTC Fan Content Policy',
+						icon : 'fas fa-w',
+						gen	 : LicenseGenWotC.fcp,
+					},
+				]
+			},
+		]
+	},
 	{
 		groupName : 'Style Editor',
 		icon      : 'fas fa-pencil-alt',
@@ -209,7 +621,6 @@ module.exports = [
 			}
 		]
 	},
-
 	/*********************** IMAGES *******************/
 	{
 		groupName : 'Images',
@@ -566,3 +977,4 @@ module.exports = [
 		]
 	},
 ];
+

themes/V3/Blank/snippets/footer.gen.js

@@ -1,4 +1,4 @@
-import Markdown from '../../../../shared/naturalcrit/markdown.js';
+import Markdown from '../../../../shared/markdown.js';
 
 module.exports = {
 	createFooterFunc : function(headerSize=1){

themes/V3/Blank/snippets/license.gen.js

@@ -0,0 +1,62 @@
+/* eslint-disable max-lines */
+const dedent = require('dedent');
+
+// Small and one-off licenses
+// Licenses in this file consist of one or two functions at most. If something is larger, 
+// has more assets, or variations, break it out into a distinct file.
+
+module.exports = {
+
+	mit : function () {
+		return dedent`
+		{{license,wide
+		Copyright \<YEAR\> \<COPYRIGHT HOLDER\>
+		:
+		Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+		:
+		The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+		:
+		THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+		}}`;
+	},
+	orc1 : function () {
+		return dedent`
+        {{license,wide,orc
+        | | |
+        |-|-|
+        |ORC Notice|This product is licensed under the ORC License located at the Library of Congress at TX 9-307-067 and available online at various locations including [possible domain names may be inserted] and others. All warranties are disclaimed as set forth therein.
+        |Attribution|This product is based on the following Licensed Material:
+        |^|[Title of Work], [Copyright Notice], [Author Credit Information].^|
+        |^|[Title of Additional Work], [Copyright Notice], [Author Credit Information], [Etc.].^|
+        |^|If you use our Licensed Material in your own published works, please credit us as follows:^|
+        |^|[Title of This Work], [Copyright Notice], [Your Author Credit Information].^|
+        |Reserved Material|Reserved Material elements in this product include, but may not be limited to: 
+        |Expressly Designated Licensed|Material	The following elements are owned by the Licensor and would otherwise constitute Reserved Material and are hereby designated as Licensed Material:|
+        }}
+        `;
+	},
+	cczero           : `<i class="far fa-copyright"></i> \<year\> This work is openly licensed via [CC0](https://creativecommons.org/publicdomain/zero/1.0/)\n\n`,
+	ccby             : `<i class="far fa-copyright"></i> \<year\> This work is openly licensed via [CC BY 4.0](https://creativecommons.org/publicdomain/by/4.0/)\n\n`,
+	ccbysa           : `<i class="far fa-copyright"></i> \<year\> This work is openly licensed via [CC BY-SA 4.0](https://creativecommons.org/publicdomain/by-sa/4.0/)\n\n`,
+	ccbync           : `<i class="far fa-copyright"></i> \<year\> This work is openly licensed via [CC BY-NC 4.0](https://creativecommons.org/publicdomain/by-nc/4.0/)\n\n`,
+	ccbyncsa         : `<i class="far fa-copyright"></i> \<year\> This work is openly licensed via [CC BY-NC-SA](https://creativecommons.org/publicdomain/by-nc-sa/4.0/)\n\n`,
+	ccbynd           : `<i class="far fa-copyright"></i> \<year\> This work is openly licensed via [CC BY-ND 4.0](https://creativecommons.org/publicdomain/by-nd/4.0/)\n\n`,
+	ccbyncnd         : `<i class="far fa-copyright"></i> \<year\> This work is openly licensed via [CC NY-NC-ND 4.0](https://creativecommons.org/publicdomain/by-nc-nd/4.0/)\n\n`,
+	cczeroBadge      : `![CC0](http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg)`,
+	ccbyBadge        : `![CC BY](https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/by.svg)`,
+	ccbysaBadge      : `![CC BY-SA](https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/by-sa.svg)`,
+	ccbyncBadge      : `![CC BY-NC](https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/by-nc.svg)`,
+	ccbyncsaBadge    : `![CC BY-NC-SA](https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/by-nc-sa.svg)`,
+	ccbyndBadge      : `![CC BY-ND](https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/by-nd.svg)`,
+	ccbyncndBadge    : `![CC BY-NC-ND](https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/by-nc-nd.svg)`,
+	shadowDarkNotice : `\[Product Name]\ is an independent product published under the Shadowdark RPG Third-Party License and is not affiliated with The Arcane Library, LLC. Shadowdark RPG © 2023 The Arcane Library, LLC.\n`,
+	shadowDarkBlack  : `![Shadowdark Black Logo](/assets/license_logos/The-Arcane-Library_Third-Party-License_Black.png){width:200px}`,
+	shadowDarkWhite  : `![Shadowdark White Logo](/assets/license_logos/The-Arcane-Library_Third-Party-License_White.png){width:200px}`,
+	bladesDarkNotice : `This work is based on Blades in the Dark \(found at (http://www.bladesinthedark.com/)\), product of One Seven Design, developed and authored by John Harper, and licensed for our use under the Creative Commons Attribution 3.0 Unported license \(http://creativecommons.org/licenses/by/3.0/\).\n`,
+	bladesDarkLogo   : `![Forged in the Dark](/assets/license_logos/Evil-Hat_Forged-In-The-Dark_Logo-V2.png)`,
+	bladesDarkLogoAttribution : `*Blades in the Dark^tm^ is a trademark of One Seven Design. The Forged in the Dark Logo is © One Seven Design, and is used with permission.*`,
+	iconsCompatibility : 'Compatibility with Icons requires Icons Superpowered Roleplaying from Ad Infinitum Adventures. Ad Infinitum Adventures does not guarantee compatibility, and does not endorse this product.',
+	iconsTrademark   : 'Icons Superpowered Roleplaying is a trademark of Steve Kenson, published exclusively by Ad Infinitum Adventures. The Icons Superpowered Roleplaying Compatibility Logo is a trademark of Ad Infinitum Adventures and is used under the Icons Superpowered Roleplaying Compatibility License.',
+	icondsSection15  : 'Open Game License v 1.0, Copyright 2000, Wizards of the Coast, Inc.\n::\nFudge System Reference Document, Copyright 2005, Grey Ghost Press, Inc.; Authors Steffan O\’Sullivan and Ann Dupuis, with additional material by Peter Bonney, Deird’Re Brooks, Reimer Behrends, Shawn Garbett, Steven Hammond, Ed Heil, Bernard Hsiung, Sedge Lewis, Gordon McCormick, Kent Matthewson, Peter Mikelsons, Anthony Roberson, Andy Skinner, Stephan Szabo, John Ughrin, Dmitri Zagidulin\n::\nFATE (Fantastic Adventures in Tabletop Entertainment), Copyright 2003 by Evil Hat Productions LLC; Authors Robert Donoghue and Fred Hicks\n::\nSpirit of the Century, Copyright 2006, Evil Hat Productions LLC. Authors Robert Donoghue, Fred Hicks, and Leonard Balsera.\n::\nIcons, Copyright 2010, Ad Infinitum Adventures; Author Steve Kenson.\n',
+	iconsCompatibilityLogo : '![Icons Compatibility Logo](/assets/license_logos/Ad-Infinitum-Adventures_Icons-Compatibility-License_Logo.png){width:200px}'
+};

themes/V3/Blank/snippets/licenseAELF.js

@@ -0,0 +1,54 @@
+/* eslint-disable max-lines */
+const dedent = require('dedent');
+
+// AELF License
+
+module.exports = {
+	aelfTitleNotice : function() {
+		return `This work includes AELF Open Gaming Content, which may only be used under the terms of the AELF Open License version 1.0a. This product is not endorsed or reviewed by Mythmere Games LLC or any other contributor of AELF Open Gaming Content and does not represent the views of Mythmere Games LLC any other contributor.`;
+	},
+	aelfLegalNotice : function() {
+		return dedent`{{ol-lowerLetters
+		1. **Notice.** This work includes AELF Open Gaming Content, which may only be used under the terms of the AELF Open License version 1.0a. This product is not endorsed or reviewed by Mythmere Games LLC or any other contributor of AELF Open Gaming Content and does not represent the olListLower
+		2. **Designation of AELF Open Game Content.** Here you describe your AELF Open Game Content. There are some examples of what might go in this section below.
+		3. **Product Identity.** Here you designate your Product Identity. 
+		4. **Required Attributions.** Here you include any “Required Attributions” for your product or for a product containing AELF Open Game Content that you’re using.
+		}}\n\n`;
+	},
+	aelf10a : function() {
+		return dedent`
+			{{license,wide,ol-noIndent
+			AELF OPEN LICENSE VERSION 1.0a
+			:
+			Defined Terms are listed in Section 13.
+			:
+			1. CONSIDERATION AND GRANT: In consideration for Your agreement to abide by the terms of this License, Mythmere Games LLC and 	each other Contributor grants You an irrevocable, perpetual, worldwide, royalty-free, non-exclusive license to Use the AELF Open Gaming Content that such Contributor has contributed under this License. By Using AELF Open Gaming Content under this License, You accept the terms of this License.
+			
+			2. CONTRIBUTION OF OPEN CONTENT: AELF Open Gaming Content may be contributed by any Contributor, and if so contributed may be Used by You, under the terms of this License. In connection with the contribution, Distribution, or Use of any AELF Open Gaming Content under this License, no terms or conditions may be added to or subtracted from this License except as expressly described herein.
+			
+			3. OTHER USAGE BY CONTRIBUTOR: Material that any Contributor contributes as AELF Open Gaming Content may also be released 			by that Contributor under one or more other licenses so long as it does not include AELF Open Gaming Content that was created by another Contributor without such other Contributor's separate consent. However, such other licenses must be independent of this License: they may not add or subtract terms or conditions to the use of the AELF Open Gaming Content under this License, nor may they affect the validity of the contribution or the rights of Use of such AELF Open Gaming Content hereunder.
+			
+			4. REQUIREMENTS FOR CONTRIBUTING AELF OPEN GAMING CONTENT: If You are contributing material as AELF Open Gaming Content, You represent that Your contributions are Your original creation and/or You have sufficient rights to grant the rights conveyed by this License (which may include, without limitation, through a Creative Commons CC-BY or CC0 license grant or another permanent licensing arrangement that allows any use of the intellectual property without any restriction on use other than attribution). Once the material is contributed, it is subject to the grant included in Section 1 and all other terms and conditions of this License. If your material is derived from 	a Creative Commons CC-BY License grant, you must require the proper attribution to this upstream material by those using your material under this license. Material derived from a Creative Commons License that includes the designators SA, ND, or NC, which restrict the use of the material by downstream users, may not be contributed as AELF Open Gaming Content under this License.
+
+			5. NOTICES: In order to Use any AELF Open Gaming Content under this License: (a) You must include a copy of this License in any material in which you Use such AELF Open Gaming Content; (b) in that copy of this License, You must update the COPYRIGHT NOTICE in Section 14 below to include (i) the exact text of the COPYRIGHT NOTICE from any AELF Open Gaming Content contributed by anyone else that You are Using, and (ii) the title, the copyright date, and the copyright holder's name of any AELF Open Gaming Content you are contributing, and (iii) any attributions required under a Creative Commons License or similar permitted open license for the use of any content under either clause (i) or clause (ii); and (c) You must prominently (immediately before the copy of the license required under (a) above, and also on the title page of the work, if possible) include in your work the following statement: “This work includes AELF Open Gaming Content, which may only be used under the terms of the AELF Open License version 1.0a. This product is not endorsed or reviewed by Mythmere Games LLC or any other contributor of AELF Open Gaming Content and does not represent the views of Mythmere Games LLC or any other contributor.”
+
+			6. USE OF PRODUCT IDENTITY: This license does not grant to You any rights in any Product Identity, and the owner of any Product Identity shall retain all rights, title and interest in and to that Product Identity. However, where rights of fair use or other exceptions or limitations on copyright or similar law apply to any Product Identity, such rights, exceptions, and limitations supersede a claim of Product Identity under the terms of this License, but do not exempt You from any notice requirements in Section 5.The inclusion of any Product Identity in any work that includes AELF Open Gaming Content does not constitute a challenge to the ownership of that Product Identity.
+
+			7. NO NEED TO CONTRIBUTE: Using AELF Open Gaming Content under this license does not require you to contribute any new AELF Open Gaming Content. If you do contribute new AELF Open Gaming Content, it must be clearly identified as such.
+
+			8. USE OF CONTRIBUTOR CREDITS: You may not market or advertise AELF Open Gaming Content using the name of any Contributor unless You have written permission from the Contributor to do so. You may include a statement of compatibility if the Contributor has set forth terms for statements of compatibility or if your statement complies with relevant law regarding trademarks.
+
+			9. PRIVITY OF CONTRACT: In any dispute hereunder, only the Contributors of content Used by You are considered to be in privity of contract with You. No other person shall be deemed a third-party beneficiary of this License with respect to You.
+
+			10. INABILITY TO COMPLY: If it is impossible for You to comply with any of the terms of this License with respect to some or all of the AELF Open Gaming Content due to statute, judicial order, or governmental regulation, then You may not Use any AELF Open Gaming Content so affected.
+
+			11. TERMINATION FOR FAILURE TO COMPLY WITH LICENSE: This License (under all versions present and future) will terminate automatically, but only as to You (and to all of Your affiliates and subsidiaries), if You fail to comply with any of the terms hereof and You do not cure such failure within 30 days of becoming aware of it. If the License has so terminated with respect to You, it may only be reinstated if all Contributors of the relevant content Used by You, who were adversely affected by Your failure to comply, waive such failure in writing. However, no such termination shall affect the license of any AELF Open Gaming Content (whether contributed by the person as to which this License has terminated or by any other person) under this License to any persons as to which this License has not terminated.
+
+			12. OTHER PROVISIONS: (a) If any provision of this License is held to be unenforceable, such provision shall be reformed only to the extent necessary to make it enforceable. (b) You agree that before you use this License, you will seek such advice, including legal counsel, as you deem appropriate, and will take such advice into consideration before using this License. As a result, the interpretation of this License shall not be construed against the drafter. (c) This License shall be governed by and construed in accordance with the laws of the State of Texas.
+
+			13. DEFINED TERMS: This License includes certain defined terms, which may be identified by the use of a capital letter. (a) “AELF Open Gaming Content” means any content clearly identified as AELF Open Gaming Content by a Contributor in any work covered by this License and any material that is purely numerically or game-mechanically derived from such content; (b) “Contributors” means Mythmere Games LLC and each other copyright and/or trademark owner who has contributed AELF Open Gaming Content under this License; (c) “Derivative Material” means material based on pre-existing copyrighted material, including translations (including translations into computer languages), modifications, corrections, additions, extensions, upgrades, improvements, compilations, abridgments, or any other form in which the pre-existing work may be recast, transformed or adapted; (d) “Distribute” means to reproduce, license, rent, lease, sell, broadcast, publicly display, transmit, or otherwise distribute; (e) “Product Identity” means any trademark, any tradename, or any material subject to copyright, in each case in any work covered by this License, that is not clearly identified as AELF Open Gaming Content by the Contributor that owns such intellectual property; Product Identity may include such things as product and product line names; logos and identifying marks including trade dress; artifacts; creatures; characters; stories, storylines, plots, thematic elements, dialogue, incidents, and language; artwork; symbols, designs, depictions, likenesses, formats, or poses; concepts; themes; graphic, photographic and other visual or audio representations; names and descriptions of characters, spells, enchantments, personalities, teams, personas, likenesses, and special abilities; places, locations, and environments; equipment; and magical or supernatural abilities or effects; (f) “Use”, “Used” or “Using” means to use, Distribute, copy, edit, format, modify, translate and otherwise create Derivative Material of AELF Open Gaming Content; and (g) “You” or “Your” means a licensee under this License.
+
+			14. COPYRIGHT NOTICE \[Insert both (i) the exact text of the COPYRIGHT NOTICE from any AELF Open Gaming Content You are Using, together with any required attribution under Section 5(b)(iii), and (ii) the title, the copyright date, and the copyright holder's name of your product, together with any additional required attribution under Section 5(b)(iii).\]
+			}}`;
+	},
+};

themes/V3/Blank/snippets/licenseDTRPGCC.gen.js

@@ -0,0 +1,256 @@
+/* eslint-disable max-lines */
+const dedent = require('dedent');
+
+// DriveThruRPG/OneBookShelf Community Content Programs
+
+module.exports = {
+	// Alligator Alley Entertainment  Starforger's Guild
+	alligatorAlleyEntertainmentStarforgersGuildColophon : function() {
+		return dedent `
+		ESPER GENESIS, Starforger's Guild, all other Alligator Alley Entertainment product names, and their respective logos are trademarks of Alligator Alley Entertainment in the USA and other countries.
+
+		This work contains material that is copyright Alligator Alley Entertainment, LLC and/or other authors. Such material is used with permission under the Community Content Agreement for the Starforger's Guild.
+
+		All other original material in this work is {{far,fa-copyright}}\[current year\] by \[your legal name or company name\] and published under the Community Content Agreement for the Starforger's Guild.
+		`;
+	},
+	// Catalyst's Shadowrun. Contact about logos.
+	CatalystHolostreetsColophon : function() {
+		return dedent`
+		Shadowrun, Sixth World, and Matrix, and associated graphics and logos are registered trademarks and/or trademarks of The Topps Company, Inc., in the United States and/or other countries. Catalyst Game Labs and the Catalyst Game Labs logo are trademarks of InMediaRes Productions, LLC.
+		`;
+	},
+	// DOJ. Inc's Hall of Champions - Verify Access and Art
+	dojHallofChampionsColophon : function () {
+		return dedent`
+		HERO SystemTM ® is DOJ, Inc.'s trademark for its roleplaying system.
+		HERO System Copyright {{far,fa-copyright}} 1984, 1989, 2002, 2009 by DOJ, Inc. d/b/a Hero Games. All rights reserved.
+		Fantasy Hero {{far,fa-copyright}} 2003, 2010 by DOJ, Inc. d/b/a Hero Games. All rights reserved.
+		Star Hero {{far,fa-copyright}} 2003, 2011 by DOJ, Inc. d/b/a Hero Games. All rights reserved.
+		All DOJ trademarks and copyrights used with permission.
+		For further information about Hero Games and the HERO System, visit [](www.herogames.com).
+		`;
+	},
+	// Fantasy Flight Games - Genesys Foundry - Verify Access and Art
+	fantasyFlightGenesysFoundryColophon : function() {
+		return dedent`
+		This product was created under license. Genesys and its logo, and Genesys Foundry and its logo, are trademarks of Fantasy Flight Games in the U.S.A. and other countries. All Fantasy Flight Games characters and character names, and the distinctive likenesses thereof, are trademarks of Fantasy Flight Games. [](www.FantasyFlightGames.com).
+
+		This work contains material that is copyright Fantasy Flight Games and/or other authors. Such material is used with permission under the Community Content Agreement for Genesys Foundry.
+
+		All other original material in this work is copyright \[year\] by \[your legal name or company name\] and published under the Community Content Agreement for Genesys Foundry. 
+		`;
+	},
+	// Free League Workshop
+	freeLeagueWorkShopCoriolisColophon : function () {
+		return dedent`
+		This product was created under license. Coriolis and its logo, are trademarks of Fria Ligan AB.
+
+		This work contains material that is copyright Fria Ligan AB and/or other authors. Such material is used with permission under the Community Content Agreement for Free League Workshop.
+
+		All other original material in this work is copyright \[year\] by \[your legal name or company name\] and published under the Community Content Agreement for Free League Workshop.
+		`;
+	},
+	freeLeagueWorkShopMYZColophon : function () {
+		return dedent`
+		{{far,fa-copyright}} \[year\] Cabinet Licensing LLC. MUTANT and related logos, characters, names, and distinctive likenesses thereof are trademarks of Cabinet Licensing LLC unless otherwise noted. Used with permission under the Community Content Agreement for Free League Workshop. All rights reserved.
+		`;
+	},
+	freeLeagueWorkShopFLColophon : function () {
+		return dedent`
+		This product was created under license. Forbidden Lands and it's logo, are trademarks of Fria Ligan AB.
+
+		This work contains material that is copyright Fria Ligan AB and/or other authors. Such material is used with permission under the Community Content Agreement for Free League Workshop.
+
+		All other original material in this work is copyright \[year\] by \[your legal name or company name\] and published under the Community Content Agreement for Free League Workshop.
+		`;
+	},
+	freeLeagueWorkShopSymColophon : function () {
+		return dedent`
+		This product was created under license. Symbaroum and its logo, are trademarks of Fria Ligan AB.
+
+		This work contains material that is copyright Fria Ligan AB and/or other authors. Such material is used with permission under the Community Content Agreement for Free League Workshop.
+
+		All other original material in this work is copyright \[year\] by \[your legal name or company name\] and published under the Community Content Agreement for Free League Workshop.
+		`;
+	},
+	freeLeagueWorkShopTftLColophon : function () {
+		return dedent`
+		This product was created under license. Tales from the Loop and its logo are trademarks of Fria Ligan AB and Simon Stålenhag Produktion AB. 
+
+		This work contains material that is copyright Fria Ligan AB, Simon Stålenhag Produktion AB and/or other authors. Such material is used with permission under the Community Content Agreement for Free League Workshop.
+
+		All other original material in this work is copyright \[year\] by \[your legal name or company name\] and published under the Community Content Agreement for Free League Workshop.
+		`;
+	},
+	freeLeagueWorkShopVasColophon : function () {
+		return dedent`
+		This product was created under license. Vaesen and its logo are trademarks of Fria Ligan AB and Johan Egerkrans.
+
+		This work contains material that is copyright Fria Ligan AB, Johan Egerkrans and/or other authors. Such material is used with permission under the Community Content Agreement for Free League Workshop.
+
+		All other original material in this work is copyright \[year\] by \[your legal name or company name\] and published under the Community Content Agreement for Free League Workshop. 
+		`;
+	},
+	freeLeagueWorkShopT2000Colophon : function () {
+		return dedent`
+		This product was created under license and contains material that is copyright Fria Ligan AB, GDW and/or other authors. Such material is used with permission under the Community Content Agreement for Free League Workshop.
+
+		All other original material in this work is copyright \[year\] by \[your legal name or company name\] and published under the Community Content Agreement for Free League Workshop.
+		`;
+	},
+	// Verify Logo redistribution
+	greenRoninAgeCreatorsAllianceCover                : `Requires the \[Game Title\] Rulebook from Green Ronin Publishing for use.`,
+	greenRoninAgeCreatorsAllianceLogo                 : `![Age Creators Alliance](/assets/license_logos/Green-Ronin_AGE-Creators-Alliance_General-Compatibility-Logo.png){width:200px}`,
+	greenRoninAgeCreatorsAllianceBlueRoseLogo         : `![Age Creators Alliance](/assets/license_logos/Green-Ronin_AGE-Creators-Alliance_Blue-Rose-Compatibility-Logo.png){width:200px}`,
+	greenRoninAgeCreatorsAllianceFantasyAgeCompatible : `![Fantasy AGE Compatible](/assets/license_logos/Green-Ronin_AGE-Creators-Alliance_Fantasy-AGE-Compatibility-Logo.png){width:200px}`,
+	greenRoninAgeCreatorsAllianceModernAGECompatible  : `![Modern AGE Compatible](/assets/license_logos/Green-Ronin_AGE-Creators-Alliance_Modern-AGE-Compatibility-Logo.png){width:200px}`,
+	// Green Ronin's Chronicle - Verify Art and Access
+	greenRoninChronicleSystemGuildColophon            : function() {
+		return dedent`
+		This product was created under license. Sword Chronicle, The Chronicle System, and their logos, and the Chronicle System Guild and its logo are trademarks of Green Ronin Publishing, LLC in the U.S.A. and other countries. 
+
+		This work contains material that is copyright Green Ronin Publishing, LLC and/or other authors. Such material is used with permission under the Community Content Agreement for Chronicle System Guild.
+
+		All other original material in this work is copyright \[year\] by \[your legal name or company name\] and published under the Community Content Agreement for Chronicle System Guild.
+		`;
+	},
+	// Green Ronin Super Powered by M&M - Verify Logo and Access
+	greenRoninSuperPoweredMMColophon  : `Super-Powered by M&M and its associated logo are Trademarks of Green Ronin Publishing and are used under the provisions of the Super-Powered by M&M Trademark License \(see [](www.mutantsandmasterminds.com/licensing) for details\).`,
+	greenRoninSuperPoweredMMCover     : `Requires the Mutants & Mastermind's Hero's Handbook by Green Ronin Publishing for Use.`,
+	greenRoninSuperPoweredMMSection15 : function () {
+		return dedent`
+		System Reference Document, Copyright 2000, Wizards of the Coast, Inc., Authors Jonathan Tweet, Monte Cook, Skip Williams, based on original material by E. Gary Gygax and Dave Arneson.
+
+		Modern System Reference Document, Copyright 2002-2004, Wizards of the Coast, Inc.; Authors Bill Slavicsek, Jeff Grubb, Rich Red­man, Charles Ryan, Eric Cagle, David Noonan, Stan!, Christopher Perkins, Rodney Thompson, and JD Wiker, based on material by Jonathan Tweet, Monte Cook, Skip Williams, Richard Baker, Peter Adkison, Bruce R. Cordell, John Tynes, Andy Collins, and JD Wiker.
+
+		Mutants & Masterminds, Copyright 2002, Green Ronin Publishing; Author Steve Kenson.
+
+		Advanced Player's Manual, Copyright 2005, Green Ronin Publishing: Author Skip Williams.
+
+		Silver Age Sentinels d20, Copyright 2002, Guardians of Order, Inc.; Authors Stephen Kenson, Mark C. Mackinnon, Jeff Mackintosh, Jesse Scoble.
+
+		Mutants & Masterminds, Second Edition, Copyright 2005, Green Ronin Publishing; Author Steve Kenson.
+
+		DC Adventures Hero's Handbook, Copyright 2010, Green Ronin Pub­lishing; Author Steve Kenson.
+
+		Mutants & Masterminds Hero's Handbook, Copyright 2011, Green Ronin Publishing; Author Steve Kenson.
+		`;
+	},
+	// Grim & Perilous Library -  ZWEIHÄNDER RPG and DARK ASTRAL - Verify logos and access
+	grimPerilousLibraryColophon            : `This game product is distributed through the Grim & Perilous Library on DriveThruRPG, in the USA and other countries. Used with permission by Grim & Perilous Studios.`,
+	grimPerilousLibraryTitle               : `Compatible with ZWEIHÄNDER`,
+	// Hero Forge's Hero Kids creator's Guild - Verify Logos and Access
+	heroForgeHeroKidsCreatorsGuildColophon : function() {
+		return dedent`
+		This product was created under license. Hero Kids and Hero Forge Games are trademarks of Justin Halliday.
+
+		This work contains material that is copyright Justin Halliday. Such material is used with permission under the Community Content Agreement for the Hero Kids Creator's Guild.
+
+		All other original material in this work is copyright \[2020\] by \[your legal name or company name\] and published under the Community Content Agreement for the Hero Kids Creator's Guild.
+		`;
+	},
+	heroForgeHeroKidsCreatorsGuildSuperKidsColophon : function() {
+		return dedent` 
+		This product was created under license. Hero Kids and Hero Forge Games are trademarks of Justin Halliday. Super Kids is a trademark of Conrad Evanshire.
+
+		This work contains material that is copyright Justin Halliday and Conrad Evanshire. Such material is used with permission under the Community Content Agreement for the Hero Kids Creator's Guild.
+
+		All other original material in this work is copyright \[2020\] by \[your legal name or company name\] and published under the Community Content Agreement for the Hero Kids Creator's Guild.
+		`;
+	},
+	heroForgeHeroKidsCreatorsGuildCover          : `Requires Hero Kids from Hero Forge Games. Distributed through the Hero Kids Creator's Guild at DriveThruRPG.`,
+	heroForgeHeroKidsCreatorsGuildSuperKidsCover : function() {
+		return dedent`
+		Requires Hero Kids from Hero Forge Games.
+		Designed for Super Kids - a superhero expansion for Hero Kids.
+		Distributed through the Hero Kids Creator's Guild at DriveThruRPG.		
+		`;
+	},
+	// Monte Cook's Cypher License
+	monteCookCypherCover                 : `Requires the Cypher System Rulebook from Monte Cook Games. Distributed through the Cypher System CreatorTM at DriveThruRPG.`,
+	monteCookCypherColophon              : function() {
+		return dedent`
+		This product was created under license. CYPHER SYSTEM and its logo, and CYPHER SYSTEM CREATOR and its logo, are trademarks of Monte Cook Games, LLC in the U.S.A. and other countries. All Monte Cook Games characters and character names, and the distinctive likenesses thereof, are trademarks of Monte Cook Games, LLC. [](www.montecookgames.com)
+
+		This work contains material that is copyright Monte Cook Games, LLC and/or other authors. Such material is used with permission under the Community Content Agreement for Cypher System Creator.
+
+		All other original material in this work is copyright \[2016\] by \[your legal name or company name\] and published under the Community Content Agreement for Cypher System Creator.
+		`;
+	},
+	// Verify Logo redistribution
+	monteCookLogoDarkLarge              : `![Cypher System Compatible](/assets/license_logos/CSCDarkLarge.png)`,
+	monteCookLogoDarkSmall              : `![Cypher System Compatible](/assets/license_logos/CSCDarkSmall.png)`,
+	monteCookLogoLightLarge             : `![Cypher System Compatible](/assets/license_logos/CSCLightLarge.png)`,
+	monteCookLogoLightSmall             : `![Cypher System Compatible](/assets/license_logos/CSCLightSmall.png)`,
+	// Onyx Path Canis Minor - Verify logos and access
+	onyxPathCanisMinorColophon : function () {
+		return dedent`
+		This product was created under license. PUGMIRE and its logo, and CANIS MINOR and its logo, are trademarks of Pugsteady, and used in conjunction with Onyx Path Publishing. All Pugmire and Monarchies of Mau setting material, art, and trade dress are the property of Onyx Path Publishing and Pugsteady. [](www.theonyxpath.com)
+
+		This work contains material that is copyright Onyx Path Publishing and Pugsteady. Such material is used with permission under the Community Content Agreement for “Canis Minor” Community Content. All other original material in this work is copyright \[THIS YEAR\] by \[YOUR LEGAL NAME OR COMPANY NAME\] and published under the Community Content Agreement for “Canis Minor” Community Content.
+		`;
+	},
+	// Onyx Paths - Storypath Nexus - Verify Access and Art
+	onyxPathStoryPathNexuscolophon : function() {
+		return dedent`
+		This product was created under license. STORYPATH SYSTEM, STORYPATH NEXUS COMMUNITY CONTENT PROGRAM, and all related game line terms and logos are trademarks of Onyx Path Publishing. All setting material, art, and trade dress are the property of Onyx Path Publishing. [](www.theonyxpath.com)
+
+		This work contains material that is copyright Onyx Path Publishing. Such material is used with permission under the Community Content Agreement for Storypath Nexus Community Content Program. All other original material in this work is copyright \[THIS YEAR\] by \[YOUR LEGAL NAME OR COMPANY NAME\] and published under the Community Content Agreement for Storypath Nexus Community Content Program.
+		`;
+	},
+	onyxPathStoryPathNexusdreColophon : function() {
+		return dedent`
+		This product was created under license. Dystopia Rising is a trademark of Michael Pucci, used under license by Onyx Path Publishing. STORYPATH SYSTEM, STORYPATH NEXUS COMMUNITY CONTENT PROGRAM, and all related game line terms and logos are trademarks of Onyx Path Publishing. All setting material, art, and trade dress are the property of Onyx Path Publishing and/or Michael Pucci. www.theonyxpath.com and dystopiarising.com
+
+		This work contains material that is copyright Onyx Path Publishing and Michael Pucci. Such material is used with permission under the Community Content Agreement for Storypath Nexus Community Content Program. All other original material in this work is copyright \[THIS YEAR\] by \[YOUR LEGAL NAME OR COMPANY NAME\] and published under the Community Content Agreement for Storypath Nexus Community Content Program.
+		`;
+	},
+	onyxPathStoryPathNexusdreCover                 : `Compatible with **Dystopia Rising: Evolution**`,
+	onyxPathStoryPathNexusscionCover               : `Compatible with **Scion Second Edition**`,
+	onyxPathStoryPathNexustcCover                  : `Compatible with **Trinity Continuum**`,
+	onyxPathStoryPathNexustcAeonCover              : `Compatible with **Trinity Continuum: Aeon**`,
+	onyxPathStoryPathNexustcAbberantCover          : `Compatible with **Trinity Continuum: Abberant**`,
+	onyxPathStoryPathNexustctcCover                : `Compatible with **They Came From \[Book Title\]**`,
+	// Schwalb Entertainment -- Disciples of the Demon Lord - Verify logos and access
+	schwalbEntertainmentDisciplesDemonLordColophon : function () {
+		return dedent`
+		This product was created under license. Shadow of the Demon Lord is a trademark of Schwalb Entertainment, LLC.
+
+		This work contains material that is copyright Schwalb Entertainment, LLC. Such material is used with permission under the Community Content Agreement for the Disciples of the Demon Lord CC.
+
+		All other original material in this work is copyright \[2018\] by \[your legal name or company name\] and published under the Community Content Agreement for the Disciples of the Demon Lord CC.
+		`;
+	},
+	schwalbEntertainmentDisciplesDemonLordCover : `Requires Shadow of the Demon Lord from Schwalb Entertainment. Distributed through the Disciples of the Demon Lord Creative Community at DriveThruRPG.`,
+	// Son of Oak Game Studio's City of Mists Garage - Verify Art and Access
+	sonOakGameStudioCityMistsGarageColophon     : function() {
+		return dedent `
+		This product was created under license. City of Mist and its logo are trademarks of Son of Oak Game Studio LLC. All City of Mist setting material, art, and trade dress are the property of Son of Oak Game Studio LLC.
+
+		This work contains material that is copyright Son of Oak Game Studio LLC and/or other authors. Such material is used with permission under the Community Content Agreement for City of Mist Garage.
+
+		All other original material in this work is copyright \[THIS YEAR\] by \[your legal name or company name\] and published under the Community Content Agreement for City of Mist Garage.
+		`;
+	},
+	//  Ulisses Spiele - Epicismo Editions - Verify logos and access
+	ulissesSpieleEpicismoEditionsColophon : function() {
+		return dedent`
+			This product has been created under license from Ulysses Spiele GmbH/Ediciones Epicismo. The Dark Eye , their respective logos, as well as Aventuria, Dere, Myranor, Rieslanda, Tharun and Uthuria and their respective logos are trademarks of Ulysses Spiele GmbH /Ediciones Epicismo. The title and contents of this book are protected under the copyright laws of Spain. No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, without the written consent of Ulysses Spiele GmbH/Ediciones Epicismo.
+
+			This publication includes material produced by Ulisses Spiele GmbH/Ediciones Epicismo and/or other authors, which is protected by applicable copyright laws. Use of such material is permitted under the Community Content Agreement for SCRIPTORIUM AVENTURIS.
+
+			All original content in this work is copyright \[current year\] of \[your legal name or company name\] and published under the SCRIPTORIUM AVENTURIS Community Content Agreement.
+			`;
+	},
+	// Company of the Phoenix- Fading Suns - Verify Logos and access
+	ulissesSpieleCompanyPhoenixColophon : function() {
+		return dedent`
+		This product was created under license from Ulisses Medien und Spiele Distribution GmbH. Fading Suns and its respective logo(s) are a trademark of Ulisses Medien und Spiele Distribution GmbH. The title and contents of this book are protected under the copyright laws of Germany, the United States of America and other countries. No part of this publication may be reproduced, stored in retrieval systems or transmitted, in any form or by any means without prior written consent from Ulisses Medien und Spiele Distribution GmbH.
+
+		This publication includes material that was produced by Ulisses Spiele and/or other authors and which is protected under applicable copyright laws. Use of such material is granted under the Community Content Agreement for the Company of the Phoenix.
+
+		All original content in this work is copyright \[2021\] by \[your legal name or company name\] and published under the Community Content Agreement for the Company of the Phoenix.
+		`;
+	},
+};

themes/V3/Blank/snippets/licenseGNU.gen.js

@@ -0,0 +1,434 @@
+/* eslint-disable max-lines */
+const dedent = require('dedent');
+
+// GNU Licenses
+
+module.exports = {
+
+	gpl3 : function () {
+		return dedent`{{license,wide
+			### GNU GENERAL PUBLIC LICENSE
+			*Version 3, 29 June 2007*
+			:
+			Copyright © 2007 Free Software Foundation, Inc. <https://fsf.org/>
+			:
+			Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed.
+			:
+			#### Preamble
+			:
+			The GNU General Public License is a free, copyleft license for software and other kinds of works.
+			:
+			The licenses for most software and other practical works are designed to take away your freedom to share and change the works. By contrast, the GNU General Public License is intended to guarantee your freedom to share and change all versions of a program--to make sure it remains free software for all its users. We, the Free Software Foundation, use the GNU General Public License for most of our software; it applies also to any other work released this way by its authors. You can apply it to your programs, too.
+			:
+			When we speak of free software, we are referring to freedom, not price. Our General Public Licenses are designed to make sure that you have the freedom to distribute copies of free software (and charge for them if you wish), that you receive source code or can get it if you want it, that you can change the software or use pieces of it in new free programs, and that you know you can do these things.
+			:
+			To protect your rights, we need to prevent others from denying you these rights or asking you to surrender the rights. Therefore, you have certain responsibilities if you distribute copies of the software, or if you modify it: responsibilities to respect the freedom of others.
+			:
+			For example, if you distribute copies of such a program, whether gratis or for a fee, you must pass on to the recipients the same freedoms that you received. You must make sure that they, too, receive or can get the source code. And you must show them these terms so they know their rights.
+			:
+			Developers that use the GNU GPL protect your rights with two steps: (1) assert copyright on the software, and (2) offer you this License giving you legal permission to copy, distribute and/or modify it.
+			:
+			For the developers' and authors' protection, the GPL clearly explains that there is no warranty for this free software. For both users' and authors' sake, the GPL requires that modified versions be marked as changed, so that their problems will not be attributed erroneously to authors of previous versions.
+			:
+			Some devices are designed to deny users access to install or run modified versions of the software inside them, although the manufacturer can do so. This is fundamentally incompatible with the aim of protecting users' freedom to change the software. The systematic pattern of such abuse occurs in the area of products for individuals to use, which is precisely where it is most unacceptable. Therefore, we have designed this version of the GPL to prohibit the practice for those products. If such problems arise substantially in other domains, we stand ready to extend this provision to those domains in future versions of the GPL, as needed to protect the freedom of users.
+			:
+			Finally, every program is threatened constantly by software patents. States should not allow patents to restrict development and use of software on general-purpose computers, but in those that do, we wish to avoid the special danger that patents applied to a free program could make it effectively proprietary. To prevent this, the GPL assures that patents cannot be used to render the program non-free.
+			:
+			The precise terms and conditions for copying, distribution and modification follow.
+			}}
+			\page
+			{{license,wide
+			#### TERMS AND CONDITIONS
+			
+			##### 0. Definitions.
+			
+			“This License” refers to version 3 of the GNU General Public License.
+			:
+			“Copyright” also means copyright-like laws that apply to other kinds of works, such as semiconductor masks.
+			:
+			“The Program” refers to any copyrightable work licensed under this License. Each licensee is addressed as “you”. “Licensees” and “recipients” may be individuals or organizations.
+			:
+			To “modify” a work means to copy from or adapt all or part of the work in a fashion requiring copyright permission, other than the making of an exact copy. The resulting work is called a “modified version” of the earlier work or a work “based on” the earlier work.
+			:
+			A “covered work” means either the unmodified Program or a work based on the Program.
+			:
+			To “propagate” a work means to do anything with it that, without permission, would make you directly or secondarily liable for infringement under applicable copyright law, except executing it on a computer or modifying a private copy. Propagation includes copying, distribution (with or without modification), making available to the public, and in some countries other activities as well.
+			:
+			To “convey” a work means any kind of propagation that enables other parties to make or receive copies. Mere interaction with a user through a computer network, with no transfer of a copy, is not conveying.
+			:
+			An interactive user interface displays “Appropriate Legal Notices” to the extent that it includes a convenient and prominently visible feature that (1) displays an appropriate copyright notice, and (2) tells the user that there is no warranty for the work (except to the extent that warranties are provided), that licensees may convey the work under this License, and how to view a copy of this License. If the interface presents a list of user commands or options, such as a menu, a prominent item in the list meets this criterion.
+			
+			##### 1. Source Code.
+			
+			The “source code” for a work means the preferred form of the work for making modifications to it. “Object code” means any non-source form of a work.
+			:
+			A “Standard Interface” means an interface that either is an official standard defined by a recognized standards body, or, in the case of interfaces specified for a particular programming language, one that is widely used among developers working in that language.
+			:
+			The “System Libraries” of an executable work include anything, other than the work as a whole, that (a) is included in the normal form of packaging a Major Component, but which is not part of that Major Component, and (b) serves only to enable use of the work with that Major Component, or to implement a Standard Interface for which an implementation is available to the public in source code form. A “Major Component”, in this context, means a major essential component (kernel, window system, and so on) of the specific operating system (if any) on which the executable work runs, or a compiler used to produce the work, or an object code interpreter used to run it.
+			:
+			The “Corresponding Source” for a work in object code form means all the source code needed to generate, install, and (for an executable work) run the object code and to modify the work, including scripts to control those activities. However, it does not include the work's System Libraries, or general-purpose tools or generally available free programs which are used unmodified in performing those activities but which are not part of the work. For example, Corresponding Source includes interface definition files associated with source files for the work, and the source code for shared libraries and dynamically linked subprograms that the work is specifically designed to require, such as by intimate data communication or control flow between those subprograms and other parts of the work.
+			:
+			The Corresponding Source need not include anything that users can regenerate automatically from other parts of the Corresponding Source.
+			:
+			The Corresponding Source for a work in source code form is that same work.
+			}}
+			\page
+			{{license,wide
+			##### 2. Basic Permissions.
+			
+			All rights granted under this License are granted for the term of copyright on the Program, and are irrevocable provided the stated conditions are met. This License explicitly affirms your unlimited permission to run the unmodified Program. The output from running a covered work is covered by this License only if the output, given its content, constitutes a covered work. This License acknowledges your rights of fair use or other equivalent, as provided by copyright law.
+			You may make, run and propagate covered works that you do not convey, without conditions so long as your license otherwise remains in force. You may convey covered works to others for the sole purpose of having them make modifications exclusively for you, or provide you with facilities for running those works, provided that you comply with the terms of this License in conveying all material for which you do not control copyright. Those thus making or running the covered works for you must do so exclusively on your behalf, under your direction and control, on terms that prohibit them from making any copies of your copyrighted material outside their relationship with you.
+			:
+			Conveying under any other circumstances is permitted solely under the conditions stated below. Sublicensing is not allowed; section 10 makes it unnecessary.
+			
+			##### 3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+			
+			No covered work shall be deemed part of an effective technological measure under any applicable law fulfilling obligations under article 11 of the WIPO copyright treaty adopted on 20 December 1996, or similar laws prohibiting or restricting circumvention of such measures.
+			:
+			When you convey a covered work, you waive any legal power to forbid circumvention of technological measures to the extent such circumvention is effected by exercising rights under this License with respect to the covered work, and you disclaim any intention to limit operation or modification of the work as a means of enforcing, against the work's users, your or third parties' legal rights to forbid circumvention of technological measures.
+			
+			##### 4. Conveying Verbatim Copies.
+			
+			You may convey verbatim copies of the Program's source code as you receive it, in any medium, provided that you conspicuously and appropriately publish on each copy an appropriate copyright notice; keep intact all notices stating that this License and any non-permissive terms added in accord with section 7 apply to the code; keep intact all notices of the absence of any warranty; and give all recipients a copy of this License along with the Program.
+			:
+			You may charge any price or no price for each copy that you convey, and you may offer support or warranty protection for a fee.
+			
+			##### 5. Conveying Modified Source Versions.
+			
+			You may convey a work based on the Program, or the modifications to produce it from the Program, in the form of source code under the terms of section 4, provided that you also meet all of these conditions:
+			:
+			**a)** The work must carry prominent notices stating that you modified it, and giving a relevant date.
+			:
+			
+			**b)** The work must carry prominent notices stating that it is released under this License and any conditions added under section 7. This requirement modifies the requirement in section 4 to “keep intact all notices”.
+			:
+			
+			**c)** You must license the entire work, as a whole, under this License to anyone who comes into possession of a copy. This License will therefore apply, along with any applicable section 7 additional terms, to the whole of the work, and all its parts, regardless of how they are packaged. This License gives no permission to license the work in any other way, but it does not invalidate such permission if you have separately received it.
+			:
+			
+			**d)** If the work has interactive user interfaces, each must display Appropriate Legal Notices; however, if the Program has interactive interfaces that do not display Appropriate Legal Notices, your work need not make them do so.
+			:
+			A compilation of a covered work with other separate and independent works, which are not by their nature extensions of the covered work, and which are not combined with it such as to form a larger program, in or on a volume of a storage or distribution medium, is called an “aggregate” if the compilation and its resulting copyright are not used to limit the access or legal rights of the compilation's users beyond what the individual works permit. Inclusion of a covered work in an aggregate does not cause this License to apply to the other parts of the aggregate.
+			}}
+			\page
+			{{license,wide
+			##### 6. Conveying Non-Source Forms.
+			
+			You may convey a covered work in object code form under the terms of sections 4 and 5, provided that you also convey the machine-readable Corresponding Source under the terms of this License, in one of these ways:
+			:
+			**a)** Convey the object code in, or embodied in, a physical product (including a physical distribution medium), accompanied by the Corresponding Source fixed on a durable physical medium customarily used for software interchange.
+			:
+			**b)** Convey the object code in, or embodied in, a physical product (including a physical distribution medium), accompanied by a written offer, valid for at least three years and valid for as long as you offer spare parts or customer support for that product model, to give anyone who possesses the object code either (1) a copy of the Corresponding Source for all the software in the product that is covered by this License, on a durable physical medium customarily used for software interchange, for a price no more than your reasonable cost of physically performing this conveying of source, or (2) access to copy the Corresponding Source from a network server at no charge.
+			:
+			**c)** Convey individual copies of the object code with a copy of the written offer to provide the Corresponding Source. This alternative is allowed only occasionally and noncommercially, and only if you received the object code with such an offer, in accord with subsection 6b.
+			:
+			**d)** Convey the object code by offering access from a designated place (gratis or for a charge), and offer equivalent access to the Corresponding Source in the same way through the same place at no further charge. You need not require recipients to copy the Corresponding Source along with the object code. If the place to copy the object code is a network server, the Corresponding Source may be on a different server (operated by you or a third party) that supports equivalent copying facilities, provided you maintain clear directions next to the object code saying where to find the Corresponding Source. Regardless of what server hosts the Corresponding Source, you remain obligated to ensure that it is available for as long as needed to satisfy these requirements.
+			:
+			**e)** Convey the object code using peer-to-peer transmission, provided you inform other peers where the object code and Corresponding Source of the work are being offered to the general public at no charge under subsection 6d.
+			:
+			A separable portion of the object code, whose source code is excluded from the Corresponding Source as a System Library, need not be included in conveying the object code work.
+			:
+			A “User Product” is either (1) a “consumer product”, which means any tangible personal property which is normally used for personal, family, or household purposes, or (2) anything designed or sold for incorporation into a dwelling. In determining whether a product is a consumer product, doubtful cases shall be resolved in favor of coverage. For a particular product received by a particular user, “normally used” refers to a typical or common use of that class of product, regardless of the status of the particular user or of the way in which the particular user actually uses, or expects or is expected to use, the product. A product is a consumer product regardless of whether the product has substantial commercial, industrial or non-consumer uses, unless such uses represent the only significant mode of use of the product.
+			:
+			“Installation Information” for a User Product means any methods, procedures, authorization keys, or other information required to install and execute modified versions of a covered work in that User Product from a modified version of its Corresponding Source. The information must suffice to ensure that the continued functioning of the modified object code is in no case prevented or interfered with solely because modification has been made.
+			:
+			If you convey an object code work under this section in, or with, or specifically for use in, a User Product, and the conveying occurs as part of a transaction in which the right of possession and use of the User Product is transferred to the recipient in perpetuity or for a fixed term (regardless of how the transaction is characterized), the Corresponding Source conveyed under this section must be accompanied by the Installation Information. But this requirement does not apply if neither you nor any third party retains the ability to install modified object code on the User Product (for example, the work has been installed in ROM).
+			:
+			The requirement to provide Installation Information does not include a requirement to continue to provide support service, warranty, or updates for a work that has been modified or installed by the recipient, or for the User Product in which it has been modified or installed. Access to a network may be denied when the modification itself materially and adversely affects the operation of the network or violates the rules and protocols for communication across the network.
+			:
+			}}
+			\page
+			{{license,wide
+			Corresponding Source conveyed, and Installation Information provided, in accord with this section must be in a format that is publicly documented (and with an implementation available to the public in source code form), and must require no special password or key for unpacking, reading or copying.
+			
+			##### 7. Additional Terms.
+			
+			“Additional permissions” are terms that supplement the terms of this License by making exceptions from one or more of its conditions. Additional permissions that are applicable to the entire Program shall be treated as though they were included in this License, to the extent that they are valid under applicable law. If additional permissions apply only to part of the Program, that part may be used separately under those permissions, but the entire Program remains governed by this License without regard to the additional permissions.
+			:
+			When you convey a copy of a covered work, you may at your option remove any additional permissions from that copy, or from any part of it. (Additional permissions may be written to require their own removal in certain cases when you modify the work.) You may place additional permissions on material, added by you to a covered work, for which you have or can give appropriate copyright permission.
+			:
+			Notwithstanding any other provision of this License, for material you add to a covered work, you may (if authorized by the copyright holders of that material) supplement the terms of this License with terms:
+			:
+			**a)** Disclaiming warranty or limiting liability differently from the terms of sections 15 and 16 of this License; or
+			:
+			**b)** Requiring preservation of specified reasonable legal notices or author attributions in that material or in the Appropriate Legal Notices displayed by works containing it; or
+			:
+			**c)** Prohibiting misrepresentation of the origin of that material, or requiring that modified versions of such material be marked in reasonable ways as different from the original version; or
+			:
+			**d)** Limiting the use for publicity purposes of names of licensors or authors of the material; or
+			:
+			**e)** Declining to grant rights under trademark law for use of some trade names, trademarks, or service marks; or
+			:
+			**f)** Requiring indemnification of licensors and authors of that material by anyone who conveys the material (or modified versions of it) with contractual assumptions of liability to the recipient, for any liability that these contractual assumptions directly impose on those licensors and authors.
+			:
+			All other non-permissive additional terms are considered “further restrictions” within the meaning of section 10. If the Program as you received it, or any part of it, contains a notice stating that it is governed by this License along with a term that is a further restriction, you may remove that term. If a license document contains a further restriction but permits relicensing or conveying under this License, you may add to a covered work material governed by the terms of that license document, provided that the further restriction does not survive such relicensing or conveying.
+			:
+			If you add terms to a covered work in accord with this section, you must place, in the relevant source files, a statement of the additional terms that apply to those files, or a notice indicating where to find the applicable terms.
+			:
+			Additional terms, permissive or non-permissive, may be stated in the form of a separately written license, or stated as exceptions; the above requirements apply either way.
+			
+			##### 8. Termination.
+			
+			You may not propagate or modify a covered work except as expressly provided under this License. Any attempt otherwise to propagate or modify it is void, and will automatically terminate your rights under this License (including any patent licenses granted under the third paragraph of section 11).
+			:
+			However, if you cease all violation of this License, then your license from a particular copyright holder is reinstated (a) provisionally, unless and until the copyright holder explicitly and finally terminates your license, and (b) permanently, if the copyright holder fails to notify you of the violation by some reasonable means prior to 60 days after the cessation.
+			:
+			Moreover, your license from a particular copyright holder is reinstated permanently if the copyright holder notifies you of the violation by some reasonable means, this is the first time you have received notice of violation of this License (for any work) from that copyright holder, and you cure the violation prior to 30 days after your receipt of the notice.
+			:
+			Termination of your rights under this section does not terminate the licenses of parties who have received copies or rights from you under this License. If your rights have been terminated and not permanently reinstated, you do not qualify to receive new licenses for the same material under section 10.
+			}}
+			\page
+			{{license,wide
+			##### 9. Acceptance Not Required for Having Copies.
+			
+			You are not required to accept this License in order to receive or run a copy of the Program. Ancillary propagation of a covered work occurring solely as a consequence of using peer-to-peer transmission to receive a copy likewise does not require acceptance. However, nothing other than this License grants you permission to propagate or modify any covered work. These actions infringe copyright if you do not accept this License. Therefore, by modifying or propagating a covered work, you indicate your acceptance of this License to do so.
+			
+			##### 10. Automatic Licensing of Downstream Recipients.
+			
+			Each time you convey a covered work, the recipient automatically receives a license from the original licensors, to run, modify and propagate that work, subject to this License. You are not responsible for enforcing compliance by third parties with this License.
+			:
+			An “entity transaction” is a transaction transferring control of an organization, or substantially all assets of one, or subdividing an organization, or merging organizations. 
+			:
+			If propagation of a covered work results from an entity transaction, each party to that transaction who receives a copy of the work also receives whatever licenses to the work the party's predecessor in interest had or could give under the previous paragraph, plus a right to possession of the Corresponding Source of the work from the predecessor in interest, if the predecessor has it or can get it with reasonable efforts.
+			:
+			You may not impose any further restrictions on the exercise of the rights granted or affirmed under this License. For example, you may not impose a license fee, royalty, or other charge for exercise of rights granted under this License, and you may not initiate litigation (including a cross-claim or counterclaim in a lawsuit) alleging that any patent claim is infringed by making, using, selling, offering for sale, or importing the Program or any portion of it.
+			
+			##### 11. Patents.
+			:
+			A “contributor” is a copyright holder who authorizes use under this License of the Program or a work on which the Program is based. The work thus licensed is called the contributor's “contributor version”.
+			:
+			A contributor's “essential patent claims” are all patent claims owned or controlled by the contributor, whether already acquired or hereafter acquired, that would be infringed by some manner, permitted by this License, of making, using, or selling its contributor version, but do not include claims that would be infringed only as a consequence of further modification of the contributor version. For purposes of this definition, “control” includes the right to grant patent sublicenses in a manner consistent with the requirements of this License.
+			:
+			Each contributor grants you a non-exclusive, worldwide, royalty-free patent license under the contributor's essential patent claims, to make, use, sell, offer for sale, import and otherwise run, modify and propagate the contents of its contributor version.
+			:
+			In the following three paragraphs, a “patent license” is any express agreement or commitment, however denominated, not to enforce a patent (such as an express permission to practice a patent or covenant not to sue for patent infringement). To “grant” such a patent license to a party means to make such an agreement or commitment not to enforce a patent against the party.
+			:
+			If you convey a covered work, knowingly relying on a patent license, and the Corresponding Source of the work is not available for anyone to copy, free of charge and under the terms of this License, through a publicly available network server or other readily accessible means, then you must either (1) cause the Corresponding Source to be so available, or (2) arrange to deprive yourself of the benefit of the patent license for this particular work, or (3) arrange, in a manner consistent with the requirements of this License, to extend the patent license to downstream recipients. “Knowingly relying” means you have actual knowledge that, but for the patent license, your conveying the covered work in a country, or your recipient's use of the covered work in a country, would infringe one or more identifiable patents in that country that you have reason to believe are valid.
+			:
+			If, pursuant to or in connection with a single transaction or arrangement, you convey, or propagate by procuring conveyance of, a covered work, and grant a patent license to some of the parties receiving the covered work authorizing them to use, propagate, modify or convey a specific copy of the covered work, then the patent license you grant is automatically extended to all recipients of the covered work and works based on it.
+			}}
+			\page
+			{{license,wide
+			A patent license is “discriminatory” if it does not include within the scope of its coverage, prohibits the exercise of, or is conditioned on the non-exercise of one or more of the rights that are specifically granted under this License. You may not convey a covered work if you are a party to an arrangement with a third party that is in the business of distributing software, under which you make payment to the third party based on the extent of your activity of conveying the work, and under which the third party grants, to any of the parties who would receive the covered work from you, a discriminatory patent license (a) in connection with copies of the covered work conveyed by you (or copies made from those copies), or (b) primarily for and in connection with specific products or compilations that contain the covered work, unless you entered into that arrangement, or that patent license was granted, prior to 28 March 2007.
+			:
+			Nothing in this License shall be construed as excluding or limiting any implied license or other defenses to infringement that may otherwise be available to you under applicable patent law.
+			
+			##### 12. No Surrender of Others' Freedom.
+			
+			If conditions are imposed on you (whether by court order, agreement or otherwise) that contradict the conditions of this License, they do not excuse you from the conditions of this License. If you cannot convey a covered work so as to satisfy simultaneously your obligations under this License and any other pertinent obligations, then as a consequence you may not convey it at all.
+			:
+			For example, if you agree to terms that obligate you to collect a royalty for further conveying from those to whom you convey the Program, the only way you could satisfy both those terms and this License would be to refrain entirely from conveying the Program.
+			
+			##### 13. Use with the GNU Affero General Public License.
+			
+			Notwithstanding any other provision of this License, you have permission to link or combine any covered work with a work licensed under version 3 of the GNU Affero General Public License into a single combined work, and to convey the resulting work. The terms of this License will continue to apply to the part which is the covered work, but the special requirements of the GNU Affero General Public License, section 13, concerning interaction through a network will apply to the combination as such.
+			
+			##### 14. Revised Versions of this License.
+			
+			The Free Software Foundation may publish revised and/or new versions of the GNU General Public License from time to time. Such new versions will be similar in spirit to the present version, but may differ in detail to address new problems or concerns.
+			:
+			Each version is given a distinguishing version number. If the Program specifies that a certain numbered version of the GNU General Public License “or any later version” applies to it, you have the option of following the terms and conditions either of that numbered version or of any later version published by the Free Software Foundation. If the Program does not specify a version number of the GNU General Public License, you may choose any version ever published by the Free Software Foundation.
+			:
+			If the Program specifies that a proxy can decide which future versions of the GNU General Public License can be used, that proxy's public statement of acceptance of a version permanently authorizes you to choose that version for the Program.
+			:
+			Later license versions may give you additional or different permissions. However, no additional obligations are imposed on any author or copyright holder as a result of your choosing to follow a later version.
+			
+			##### 15. Disclaimer of Warranty.
+			
+			THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM “AS IS” WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+			}}
+			\page
+			{{license,wide
+			##### 16. Limitation of Liability.
+			
+			IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
+			
+			##### 17. Interpretation of Sections 15 and 16.
+			
+			If the disclaimer of warranty and limitation of liability provided above cannot be given local legal effect according to their terms, reviewing courts shall apply local law that most closely approximates an absolute waiver of all civil liability in connection with the Program, unless a warranty or assumption of liability accompanies a copy of the Program in return for a fee.
+			}}`;
+	},
+	gpl3title : function() {
+		return `
+		\<one line to give the program's name and a brief idea of what it does.\>
+		Copyright (C) \<year\>  \<name of author\>
+
+		This program is free software: you can redistribute it and/or modify
+		it under the terms of the GNU General Public License as published by
+		the Free Software Foundation, either version 3 of the License, or
+		(at your option) any later version.
+
+		This program is distributed in the hope that it will be useful,
+		but WITHOUT ANY WARRANTY; without even the implied warranty of
+		MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+		GNU General Public License for more details.
+
+		You should have received a copy of the GNU General Public License
+		along with this program.  If not, see <https://www.gnu.org/licenses/>.
+		`;
+	},
+	gfdl : function() {
+		return dedent`{{license,wide
+		## GNU Free Documentation License
+		:
+		Version 1.3, 3 November 2008
+		:
+		Copyright (C) 2000, 2001, 2002, 2007, 2008 Free Software Foundation,
+		Inc. <https://fsf.org/>
+		:
+		Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed.
+
+		## 0. PREAMBLE
+		:
+		The purpose of this License is to make a manual, textbook, or other functional and useful document "free" in the sense of freedom: to assure everyone the effective freedom to copy and redistribute it, with or without modifying it, either commercially or noncommercially. Secondarily, this License preserves for the author and publisher a way to get credit for their work, while not being considered responsible for modifications made by others.
+		:
+		This License is a kind of "copyleft", which means that derivative works of the document must themselves be free in the same sense. It complements the GNU General Public License, which is a copyleft license designed for free software.
+		:
+		We have designed this License in order to use it for manuals for free software, because free software needs free documentation: a free program should come with manuals providing the same freedoms that the software does. But this License is not limited to software manuals; it can be used for any textual work, regardless of subject matter or whether it is published as a printed book. We recommend this License principally for works whose purpose is instruction or reference.
+
+		## 1. APPLICABILITY AND DEFINITIONS
+		:
+		This License applies to any manual or other work, in any medium, that contains a notice placed by the copyright holder saying it can be distributed under the terms of this License. Such a notice grants a world-wide, royalty-free license, unlimited in duration, to use that work under the conditions stated herein. The "Document", below, refers to any such manual or work. Any member of the public is a licensee, and is addressed as "you". You accept the license if you copy, modify or distribute the work in a way requiring permission under copyright law.
+		:
+		A "Modified Version" of the Document means any work containing the Document or a portion of it, either copied verbatim, or with modifications and/or translated into another language.
+		:
+		A "Secondary Section" is a named appendix or a front-matter section of the Document that deals exclusively with the relationship of the publishers or authors of the Document to the Document's overall subject (or to related matters) and contains nothing that could fall directly within that overall subject. (Thus, if the Document is in part a textbook of mathematics, a Secondary Section may not explain any mathematics.) The relationship could be a matter of historical connection with the subject or with related matters, or of legal, commercial, philosophical, ethical or political position regarding them.
+		:
+		The "Invariant Sections" are certain Secondary Sections whose titles are designated, as being those of Invariant Sections, in the notice that says that the Document is released under this License. If a section does not fit the above definition of Secondary then it is not allowed to be designated as Invariant. The Document may contain zero Invariant Sections. If the Document does not identify any Invariant Sections then there are none.
+		:
+		The "Cover Texts" are certain short passages of text that are listed, as Front-Cover Texts or Back-Cover Texts, in the notice that says that the Document is released under this License. A Front-Cover Text may be at most 5 words, and a Back-Cover Text may be at most 25 words.
+		:
+		A "Transparent" copy of the Document means a machine-readable copy, represented in a format whose specification is available to the general public, that is suitable for revising the document straightforwardly with generic text editors or (for images composed of pixels) generic paint programs or (for drawings) some widely available drawing editor, and that is suitable for input to text formatters or for automatic translation to a variety of formats suitable for input to text formatters. A copy made in an otherwise Transparent file format whose markup, or absence of markup, has been arranged to thwart or discourage subsequent modification by readers is not Transparent. An image format is not Transparent if used for any substantial amount of text. A copy that is not "Transparent" is called "Opaque".
+		}}
+		\page
+		{{license,wide
+		Examples of suitable formats for Transparent copies include plain ASCII without markup, Texinfo input format, LaTeX input format, SGML or XML using a publicly available DTD, and standard-conforming simple HTML, PostScript or PDF designed for human modification. Examples of transparent image formats include PNG, XCF and JPG. Opaque formats include proprietary formats that can be read and edited only by proprietary word processors, SGML or XML for which the DTD and/or processing tools are not generally available, and the machine-generated HTML, PostScript or PDF produced by some word processors for output purposes only.
+		:
+		The "Title Page" means, for a printed book, the title page itself, plus such following pages as are needed to hold, legibly, the material this License requires to appear in the title page. For works in formats which do not have any title page as such, "Title Page" means the text near the most prominent appearance of the work's title, preceding the beginning of the body of the text.
+		:
+		The "publisher" means any person or entity that distributes copies of the Document to the public.
+		:
+		A section "Entitled XYZ" means a named subunit of the Document whose title either is precisely XYZ or contains XYZ in parentheses following text that translates XYZ in another language. (Here XYZ stands for a specific section name mentioned below, such as "Acknowledgements", "Dedications", "Endorsements", or "History".) To "Preserve the Title" of such a section when you modify the Document means that it remains a section "Entitled XYZ" according to this definition.
+		:
+		The Document may include Warranty Disclaimers next to the notice which states that this License applies to the Document. These Warranty Disclaimers are considered to be included by reference in this License, but only as regards disclaiming warranties: any other implication that these Warranty Disclaimers may have is void and has no effect on the meaning of this License.
+
+		## 2. VERBATIM COPYING
+		:
+		You may copy and distribute the Document in any medium, either commercially or noncommercially, provided that this License, the copyright notices, and the license notice saying this License applies to the Document are reproduced in all copies, and that you add no other conditions whatsoever to those of this License. You may not use technical measures to obstruct or control the reading or further copying of the copies you make or distribute. However, you may accept compensation in exchange for copies. If you distribute a large enough number of copies you must also follow the conditions in section 3.
+		:
+		You may also lend copies, under the same conditions stated above, and you may publicly display copies.
+
+		## 3. COPYING IN QUANTITY
+		:
+		If you publish printed copies (or copies in media that commonly have printed covers) of the Document, numbering more than 100, and the Document's license notice requires Cover Texts, you must enclose the copies in covers that carry, clearly and legibly, all these Cover Texts: Front-Cover Texts on the front cover, and Back-Cover Texts on the back cover. Both covers must also clearly and legibly identify you as the publisher of these copies. The front cover must present the full title with all words of the title equally prominent and visible. You may add other material on the covers in addition. Copying with changes limited to the covers, as long as they preserve the title of the Document and satisfy these conditions, can be treated as verbatim copying in other respects.
+		:
+		If the required texts for either cover are too voluminous to fit legibly, you should put the first ones listed (as many as fit reasonably) on the actual cover, and continue the rest onto adjacent pages.
+		:
+		If you publish or distribute Opaque copies of the Document numbering more than 100, you must either include a machine-readable Transparent copy along with each Opaque copy, or state in or with each Opaque copy a computer-network location from which the general network-using public has access to download using public-standard network protocols a complete Transparent copy of the Document, free of added material. If you use the latter option, you must take reasonably prudent steps, when you begin distribution of Opaque copies in quantity, to ensure that this Transparent copy will remain thus accessible at the stated location until at least one year after the last time you distribute an Opaque copy (directly or through your agents or retailers) of that edition to the public.
+		:
+		It is requested, but not required, that you contact the authors of the Document well before redistributing any large number of copies, to give them a chance to provide you with an updated version of the Document.
+		}}
+		\page
+		{{license,wide
+		## 4. MODIFICATIONS
+		:
+		You may copy and distribute a Modified Version of the Document under the conditions of sections 2 and 3 above, provided that you release the Modified Version under precisely this License, with the Modified Version filling the role of the Document, thus licensing distribution and modification of the Modified Version to whoever possesses a copy of it. In addition, you must do these things in the Modified Version:
+		:
+		::A. Use in the Title Page (and on the covers, if any) a title distinct from that of the Document, and from those of previous versions (which should, if there were any, be listed in the	History section of the Document). You may use the same title as a previous version if the original publisher of that version 	gives permission.
+		::B. List on the Title Page, as authors, one or more persons or entities responsible for authorship of the modifications in the Modified Version, together with at least five of the principal authors of the Document (all of its principal authors, if it has fewer than five), unless they release you from this requirement.
+		::C. State on the Title page the name of the publisher of the Modified Version, as the publisher.
+		::D. Preserve all the copyright notices of the Document.
+		::E. Add an appropriate copyright notice for your modifications adjacent to the other copyright notices.
+		::F. Include, immediately after the copyright notices, a license notice giving the public permission to use the Modified Version under the terms of this License, in the form shown in the Addendum below.
+		::G. Preserve in that license notice the full lists of Invariant Sections and required Cover Texts given in the Document's license notice.
+		::H. Include an unaltered copy of this License.
+		::I. Preserve the section Entitled "History", Preserve its Title, and add to it an item stating at least the title, year, new authors, and publisher of the Modified Version as given on the Title Page. If there is no section Entitled "History" in the Document, create one stating the title, year, authors, and publisher of the Document as given on its Title Page, then add an item describing the Modified Version as stated in the previous sentence.
+		::J. Preserve the network location, if any, given in the Document for public access to a Transparent copy of the Document, and likewise the network locations given in the Document for previous versions it was based on. These may be placed in the "History" section. You may omit a network location for a work that was published at least four years before the Document itself, or if the original publisher of the version it refers to gives permission.
+		::K. For any section Entitled "Acknowledgements" or "Dedications", Preserve the Title of the section, and preserve in the section all the substance and tone of each of the contributor acknowledgements and/or dedications given therein.
+		::L. Preserve all the Invariant Sections of the Document, unaltered in their text and in their titles. Section numbers or the equivalent are not considered part of the section titles.
+		::M. Delete any section Entitled "Endorsements". Such a section may not be included in the Modified Version.
+		::N. Do not retitle any existing section to be Entitled "Endorsements" or to conflict in title with any Invariant Section.
+		::O. Preserve any Warranty Disclaimers.
+		:
+		If the Modified Version includes new front-matter sections or appendices that qualify as Secondary Sections and contain no material copied from the Document, you may at your option designate some or all of these sections as invariant. To do this, add their titles to the list of Invariant Sections in the Modified Version's license notice. These titles must be distinct from any other section titles.
+		:
+		You may add a section Entitled "Endorsements", provided it contains nothing but endorsements of your Modified Version by various parties—for example, statements of peer review or that the text has been approved by an organization as the authoritative definition of a standard.
+		:
+		You may add a passage of up to five words as a Front-Cover Text, and a passage of up to 25 words as a Back-Cover Text, to the end of the list of Cover Texts in the Modified Version. Only one passage of Front-Cover Text and one of Back-Cover Text may be added by (or through arrangements made by) any one entity. If the Document already includes a cover text for the same cover, previously added by you or by arrangement made by the same entity you are acting on behalf of, you may not add another; but you may replace the old one, on explicit permission from the previous publisher that added the old one.
+		:
+		The author(s) and publisher(s) of the Document do not by this License give permission to use their names for publicity for or to assert or imply endorsement of any Modified Version.
+		}}
+		\page
+		{{license,wide
+		## 5. COMBINING DOCUMENTS
+		:
+		You may combine the Document with other documents released under this License, under the terms defined in section 4 above for modified versions, provided that you include in the combination all of the Invariant Sections of all of the original documents, unmodified, and list them all as Invariant Sections of your combined work in its license notice, and that you preserve all their Warranty Disclaimers.
+		:
+		The combined work need only contain one copy of this License, and multiple identical Invariant Sections may be replaced with a single copy. If there are multiple Invariant Sections with the same name but different contents, make the title of each such section unique by adding at the end of it, in parentheses, the name of the original author or publisher of that section if known, or else a unique number. Make the same adjustment to the section titles in the list of Invariant Sections in the license notice of the combined work. 
+		:
+		In the combination, you must combine any sections Entitled "History" in the various original documents, forming one section Entitled "History"; likewise combine any sections Entitled "Acknowledgements", and any sections Entitled "Dedications". You must delete all sections Entitled "Endorsements".
+
+		## 6. COLLECTIONS OF DOCUMENTS
+		:
+		You may make a collection consisting of the Document and other documents released under this License, and replace the individual copies of this License in the various documents with a single copy that is included in the collection, provided that you follow the rules of this License for verbatim copying of each of the documents in all other respects.
+		:
+		You may extract a single document from such a collection, and distribute it individually under this License, provided you insert a copy of this License into the extracted document, and follow this License in all other respects regarding verbatim copying of that document.
+
+		## 7. AGGREGATION WITH INDEPENDENT WORKS
+		:
+		A compilation of the Document or its derivatives with other separate and independent documents or works, in or on a volume of a storage or distribution medium, is called an "aggregate" if the copyright resulting from the compilation is not used to limit the legal rights of the compilation's users beyond what the individual works permit. When the Document is included in an aggregate, this License does not apply to the other works in the aggregate which are not themselves derivative works of the Document.
+		:
+		If the Cover Text requirement of section 3 is applicable to these copies of the Document, then if the Document is less than one half of the entire aggregate, the Document's Cover Texts may be placed on covers that bracket the Document within the aggregate, or the electronic equivalent of covers if the Document is in electronic form. Otherwise they must appear on printed covers that bracket the whole aggregate.
+
+		## 8. TRANSLATION
+		:
+		Translation is considered a kind of modification, so you may distribute translations of the Document under the terms of section 4. Replacing Invariant Sections with translations requires special permission from their copyright holders, but you may include translations of some or all Invariant Sections in addition to the original versions of these Invariant Sections. You may include a translation of this License, and all the license notices in the Document, and any Warranty Disclaimers, provided that you also include the original English version of this License and the original versions of those notices and disclaimers. In case of a disagreement between the translation and the original version of this License or a notice or disclaimer, the original version will prevail.
+		:
+		If a section in the Document is Entitled "Acknowledgements", "Dedications", or "History", the requirement (section 4) to Preserve its Title (section 1) will typically require changing the actual title.
+		}}
+		\page
+		{{license,wide
+		## 9. TERMINATION
+		:
+		You may not copy, modify, sublicense, or distribute the Document except as expressly provided under this License. Any attempt otherwise to copy, modify, sublicense, or distribute it is void, and will automatically terminate your rights under this License.
+		:
+		However, if you cease all violation of this License, then your license from a particular copyright holder is reinstated (a) provisionally, unless and until the copyright holder explicitly and finally terminates your license, and (b) permanently, if the copyright holder fails to notify you of the violation by some reasonable means prior to 60 days after the cessation.
+		:
+		Moreover, your license from a particular copyright holder is reinstated permanently if the copyright holder notifies you of the violation by some reasonable means, this is the first time you have received notice of violation of this License (for any work) from that copyright holder, and you cure the violation prior to 30 days after your receipt of the notice.
+		:
+		Termination of your rights under this section does not terminate the licenses of parties who have received copies or rights from you under this License. If your rights have been terminated and not permanently reinstated, receipt of a copy of some or all of the same material does not give you any rights to use it.
+
+		## 10. FUTURE REVISIONS OF THIS LICENSE
+		:
+		The Free Software Foundation may publish new, revised versions of the GNU Free Documentation License from time to time. Such new versions will be similar in spirit to the present version, but may differ in detail to address new problems or concerns. See <https://www.gnu.org/licenses/>.
+		:
+		Each version of the License is given a distinguishing version number. If the Document specifies that a particular numbered version of this License "or any later version" applies to it, you have the option of following the terms and conditions either of that specified version or of any later version that has been published (not as a draft) by the Free Software Foundation. If the Document does not specify a version number of this License, you may choose any version ever published (not as a draft) by the Free Software Foundation. If the Document specifies that a proxy can decide which future versions of this License can be used, that proxy's public statement of acceptance of a version permanently authorizes you to choose that version for the Document.
+
+		## 11. RELICENSING
+		:
+		"Massive Multiauthor Collaboration Site" (or "MMC Site") means any World Wide Web server that publishes copyrightable works and also provides prominent facilities for anybody to edit those works. A public wiki that anybody can edit is an example of such a server. A "Massive Multiauthor Collaboration" (or "MMC") contained in the site means any set of copyrightable works thus published on the MMC site.
+		:
+		"CC-BY-SA" means the Creative Commons Attribution-Share Alike 3.0 license published by Creative Commons Corporation, a not-for-profit corporation with a principal place of business in San Francisco, California, as well as future copyleft versions of that license published by that same organization.
+		:
+		"Incorporate" means to publish or republish a Document, in whole or in part, as part of another Document.
+		:
+		An MMC is "eligible for relicensing" if it is licensed under this License, and if all works that were first published under this License somewhere other than this MMC, and subsequently incorporated in whole or in part into the MMC, (1) had no cover texts or invariant sections, and (2) were thus incorporated prior to November 1, 2008.
+		:
+		The operator of an MMC Site may republish an MMC contained in the site under CC-BY-SA on the same site at any time before August 1, 2009, provided the MMC is eligible for relicensing.
+		}}`;
+	},
+	gfdltitle : function() {
+		return `
+		Copyright (C)  YEAR  YOUR NAME.
+		Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.3 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.
+		A copy of the license is included in the section entitled "GNU Free Documentation License".
+		`;
+	},
+	gfdltitleinvariant : function() {
+		return `
+		Copyright (C)  YEAR  YOUR NAME.
+		Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.3 or any later version published by the Free Software Foundation; with the Invariant Sections being LIST THEIR TITLES, with the Front-Cover Texts being LIST, and with the Back-Cover Texts being LIST.
+		A copy of the license is included in the section entitled "GNU Free Documentation License".
+		`;
+	},
+};

themes/V3/Blank/snippets/licenseMongoose.gen.js

@@ -0,0 +1,22 @@
+/* eslint-disable max-lines */
+const dedent = require('dedent');
+
+// Mongoose Publishing Licenses
+
+module.exports = {
+	fairUseLong : function() {
+		return `The Traveller, 2300AD and Twilight: 2000 games in all forms are owned by Mongoose Publishing. Copyright 1977 - 2025 Mongoose Publishing. Traveller is a registered trademark of Mongoose Publishing. Mongoose Publishing permits web sites and fanzines for this game, provided it contains this notice, that Mongoose Publishing is notified, and subject to a withdrawal of permission on 90 days notice. The contents of this site are for personal, non-commercial use only. Any use of Mongoose Publishing's copyrighted material or trademarks anywhere on this web site and its files should not be viewed as a challenge to those copyrights or trademarks. In addition, any program/articles/file on this site cannot be republished or distributed without the consent of the author who contributed it.\n\n`;
+	},
+	fairUseTraveller : function() {
+		return `The Traveller game in all forms is owned by Mongoose Publishing. Copyright 1977 - 2025 Mongoose Publishing.\n\n`;
+	},
+	fairUse2300AD : function() {
+		return `The 2300AD game in all forms is owned by Mongoose Publishing. Copyright 1986 - 2025 Mongoose Publishing.\n\n`;
+	},
+	fairUseTwilight2000 : function() {
+		return `The Twilight: 2000 game in all forms is owned by Mongoose Publishing. Copyright 1984 - 2025 Mongoose Publishing.\n\n`;
+	},
+	TASLegal : function(){
+		return `This product was created under license. Traveller and its logo are trademarks of Mongoose Publishing. This work contains material that is copyright Mongoose Publishing and/or other authors. Such material is used with permission under the Community Content Agreement for The Travellers' Aid Society.\n\n`;
+	}
+};

themes/V3/Blank/snippets/licenseWotC.gen.js

@@ -0,0 +1,140 @@
+/* eslint-disable max-lines */
+const dedent = require('dedent');
+
+module.exports = {
+	ogl1a : function () {
+		return dedent`
+			{{license,wide
+			THIS LICENSE IS APPROVED FOR GENERAL USE. PERMISSION TO DISTRIBUTE THIS LICENSE IS MADE BY WIZARDS OF THE COAST!
+
+			### OPEN GAME LICENSE Version 1.0a
+				
+			The following text is the property of Wizards of the Coast, Inc. and is Copyright 2000 Wizards of the Coast, Inc ("Wizards"). All Rights Reserved.
+			1. **Definitions:** 
+
+			**(a)**:: **"Contributors"** means the copyright and/or trademark owners who have contributed Open Game Content; 
+			**(b)**:: **"Derivative Material"** means copyrighted material including derivative works and translations (including into other computer languages), potation, modification, correction, addition, extension, upgrade, improvement, compilation, abridgment or other form in which an existing work may be recast, transformed or adapted; 
+			**(c)**:: **"Distribute"** means to reproduce, license, rent, lease, sell, broadcast, publicly display, transmit or otherwise distribute; 
+			**(d)**::**"Open Game Content"** means the game mechanic and includes the methods, procedures, processes and routines to the extent such content does not embody the Product Identity and is an enhancement over the prior art and any additional content clearly identified as Open Game Content by the Contributor, and means any work covered by this License, including translations and derivative works under copyright law, but specifically excludes Product Identity. 
+			**(e)**:: **"Product Identity"** means product and product line names, logos and identifying marks including trade dress; artifacts; creatures characters; stories, storylines, plots, thematic elements, dialogue, incidents, language, artwork, symbols, designs, depictions, likenesses, formats, poses, concepts, themes and graphic, photographic and other visual or audio representations; names and descriptions of characters, spells, enchantments, personalities, teams, personas, likenesses and special abilities; places, locations, environments, creatures, equipment, magical or supernatural abilities or effects, logos, symbols, or graphic designs; and any other trademark or registered trademark clearly identified as Product identity by the owner of the Product Identity, and which specifically excludes the Open Game Content; 
+			**(f)**:: **"Trademark"** means the logos, names, mark, sign, motto, designs that are used by a Contributor to identify itself or its products or the associated products contributed to the Open Game License by the Contributor 
+			**(g)**:: **"Use"**, **"Used"** or **"Using"** means to use, Distribute, copy, edit, format, modify, translate and otherwise create Derivative Material of Open Game Content. 
+			**(h)**:: **"You"** or **"Your"** means the licensee in terms of this agreement.
+			
+			
+			2. **The License:** This License applies to any Open Game Content that contains a notice indicating that the Open Game Content may only be Used under and in terms of this License. You must affix such a notice to any Open Game Content that you Use. No terms may be added to or subtracted from this License except as described by the License itself. No other terms or conditions may be applied to any Open Game Content distributed using this License.
+			3. **Offer and Acceptance:** By Using the Open Game Content You indicate Your acceptance of the terms of this License.
+			4. **Grant and Consideration:** In consideration for agreeing to use this License, the Contributors grant You a perpetual, worldwide, royalty-free, non-exclusive license with the exact terms of this License to Use, the Open Game Content.
+			5. **Representation of Authority to Contribute:** If You are contributing original material as Open Game Content, You represent that Your Contributions are Your original creation and/or You have sufficient rights to grant the rights conveyed by this License.
+			6. **Notice of License Copyright:** You must update the COPYRIGHT NOTICE portion of this License to include the exact text of the COPYRIGHT NOTICE of any Open Game Content You are copying, modifying or distributing, and You must add the title, the copyright date, and the copyright holder's name to the COPYRIGHT NOTICE of any original Open Game Content you Distribute.
+			7. **Use of Product Identity:** You agree not to Use any Product Identity, including as an indication as to compatibility, except as expressly licensed in another, independent Agreement with the owner of each element of that Product Identity. You agree not to indicate compatibility or co-adaptability with any Trademark or Registered Trademark in conjunction with a work containing Open Game Content except as expressly licensed in another, independent Agreement with the owner of such Trademark or Registered Trademark. The use of any Product Identity in Open Game Content does not constitute a challenge to the ownership of that Product Identity. The owner of any Product Identity used in Open Game Content shall retain all rights, title and interest in and to that Product Identity.
+			8. **Identification:** If you distribute Open Game Content You must clearly indicate which portions of the work that you are distributing are Open Game Content.
+
+			}}
+			\page
+
+			{{license,wide
+
+			9. **Updating the License:** Wizards or its designated Agents may publish updated versions of this License. You may use any authorized version of this License to copy, modify and distribute any Open Game Content originally distributed under any version of this License.
+
+			10. **Copy of this License:** You MUST include a copy of this License with every copy of the Open Game Content You Distribute.
+
+			11. **Use of Contributor Credits:** You may not market or advertise the Open Game Content using the name of any Contributor unless You have written permission from the Contributor to do so.
+
+			12. **Inability to Comply:** If it is impossible for You to comply with any of the terms of this License with respect to some or all of the Open Game Content due to statute, judicial order, or governmental regulation then You may not Use any Open Game Material so affected.
+
+			13. **Termination:** This License will terminate automatically if You fail to comply with all terms herein and fail to cure such breach within 30 days of becoming aware of the breach. All sublicenses shall survive the termination of this License.
+
+			14. **Reformation:** If any provision of this License is held to be unenforceable, such provision shall be reformed only to the extent necessary to make it enforceable.
+
+			___
+
+			*COPYRIGHT NOTICE Open Game License v 1.0a Copyright 2000, Wizards of the Coast, Inc.*
+
+			___
+
+			System Reference Document Copyright 2000-2003, Wizards of the Coast, Inc.; Authors Jonathan Tweet, Monte Cook, Skip Williams, Rich Baker, Andy Collins, David Noonan, Rich Redman, Bruce R. Cordell, John D. Rateliff, Thomas Reid, James Wyatt, based on original material by E. Gary Gygax and Dave Arneson.
+
+			:
+
+			END OF LICENSE
+			}}`;
+	},
+
+	fcp : function () {
+		return dedent`
+			{{license,wide
+			### Wizards of the Coast's Fan Content Policy
+							
+			We (that's ***Wizards of the Coast***) are continuously amazed at our Community's creativity and engagement. We love that you enjoy creating and sharing Fan Content (that's the stuff you make) and we want to encourage you to continue to create and share your stuff!
+			
+			You probably have a lot of questions about what you can and can't do with Wizards' intellectual property (IP), so we summoned our law mages to put together this [Fan Content Policy and FAQ](https://company.wizards.com/en/legal/fancontentpolicy). We hope that you understand that any restrictions in this Fan Content Policy are intended to protect Wizards and its games. We've got to protect our IP if we want to keep the lights on!
+			
+			In short, your use of Wizards' IP in your Fan Content is governed by the same rules you learned on the playground: share freely, keep it clean, and don't hurt others.
+			
+			That means we ask you follow these rules:
+			
+			1. **One word: F-R-E-E**. You can use Wizards' IP (except for the restrictions listed in #3) to make Fan Content that you share with the community for free. Free means {{text-decoration:underline FREE}}:
+			
+			- You can't require payments, surveys, downloads, subscriptions, or email registration to access your Fan Content;
+			
+			- You can't sell or license your Fan Content to any third parties for any type of compensation; and
+			
+			- Your Fan Content must be free for others (including Wizards) to view, access, share, and use without paying you anything, obtaining your approval, or giving you credit.
+			
+			___
+			
+			You can, however, subsidize your Fan Content by taking advantage of sponsorships, ad revenue, and donations - so long as it doesn't interfere with the Community's access to your Fan Content.
+			
+			
+			2. **Tell the Community it's unofficial**. Make it clear that your Fan Content is not endorsed or sponsored by Wizards - i.e., unofficial. Please include a note with your Fan Content explaining that:
+			
+			___
+			
+			“[Title of your Fan Content] is unofficial Fan Content permitted under the Fan Content Policy. Not approved/endorsed by Wizards. Portions of the materials used are property of Wizards of the Coast. ©Wizards of the Coast LLC.”
+			
+			3. **Don't hurt others.** Please respect other people's IP. If you don't have the rights to use another person's stuff in your Fan Content - don't. If we learn that your Fan Content also includes other people's IP (e.g., crossovers/mashups) without their permission, we may ask you to take it down.
+			
+			4. **Don't hurt Wizards**. We ask that you refrain from doing any of the following:
+			
+			
+			- **Don't use Wizards' logos and trademarks**. We've included a list of our most frequently asked-about trademarks in the FAQ;
+			
+			- **Don't mess with the legal notices in our stuff**. If the Wizards IP you are incorporating into your Fan Content already has copyright notices, logos, trademarks, or other notices existing within it, don't remove them;
+			
+			- **Don't use Wizards' IP in other games**. This includes your own or other people's games or game components (e.g., rule books, tokens, figures), regardless of whether it is distributed for free;
+			
+			- **Don't use Wizards' Video or Music in your Fan Content**. We know our video trailers are awesome, but use of our videos and music are governed by contracts with third parties. Please don't use any of our video or music content, unless you're embedding a video from an authorized third-party's website (e.g., Twitch or YouTube);
+			
+			
+			5. **No bad stuff**. We have the right to stop or restrict your use of Wizards' IP at any time - for any reason or no reason - including when we think your use is inappropriate, offensive, damaging, or disparaging (and we'll make that call in our sole discretion). If this happens, you must immediately take down your Fan Content or face the Demogorgon (yeah, the big bad is back from being on loan).
+			
+			6. **Practice safe sponsorship**. We understand that great Fan Content can sometimes require special equipment (e.g., videos, podcasts, prop fabrication). We are OK with you using third-party sponsors to subsidize costs if you follow a few rules:
+			
+			- Don't use a sponsor that would be harmful to Wizards. Please don't promote our competitors or endorse inappropriate or offensive sponsors;
+			
+			- Make it clear (verbally or visually) that they are acting as a sponsor only;
+			
+			- Keep any shout-outs, mentions, and credits to a reasonable length; and
+			
+			- Do not associate Wizards with your sponsor in any way.
+			
+			
+			7. **Follow the law of the land**. It's your Fan Content, so you are solely responsible for ensuring that your creations don't violate the laws of your region, country, plane, or dimension. In addition to this Policy, your use of any Wizards' IP must also comply with Wizards' Terms of Use and Code of Conduct (together, the “Wizards Terms”). If there's a conflict between anything in this Policy and the Wizards Terms, the Wizards Terms win. 
+			
+			}}
+			
+			
+			\page
+			{{license,wide
+			Those agreements include important legal terms (such as limitations of lability, indemnification, and dispute resolution), so please review them carefully.
+			
+			
+			
+			**One last thing** - Please don't pull us into any legal battles! Our lawyers are busy enough. If Wizards of the Coast, our partners, affiliates, or employees get hit with any legal claims, fees, or expenses related to your Fan Content, you're responsible for paying all of our costs (including attorney's fees) and any resulting judgment or settlement.
+			
+			
+			
+			}}`;
+	},
+};

themes/V3/Blank/style.less

@@ -498,6 +498,72 @@ body { counter-reset : page-numbers 0; }
 
 }
 
+//*******************************
+// * Ordered List Type Overrides
+// *****************************/
+@counter-style lower-alpha-trailing-paren {
+	system: extends lower-alpha;
+	prefix: "";
+	suffix: ") ";
+  }
+
+.page{
+	.ol-ccby ol {
+		list-style-type: lower-alpha;
+	}
+
+	.ol-ccby ol ol{
+		padding-left: 0px !important;
+		list-style-type: greek;
+	}
+
+	.ol-ccby ol ol ol {
+		padding-left: 0px !important;
+		list-style-type: upper-alpha;
+	}
+
+	.ol-ccby ol ol ol ol {
+		padding-left: 0px !important;
+		list-style-type: lower-roman;
+	}
+
+	.ol-ccby p {
+		padding-left: 25px;
+		text-indent: 0em !important;
+	}
+
+	// Non-indented, numerical lists with slight gap between paragraphs.
+	.ol-lowerLetters ol {
+		list-style-type: lower-alpha-trailing-paren;
+	}
+
+	.ol-lowerLetters ol li p {
+		display: inline;
+	}
+
+  	.ol-lowerLetters ol {
+		list-style-position: inside;
+		padding: 0px;
+	}
+
+	.ol-lowerLetters ol li:not(:last-child) { 
+		 margin-bottom: 0.5em; 	
+	}      	  
+
+	.ol-noIndent ol {
+		list-style-position: inside;
+		padding: 0px;
+	}
+
+	.ol-noIndent ol li p {
+		display: inline;
+	}
+
+	.ol-noIndent ol li:not(:last-child) { 
+		 margin-bottom: 0.5em; 	
+	}  
+}
+
 // *****************************
 // *       INDEX
 // *****************************/
@@ -611,3 +677,17 @@ h6,
 	}
 	.toc.wide li { break-inside : auto; }
 }
+
+
+/**********************************
+Firefox endruns
+**********************************/
+
+@supports (-moz-user-select: none) {  // This section will only apply to Firefox; it's the only browser that supports `-mos-xyz...`
+  .page {
+    blockquote, table {
+      page-break-inside: auto;
+      break-inside: auto; 
+    }
+  }
+}

themes/V3/UnearthedArcana/settings.json

@@ -0,0 +1,6 @@
+{
+  "name" : "UnearthedArcana",
+  "renderer" : "V3",
+  "baseTheme" : false,
+  "baseSnippets" : false
+}

themes/V3/UnearthedArcana/style.less

@@ -0,0 +1,38 @@
+@import (less) './themes/fonts/5e/fonts.less';
+@import (less) './themes/assets/assets.less';
+
+:root {
+	//Colors
+	--HB_Color_Background            : #FFFFFF; // White
+	--HB_Color_WatercolorStain       : #000000; // Black
+}
+
+.page {
+	font-family: Cambria,Georgia,serif;
+	font-size: 14px;
+	h1, h2, h3, h4 {
+  		font-variant: small-caps;
+  		font-weight: normal;
+	}
+	h1 {
+		column-span: all;
+		-webkit-column-span: all;
+		font-size: 40px;
+	}
+	h2 {
+		font-size: 26px;
+	}
+	h3 {
+		font-size: 20px;
+		border-bottom: 2px solid black;
+	}
+	h4 {
+		font-size: 18px;
+	}
+	h5 {
+		font-size: 16px;
+	}
+	h6 {
+		font-size: 14px;
+	}
+}

themes/fonts/iconFonts/diceFont.js

@@ -14,6 +14,7 @@ const diceFont = {
 	'df_d10_7'                : 'df d10-7',
 	'df_d10_8'                : 'df d10-8',
 	'df_d10_9'                : 'df d10-9',
+	'df_d10_0'                : 'df d10-0',
 	'df_d12'                  : 'df d12',
 	'df_d12_1'                : 'df d12-1',
 	'df_d12_10'               : 'df d12-10',
@@ -90,7 +91,108 @@ const diceFont = {
 	'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'
+	'df_solid_small_dot_d6_6' : 'df solid-small-dot-d6-6',
+	'df_d10_00'               : 'df d10-00',
+	'df_d10_01'               : 'df d10-01',
+	'df_d10_02'               : 'df d10-02',
+	'df_d10_03'               : 'df d10-03',
+	'df_d10_04'               : 'df d10-04',
+	'df_d10_05'               : 'df d10-05',
+	'df_d10_06'               : 'df d10-06',
+	'df_d10_07'               : 'df d10-07',
+	'df_d10_08'               : 'df d10-08',
+	'df_d10_09'               : 'df d10-09',
+	'df_d10_10'               : 'df d10-10',
+	'df_d10_11'               : 'df d10-11',
+	'df_d10_12'               : 'df d10-12',
+	'df_d10_13'               : 'df d10-13',
+	'df_d10_14'               : 'df d10-14',
+	'df_d10_15'               : 'df d10-15',
+	'df_d10_16'               : 'df d10-16',
+	'df_d10_17'               : 'df d10-17',
+	'df_d10_18'               : 'df d10-18',
+	'df_d10_19'               : 'df d10-19',
+	'df_d10_20'               : 'df d10-20',
+	'df_d10_21'               : 'df d10-21',
+	'df_d10_22'               : 'df d10-22',
+	'df_d10_23'               : 'df d10-23',
+	'df_d10_24'               : 'df d10-24',
+	'df_d10_25'               : 'df d10-25',
+	'df_d10_26'               : 'df d10-26',
+	'df_d10_27'               : 'df d10-27',
+	'df_d10_28'               : 'df d10-28',
+	'df_d10_29'               : 'df d10-29',
+	'df_d10_30'               : 'df d10-30',
+	'df_d10_31'               : 'df d10-31',
+	'df_d10_32'               : 'df d10-32',
+	'df_d10_33'               : 'df d10-33',
+	'df_d10_34'               : 'df d10-34',
+	'df_d10_35'               : 'df d10-35',
+	'df_d10_36'               : 'df d10-36',
+	'df_d10_37'               : 'df d10-37',
+	'df_d10_38'               : 'df d10-38',
+	'df_d10_39'               : 'df d10-39',
+	'df_d10_40'               : 'df d10-40',
+	'df_d10_41'               : 'df d10-41',
+	'df_d10_42'               : 'df d10-42',
+	'df_d10_43'               : 'df d10-43',
+	'df_d10_44'               : 'df d10-44',
+	'df_d10_45'               : 'df d10-45',
+	'df_d10_46'               : 'df d10-46',
+	'df_d10_47'               : 'df d10-47',
+	'df_d10_48'               : 'df d10-48',
+	'df_d10_49'               : 'df d10-49',
+	'df_d10_50'               : 'df d10-50',
+	'df_d10_51'               : 'df d10-51',
+	'df_d10_52'               : 'df d10-52',
+	'df_d10_53'               : 'df d10-53',
+	'df_d10_54'               : 'df d10-54',
+	'df_d10_55'               : 'df d10-55',
+	'df_d10_56'               : 'df d10-56',
+	'df_d10_57'               : 'df d10-57',
+	'df_d10_58'               : 'df d10-58',
+	'df_d10_59'               : 'df d10-59',
+	'df_d10_60'               : 'df d10-60',
+	'df_d10_61'               : 'df d10-61',
+	'df_d10_62'               : 'df d10-62',
+	'df_d10_63'               : 'df d10-63',
+	'df_d10_64'               : 'df d10-64',
+	'df_d10_65'               : 'df d10-65',
+	'df_d10_66'               : 'df d10-66',
+	'df_d10_67'               : 'df d10-67',
+	'df_d10_68'               : 'df d10-68',
+	'df_d10_69'               : 'df d10-69',
+	'df_d10_70'               : 'df d10-70',
+	'df_d10_71'               : 'df d10-71',
+	'df_d10_72'               : 'df d10-72',
+	'df_d10_73'               : 'df d10-73',
+	'df_d10_74'               : 'df d10-74',
+	'df_d10_75'               : 'df d10-75',
+	'df_d10_76'               : 'df d10-76',
+	'df_d10_77'               : 'df d10-77',
+	'df_d10_78'               : 'df d10-78',
+	'df_d10_79'               : 'df d10-79',
+	'df_d10_80'               : 'df d10-80',
+	'df_d10_81'               : 'df d10-81',
+	'df_d10_82'               : 'df d10-82',
+	'df_d10_83'               : 'df d10-83',
+	'df_d10_84'               : 'df d10-84',
+	'df_d10_85'               : 'df d10-85',
+	'df_d10_86'               : 'df d10-86',
+	'df_d10_87'               : 'df d10-87',
+	'df_d10_88'               : 'df d10-88',
+	'df_d10_89'               : 'df d10-89',
+	'df_d10_90'               : 'df d10-90',
+	'df_d10_91'               : 'df d10-91',
+	'df_d10_92'               : 'df d10-92',
+	'df_d10_93'               : 'df d10-93',
+	'df_d10_94'               : 'df d10-94',
+	'df_d10_95'               : 'df d10-95',
+	'df_d10_96'               : 'df d10-96',
+	'df_d10_97'               : 'df d10-97',
+	'df_d10_98'               : 'df d10-98',
+	'df_d10_99'               : 'df d10-99',
+	'df_d10_100'              : 'df d10-100'
 };
 
 export default diceFont;

themes/fonts/iconFonts/diceFont.less

@@ -6,6 +6,14 @@
 	src : url('../../../fonts/iconFonts/diceFont.woff2');
 } 
 
+@font-face {
+	font-family  : 'DiceFontD100';
+	src          : url('../../../fonts/iconFonts/diceFontD100.woff2') format('woff2');
+	font-weight  : normal;
+	font-style   : normal;
+	font-display : block;
+  }
+  
 .df {
 	display                 : inline;
 	font-family             : 'DiceFont';
@@ -26,17 +34,6 @@
 	&.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'; }
@@ -114,4 +111,568 @@
 	&.solid-small-dot-d6-4::before { content : '\f18c'; }
 	&.solid-small-dot-d6-5::before { content : '\f18d'; }
 	&.solid-small-dot-d6-6::before { content : '\f18e'; }
+
+  // Replacement d10
+
+  &.d10-0::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e900';
+  }
+  
+  &.d10-1::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e901';
+  }
+  
+  &.d10-2::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e902';
+  }
+  
+  &.d10-3::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e903';
+  }
+  
+  &.d10-4::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e904';
+  }
+  
+  &.d10-5::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e905';
+  }
+  
+  &.d10-6::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e906';
+  }
+  
+  &.d10-7::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e907';
+  }
+  
+  &.d10-8::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e908';
+  }
+  
+  &.d10-9::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e909';
+  }
+  
+  &.d10-10::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e90a';
+  }
+
+  // d100
+
+  &.d10-00::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e90b';
+  }
+  
+  &.d10-01::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e90c';
+  }
+  
+  &.d10-02::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e90d';
+  }
+  
+  &.d10-03::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e90e';
+  }
+  
+  &.d10-04::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e90f';
+  }
+  
+  &.d10-05::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e910';
+  }
+  
+  &.d10-06::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e911';
+  }
+  
+  &.d10-07::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e912';
+  }
+  
+  &.d10-08::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e913';
+  }
+  
+  &.d10-09::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e914';
+  }
+  
+  &.d10-10::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e915';
+  }
+  
+  &.d10-11::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e916';
+  }
+  
+  &.d10-12::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e917';
+  }
+  
+  &.d10-13::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e918';
+  }
+  
+  &.d10-14::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e919';
+  }
+  
+  &.d10-15::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e91a';
+  }
+  
+  &.d10-16::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e91b';
+  }
+  
+  &.d10-17::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e91c';
+  }
+  
+  &.d10-18::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e91d';
+  }
+  
+  &.d10-19::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e91e';
+  }
+  
+  &.d10-20::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e91f';
+  }
+  
+  &.d10-21::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e920';
+  }
+  
+  &.d10-22::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e921';
+  }
+  
+  &.d10-23::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e922';
+  }
+  
+  &.d10-24::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e923';
+  }
+  
+  &.d10-25::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e924';
+  }
+  
+  &.d10-26::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e925';
+  }
+  
+  &.d10-27::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e926';
+  }
+  
+  &.d10-28::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e927';
+  }
+  
+  &.d10-29::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e928';
+  }
+  
+  &.d10-30::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e929';
+  }
+  
+  &.d10-31::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e92a';
+  }
+  
+  &.d10-32::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e92b';
+  }
+  
+  &.d10-33::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e92c';
+  }
+  
+  &.d10-34::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e92d';
+  }
+  
+  &.d10-35::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e92e';
+  }
+  
+  &.d10-36::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e92f';
+  }
+  
+  &.d10-37::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e930';
+  }
+  
+  &.d10-38::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e931';
+  }
+  
+  &.d10-39::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e932';
+  }
+  
+  &.d10-40::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e933';
+  }
+  
+  &.d10-41::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e934';
+  }
+  
+  &.d10-42::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e935';
+  }
+  
+  &.d10-43::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e936';
+  }
+  
+  &.d10-44::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e937';
+  }
+  
+  &.d10-45::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e938';
+  }
+  
+  &.d10-46::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e939';
+  }
+  
+  &.d10-47::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e93a';
+  }
+  
+  &.d10-48::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e93b';
+  }
+  
+  &.d10-49::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e93c';
+  }
+  
+  &.d10-50::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e93d';
+  }
+  
+  &.d10-51::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e93e';
+  }
+  
+  &.d10-52::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e93f';
+  }
+  
+  &.d10-53::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e940';
+  }
+  
+  &.d10-54::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e941';
+  }
+  
+  &.d10-55::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e942';
+  }
+  
+  &.d10-56::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e943';
+  }
+  
+  &.d10-57::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e944';
+  }
+  
+  &.d10-58::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e945';
+  }
+  
+  &.d10-59::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e946';
+  }
+  
+  &.d10-60::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e947';
+  }
+  
+  &.d10-61::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e948';
+  }
+  
+  &.d10-62::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e949';
+  }
+  
+  &.d10-63::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e94a';
+  }
+  
+  &.d10-64::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e94b';
+  }
+  
+  &.d10-65::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e94c';
+  }
+  
+  &.d10-66::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e94d';
+  }
+  
+  &.d10-67::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e94e';
+  }
+  
+  &.d10-68::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e94f';
+  }
+  
+  &.d10-69::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e950';
+  }
+  
+  &.d10-70::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e951';
+  }
+  
+  &.d10-71::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e952';
+  }
+  
+  &.d10-72::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e953';
+  }
+  
+  &.d10-73::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e954';
+  }
+  
+  &.d10-74::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e955';
+  }
+  
+  &.d10-75::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e956';
+  }
+  
+  &.d10-76::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e957';
+  }
+  
+  &.d10-77::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e958';
+  }
+  
+  &.d10-78::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e959';
+  }
+  
+  &.d10-79::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e95a';
+  }
+  
+  &.d10-80::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e95b';
+  }
+  
+  &.d10-81::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e95c';
+  }
+  
+  &.d10-82::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e95d';
+  }
+  
+  &.d10-83::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e95e';
+  }
+  
+  &.d10-84::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e95f';
+  }
+  
+  &.d10-85::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e960';
+  }
+  
+  &.d10-86::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e961';
+  }
+  
+  &.d10-87::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e962';
+  }
+  
+  &.d10-88::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e963';
+  }
+  
+  &.d10-89::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e964';
+  }
+  
+  &.d10-90::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e965';
+  }
+  
+  &.d10-91::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e966';
+  }
+  
+  &.d10-92::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e967';
+  }
+  
+  &.d10-93::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e968';
+  }
+  
+  &.d10-94::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e969';
+  }
+  
+  &.d10-95::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e96a';
+  }
+  
+  &.d10-96::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e96b';
+  }
+  
+  &.d10-97::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e96c';
+  }
+  
+  &.d10-98::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e96d';
+  }
+  
+  &.d10-99::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e96e';
+  }
+  
+  &.d10-100::before { 
+    font-family : 'DiceFontD100';
+    content     : '\e96f';
+  }
 }