Upstream master into back cover snippet

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -4,7 +4,7 @@ const createClass = require('create-react-class');
 const _     = require('lodash');
 const cx    = require('classnames');	//Unused variable
 
-const DISMISS_KEY = 'dismiss_notification08-27-22';
+const DISMISS_KEY = 'dismiss_notification12-04-23';
 
 const NotificationPopup = createClass({
 	displayName     : 'NotificationPopup',
@@ -25,21 +25,14 @@ const NotificationPopup = createClass({
 			return (
 				<>
 					<li key='psa'>
-						<em>V3.2.0 Released!</em> <br />
-						We are happy to announce that after nearly a year of use by our many users,
-						we are making the V3 render mode the default setting for all new brews.
-						This mode has become quite popular, and has proven to be stable and powerful.
-						Of course, we will always keep the option to use the Legacy renderer for any
-						brew, which can still be accessed from the Properties menu.
-					</li>
-
-					<li key='stubs'>
-						<em>Change to Google Drive Storage!</em> <br />
-						We have made a change to the process of tranferring brews between Google
-						Drive and the Homebrewery storage. Starting now, any time a brew is
-						transferred, it will keep the same links instead of generating new ones!
-						We hope this change will help reduce issues where people "lost" their work
-						by trying to visit old links.
+						<em>Broken <b>CoverPage</b> snippet</em> <br />
+						Those of you who have been trying out our Cover Page snippet may
+						notice that the cover page no longer displays correctly. Due to some
+						small tweaks of this BETA feature, the CSS class has been renamed
+						from "coverPage" to "frontCover". Simply change the text to "frontCover"
+						and it should again function as before. Remember that any snippet
+						marked "beta" may have a similar change in the future as we
+						encounter any bugs or reworks.
 					</li>
 
 					<li key='googleDriveFolder'>

client/homebrew/navbar/error-navitem.jsx

@@ -82,4 +82,4 @@ const ErrorNavItem = createClass({
 	}
 });
 
-module.exports = ErrorNavItem;
+module.exports = ErrorNavItem;

client/homebrew/navbar/error-navitem.less

@@ -1,77 +1,75 @@
-.navItem {
-  &.error {
-    position         : relative;
-    background-color : @red;
-  }
+.navItem.error {
+  position         : relative;
+  background-color : @red;
+}
 
-  .errorContainer{
-    animation-name: glideDown;
-    animation-duration: 0.4s;
-    position         : absolute;
-    top              : 100%;
-    left             : 50%;
-    z-index          : 1000;
-    width            : 140px;
-    padding          : 3px;
-    color            : white;
+.errorContainer{
+  animation-name: glideDown;
+  animation-duration: 0.4s;
+  position         : absolute;
+  top              : 100%;
+  left             : 50%;
+  z-index          : 1000;
+  width            : 140px;
+  padding          : 3px;
+  color            : white;
+  background-color : #333;
+  border           : 3px solid #444;
+  border-radius    : 5px;
+  transform        : translate(-50% + 3px, 10px);
+  text-align       : center;
+  font-size        : 10px;
+  font-weight      : 800;
+  text-transform   : uppercase;
+  a{
+    color : @teal;
+  }
+  &:before {
+    content: "";
+    width: 0px;
+    height: 0px;
+    position: absolute;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid #444;
+    left: 53px;
+    top: -23px;
+  }
+  &:after {
+    content: "";
+    width: 0px;
+    height: 0px;
+    position: absolute;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid #333;
+    left: 53px;
+    top: -19px;
+  }
+  .deny {
+    width            : 48%;
+    margin           : 1px;
+    padding          : 5px;
     background-color : #333;
-    border           : 3px solid #444;
-    border-radius    : 5px;
-    transform        : translate(-50% + 3px, 10px);
-    text-align       : center;
-    font-size        : 10px;
-    font-weight      : 800;
-    text-transform   : uppercase;
-    a{
-      color : @teal;
-    }
-    &:before {
-      content: "";
-      width: 0px;
-      height: 0px;
-      position: absolute;
-      border-left: 10px solid transparent;
-      border-right: 10px solid transparent;
-      border-top: 10px solid transparent;
-      border-bottom: 10px solid #444;
-      left: 53px;
-      top: -23px;
-    }
-    &:after {
-      content: "";
-      width: 0px;
-      height: 0px;
-      position: absolute;
-      border-left: 10px solid transparent;
-      border-right: 10px solid transparent;
-      border-top: 10px solid transparent;
-      border-bottom: 10px solid #333;
-      left: 53px;
-      top: -19px;
-    }
-    .deny {
-      width            : 48%;
-      margin           : 1px;
-      padding          : 5px;
-      background-color : #333;
-      display          : inline-block;
-      border-left      : 1px solid #666;
-      .animate(background-color);
-      &:hover{
-        background-color : red;
-      }
-    }
-    .confirm {
-      width            : 48%;
-      margin           : 1px;
-      padding          : 5px;
-      background-color : #333;
-      display          : inline-block;
-      color            : white;
-      .animate(background-color);
-      &:hover{
-        background-color : teal;
-      }
+    display          : inline-block;
+    border-left      : 1px solid #666;
+    .animate(background-color);
+    &:hover{
+      background-color : red;
     }
   }
-}
+  .confirm {
+    width            : 48%;
+    margin           : 1px;
+    padding          : 5px;
+    background-color : #333;
+    display          : inline-block;
+    color            : white;
+    .animate(background-color);
+    &:hover{
+      background-color : teal;
+    }
+  }
+}

client/homebrew/navbar/metadata.navitem.jsx

@@ -0,0 +1,90 @@
+const React = require('react');
+const createClass = require('create-react-class');
+const _ = require('lodash');
+const Moment = require('moment');
+
+const Nav = require('naturalcrit/nav/nav.jsx');
+
+
+const MetadataNav = createClass({
+	displayName     : 'MetadataNav',
+	getDefaultProps : function() {
+		return {
+		};
+	},
+
+	getInitialState : function() {
+		return {
+			showMetaWindow : false
+		};
+	},
+
+	componentDidMount : function() {
+	},
+
+	toggleMetaWindow : function(){
+		this.setState((prevProps)=>({
+			showMetaWindow : !prevProps.showMetaWindow
+		}));
+	},
+
+	getAuthors : function(){
+		if(!this.props.brew.authors || this.props.brew.authors.length == 0) return 'No authors';
+		return <>
+			{this.props.brew.authors.map((author, idx, arr)=>{
+				const spacer = arr.length - 1 == idx ? <></> : <span>, </span>;
+				return <span key={idx}><a className='userPageLink' href={`/user/${author}`}>{author}</a>{spacer}</span>;
+			})}
+		</>;
+	},
+
+	getTags : function(){
+		if(!this.props.brew.tags || this.props.brew.tags.length == 0) return 'No tags';
+		return <>
+			{this.props.brew.tags.map((tag, idx)=>{
+				return <span className='tag' key={idx}>{tag}</span>;
+			})}
+		</>;
+	},
+
+	getSystems : function(){
+		if(!this.props.brew.systems || this.props.brew.systems.length == 0) return 'No systems';
+		return this.props.brew.systems.join(', ');
+	},
+
+	renderMetaWindow : function(){
+		return <div className={`window ${this.state.showMetaWindow ? 'active' : 'inactive'}`}>
+			<div className='row'>
+				<h4>Description</h4>
+				<p>{this.props.brew.description || 'No description.'}</p>
+			</div>
+			<div className='row'>
+				<h4>Authors</h4>
+				<p>{this.getAuthors()}</p>
+			</div>
+			<div className='row'>
+				<h4>Tags</h4>
+				<p>{this.getTags()}</p>
+			</div>
+			<div className='row'>
+				<h4>Systems</h4>
+				<p>{this.getSystems()}</p>
+			</div>
+			<div className='row'>
+				<h4>Updated</h4>
+				<p>{Moment(this.props.brew.updatedAt).fromNow()}</p>
+			</div>
+		</div>;
+	},
+
+	render : function(){
+		return <Nav.item icon='fas fa-info-circle' color='grey' className='metadata'
+			onClick={()=>this.toggleMetaWindow()}>
+			{this.props.children}
+			{this.renderMetaWindow()}
+		</Nav.item>;
+	}
+
+});
+
+module.exports = MetadataNav;

client/homebrew/navbar/navbar.less

@@ -28,7 +28,7 @@
 			width            : 250px;
 			margin           : 0;
 			padding          : 2px;
-			background-color : #444;
+			background-color : transparent;
 			font-family      : 'Open Sans', sans-serif;
 			font-size        : 12px;
 			font-weight      : 800;
@@ -49,11 +49,14 @@
 		}
 	}
 	.brewTitle.navItem{
+		height: 100%;
 		font-size      : 12px;
 		font-weight    : 800;
 		color          : white;
 		text-align     : center;
 		text-transform : initial;
+		flex-grow      : 1;
+		background-color: transparent;
 	}
 	.save-menu {
 		.dropdown {
@@ -140,7 +143,7 @@
 				}
 				&:hover{
 					background-color : @blue;
-					
+
 					.clear{
 						display       : grid;
 						place-content : center;
@@ -163,6 +166,87 @@
 			}
 		}
 	}
+	.metadata.navItem {
+		position : relative;
+		padding: 0;
+		align-items: center;
+		display  : flex;
+		flex-grow: 1;
+		height: 100%;
+		i{
+			margin-right: 10px;
+		}
+		.window{
+			position         : absolute;
+			bottom           : 0;
+			width            : 440px;
+			left             : 50%;
+			max-height       : ~"calc(100vh - 28px)";
+			background-color : #333;
+			border           : 3px solid #444;
+			border-top       : unset;
+			border-radius    : 0 0 5px 5px;
+			box-shadow       : inset 0 7px 9px -7px #111;
+			display          : flex;
+			flex-flow        : row wrap;
+			justify-content  : flex-start;
+			align-content    : baseline;
+			padding          : 0px 10px 5px;
+			margin           : 0 auto;
+			z-index          : -1;
+			transition       : transform 0.4s, opacity 0.4s;
+			&.active{
+				transform: translateX(-50%) translateY(100%);
+				opacity: 1;
+			}
+			&.inactive{
+				transform: translateX(-50%) translateY(0%);
+				opacity: 0;
+			}
+			.row{
+				display   : flex;
+				flex-flow : row wrap;
+				width     : 100%;
+				h4{
+					display          : block;
+					box-sizing       : border-box;
+					padding          : 5px 0px;
+					color            : #bbb;
+					text-align       : center;
+					flex-basis       : 20%;
+					flex-grow        : 1;
+					min-width        : 76px;
+				}
+				p{
+					font-family      : 'Open Sans', sans-serif;
+					font-size        : 10px;
+					font-weight      : normal;
+					text-transform 	 : initial;
+					padding          : 5px 0;
+					flex-basis       : 80%;
+					flex-grow        : 1;
+					.tag{
+						border           : 2px solid grey;
+						padding          : 2px;
+						margin           : 2px 2px;
+						display          : inline-block;
+						border-radius    : 5px;
+						background-color : #444;
+					}
+					a.userPageLink{
+						text-decoration: none;
+						color: white;
+						&:hover{
+							text-decoration: underline;
+						}
+					}
+				}
+				&:nth-of-type(even){
+					background-color: #555;
+				}
+			}
+		}
+	}
 	.warning.navItem{
 		position         : relative;
 		background-color : @orange;

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

@@ -16,6 +16,7 @@
 }
 .listPage{
 	.content{
+		z-index : 1;
 		.page{
 			.noColumns() !important; //Needed to override PHB Theme since this is on a lower @layer
 			&::after{
@@ -63,7 +64,7 @@
 		border-bottom         : 1px solid #666;
 		color              : white;
 		text-align         : center;
-		z-index            : 500;
+		z-index            : 1;
 		display            : flex;
 		justify-content    : center;
 		align-items        : baseline;

client/homebrew/pages/editPage/editPage.jsx

@@ -254,6 +254,15 @@ const EditPage = createClass({
 					</div>
 				</div>
 			}
+
+			{this.state.alertTrashedGoogleBrew &&
+				<div className='errorContainer' onClick={this.closeAlerts}>
+				This brew is currently in your Trash folder on Google Drive!<br />If you want to keep it, make sure to move it before it is deleted permanently!<br />
+					<div className='confirm'>
+						OK
+					</div>
+				</div>
+			}
 		</Nav.item>;
 	},
 
@@ -335,16 +344,6 @@ const EditPage = createClass({
 		const shareLink = this.processShareId();
 
 		return <Navbar>
-
-			{this.state.alertTrashedGoogleBrew &&
-				<div className='errorContainer' onClick={this.closeAlerts}>
-				This brew is currently in your Trash folder on Google Drive!<br />If you want to keep it, make sure to move it before it is deleted permanently!<br />
-					<div className='confirm'>
-						OK
-					</div>
-				</div>
-			}
-
 			<Nav.section>
 				<Nav.item className='brewTitle'>{this.state.brew.title}</Nav.item>
 			</Nav.section>

client/homebrew/pages/sharePage/sharePage.jsx

@@ -5,6 +5,7 @@ const { Meta } = require('vitreum/headtags');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
+const MetadataNav = require('../../navbar/metadata.navitem.jsx');
 const PrintLink = require('../../navbar/print.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 const Account = require('../../navbar/account.navitem.jsx');
@@ -50,8 +51,10 @@ const SharePage = createClass({
 		return <div className='sharePage sitePage'>
 			<Meta name='robots' content='noindex, nofollow' />
 			<Navbar>
-				<Nav.section>
-					<Nav.item className='brewTitle'>{this.props.brew.title}</Nav.item>
+				<Nav.section className='titleSection'>
+					<MetadataNav brew={this.props.brew}>
+						<Nav.item className='brewTitle'>{this.props.brew.title}</Nav.item>
+					</MetadataNav>
 				</Nav.section>
 
 				<Nav.section>

client/homebrew/pages/sharePage/sharePage.less

@@ -1,4 +1,8 @@
 .sharePage{
+	.navContent .navSection.titleSection {
+		flex-grow: 1;
+		justify-content: center;
+	}
 	.content{
 		overflow-y : hidden;
 	}

client/icons/book-inside-cover.svg

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 704.00001 512"
+   version="1.1"
+   id="svg22127"
+   sodipodi:docname="book-inside-cover.svg"
+   width="704"
+   height="512"
+   inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
+   inkscape:export-filename="InsideCover3.png"
+   inkscape:export-xdpi="300"
+   inkscape:export-ydpi="300"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs22131" />
+  <sodipodi:namedview
+     id="namedview22129"
+     pagecolor="#ffffff"
+     bordercolor="#111111"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="0.47274833"
+     inkscape:cx="83.55397"
+     inkscape:cy="178.74204"
+     inkscape:window-width="1920"
+     inkscape:window-height="991"
+     inkscape:window-x="-9"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg22127" />
+  <!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+  <path
+     id="path2161-6"
+     style="color:#000000;fill:#000000;stroke-width:1;-inkscape-stroke:none;paint-order:stroke fill markers"
+     d="M 208,0 C 147.0078,0 94.429433,14.25071 60.367188,26.66992 23.520854,39.96036 0,76.16076 0,112.95896 v 317.8321 c 0,59.8499 56.949847,92.6546 107.47266,76.6035 l -0.1543,0.049 c 26.46715,-8.335 74.84649,-18.3965 100.68164,-18.3965 17.25807,0 61.31688,10.6183 85.14453,18.8438 l 0.0508,0.018 0.0527,0.018 c 19.82627,6.5858 40.84117,4.9222 58.99804,-3.0762 18.04267,7.8799 38.84257,9.6126 58.33594,3.1328 l 0.13672,-0.045 0.13672,-0.047 c 23.88445,-8.0588 67.88646,-18.8437 85.14453,-18.8437 25.83515,0 74.22549,10.0266 100.68164,18.3964 l 0.1543,0.049 0.15625,0.049 C 647.13371,523.05316 704,490.64216 704,430.79226 v -317.8321 c 0,-36.8274 -23.49583,-72.8235 -60.00977,-86.25583 l -0.16015,-0.0606 -0.16211,-0.0566 C 609.79193,14.33005 557.11269,0.0012 496,0.0012 434.5671,0.0012 387.12553,14.01354 352,34.94261 316.87446,14.01344 269.4331,0.0012 208,0.0012 Z m 0,32.00977 c 58.3999,0 103.40004,18.89469 123,33.63279 3.3,2.4564 5,6.4246 5,10.3926 v 356.5508 c 0,10.7702 -11.70041,18.2326 -22.40039,14.6426 -26.59996,-8.9751 -71.69966,-22.2012 -105.59961,-22.2012 -38.49993,0 -88.40045,11.4317 -119.900391,21.3516 C 76.799621,449.96896 64,442.03166 64,430.78906 V 80.94726 C 64,69.51586 70.799631,58.93546 82.099609,54.87306 110.29956,44.57516 157.50009,32.00977 208,32.00977 Z m 288,0 c 50.49991,0 97.70044,12.56619 125.90039,22.76949 C 633.20037,58.93616 640,69.51586 640,80.94726 v 349.8418 c 0,11.2426 -12.79963,19.0854 -24.09961,15.5899 -31.49995,-9.9199 -81.40046,-21.3516 -119.90039,-21.3516 -33.89995,0 -78.99966,13.2261 -105.59961,22.2012 C 379.60041,450.81856 368,443.35616 368,432.58596 V 76.03516 c 0,-3.968 1.60001,-7.9362 5,-10.3926 19.59997,-14.7381 64.6001,-33.63279 123,-33.63279 z M 335.52734,45.75386 c -0.1289,0.093 -0.23137,0.2032 -0.35937,0.2969 -0.198,0.1477 -0.428,0.2796 -0.625,0.4278 z m 33.67969,0.5372 0.24805,0.1875 c -0.0427,-0.033 -0.0937,-0.061 -0.13672,-0.094 -0.0393,-0.03 -0.0713,-0.064 -0.11133,-0.094 z" />
+  <path
+     style="color:#000000;fill:#000000;fill-opacity:1;stroke-width:1;-inkscape-stroke:none"
+     d="m 206.76992,184 c -36.98368,0 -73.07301,9.2343 -94.76923,16.9066 v 185.1887 c 27.62799,-7.7405 62.70503,-15.0804 94.76923,-15.0804 28.33376,0 58.16312,7.6425 81.23077,14.806 V 203.0154 C 273.60322,195.1776 243.44241,184 206.76992,184 Z"
+     id="path4372-8"
+     sodipodi:nodetypes="sccsccs" />
+  <path
+     style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:63.9999;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="m 255.99995,122.53007 c -31.8285,-15.342 -80.43462,-15.4137 -112,0"
+     id="path2371-6"
+     sodipodi:nodetypes="cc" />
+</svg>

client/icons/customIcons.less

@@ -40,6 +40,9 @@
 .book-back-cover {
   content: url('../icons/book-back-cover.svg');
 }
+.book-inside-cover {
+  content: url('../icons/book-inside-cover.svg');
+}
 .davek {
   content: url('../icons/Davek.svg');
 }