Creating new home page, added new account route

client/homebrew/pages/homePage/homePage.jsx

@@ -4,33 +4,31 @@ const cx = require('classnames');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
-const PatreonNavItem = require('../../navbar/patreon.navitem.jsx');
+const NavItem = require('../../navbar/navitems.js');
-const IssueNavItem = require('../../navbar/issue.navitem.jsx');
-const RecentNavItem = require('../../navbar/recent.navitem.jsx');
-const AccountNavItem = require('../../navbar/account.navitem.jsx');
 
 
 const BrewInterface = require('homebrewery/brewInterface/brewInterface.jsx');
 
 
-const Actions = require('homebrewery/brew.actions.js');
+//const Actions = require('homebrewery/brew.actions.js');
-//
 
 const HomePage = React.createClass({
-	handleSave : function(){
+	getDefaultProps: function() {
-		Actions.saveNew();
+		return {
+			topBrews : []
+		};
 	},
 
 	renderNavbar : function(){
 		return <Navbar>
 			<Nav.section>
-				<PatreonNavItem collaspe={true} />
+				<NavItem.Patreon collaspe={true} />
-				<IssueNavItem collaspe={true} />
+				<NavItem.Issue collaspe={true} />
 				<Nav.item newTab={true} href='/changelog' color='purple' icon='fa-star' collaspe={true}>
 					What's new
 				</Nav.item>
-				<RecentNavItem.both />
+				<NavItem.Recent.both />
-				<AccountNavItem />
+				<NavItem.Account />
 				{/*}
 				<Nav.item href='/new' color='green' icon='fa-external-link'>
 					New Brew
@@ -44,18 +42,46 @@ const HomePage = React.createClass({
 		return <div className='homePage page'>
 			{this.renderNavbar()}
 			<div className='content'>
-				<BrewInterface />
+				<div className='hero'>
-			</div>
+					hero
+					<h1>The Homebrewery</h1>
 
-			<div className={cx('floatingSaveButton', {
+				</div>
-				//show : Store.getBrewText() !== this.props.welcomeText
+				<div className='buttons'>
-			})} onClick={this.handleSave}>
+					<p>
-				Save current <i className='fa fa-save' />
+						Effortlessly create Authnetic looking D&D homebrews with just text
-			</div>
+					</p>
+					<div>
+						<a className='button new' target='_blank' href='/new'>
+							<i className='fa fa-magic' />
+							<h3>New</h3>
+							<p>This is some sample text</p>
+						</a>
 
-			<a href='/new' className='floatingNewButton'>
+						<a className='button search' target='_blank' href='/search'>
-				Create your own <i className='fa fa-magic' />
+							<i className='fa fa-search' />
-			</a>
+							<h3>Search</h3>
+							<p>This is some sample text</p>
+						</a>
+					</div>
+					<div>
+						<a className='button docs' target='_blank' href='/docs'>
+							<i className='fa fa-book' />
+							<h3>Docs</h3>
+							<p>This is some sample text</p>
+						</a>
+						<a className='button account' target='_blank' href='/account'>
+							<i className='fa fa-user' />
+							<h3>Account</h3>
+							<p>This is some sample text</p>
+						</a>
+					</div>
+				</div>
+				<div className='topBrews'>
+					topBrews
+
+				</div>
+			</div>
 		</div>
 	}
 });

client/homebrew/pages/homePage/homePage.less

@@ -1,43 +1,109 @@
+
+@import 'homebrewery/phb_style/phb.fonts.less';
 .homePage{
 	position : relative;
-	a.floatingNewButton{
+	.hero{
-		.animate(background-color);
+	//	.backgroundScrollAnimation();
-		position         : absolute;
+		height              : 400px;
-		display          : block;
+		background-image    : url('/assets/homebrew/pages/homePage/fantasy_background.jpg');
-		right            : 70px;
+		background-position : 1% 15%;
-		bottom           : 70px;
+		h1{
-		z-index          : 100;
+			margin-top     : 15%;
-		z-index          : 5001;
+			font-family    : BookInsanity;
-		padding          : 1em;
+			font-size      : 3em;
-		background-color : @orange;
+			font-weight    : 800;
-		font-size        : 1.5em;
+			letter-spacing : 0.3em;
-		color            : white;
+			text-align     : center;
-		text-decoration  : none;
-		box-shadow       : 3px 3px 15px black;
-		&:hover{
-			background-color : darken(@orange, 20%);
 		}
 	}
-	.floatingSaveButton{
+	.buttons{
-		.animateAll();
+		padding          : 30px;
-		position         : absolute;
+		background-image : url('/assets/homebrew/pages/homePage/dmg_bg.jpg');
-		display          : block;
+		text-align       : center;
-		right            : 200px;
+		&>div{
-		bottom           : 90px;
+			//display         : flex;
-		z-index          : 100;
+			margin          : 0 auto;
-		z-index          : 5000;
+		//	justify-content : center;
-		padding          : 0.8em;
-		cursor           : pointer;
-		background-color : @blue;
-		font-size        : 0.8em;
-		color            : white;
-		text-decoration  : none;
-		box-shadow       : 3px 3px 15px black;
-		&:hover{
-			background-color : darken(@blue, 20%);
 		}
-		&.show{
+		p{
-			right : 350px;
+			margin-bottom : 20px;
+			font-size     : 0.8em;
+		}
+		a.button{
+			.animate(background-color);
+			position         : relative;
+			display          : block;
+			height           : 60px;
+			max-width            : 280px;
+			width : 100%;
+			margin           : 15px;
+			padding          : 20px 30px;
+			padding-left     : 80px;
+			cursor           : pointer;
+			background-color : fade(@red, 30%);
+			color            : black;
+			text-align       : left;
+			text-decoration  : none;
+			//flex-grow : 0;
+			display: inline-block;
+			i{
+				position  : absolute;
+				top       : 15px;
+				left      : 25px;
+				font-size : 2em;
+				//transform-style: preserve-3d;
+				transform: rotateY(0deg);
+			}
+			h3{
+				display        : block;
+				margin-bottom  : 3px;
+				font-size      : 1.2em;
+				font-weight    : 600;
+				letter-spacing : 0.2em;
+			}
+			p{
+				.fadeOutLeft();
+				.keep();
+				opacity   : 0;
+				font-size : 0.8em;
+			}
+			&:hover{
+				background-color : fade(@red, 50%);
+				p{
+					.fadeInRight();
+				}
+				i{
+					transform: rotateY(360deg);
+					.animateAll(0.5s);
+				}
+			}
 		}
 	}
-}
+
+	.topBrews{
+		background-image    : url('/assets/homebrew/pages/homePage/phb_bg.jpg');
+
+
+	}
+
+}
+// .vendor(@property, @value) {
+// 	-webkit-@{property}: @value;
+// 	 -khtml-@{property}: @value;
+// 	   -moz-@{property}: @value;
+// 			@{property}: @value;
+// }
+// .backgroundScrollAnimation(){
+// 	@top : -100px;
+// 	.vendor(animation-iteration-count, infinite);
+// 	.createAnimation(backgroundScroll, 60s, linear);
+// 	.backgroundScrollKeyFrames(){
+// 		0%   { background-position: 0 @top}
+// 		100% { background-position: -1200px @top}
+// 	}
+// 	@-webkit-keyframes backgroundScroll {.backgroundScrollKeyFrames();}
+// 	@-moz-keyframes backgroundScroll {.backgroundScrollKeyFrames();}
+// 	@-ms-keyframes backgroundScroll {.backgroundScrollKeyFrames();}
+// 	@-o-keyframes backgroundScroll {.backgroundScrollKeyFrames();}
+// 	@keyframes backgroundScroll {.backgroundScrollKeyFrames();}
+// }

client/homebrew/pages/userPage/brewItem/brewItem.jsx

@@ -3,6 +3,8 @@ const _     = require('lodash');
 const cx    = require('classnames');
 const moment = require('moment');
 
+//TODO: Depriacte
+
 const BrewItem = React.createClass({
 	getDefaultProps: function() {
 		return {
@@ -24,6 +26,7 @@ const BrewItem = React.createClass({
 	},
 
 	render : function(){
+		console.log('Brew Item should be depricated');
 		const brew = this.props.brew;
 		return <div className='brewItem'>
 			<h2>{brew.title}</h2>

client/homebrew/pages/userPage/userPage.jsx

@@ -9,12 +9,12 @@ const RecentNavItem = require('../../navbar/recent.navitem.jsx');
 const Account = require('../../navbar/account.navitem.jsx');
 const BrewItem = require('./brewItem/brewItem.jsx');
 
-const brew = {
+// const brew = {
-	title : 'SUPER Long title woah now',
+// 	title : 'SUPER Long title woah now',
-	authors : []
+// 	authors : []
-}
+// }
 
-const BREWS = _.times(25, ()=>{ return brew});
+// const BREWS = _.times(25, ()=>{ return brew});
 
 
 const UserPage = React.createClass({
@@ -29,7 +29,6 @@ const UserPage = React.createClass({
 		if(!brews || !brews.length) return <div className='noBrews'>No Brews.</div>;
 
 		const sortedBrews = _.sortBy(brews, (brew)=>{ return brew.title; });
-
 		return _.map(sortedBrews, (brew, idx) => {
 			return <BrewItem brew={brew} key={idx}/>
 		});
@@ -52,8 +51,6 @@ const UserPage = React.createClass({
 
 	render : function(){
 		const brews = this.getSortedBrews();
-		console.log('user brews', brews);
-
 		return <div className='userPage page'>
 			<Navbar>
 				<Nav.section>

scripts/populate.js

@@ -3,7 +3,7 @@ const _ = require('lodash');
 
 const DB = require('../server/db.js');
 const BrewData = require('../server/brew.data.js');
-const BrewGen = require('../test/brew.gen.js');
+const BrewGen = require('../tests/brew.gen.js');
 
 return Promise.resolve()
 	.then(DB.connect)

server/brew.search.js

@@ -1,6 +1,6 @@
 const _ = require('lodash');
 
-module.exports = (Brew) => {
+module.exports = (BrewModel) => {
 	const cmds = {
 		termSearch : (terms='', opts, fullAccess) => {
 			let query = {};
@@ -42,7 +42,7 @@ module.exports = (Brew) => {
 				queryObj.published = true;
 			}
 
-			const searchQuery = Brew
+			const searchQuery = BrewModel
 				.find(queryObj)
 				.sort(opts.sort)
 				.select(filter)
@@ -51,7 +51,7 @@ module.exports = (Brew) => {
 				.lean()
 				.exec();
 
-			const countQuery = Brew.count(queryObj).exec();
+			const countQuery = BrewModel.count(queryObj).exec();
 
 			return Promise.all([searchQuery, countQuery])
 				.then((result) => {

server/interface.routes.js

@@ -16,6 +16,20 @@ const statics = {
 	oldTest     : fs.readFileSync('./statics/oldTest.brew.md', 'utf8'),
 };
 
+let topBrews = [];
+const getTopBrews = ()=>{
+	return BrewData.search({}, {
+		limit : 4,
+		sort : {views : -1}
+	}).then(({brews, total})=>brews);
+};
+
+getTopBrews().then((brews)=>{
+	console.log('top brews', brews);
+	topBrews=brews;
+});
+
+
 
 const vitreumRender = require('vitreum/steps/render');
 const templateFn = require('../client/template.js');
@@ -54,9 +68,18 @@ router.get('/source/:sharedId', mw.viewBrew, (req, res, next)=>{
 });
 
 //User Page
+router.get('/account', (req, res, next)=>{
+	if(req.account && req.account.username){
+		return res.redirect(`/user/${req.account.username}`);
+	}else{
+		return res.redirect(config.get('login_path'));
+	}
+});
 router.get('/user/:username', (req, res, next) => {
-	BrewData.search({ user : req.params.username })
+	const isSelf = req.account && req.params.username == req.account.username;
-		.then((brews) => {
+
+	BrewData.userSearch(req.params.username, isSelf)
+		.then(({brews, total}) => {
 			req.brews = brews;
 			return next();
 		})
@@ -100,6 +123,7 @@ router.get('/new', renderPage);
 //Home Page
 router.get('/', (req, res, next) => {
 	req.brew = { text : statics.welcomeBrew };
+	//TODO add in top brews
 	return next();
 }, renderPage);