naturalcrit · calculuschild · Feb 3, 2021 · May 15, 2020 · May 15, 2020 · Nov 28, 2020
diff --git a/client/admin/admin.jsx b/client/admin/admin.jsx
@@ -18,7 +18,7 @@ const Admin = createClass({
 
 			<header>
 				<div className='container'>
-					<i className='fa fa-rocket' />
+					<i className='fas fa-rocket' />
 					homebrewery admin
 				</div>
 			</header>

diff --git a/client/admin/brewCleanup/brewCleanup.jsx b/client/admin/brewCleanup/brewCleanup.jsx
@@ -45,8 +45,8 @@ const BrewCleanup = createClass({
 		return <div className='removeBox'>
 			<button onClick={this.cleanup} className='remove'>
 				{this.state.pending
-					? <i className='fa fa-spin fa-spinner' />
-					: <span><i className='fa fa-times' /> Remove</span>
+					? <i className='fas fa-spin fa-spinner' />
+					: <span><i className='fas fa-times' /> Remove</span>
 				}
 			</button>
 			<span>Found {this.state.count} Brews that could be removed. </span>
@@ -59,7 +59,7 @@ const BrewCleanup = createClass({
 
 			<button onClick={this.prime} className='query'>
 				{this.state.pending
-					? <i className='fa fa-spin fa-spinner' />
+					? <i className='fas fa-spin fa-spinner' />
 					: 'Query Brews'
 				}
 			</button>

diff --git a/client/admin/brewCompress/brewCompress.jsx b/client/admin/brewCompress/brewCompress.jsx
@@ -59,8 +59,8 @@ const BrewCompress = createClass({
 		return <div className='removeBox'>
 			<button onClick={this.cleanup} className='remove'>
 				{this.state.pending
-					? <i className='fa fa-spin fa-spinner' />
-					: <span><i className='fa fa-compress' /> compress </span>
+					? <i className='fas fa-spin fa-spinner' />
+					: <span><i className='fas fa-compress' /> compress </span>
 				}
 			</button>
 			{this.state.pending
@@ -76,7 +76,7 @@ const BrewCompress = createClass({
 
 			<button onClick={this.prime} className='query'>
 				{this.state.pending
-					? <i className='fa fa-spin fa-spinner' />
+					? <i className='fas fa-spin fa-spinner' />
 					: 'Query Brews'
 				}
 			</button>

diff --git a/client/admin/brewLookup/brewLookup.jsx b/client/admin/brewLookup/brewLookup.jsx
@@ -61,7 +61,7 @@ const BrewLookup = createClass({
 			<h2>Brew Lookup</h2>
 			<input type='text' value={this.state.query} onChange={this.handleChange} placeholder='edit or share id' />
 			<button onClick={this.lookup}>
-				<i className={cx('fa', {
+				<i className={cx('fas', {
 					'fa-search'          : !this.state.searching,
 					'fa-spin fa-spinner' : this.state.searching,
 				})} />

diff --git a/client/admin/stats/stats.jsx b/client/admin/stats/stats.jsx
@@ -37,7 +37,7 @@ const Stats = createClass({
 			</dl>
 
 			{this.state.fetching
-				&& <div className='pending'><i className='fa fa-spin fa-spinner' /></div>
+				&& <div className='pending'><i className='fas fa-spin fa-spinner' /></div>
 			}
 		</div>;
 	}

diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -4,6 +4,7 @@ const createClass = require('create-react-class');
 const _ = require('lodash');
 const cx = require('classnames');
 
+const MarkdownLegacy = require('naturalcrit/markdownLegacy.js');
 const Markdown = require('naturalcrit/markdown.js');
 const ErrorBar = require('./errorBar/errorBar.jsx');
 
@@ -18,12 +19,16 @@ const PPR_THRESHOLD = 50;
 const BrewRenderer = createClass({
 	getDefaultProps : function() {
 		return {
-			text   : '',
-			errors : []
+			text     : '',
+			renderer : '',
+			errors   : []
 		};
 	},
 	getInitialState : function() {
-		const pages = this.props.text.split('\\page');
+		const pages = this.props.text.split(/^\\page/gm);
+		let renderer = 'legacy';
+		if(this.props.renderer)
+			renderer = this.props.renderer;
 
 		return {
 			viewablePageNumber : 0,
@@ -33,8 +38,9 @@ const BrewRenderer = createClass({
 			pages          : pages,
 			usePPR         : pages.length >= PPR_THRESHOLD,
 			visibility     : 'hidden',
+			renderer       : renderer,
 			initialContent : `<!DOCTYPE html><html><head>
-												<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.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='/homebrew/bundle.css' rel='stylesheet' />
 												<base target=_blank>
@@ -49,7 +55,7 @@ const BrewRenderer = createClass({
 	},
 
 	componentWillReceiveProps : function(nextProps) {
-		const pages = nextProps.text.split('\\page');
+		const pages = nextProps.text.split(/^\\page/gm);
 		this.setState({
 			pages  : pages,
 			usePPR : pages.length >= PPR_THRESHOLD
@@ -103,12 +109,15 @@ const BrewRenderer = createClass({
 
 	renderDummyPage : function(index){
 		return <div className='phb' id={`p${index + 1}`} key={index}>
-			<i className='fa fa-spinner fa-spin' />
+			<i className='fas fa-spinner fa-spin' />
 		</div>;
 	},
 
 	renderPage : function(pageText, index){
-		return <div className='phb' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} key={index} />;
+		if(this.state.renderer == 'legacy')
+			return <div className='phb' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(pageText) }} key={index} />;
+		else
+			return <div className='phb' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} key={index} />;
 	},
 
 	renderPages : function(){
@@ -159,7 +168,7 @@ const BrewRenderer = createClass({
 	        : null}
 
 				<Frame initialContent={this.state.initialContent} style={{ width: '100%', height: '100%', visibility: this.state.visibility }} contentDidMount={this.frameDidMount}>
-					<div className='brewRenderer'
+					<div className={cx('brewRenderer', this.state.renderer)}
 						onScroll={this.handleScroll}
 						style={{ height: this.state.height }}>
 

diff --git a/client/homebrew/brewRenderer/brewRenderer.less b/client/homebrew/brewRenderer/brewRenderer.less
@@ -1,8 +1,7 @@
+@import (multiple, less) 'shared/naturalcrit/styles/reset.less';
+.V3 {@import (multiple, less) './client/homebrew/phbStyle/phb.style.less';}
+.legacy {@import (multiple, less) './client/homebrew/phbStyle/phb.styleLegacy.less';}
 
-@import (less) './client/homebrew/phbStyle/phb.style.less';
-.pane{
-	position : relative;
-}
 .brewRenderer{
 	will-change : transform;
 	overflow-y  : scroll;
@@ -16,6 +15,9 @@
 		}
 	}
 }
+.pane{
+	position : relative;
+}
 .pageInfo{
 	position         : absolute;
 	right            : 17px;
@@ -37,4 +39,4 @@
 	font-size        : 10px;
 	font-weight      : 800;
 	color            : white;
-}
+}
diff --git a/client/homebrew/brewRenderer/brewRendererLegacy.jsx b/client/homebrew/brewRenderer/brewRendererLegacy.jsx
@@ -0,0 +1,152 @@
+const React = require('react');
+const createClass = require('create-react-class');
+const _ = require('lodash');
+const cx = require('classnames');
+
+const Markdown = require('naturalcrit/markdown.js');
+const ErrorBar = require('./errorBar/errorBar.jsx');
+
+//TODO: move to the brew renderer
+const RenderWarnings = require('homebrewery/renderWarnings/renderWarnings.jsx');
+const NotificationPopup = require('./notificationPopup/notificationPopup.jsx');
+
+const PAGE_HEIGHT = 1056;
+const PPR_THRESHOLD = 50;
+
+const BrewRenderer = createClass({
+	getDefaultProps : function() {
+		return {
+			text   : '',
+			errors : []
+		};
+	},
+	getInitialState : function() {
+		const pages = this.props.text.split('\\page');
+
+		return {
+			viewablePageNumber : 0,
+			height             : 0,
+			isMounted          : false,
+
+			pages  : pages,
+			usePPR : pages.length >= PPR_THRESHOLD,
+		};
+	},
+	height     : 0,
+	lastRender : <div></div>,
+
+	componentDidMount : function() {
+		this.updateSize();
+		window.addEventListener('resize', this.updateSize);
+	},
+	componentWillUnmount : function() {
+		window.removeEventListener('resize', this.updateSize);
+	},
+
+	componentWillReceiveProps : function(nextProps) {
+		const pages = nextProps.text.split('\\page');
+		this.setState({
+			pages  : pages,
+			usePPR : pages.length >= PPR_THRESHOLD
+		});
+	},
+
+	updateSize : function() {
+		this.setState({
+			height    : this.refs.main.parentNode.clientHeight,
+			isMounted : true
+		});
+	},
+
+	handleScroll : function(e){
+		const target = e.target;
+		this.setState((prevState)=>({
+			viewablePageNumber : Math.floor(target.scrollTop / target.scrollHeight * prevState.pages.length)
+		}));
+	},
+
+	shouldRender : function(pageText, index){
+		if(!this.state.isMounted) return false;
+
+		const viewIndex = this.state.viewablePageNumber;
+		if(index == viewIndex - 3) return true;
+		if(index == viewIndex - 2) return true;
+		if(index == viewIndex - 1) return true;
+		if(index == viewIndex)     return true;
+		if(index == viewIndex + 1) return true;
+		if(index == viewIndex + 2) return true;
+		if(index == viewIndex + 3) return true;
+
+		//Check for style tages
+		if(pageText.indexOf('<style>') !== -1) return true;
+
+		return false;
+	},
+
+	renderPageInfo : function(){
+		return <div className='pageInfo'>
+			{this.state.viewablePageNumber + 1} / {this.state.pages.length}
+		</div>;
+	},
+
+	renderPPRmsg : function(){
+		if(!this.state.usePPR) return;
+
+		return <div className='ppr_msg'>
+			Partial Page Renderer enabled, because your brew is so large. May effect rendering.
+		</div>;
+	},
+
+	renderDummyPage : function(index){
+		return <div className='phb' id={`p${index + 1}`} key={index}>
+			<i className='fas fa-spinner fa-spin' />
+		</div>;
+	},
+
+	renderPage : function(pageText, index){
+		return <div className='phb' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} key={index} />;
+	},
+
+	renderPages : function(){
+		if(this.state.usePPR){
+			return _.map(this.state.pages, (page, index)=>{
+				if(this.shouldRender(page, index)){
+					return this.renderPage(page, index);
+				} else {
+					return this.renderDummyPage(index);
+				}
+			});
+		}
+		if(this.props.errors && this.props.errors.length) return this.lastRender;
+		this.lastRender = _.map(this.state.pages, (page, index)=>{
+			return this.renderPage(page, index);
+		});
+		return this.lastRender;
+	},
+
+	render : function(){
+		return (
+			<React.Fragment>
+				<div className='brewRenderer'
+					onScroll={this.handleScroll}
+					ref='main'
+					style={{ height: this.state.height }}>
+
+					<ErrorBar errors={this.props.errors} />
+					<div className='popups'>
+						<RenderWarnings />
+						<NotificationPopup />
+					</div>
+
+					<div className='pages' ref='pages'>
+						{this.renderPages()}
+					</div>
+				</div>;
+				{this.renderPageInfo()}
+				{this.renderPPRmsg()}
+			</React.Fragment>
+		);
+	}
+});
+
+module.exports = BrewRenderer;
diff --git a/client/homebrew/brewRenderer/errorBar/errorBar.jsx b/client/homebrew/brewRenderer/errorBar/errorBar.jsx
@@ -62,7 +62,7 @@ const ErrorBar = createClass({
 		if(!this.props.errors.length) return null;
 
 		return <div className='errorBar'>
-			<i className='fa fa-exclamation-triangle' />
+			<i className='fas fa-exclamation-triangle' />
 			<h3> There are HTML errors in your markup</h3>
 			<small>If these aren't fixed your brew will not render properly when you print it to PDF or share it</small>
 			{this.renderErrors()}

diff --git a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx
@@ -60,8 +60,8 @@ const NotificationPopup = createClass({
 		if(_.isEmpty(this.state.notifications)) return null;
 
 		return <div className='notificationPopup'>
-			<i className='fa fa-times dismiss' onClick={this.dismiss}/>
-			<i className='fa fa-info-circle info' />
+			<i className='fas fa-times dismiss' onClick={this.dismiss}/>
+			<i className='fas fa-info-circle info' />
 			<h3>Notice</h3>
 			<small>This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind:</small>
 			<ul>{_.values(this.state.notifications)}</ul>
-Original file line number
+Diff line change
@@ Expand Up / @@ -37,7 +37,7 @@ const Stats = createClass({ @@
     			</dl>
     			{this.state.fetching
-    				&& <div className='pending'><i className='fa fa-spin fa-spinner' /></div>
+    				&& <div className='pending'><i className='fas fa-spin fa-spinner' /></div>
     			}
     		</div>;
     	}
@@ Expand Down @@