New error bar made

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -3,13 +3,15 @@ var _ = require('lodash');
 var cx = require('classnames');
 
 var Markdown = require('naturalcrit/markdown.js');
+var ErrorBar = require('./errorBar/errorBar.jsx');
 
 var PAGE_HEIGHT = 1056 + 30;
 
 var BrewRenderer = React.createClass({
 	getDefaultProps: function() {
 		return {
-			text : ''
+			text : '',
+			errors : []
 		};
 	},
 	getInitialState: function() {
@@ -75,20 +77,6 @@ var BrewRenderer = React.createClass({
 	},
 
 	renderPage : function(pageText, index){
-
-		var html = Markdown.render(pageText)
-
-		var checkHTML = function(html) {
-		  var doc = document.createElement('div');
-		  doc.innerHTML = html;
-		  console.log(doc.innerHTML);
-		  return ( doc.innerHTML === html );
-		}
-
-		console.log('page', index, checkHTML(html));
-
-
-
 		return <div className='phb' id={`p${index + 1}`} dangerouslySetInnerHTML={{__html:Markdown.render(pageText)}} key={index} />
 	},
 
@@ -96,17 +84,6 @@ var BrewRenderer = React.createClass({
 		var pages = this.props.text.split('\\page');
 		this.totalPages = pages.length;
 
-
-		//TESTING VALIDATION
-		try{
-			var temp = Markdown.validate(this.props.text);
-
-			console.log(temp);
-		}catch(e){
-			console.log('ERR', e);
-		}
-
-
 		return _.map(pages, (page, index)=>{
 			if(this.shouldRender(page, index)){
 				return this.renderPage(page, index);
@@ -122,6 +99,8 @@ var BrewRenderer = React.createClass({
 			ref='main'
 			style={{height : this.state.height}}>
 
+			<ErrorBar errors={this.props.errors} />
+
 			<div className='pages'>
 				{this.renderPages()}
 			</div>

client/homebrew/brewRenderer/errorBar/errorBar.jsx

@@ -0,0 +1,72 @@
+var React = require('react');
+var _     = require('lodash');
+var cx    = require('classnames');
+
+var ErrorBar = React.createClass({
+	getDefaultProps: function() {
+		return {
+			errors : []
+		};
+	},
+
+	hasOpenError : false,
+	hasCloseError : false,
+	hasMatchError : false,
+
+	renderErrors : function(){
+		this.hasOpenError = false;
+		this.hasCloseError = false;
+		this.hasMatchError = false;
+
+
+		var errors = _.map(this.props.errors, (err, idx) => {
+			if(err.id == 'OPEN') this.hasOpenError = true;
+			if(err.id == 'CLOSE') this.hasCloseError = true;
+			if(err.id == 'MISMATCH') this.hasMatchError = true;
+			return <li key={idx}>
+				Line {err.line} : {err.text}, '{err.type}' tag
+			</li>
+		});
+
+		return <ul>{errors}</ul>
+	},
+
+	renderProtip : function(){
+		var msg = [];
+		if(this.hasOpenError){
+			msg.push(<div>
+				An unmatched opening tag means there's an opened tag that isn't closed, you need to close a tag, like this {'</div>'}. Make sure to match types!
+			</div>);
+		}
+
+		if(this.hasCloseError){
+			msg.push(<div>
+				An unmatched closing tag means you closed a tag without opening it. Either remove it, you check to where you think you opened it.
+			</div>);
+		}
+
+		if(this.hasMatchError){
+			msg.push(<div>
+				A type mismatch means you closed a tag, but the last open tag was a different type.
+			</div>);
+		}
+		return <div className='protips'>
+			<h4>Protips!</h4>
+			{msg}
+		</div>
+	},
+
+	render : function(){
+		if(!this.props.errors.length) return null;
+
+		return <div className='errorBar'>
+			<i className='fa fa-exclamation-triangle' />
+			<h3> There are HTML errors in your markup</h3>
+			{this.renderErrors()}
+			<hr />
+			{this.renderProtip()}
+		</div>
+	}
+});
+
+module.exports = ErrorBar;

client/homebrew/brewRenderer/errorBar/errorBar.less

@@ -0,0 +1,56 @@
+
+.errorBar{
+	position         : absolute;
+	z-index          : 10000;
+	box-sizing       : border-box;
+	width            : 100%;
+	margin-right     : 13px;
+	padding          : 20px;
+	padding-bottom   : 10px;
+	padding-left     : 100px;
+	background-color : @red;
+	color            : white;
+	i{
+		position  : absolute;
+		left      : 30px;
+		opacity   : 0.8;
+		font-size : 3em;
+	}
+	h3{
+		font-size   : 1.1em;
+		font-weight : 800;
+	}
+	ul{
+		margin-top          : 15px;
+		font-size           : 0.8em;
+		list-style-position : inside;
+		list-style-type     : disc;
+		li{
+			line-height : 1.6em;
+		}
+	}
+	hr{
+		box-sizing       : border-box;
+		height           : 2px;
+		width            : 150%;
+		margin-top       : 25px;
+		margin-bottom    : 15px;
+		margin-left      : -100px;
+		background-color : darken(@red, 8%);
+		border           : none;
+	}
+	.protips{
+		margin-left : -80px;
+		font-size   : 0.6em;
+		&>div{
+			margin-bottom : 10px;
+			line-height   : 1.2em;
+		}
+		h4{
+			opacity        : 0.8;
+			font-weight    : 800;
+			line-height    : 1.5em;
+			text-transform : uppercase;
+		}
+	}
+}

client/homebrew/pages/newPage/newPage.jsx

@@ -8,7 +8,7 @@ var Navbar = require('../../navbar/navbar.jsx');
 var EditTitle = require('../../navbar/editTitle.navitem.jsx');
 var IssueNavItem = require('../../navbar/issue.navitem.jsx');
 
-
+var Markdown = require('naturalcrit/markdown.js');
 var SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
 var Editor = require('../../editor/editor.jsx');
 var BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
@@ -22,7 +22,8 @@ var NewPage = React.createClass({
 			ver : '0.0.0',
 			title : '',
 			text: '',
-			isSaving : false
+			isSaving : false,
+			errors : []
 		};
 	},
 
@@ -57,7 +58,8 @@ var NewPage = React.createClass({
 
 	handleTextChange : function(text){
 		this.setState({
-			text : text
+			text : text,
+			errors : Markdown.validate(text)
 		});
 		localStorage.setItem(KEY, text);
 	},
@@ -66,6 +68,7 @@ var NewPage = React.createClass({
 		this.setState({
 			isSaving : true
 		});
+
 		request.post('/api')
 			.send({
 				title : this.state.title,
@@ -112,13 +115,13 @@ var NewPage = React.createClass({
 	},
 
 	render : function(){
+		console.log(this.state.errors);
 		return <div className='newPage page'>
 			{this.renderNavbar()}
-
 			<div className='content'>
 				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
 					<Editor value={this.state.text} onChange={this.handleTextChange} ref='editor'/>
-					<BrewRenderer text={this.state.text} />
+					<BrewRenderer text={this.state.text} errors={this.state.errors} />
 				</SplitPane>
 			</div>
 		</div>

shared/naturalcrit/markdown.js

@@ -47,7 +47,8 @@ module.exports = {
 							errors.push({
 								line : lineNumber,
 								type : type,
-								err  : 'Unmatched closing tag'
+								text : 'Unmatched closing tag',
+								id : 'CLOSE'
 							});
 						}else if(_.last(acc).type == type){
 							acc.pop();
@@ -55,7 +56,8 @@ module.exports = {
 							errors.push({
 								line : _.last(acc).line + ' to ' + lineNumber,
 								type : type,
-								err  : 'Type mismatch on closing tag'
+								text : 'Type mismatch on closing tag',
+								id : 'MISMATCH'
 							});
 							acc.pop();
 						}
@@ -69,7 +71,8 @@ module.exports = {
 			errors.push({
 				line : unmatched.line,
 				type : unmatched.type,
-				err  : "Unmatched opening tag"
+				text : "Unmatched opening tag",
+				id : 'OPEN'
 			})
 		});