Merge branch 'master' into experimentalNotificationDB

2025-12-24 20:42:43 +00:00 · 2024-10-09 11:12:23 -04:00
parent 64dd71601c 8281db8543
commit 269dd6107c
21 changed files with 927 additions and 1007 deletions
--- a/client/homebrew/brewRenderer/brewRenderer.jsx
+++ b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -55,9 +55,9 @@ const BrewRenderer = (props)=>{
 		theme                      : '5ePHB',
 		lang                       : '',
 		errors                     : [],
-		currentEditorCursorPageNum : 0,
-		currentEditorViewPageNum   : 0,
-		currentBrewRendererPageNum : 0,
+		currentEditorCursorPageNum : 1,
+		currentEditorViewPageNum   : 1,
+		currentBrewRendererPageNum : 1,
 		themeBundle                : {},
 		onPageChange               : ()=>{},
 		...props
--- a/client/homebrew/brewRenderer/brewRenderer.less
+++ b/client/homebrew/brewRenderer/brewRenderer.less
@@ -39,6 +39,7 @@
 		overflow-y  : unset;
 		.pages {
 			margin : 0px;
+			zoom: 100% !important;
 			& > .page { box-shadow : unset; }
 		}
 	}
--- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
@@ -304,17 +304,14 @@ const MetadataEditor = createClass({
 						onChange={(e)=>this.handleRenderer('V3', e)} />
 					V3
 				</label>
-
-				<a href='/legacy' target='_blank' rel='noopener noreferrer'>
-					Click here to see the demo page for the old Legacy renderer!
-				</a>
+				<small><a href='/legacy' target='_blank' rel='noopener noreferrer'>Click here to see the demo page for the old Legacy renderer!</a></small>
 			</div>
 		</div>;
 	},

 	render : function(){
 		return <div className='metadataEditor'>
-			<h1 className='sectionHead'>Brew</h1>
+			<h1>Properties Editor</h1>

 			<div className='field title'>
 				<label>title</label>
@@ -362,9 +359,7 @@ const MetadataEditor = createClass({

 			{this.renderRenderOptions()}

-			<hr/>
-
-			<h1 className='sectionHead'>Authors</h1>
+			<h2>Authors</h2>

 			{this.renderAuthors()}

@@ -375,15 +370,13 @@ const MetadataEditor = createClass({
 				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)}/>

-			<hr/>
-
-			<h1 className='sectionHead'>Privacy</h1>
+			<h2>Privacy</h2>

 			<div className='field publish'>
 				<label>publish</label>
 				<div className='value'>
 					{this.renderPublish()}
-					<small>Published homebrews will be publicly viewable and searchable (eventually...)</small>
+					<small>Published brews are searchable in <a href='/vault'>the Vault</a> and visible on your user page.  Unpublished brews are not indexed in the Vault or visible on your user page, but can still be shared and indexed by search engines.  You can unpublish a brew any time.</small>
 				</div>
 			</div>

--- a/client/homebrew/editor/metadataEditor/metadataEditor.less
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.less
@@ -1,5 +1,6 @@
@import 'naturalcrit/styles/colors.less';

+
 .metadataEditor {
 	position         : absolute;
 	z-index          : 5;
@@ -9,12 +10,19 @@
 	padding          : 25px;
 	overflow-y       : auto;
 	background-color : #999999;
+	font-size		 : 13px;

-	.sectionHead {
+	h1 {
+		margin: 0 0 40px;
+		font-weight: bold;
+		text-transform: uppercase;
+	}
+	
+	h2 {
 		margin      : 20px 0;
-		font-weight : 1000;
-
-		&:first-of-type { margin-top : 0; }
+		font-weight : bold;
+		border-bottom: 2px solid gray;
+		color: #555;
 	}

 	& > div { margin-bottom : 10px; }
@@ -43,15 +51,21 @@
 		min-width     : 200px;
 		& > label {
 			width          : 80px;
-			font-size      : 11px;
 			font-weight    : 800;
 			line-height    : 1.8em;
 			text-transform : uppercase;
+			font-size: .9em;
 		}
 		& > .value {
 			flex           : 1 1 auto;
 			width          : 50px;
 			&:invalid { background : #FFB9B9; }
+			small {
+				display     : block;
+				font-size   : 0.9em;
+				font-style  : italic;
+				line-height : 1.4em;
+			}
 		}
 		input[type='text'], textarea {
 			border : 1px solid gray;
@@ -78,7 +92,6 @@
 			textarea.value {
 				height      : auto;
 				font-family : 'Open Sans', sans-serif;
-				font-size   : 0.8em;
 				resize      : none;
 			}
 		}
@@ -87,12 +100,6 @@
 			z-index   : 200;
 			max-width : 150px;
 		}
-		small {
-			display     : inline-block;
-			font-size   : 0.6em;
-			font-style  : italic;
-			line-height : 1.4em;
-		}
 	}


@@ -113,18 +120,13 @@
 			display        : inline-flex;
 			align-items    : center;
 			margin-right   : 15px;
-			font-size      : 0.7em;
+			font-size      : 0.9em;
 			font-weight    : 800;
 			white-space    : nowrap;
 			vertical-align : middle;
 			cursor         : pointer;
 			user-select    : none;
 		}
-		a {
-			display     : inline-flex;
-			font-size   : 0.7em;
-			font-weight : 800;
-		}
 		input {
 			margin         : 3px;
 			vertical-align : middle;
@@ -149,12 +151,10 @@
 		}
 	}
 	.authors.field .value {
-		font-size      : 0.8em;
 		line-height    : 1.5em;
 	}

 	.themes.field {
-		font-size : 13.33px;
 		.navDropdownContainer {
 			position         : relative;
 			z-index          : 100;
@@ -165,9 +165,9 @@
 				background-color : darkgray;
 			}
 			& > div:first-child {
-				padding           : 6px 3px;
+				padding           : 3px 3px;
 				background-color  : inherit;
-				border            : 2px solid rgb(118,118,118);
+				border            : 1px solid gray;
 				i { float	: right; }
 				&:hover {
 					color            : white;
@@ -240,6 +240,7 @@
 			}
 		}
 	}
+
 	.field .list {
 		display   : flex;
 		flex      : 1 0;
@@ -258,15 +259,15 @@
 			color      : white;
 			text-align : center;
 			cursor     : pointer;
-
+	
 			i {
 				position  : relative;
 				top       : 50%;
 				transform : translateY(-50%);
 			}
-
+	
 			&:not(:last-child) { border-right : 1px solid black; }
-
+	
 			&:last-child { border-radius : 0 0.5em 0.5em 0; }
 		}

@@ -277,8 +278,7 @@
 			background-color : #DDDDDD;
 			border-radius    : 0.5em;

-			.icon {
-				#groupedIcon; }
+			.icon { #groupedIcon; }
 		}

 		.input-group {
@@ -294,17 +294,30 @@
 				height    : 100%;
 			}

-			.invalid:focus { background-color : pink; }
+			.input-group {
+				height : ~'calc(.9em + 4px + .6em)';

-			.icon {
-				#groupedIcon;
-				top       : -0.54em;
-				right     : 1px;
-				height    : 97%;
-				font-size : 0.8em;
+				input { border-radius : 0.5em 0 0 0.5em; }

-				i { font-size : 1.125em; }
+				input:last-child { border-radius : 0.5em; }
+
+				.value {
+					width     : 7.5vw;
+					min-width : 75px;
+					height    : 100%;
+				}
+
+				.invalid:focus { background-color : pink; }
+
+				.icon {
+					#groupedIcon;
+					top       : -0.54em;
+					right     : 1px;
+					height    : 97%;
+
+					i { font-size : 1.125em; }
+				}
 			}
 		}
 	}
-}
+}
--- a/client/homebrew/editor/stringArrayEditor/stringArrayEditor.jsx
+++ b/client/homebrew/editor/stringArrayEditor/stringArrayEditor.jsx
@@ -128,7 +128,7 @@ const StringArrayEditor = createClass({

 		return <div className='field'>
 			<label>{this.props.label}</label>
-			<div style={{ flex: '1 0' }}>
+			<div style={{ flex: '1 0' }} className='value'>
 				<div className='list'>
 					{valueElements}
 					<div className='input-group'>
--- a/client/homebrew/navbar/editTitle.navitem.jsx
+++ b/client/homebrew/navbar/editTitle.navitem.jsx
@@ -1,34 +0,0 @@
-const React = require('react');
-const createClass = require('create-react-class');
-const cx = require('classnames');
-const Nav = require('naturalcrit/nav/nav.jsx');
-
-const MAX_TITLE_LENGTH = 50;
-
-
-const EditTitle = createClass({
-	displayName     : 'EditTitleNavItem',
-	getDefaultProps : function() {
-		return {
-			title    : '',
-			onChange : function(){}
-		};
-	},
-
-	handleChange : function(e){
-		if(e.target.value.length > MAX_TITLE_LENGTH) return;
-		this.props.onChange(e.target.value);
-	},
-	render : function(){
-		return <Nav.item className='editTitle'>
-			<input placeholder='Brew Title' type='text' value={this.props.title} onChange={this.handleChange} />
-
-			<div className={cx('charCount', { 'max': this.props.title.length >= MAX_TITLE_LENGTH })}>
-				{this.props.title.length}/{MAX_TITLE_LENGTH}
-			</div>
-		</Nav.item>;
-	},
-
-});
-
-module.exports = EditTitle;
--- a/client/homebrew/navbar/recent.navitem.jsx
+++ b/client/homebrew/navbar/recent.navitem.jsx
@@ -36,7 +36,7 @@ const RecentItems = createClass({
 		//== Add current brew to appropriate recent items list (depending on storageKey) ==//
 		if(this.props.storageKey == 'edit'){
 			let editId = this.props.brew.editId;
-			if(this.props.brew.googleId){
+			if(this.props.brew.googleId && !this.props.brew.stubbed){
 				editId = `${this.props.brew.googleId}${this.props.brew.editId}`;
 			}
 			edited = _.filter(edited, (brew)=>{
@@ -51,7 +51,7 @@ const RecentItems = createClass({
 		}
 		if(this.props.storageKey == 'view'){
 			let shareId = this.props.brew.shareId;
-			if(this.props.brew.googleId){
+			if(this.props.brew.googleId && !this.props.brew.stubbed){
 				shareId = `${this.props.brew.googleId}${this.props.brew.shareId}`;
 			}
 			viewed = _.filter(viewed, (brew)=>{
@@ -83,7 +83,7 @@ const RecentItems = createClass({
 	 		let edited = JSON.parse(localStorage.getItem(EDIT_KEY) || '[]');
 			if(this.props.storageKey == 'edit') {
 				let prevEditId = prevProps.brew.editId;
-				if(prevProps.brew.googleId){
+				if(prevProps.brew.googleId && !this.props.brew.stubbed){
 					prevEditId = `${prevProps.brew.googleId}${prevProps.brew.editId}`;
 				}

@@ -91,7 +91,7 @@ const RecentItems = createClass({
 					return brew.id !== prevEditId;
 				});
 				let editId = this.props.brew.editId;
-				if(this.props.brew.googleId){
+				if(this.props.brew.googleId && !this.props.brew.stubbed){
 					editId = `${this.props.brew.googleId}${this.props.brew.editId}`;
 				}
 				edited.unshift({
--- a/client/homebrew/navbar/reddit.navitem.jsx
+++ b/client/homebrew/navbar/reddit.navitem.jsx
@@ -1,44 +0,0 @@
-const React = require('react');
-const createClass = require('create-react-class');
-const Nav = require('naturalcrit/nav/nav.jsx');
-
-const MAIN_URL = 'https://www.reddit.com/r/UnearthedArcana/submit?selftext=true';
-
-
-const RedditShare = createClass({
-	displayName     : 'RedditShareNavItem',
-	getDefaultProps : function() {
-		return {
-			brew : {
-				title    : '',
-				sharedId : '',
-				text     : ''
-			}
-		};
-	},
-
-	getText : function(){
-
-	},
-
-
-	handleClick : function(){
-		const url = [
-			MAIN_URL,
-			`title=${encodeURIComponent(this.props.brew.title ? this.props.brew.title : 'Check out my brew!')}`,
-			`text=${encodeURIComponent(this.props.brew.text)}`
-		].join('&');
-
-		window.open(url, '_blank');
-	},
-
-
-	render : function(){
-		return <Nav.item icon='fa-reddit-alien' color='red' onClick={this.handleClick}>
-			share on reddit
-		</Nav.item>;
-	},
-
-});
-
-module.exports = RedditShare;
--- a/client/homebrew/pages/editPage/editPage.jsx
+++ b/client/homebrew/pages/editPage/editPage.jsx
@@ -32,7 +32,7 @@ import { updateHistory, versionHistoryGarbageCollection } from '../../utils/vers

 const googleDriveIcon = require('../../googleDrive.svg');

-const SAVE_TIMEOUT = 3000;
+const SAVE_TIMEOUT = 10000;

 const EditPage = createClass({
 	displayName     : 'EditPage',
--- a/client/homebrew/pages/sharePage/sharePage.jsx
+++ b/client/homebrew/pages/sharePage/sharePage.jsx
@@ -25,7 +25,8 @@ const SharePage = createClass({

 	getInitialState : function() {
 		return {
-			themeBundle : {}
+			themeBundle                : {},
+			currentBrewRendererPageNum : 1
 		};
 	},

@@ -39,6 +40,10 @@ const SharePage = createClass({
 		document.removeEventListener('keydown', this.handleControlKeys);
 	},

+	handleBrewRendererPageChange : function(pageNumber){
+		this.setState({ currentBrewRendererPageNum: pageNumber });
+	},
+
 	handleControlKeys : function(e){
 		if(!(e.ctrlKey || e.metaKey)) return;
 		const P_KEY = 80;
@@ -114,9 +119,12 @@ const SharePage = createClass({
 				<BrewRenderer
 					text={this.props.brew.text}
 					style={this.props.brew.style}
+					lang={this.props.brew.lang}
 					renderer={this.props.brew.renderer}
 					theme={this.props.brew.theme}
 					themeBundle={this.state.themeBundle}
+					onPageChange={this.handleBrewRendererPageChange}
+					currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
 					allowPrint={true}
 				/>
 			</div>
--- a/client/homebrew/pages/vaultPage/vaultPage.jsx
+++ b/client/homebrew/pages/vaultPage/vaultPage.jsx
@@ -1,3 +1,5 @@
+/*eslint max-lines: ["warn", {"max": 400, "skipBlankLines": true, "skipComments": true}]*/
+/*eslint max-params:["warn", { max: 10 }], */
 require('./vaultPage.less');

 const React = require('react');
@@ -18,13 +20,15 @@ const request = require('../../utils/request-middleware.js');
 const VaultPage = (props)=>{
 	const [pageState, setPageState] = useState(parseInt(props.query.page) || 1);

+	const [sortState, setSort] = useState(props.query.sort || 'title');
+	const [dirState, setdir] = useState(props.query.dir || 'asc');
+
 	//Response state
 	const [brewCollection, setBrewCollection] = useState(null);
 	const [totalBrews, setTotalBrews]         = useState(null);
 	const [searching, setSearching]           = useState(false);
 	const [error, setError]                   = useState(null);

-
 	const titleRef        = useRef(null);
 	const authorRef       = useRef(null);
 	const countRef        = useRef(null);
@@ -34,7 +38,7 @@ const VaultPage = (props)=>{

 	useEffect(()=>{
 		disableSubmitIfFormInvalid();
-		loadPage(pageState, true);
+		loadPage(pageState, true, props.query.sort, props.query.dir);
 	}, []);

 	const updateStateWithBrews = (brews, page)=>{
@@ -43,7 +47,7 @@ const VaultPage = (props)=>{
 		setSearching(false);
 	};

-	const updateUrl = (titleValue, authorValue, countValue, v3Value, legacyValue, page)=>{
+	const updateUrl = (titleValue, authorValue, countValue, v3Value, legacyValue, page, sort, dir)=>{
 		const url = new URL(window.location.href);
 		const urlParams = new URLSearchParams(url.search);

@@ -53,21 +57,23 @@ const VaultPage = (props)=>{
 		urlParams.set('v3', v3Value);
 		urlParams.set('legacy', legacyValue);
 		urlParams.set('page', page);
+		urlParams.set('sort', sort);
+		urlParams.set('dir', dir);

 		url.search = urlParams.toString();
 		window.history.replaceState(null, '', url.toString());
 	};

-	const performSearch = async (title, author, count, v3, legacy, page)=>{
-		updateUrl(title, author, count, v3, legacy, page);
+	const performSearch = async (title, author, count, v3, legacy, page, sort, dir)=>{
+		updateUrl(title, author, count, v3, legacy, page, sort, dir);

-		const response = await request.get(
-			`/api/vault?title=${title}&author=${author}&v3=${v3}&legacy=${legacy}&count=${count}&page=${page}`
-		).catch((error)=>{
-			console.log('error at loadPage: ', error);
-			setError(error);
-			updateStateWithBrews([], 1);
-		});
+		const response = await request
+			.get(`/api/vault?title=${title}&author=${author}&v3=${v3}&legacy=${legacy}&count=${count}&page=${page}&sort=${sort}&dir=${dir}`)
+			.catch((error)=>{
+				console.log('error at loadPage: ', error);
+				setError(error);
+				updateStateWithBrews([], 1);
+			});

 		if(response.ok)
 			updateStateWithBrews(response.body.brews, page);
@@ -76,9 +82,8 @@ const VaultPage = (props)=>{
 	const loadTotal = async (title, author, v3, legacy)=>{
 		setTotalBrews(null);

-		const response = await request.get(
-			`/api/vault/total?title=${title}&author=${author}&v3=${v3}&legacy=${legacy}`
-		).catch((error)=>{
+		const response = await request.get(`/api/vault/total?title=${title}&author=${author}&v3=${v3}&legacy=${legacy}`)
+		.catch((error)=>{
 			console.log('error at loadTotal: ', error);
 			setError(error);
 			updateStateWithBrews([], 1);
@@ -88,9 +93,8 @@ const VaultPage = (props)=>{
 			setTotalBrews(response.body.totalBrews);
 	};

-	const loadPage = async (page, updateTotal)=>{
-		if(!validateForm())
-			return;
+	const loadPage = async (page, updateTotal, sort, dir)=>{
+		if(!validateForm()) return;

 		setSearching(true);
 		setError(null);
@@ -100,8 +104,14 @@ const VaultPage = (props)=>{
 		const count  = countRef.current.value || 10;
 		const v3     = v3Ref.current.checked != false;
 		const legacy = legacyRef.current.checked != false;
+		const sortOption = sort || 'title';
+		const dirOption = dir || 'asc';
+		const pageProp = page || 1;

-		performSearch(title, author, count, v3, legacy, page);
+		setSort(sortOption);
+		setdir(dirOption);
+
+		performSearch(title, author, count, v3, legacy, pageProp, sortOption, dirOption);

 		if(updateTotal)
 			loadTotal(title, author, v3, legacy);
@@ -248,6 +258,33 @@ const VaultPage = (props)=>{
 		</div>
 	);

+	const renderSortOption = (optionTitle, optionValue)=>{
+		const oppositeDir = dirState === 'asc' ? 'desc' : 'asc';
+
+		return (
+			<div className={`sort-option ${sortState === optionValue ? `active` : ''}`}>
+				<button onClick={()=>loadPage(1, false, optionValue, oppositeDir)}>
+					{optionTitle}
+				</button>
+				{sortState === optionValue && (
+					<i className={`sortDir fas ${dirState === 'asc' ? 'fa-sort-up' : 'fa-sort-down'}`} />
+				)}
+			</div>
+		);
+	};
+
+	const renderSortBar = ()=>{
+
+		return (
+			<div className='sort-container'>
+				{renderSortOption('Title', 'title', props.query.dir)}
+				{renderSortOption('Created Date', 'createdAt', props.query.dir)}
+				{renderSortOption('Updated Date', 'updatedAt', props.query.dir)}
+				{renderSortOption('Views', 'views', props.query.dir)}
+			</div>
+		);
+	};
+
 	const renderPaginationControls = ()=>{
 		if(!totalBrews) return null;

@@ -271,10 +308,8 @@ const VaultPage = (props)=>{
 			.map((_, index)=>(
 				<a
 					key={startPage + index}
-					className={`pageNumber ${
-						pageState === startPage + index ? 'currentPage' : ''
-					}`}
-					onClick={()=>loadPage(startPage + index, false)}
+					className={`pageNumber ${pageState === startPage + index ? 'currentPage' : ''}`}
+					onClick={()=>loadPage(startPage + index, false, sortState, dirState)}
 				>
 					{startPage + index}
 				</a>
@@ -284,7 +319,7 @@ const VaultPage = (props)=>{
 			<div className='paginationControls'>
 				<button
 					className='previousPage'
-					onClick={()=>loadPage(pageState - 1, false)}
+					onClick={()=>loadPage(pageState - 1, false, sortState, dirState)}
 					disabled={pageState === startPage}
 				>
 					<i className='fa-solid fa-chevron-left'></i>
@@ -293,7 +328,7 @@ const VaultPage = (props)=>{
 					{startPage > 1 && (
 						<a
 							className='pageNumber firstPage'
-							onClick={()=>loadPage(1, false)}
+							onClick={()=>loadPage(1, false, sortState, dirState)}
 						>
 							1 ...
 						</a>
@@ -302,7 +337,7 @@ const VaultPage = (props)=>{
 					{endPage < totalPages && (
 						<a
 							className='pageNumber lastPage'
-							onClick={()=>loadPage(totalPages, false)}
+							onClick={()=>loadPage(totalPages, false, sortState, dirState)}
 						>
 							... {totalPages}
 						</a>
@@ -310,7 +345,7 @@ const VaultPage = (props)=>{
 				</ol>
 				<button
 					className='nextPage'
-					onClick={()=>loadPage(pageState + 1, false)}
+					onClick={()=>loadPage(pageState + 1, false, sortState, dirState)}
 					disabled={pageState === totalPages}
 				>
 					<i className='fa-solid fa-chevron-right'></i>
@@ -385,6 +420,7 @@ const VaultPage = (props)=>{
 					<div className='form dataGroup'>{renderForm()}</div>

 					<div className='resultsContainer dataGroup'>
+						{renderSortBar()}
 						{renderFoundBrews()}
 					</div>
 				</SplitPane>
--- a/client/homebrew/pages/vaultPage/vaultPage.less
+++ b/client/homebrew/pages/vaultPage/vaultPage.less
@@ -6,8 +6,8 @@
 	*:not(input) { user-select : none; }

 	.content {
+		height     : 100%;
 		background : #2C3E50;
-		height: 100%;

 		.dataGroup {
 			width      : 100%;
@@ -27,9 +27,9 @@

 				code {
 					padding-inline : 5px;
+					font-family    : monospace;
 					background     : lightgrey;
 					border-radius  : 5px;
-					font-family    : monospace;
 				}

 				h1, h2, h3, h4 {
@@ -165,6 +165,48 @@
 					color       : white;
 				}

+				.sort-container {
+					display               : flex;
+					flex-wrap             : wrap;
+					column-gap            : 15px;
+					justify-content       : center;
+					height                : 30px;
+					color                 : white;
+					background-color      : #555555;
+					border-top            : 1px solid #666666;
+					border-bottom         : 1px solid #666666;
+					
+					.sort-option {
+						display     : flex;
+						align-items : center;
+						padding     : 0 8px;
+				
+						&:hover { background-color : #444444; }
+				
+						&.active {
+							background-color : #333333;
+				
+							button {
+								font-weight : 800;
+								color       : white;
+								
+								& + .sortDir { padding-left : 5px; }
+							}
+						}
+
+						button {
+							padding          : 0;
+							font-size        : 11px;
+							font-weight      : normal;
+							color            : #CCCCCC;
+							text-transform   : uppercase;
+							background-color : transparent;
+					
+							&:hover { background : none; }
+						}
+					}
+				}
+
 				.foundBrews {
 					position         : relative;
 					width            : 100%;
@@ -236,15 +278,15 @@
 						width            : 47%;
 						margin-right     : 40px;
 						color            : black;
-						isolation:isolate;
+						isolation        : isolate;
 						
-						&:after {
-							position:absolute;
-							inset:0;
-							display:block;
-							content:'';
+						&::after {
+							position         : absolute;
+							inset            : 0;
+							z-index          : -2;
+							display          : block;
+							content          : '';
 							background-image : url('/assets/parchmentBackground.jpg');
-							z-index:-1;
 						}

 						&:nth-child(even of .brewItem) { margin-right : 0; }
@@ -257,28 +299,24 @@
 							color       : var(--HB_Color_HeaderText);
 						}
 						.info {
+							position    : relative;
+							z-index     : 2;
 							font-family : 'ScalySansRemake';
 							font-size   : 1.2em;
-							position:relative;
-							z-index:2;

 							>span {
 								margin-right : 12px;
 								line-height  : 1.5em;
 							}
 						}
-						.links {
-							z-index:2;
-						}
+						.links { z-index : 2; }

 						hr {
-							margin: 0px;
-							visibility: hidden;
+							margin     : 0px;
+							visibility : hidden;
 						}

-						.thumbnail {
-							z-index:1;
-						}
+						.thumbnail { z-index : -1; }
 					}

 					.paginationControls {
--- a/config/default.json
+++ b/config/default.json
@@ -6,5 +6,7 @@
 	"enable_v3" : true,
 	"enable_themes" : true,
 	"local_environments" : ["docker", "local"],
-	"publicUrl" : "https://homebrewery.naturalcrit.com"
+	"publicUrl" : "https://homebrewery.naturalcrit.com",
+	"hb_images" : null,
+	"hb_fonts" : null
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -86,20 +86,20 @@
    ]
  },
  "dependencies": {
-    "@babel/core": "^7.25.2",
-    "@babel/plugin-transform-runtime": "^7.25.4",
-    "@babel/preset-env": "^7.25.4",
-    "@babel/preset-react": "^7.24.7",
+    "@babel/core": "^7.25.7",
+    "@babel/plugin-transform-runtime": "^7.25.7",
+    "@babel/preset-env": "^7.25.7",
+    "@babel/preset-react": "^7.25.7",
    "@googleapis/drive": "^8.14.0",
    "body-parser": "^1.20.2",
    "classnames": "^2.5.1",
    "codemirror": "^5.65.6",
-    "cookie-parser": "^1.4.6",
+    "cookie-parser": "^1.4.7",
    "create-react-class": "^15.7.0",
    "dedent-tabs": "^0.10.3",
-    "dompurify": "^3.1.6",
+    "dompurify": "^3.1.7",
    "expr-eval": "^2.0.2",
-    "express": "^4.21.0",
+    "express": "^4.21.1",
    "express-async-handler": "^1.2.0",
    "express-static-gzip": "2.1.8",
    "fs-extra": "11.2.0",
@@ -114,7 +114,7 @@
    "marked-smartypants-lite": "^1.0.2",
    "markedLegacy": "npm:marked@^0.3.19",
    "moment": "^2.30.1",
-    "mongoose": "^8.6.2",
+    "mongoose": "^8.7.0",
    "nanoid": "3.3.4",
    "nconf": "^0.12.1",
    "react": "^18.3.1",
@@ -126,16 +126,16 @@
    "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
  },
  "devDependencies": {
-    "@stylistic/stylelint-plugin": "^3.0.1",
-    "eslint": "^9.10.0",
+    "@stylistic/stylelint-plugin": "^3.1.1",
+    "eslint": "^9.12.0",
    "eslint-plugin-jest": "^28.8.3",
-    "eslint-plugin-react": "^7.36.1",
-    "globals": "^15.9.0",
+    "eslint-plugin-react": "^7.37.1",
+    "globals": "^15.10.0",
    "jest": "^29.7.0",
    "jest-expect-message": "^1.1.3",
    "postcss-less": "^6.0.0",
    "stylelint": "^16.9.0",
-    "stylelint-config-recess-order": "^5.1.0",
+    "stylelint-config-recess-order": "^5.1.1",
    "stylelint-config-recommended": "^14.0.1",
    "supertest": "^7.0.0"
  }
--- a/server/app.js
+++ b/server/app.js
@@ -8,6 +8,8 @@ const express = require('express');
 const yaml = require('js-yaml');
 const app = express();
 const config = require('./config.js');
+const fs = require('fs-extra');
+

 const { homebrewApi, getBrew, getUsersBrewThemes, getCSS } = require('./homebrew.api.js');
 const GoogleActions = require('./googleActions.js');
@@ -451,6 +453,10 @@ if(isLocalEnvironment){
 	});
 }

+// Add Static Local Paths
+app.use('/staticImages', express.static(config.get('hb_images') && fs.existsSync(config.get('hb_images')) ? config.get('hb_images') :'staticImages'));
+app.use('/staticFonts', express.static(config.get('hb_fonts')  && fs.existsSync(config.get('hb_fonts')) ? config.get('hb_fonts'):'staticFonts'));
+
 //Vault Page
 app.get('/vault', asyncHandler(async(req, res, next)=>{
 	req.ogMeta = { ...defaultMetaTags,
@@ -520,7 +526,7 @@ app.use(async (err, req, res, next)=>{
 	err.originalUrl = req.originalUrl;
 	console.error(err);

-	if(err.originalUrl?.startsWith('/api/')) {
+	if(err.originalUrl?.startsWith('/api')) {
 		// console.log('API error');
 		res.status(err.status || err.response?.status || 500).send(err);
 		return;
--- a/server/googleActions.js
+++ b/server/googleActions.js
@@ -172,7 +172,6 @@ const GoogleActions = {
 		})
 		.catch((err)=>{
 			console.log('Error saving to google');
-			console.error(err);
 			throw (err);
 		});

@@ -211,7 +210,6 @@ const GoogleActions = {
 		})
 		.catch((err)=>{
 			console.log('Error while creating new Google brew');
-			console.error(err);
 			throw (err);
 		});

--- a/server/homebrew.api.js
+++ b/server/homebrew.api.js
@@ -242,11 +242,8 @@ const api = {

 		let googleId, saved;
 		if(saveToGoogle) {
-			googleId = await api.newGoogleBrew(req.account, newHomebrew, res)
-				.catch((err)=>{
-					console.error(err);
-					res.status(err?.status || err?.response?.status || 500).send(err?.message || err);
-				});
+			googleId = await api.newGoogleBrew(req.account, newHomebrew, res);
+
 			if(!googleId) return;
 			api.excludeStubProps(newHomebrew);
 			newHomebrew.googleId = googleId;
@@ -351,19 +348,13 @@ const api = {
 			brew.googleId = undefined;
 		} else if(!brew.googleId && saveToGoogle) {
 			// If we don't have a google id and the user wants to save to google, create the google brew and set the google id on the brew
-			brew.googleId = await api.newGoogleBrew(req.account, api.excludeGoogleProps(brew), res)
-				.catch((err)=>{
-					console.error(err);
-					res.status(err.status || err.response.status).send(err.message || err);
-				});
+			brew.googleId = await api.newGoogleBrew(req.account, api.excludeGoogleProps(brew), res);
+
 			if(!brew.googleId) return;
 		} else if(brew.googleId) {
 			// If the google id exists and no other actions are being performed, update the google brew
-			const updated = await GoogleActions.updateGoogleBrew(api.excludeGoogleProps(brew))
-				.catch((err)=>{
-					console.error(err);
-					res.status(err?.response?.status || 500).send(err);
-				});
+			const updated = await GoogleActions.updateGoogleBrew(api.excludeGoogleProps(brew));
+
 			if(!updated) return;
 		}

--- a/server/homebrew.api.spec.js
+++ b/server/homebrew.api.spec.js
@@ -560,16 +560,6 @@ brew`);
 				views       : 0
 			});
 		});
-
-		it('should handle google error', async()=>{
-			google.newGoogleBrew = jest.fn(()=>{
-				throw 'err';
-			});
-			await api.newBrew({ body: { text: 'asdf', title: '' }, query: { saveToGoogle: true }, account: { username: 'test user' } }, res);
-
-			expect(res.status).toHaveBeenCalledWith(500);
-			expect(res.send).toHaveBeenCalledWith('err');
-		});
 	});

 	describe('deleteGoogleBrew', ()=>{
--- a/server/middleware/content-negotiation.js
+++ b/server/middleware/content-negotiation.js
@@ -1,12 +1,16 @@
+const config = require('../config.js');
+const nodeEnv = config.get('node_env');
+const isLocalEnvironment = config.get('local_environments').includes(nodeEnv);
+
 module.exports = (req, res, next)=>{
 	const isImageRequest = req.get('Accept')?.split(',')
        ?.filter((h)=>!h.includes('q='))
        ?.every((h)=>/image\/.*/.test(h));
-	if(isImageRequest) {
+	if(isImageRequest && !isLocalEnvironment && !req.url?.startsWith('/staticImages')) {
 		return res.status(406).send({
 			message : 'Request for image at this URL is not supported'
 		});
 	}

 	next();
-};
+};
--- a/server/vault.api.js
+++ b/server/vault.api.js
@@ -29,12 +29,18 @@ const rendererConditions = (legacy, v3)=>{
 	return {}; // If all renderers selected, renderer field not needed in query for speed
 };

+const sortConditions = (sort, dir) => {
+	return { [sort]: dir === 'asc' ? 1 : -1 };
+};
+
 const findBrews = async (req, res)=>{
 	const title  = req.query.title || '';
 	const author = req.query.author || '';
 	const page   = Math.max(parseInt(req.query.page)  || 1, 1);
 	const count  = Math.max(parseInt(req.query.count) || 20, 10);
 	const skip   = (page - 1) * count;
+	const sort = req.query.sort || 'title';
+	const dir = req.query.dir || 'asc';

 	const combinedQuery = {
 		$and : [
@@ -54,6 +60,7 @@ const findBrews = async (req, res)=>{
 	};

 	await HomebrewModel.find(combinedQuery, projection)
+		.sort(sortConditions(sort, dir))
 		.skip(skip)
 		.limit(count)
 		.maxTimeMS(5000)