Merge branch 'master' into master

client/homebrew/homebrew.jsx

@@ -1,8 +1,8 @@
 require('./homebrew.less');
 const React = require('react');
 const createClass = require('create-react-class');
-const { StaticRouter:Router, Switch, Route } = require('react-router-dom');
+const { StaticRouter:Router } = require('react-router-dom/server');
-const queryString = require('query-string');
+const { Route, Routes, useParams, useSearchParams } = require('react-router-dom');
 
 const HomePage = require('./pages/homePage/homePage.jsx');
 const EditPage = require('./pages/editPage/editPage.jsx');
@@ -12,6 +12,19 @@ const NewPage = require('./pages/newPage/newPage.jsx');
 //const ErrorPage = require('./pages/errorPage/errorPage.jsx');
 const PrintPage = require('./pages/printPage/printPage.jsx');
 
+const WithRoute = (props)=>{
+	const params = useParams();
+	const searchParams = useSearchParams();
+	const Element = props.el;
+	const allProps = {
+		...props,
+		...params,
+		...searchParams,
+		el : undefined
+	};
+	return <Element {...allProps} />;
+};
+
 const Homebrew = createClass({
 	displayName     : 'Homebrewery',
 	getDefaultProps : function() {
@@ -43,25 +56,24 @@ const Homebrew = createClass({
 	},
 
 	render : function (){
-		return (
+		return <Router location={this.props.url}>
-			<Router location={this.props.url}>
+			<div className='homebrew'>
-				<div className='homebrew'>
+				<Routes>
-					<Switch>
+					<Route path='/edit/:id' element={<WithRoute el={EditPage} brew={this.props.brew} />} />
-						<Route path='/edit/:id' component={(routeProps)=><EditPage id={routeProps.match.params.id} brew={this.props.brew} />}/>
+					<Route path='/share/:id' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
-						<Route path='/share/:id' component={(routeProps)=><SharePage id={routeProps.match.params.id} brew={this.props.brew} />}/>
+					<Route path='/new/:id' element={<WithRoute el={NewPage} brew={this.props.brew} />} />
-						<Route path='/new/:id' component={(routeProps)=><NewPage id={routeProps.match.params.id} brew={this.props.brew} />}/>
+					<Route path='/new' element={<WithRoute el={NewPage}/>} />
-						<Route path='/new' exact component={(routeProps)=><NewPage />}/>
+					<Route path='/user/:username' element={<WithRoute el={UserPage} brews={this.props.brews} />} />
-						<Route path='/user/:username' component={(routeProps)=><UserPage username={routeProps.match.params.username} brews={this.props.brews} query={queryString.parse(routeProps.location.search)}/>}/>
+					<Route path='/print/:id' element={<WithRoute el={PrintPage} brew={this.props.brew} />} />
-						<Route path='/print/:id' component={(routeProps)=><PrintPage brew={this.props.brew} query={queryString.parse(routeProps.location.search)} />}/>
+					<Route path='/print' element={<WithRoute el={PrintPage} />} />
-						<Route path='/print' exact component={(routeProps)=><PrintPage query={queryString.parse(routeProps.location.search)} />}/>
+					<Route path='/changelog' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
-						<Route path='/changelog' exact component={()=><SharePage brew={this.props.brew} />}/>
+					<Route path='/faq' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
-						<Route path='/faq' exact component={()=><SharePage brew={this.props.brew} />}/>
+					<Route path='/v3_preview' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
-						<Route path='/v3_preview' exact component={()=><HomePage brew={this.props.brew} />}/>
+					<Route path='/' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
-						<Route path='/' component={()=><HomePage brew={this.props.brew} />}/>
+					<Route path='/*' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
-					</Switch>
+				</Routes>
-				</div>
+			</div>
-			</Router>
+		</Router>;
-		);
 	}
 });
 

client/template.js

@@ -8,7 +8,7 @@ module.exports = async(name, title = '', props = {})=>{
 		<link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
 		<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
 		<link href=${`/${name}/bundle.css`} rel='stylesheet' />
-		<link rel="icon" href="/assets/homebrew/favicon.ico" type="image/x-icon" />
+		<link rel="icon" href="/assets/favicon.ico" type="image/x-icon" />
 		<meta property="og:title" content="${props.brew?.title || 'Homebrewery - Untitled Brew'}">
 		<meta property="og:url" content="${HOMEBREWERY_PUBLIC_URL}/${props.brew?.shareId ? `share/${props.brew.shareId}` : ''}">
 		<meta property="og:image" content="${props.brew?.thumbnail || `${HOMEBREWERY_PUBLIC_URL}/thumbnail.png`}">

package.json

@@ -74,20 +74,19 @@
     "marked-extended-tables": "^1.0.3",
     "markedLegacy": "npm:marked@^0.3.19",
     "moment": "^2.29.3",
-    "mongoose": "^6.3.8",
+    "mongoose": "^6.4.0",
     "nanoid": "3.3.4",
     "nconf": "^0.12.0",
-    "query-string": "7.1.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-frame-component": "4.1.3",
-    "react-router-dom": "5.3.0",
+    "react-router-dom": "6.3.0",
     "sanitize-filename": "1.6.3",
     "superagent": "^6.1.0",
     "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
   },
   "devDependencies": {
-    "eslint": "^8.17.0",
+    "eslint": "^8.18.0",
     "eslint-plugin-react": "^7.30.0",
     "jest": "^28.1.1",
     "supertest": "^6.2.3"

scripts/buildHomebrew.js

@@ -26,6 +26,7 @@ const build = async ({ bundle, render, ssr })=>{
 	await fs.outputFile('./build/homebrew/ssr.js', ssr);
 	await fs.copy('./themes/fonts', './build/fonts');
 	await fs.copy('./themes/assets', './build/assets');
+	await fs.copy('./client/homebrew/favicon.ico', './build/assets/favicon.ico');
 	let src = './themes/5ePhbLegacy.style.less';
 	//Parse brew theme files
 	less.render(fs.readFileSync(src).toString(), {

themes/5ePhb.style.less

@@ -603,8 +603,8 @@ body {
 		white-space : nowrap;
 	}
 	&.frame {
-		margin-top          : 0.66cm;
+		margin-top          : 0.7cm;
-		margin-bottom       : 1.05cm;
+		margin-bottom       : 0.9cm;
 		margin-left         : -0.1cm;
 		margin-right        : -0.1cm;
 		width               : calc(100% + 0.2cm);
@@ -612,11 +612,14 @@ body {
 		background-color    : white;
 		border              : initial;
 		border-style        : solid;
-		border-image-outset : 0.55cm 0.3cm;
+		border-image-outset : 0.4cm 0.3cm;
 		border-image-repeat : stretch;
 		border-image-slice  : 200;
 		border-image-source : @frameBorderImage;
 		border-image-width  : 47px;
+		&.wide:first-child {
+			margin-top: 0.12cm;
+		}
 	}
 	&.decoration {
 		position:relative;