Merge branch 'master' into Delete-Recent-Items

.circleci/config.yml

@@ -27,7 +27,7 @@ jobs:
           # fallback to using the latest cache if no exact match is found
           - v1-dependencies-
 
-      - node/install-npm
+      - run: sudo npm install -g npm@8.10.0
       - node/install-packages:
           app-dir: ~/homebrewery
           cache-path: node_modules
@@ -55,13 +55,13 @@ jobs:
           at: .
 
       # run tests!
-      - run: 
+      - run:
           name: Test - Basic
           command: npm run test:basic
-      - run: 
+      - run:
           name: Test - Mustache Spans
           command: npm run test:mustache-span
-      - run: 
+      - run:
           name: Test - Routes
           command: npm run test:route
 
@@ -71,4 +71,4 @@ workflows:
       - build
       - test:
           requires:
-            - build
+            - build

client/homebrew/homebrew.jsx

@@ -11,6 +11,7 @@ const SharePage = require('./pages/sharePage/sharePage.jsx');
 const NewPage = require('./pages/newPage/newPage.jsx');
 //const ErrorPage = require('./pages/errorPage/errorPage.jsx');
 const PrintPage = require('./pages/printPage/printPage.jsx');
+const AccountPage = require('./pages/accountPage/accountPage.jsx');
 
 const WithRoute = (props)=>{
 	const params = useParams();
@@ -61,24 +62,27 @@ const Homebrew = createClass({
 	},
 
 	render : function (){
-		return <Router location={this.props.url}>
+		return (
-			<div className='homebrew'>
+			<Router location={this.props.url}>
-				<Routes>
+				<div className='homebrew'>
-					<Route path='/edit/:id' element={<WithRoute el={EditPage} brew={this.props.brew} />} />
+					<Routes>
-					<Route path='/share/:id' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
+						<Route path='/edit/:id' element={<WithRoute el={EditPage} brew={this.props.brew} />} />
-					<Route path='/new/:id' element={<WithRoute el={NewPage} brew={this.props.brew} />} />
+						<Route path='/share/:id' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
-					<Route path='/new' element={<WithRoute el={NewPage}/>} />
+						<Route path='/new/:id' element={<WithRoute el={NewPage} brew={this.props.brew} />} />
-					<Route path='/user/:username' element={<WithRoute el={UserPage} brews={this.props.brews} />} />
+						<Route path='/new' element={<WithRoute el={NewPage}/>} />
-					<Route path='/print/:id' element={<WithRoute el={PrintPage} brew={this.props.brew} />} />
+						<Route path='/user/:username' element={<WithRoute el={UserPage} brews={this.props.brews} />} />
-					<Route path='/print' element={<WithRoute el={PrintPage} />} />
+						<Route path='/print/:id' element={<WithRoute el={PrintPage} brew={this.props.brew} />} />
-					<Route path='/changelog' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
+						<Route path='/print' element={<WithRoute el={PrintPage} />} />
-					<Route path='/faq' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
+						<Route path='/changelog' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
-					<Route path='/legacy' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
+						<Route path='/faq' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
-					<Route path='/' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
+						<Route path='/account' element={<WithRoute el={AccountPage} brew={this.props.brew} uiItems={this.props.brew.uiItems} />} />
-					<Route path='/*' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
+						<Route path='/legacy' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
-				</Routes>
+					  	<Route path='/' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
-			</div>
+					  	<Route path='/*' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
-		</Router>;
+					</Routes>
+				</div>
+			</Router>
+		);
 	}
 });
 

client/homebrew/navbar/account.navitem.jsx

@@ -76,6 +76,14 @@ const Account = createClass({
 				>
 					brews
 				</Nav.item>
+				<Nav.item
+					className='account'
+					color='orange'
+					icon='fas fa-user'
+					href='/account'
+				>
+					account
+				</Nav.item>
 				<Nav.item
 					className='logout'
 					color='red'

client/homebrew/pages/accountPage/accountPage.jsx

@@ -0,0 +1,71 @@
+const React = require('react');
+const createClass = require('create-react-class');
+const _     = require('lodash');
+const cx    = require('classnames');
+const moment = require('moment');
+
+const UIPage = require('../basePages/uiPage/uiPage.jsx');
+
+const Nav = require('naturalcrit/nav/nav.jsx');
+const Navbar = require('../../navbar/navbar.jsx');
+
+const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
+const Account = require('../../navbar/account.navitem.jsx');
+const NewBrew = require('../../navbar/newbrew.navitem.jsx');
+const HelpNavItem = require('../../navbar/help.navitem.jsx');
+
+const NaturalCritIcon = require('naturalcrit/svg/naturalcrit.svg.jsx');
+
+const AccountPage = createClass({
+	displayName     : 'AccountPage',
+	getDefaultProps : function() {
+		return {
+			brew    : {},
+			uiItems : {}
+		};
+	},
+	getInitialState : function() {
+		return {
+			uiItems : this.props.uiItems
+		};
+	},
+
+	renderNavItems : function() {
+		return <Navbar>
+			<Nav.section>
+				<NewBrew />
+				<HelpNavItem />
+				<RecentNavItem />
+				<Account />
+			</Nav.section>
+		</Navbar>;
+	},
+
+	renderUiItems : function() {
+		// console.log(this.props.uiItems);
+		return 	<>
+			<div className='dataGroup'>
+				<h1>Account Information  <i className='fas fa-user'></i></h1>
+				<p><strong>Username: </strong> {this.props.uiItems.username || 'No user currently logged in'}</p>
+				<p><strong>Last Login: </strong> {moment(this.props.uiItems.issued).format('dddd, MMMM Do YYYY, h:mm:ss a ZZ') || '-'}</p>
+			</div>
+			<div className='dataGroup'>
+				<h3>Homebrewery Information <NaturalCritIcon /></h3>
+				<p><strong>Brews on Homebrewery: </strong> {this.props.uiItems.mongoCount || '-'}</p>
+			</div>
+			<div className='dataGroup'>
+				<h3>Google Information <i className='fab fa-google-drive'></i></h3>
+				<p><strong>Linked to Google: </strong> {this.props.uiItems.googleId ? 'YES' : 'NO'}</p>
+				{this.props.uiItems.googleId ? <p><strong>Brews on Google Drive: </strong> {this.props.uiItems.fileCount || '-'}</p> : '' }
+			</div>
+		</>;
+	},
+
+	render : function(){
+		return <UIPage brew={this.props.brew}>
+			{this.renderUiItems()}
+		</UIPage>;
+	}
+});
+
+module.exports = AccountPage;

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

@@ -26,7 +26,29 @@
 				font-size  : 1.3em;
 				font-style : italic;
 			}
-
+			.brewCollection {
+				h1:hover{
+					cursor: pointer;
+				}
+				.active::before, .inactive::before {
+					font-family: 'Font Awesome 5 Free';
+					font-weight: 900;
+					font-size: 0.6cm;
+					padding-right: 0.5em;
+				}
+				.active {
+					color: var(--HB_Color_HeaderText);
+				}
+				.active::before {
+					content: '\f107';
+				}
+				.inactive {
+					color: #707070;
+				}
+				.inactive::before {
+					content: '\f105';
+				}
+			}
 		}
 	}
 	.sort-container{

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

@@ -0,0 +1,38 @@
+require('./uiPage.less');
+const React = require('react');
+const createClass = require('create-react-class');
+
+const Nav = require('naturalcrit/nav/nav.jsx');
+const Navbar = require('../../../navbar/navbar.jsx');
+const NewBrewItem = require('../../../navbar/newbrew.navitem.jsx');
+const HelpNavItem = require('../../../navbar/help.navitem.jsx');
+const RecentNavItem = require('../../../navbar/recent.navitem.jsx').both;
+const Account = require('../../../navbar/account.navitem.jsx');
+
+
+const UIPage = createClass({
+	displayName : 'UIPage',
+
+	render : function(){
+		return <div className='uiPage sitePage'>
+			<Navbar>
+				<Nav.section>
+					<Nav.item className='brewTitle'>{this.props.brew.title}</Nav.item>
+				</Nav.section>
+
+				<Nav.section>
+					<NewBrewItem />
+					<HelpNavItem />
+					<RecentNavItem />
+					<Account />
+				</Nav.section>
+			</Navbar>
+
+			<div className='content'>
+				{this.props.children}
+			</div>
+		</div>;
+	}
+});
+
+module.exports = UIPage;

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

@@ -0,0 +1,47 @@
+.uiPage{
+	.content{
+		overflow-y : hidden;
+		width : 90vw;
+		background-color: #f0f0f0;
+		font-family: 'Open Sans';
+		margin-left: auto;
+		margin-right: auto;
+		margin-top: 25px;
+		padding: 2% 4%;
+		font-size: 0.8em;
+		line-height: 1.8em;
+		.dataGroup{
+			padding: 6px 20px 15px;
+			border: 2px solid black;
+			border-radius: 5px;
+			margin: 5px 0px;
+		}
+		h1, h2, h3, h4{
+			font-weight: 900;
+			text-transform: uppercase;
+			margin: 0.5em 30% 0.25em 0;
+			border-bottom: 2px solid slategrey;
+		}
+		h1 {
+			font-size: 2em;
+			border-bottom: 2px solid darkslategrey;
+			margin-bottom: 0.5em;
+			margin-right: 0;
+		}
+		h2 {
+			font-size: 1.75em;
+		}
+		h3 {
+			font-size: 1.5em;
+			svg {
+				width: 19px;
+			}
+		}
+		h4 {
+			font-size: 1.25em;
+		}
+		strong {
+			font-weight: bold;
+		}
+	}
+}

client/homebrew/pages/editPage/editPage.jsx

@@ -78,7 +78,7 @@ const EditPage = createClass({
 
 		this.savedBrew = JSON.parse(JSON.stringify(this.props.brew)); //Deep copy
 
-		this.setState({ autoSave: JSON.parse(localStorage.getItem('AUTOSAVE_ON')) }, ()=>{
+		this.setState({ autoSave: JSON.parse(localStorage.getItem('AUTOSAVE_ON')) ?? true }, ()=>{
 			if(this.state.autoSave){
 				this.trySave();
 			} else {

client/template.js

@@ -1,28 +1,30 @@
-module.exports = async(name, title = '', props = {})=>{
+const template = async function(name, title='', props = {}){
-	const HOMEBREWERY_PUBLIC_URL=props.config.publicUrl;
+	const ogTags = [];
+	Object.entries(props.ogMeta).forEach(([key, value])=>{
+		if(!value) return;
+		const tag = `<meta property="og:${key}" content="${value}">`;
+		ogTags.push(tag);
+	});
+	const ogMetaTags = ogTags.join('\n');
 
-	return `
+	return `<!DOCTYPE html>
-<!DOCTYPE html>
+	<html>
-<html>
+		<head>
-	<head>
+			<link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
-		<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="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
+			<link href=${`/${name}/bundle.css`} rel='stylesheet' />
-		<link href=${`/${name}/bundle.css`} rel='stylesheet' />
+			<link rel="icon" href="/assets/favicon.ico" type="image/x-icon" />
-		<link rel="icon" href="/assets/favicon.ico" type="image/x-icon" />
+			${ogMetaTags}
-		<meta property="og:title" content="${props.brew?.title || 'Homebrewery - Untitled Brew'}">
+			<meta name="twitter:card" content="summary">
-		<meta property="og:url" content="${HOMEBREWERY_PUBLIC_URL}/${props.brew?.shareId ? `share/${props.brew.shareId}` : ''}">
+			<title>${title.length ? `${title} - The Homebrewery`: 'The Homebrewery - NaturalCrit'}</title>
-		<meta property="og:image" content="${props.brew?.thumbnail || `${HOMEBREWERY_PUBLIC_URL}/thumbnail.png`}">
+		</head>
-		<meta property="og:description" content="${props.brew?.description || 'No description.'}">
+		<body>
-		<meta property="og:site_name" content="The Homebrewery - Make your Homebrew content look legit!">
+			<main id="reactRoot">${require(`../build/${name}/ssr.js`)(props)}</main>
-		<meta property="og:type" content="article">
+			<script src=${`/${name}/bundle.js`}></script>
-		<meta name="twitter:card" content="summary">
+			<script>start_app(${JSON.stringify(props)})</script>
-		<title>${title.length ? `${title} - The Homebrewery`: 'The Homebrewery - NaturalCrit'}</title>
+		</body>
-	</head>
+	</html>
-	<body>
+	`;
-		<main id="reactRoot">${require(`../build/${name}/ssr.js`)(props)}</main>
-		<script src=${`/${name}/bundle.js`}></script>
-		<script>start_app(${JSON.stringify(props)})</script>
-	</body>
-</html>
-`;
 };
+
+module.exports = template;

package.json

@@ -65,22 +65,23 @@
     "express-async-handler": "^1.2.0",
     "express-static-gzip": "2.1.7",
     "fs-extra": "10.1.0",
-    "googleapis": "108.0.1",
+    "googleapis": "109.0.1",
     "js-yaml": "^4.1.0",
     "jwt-simple": "^0.5.6",
     "less": "^3.13.1",
     "lodash": "^4.17.21",
-    "marked": "4.1.1",
+    "marked": "4.2.2",
     "marked-extended-tables": "^1.0.5",
     "markedLegacy": "npm:marked@^0.3.19",
     "moment": "^2.29.4",
     "mongoose": "^6.7.0",
     "nanoid": "3.3.4",
     "nconf": "^0.12.0",
+    "npm": "^8.10.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-frame-component": "4.1.3",
-    "react-router-dom": "6.4.2",
+    "react-router-dom": "6.4.3",
     "sanitize-filename": "1.6.3",
     "superagent": "^6.1.0",
     "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"

server/app.js

@@ -1,4 +1,4 @@
-/*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
+/*eslint max-lines: ["warn", {"max": 400, "skipBlankLines": true, "skipComments": true}]*/
 // Set working directory to project root
 process.chdir(`${__dirname}/..`);
 
@@ -87,16 +87,32 @@ app.get('/', (req, res, next)=>{
 	req.brew = {
 		text     : welcomeText,
 		renderer : 'V3'
+	},
+
+	req.ogMeta = {
+		siteName    : 'The Homebrewery - Make your Homebrew content look legit!',
+		title       : 'Homepage',
+		description : 'Homepage',
+		thumbnail   : `${config.get('publicUrl')}/thumbnail.png`,
+		type        : 'website'
 	};
 	splitTextStyleAndMetadata(req.brew);
 	return next();
 });
 
-//Home page v3
+//Home page Legacy
 app.get('/legacy', (req, res, next)=>{
 	req.brew = {
 		text     : welcomeTextLegacy,
 		renderer : 'legacy'
+	},
+
+	req.ogMeta = {
+		siteName    : 'The Homebrewery - Make your Homebrew content look legit!',
+		title       : 'Homepage (Legacy)',
+		description : 'Homepage',
+		thumbnail   : `${config.get('publicUrl')}/thumbnail.png`,
+		type        : 'website'
 	};
 	splitTextStyleAndMetadata(req.brew);
 	return next();
@@ -107,6 +123,14 @@ app.get('/migrate', (req, res, next)=>{
 	req.brew = {
 		text     : migrateText,
 		renderer : 'V3'
+	},
+
+	req.ogMeta = {
+		siteName    : 'The Homebrewery - Make your Homebrew content look legit!',
+		title       : 'v3 Migration Guide',
+		description : 'A brief guide to converting Legacy documents to the v3 renderer.',
+		thumbnail   : `${config.get('publicUrl')}/thumbnail.png`,
+		type        : 'website'
 	};
 	splitTextStyleAndMetadata(req.brew);
 	return next();
@@ -118,6 +142,14 @@ app.get('/changelog', async (req, res, next)=>{
 		title    : 'Changelog',
 		text     : changelogText,
 		renderer : 'V3'
+	},
+
+	req.ogMeta = {
+		siteName    : 'The Homebrewery - Make your Homebrew content look legit!',
+		title       : 'Changelog',
+		description : 'Development changelog.',
+		thumbnail   : null,
+		type        : 'website'
 	};
 	splitTextStyleAndMetadata(req.brew);
 	return next();
@@ -129,7 +161,16 @@ app.get('/faq', async (req, res, next)=>{
 		title    : 'FAQ',
 		text     : faqText,
 		renderer : 'V3'
+	},
+
+	req.ogMeta = {
+		siteName    : 'The Homebrewery - Make your Homebrew content look legit!',
+		title       : 'FAQ',
+		description : 'Frequently Asked Questions',
+		thumbnail   : `${config.get('publicUrl')}/thumbnail.png`,
+		type        : 'website'
 	};
+
 	splitTextStyleAndMetadata(req.brew);
 	return next();
 });
@@ -167,6 +208,14 @@ app.get('/download/:id', asyncHandler(getBrew('share')), (req, res)=>{
 app.get('/user/:username', async (req, res, next)=>{
 	const ownAccount = req.account && (req.account.username == req.params.username);
 
+	req.ogMeta = {
+		siteName    : 'The Homebrewery - Make your Homebrew content look legit!',
+		title       : `${req.params.username}'s Collection`,
+		description : 'View my collection of homebrew on the Homebrewery.',
+		image       : null,
+		type        : 'website'  // or 'profile'?
+	};
+
 	const fields = [
 		'googleId',
 		'title',
@@ -224,6 +273,14 @@ app.get('/user/:username', async (req, res, next)=>{
 //Edit Page
 app.get('/edit/:id', asyncHandler(getBrew('edit')), (req, res, next)=>{
 	req.brew = req.brew.toObject ? req.brew.toObject() : req.brew;
+
+	req.ogMeta = {
+		siteName    : 'The Homebrewery - Make your Homebrew content look legit!',
+		title       : req.brew.title || 'Untitled Brew',
+		description : req.brew.description || 'No description.',
+		image       : req.brew.thumbnail || null,
+		type        : 'article'
+	};
 	sanitizeBrew(req.brew, 'edit');
 	splitTextStyleAndMetadata(req.brew);
 	res.header('Cache-Control', 'no-cache, no-store');	//reload the latest saved brew when pressing back button, not the cached version before save.
@@ -235,6 +292,13 @@ app.get('/new/:id', asyncHandler(getBrew('share')), (req, res, next)=>{
 	sanitizeBrew(req.brew, 'share');
 	splitTextStyleAndMetadata(req.brew);
 	req.brew.title = `CLONE - ${req.brew.title}`;
+	req.ogMeta = {
+		siteName    : 'The Homebrewery - Make your Homebrew content look legit!',
+		title       : 'New',
+		description : 'Start crafting your homebrew on the Homebrewery!',
+		image       : null,
+		type        : 'website'
+	};
 	return next();
 });
 
@@ -242,6 +306,14 @@ app.get('/new/:id', asyncHandler(getBrew('share')), (req, res, next)=>{
 app.get('/share/:id', asyncHandler(getBrew('share')), asyncHandler(async (req, res, next)=>{
 	const { brew } = req;
 
+	req.ogMeta = {
+		siteName    : 'The Homebrewery - Make your Homebrew content look legit!',
+		title       : req.brew.title || 'Untitled Brew',
+		description : req.brew.description || 'No description.',
+		image       : req.brew.thumbnail || null,
+		type        : 'article'
+	};
+
 	if(req.params.id.length > 12 && !brew._id) {
 		const googleId = req.params.id.slice(0, -12);
 		const shareId = req.params.id.slice(-12);
@@ -262,6 +334,54 @@ app.get('/print/:id', asyncHandler(getBrew('share')), (req, res, next)=>{
 	next();
 });
 
+//Account Page
+app.get('/account', asyncHandler(async (req, res, next)=>{
+	const data = {};
+	data.title = 'Account Information Page';
+
+	let auth;
+	let files;
+	if(req.account) {
+		if(req.account.googleId) {
+			try {
+				auth = await GoogleActions.authCheck(req.account, res);
+			} catch (e) {
+				auth = undefined;
+				console.log('Google auth check failed!');
+				console.log(e);
+			}
+			if(auth.credentials.access_token) {
+				try {
+					files = await GoogleActions.listGoogleBrews(auth);
+				} catch (e) {
+					files = undefined;
+					console.log('List Google files failed!');
+					console.log(e);
+				}
+			}
+		}
+
+		const query = { authors: req.account.username, googleId: { $exists: false } };
+		const brews = await HomebrewModel.find(query, 'id')
+			.catch((err)=>{
+				console.log(err);
+			});
+
+		data.uiItems = {
+			username   : req.account.username,
+			issued     : req.account.issued,
+			mongoCount : brews.length,
+			googleId   : Boolean(req.account.googleId),
+			authCheck  : Boolean(req.account.googleId && auth.credentials.access_token),
+			fileCount  : files?.length || '-'
+		};
+	}
+
+	req.brew = data;
+	return next();
+}));
+
+
 const nodeEnv = config.get('node_env');
 const isLocalEnvironment = config.get('local_environments').includes(nodeEnv);
 // Local only
@@ -276,8 +396,6 @@ if(isLocalEnvironment){
 	});
 }
 
-
-
 //Render the page
 const templateFn = require('./../client/template.js');
 app.use(asyncHandler(async (req, res, next)=>{
@@ -296,7 +414,8 @@ app.use(asyncHandler(async (req, res, next)=>{
 		account       : req.account,
 		enable_v3     : config.get('enable_v3'),
 		enable_themes : config.get('enable_themes'),
-		config        : configuration
+		config        : configuration,
+		ogMeta        : req.ogMeta
 	};
 	const title = req.brew ? req.brew.title : '';
 	const page = await templateFn('homebrew', title, props)

tests/routes/static-pages.test.js

@@ -9,8 +9,8 @@ describe('Tests for static pages', ()=>{
 		return app.get('/').expect(200);
 	});
 
-	it('Home page v3 works', ()=>{
+	it('Home page legacy works', ()=>{
-		return app.get('/v3_preview').expect(200);
+		return app.get('/legacy').expect(200);
 	});
 
 	it('Changelog page works', ()=>{