Update Production (#1249)

* Legacy renderer (#1184) * Include two versions of Marked.js * Include two versions of Marked.js * Working two different render pipelines Adds stylesheet "styleLegacy.less" Adds markdownHandler "markdownLegacy.js" The BrewRenderer will switch between these and the new pipeline dependent on the "version" prop passed in. * Mustache-style div blocks * Legacy snippets & columnbreak * Codemirror styling for Div Blocks * Lint * Codemirror highlights for inline Divs as well These will turn red `{{class Content}}` Multi-line divs will turn purple ``` {{class,class2 content }} ``` No real need for these to be different colors. Just for testing. * More lint * Update dependencies. * Adding Button to switch render pipelines * Update Marked.js * Popup alert to refresh page when renderer changed * Don't compress files in Development (very slow) * Block DIV or inline Span depending on {{ placement * \column emits a Div instead of Span * Allow share page to use new renderer * {{ divs no longer need empty lines. Spans work in lists. * Typo * Typo * Enforce \page must be at start of line. Code cleanup. * Inject newlines after/before {{/}} to avoid needing blank lines * Fixes issues with tables. * Remove console.log * Fix spacing issue for Spans * Move things from Brewrenderer to Markdown Try to keep all custom text fiddling in one spot. * Rename variables * Update Font-Awesome to v5.15. Fix style issues on popups. * Update {{ Divs/Spans, Fix nested hilighting * Fixed Spans/divs with no tags or just commas * Use blacklist for {{ to allow more characters * Update package-lock.json * Update all icons to Font-awesome 5 * V3 hidden behind config variable Add "globalThis.enable_v3 = true" in the console to enable. * lint * Legacy renderer (#1229) * Include two versions of Marked.js * Include two versions of Marked.js * Working two different render pipelines Adds stylesheet "styleLegacy.less" Adds markdownHandler "markdownLegacy.js" The BrewRenderer will switch between these and the new pipeline dependent on the "version" prop passed in. * Mustache-style div blocks * Legacy snippets & columnbreak * Codemirror styling for Div Blocks * Lint * Codemirror highlights for inline Divs as well These will turn red `{{class Content}}` Multi-line divs will turn purple ``` {{class,class2 content }} ``` No real need for these to be different colors. Just for testing. * More lint * Update dependencies. * Adding Button to switch render pipelines * Update Marked.js * Popup alert to refresh page when renderer changed * Don't compress files in Development (very slow) * Block DIV or inline Span depending on {{ placement * \column emits a Div instead of Span * Allow share page to use new renderer * {{ divs no longer need empty lines. Spans work in lists. * Typo * Typo * Enforce \page must be at start of line. Code cleanup. * Inject newlines after/before {{/}} to avoid needing blank lines * Fixes issues with tables. * Remove console.log * Fix spacing issue for Spans * Move things from Brewrenderer to Markdown Try to keep all custom text fiddling in one spot. * Rename variables * Update Font-Awesome to v5.15. Fix style issues on popups. * Update {{ Divs/Spans, Fix nested hilighting * Fixed Spans/divs with no tags or just commas * Use blacklist for {{ to allow more characters * Update package-lock.json * Update all icons to Font-awesome 5 * V3 hidden behind config variable Add "globalThis.enable_v3 = true" in the console to enable. * lint * Give user styles higher priority to still allow overrides * Apply style priority to *all* user styles * Change .legacy .v3 to .phb, .phb3 * Revert accidental color change * Fix brew styles overwriting each other. (#1230) * Fix /page not working in legacy mode. (#1233) * Fix brew styles overwriting each other. * Word wrapping, start fixing spacing on Title letter * Fix \page in legacy brews when not at line start * Default 'legacy' if not set. Auto-change styles. * Fix brew styles overwriting each other. * Word wrapping, start fixing spacing on Title letter * Fix \page in legacy brews when not at line start * Fix Page Padding * Set 'legacy' as default value if not set in brew saved file. * Apply Legacy\v3 renderer to print page (#1235)
2026-01-04 19:02:38 +00:00 · 2021-02-19 17:47:56 -05:00
parent 6a2e39355c
commit d57df84a59
53 changed files with 2068 additions and 190 deletions
--- a/client/homebrew/pages/editPage/editPage.jsx
+++ b/client/homebrew/pages/editPage/editPage.jsx
@@ -41,17 +41,18 @@ const EditPage = createClass({
 				tags        : '',
 				published   : false,
 				authors     : [],
-				systems     : []
+				systems     : [],
+				renderer    : 'legacy'
 			}
 		};
 	},

 	getInitialState : function() {
 		return {
-			brew : this.props.brew,
-
+			brew                  : this.props.brew,
 			isSaving              : false,
 			isPending             : false,
+			alertRenderChange     : false,
 			saveGoogle            : this.props.brew.googleId ? true : false,
 			confirmGoogleTransfer : false,
 			errors                : null,
@@ -66,6 +67,8 @@ const EditPage = createClass({
 			url : window.location.href
 		});

+		this.savedBrew = JSON.parse(JSON.stringify(this.props.brew)); //Deep copy
+
 		this.trySave();
 		window.onbeforeunload = ()=>{
 			if(this.state.isSaving || this.state.isPending){
@@ -101,6 +104,11 @@ const EditPage = createClass({
 	},

 	handleMetadataChange : function(metadata){
+		if(metadata.renderer != this.savedBrew.renderer){
+			this.setState({
+				alertRenderChange : true
+			});
+		}
 		this.setState((prevState)=>({
 			brew      : _.merge({}, prevState.brew, metadata),
 			isPending : true,
@@ -122,8 +130,7 @@ const EditPage = createClass({
 	},

 	hasChanges : function(){
-		const savedBrew = this.savedBrew ? this.savedBrew : this.props.brew;
-		return !_.isEqual(this.state.brew, savedBrew);
+		return !_.isEqual(this.state.brew, this.savedBrew);
 	},

 	trySave : function(){
@@ -142,6 +149,12 @@ const EditPage = createClass({
 		this.clearErrors();
 	},

+	closeAlerts : function(){
+		this.setState({
+			alertRenderChange : false
+		});
+	},
+
 	toggleGoogleStorage : function(){
 		this.setState((prevState)=>({
 			saveGoogle : !prevState.saveGoogle,
@@ -294,7 +307,7 @@ const EditPage = createClass({
 			} catch (e){}

 			if(this.state.errors.status == '401'){
-				return <Nav.item className='save error' icon='fa-warning'>
+				return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
 					Oops!
 					<div className='errorContainer' onClick={this.clearErrors}>
 					You must be signed in to a Google account
@@ -312,7 +325,7 @@ const EditPage = createClass({
 				</Nav.item>;
 			}

-			return <Nav.item className='save error' icon='fa-warning'>
+			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
 				Oops!
 				<div className='errorContainer'>
 					Looks like there was a problem saving. <br />
@@ -325,16 +338,25 @@ const EditPage = createClass({
 		}

 		if(this.state.isSaving){
-			return <Nav.item className='save' icon='fa-spinner fa-spin'>saving...</Nav.item>;
+			return <Nav.item className='save' icon='fas fa-spinner fa-spin'>saving...</Nav.item>;
 		}
 		if(this.state.isPending && this.hasChanges()){
-			return <Nav.item className='save' onClick={this.save} color='blue' icon='fa-save'>Save Now</Nav.item>;
+			return <Nav.item className='save' onClick={this.save} color='blue' icon='fas fa-save'>Save Now</Nav.item>;
 		}
 		if(!this.state.isPending && !this.state.isSaving){
 			return <Nav.item className='save saved'>saved.</Nav.item>;
 		}
 	},

+	// {this.state.alertRenderChange &&
+	// 	<div className='errorContainer' onClick={this.closeAlerts}>
+	// 	Rendering mode for this brew has been changed! Refresh the page to load the new renderer.<br />
+	// 		<div className='confirm'>
+	// 			OK
+	// 		</div>
+	// 	</div>
+	// }
+
 	processShareId : function() {
 		return this.state.brew.googleId ?
 					 this.state.brew.googleId + this.state.brew.shareId :
@@ -351,7 +373,7 @@ const EditPage = createClass({
 				{this.renderGoogleDriveIcon()}
 				{this.renderSaveButton()}
 				<ReportIssue />
-				<Nav.item newTab={true} href={`/share/${this.processShareId()}`} color='teal' icon='fa-share-alt'>
+				<Nav.item newTab={true} href={`/share/${this.processShareId()}`} color='teal' icon='fas fa-share-alt'>
 					Share
 				</Nav.item>
 				<PrintLink shareId={this.processShareId()} />
@@ -374,8 +396,9 @@ const EditPage = createClass({
 						onChange={this.handleTextChange}
 						metadata={this.state.brew}
 						onMetadataChange={this.handleMetadataChange}
+						renderer={this.state.brew.renderer}
 					/>
-					<BrewRenderer text={this.state.brew.text} errors={this.state.htmlErrors} />
+					<BrewRenderer text={this.state.brew.text} errors={this.state.htmlErrors} renderer={this.state.brew.renderer} />
 				</SplitPane>
 			</div>
 		</div>;
--- a/client/homebrew/pages/editPage/editPage.less
+++ b/client/homebrew/pages/editPage/editPage.less
@@ -1,8 +1,14 @@
-
+@keyframes glideDown {
+	0%   {transform : translate(-50% + 3px, 0px);
+				opacity   : 0;}
+	100% {transform : translate(-50% + 3px, 10px);
+				opacity   : 1;}
+}
 .editPage{
 	.navItem.save{
 		width      : 106px;
 		text-align : center;
+		position   : relative;
 		&.saved{
 			cursor : initial;
 			color  : #666;
@@ -21,12 +27,15 @@
 		margin  : -5px;
 	}
 	.errorContainer{
+		animation-name: glideDown;
+		animation-duration: 0.4s;
 		position         : absolute;
 		top              : 100%;
 		left             : 50%;
-		z-index          : 1000;
+		z-index          : 100000;
 		width            : 140px;
 		padding          : 3px;
+		color            : white;
 		background-color : #333;
 		border           : 3px solid #444;
 		border-radius    : 5px;
--- a/client/homebrew/pages/homePage/homePage.jsx
+++ b/client/homebrew/pages/homePage/homePage.jsx
@@ -55,7 +55,7 @@ const HomePage = createClass({
 		return <Navbar ver={this.props.ver}>
 			<Nav.section>
 				<IssueNavItem />
-				<Nav.item newTab={true} href='/changelog' color='purple' icon='fa-file-text-o'>
+				<Nav.item newTab={true} href='/changelog' color='purple' icon='far fa-file-alt'>
 					Changelog
 				</Nav.item>
 				<RecentNavItem />
@@ -77,11 +77,11 @@ const HomePage = createClass({
 			</div>

 			<div className={cx('floatingSaveButton', { show: this.props.welcomeText != this.state.text })} onClick={this.handleSave}>
-				Save current <i className='fa fa-save' />
+				Save current <i className='fas fa-save' />
 			</div>

 			<a href='/new' className='floatingNewButton'>
-				Create your own <i className='fa fa-magic' />
+				Create your own <i className='fas fa-magic' />
 			</a>
 		</div>;
 	}
--- a/client/homebrew/pages/newPage/newPage.jsx
+++ b/client/homebrew/pages/newPage/newPage.jsx
@@ -127,11 +127,11 @@ const NewPage = createClass({

 	renderSaveButton : function(){
 		if(this.state.isSaving){
-			return <Nav.item icon='fa-spinner fa-spin' className='saveButton'>
+			return <Nav.item icon='fas fa-spinner fa-spin' className='saveButton'>
 				save...
 			</Nav.item>;
 		} else {
-			return <Nav.item icon='fa-save' className='saveButton' onClick={this.save}>
+			return <Nav.item icon='fas fa-save' className='saveButton' onClick={this.save}>
 				save
 			</Nav.item>;
 		}
@@ -143,7 +143,7 @@ const NewPage = createClass({
 	},

 	renderLocalPrintButton : function(){
-		return <Nav.item color='purple' icon='fa-file-pdf-o' onClick={this.print}>
+		return <Nav.item color='purple' icon='far fa-file-pdf' onClick={this.print}>
 			get PDF
 		</Nav.item>;
 	},
--- a/client/homebrew/pages/printPage/printPage.jsx
+++ b/client/homebrew/pages/printPage/printPage.jsx
@@ -4,6 +4,7 @@ const createClass = require('create-react-class');
 const _     = require('lodash');
 const cx    = require('classnames');
 const { Meta } = require('vitreum/headtags');
+const MarkdownLegacy = require('naturalcrit/markdownLegacy.js');
 const Markdown = require('naturalcrit/markdown.js');

 const PrintPage = createClass({
@@ -11,7 +12,8 @@ const PrintPage = createClass({
 		return {
 			query : {},
 			brew  : {
-				text : '',
+				text     : '',
+				renderer : 'legacy'
 			}
 		};
 	},
@@ -33,13 +35,24 @@ const PrintPage = createClass({
 	},

 	renderPages : function(){
-		return _.map(this.state.brewText.split('\\page'), (page, index)=>{
-			return <div
-				className='phb'
-				id={`p${index + 1}`}
-				dangerouslySetInnerHTML={{ __html: Markdown.render(page) }}
-				key={index} />;
-		});
+		if(this.props.brew.renderer == 'legacy') {
+			return _.map(this.state.brewText.split('\\page'), (page, index)=>{
+				return <div
+					className='phb'
+					id={`p${index + 1}`}
+					dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(page) }}
+					key={index} />;
+			});
+		} else {
+			return _.map(this.state.brewText.split(/^\\page/gm), (page, index)=>{
+				return <div
+					className='phb3'
+					id={`p${index + 1}`}
+					dangerouslySetInnerHTML={{ __html: Markdown.render(page) }}
+					key={index} />;
+			});
+		}
+
 	},

 	render : function(){
--- a/client/homebrew/pages/sharePage/sharePage.jsx
+++ b/client/homebrew/pages/sharePage/sharePage.jsx
@@ -22,7 +22,8 @@ const SharePage = createClass({
 				shareId   : null,
 				createdAt : null,
 				updatedAt : null,
-				views     : 0
+				views     : 0,
+				renderer  : ''
 			}
 		};
 	},
@@ -59,7 +60,7 @@ const SharePage = createClass({

 				<Nav.section>
 					<PrintLink shareId={this.processShareId()} />
-					<Nav.item href={`/source/${this.processShareId()}`} color='teal' icon='fa-code'>
+					<Nav.item href={`/source/${this.processShareId()}`} color='teal' icon='fas fa-code'>
 						source
 					</Nav.item>
 					<RecentNavItem brew={this.props.brew} storageKey='view' />
@@ -68,7 +69,7 @@ const SharePage = createClass({
 			</Navbar>

 			<div className='content'>
-				<BrewRenderer text={this.props.brew.text} />
+				<BrewRenderer text={this.props.brew.text} renderer={this.props.brew.renderer} />
 			</div>
 		</div>;
 	}
--- a/client/homebrew/pages/userPage/brewItem/brewItem.jsx
+++ b/client/homebrew/pages/userPage/brewItem/brewItem.jsx
@@ -48,7 +48,7 @@ const BrewItem = createClass({
 		if(!this.props.brew.editId) return;

 		return <a onClick={this.deleteBrew}>
-			<i className='fa fa-trash' />
+			<i className='fas fa-trash-alt' />
 		</a>;
 	},

@@ -61,7 +61,7 @@ const BrewItem = createClass({
 		}

 		return <a href={`/edit/${editLink}`} target='_blank' rel='noopener noreferrer'>
-			<i className='fa fa-pencil' />
+			<i className='fas fa-pencil-alt' />
 		</a>;
 	},

@@ -74,7 +74,7 @@ const BrewItem = createClass({
 		}

 		return <a href={`/share/${shareLink}`} target='_blank' rel='noopener noreferrer'>
-			<i className='fa fa-share-alt' />
+			<i className='fas fa-share-alt' />
 		</a>;
 	},

@@ -95,13 +95,13 @@ const BrewItem = createClass({

 			<div className='info'>
 				<span>
-					<i className='fa fa-user' /> {brew.authors.join(', ')}
+					<i className='fas fa-user' /> {brew.authors.join(', ')}
 				</span>
 				<span>
-					<i className='fa fa-eye' /> {brew.views}
+					<i className='fas fa-eye' /> {brew.views}
 				</span>
 				<span>
-					<i className='fa fa-refresh' /> {moment(brew.updatedAt).fromNow()}
+					<i className='fas fa-sync-alt' /> {moment(brew.updatedAt).fromNow()}
 				</span>
 				{this.renderGoogleDriveIcon()}
 			</div>
--- a/client/homebrew/pages/userPage/brewItem/brewItem.less
+++ b/client/homebrew/pages/userPage/brewItem/brewItem.less
@@ -22,6 +22,9 @@
 		font-size     : 2.2em;
 	}
 	.info{
+		position: absolute;
+		bottom: 0px;
+		margin-bottom: 4px;
 		font-family : ScalySans;
 		font-size   : 1.2em;
 		&>span{
--- a/client/homebrew/pages/userPage/userPage.jsx
+++ b/client/homebrew/pages/userPage/userPage.jsx
@@ -59,7 +59,7 @@ const UserPage = createClass({
 				</Nav.section>
 			</Navbar>

-			<div className='content'>
+			<div className='content V3'>
 				<div className='phb'>
 					<div>
 						<h1>{this.getUsernameWithS()} brews</h1>