Merge branch 'master' into v3.19.0

Bump eslint from 9.26.0 to 9.27.0

.circleci/config.yml

@@ -64,9 +64,6 @@ jobs:
       - run:
           name: Test - Mustache Spans
           command: npm run test:mustache-syntax
-      - run:
-          name: Test - Definition Lists
-          command: npm run test:definition-lists
       - run:
           name: Test - Hard Breaks
           command: npm run test:hard-breaks

changelog.md

@@ -88,24 +88,70 @@ pre {
 ## changelog
 For a full record of development, visit our [Github Page](https://github.com/naturalcrit/homebrewery).
 
-### Tuesday 03/18/2025 - v3.18.1
+### Thursday 05/22/2025 - v3.19.0
 
 {{taskList
+##### abquintic
+* [x] Fix crash due to colons after `\page`
+
+Fixes issue [#4105](https://github.com/naturalcrit/homebrewery/issues/4105)
+
+* [x] Fix images with spaces in alt text not rendering
+
+Fixes issue [#3659](https://github.com/naturalcrit/homebrewery/issues/3659)
+
+* [x] Custom snippets! Open the new {{openSans **:fas_table_list: SNIPPETS**}} tab (next to the {{openSans **:fas_paintbrush: STYLE**}} tab). Custom snippets will appear in a new snippet dropdown, and will be included when imported as a custom theme.
+
+* [x] Move several generic styles/snippets from PHB to the Blank theme; generic snippets like image masks no longer require the PHB theme.
+
+* [x] Extract several Markdown+ syntax extensions into their own NPM packages, for use by the wider community.
+
+* [x] Allow `\pagebreak` and `\columnbreak` as alternatives to `\page` and `\column`
+
+Partially fixes issue [#4035](https://github.com/naturalcrit/homebrewery/issues/4035)
+
+* [x] Fix misbehaving column breaks on old Chrome
+
+Fixes issue [#4192](https://github.com/naturalcrit/homebrewery/issues/4192)
+
+* [x] Self-host font-awesome icons; fix missing icons on local installs
+
+Fixes issue [#1965](https://github.com/naturalcrit/homebrewery/issues/1965)
+Fixes issue [#1548](https://github.com/naturalcrit/homebrewery/issues/1548)
+
 ##### G-Ambatte
-* [x] Revert colon rendering from br elements to blank divs
+* [x] Fix CORS issue on local installs
+
+* [x] Fix print size issues when using the Facing and Flow view options.
+
+Fixes issue [#4146](https://github.com/naturalcrit/homebrewery/issues/4146)
+
+* [x] New built-in `$[HB_pageNumber]` variable. Works with math operations or can be reassigned like any other variable for more customization over the old `{{pageNumber,auto}}` snippet.\
+New snippet found at {{openSans **:fas_pencil: TEXT EDITOR :fas_arrow_right: :fas_bookmark: PAGE NUMBERING :fas_arrow_right: :fas_arrow_down_1_9: VARIABLE AUTO PAGE NUMBER**}}
 
 ##### 5e-Cleric
-* [x] Allow for local connections within a same network when running a local version
-Fixes issue [#4094](https://github.com/naturalcrit/homebrewery/issues/4094)
+* [x] Fix search bar covering up snippet bar
+
+Fixes issue [#4098](https://github.com/naturalcrit/homebrewery/issues/4098)
+
+* [x] Save view toolbar settings across sessions
+
+Fixes issue [#3835](https://github.com/naturalcrit/homebrewery/issues/3835)
+
+* [x] Fix styling issues on the view toolbar
+
+* [x] Update the Darkbrewery editor theme
+
+Fixes issue [#3312](https://github.com/naturalcrit/homebrewery/issues/3312)
 
-* [x] Add US Letter size page snippet
-Fixes issue [#3893](https://github.com/naturalcrit/homebrewery/issues/3893)
 }}
 
+\page
+
 ### Monday 03/10/2025 - v3.18.0
 
 {{taskList
-##### dbolack
+##### abquintic
 * [x] Add ability to paste in any Share ID/URL into a brew's {{openSans :fas_circle_info: **Properties** :fas_arrow_right: **THEMES**}} selection, as long as that brew has been tagged as `meta:theme`. You can now share your custom brew themes without needing to make a personal copy.
 * [x] Begin migration of custom Markdown extensions into their own NPM packages, for easier adoption by other users or projects
 * [x] Fix external HTML appearing in open codeblocks
@@ -167,7 +213,7 @@ Fixes issue [#4073](https://github.com/naturalcrit/homebrewery/issues/4073)
 
 * [x] Fix Reddit link crash when title has non-latin chars
 
-##### dbolack
+##### abquintic
 
 * [x] Fix page shadows toolbar option
 

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -19,12 +19,11 @@ const { printCurrentBrew } = require('../../../shared/helpers.js');
 import HeaderNav from './headerNav/headerNav.jsx';
 import { safeHTML } from './safeHTML.js';
 
-const PAGEBREAK_REGEX_V3 = /^(?=\\page(?: *{[^\n{}]*})?$)/m;
+const PAGEBREAK_REGEX_V3 = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m;
 const PAGE_HEIGHT = 1056;
 
 const INITIAL_CONTENT = dedent`
 	<!DOCTYPE html><html><head>
-	<link href="//use.fontawesome.com/releases/v6.5.1/css/all.css" rel="stylesheet" type="text/css" />
 	<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
 	<link href='/homebrew/bundle.css' type="text/css" rel='stylesheet' />
 	<base target=_blank>
@@ -117,6 +116,13 @@ const BrewRenderer = (props)=>{
 		pageShadows  : true
 	});
 
+	//useEffect to store or gather toolbar state from storage
+	useEffect(()=>{
+		const toolbarState = JSON.parse(window.localStorage.getItem('hb_toolbarState'));
+		console.log('toolbar state:', toolbarState);
+		toolbarState &&	setDisplayOptions(toolbarState);
+	}, []);
+
 	const [headerState, setHeaderState] = useState(false);
 
 	const mainRef  = useRef(null);
@@ -196,6 +202,9 @@ const BrewRenderer = (props)=>{
 				pageText = pageText.includes('\n') ? pageText.substring(pageText.indexOf('\n') + 1) : ''; // Remove the \page line
 			}
 
+			// DO NOT REMOVE!!! REQUIRED FOR BACKWARDS COMPATIBILITY WITH NON-UPGRADABLE VERSIONS OF CHROME.
+			pageText += `\n\n&nbsp;\n\\column\n&nbsp;`; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
+
 			const html = Markdown.render(pageText, index);
 
 			return <BrewPage className={classes} index={index} key={index} contents={html} style={styles} attributes={attributes} onVisibilityChange={handlePageVisibilityChange} />;
@@ -271,6 +280,7 @@ const BrewRenderer = (props)=>{
 
 	const handleDisplayOptionsChange = (newDisplayOptions)=>{
 		setDisplayOptions(newDisplayOptions);
+		localStorage.setItem('hb_toolbarState', JSON.stringify(newDisplayOptions));
 	};
 
 	const pagesStyle = {

client/homebrew/brewRenderer/brewRenderer.less

@@ -68,12 +68,16 @@
 @media print {
 	.toolBar { display : none; }
 	.brewRenderer {
-		height      : 100%;
-		padding-top : unset;
-		overflow-y  : unset;
+		height     : 100%;
+		padding    : unset;
+		overflow-y : unset;
+		&:has(.facing, .flow) {
+			padding : unset;
+		}
 		.pages {
-			margin : 0px;
-			zoom   : 100% !important;
+			margin  : 0px;
+			zoom    : 100% !important;
+			display : block;
 			& > .page { box-shadow : unset; }
 		}
 	}

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -20,6 +20,11 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 		setPageNum(pageRange);
 	}, [visiblePages]);
 
+	useEffect(()=>{
+		const visibility = localStorage.getItem('hb_toolbarVisibility') === 'true';
+		setToolsVisible(visibility);
+	}, []);
+
 	const handleZoomButton = (zoom)=>{
 		handleOptionChange('zoomLevel', _.round(_.clamp(zoom, MIN_ZOOM, MAX_ZOOM)));
 	};
@@ -55,15 +60,30 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 			// find widest page, in case pages are different widths, so that the zoom is adapted to not cut the widest page off screen.
 			const widestPage = _.maxBy([...pages], 'offsetWidth').offsetWidth;
 
-			desiredZoom = (iframeWidth / widestPage) * 100;
+			if(displayOptions.spread === 'facing')
+				desiredZoom = (iframeWidth / ((widestPage * 2) + parseInt(displayOptions.columnGap))) * 100;
+			else
+				desiredZoom = (iframeWidth / (widestPage + 20)) * 100;
 
 		} else if(mode == 'fit'){
-			let minDimRatio;
 			// find the page with the largest single dim (height or width) so that zoom can be adapted to fit it.
-			if(displayOptions.spread === 'facing')
-				minDimRatio = [...pages].reduce((minRatio, page)=>Math.min(minRatio, iframeWidth / page.offsetWidth / 2), Infinity);    // if 'facing' spread, fit two pages in view
+			let minDimRatio;
+			if(displayOptions.spread === 'active')
+				minDimRatio = [...pages].reduce(
+					(minRatio, page)=>Math.min(minRatio,
+						iframeWidth / page.offsetWidth,
+						iframeHeight / page.offsetHeight
+					),
+					Infinity
+				);
 			else
-				minDimRatio = [...pages].reduce((minRatio, page)=>Math.min(minRatio, iframeWidth / page.offsetWidth, iframeHeight / page.offsetHeight), Infinity);
+				minDimRatio = [...pages].reduce(
+					(minRatio, page)=>Math.min(minRatio,
+						iframeWidth / ((page.offsetWidth * 2) + parseInt(displayOptions.columnGap)),
+						iframeHeight / page.offsetHeight
+					),
+					Infinity
+				);
 
 			desiredZoom = minDimRatio * 100;
 		}
@@ -77,7 +97,10 @@ 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={()=>{setToolsVisible(!toolsVisible);}}><i className='fas fa-glasses' /></button>
+				<button title={`${toolsVisible ? 'Hide' : 'Show'} Preview Toolbar`} onClick={()=>{
+					setToolsVisible(!toolsVisible);
+					localStorage.setItem('hb_toolbarVisibility', !toolsVisible);
+				}}><i className='fas fa-glasses' /></button>
 				<button title={`${headerState ? 'Hide' : 'Show'} Header Navigation`} onClick={()=>{setHeaderState(!headerState);}}><i className='fas fa-rectangle-list' /></button>
 			</div>
 			{/*v=====----------------------< Zoom Controls >---------------------=====v*/}
@@ -167,11 +190,11 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 						<h1>Options</h1>
 						<label title='Modify the horizontal space between pages.'>
 							Column gap
-							<input type='range' min={0} max={200} defaultValue={10} className='range-input' onChange={(evt)=>handleOptionChange('columnGap', evt.target.value)} />
+							<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.'>
 							Row gap
-							<input type='range' min={0} max={200} defaultValue={10} className='range-input' onChange={(evt)=>handleOptionChange('rowGap', evt.target.value)} />
+							<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.'>
 							Start on right

client/homebrew/brewRenderer/toolBar/toolBar.less

@@ -6,12 +6,12 @@
 	box-sizing       : border-box;
 	display          : flex;
 	flex-wrap        : wrap;
-	gap              : 8px 30px;
+	gap              : 8px 20px;
 	align-items      : center;
 	justify-content  : center;
 	width            : 100%;
 	height           : auto;
-	padding          : 2px 0;
+	padding          : 2px 10px 2px 90px;
 	font-family      : 'Open Sans', sans-serif;
 	font-size        : 13px;
 	color            : #CCCCCC;
@@ -153,7 +153,7 @@
 		align-items      : center;
 		justify-content  : center;
 		width            : auto;
-		min-width        : 46px;
+		min-width        : 40px;
 		height           : 100%;
 		&:hover { background-color : #444444; }
 		&:focus {outline : none; border  : 1px solid #D3D3D3;}
@@ -169,7 +169,7 @@
 		width            : 92px;
 		overflow         : hidden;
 		background-color : unset;
-		opacity          : 0.5;
+		opacity          : 0.7;
 		transition       : all 0.3s ease;
 		& > *:not(.toggleButton) {
 			opacity    : 0;
@@ -183,7 +183,10 @@
 	left      : 0;
 	z-index   : 5;
 	display   : flex;
-	width     : 32px;
-	min-width : unset;
 	height    : 100%;
+
+	button i {
+		filter: drop-shadow(0 0 2px black) drop-shadow(0 0 1px black);
+
+	}
 }

client/homebrew/editor/editor.jsx

@@ -12,7 +12,7 @@ const MetadataEditor = require('./metadataEditor/metadataEditor.jsx');
 
 const EDITOR_THEME_KEY = 'HOMEBREWERY-EDITOR-THEME';
 
-const PAGEBREAK_REGEX_V3 = /^(?=\\page(?: *{[^\n{}]*})?$)/m;
+const PAGEBREAK_REGEX_V3 = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m;
 const SNIPPETBREAK_REGEX_V3 = /^\\snippet\ .*$/;
 const SNIPPETBAR_HEIGHT  = 25;
 const DEFAULT_STYLE_TEXT = dedent`
@@ -211,7 +211,7 @@ const Editor = createClass({
 
 					// New Codemirror styling for V3 renderer
 					if(this.props.renderer === 'V3') {
-						if(line.match(/^\\column$/)){
+						if(line.match(/^\\column(?:break)?$/)){
 							codeMirror.addLineClass(lineNumber, 'text', 'columnSplit');
 						}
 

client/homebrew/editor/editor.less

@@ -110,6 +110,7 @@
 
 }
 
-@container editor (width < 553px) {
+@container editor (width < 683px) {
 	.editor .codeEditor .CodeMirror { height : calc(100% - 51px);}
+	.homePage .editor .codeEditor .CodeMirror { height : calc(100% - 25px);}
 }

client/homebrew/editor/snippetbar/snippetbar.less

@@ -51,7 +51,7 @@
 				&.meta {
 					.tooltipLeft('Properties');
 				}
-				&.snip {
+				&.snippet {
 					.tooltipLeft('Snippets');
 				}
 				&.undo {
@@ -93,7 +93,7 @@
 				&.editorTheme {
 					.tooltipLeft('Editor Themes');
 					font-size : 0.75em;
-					color     : black;
+					color     : inherit;
 					&.active {
 						position         : relative;
 						background-color : #999999;

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

@@ -64,7 +64,7 @@
 		border-radius    : 4px;
 		&::before {
 			margin-right : 3px;
-			font-family  : 'Font Awesome 5 Free';
+			font-family  : 'Font Awesome 6 Free';
 			font-size    : 12px;
 		}
 		&.type {

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

@@ -30,7 +30,7 @@
 				h1:hover { cursor : pointer; }
 				.active::before, .inactive::before {
 					padding-right : 0.5em;
-					font-family   : 'Font Awesome 5 Free';
+					font-family   : 'Font Awesome 6 Free';
 					font-size     : 0.6cm;
 					font-weight   : 900;
 				}
@@ -130,12 +130,12 @@
 			border-radius  : 3px;
 			&::before {
 				margin-right : 3px;
-				font-family  : 'Font Awesome 5 Free';
+				font-family  : 'Font Awesome 6 Free';
 				font-size    : 12px;
 			}
 			&::after {
 				margin-left : 3px;
-				font-family : 'Font Awesome 5 Free';
+				font-family : 'Font Awesome 6 Free';
 				font-size   : 12px;
 				content     : '\f00d';
 			}

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

@@ -28,7 +28,7 @@
 						background-color : #00000077;
 						&::before {
 							margin-right : 5px;
-							font-family  : 'FONT AWESOME 5 FREE';
+							font-family  : 'Font Awesome 6 Free';
 							content      : '\f00c';
 						}
 					}

client/template.js

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

font-awesome-source/README.md

@@ -0,0 +1,3 @@
+# About
+
+Run `deploy.bash` to download, extract, and deploy the font awesome files into place for building. Should only be needed when  Font Awesome version changes and we want the new version.

font-awesome-source/deploy.bash

@@ -0,0 +1,42 @@
+#!/bin/bash
+
+# Deploys the Font Awesome files for HB self-hosting to settle various issues.
+
+THEURL=https://use.fontawesome.com/releases/v6.7.2/fontawesome-free-6.7.2-web.zip
+THEFILE=fontawesome-free-6.7.2-web.zip
+if [ ! "$(which wget)" ]; then
+   echo "Please manually download ${THEURL}"
+   exit -1
+fi
+
+wget ${THEURL}
+if [ $? -ne 0 ]; then
+  echo "Error downloading ${THEURL}"
+  exit -2
+fi
+
+if [ ! "$(which unzip)" ]; then
+  echo "Please unzip the file with your tool of choice."
+  exit -3
+fi
+
+unzip fontawesome-free-6.7.2-web.zip
+if [ $? -ne 0 ]; then
+  echo "Error extracting ${THEFILE}"
+fi
+
+echo "Copying fonts"
+cp -rv  fontawesome-free-*-web/webfonts/*.woff2 ../themes/fonts/iconFonts
+echo "Copying and updating css"
+
+echo "fontawesome-free.less"
+sed  's/..\/webfonts/\/fonts\/iconFonts/g' fontawesome-free-*-web/css/fontawesome.css > ../themes/fonts/iconFonts/fontawesome-free.less
+
+echo "fontawesome-solid.less"
+sed  's/..\/webfonts/\/fonts\/iconFonts/g' fontawesome-free-*-web/css/solid.css > ../themes/fonts/iconFonts/fontawesome-solid.less
+
+echo "fontawesome-brands.less"
+sed  's/..\/webfonts/\/fonts\/iconFonts/g' fontawesome-free-*-web/css/brands.css > ../themes/fonts/iconFonts/fontawesome-brands.less
+
+echo "fontawesome-regular.less"
+sed  's/..\/webfonts/\/fonts\/iconFonts/g' fontawesome-free-*-web/css/regular.css > ../themes/fonts/iconFonts/fontawesome-regular.less

package.json

@@ -1,7 +1,7 @@
 {
   "name": "homebrewery",
   "description": "Create authentic looking D&D homebrews using only markdown",
-  "version": "3.18.1",
+  "version": "3.19.0",
   "type": "module",
   "engines": {
     "npm": "^10.8.x",
@@ -36,7 +36,6 @@
     "test:mustache-syntax:inline": "jest \".*(mustache-syntax).*\" -t '^Inline:.*' --verbose --noStackTrace",
     "test:mustache-syntax:block": "jest \".*(mustache-syntax).*\" -t '^Block:.*' --verbose --noStackTrace",
     "test:mustache-syntax:injection": "jest \".*(mustache-syntax).*\" -t '^Injection:.*' --verbose --noStackTrace",
-    "test:definition-lists": "jest tests/markdown/definition-lists.test.js --verbose --noStackTrace",
     "test:hard-breaks": "jest tests/markdown/hard-breaks.test.js --verbose --noStackTrace",
     "test:non-breaking-spaces": "jest tests/markdown/non-breaking-spaces.test.js --verbose --noStackTrace",
     "test:emojis": "jest tests/markdown/emojis.test.js --verbose --noStackTrace",
@@ -84,16 +83,17 @@
     ]
   },
   "dependencies": {
-    "@babel/core": "^7.26.10",
-    "@babel/plugin-transform-runtime": "^7.26.10",
-    "@babel/preset-env": "^7.26.9",
-    "@babel/preset-react": "^7.26.3",
-    "@googleapis/drive": "^11.0.0",
+    "@babel/core": "^7.27.1",
+    "@babel/plugin-transform-runtime": "^7.27.1",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/runtime": "^7.27.1",
+    "@googleapis/drive": "^12.1.0",
     "body-parser": "^2.2.0",
     "classnames": "^2.5.1",
     "codemirror": "^5.65.6",
     "cookie-parser": "^1.4.7",
-    "core-js": "^3.41.0",
+    "core-js": "^3.42.0",
     "cors": "^2.8.5",
     "create-react-class": "^15.7.0",
     "dedent-tabs": "^0.10.3",
@@ -102,48 +102,49 @@
     "express-async-handler": "^1.2.0",
     "express-static-gzip": "2.2.0",
     "fs-extra": "11.3.0",
-    "idb-keyval": "^6.2.1",
+    "idb-keyval": "^6.2.2",
     "js-yaml": "^4.1.0",
     "jwt-simple": "^0.5.6",
     "less": "^3.13.1",
     "lodash": "^4.17.21",
-    "marked": "15.0.8",
+    "marked": "15.0.12",
+    "marked-alignment-paragraphs": "^1.0.0",
+    "marked-definition-lists": "^1.0.1",
     "marked-emoji": "^2.0.0",
     "marked-extended-tables": "^2.0.1",
     "marked-gfm-heading-id": "^4.0.1",
-    "marked-alignment-paragraphs": "^1.0.0",
     "marked-nonbreaking-spaces": "^1.0.1",
     "marked-smartypants-lite": "^1.0.3",
     "marked-subsuper-text": "^1.0.3",
     "markedLegacy": "npm:marked@^0.3.19",
     "moment": "^2.30.1",
-    "mongoose": "^8.13.2",
+    "mongoose": "^8.14.3",
     "nanoid": "5.1.5",
-    "nconf": "^0.12.1",
+    "nconf": "^0.13.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-frame-component": "^4.1.3",
-    "react-router": "^7.5.0",
+    "react-router": "^7.6.0",
     "romans": "^3.0.0",
     "sanitize-filename": "1.6.3",
-    "superagent": "^10.2.0",
+    "superagent": "^10.2.1",
     "vitreum": "git+https://git@github.com/calculuschild/vitreum.git",
     "written-number": "^0.11.1"
   },
   "devDependencies": {
     "@stylistic/stylelint-plugin": "^3.1.2",
     "babel-plugin-transform-import-meta": "^2.3.2",
-    "eslint": "^9.24.0",
+    "eslint": "^9.27.0",
     "eslint-plugin-jest": "^28.11.0",
     "eslint-plugin-react": "^7.37.5",
-    "globals": "^16.0.0",
+    "globals": "^16.1.0",
     "jest": "^29.7.0",
     "jest-expect-message": "^1.1.3",
     "jsdom-global": "^3.0.2",
     "postcss-less": "^6.0.0",
-    "stylelint": "^16.18.0",
+    "stylelint": "^16.19.1",
     "stylelint-config-recess-order": "^6.0.0",
     "stylelint-config-recommended": "^16.0.0",
-    "supertest": "^7.1.0"
+    "supertest": "^7.1.1"
   }
 }

server/app.js

@@ -433,7 +433,7 @@ app.get('/new', asyncHandler(async(req, res, next)=>{
 app.get('/share/:id', asyncHandler(getBrew('share')), asyncHandler(async (req, res, next)=>{
 	const { brew } = req;
 	req.ogMeta = { ...defaultMetaTags,
-		title       : req.brew.title || 'Untitled Brew',
+		title       : `${req.brew.title || 'Untitled Brew'} - ${req.brew.authors[0] || 'No author.'}`,
 		description : req.brew.description || 'No description.',
 		image       : req.brew.thumbnail || defaultMetaTags.image,
 		type        : 'article'

shared/naturalcrit/markdown.js

@@ -4,12 +4,13 @@ import _                        from 'lodash';
 import { Parser as MathParser } from 'expr-eval';
 import { marked as Marked }     from 'marked';
 import MarkedExtendedTables     from 'marked-extended-tables';
+import MarkedDefinitionLists    from 'marked-definition-lists';
+import MarkedAlignedParagraphs  from 'marked-alignment-paragraphs';
+import MarkedNonbreakingSpaces  from 'marked-nonbreaking-spaces';
+import MarkedSubSuperText       from 'marked-subsuper-text';
 import { markedSmartypantsLite as MarkedSmartypantsLite }                                from 'marked-smartypants-lite';
 import { gfmHeadingId as MarkedGFMHeadingId, resetHeadings as MarkedGFMResetHeadingIDs } from 'marked-gfm-heading-id';
 import { markedEmoji as MarkedEmojis }                                                   from 'marked-emoji';
-import MarkedAlignedParagraphs 														                               from 'marked-alignment-paragraphs';
-import MarkedNonbreakingSpaces                                                           from 'marked-nonbreaking-spaces';
-import MarkedSubSuperText from 'marked-subsuper-text';
 import { romanize } from 'romans';
 import writtenNumber from 'written-number';
 
@@ -410,93 +411,6 @@ const forcedParagraphBreaks = {
 	}
 };
 
-const definitionListsSingleLine = {
-	name  : 'definitionListsSingleLine',
-	level : 'block',
-	start(src) { return src.match(/\n[^\n]*?::[^\n]*/m)?.index; }, // Hint to Marked.js to stop and check for a match
-	tokenizer(src, tokens) {
-		const regex = /^([^\n]*?)::([^\n]*)(?:\n|$)/ym;
-		let match;
-		let endIndex = 0;
-		const definitions = [];
-		while (match = regex.exec(src)) {
-			const originalLine = match[0];											// This line and below to handle conflict with emojis
-			let firstLine = originalLine;											// Remove in V4 when definitionListsInline updated to
-			this.lexer.inlineTokens(firstLine.trim())					// require spaces around `::`
-				.filter((t)=>t.type == 'emoji')
-				.map((emoji)=>firstLine = firstLine.replace(emoji.raw, 'x'.repeat(emoji.raw.length)));
-
-			const newMatch = /^([^\n]*?)::([^\n]*)(?:\n|$)/ym.exec(firstLine);
-			if(newMatch) {
-				definitions.push({
-					dt : this.lexer.inlineTokens(originalLine.slice(0, newMatch[1].length).trim()),
-					dd : this.lexer.inlineTokens(originalLine.slice(newMatch[1].length + 2).trim())
-				});
-			}																									// End of emoji hack.
-			endIndex = regex.lastIndex;
-		}
-		if(definitions.length) {
-			return {
-				type : 'definitionListsSingleLine',
-				raw  : src.slice(0, endIndex),
-				definitions
-			};
-		}
-	},
-	renderer(token) {
-		return `<dl>${token.definitions.reduce((html, def)=>{
-			return `${html}<dt>${this.parser.parseInline(def.dt)}</dt>`
-			            + `<dd>${this.parser.parseInline(def.dd)}</dd>\n`;
-		}, '')}</dl>`;
-	}
-};
-
-const definitionListsMultiLine = {
-	name  : 'definitionListsMultiLine',
-	level : 'block',
-	start(src) { return src.match(/\n[^\n]*\n::[^:\n]/m)?.index; },  // Hint to Marked.js to stop and check for a match
-	tokenizer(src, tokens) {
-		const regex = /(\n?\n?(?!::)[^\n]+?(?=\n::[^:\n]))|\n::([^:\n](?:.|\n)*?(?=(?:\n::)|(?:\n\n)|$))/y;
-		let match;
-		let endIndex = 0;
-		const definitions = [];
-		while (match = regex.exec(src)) {
-			if(match[1]) {
-				if(this.lexer.blockTokens(match[1].trim())[0]?.type !== 'paragraph') // DT must not be another block-level token besides <p>
-					break;
-				definitions.push({
-					dt  : this.lexer.inlineTokens(match[1].trim()),
-					dds : []
-				});
-			}
-			if(match[2] && definitions.length) {
-				definitions[definitions.length - 1].dds.push(
-					this.lexer.inlineTokens(match[2].trim().replace(/\s/g, ' '))
-				);
-			}
-			endIndex = regex.lastIndex;
-		}
-		if(definitions.length) {
-			return {
-				type : 'definitionListsMultiLine',
-				raw  : src.slice(0, endIndex),
-				definitions
-			};
-		}
-	},
-	renderer(token) {
-		let returnVal = `<dl>`;
-		token.definitions.forEach((def)=>{
-			const dds = def.dds.map((s)=>{
-				return `\n<dd>${this.parser.parseInline(s).trim()}</dd>`;
-			}).join('');
-			returnVal += `<dt>${this.parser.parseInline(def.dt)}</dt>${dds}\n`;
-		});
-		returnVal = returnVal.trim();
-		return `${returnVal}</dl>`;
-	}
-};
-
 //v=====--------------------< Variable Handling >-------------------=====v// 242 lines
 const replaceVar = function(input, hoist=false, allowUnresolved=false) {
 	const regex = /([!$]?)\[((?!\s*\])(?:\\.|[^\[\]\\])+)\]/g;
@@ -765,8 +679,8 @@ const tableTerminators = [
 ];
 
 Marked.use(MarkedVariables());
-Marked.use({ extensions : [definitionListsMultiLine, definitionListsSingleLine, forcedParagraphBreaks,
-	mustacheSpans, mustacheDivs, mustacheInjectInline] });
+Marked.use(MarkedDefinitionLists());
+Marked.use({ extensions : [forcedParagraphBreaks, mustacheSpans, mustacheDivs, mustacheInjectInline] });
 Marked.use(mustacheInjectBlock);
 Marked.use(MarkedAlignedParagraphs());
 Marked.use(MarkedSubSuperText());
@@ -911,7 +825,7 @@ const Markdown = {
 			MarkedGFMResetHeadingIDs();
 		}
 
-		rawBrewText = rawBrewText.replace(/^\\column$/gm, `\n<div class='columnSplit'></div>\n`);
+		rawBrewText = rawBrewText.replace(/^\\column(?:break)?$/gm, `\n<div class='columnSplit'></div>\n`);
 
 		const opts = Marked.defaults;
 

themes/V3/Blank/style.less

@@ -52,7 +52,7 @@ body { counter-reset : page-numbers 0; }
 	width                  : 215.9mm;
 	height                 : 279.4mm;
 	padding                : 1.4cm 1.9cm 1.7cm;
-	overflow               : hidden;
+	overflow               : clip;
 	background-color       : var(--HB_Color_Background);
 	text-rendering         : optimizeLegibility;
 	contain                : strict;

themes/codeMirror/customThemes/darkbrewery-v301.css

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

themes/codeMirror/customThemes/darkbrewery.css

@@ -0,0 +1,134 @@
+/*stylelint-disable*/
+.editor .snippetBar {
+	color: white;
+	background-color: #2F393C;
+	.dropdown {
+		background-color: #2F393C;
+	}
+	.editors {
+		border-color: #ccc;
+	}
+}
+/* Main BG color and normal text color */
+.CodeMirror {
+	--bg: #293134;
+	--highlight: #bcbcbc;
+	color: #91A6AA;
+	background: var(--bg);
+	.CodeMirror-scroll {
+		.CodeMirror-gutters {
+			border-right: 1px solid #555;
+			background: var(--bg);
+			.CodeMirror-gutter {
+				background-color: var(--bg);
+				&.CodeMirror-foldgutter {
+					cursor: pointer;
+					border-left: 1px solid #555;
+					transition: background 0.1s;
+					&:hover {
+						background: #555;
+					}
+				}
+			}
+		}
+		.CodeMirror-lines {
+			/* Line numbers*/
+			.CodeMirror-linenumber.CodeMirror-gutter-elt {
+				background-color: var(--bg);
+				color: #81969A;
+			}
+			/* Blinking cursor */
+			.CodeMirror-cursor {
+				border-left: 1px solid #E0E2E4;
+			}
+			.pageLine {
+				color: #000000;
+				background: #000000;
+				border-bottom: 1px solid #FFFFFF;
+			}
+			.CodeMirror-code .CodeMirror-line {
+				&.columnSplit {
+					font-style: italic;
+					color: inherit;
+					background-color: #1F5763;
+					border-bottom: #229999 solid 1px;
+				}
+				/*syntax*/
+				.cm-header {
+					font-weight: bold;
+					color: #C51B1B;
+					-webkit-text-stroke-width: 0.1px;
+					-webkit-text-stroke-color: #000000;
+				}
+				.cm-strong {
+					color: #309DD2;
+				}
+				.cm-em {
+					/*italics*/
+				}
+				.cm-link {
+					color: #DD6300;
+				}
+				.cm-string {
+					color: #AA8261;
+				}
+				/* @import */
+				.cm-def {
+					color: #2986CC;
+				}
+				/* Bullets and such */
+				.cm-variable-2 {
+					color: #3CBF30;
+				}
+				.block:not(.cm-comment) {
+					color: #E3E3E3;
+				}
+				.inline-block {
+					color: #E3E3E3;
+				}
+				.cm-tag {
+					color: #E3FF00;
+				}
+				.cm-attribute {
+					color: #E3FF00;
+				}
+				.cm-atom {
+					color: #c1939a;
+				}
+				.cm-number {
+					color: #2986CC;
+				}
+				.cm-property:not(.cm-error) ~ .cm-variable {
+					color:#9e1f9e;
+				}
+				.cm-qualifier {
+					color: #EE1919;
+				}
+				.cm-comment {
+					color: #BBC700;
+				}
+				.cm-keyword {
+					color: white;
+				}
+				.cm-error {
+					color: #C50202;
+				}
+				.CodeMirror-foldmarker {
+					color: #F0FF00;
+				}
+				.cm-builtin {
+					color: #FFFFFF;
+				}
+				.dt-highlight {
+					background: #ffffff14;
+				}
+				.dl-colon-highlight {
+					background: #ccc;
+				}
+				.dl-highlight.dd-highlight {
+					color: #b5858d;
+				}
+			}
+		}
+	}
+}

themes/codeMirror/editorThemes.json

@@ -15,7 +15,7 @@
 "cobalt",
 "colorforth",
 "darcula",
-"darkbrewery-v301",
+"darkbrewery",
 "darkvision",
 "dracula",
 "duotone-dark",

themes/fonts/iconFonts/fontAwesome.less

@@ -1,2 +1,10 @@
+@import (less) "./themes/fonts/iconFonts/fontawesome-free.less";
+@import (less) "./themes/fonts/iconFonts/fontawesome-solid.less";
+@import (less) "./themes/fonts/iconFonts/fontawesome-brands.less";
+@import (less) "./themes/fonts/iconFonts/fontawesome-regular.less";
+
+
 /* Icon Font: Font Awesome */
-.far,.fas,.fab { display : inline; }
+.far,.fas,.fab { display : inline; }
+
+

themes/fonts/iconFonts/fontawesome-regular.less

@@ -0,0 +1,19 @@
+/*!
+ * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+:root, :host {
+  --fa-style-family-classic: 'Font Awesome 6 Free';
+  --fa-font-regular: normal 400 1em/1 'Font Awesome 6 Free'; }
+
+@font-face {
+  font-family: 'Font Awesome 6 Free';
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url("/fonts/iconFonts/fa-regular-400.woff2") format("woff2"), url("/fonts/iconFonts/fa-regular-400.ttf") format("truetype"); }
+
+.far,
+.fa-regular {
+  font-weight: 400; }

themes/fonts/iconFonts/fontawesome-solid.less

@@ -0,0 +1,19 @@
+/*!
+ * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+:root, :host {
+  --fa-style-family-classic: 'Font Awesome 6 Free';
+  --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free'; }
+
+@font-face {
+  font-family: 'Font Awesome 6 Free';
+  font-style: normal;
+  font-weight: 900;
+  font-display: block;
+  src: url("/fonts/iconFonts/fa-solid-900.woff2") format("woff2"), url("/fonts/iconFonts/fa-solid-900.ttf") format("truetype"); }
+
+.fas,
+.fa-solid {
+  font-weight: 900; }