Merge branch 'master' into commonRenderSaveButton

client/admin/admin.jsx

@@ -49,4 +49,4 @@ const Admin = ()=>{
 	);
 };
 
-module.exports = Admin;
+export default Admin;

client/admin/admin.less

@@ -1,11 +1,9 @@
-@import 'naturalcrit/styles/reset.less';
-@import 'naturalcrit/styles/elements.less';
-@import 'naturalcrit/styles/animations.less';
-@import 'naturalcrit/styles/colors.less';
-@import 'naturalcrit/styles/tooltip.less';
-@import './themes/fonts/iconFonts/fontAwesome.less';
-
-@import 'font-awesome/css/font-awesome.css';
+@import '@sharedStyles/reset.less';
+@import '@sharedStyles/elements.less';
+@import '@sharedStyles/animations.less';
+@import '@sharedStyles/colors.less';
+@import '@sharedStyles/tooltip.less';
+@import '@themes/fonts/iconFonts/fontAwesome.less';
 
 html,body, #reactContainer, .naturalCrit { min-height : 100%; }
 

client/admin/brewUtils/brewUtils.less

@@ -1,3 +1,5 @@
+@import '@sharedStyles/colors.less';
+
 .brewUtil {
 	.result {
 		margin-top : 20px;

client/admin/main.jsx

@@ -0,0 +1,6 @@
+import { createRoot } from 'react-dom/client';
+import Admin from './admin.jsx';
+
+const props = window.__INITIAL_PROPS__ || {};
+
+createRoot(document.getElementById('reactRoot')).render(<Admin {...props} />);

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.jsx

@@ -12,6 +12,7 @@ const CodeEditor = createReactClass({
 	getDefaultProps : function() {
 		return {
 			language      : '',
+			tab           : 'brewText',
 			value         : '',
 			wrap          : true,
 			onChange      : ()=>{},
@@ -186,6 +187,22 @@ const CodeEditor = createReactClass({
 		this.updateSize();
 	},
 
+	// Use for GFM tabs that use common hot-keys
+	isGFM : function() {
+		if((this.isGFM()) || (this.props.tab === 'brewSnippets')) return true;
+		return false;
+	},
+
+	isBrewText : function() {
+		if(this.isGFM()) return true;
+		return false;
+	},
+
+	isBrewSnippets : function() {
+		if(this.props.tab === 'brewSnippets') return true;
+		return false;
+	},
+
 	indent : function () {
 		const cm = this.codeMirror;
 		if(cm.somethingSelected()) {
@@ -200,6 +217,7 @@ const CodeEditor = createReactClass({
 	},
 
 	makeHeader : function (number) {
+		if(!this.isGFM()) return;
 		const selection = this.codeMirror?.getSelection();
 		const header = Array(number).fill('#').join('');
 		this.codeMirror?.replaceSelection(`${header} ${selection}`, 'around');
@@ -208,6 +226,7 @@ const CodeEditor = createReactClass({
 	},
 
 	makeBold : function() {
+		if(!this.isGFM()) return;
 		const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 2) === '**' && selection.slice(-2) === '**';
 		this.codeMirror?.replaceSelection(t ? selection.slice(2, -2) : `**${selection}**`, 'around');
 		if(selection.length === 0){
@@ -217,7 +236,8 @@ const CodeEditor = createReactClass({
 	},
 
 	makeItalic : function() {
-		const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 1) === '*' && selection.slice(-1) === '*';
+		if(!this.isGFM()) return;
+		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 1) === '*' && selection.slice(-1) === '*';
 		this.codeMirror?.replaceSelection(t ? selection.slice(1, -1) : `*${selection}*`, 'around');
 		if(selection.length === 0){
 			const cursor = this.codeMirror?.getCursor();
@@ -226,7 +246,8 @@ const CodeEditor = createReactClass({
 	},
 
 	makeSuper : function() {
-		const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 1) === '^' && selection.slice(-1) === '^';
+		if(!this.isGFM()) return;
+		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 1) === '^' && selection.slice(-1) === '^';
 		this.codeMirror?.replaceSelection(t ? selection.slice(1, -1) : `^${selection}^`, 'around');
 		if(selection.length === 0){
 			const cursor = this.codeMirror?.getCursor();
@@ -235,7 +256,8 @@ const CodeEditor = createReactClass({
 	},
 
 	makeSub : function() {
-		const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 2) === '^^' && selection.slice(-2) === '^^';
+		if(!this.isGFM()) return;
+		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '^^' && selection.slice(-2) === '^^';
 		this.codeMirror?.replaceSelection(t ? selection.slice(2, -2) : `^^${selection}^^`, 'around');
 		if(selection.length === 0){
 			const cursor = this.codeMirror?.getCursor();
@@ -245,10 +267,12 @@ const CodeEditor = createReactClass({
 
 
 	makeNbsp : function() {
+		if(!this.isGFM()) return;
 		this.codeMirror?.replaceSelection(' ', 'end');
 	},
 
 	makeSpace : function() {
+		if(!this.isGFM()) return;
 		const selection = this.codeMirror?.getSelection();
 		const t = selection.slice(0, 8) === '{{width:' && selection.slice(0 -4) === '% }}';
 		if(t){
@@ -260,6 +284,7 @@ const CodeEditor = createReactClass({
 	},
 
 	removeSpace : function() {
+		if(!this.isGFM()) return;
 		const selection = this.codeMirror?.getSelection();
 		const t = selection.slice(0, 8) === '{{width:' && selection.slice(0 -4) === '% }}';
 		if(t){
@@ -269,10 +294,12 @@ const CodeEditor = createReactClass({
 	},
 
 	newColumn : function() {
+		if(!this.isGFM()) return;
 		this.codeMirror?.replaceSelection('\n\\column\n\n', 'end');
 	},
 
 	newPage : function() {
+		if(!this.isGFM()) return;
 		this.codeMirror?.replaceSelection('\n\\page\n\n', 'end');
 	},
 
@@ -286,7 +313,8 @@ const CodeEditor = createReactClass({
 	},
 
 	makeUnderline : function() {
-		const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 3) === '<u>' && selection.slice(-4) === '</u>';
+		if(!this.isGFM()) return;
+		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 3) === '<u>' && selection.slice(-4) === '</u>';
 		this.codeMirror?.replaceSelection(t ? selection.slice(3, -4) : `<u>${selection}</u>`, 'around');
 		if(selection.length === 0){
 			const cursor = this.codeMirror?.getCursor();
@@ -295,7 +323,8 @@ const CodeEditor = createReactClass({
 	},
 
 	makeSpan : function() {
-		const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 2) === '{{' && selection.slice(-2) === '}}';
+		if(!this.isGFM()) return;
+		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '{{' && selection.slice(-2) === '}}';
 		this.codeMirror?.replaceSelection(t ? selection.slice(2, -2) : `{{ ${selection}}}`, 'around');
 		if(selection.length === 0){
 			const cursor = this.codeMirror?.getCursor();
@@ -304,7 +333,8 @@ const CodeEditor = createReactClass({
 	},
 
 	makeDiv : function() {
-		const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 2) === '{{' && selection.slice(-2) === '}}';
+		if(!this.isGFM()) return;
+		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '{{' && selection.slice(-2) === '}}';
 		this.codeMirror?.replaceSelection(t ? selection.slice(2, -2) : `{{\n${selection}\n}}`, 'around');
 		if(selection.length === 0){
 			const cursor = this.codeMirror?.getCursor();
@@ -317,7 +347,7 @@ const CodeEditor = createReactClass({
 		let cursorPos;
 		let newComment;
 		const selection = this.codeMirror?.getSelection();
-		if(this.props.language === 'gfm'){
+		if(this.isGFM()){
 			regex = /^\s*(<!--\s?)(.*?)(\s?-->)\s*$/gs;
 			cursorPos = 4;
 			newComment = `<!-- ${selection} -->`;
@@ -334,6 +364,7 @@ const CodeEditor = createReactClass({
 	},
 
 	makeLink : function() {
+		if(!this.isGFM()) return;
 		const isLink = /^\[(.*)\]\((.*)\)$/;
 		const selection = this.codeMirror?.getSelection().trim();
 		let match;
@@ -351,7 +382,8 @@ const CodeEditor = createReactClass({
 	},
 
 	makeList : function(listType) {
-		const selectionStart = this.codeMirror?.getCursor('from'), selectionEnd = this.codeMirror?.getCursor('to');
+		if(!this.isGFM()) return;
+		const selectionStart = this.codeMirror.getCursor('from'), selectionEnd = this.codeMirror.getCursor('to');
 		this.codeMirror?.setSelection(
 			{ line: selectionStart.line, ch: 0 },
 			{ line: selectionEnd.line, ch: this.codeMirror?.getLine(selectionEnd.line).length }

client/components/codeEditor/codeEditor.less

@@ -5,10 +5,10 @@
 @import (less) 'codemirror/addon/hint/show-hint.css';
 
 //Icon fonts included so they can appear in emoji autosuggest dropdown
-@import (less) './themes/fonts/iconFonts/diceFont.less';
-@import (less) './themes/fonts/iconFonts/elderberryInn.less';
-@import (less) './themes/fonts/iconFonts/gameIcons.less';
-@import (less) './themes/fonts/iconFonts/fontAwesome.less';
+@import (less) '@themes/fonts/iconFonts/diceFont.less';
+@import (less) '@themes/fonts/iconFonts/elderberryInn.less';
+@import (less) '@themes/fonts/iconFonts/gameIcons.less';
+@import (less) '@themes/fonts/iconFonts/fontAwesome.less';
 
 @keyframes sourceMoveAnimation {
 	50% {   color            : white;background-color : red;}

client/components/combobox.jsx

@@ -11,14 +11,17 @@ const Combobox = createReactClass({
 			trigger     : 'hover',
 			default     : '',
 			placeholder : '',
+			tooltip     : '',
 			autoSuggest : {
 				clearAutoSuggestOnClick : true,
 				suggestMethod           : 'includes',
 				filterOn                : []  // should allow as array to filter on multiple attributes, or even custom filter
 			},
+			valuePatterns : /.+/
 		};
 	},
 	getInitialState : function() {
+		this.dropdownRef = React.createRef();
 		return {
 			showDropdown : false,
 			value        : '',
@@ -39,7 +42,7 @@ const Combobox = createReactClass({
 	},
 	handleClickOutside : function(e){
 		// Close dropdown when clicked outside
-		if(this.refs.dropdown && !this.refs.dropdown.contains(e.target)) {
+		if(this.dropdownRef.current && !this.dropdownRef.current.contains(e.target)) {
 			this.handleDropdown(false);
 		}
 	},
@@ -69,11 +72,14 @@ const Combobox = createReactClass({
 		return (
 			<div className='dropdown-input item'
 				onMouseEnter={this.props.trigger == 'hover' ? ()=>{this.handleDropdown(true);} : undefined}
-				onClick=     {this.props.trigger == 'click' ? ()=>{this.handleDropdown(true);} : undefined}>
+				onClick=     {this.props.trigger == 'click' ? ()=>{this.handleDropdown(true);} : undefined}
+				{...(this.props.tooltip ? { 'data-tooltip-right': this.props.tooltip } : {})}>
 				<input
 					type='text'
 					onChange={(e)=>this.handleInput(e)}
 					value={this.state.value || ''}
+					title=''
+					pattern={this.props.valuePatterns}
 					placeholder={this.props.placeholder}
 					onBlur={(e)=>{
 						if(!e.target.checkValidity()){
@@ -82,6 +88,12 @@ const Combobox = createReactClass({
 							});
 						}
 					}}
+					onKeyDown={(e)=>{
+						if(e.key === 'Enter') {
+							e.preventDefault();
+							this.props.onEntry(e);
+						}
+					}}
 				/>
 				<i className='fas fa-caret-down'/>
 			</div>
@@ -117,7 +129,7 @@ const Combobox = createReactClass({
 		});
 		return (
 			<div className={`dropdown-container ${this.props.className}`}
-				ref='dropdown'
+				ref={this.dropdownRef}
 				onMouseLeave={this.props.trigger == 'hover' ? ()=>{this.handleDropdown(false);} : undefined}>
 				{this.renderTextInput()}
 				{this.renderDropdown(dropdownChildren)}

client/components/combobox.less

@@ -10,6 +10,7 @@
 		position         : absolute;
 		z-index          : 100;
 		width            : 100%;
+		height           : max-content;
 		max-height       : 200px;
 		overflow-y       : auto;
 		background-color : white;

client/components/renderWarnings/renderWarnings.less

@@ -1,3 +1,5 @@
+@import '@sharedStyles/colors.less';
+
 .renderWarnings {
 	position         : relative;
 	float            : right;

client/components/splitPane/splitPane.less

@@ -1,3 +1,4 @@
+@import '@sharedStyles/core.less';
 
 .splitPane {
 	position       : relative;

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -1,10 +1,12 @@
 /*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
+import brewRendererStylesUrl from './brewRenderer.less?url';
+import headerNavStylesUrl from './headerNav/headerNav.less?url';
 import './brewRenderer.less';
 import React, { useState, useRef, useMemo, useEffect } from 'react';
 import _ from 'lodash';
 
-import MarkdownLegacy from '../../../shared/markdownLegacy.js';
-import Markdown from '../../../shared/markdown.js';
+import MarkdownLegacy from '@shared/markdownLegacy.js';
+import Markdown from '@shared/markdown.js';
 import ErrorBar from './errorBar/errorBar.jsx';
 import ToolBar  from './toolBar/toolBar.jsx';
 
@@ -13,10 +15,10 @@ import RenderWarnings from '../../components/renderWarnings/renderWarnings.jsx';
 import NotificationPopup from './notificationPopup/notificationPopup.jsx';
 import Frame from 'react-frame-component';
 import dedent from 'dedent';
-import { printCurrentBrew } from '../../../shared/helpers.js';
+import { printCurrentBrew } from '@shared/helpers.js';
 
 import HeaderNav from './headerNav/headerNav.jsx';
-import { safeHTML } from './safeHTML.js';
+import safeHTML from './safeHTML.js';
 
 const PAGEBREAK_REGEX_V3 = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m;
 const PAGEBREAK_REGEX_LEGACY = /\\page(?:break)?/m;
@@ -29,6 +31,8 @@ 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" />
 	<link href='/homebrew/bundle.css' type="text/css" rel='stylesheet' />
+	<link href="${brewRendererStylesUrl}" rel="stylesheet" />
+	<link href="${headerNavStylesUrl}" rel="stylesheet" />
 	<base target=_blank>
 	</head><body style='overflow: hidden'><div></div></body></html>`;
 

client/homebrew/brewRenderer/brewRenderer.less

@@ -1,4 +1,4 @@
-@import (multiple, less) 'shared/naturalcrit/styles/reset.less';
+@import '@sharedStyles/core.less';
 
 .brewRenderer {
 	height        : 100vh;

client/homebrew/brewRenderer/errorBar/errorBar.less

@@ -1,3 +1,4 @@
+@import '@sharedStyles/colors.less';
 
 .errorBar {
 	position         : absolute;

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

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

client/homebrew/brewRenderer/notificationPopup/notificationPopup.less

@@ -1,3 +1,5 @@
+@import './client/homebrew/navbar/navbar.less';
+
 .popups {
 	position         : fixed;
 	top              : calc(@navbarHeight + @viewerToolsHeight);

client/homebrew/brewRenderer/safeHTML.js

@@ -43,4 +43,4 @@ function safeHTML(htmlString) {
 	return div.innerHTML;
 };
 
-module.exports.safeHTML = safeHTML;
+export default safeHTML;

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -99,18 +99,18 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 	return (
 		<div id='preview-toolbar' className={`toolBar ${toolsVisible ? 'visible' : 'hidden'}`} role='toolbar'>
 			<div className='toggleButton'>
-				<button title={`${toolsVisible ? 'Hide' : 'Show'} Preview Toolbar`} onClick={()=>{
+				<button data-tooltip-right={`${toolsVisible ? 'Hide' : 'Show'} Preview Toolbar`} onClick={()=>{
 					setToolsVisible(!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>
+				<button data-tooltip-right={`${headerState ? 'Hide' : 'Show'} Header Navigation`} onClick={()=>{setHeaderState(!headerState);}}><i className='fas fa-rectangle-list' /></button>
 			</div>
 			{/*v=====----------------------< Zoom Controls >---------------------=====v*/}
 			<div className='group' role='group' aria-label='Zoom' aria-hidden={!toolsVisible}>
 				<button
 					id='fill-width'
 					className='tool'
-					title='Set zoom to fill preview with one page'
+					data-tooltip-bottom='Set zoom to fill preview with one page'
 					onClick={()=>handleZoomButton(displayOptions.zoomLevel + calculateChange('fill'))}
 				>
 					<i className='fac fit-width' />
@@ -118,7 +118,7 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 				<button
 					id='zoom-to-fit'
 					className='tool'
-					title='Set zoom to fit entire page in preview'
+					data-tooltip-bottom='Set zoom to fit entire page in preview'
 					onClick={()=>handleZoomButton(displayOptions.zoomLevel + calculateChange('fit'))}
 				>
 					<i className='fac zoom-to-fit' />
@@ -128,7 +128,7 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 					className='tool'
 					onClick={()=>handleZoomButton(displayOptions.zoomLevel - 20)}
 					disabled={displayOptions.zoomLevel <= MIN_ZOOM}
-					title='Zoom Out'
+					data-tooltip-bottom='Zoom Out'
 				>
 					<i className='fas fa-magnifying-glass-minus' />
 				</button>
@@ -137,7 +137,6 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 					className='range-input tool hover-tooltip'
 					type='range'
 					name='zoom'
-					title='Set Zoom'
 					list='zoomLevels'
 					min={MIN_ZOOM}
 					max={MAX_ZOOM}
@@ -154,7 +153,7 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 					className='tool'
 					onClick={()=>handleZoomButton(displayOptions.zoomLevel + 20)}
 					disabled={displayOptions.zoomLevel >= MAX_ZOOM}
-					title='Zoom In'
+					data-tooltip-bottom='Zoom In'
 				>
 					<i className='fas fa-magnifying-glass-plus' />
 				</button>
@@ -166,44 +165,44 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 					<button role='radio'
 						id='single-spread'
 						className='tool'
-						title='Single Page'
+						data-tooltip-bottom='Single Page'
 						onClick={()=>{handleOptionChange('spread', 'single');}}
 						aria-checked={displayOptions.spread === 'single'}
 					><i className='fac single-spread' /></button>
 					<button role='radio'
 						id='facing-spread'
 						className='tool'
-						title='Facing Pages'
+						data-tooltip-bottom='Facing Pages'
 						onClick={()=>{handleOptionChange('spread', 'facing');}}
 						aria-checked={displayOptions.spread === 'facing'}
 					><i className='fac facing-spread' /></button>
 					<button role='radio'
 						id='flow-spread'
 						className='tool'
-						title='Flow Pages'
+						data-tooltip-bottom='Flow Pages'
 						onClick={()=>{handleOptionChange('spread', 'flow');}}
 						aria-checked={displayOptions.spread === 'flow'}
 					><i className='fac flow-spread' /></button>
 
 				</div>
 				<Anchored>
-					<AnchoredTrigger id='spread-settings' className='tool' title='Spread options'><i className='fas fa-gear' /></AnchoredTrigger>
-					<AnchoredBox title='Options'>
+					<AnchoredTrigger id='spread-settings' className='tool' data-tooltip-bottom='Spread options'><i className='fas fa-gear' /></AnchoredTrigger>
+					<AnchoredBox>
 						<h1>Options</h1>
-						<label title='Modify the horizontal space between pages.'>
+						<label data-tooltip-left='Modify the horizontal space between pages.'>
 							Column gap
 							<input type='range' min={0} max={200} defaultValue={displayOptions.columnGap || 10} className='range-input' onChange={(evt)=>handleOptionChange('columnGap', evt.target.value)} />
 						</label>
-						<label title='Modify the vertical space between rows of pages.'>
+						<label data-tooltip-left='Modify the vertical space between rows of pages.'>
 							Row gap
 							<input type='range' min={0} max={200} defaultValue={displayOptions.rowGap || 10} className='range-input' onChange={(evt)=>handleOptionChange('rowGap', evt.target.value)} />
 						</label>
-						<label title='Start 1st page on the right side, such as if you have cover page.'>
+						<label data-tooltip-left='Start 1st page on the right side, such as if you have cover page.'>
 							Start on right
 							<input type='checkbox' checked={displayOptions.startOnRight} onChange={()=>{handleOptionChange('startOnRight', !displayOptions.startOnRight);}}
-								title={displayOptions.spread !== 'facing' ? 'Switch to Facing to enable toggle.' : null} />
+								data-tooltip-right={displayOptions.spread !== 'facing' ? 'Switch to Facing to enable toggle.' : null} />
 						</label>
-						<label title='Toggle the page shadow on every page.'>
+						<label data-tooltip-left='Toggle the page shadow on every page.'>
 							Page shadows
 							<input type='checkbox' checked={displayOptions.pageShadows} onChange={()=>{handleOptionChange('pageShadows', !displayOptions.pageShadows);}} />
 						</label>
@@ -217,7 +216,7 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 					id='previous-page'
 					className='previousPage tool'
 					type='button'
-					title='Previous Page(s)'
+					data-tooltip-bottom='Previous Page(s)'
 					onClick={()=>scrollToPage(_.min(visiblePages) - visiblePages.length)}
 					disabled={visiblePages.includes(1)}
 				>
@@ -230,7 +229,7 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 						className='text-input'
 						type='text'
 						name='page'
-						title='Current page(s) in view'
+						data-tooltip-bottom='Current page(s) in view'
 						inputMode='numeric'
 						pattern='[0-9]'
 						value={pageNum}
@@ -240,14 +239,14 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 						onKeyDown={(e)=>e.key == 'Enter' && scrollToPage(pageNum)}
 						style={{ width: `${pageNum.length}ch` }}
 					/>
-					<span id='page-count' title='Total Page Count'>/ {totalPages}</span>
+					<span id='page-count' data-tooltip-bottom='Total Page Count'>/ {totalPages}</span>
 				</div>
 
 				<button
 					id='next-page'
 					className='tool'
 					type='button'
-					title='Next Page(s)'
+					data-tooltip-bottom='Next Page(s)'
 					onClick={()=>scrollToPage(_.max(visiblePages) + 1)}
 					disabled={visiblePages.includes(totalPages)}
 				>

client/homebrew/brewRenderer/toolBar/toolBar.less

@@ -166,7 +166,7 @@
 
 	&.hidden {
 		flex-wrap        : nowrap;
-		width            : 92px;
+		width            : 50%;
 		overflow         : hidden;
 		background-color : unset;
 		opacity          : 0.7;

client/homebrew/editor/editor.jsx

@@ -4,7 +4,7 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 import _ from 'lodash';
 import dedent from 'dedent';
-import Markdown from '../../../shared/markdown.js';
+import Markdown from '@shared/markdown.js';
 
 import CodeEditor from '../../components/codeEditor/codeEditor.jsx';
 import SnippetBar from './snippetbar/snippetbar.jsx';
@@ -86,9 +86,9 @@ const Editor = createReactClass({
 			});
 		}
 		const snippetBar = document.querySelector('.editor > .snippetBar');
-		if (!snippetBar) return;
+		if(!snippetBar) return;
 
-		this.resizeObserver = new ResizeObserver(entries => {
+		this.resizeObserver = new ResizeObserver((entries)=>{
 			const height = document.querySelector('.editor > .snippetBar').offsetHeight;
 			this.setState({ snippetBarHeight: height });
 		});
@@ -117,7 +117,7 @@ const Editor = createReactClass({
 	},
 
 	componentWillUnmount() {
-		if (this.resizeObserver) this.resizeObserver.disconnect();
+		if(this.resizeObserver) this.resizeObserver.disconnect();
 	},
 
 	handleControlKeys : function(e){
@@ -337,7 +337,7 @@ const Editor = createReactClass({
 		const brewRenderer = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer')[0];
 		const currentPos = brewRenderer.scrollTop;
 		const targetPos = window.frames['BrewRenderer'].contentDocument.getElementById(`p${targetPage}`).getBoundingClientRect().top;
-		
+
 		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
@@ -392,7 +392,7 @@ const Editor = createReactClass({
 
 		isJumping = true;
 		checkIfScrollComplete();
-		if (this.codeEditor.current?.codeMirror) {
+		if(this.codeEditor.current?.codeMirror) {
 			this.codeEditor.current.codeMirror?.on('scroll', checkIfScrollComplete);
 		}
 
@@ -442,6 +442,7 @@ const Editor = createReactClass({
 				<CodeEditor key='codeEditor'
 					ref={this.codeEditor}
 					language='gfm'
+					tab='brewText'
 					view={this.state.view}
 					value={this.props.brew.text}
 					onChange={this.props.onBrewChange('text')}
@@ -455,6 +456,7 @@ const Editor = createReactClass({
 				<CodeEditor key='codeEditor'
 					ref={this.codeEditor}
 					language='css'
+					tab='brewStyles'
 					view={this.state.view}
 					value={this.props.brew.style ?? DEFAULT_STYLE_TEXT}
 					onChange={this.props.onBrewChange('style')}
@@ -484,6 +486,7 @@ const Editor = createReactClass({
 				<CodeEditor key='codeEditor'
 					ref={this.codeEditor}
 					language='gfm'
+					tab='brewSnippets'
 					view={this.state.view}
 					value={this.props.brew.snippets}
 					onChange={this.props.onBrewChange('snippets')}

client/homebrew/editor/editor.less

@@ -1,9 +1,12 @@
-@import 'themes/codeMirror/customEditorStyles.less';
+@import '@sharedStyles/core.less';
+@import '@themes/codeMirror/customEditorStyles.less';
+
 .editor {
 	position  : relative;
 	width     : 100%;
 	height    : 100%;
 	container : editor / inline-size;
+	background:white;
 	.codeEditor {
 		height            : calc(100% - 25px);
 		.CodeMirror { height : 100%; }

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -7,10 +7,9 @@ import request from '../../utils/request-middleware.js';
 import Combobox from '../../../components/combobox.jsx';
 import TagInput from '../tagInput/tagInput.jsx';
 
-import Themes from 'themes/themes.json';
-import validations from './validations.js';
 
-const SYSTEMS = ['5e', '4e', '3.5e', 'Pathfinder'];
+import Themes from '@themes/themes.json';
+import validations from './validations.js';
 
 import homebreweryThumbnail from '../../thumbnail.png';
 
@@ -33,7 +32,6 @@ const MetadataEditor = createReactClass({
 				tags        : [],
 				published   : false,
 				authors     : [],
-				systems     : [],
 				renderer    : 'legacy',
 				theme       : '5ePHB',
 				lang        : 'en'
@@ -91,15 +89,6 @@ const MetadataEditor = createReactClass({
 		}
 	},
 
-	handleSystem : function(system, e){
-		if(e.target.checked){
-			this.props.metadata.systems.push(system);
-		} else {
-			this.props.metadata.systems = _.without(this.props.metadata.systems, system);
-		}
-		this.props.onChange(this.props.metadata);
-	},
-
 	handleRenderer : function(renderer, e){
 		if(e.target.checked){
 			this.props.metadata.renderer = renderer;
@@ -155,18 +144,6 @@ const MetadataEditor = createReactClass({
 			});
 	},
 
-	renderSystems : function(){
-		return _.map(SYSTEMS, (val)=>{
-			return <label key={val}>
-				<input
-					type='checkbox'
-					checked={_.includes(this.props.metadata.systems, val)}
-					onChange={(e)=>this.handleSystem(val, e)} />
-				{val}
-			</label>;
-		});
-	},
-
 	renderPublish : function(){
 		if(this.props.metadata.published){
 			return <button className='unpublish' onClick={()=>this.handlePublish(false)}>
@@ -237,7 +214,7 @@ const MetadataEditor = createReactClass({
 				</div>;
 		} else {
 			dropdown =
-				<div className='value'>
+				<div className='value' data-tooltip-top='Select from the list below (built-in themes and brews you have tagged "meta:theme"), or paste in the Share URL or Share ID of any brew.'>
 					<Combobox trigger='click'
 						className='themes-dropdown'
 						default={currentThemeDisplay}
@@ -255,7 +232,6 @@ const MetadataEditor = createReactClass({
 							filterOn                : ['value', 'title']
 						}}
 					/>
-					<small>Select from the list below (built-in themes and brews you have tagged "meta:theme"), or paste in the Share URL or Share ID of any brew.</small>
 				</div>;
 		}
 
@@ -280,7 +256,7 @@ const MetadataEditor = createReactClass({
 
 		return <div className='field language'>
 			<label>language</label>
-			<div className='value'>
+			<div className='value' data-tooltip-right='Sets the HTML Lang property for your brew. May affect hyphenation or spellcheck.'>
 				<Combobox trigger='click'
 					className='language-dropdown'
 					default={this.props.metadata.lang || ''}
@@ -297,14 +273,13 @@ const MetadataEditor = createReactClass({
 						filterOn                : ['value', 'detail', 'title']
 					}}
 				/>
-				<small>Sets the HTML Lang property for your brew. May affect hyphenation or spellcheck.</small>
 			</div>
 
 		</div>;
 	},
 
 	renderRenderOptions : function(){
-		return <div className='field systems'>
+		return <div className='field renderers'>
 			<label>Renderer</label>
 			<div className='value'>
 				<label key='legacy'>
@@ -363,19 +338,21 @@ const MetadataEditor = createReactClass({
 				{this.renderThumbnail()}
 			</div>
 
-			<TagInput label='tags' valuePatterns={[/^(?:(?:group|meta|system|type):)?[A-Za-z0-9][A-Za-z0-9 \/.\-]{0,40}$/]}
-				placeholder='add tag' unique={true}
-				values={this.props.metadata.tags}
-				onChange={(e)=>this.handleFieldChange('tags', e)}
-			/>
-
-			<div className='field systems'>
-				<label>systems</label>
-				<div className='value'>
-					{this.renderSystems()}
+			<div className='field tags'>
+				<label>Tags</label>
+				<div className='value' >
+					<TagInput
+						label='tags'
+						valuePatterns={/^\s*(?:(?:group|meta|system|type)\s*:\s*)?[A-Za-z0-9][A-Za-z0-9 \/\\.&_\-]{0,40}\s*$/}
+						placeholder='add tag' unique={true}
+						values={this.props.metadata.tags}
+						onChange={(e)=>this.handleFieldChange('tags', e)}
+						tooltip='You may start tags with "type", "system", "group" or "meta" followed by a colon ":", these will be colored in your userpage.'
+					/>
 				</div>
 			</div>
 
+
 			{this.renderLanguageDropdown()}
 
 			{this.renderThemeDropdown()}
@@ -386,13 +363,22 @@ const MetadataEditor = createReactClass({
 
 			{this.renderAuthors()}
 
-			<TagInput label='invited authors' valuePatterns={[/.+/]}
-				validators={[(v)=>!this.props.metadata.authors?.includes(v)]}
-				placeholder='invite author' unique={true}
-				values={this.props.metadata.invitedAuthors}
-				notes={['Invited author usernames are case sensitive.', 'After adding an invited author, send them the edit link. There, they can choose to accept or decline the invitation.']}
-				onChange={(e)=>this.handleFieldChange('invitedAuthors', e)}
-			/>
+			<div className='field invitedAuthors'>
+				<label>Invited authors</label>
+				<div className='value'>
+					<TagInput
+						label='invited authors'
+						valuePatterns={/.+/}
+						validators={[(v)=>!this.props.metadata.authors?.includes(v)]}
+						placeholder='invite author' unique={true}
+						tooltip={`Invited author usernames are case sensitive.
+							After adding an invited author, send them the edit link. There, they can choose to accept or decline the invitation.`}
+						values={this.props.metadata.invitedAuthors}
+						onChange={(e)=>this.handleFieldChange('invitedAuthors', e)}
+					/>
+				</div>
+			</div>
+
 
 			<h2>Privacy</h2>
 

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -1,4 +1,4 @@
-@import 'naturalcrit/styles/colors.less';
+@import '@sharedStyles/core.less';
 
 .userThemeName {
 	padding-right : 10px;
@@ -44,8 +44,6 @@
 		gap            : 10px;
 	}
 
-
-
 	.field {
 		position      : relative;
 		display       : flex;
@@ -62,6 +60,7 @@
 		& > .value {
 			flex           : 1 1 auto;
 			width          : 50px;
+			&[data-tooltip-right] { max-width : 380px; }
 			&:invalid { background : #FFB9B9; }
 			small {
 				display     : block;
@@ -74,6 +73,16 @@
 			border : 1px solid gray;
 			&:focus { outline : 1px solid #444444; }
 		}
+		
+		&.description {
+			flex : 1;
+			textarea.value {
+				height      : auto;
+				font-family : 'Open Sans', sans-serif;
+				resize      : none;
+			}
+		}
+
 		&.thumbnail, &.themes {
 			label { line-height : 2.0em; }
 			.value {
@@ -90,6 +99,15 @@
 			}
 		}
 
+		&.tags .tagInput-dropdown {
+			z-index   : 400;
+			max-width : 200px;
+		}
+		&.language .value {
+			z-index   : 300;
+			max-width : 150px;
+		}
+
 		&.themes {
 			.value {
 				overflow      : visible;
@@ -101,22 +119,13 @@
 			}
 		}
 
-		&.description {
-			flex : 1;
-			textarea.value {
-				height      : auto;
-				font-family : 'Open Sans', sans-serif;
-				resize      : none;
-			}
-		}
-
-		&.language .language-dropdown {
-			z-index   : 200;
-			max-width : 150px;
+		&.invitedAuthors .value {
+			z-index   : 100;
+			
+			.tagInput-dropdown { max-width : 200px; }
 		}
 	}
 
-
 	.thumbnail-preview {
 		position         : relative;
 		flex             : 1 1;
@@ -129,7 +138,7 @@
 		background-color : #AAAAAA;
 	}
 
-	.systems.field .value {
+	.renderers.field .value {
 		label {
 			display        : inline-flex;
 			align-items    : center;
@@ -169,7 +178,7 @@
 	.themes.field {
 		& .dropdown-container {
 			position         : relative;
-			z-index          : 100;
+			z-index          : 200;
 			background-color : white;
 		}
 		& .dropdown-options { overflow-y : visible; }

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -7,13 +7,13 @@ import _ from 'lodash';
 import cx from 'classnames';
 
 import { loadHistory } from '../../utils/versionHistory.js';
-import { brewSnippetsToJSON } from '../../../../shared/helpers.js';
+import { brewSnippetsToJSON } from '@shared/helpers.js';
 
-import Legacy5ePHB from 'themes/Legacy/5ePHB/snippets.js';
-import V3_5ePHB   from 'themes/V3/5ePHB/snippets.js';
-import V3_5eDMG   from 'themes/V3/5eDMG/snippets.js';
-import V3_Journal from 'themes/V3/Journal/snippets.js';
-import V3_Blank  from 'themes/V3/Blank/snippets.js';
+import Legacy5ePHB from '@themes/Legacy/5ePHB/snippets.js';
+import V3_5ePHB   from '@themes/V3/5ePHB/snippets.js';
+import V3_5eDMG   from '@themes/V3/5eDMG/snippets.js';
+import V3_Journal from '@themes/V3/Journal/snippets.js';
+import V3_Blank  from '@themes/V3/Blank/snippets.js';
 
 const ThemeSnippets = {
 	Legacy_5ePHB : Legacy5ePHB,
@@ -23,7 +23,7 @@ const ThemeSnippets = {
 	V3_Blank     : V3_Blank,
 };
 
-import EditorThemes from 'build/homebrew/codeMirror/editorThemes.json';
+import EditorThemes from '../../../../build/homebrew/codeMirror/editorThemes.json';
 
 const execute = function(val, props){
 	if(_.isFunction(val)) return val(props);

client/homebrew/editor/snippetbar/snippetbar.less

@@ -1,5 +1,6 @@
+@import '@sharedStyles/core.less';
 @import (less) './client/icons/customIcons.less';
-@import (less) '././././themes/fonts/5e/fonts.less';
+@import (less) '@themes/fonts/5e/fonts.less';
 
 .snippetBar {
 	@menuHeight      : 25px;

client/homebrew/editor/tagInput/curatedTagSuggestionList.js

@@ -0,0 +1,210 @@
+export default [
+	// ############################## Systems
+	// D&D
+	'system:D&D Original',
+	'system:D&D Basic',
+	'system:AD&D 1e',
+	'system:AD&D 2e',
+	'system:D&D 3e',
+	'system:D&D 3.5e',
+	'system:D&D 4e',
+	'system:D&D 5e',
+	'system:D&D 5e 2024',
+	'system:BD&D (B/X)',
+	'system:D&D Essentials',
+
+	// Other Famous RPGs
+	'system:Pathfinder 1e',
+	'system:Pathfinder 2e',
+	'system:Vampire: The Masquerade',
+	'system:Werewolf: The Apocalypse',
+	'system:Mage: The Ascension',
+	'system:Call of Cthulhu',
+	'system:Shadowrun',
+	'system:Star Wars RPG (D6/D20/Edge of the Empire)',
+	'system:Warhammer Fantasy Roleplay',
+	'system:Cyberpunk 2020',
+	'system:Blades in the Dark',
+	'system:Daggerheart',
+	'system:Draw Steel',
+	'system:Mutants and Masterminds',
+
+	// Meta
+	'meta:V3',
+	'meta:Legacy',
+	'meta:Template',
+	'meta:Theme',
+	'meta:free',
+	'meta:Character Sheet',
+	'meta:Documentation',
+	'meta:NPC',
+	'meta:Guide',
+	'meta:Resource',
+	'meta:Notes',
+	'meta:Example',
+
+	// Book type
+	'type:Campaign',
+	'type:Campaign Setting',
+	'type:Adventure',
+	'type:One-Shot',
+	'type:Setting',
+	'type:World',
+	'type:Lore',
+	'type:History',
+	'type:Dungeon Master',
+	'type:Encounter Pack',
+	'type:Encounter',
+	'type:Session Notes',
+	'type:reference',
+	'type:Handbook',
+	'type:Manual',
+	'type:Manuals',
+	'type:Compendium',
+	'type:Bestiary',
+
+	// ###################################### RPG Keywords
+
+	// Classes / Subclasses / Archetypes
+	'Class',
+	'Subclass',
+	'Archetype',
+	'Martial',
+	'Half-Caster',
+	'Full Caster',
+	'Artificer',
+	'Barbarian',
+	'Bard',
+	'Cleric',
+	'Druid',
+	'Fighter',
+	'Monk',
+	'Paladin',
+	'Rogue',
+	'Sorcerer',
+	'Warlock',
+	'Wizard',
+
+	// Races / Species / Lineages
+	'Race',
+	'Ancestry',
+	'Lineage',
+	'Aasimar',
+	'Beastfolk',
+	'Dragonborn',
+	'Dwarf',
+	'Elf',
+	'Goblin',
+	'Half-Elf',
+	'Half-Orc',
+	'Human',
+	'Kobold',
+	'Lizardfolk',
+	'Lycan',
+	'Orc',
+	'Tiefling',
+	'Vampire',
+	'Yuan-Ti',
+
+	// Magic / Spells / Items
+	'Magic',
+	'Magic Item',
+	'Magic Items',
+	'Wondrous Item',
+	'Magic Weapon',
+	'Artifact',
+	'Spell',
+	'Spells',
+	'Cantrip',
+	'Cantrips',
+	'Eldritch',
+	'Eldritch Invocation',
+	'Invocation',
+	'Invocations',
+	'Pact boon',
+	'Pact Boon',
+	'Spellcaster',
+	'Spellblade',
+	'Magical Tattoos',
+	'Enchantment',
+	'Enchanted',
+	'Attunement',
+	'Requires Attunement',
+	'Rune',
+	'Runes',
+	'Wand',
+	'Rod',
+	'Scroll',
+	'Potion',
+	'Potions',
+	'Item',
+	'Items',
+	'Bag of Holding',
+
+	// Monsters / Creatures / Enemies
+	'Monster',
+	'Creatures',
+	'Creature',
+	'Beast',
+	'Beasts',
+	'Humanoid',
+	'Undead',
+	'Fiend',
+	'Aberration',
+	'Ooze',
+	'Giant',
+	'Dragon',
+	'Monstrosity',
+	'Demon',
+	'Devil',
+	'Elemental',
+	'Construct',
+	'Constructs',
+	'Boss',
+	'BBEG',
+
+	// ############################# Media / Pop Culture
+	'One Piece',
+	'Dragon Ball',
+	'Dragon Ball Z',
+	'Naruto',
+	'Jujutsu Kaisen',
+	'Fairy Tail',
+	'Final Fantasy',
+	'Kingdom Hearts',
+	'Elder Scrolls',
+	'Skyrim',
+	'WoW',
+	'World of Warcraft',
+	'Marvel Comics',
+	'DC Comics',
+	'Pokemon',
+	'League of Legends',
+	'Runeterra',
+	'Arcane',
+	'Yu-Gi-Oh',
+	'Minecraft',
+	'Don\'t Starve',
+	'Witcher',
+	'Witcher 3',
+	'Cyberpunk',
+	'Cyberpunk 2077',
+	'Fallout',
+	'Divinity Original Sin 2',
+	'Fullmetal Alchemist',
+	'Fullmetal Alchemist Brotherhood',
+	'Lobotomy Corporation',
+	'Bloodborne',
+	'Dragonlance',
+	'Shackled City Adventure Path',
+	'Baldurs Gate 3',
+	'Library of Ruina',
+	'Radiant Citadel',
+	'Ravenloft',
+	'Forgotten Realms',
+	'Exandria',
+	'Critical Role',
+	'Star Wars',
+	'SW5e',
+	'Star Wars 5e',
+];

client/homebrew/editor/tagInput/tagInput.jsx

@@ -1,102 +1,205 @@
 import './tagInput.less';
 import React, { useState, useEffect } from 'react';
-import _ from 'lodash';
+import Combobox from '../../../components/combobox.jsx';
 
-const TagInput = ({ unique = true, values = [], ...props })=>{
-	const [tempInputText, setTempInputText] = useState('');
-	const [tagList, setTagList] = useState(values.map((value)=>({ value, editing: false })));
+import tagSuggestionList from './curatedTagSuggestionList.js';
+
+const TagInput = ({ tooltip, label, valuePatterns, values = [], unique = true, placeholder = '', smallText = '', onChange })=>{
+	const [tagList, setTagList] = useState(
+		values.map((value)=>({
+			value,
+			editing : false,
+			draft   : '',
+		})),
+	);
 
 	useEffect(()=>{
-		handleChange(tagList.map((context)=>context.value));
+		const incoming = values || [];
+		const current = tagList.map((t)=>t.value);
+
+		const changed = incoming.length !== current.length || incoming.some((v, i)=>v !== current[i]);
+
+		if(changed) {
+			setTagList(
+				incoming.map((value)=>({
+					value,
+					editing : false,
+				})),
+			);
+		}
+	}, [values]);
+
+	useEffect(()=>{
+		onChange?.({
+			target : { value: tagList.map((t)=>t.value) },
+		});
 	}, [tagList]);
 
-	const handleChange = (value)=>{
-		props.onChange({
-			target : { value }
-		});
-	};
+	// substrings to be normalized to the first value on the array
+	const duplicateGroups = [
+		['5e 2024', '5.5e', '5e\'24', '5.24', '5e24', '5.5'],
+		['5e', '5th Edition'],
+		['Dungeons & Dragons', 'Dungeons and Dragons', 'Dungeons n dragons'],
+		['D&D', 'DnD', 'dnd', 'Dnd', 'dnD', 'd&d', 'd&D', 'D&d'],
+		['P2e', 'p2e', 'P2E', 'Pathfinder 2e'],
+	];
 
-	const handleInputKeyDown = ({ evt, value, index, options = {} })=>{
-		if(_.includes(['Enter', ','], evt.key)) {
-			evt.preventDefault();
-			submitTag(evt.target.value, value, index);
-			if(options.clear) {
-				setTempInputText('');
+	const normalizeValue = (input)=>{
+		const lowerInput = input.toLowerCase();
+		let normalizedTag = input;
+
+		for (const group of duplicateGroups) {
+			for (const tag of group) {
+				if(!tag) continue;
+
+				const index = lowerInput.indexOf(tag.toLowerCase());
+				if(index !== -1) {
+					normalizedTag = input.slice(0, index) + group[0] + input.slice(index + tag.length);
+					break;
+				}
 			}
 		}
+
+		if(normalizedTag.includes(':')) {
+			const [rawType, rawValue = ''] = normalizedTag.split(':');
+			const tagType = rawType.trim().toLowerCase();
+			const tagValue = rawValue.trim();
+
+			if(tagValue.length > 0) {
+				normalizedTag = `${tagType}:${tagValue[0].toUpperCase()}${tagValue.slice(1)}`;
+			}
+			//trims spaces around colon and capitalizes the first word after the colon
+			//this is preferred to users not understanding they can't put spaces in
+		}
+
+		return normalizedTag;
 	};
 
-	const submitTag = (newValue, originalValue, index)=>{
-		setTagList((prevContext)=>{
-			// remove existing tag
-			if(newValue === null){
-				return [...prevContext].filter((context, i)=>i !== index);
+	const submitTag = (newValue, index = null)=>{
+		const trimmed = newValue?.trim();
+		if(!trimmed) return;
+		if(!valuePatterns.test(trimmed)) return;
+
+		const normalizedTag = normalizeValue(trimmed);
+
+		setTagList((prev)=>{
+			const existsIndex = prev.findIndex((t)=>t.value.toLowerCase() === normalizedTag.toLowerCase());
+			if(unique && existsIndex !== -1) return prev;
+			if(index !== null) {
+				return prev.map((t, i)=>(i === index ? { ...t, value: normalizedTag, editing: false } : t));
 			}
-			// add new tag
-			if(originalValue === null){
-				return [...prevContext, { value: newValue, editing: false }];
-			}
-			// update existing tag
-			return prevContext.map((context, i)=>{
-				if(i === index) {
-					return { ...context, value: newValue, editing: false };
-				}
-				return context;
-			});
+
+			return [...prev, { value: normalizedTag, editing: false }];
 		});
 	};
 
+	const removeTag = (index)=>{
+		setTagList((prev)=>prev.filter((_, i)=>i !== index));
+	};
+
 	const editTag = (index)=>{
-		setTagList((prevContext)=>{
-			return prevContext.map((context, i)=>{
-				if(i === index) {
-					return { ...context, editing: true };
-				}
-				return { ...context, editing: false };
-			});
-		});
+		setTagList((prev)=>prev.map((t, i)=>(i === index ? { ...t, editing: true, draft: t.value } : t)));
 	};
 
-	const renderReadTag = (context, index)=>{
-		return (
-			<li key={index}
-				data-value={context.value}
-				className='tag'
-				onClick={()=>editTag(index)}>
-				{context.value}
-				<button onClick={(evt)=>{evt.stopPropagation(); submitTag(null, context.value, index);}}><i className='fa fa-times fa-fw'/></button>
-			</li>
-		);
+	const stopEditing = (index)=>{
+		setTagList((prev)=>prev.map((t, i)=>(i === index ? { ...t, editing: false, draft: '' } : t)));
 	};
 
-	const renderWriteTag = (context, index)=>{
+	const suggestionOptions = tagSuggestionList.map((tag)=>{
+		const tagType = tag.split(':');
+
+		let classes = 'item';
+		switch (tagType[0]) {
+		case 'type':
+			classes = 'item type';
+			break;
+		case 'group':
+			classes = 'item group';
+			break;
+		case 'meta':
+			classes = 'item meta';
+			break;
+		case 'system':
+			classes = 'item system';
+			break;
+		default:
+			classes = 'item';
+			break;
+		}
+
 		return (
-			<input type='text'
-				key={index}
-				defaultValue={context.value}
-				onKeyDown={(evt)=>handleInputKeyDown({ evt, value: context.value, index: index })}
-				autoFocus
-			/>
+			<div className={classes} key={`tag-${tag}`} value={tag} data={tag}>
+				{tag}
+			</div>
 		);
-	};
+	});
 
 	return (
-		<div className='field'>
-			<label>{props.label}</label>
-			<div className='value'>
-				<ul className='list'>
-					{tagList.map((context, index)=>{ return context.editing ? renderWriteTag(context, index) : renderReadTag(context, index); })}
-				</ul>
-
-				<input
-					type='text'
-					className='value'
-					placeholder={props.placeholder}
-					value={tempInputText}
-					onChange={(e)=>setTempInputText(e.target.value)}
-					onKeyDown={(evt)=>handleInputKeyDown({ evt, value: null, options: { clear: true } })}
-				/>
-			</div>
+		<div className='tagInputWrap'>
+			<Combobox
+				trigger='click'
+				className='tagInput-dropdown'
+				default=''
+				placeholder={placeholder}
+				options={label === 'tags' ? suggestionOptions : []}
+				tooltip={tooltip}
+				autoSuggest={
+					label === 'tags'
+						? {
+							suggestMethod           : 'startsWith',
+							clearAutoSuggestOnClick : true,
+							filterOn                : ['value', 'title'],
+						}
+						: { suggestMethod: 'includes', clearAutoSuggestOnClick: true, filterOn: [] }
+				}
+				valuePatterns={valuePatterns.source}
+				onSelect={(value)=>submitTag(value)}
+				onEntry={(e)=>{
+					if(e.key === 'Enter') {
+						e.preventDefault();
+						submitTag(e.target.value);
+					}
+				}}
+			/>
+			<ul className='list'>
+				{tagList.map((t, i)=>t.editing ? (
+					<input
+						key={i}
+						type='text'
+						value={t.draft} // always use draft
+						pattern={valuePatterns.source}
+						onChange={(e)=>setTagList((prev)=>prev.map((tag, idx)=>(idx === i ? { ...tag, draft: e.target.value } : tag)),
+						)
+						}
+						onKeyDown={(e)=>{
+							if(e.key === 'Enter') {
+								e.preventDefault();
+								submitTag(t.draft, i); // submit draft
+								setTagList((prev)=>prev.map((tag, idx)=>(idx === i ? { ...tag, draft: '' } : tag)),
+								);
+							}
+							if(e.key === 'Escape') {
+								stopEditing(i);
+								e.target.blur();
+							}
+						}}
+						autoFocus
+					/>
+				) : (
+					<li key={i} className='tag' onClick={()=>editTag(i)}>
+						{t.value}
+						<button
+							type='button'
+							onClick={(e)=>{
+								e.stopPropagation();
+								removeTag(i);
+							}}>
+							<i className='fa fa-times fa-fw' />
+						</button>
+					</li>
+				),
+				)}
+			</ul>
 		</div>
 	);
 };

client/homebrew/editor/tagInput/tagInput.less

@@ -0,0 +1,31 @@
+.tags {
+
+	.tagInputWrap {
+		display:grid;
+		grid-template-columns: 200px 3fr;
+		gap:10px;
+	}
+
+	.list input {
+		border-radius: 5px;
+	}
+
+	.tagInput-dropdown {
+		.dropdown-options {
+			.item {
+				&.type {
+					background-color: #00800035;
+				}
+				&.group {
+					background-color: #50505035;
+				}
+				&.meta {
+					background-color: #00008035;
+				}
+				&.system {
+					background-color: #80000035;
+				}
+			}
+		}
+	}
+}

client/homebrew/homebrew.jsx

@@ -1,8 +1,7 @@
-
-import 'core-js/es/string/to-well-formed.js'; //Polyfill for older browsers
+import 'core-js/es/string/to-well-formed.js'; // Polyfill for older browsers
 import './homebrew.less';
 import React from 'react';
-import { StaticRouter as Router, Route, Routes, useParams, useSearchParams } from 'react-router';
+import { BrowserRouter as Router, Routes, Route, useParams, useSearchParams } from 'react-router';
 
 import { updateLocalStorage } from './utils/updateLocalStorage/updateLocalStorageKeys.js';
 
@@ -41,24 +40,21 @@ const Homebrew = (props)=>{
 		brews
 	} = props;
 
-	global.account       = account;
-	global.version       = version;
-	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>")`
-  			};
+		if(config?.deployment || (config?.local && config?.development)) {
+			const bgText = 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${(config.deployment || config.local) ? ' deployment' : ''}`} style={backgroundObject()}>
+		<Router>
+			<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} />} />
@@ -80,4 +76,4 @@ const Homebrew = (props)=>{
 	);
 };
 
-module.exports = Homebrew;
+export default Homebrew;

client/homebrew/homebrew.less

@@ -1,4 +1,4 @@
-@import 'naturalcrit/styles/core.less';
+@import '@sharedStyles/core.less';
 .homebrew {
 	height : 100%;
 	background-color:@steel;

client/homebrew/main.jsx

@@ -0,0 +1,6 @@
+import { createRoot } from 'react-dom/client';
+import Homebrew from './homebrew.jsx';
+
+const props = window.__INITIAL_PROPS__ || {};
+
+createRoot(document.getElementById('reactRoot')).render(<Homebrew {...props} />);

client/homebrew/navbar/account.navitem.jsx

@@ -97,7 +97,7 @@ const Account = createReactClass({
 
 		//  Logged out
 		//  LOCAL ONLY
-		if(global.config.local) {
+		if(global.config?.local) {
 			return <Nav.item color='teal' icon='fas fa-sign-in-alt' onClick={this.localLogin}>
 				login
 			</Nav.item>;

client/homebrew/navbar/error-navitem.less

@@ -1,3 +1,5 @@
+@import '@sharedStyles/core.less';
+
 .navItem.error {
 	position         : relative;
 	background-color : @red;

client/homebrew/navbar/navbar.jsx

@@ -8,16 +8,10 @@ import PatreonNavItem from './patreon.navitem.jsx';
 const Navbar = createReactClass({
 	displayName     : 'Navbar',
 	getInitialState : function() {
-		return {
-			//showNonChromeWarning : false,
-			ver : '0.0.0'
-		};
-	},
-
-	getInitialState : function() {
-		return {
-			ver : global.version
-		};
+  		return {
+			// showNonChromeWarning: false, // uncomment if needed
+    		ver : global.version || '0.0.0'
+  		};
 	},
 
 	/*

client/homebrew/navbar/navbar.less

@@ -1,4 +1,4 @@
-@import 'naturalcrit/styles/colors.less';
+@import '@sharedStyles/core.less';
 
 @navbarHeight : 28px;
 @viewerToolsHeight : 32px;

client/homebrew/navbar/newbrew.navitem.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 import Nav from './nav.jsx';
-import { splitTextStyleAndMetadata } from '../../../shared/helpers.js';
+import { splitTextStyleAndMetadata } from '@shared/helpers.js';
 
 const BREWKEY  = 'HB_newPage_content';
 const STYLEKEY = 'HB_newPage_style';

client/homebrew/navbar/print.navitem.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Nav from './nav.jsx';
-import { printCurrentBrew } from '../../../shared/helpers.js';
+import { printCurrentBrew } from '@shared/helpers.js';
 
 export default function(){
 	return <Nav.item onClick={printCurrentBrew} color='purple' icon='far fa-file-pdf'>

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

@@ -1,3 +1,4 @@
+@import '@sharedStyles/core.less';
 
 .brewItem {
 	position                    : relative;

client/homebrew/pages/editPage/editPage.jsx

@@ -4,34 +4,35 @@ import './editPage.less';
 // Common imports
 import React, { useState, useEffect, useRef } from 'react';
 import request                                from '../../utils/request-middleware.js';
-import Markdown                               from '../../../../shared/markdown.js';
+import Markdown                               from '@shared/markdown.js';
 import _                                      from 'lodash';
 
 import { DEFAULT_BREW_LOAD }                  from '../../../../server/brewDefaults.js';
-import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '../../../../shared/helpers.js';
+import { printCurrentBrew, fetchThemeBundle } from '@shared/helpers.js';
 
 import SplitPane    from '../../../components/splitPane/splitPane.jsx';
 import Editor       from '../../editor/editor.jsx';
 import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
 
-import Nav                       from '../../navbar/nav.jsx';
-import Navbar                    from '../../navbar/navbar.jsx';
-import NewBrewItem               from '../../navbar/newbrew.navitem.jsx';
-import AccountNavItem            from '../../navbar/account.navitem.jsx';
-import ErrorNavItem              from '../../navbar/error-navitem.jsx';
-import HelpNavItem               from '../../navbar/help.navitem.jsx';
-import VaultNavItem              from '../../navbar/vault.navitem.jsx';
-import PrintNavItem              from '../../navbar/print.navitem.jsx';
-import RecentNavItems from '../../navbar/recent.navitem.jsx';
+import Nav                       from '@navbar/nav.jsx';
+import Navbar                    from '@navbar/navbar.jsx';
+import NewBrewItem               from '@navbar/newbrew.navitem.jsx';
+import AccountNavItem            from '@navbar/account.navitem.jsx';
+import ErrorNavItem              from '@navbar/error-navitem.jsx';
+import HelpNavItem               from '@navbar/help.navitem.jsx';
+import VaultNavItem              from '@navbar/vault.navitem.jsx';
+import PrintNavItem              from '@navbar/print.navitem.jsx';
+import RecentNavItems from '@navbar/recent.navitem.jsx';
 const { both: RecentNavItem } = RecentNavItems;
 
 // Page specific imports
-import { Meta }                          from 'vitreum/headtags';
+import Headtags from '../../../../vitreum/headtags.js';
+const Meta = Headtags.Meta;
 import { md5 }                           from 'hash-wasm';
 import { gzipSync, strToU8 }             from 'fflate';
 import { makePatches, stringifyPatches } from '@sanity/diff-match-patch';
 
-import ShareNavItem              from '../../navbar/share.navitem.jsx';
+import ShareNavItem              from '@navbar/share.navitem.jsx';
 import LockNotification from './lockNotification/lockNotification.jsx';
 import { updateHistory, versionHistoryGarbageCollection } from '../../utils/versionHistory.js';
 import googleDriveIcon from '../../googleDrive.svg';
@@ -56,28 +57,28 @@ const EditPage = (props)=>{
 		...props
 	};
 
-	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 [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);
+	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);
 
 	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 trySaveRef         = useRef(null); // 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(()=>{

client/homebrew/pages/errorPage/errorPage.jsx

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

client/homebrew/pages/homePage/homePage.jsx

@@ -1,33 +1,34 @@
-/* eslint-disable max-lines */
+
 import './homePage.less';
 
 // Common imports
 import React, { useState, useEffect, useRef } from 'react';
 import request                                from '../../utils/request-middleware.js';
-import Markdown                               from '../../../../shared/markdown.js';
+import Markdown                               from '@shared/markdown.js';
 import _                                      from 'lodash';
 
 import { DEFAULT_BREW }                       from '../../../../server/brewDefaults.js';
-import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '../../../../shared/helpers.js';
+import { printCurrentBrew, fetchThemeBundle } from '@shared/helpers.js';
 
 import SplitPane    from '../../../components/splitPane/splitPane.jsx';
 import Editor       from '../../editor/editor.jsx';
 import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
 
-import Nav                       from '../../navbar/nav.jsx';
-import Navbar                    from '../../navbar/navbar.jsx';
-import NewBrewItem               from '../../navbar/newbrew.navitem.jsx';
-import AccountNavItem            from '../../navbar/account.navitem.jsx';
-import ErrorNavItem              from '../../navbar/error-navitem.jsx';
-import HelpNavItem               from '../../navbar/help.navitem.jsx';
-import VaultNavItem              from '../../navbar/vault.navitem.jsx';
-import PrintNavItem              from '../../navbar/print.navitem.jsx';
-import RecentNavItems from '../../navbar/recent.navitem.jsx';
+import Nav                       from '@navbar/nav.jsx';
+import Navbar                    from '@navbar/navbar.jsx';
+import NewBrewItem               from '@navbar/newbrew.navitem.jsx';
+import AccountNavItem            from '@navbar/account.navitem.jsx';
+import ErrorNavItem              from '@navbar/error-navitem.jsx';
+import HelpNavItem               from '@navbar/help.navitem.jsx';
+import VaultNavItem              from '@navbar/vault.navitem.jsx';
+import PrintNavItem              from '@navbar/print.navitem.jsx';
+import RecentNavItems from '@navbar/recent.navitem.jsx';
 const { both: RecentNavItem } = RecentNavItems;
 
 
 // Page specific imports
-import { Meta }                               from 'vitreum/headtags';
+import Headtags   from '@vitreum/headtags.js';
+const Meta = Headtags.Meta;
 
 const BREWKEY  = 'homebrewery-new';
 const STYLEKEY = 'homebrewery-new-style';
@@ -44,16 +45,16 @@ const HomePage =(props)=>{
 		...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 [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 [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));

client/homebrew/pages/homePage/homePage.less

@@ -1,3 +1,5 @@
+@import '@sharedStyles/core.less';
+
 .homePage {
 	position : relative;
 	a.floatingNewButton {

client/homebrew/pages/homePage/welcome_msg.md

@@ -36,7 +36,7 @@ After clicking the "Print" item in the navbar a new page will open and a print d
 If you want to save ink or have a monochrome printer, add the **PRINT → {{fas,fa-tint}} Ink Friendly** snippet to your brew!
 }}
 
-![homebrew mug](https://i.imgur.com/hMna6G0.png) {position:absolute,bottom:20px,left:130px,width:220px}
+![homebrew mug](https://homebrewery.naturalcrit.com/assets/homebrewerymug.png) {position:absolute,bottom:20px,left:130px,width:220px}
 
 {{artist,bottom:160px,left:100px
 ##### Homebrew Mug
@@ -77,16 +77,16 @@ If you wish to sell or in some way gain profit for what's created on this site,
 If you'd like to credit us in your brew, we'd be flattered! Just reference that you made it with The Homebrewery.
 
 ### More Homebrew Resources
-[![Discord](/assets/discordOfManyThings.svg){width:50px,float:right,padding-left:10px}](https://discord.gg/by3deKx)
+[![Discord](https://homebrewery.naturalcrit.com/assets/discordOfManyThings.svg){width:50px,float:right,padding-left:10px}](https://discord.gg/by3deKx)
 
 If you are looking for more 5e Homebrew resources check out [r/UnearthedArcana](https://www.reddit.com/r/UnearthedArcana/) and their list of useful resources [here](https://www.reddit.com/r/UnearthedArcana/wiki/resources). The [Discord Of Many Things](https://discord.gg/by3deKx) is another great resource to connect with fellow homebrewers for help and feedback.
 
 
 {{position:absolute;top:20px;right:20px;width:auto
-[![Discord](/assets/discord.png){height:30px}](https://discord.gg/by3deKx)
-[![Github](/assets/github.png){height:30px}](https://github.com/naturalcrit/homebrewery)
-[![Patreon](/assets/patreon.png){height:30px}](https://patreon.com/NaturalCrit)
-[![Reddit](/assets/reddit.png){height:30px}](https://www.reddit.com/r/homebrewery/)
+[![Discord](https://homebrewery.naturalcrit.com/assets/discord.png){height:30px}](https://discord.gg/by3deKx)
+[![Github](https://homebrewery.naturalcrit.com/assets/github.png){height:30px}](https://github.com/naturalcrit/homebrewery)
+[![Patreon](https://homebrewery.naturalcrit.com/assets/patreon.png){height:30px}](https://patreon.com/NaturalCrit)
+[![Reddit](https://homebrewery.naturalcrit.com/assets/reddit.png){height:30px}](https://www.reddit.com/r/homebrewery/)
 }}
 
 \page
@@ -162,7 +162,7 @@ Images must be hosted online somewhere, like [Imgur](https://www.imgur.com). You
 
 Using *Curly Injection* you can assign an id, classes, or inline CSS properties to the Markdown image syntax.
 
-![alt-text](https://s-media-cache-ak0.pinimg.com/736x/4a/81/79/4a8179462cfdf39054a418efd4cb743e.jpg) {width:100px,border:"2px solid",border-radius:10px}
+![alt-text](https://homebrewery.naturalcrit.com/assets/catwarrior.jpg) {width:100px,border:"2px solid",border-radius:10px}
 
 \* *When using Imgur-hosted images, use the "direct link", which can be found when you click into your image in the Imgur interface.*
 

client/homebrew/pages/newPage/newPage.jsx

@@ -4,29 +4,28 @@ import './newPage.less';
 // Common imports
 import React, { useState, useEffect, useRef } from 'react';
 import request                                from '../../utils/request-middleware.js';
-import Markdown                               from '../../../../shared/markdown.js';
+import Markdown                               from '@shared/markdown.js';
 import _                                      from 'lodash';
 
 import { DEFAULT_BREW }                       from '../../../../server/brewDefaults.js';
-import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '../../../../shared/helpers.js';
+import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '@shared/helpers.js';
 
 import SplitPane    from '../../../components/splitPane/splitPane.jsx';
 import Editor       from '../../editor/editor.jsx';
 import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
 
-import Nav                       from '../../navbar/nav.jsx';
-import Navbar                    from '../../navbar/navbar.jsx';
-import NewBrewItem               from '../../navbar/newbrew.navitem.jsx';
-import AccountNavItem            from '../../navbar/account.navitem.jsx';
-import ErrorNavItem              from '../../navbar/error-navitem.jsx';
-import HelpNavItem               from '../../navbar/help.navitem.jsx';
-import VaultNavItem              from '../../navbar/vault.navitem.jsx';
-import PrintNavItem              from '../../navbar/print.navitem.jsx';
-import RecentNavItems from '../../navbar/recent.navitem.jsx';
+import Nav                       from '@navbar/nav.jsx';
+import Navbar                    from '@navbar/navbar.jsx';
+import NewBrewItem               from '@navbar/newbrew.navitem.jsx';
+import AccountNavItem            from '@navbar/account.navitem.jsx';
+import ErrorNavItem              from '@navbar/error-navitem.jsx';
+import HelpNavItem               from '@navbar/help.navitem.jsx';
+import VaultNavItem              from '@navbar/vault.navitem.jsx';
+import PrintNavItem              from '@navbar/print.navitem.jsx';
+import RecentNavItems from '@navbar/recent.navitem.jsx';
 const { both: RecentNavItem } = RecentNavItems;
 
 // Page specific imports
-import { Meta }                  from 'vitreum/headtags';
 
 const UNSAVED_WARNING_TIMEOUT = 9000; //Warn user afer 15 minutes of unsaved changes
 const UNSAVED_WARNING_POPUP_TIMEOUT = 4000; //Show the warning for 4 seconds
@@ -64,7 +63,7 @@ const NewPage = (props)=>{
 	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 trySaveRef         = useRef(null); // 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(()=>{

client/homebrew/pages/newPage/newPage.less

@@ -1,3 +1,5 @@
+@import '@sharedStyles/colors.less';
+
 .newPage {
 	.navItem.save {
 		background-color : @orange;

client/homebrew/pages/sharePage/sharePage.jsx

@@ -1,18 +1,19 @@
 import './sharePage.less';
 import React, { useState, useEffect, useCallback } from 'react';
-import { Meta }                          from 'vitreum/headtags';
+import Headtags   from '../../../../vitreum/headtags.js';
+const Meta = Headtags.Meta;
 
-import Nav from '../../navbar/nav.jsx';
-import Navbar from '../../navbar/navbar.jsx';
-import MetadataNav from '../../navbar/metadata.navitem.jsx';
-import PrintNavItem from '../../navbar/print.navitem.jsx';
-import RecentNavItems from '../../navbar/recent.navitem.jsx';
+import Nav from '@navbar/nav.jsx';
+import Navbar from '@navbar/navbar.jsx';
+import MetadataNav from '@navbar/metadata.navitem.jsx';
+import PrintNavItem from '@navbar/print.navitem.jsx';
+import RecentNavItems from '@navbar/recent.navitem.jsx';
 const { both: RecentNavItem } = RecentNavItems;
-import Account from '../../navbar/account.navitem.jsx';
+import Account from '@navbar/account.navitem.jsx';
 import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
 
 import { DEFAULT_BREW_LOAD } from '../../../../server/brewDefaults.js';
-import { printCurrentBrew, fetchThemeBundle } from '../../../../shared/helpers.js';
+import { printCurrentBrew, fetchThemeBundle } from '@shared/helpers.js';
 
 const SharePage = (props)=>{
 	const { brew = DEFAULT_BREW_LOAD, disableMeta = false } = props;

client/homebrew/pages/userPage/userPage.jsx

@@ -3,15 +3,15 @@ import _ from 'lodash';
 
 import ListPage from '../basePages/listPage/listPage.jsx';
 
-import Nav from '../../navbar/nav.jsx';
-import Navbar from '../../navbar/navbar.jsx';
-import RecentNavItems from '../../navbar/recent.navitem.jsx';
+import Nav from '@navbar/nav.jsx';
+import Navbar from '@navbar/navbar.jsx';
+import RecentNavItems from '@navbar/recent.navitem.jsx';
 const { both: RecentNavItem } = RecentNavItems;
-import Account from '../../navbar/account.navitem.jsx';
-import NewBrew from '../../navbar/newbrew.navitem.jsx';
-import HelpNavItem from '../../navbar/help.navitem.jsx';
-import ErrorNavItem from '../../navbar/error-navitem.jsx';
-import VaultNavitem from '../../navbar/vault.navitem.jsx';
+import Account from '@navbar/account.navitem.jsx';
+import NewBrew from '@navbar/newbrew.navitem.jsx';
+import HelpNavItem from '@navbar/help.navitem.jsx';
+import ErrorNavItem from '@navbar/error-navitem.jsx';
+import VaultNavitem from '@navbar/vault.navitem.jsx';
 
 const UserPage = (props)=>{
 	props = {

client/homebrew/pages/vaultPage/vaultPage.jsx

@@ -3,13 +3,13 @@
 import './vaultPage.less';
 import React, { useState, useEffect, useRef } from 'react';
 
-import Nav          from '../../navbar/nav.jsx';
-import Navbar       from '../../navbar/navbar.jsx';
-import RecentNavItems from '../../navbar/recent.navitem.jsx';
+import Nav          from '@navbar/nav.jsx';
+import Navbar       from '@navbar/navbar.jsx';
+import RecentNavItems from '@navbar/recent.navitem.jsx';
 const { both: RecentNavItem } = RecentNavItems;
-import Account      from '../../navbar/account.navitem.jsx';
-import NewBrew      from '../../navbar/newbrew.navitem.jsx';
-import HelpNavItem  from '../../navbar/help.navitem.jsx';
+import Account      from '@navbar/account.navitem.jsx';
+import NewBrew      from '@navbar/newbrew.navitem.jsx';
+import HelpNavItem  from '@navbar/help.navitem.jsx';
 import BrewItem     from '../basePages/listPage/brewItem/brewItem.jsx';
 import SplitPane    from '../../../components/splitPane/splitPane.jsx';
 import ErrorIndex   from '../errorPage/errors/errorIndex.js';

client/homebrew/pages/vaultPage/vaultPage.less

@@ -1,3 +1,5 @@
+@import '@sharedStyles/core.less';
+
 .vaultPage {
 	height           : 100%;
 	overflow-y       : hidden;

client/template.js

@@ -1,33 +0,0 @@
-const template = async function(name, title='', props = {}){
-	const ogTags = [];
-	const ogMeta = props.ogMeta ?? {};
-	Object.entries(ogMeta).forEach(([key, value])=>{
-		if(!value) return;
-		const tag = `<meta property="og:${key}" content="${value}">`;
-		ogTags.push(tag);
-	});
-	const ogMetaTags = ogTags.join('\n');
-
-	const ssrModule = await import(`../build/${name}/ssr.cjs`);
-
-	return `<!DOCTYPE html>
-	<html>
-		<head>
-			<meta name="viewport" content="width=device-width, initial-scale=1, height=device-height, interactive-widget=resizes-visual" />
-			<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
-			<link href=${`/${name}/bundle.css`} type="text/css" rel='stylesheet' />
-			<link rel="icon" href="/assets/favicon.ico" type="image/x-icon" />
-			${ogMetaTags}
-			<meta name="twitter:card" content="summary">
-			<title>${title.length ? `${title} - The Homebrewery`: 'The Homebrewery - NaturalCrit'}</title>
-		</head>
-		<body>
-			<main id="reactRoot">${ssrModule.default(props)}</main>
-			<script src=${`/${name}/bundle.js`}></script>
-			<script>start_app(${JSON.stringify(props)})</script>
-		</body>
-	</html>
-	`;
-};
-
-export default template;