Getting both renderers to play nice

client/homebrew/homebrew.jsx

@@ -53,7 +53,13 @@ const Homebrew = React.createClass({
 				return <PrintPage query={query}/>;
 			},
 			'/new' : <NewPage />,
+
+
 			'/changelog' : <SharePage />,
+			'/test' : <SharePage />,
+			'/test_old' : <SharePage />,
+
+
 			'*' : <HomePage />,
 		});
 	},

client/homebrew/pages/sharePage/sharePage.jsx

@@ -18,19 +18,6 @@ const Store = require('homebrewery/brew.store.js');
 const Headtags = require('vitreum/headtags');
 
 const SharePage = React.createClass({
-	getDefaultProps: function() {
-		return {
-			brew : {
-				title : '',
-				text : '',
-				shareId : null,
-				createdAt : null,
-				updatedAt : null,
-				views : 0
-			}
-		};
-	},
-
 	componentDidMount: function() {
 		document.addEventListener('keydown', this.handleControlKeys);
 	},
@@ -78,7 +65,7 @@ const SharePage = React.createClass({
 				</Nav.section>
 			</Navbar>
 			<div className='content'>
-				<BrewRenderer brewText={brew.text} />
+				<BrewRenderer brew={brew} />
 			</div>
 		</div>
 	}

client/homebrew/phbStyle/phb.style.less

@@ -10,12 +10,11 @@
 @horizontalRule        : #9c2b1b;
 @headerText            : #58180D;
 @monsterStatBackground : #FDF1DC;
+
 @page { margin: 0; }
+
 body {
-	counter-reset : phb-page-numbers;
+	counter-reset : old-phb-page-numbers;
-}
-*{
-	-webkit-print-color-adjust : exact;
 }
 .useSansSerif(){
 	font-family : ScalySans;
@@ -42,8 +41,11 @@ body {
 	-moz-column-gap      : 1cm;
 }
 .phb{
+	& *{
+		-webkit-print-color-adjust : exact;
+	}
 	.useColumns();
-	counter-increment : phb-page-numbers;
+	counter-increment : old-phb-page-numbers;
 	position          : relative;
 	z-index           : 15;
 	box-sizing        : border-box;
@@ -299,7 +301,7 @@ body {
 		color      : #c9ad6a;
 		text-align : center;
 		&.auto::after {
-			content : counter(phb-page-numbers);
+			content : counter(old-phb-page-numbers);
 		}
 	}
 	.footnote{

package.json

@@ -11,9 +11,9 @@
     "prod": "set NODE_ENV=production&& npm run build",
     "postinstall": "npm run build",
     "start": "node server.js",
-    "test": "mocha test",
+    "test": "mocha tests",
-    "test:dev": "nodemon -x mocha test || exit 0",
+    "test:dev": "nodemon -x mocha tests || exit 0",
-    "test:markdown": "nodemon -x mocha test/markdown.test.js || exit 0"
+    "test:markdown": "nodemon -x mocha tests/markdown.test.js || exit 0"
   },
   "author": "stolksdorf",
   "license": "MIT",

server/interface.routes.js

@@ -1,4 +1,5 @@
 const _ = require('lodash');
+const fs = require('fs');
 const config = require('nconf');
 const utils = require('./utils.js');
 const BrewData = require('./brew.data.js');
@@ -6,9 +7,12 @@ const router = require('express').Router();
 const mw = require('./middleware.js');
 
 
-const docs = {
+const statics = {
-	welcomeBrew : require('fs').readFileSync('./welcome.brew.md', 'utf8'),
+	welcomeBrew : fs.readFileSync('./welcome.brew.md', 'utf8'),
-	changelog : require('fs').readFileSync('./changelog.md', 'utf8'),
+	changelog   : fs.readFileSync('./changelog.md', 'utf8'),
+	testBrew    : fs.readFileSync('./statics/test.brew.md', 'utf8'),
+
+	oldTest     : fs.readFileSync('./statics/oldTest.brew.md', 'utf8'),
 };
 
 
@@ -59,6 +63,7 @@ router.get('/user/:username', (req, res, next) => {
 
 //Search Page
 router.get('/search', (req, res, next) => {
+	//TODO: Double check that the defaults are okay
 	BrewData.search()
 		.then((brews) => {
 			req.brews = brews;
@@ -70,7 +75,7 @@ router.get('/search', (req, res, next) => {
 //Changelog Page
 router.get('/changelog', (req, res, next) => {
 	req.brew = {
-		text : docs.changelog,
+		text : statics.changelog,
 		title : 'Changelog'
 	};
 	return next();
@@ -81,8 +86,26 @@ router.get('/new', renderPage);
 
 //Home Page
 router.get('/', (req, res, next) => {
-	req.brew = { text : docs.welcomeBrew };
+	req.brew = { text : statics.welcomeBrew };
 	return next();
 }, renderPage);
 
+
+//Test pages
+router.get('/test', (req, res, next) => {
+	req.brew = {
+		text : statics.testBrew
+	};
+	return next();
+}, renderPage);
+router.get('/test_old', (req, res, next) => {
+	req.brew = {
+		text : statics.oldTest,
+		version : 1
+	};
+	return next();
+}, renderPage);
+
+
+
 module.exports = router;

shared/depricated/brewRendererOld/brewRendererOld.jsx

@@ -2,7 +2,7 @@ const React = require('react');
 const _ = require('lodash');
 const cx = require('classnames');
 
-const Markdown = require('homebrewery/markdown.js');
+const Markdown = require('depricated/markdown.old.js');
 const ErrorBar = require('./errorBar/errorBar.jsx');
 
 const RenderWarnings = require('homebrewery/renderWarnings/renderWarnings.jsx')
@@ -12,7 +12,7 @@ const Store = require('homebrewery/brew.store.js');
 const PAGE_HEIGHT = 1056;
 const PPR_THRESHOLD = 50;
 
-const BrewRenderer = React.createClass({
+const OLD_BrewRenderer = React.createClass({
 	getDefaultProps: function() {
 		return {
 			value : '',
@@ -58,8 +58,9 @@ const BrewRenderer = React.createClass({
 			if(this.refs.pages && this.refs.pages.firstChild) this.pageHeight = this.refs.pages.firstChild.clientHeight;
 		}, 1);
 
+		const parentNode = document.querySelector('.page .content');
 		this.setState({
-			height : this.refs.main.parentNode.clientHeight,
+			height : parentNode.clientHeight,
 			isMounted : true
 		});
 	},
@@ -99,7 +100,7 @@ const BrewRenderer = React.createClass({
 	},
 
 	renderDummyPage : function(index){
-		return <div className='phb' id={`p${index + 1}`} key={index}>
+		return <div className='phb old' id={`p${index + 1}`} key={index}>
 			<i className='fa fa-spinner fa-spin' />
 		</div>
 	},
@@ -125,12 +126,8 @@ const BrewRenderer = React.createClass({
 		return this.lastRender;
 	},
 
-	renderStyle : function(){
-
-	},
-
 	render : function(){
-		return <div className='brewRenderer'
+		return <div className='brewRendererOld'
 			onScroll={this.handleScroll}
 			ref='main'
 			style={{height : this.state.height}}>
@@ -138,8 +135,6 @@ const BrewRenderer = React.createClass({
 			<ErrorBar errors={this.props.errors} />
 			<RenderWarnings />
 
-
-			<style>{this.props.style}</style>
 			<div className='pages' ref='pages'>
 				{this.renderPages()}
 			</div>
@@ -149,4 +144,4 @@ const BrewRenderer = React.createClass({
 	}
 });
 
-module.exports = BrewRenderer;
+module.exports = OLD_BrewRenderer;

shared/depricated/brewRendererOld/brewRendererOld.less

@@ -1,9 +1,10 @@
 
 @import (less) './client/homebrew/phbStyle/phb.style.less';
+//@import (less) './shared/depricated/phb.old.css';
 .pane{
 	position : relative;
 }
-.brewRenderer{
+.brewRendererOld{
 	overflow-y : scroll;
 	.pageInfo{
 		position         : absolute;

shared/homebrewery/brew.store.js

@@ -1,7 +1,7 @@
 const _ = require('lodash');
 const flux = require('pico-flux');
 
-const Markdown = require('homebrewery/markdown.new.js');
+const Markdown = require('homebrewery/markdown.js');
 
 let State = {
 	version : '0.0.0',
@@ -32,6 +32,8 @@ const Store = flux.createStore({
 	},
 	UPDATE_BREW_CODE : (brewCode) => {
 		State.brew.text = brewCode;
+
+		//TODO: Remove?
 		State.errors = Markdown.validate(brewCode);
 	},
 	UPDATE_BREW_STYLE : (style) => {

shared/homebrewery/brewRenderer/brewRenderer.jsx

@@ -2,6 +2,8 @@ const React = require('react');
 const _ = require('lodash');
 const cx = require('classnames');
 
+const OldBrewRenderer = require('depricated/brewRendererOld/brewRendererOld.jsx');
+
 const Markdown = require('homebrewery/markdown.js');
 const ErrorBar = require('./errorBar/errorBar.jsx');
 
@@ -15,13 +17,18 @@ const PPR_THRESHOLD = 50;
 const BrewRenderer = React.createClass({
 	getDefaultProps: function() {
 		return {
-			value : '',
+			brew : {
-			style : '',
+				text : '',
+				style : ''
+			},
+
+
+			//TODO: maybe remove?
 			errors : []
 		};
 	},
 	getInitialState: function() {
-		const pages = this.props.value.split('\\page');
+		const pages = this.props.brew.text.split('\\page');
 
 		return {
 			viewablePageNumber: 0,
@@ -37,16 +44,16 @@ const BrewRenderer = React.createClass({
 
 	componentDidMount: function() {
 		this.updateSize();
-		window.addEventListener("resize", this.updateSize);
+		window.addEventListener('resize', this.updateSize);
 	},
 	componentWillUnmount: function() {
-		window.removeEventListener("resize", this.updateSize);
+		window.removeEventListener('resize', this.updateSize);
 	},
 
 	componentWillReceiveProps: function(nextProps) {
 		if(this.refs.pages && this.refs.pages.firstChild) this.pageHeight = this.refs.pages.firstChild.clientHeight;
 
-		const pages = nextProps.value.split('\\page');
+		const pages = nextProps.brew.text.split('\\page');
 		this.setState({
 			pages : pages,
 			usePPR : pages.length >= PPR_THRESHOLD
@@ -58,6 +65,7 @@ const BrewRenderer = React.createClass({
 			if(this.refs.pages && this.refs.pages.firstChild) this.pageHeight = this.refs.pages.firstChild.clientHeight;
 		}, 1);
 
+
 		this.setState({
 			height : this.refs.main.parentNode.clientHeight,
 			isMounted : true
@@ -125,11 +133,10 @@ const BrewRenderer = React.createClass({
 		return this.lastRender;
 	},
 
-	renderStyle : function(){
-
-	},
-
 	render : function(){
+		if(this.props.brew.version == 1) return <OldBrewRenderer value={this.props.brew.text} />;
+
+
 		return <div className='brewRenderer'
 			onScroll={this.handleScroll}
 			ref='main'
@@ -139,7 +146,8 @@ const BrewRenderer = React.createClass({
 			<RenderWarnings />
 
 
-			<style>{this.props.style}</style>
+			<style>{this.props.brew.style}</style>
+
 			<div className='pages' ref='pages'>
 				{this.renderPages()}
 			</div>

shared/homebrewery/brewRenderer/brewRenderer.smart.jsx

@@ -3,9 +3,16 @@ const BrewRenderer = require('./brewRenderer.jsx');
 
 
 module.exports = Store.createSmartComponent(BrewRenderer, () => {
+	const brew = Store.getBrew();
+
+
 	return {
-		value : Store.getBrewCode(),
+		brew : Store.getBrew(),
+
+		brewText : Store.getBrewCode(),
 		style : Store.getBrewStyle(),
+
+
 		errors : Store.getErrors()
 	}
 });

shared/homebrewery/markdown.js

@@ -2,41 +2,43 @@ const _ = require('lodash');
 const Markdown = require('marked');
 
 
+const renderer = new Markdown.Renderer();
+let blockCount = 0;
+renderer.paragraph = function(text){
+	const blockReg = /{{[\w|,]+|}}/g;
+	const matches = text.match(blockReg);
+	if(!matches) return `\n<p>${text}</p>\n`;
+	let matchIndex = 0;
+	const res =  _.reduce(text.split(blockReg), (r, text) => {
+		if(text) r.push(`\n<p>${text}</p>\n`);
+		const block = matches[matchIndex];
+		if(block && _.startsWith(block, '{{')){
+			r.push(`\n\n<div class="${block.substring(2).split(',').join(' ')}">`);
+			blockCount++;
+		}
+		if(block == '}}' && blockCount !== 0){
+			r.push('</div>\n\n');
+			blockCount--;
+		}
+		matchIndex++;
+		return r;
+	}, []).join('\n');
+	return res;
+};
+
+
 module.exports = {
 	marked : Markdown,
 	render : (rawBrewText)=>{
-		//Adds in the new div block syntax
+		blockCount = 0;
-		let count = 0;
-		let blockReg = /{{[\w|,]+|}}/g;
-		const renderer = new Markdown.Renderer();
-		renderer.paragraph = function (text) {
-			const matches = text.match(blockReg);
-			if(!matches) return `\n<p>${text}</p>\n`;
-			let matchIndex = 0;
-			const res =  _.reduce(text.split(blockReg), (r, text) => {
-				if(text) r.push(`\n<p>${text}</p>\n`);
-				const block = matches[matchIndex];
-				if(block && _.startsWith(block, '{{')){
-					r.push(`\n\n<div class="${block.substring(2).split(',').join(' ')}">`);
-					count++;
-				}
-				if(block == '}}' && count !== 0){
-					r.push('</div>\n\n');
-					count--;
-				}
-				matchIndex++;
-				return r;
-			}, []).join('\n');
-			return res;
-		};
 		let html = Markdown(rawBrewText, {renderer : renderer, sanitize: true});
-		html += _.times(count, ()=>{return '</div>'}).join('\n');
+		//Close all hanging block tags
+		html += _.times(blockCount, ()=>{return '</div>'}).join('\n');
 		return html;
 	},
 
 	validate : (rawBrewText) => {
 		return [];
-
 	},
 };
 

statics/oldTest.brew.md

@@ -0,0 +1 @@
+# Old test!

statics/test.brew.md

@@ -0,0 +1,6 @@
+
+# Test brew!
+
+hwllo there???
+
+Can you even work?

tests/brew.gen.js

@@ -8,7 +8,7 @@ module.exports = {
 
 	random : (num = 20)=>{
 		return _.times(num, ()=>{
-			//TODO: Build better generator
+			//TODO: Build better generator, use new snippets?
 			return {
 				title : 'BrewA',
 				description : '',
@@ -20,6 +20,20 @@ module.exports = {
 			};
 		});
 	},
+	old : () => {
+		return [
+			{
+				title : 'OLD - div test',
+				description : '',
+				authors : ['old'],
+				text : `<div class='wide' style='text-align:center'> neato </div>`,
+				systems : [],
+				views   : 0,
+				published : true,
+				version : 1
+			}
+		]
+	},
 	static : () => {
 		return {
 			BrewA : {

tests/markdown.test.js

@@ -1,6 +1,6 @@
 const testing = require('./test.init.js');
 
-const Markdown = require('../shared/homebrewery/markdown.new.js');
+const Markdown = require('../shared/homebrewery/markdown.js');
 
 describe('Markdown', ()=>{