Base Layout work

README.md

@@ -10,7 +10,7 @@
 [![Codacy Badge](https://api.codacy.com/project/badge/Coverage/df3886d694254a248a7585a90bc5faed)](https://www.codacy.com/app/requarks/wiki)
 [![Dependency Status](https://gemnasium.com/badges/github.com/Requarks/wiki.svg)](https://gemnasium.com/github.com/Requarks/wiki)
 [![Known Vulnerabilities](https://snyk.io/test/github/requarks/wiki/badge.svg)](https://snyk.io/test/github/requarks/wiki)
-[![Documentation](http://inch-ci.org/github/requarks/wiki.svg?branch=master)](https://opsstatus.readme.io/)
+[![Documentation](http://inch-ci.org/github/requarks/wiki.svg?branch=master)](https://requarks-wiki.readme.io/)
 
 ##### A modern, lightweight and powerful wiki app built on NodeJS, Git and Markdown
 *Under development*

client/scss/app.scss

+@import './layout/_fonts';
+@import './layout/_base';
+
+$warning: #f68b39;
+
+@import 'bulma';
+
+@import './layout/_header';
+@import './layout/_footer';
\ No newline at end of file

client/scss/layout/_base.scss

+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+$family-sans-serif: "Roboto", "Helvetica", "Arial", sans-serif;
\ No newline at end of file

client/scss/layout/_fonts.scss

+
+// Roboto
+// by Christian Robertson
+// Apache 2.0 License
+
+// -> Thin
+
+@font-face {
+	font-family: 'Roboto';
+	src: url('/fonts/Roboto-Thin.woff') format('woff');
+	font-weight: 100;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Roboto';
+	src: url('/fonts/Roboto-ThinItalic.woff') format('woff');
+	font-weight: 100;
+	font-style: italic;
+}
+
+// -> Light
+
+@font-face {
+	font-family: 'Roboto';
+	src: url('/fonts/Roboto-Light.woff') format('woff');
+	font-weight: 300;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Roboto';
+	src: url('/fonts/Roboto-LightItalic.woff') format('woff');
+	font-weight: 300;
+	font-style: italic;
+}
+
+// -> Regular
+
+@font-face {
+	font-family: 'Roboto';
+	src: url('/fonts/Roboto-Regular.woff') format('woff');
+	font-weight: 400;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Roboto';
+	src: url('/fonts/Roboto-RegularItalic.woff') format('woff');
+	font-weight: 400;
+	font-style: italic;
+}
+
+// -> Medium
+
+@font-face {
+	font-family: 'Roboto';
+	src: url('/fonts/Roboto-Medium.woff') format('woff');
+	font-weight: 500;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Roboto';
+	src: url('/fonts/Roboto-MediumItalic.woff') format('woff');
+	font-weight: 500;
+	font-style: italic;
+}
+
+// -> Bold
+
+@font-face {
+	font-family: 'Roboto';
+	src: url('/fonts/Roboto-Bold.woff') format('woff');
+	font-weight: 700;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Roboto';
+	src: url('/fonts/Roboto-BoldItalic.woff') format('woff');
+	font-weight: 700;
+	font-style: italic;
+}
+
+// -> Black
+
+@font-face {
+	font-family: 'Roboto';
+	src: url('/fonts/Roboto-Black.woff') format('woff');
+	font-weight: 900;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Roboto';
+	src: url('/fonts/Roboto-BlackItalic.woff') format('woff');
+	font-weight: 900;
+	font-style: italic;
+}
\ No newline at end of file

controllers/pages.js

@@ -7,7 +7,7 @@ var router = express.Router();
  * Home
  */
 router.get('/', (req, res) => {
-	res.send('OK');
+	res.render('pages/view');
 });
 
 module.exports = router;
\ No newline at end of file

gulpfile.js

@@ -18,28 +18,35 @@ var include = require("gulp-include");
  * @type       {Object}
  */
 var paths = {
-	scriptlibs: {
-
-	},
+	scriptlibs: [
+		'./node_modules/lodash/lodash.min.js',
+      './node_modules/jquery/dist/jquery.min.js',
+      './node_modules/vue/dist/vue.min.js'
+	],
 	scriptapps: [
 		'./client/js/components/*.js',
 		'./client/js/app.js'
 	],
-	scriptappswatch: [
+	scriptapps_watch: [
 		'./client/js/**/*.js'
 	],
 	csslibs: [
-
+		'./node_modules/font-awesome/css/font-awesome.min.css',
+		
 	],
 	cssapps: [
-		'./client/css/app.scss'
+		'./client/scss/app.scss'
 	],
-	cssappswatch: [
-		'./client/css/**/*.scss'
+	cssapps_watch: [
+		'./client/scss/**/*.scss'
+	],
+	cssapps_imports: [
+		'./node_modules/bulma/'
 	],
 	fonts: [
 		'./node_modules/font-awesome/fonts/*-webfont.*',
-		'!./node_modules/font-awesome/fonts/*-webfont.svg'
+		'.!/node_modules/font-awesome/fonts/*-webfont.svg',
+		'./node_modules/roboto-fontface/fonts/Roboto/*.woff'
 	],
 	deploypackage: [
 		'./**/*',
@@ -48,7 +55,7 @@ var paths = {
 		'!client/js', '!client/js/**',
 		'!dist', '!dist/**',
 		'!tests', '!tests/**',
-		'!gulpfile.js', '!inch.json', '!config.json', '!wiki.sublime-project'
+		'!gulpfile.js', '!inch.json', '!config.yml', '!wiki.sublime-project'
 	]
 };
 
@@ -58,18 +65,92 @@ var paths = {
 gulp.task('server', ['scripts', 'css', 'fonts'], function() {
 	nodemon({
 		script: './server',
-		ignore: ['public/', 'client/', 'tests/'],
+		ignore: ['assets/', 'client/', 'tests/'],
 		ext: 'js json',
 		env: { 'NODE_ENV': 'development' }
 	});
 });
 
 /**
+ * TASK - Process all scripts processes
+ */
+gulp.task("scripts", ['scripts-libs', 'scripts-app']);
+
+/**
+ * TASK - Combine js libraries
+ */
+gulp.task("scripts-libs", function () {
+
+	return gulp.src(paths.scriptlibs)
+	.pipe(plumber())
+	.pipe(concat('libs.js'))
+	.pipe(uglify({ mangle: false }))
+	.pipe(plumber.stop())
+	.pipe(gulp.dest("./assets/js"));
+
+});
+
+/**
+ * TASK - Combine, make compatible and compress js app scripts
+ */
+gulp.task("scripts-app", function () {
+
+	return gulp.src(paths.scriptapps)
+	.pipe(plumber())
+	.pipe(concat('app.js'))
+	.pipe(babel())
+	.pipe(uglify())
+	.pipe(plumber.stop())
+	.pipe(gulp.dest("./assets/js"))
+
+});
+
+/**
+ * TASK - Process all css processes
+ */
+gulp.task("css", ['css-libs', 'css-app']);
+
+/**
+ * TASK - Combine css libraries
+ */
+gulp.task("css-libs", function () {
+	return gulp.src(paths.csslibs)
+	.pipe(plumber())
+	.pipe(concat('libs.css'))
+	.pipe(cleanCSS({ keepSpecialComments: 0 }))
+	.pipe(plumber.stop())
+	.pipe(gulp.dest("./assets/css"));
+});
+
+/**
+ * TASK - Combine app css
+ */
+gulp.task("css-app", function () {
+	return gulp.src(paths.cssapps)
+	.pipe(plumber())
+	.pipe(sass({
+		includePaths: paths.cssapps_imports
+	}))
+	.pipe(concat('app.css'))
+	.pipe(cleanCSS({ keepSpecialComments: 0 }))
+	.pipe(plumber.stop())
+	.pipe(gulp.dest("./assets/css"));
+});
+
+/**
+ * TASK - Copy web fonts
+ */
+gulp.task("fonts", function () {
+	return gulp.src(paths.fonts)
+	.pipe(gulp.dest("./assets/fonts"));
+});
+
+/**
  * TASK - Start dev watchers
  */
 gulp.task('watch', function() {
-	gulp.watch([paths.scriptappswatch], ['scripts-app']);
-	gulp.watch([paths.cssappswatch], ['css-app']);
+	gulp.watch([paths.scriptapps_watch], ['scripts-app']);
+	gulp.watch([paths.cssapps_watch], ['css-app']);
 });
 
 /**

package.json

@@ -34,6 +34,7 @@
     "bcryptjs-then": "^1.0.1",
     "bluebird": "^3.4.1",
     "body-parser": "^1.15.2",
+    "bulma": "^0.1.2",
     "compression": "^1.6.2",
     "connect-flash": "^0.1.1",
     "connect-redis": "^3.1.0",
@@ -59,6 +60,7 @@
     "passport": "^0.3.2",
     "passport-local": "^1.0.0",
     "pug": "^2.0.0-beta5",
+    "roboto-fontface": "^0.6.0",
     "serve-favicon": "^2.3.0",
     "simplemde": "^1.11.2",
     "validator": "^5.5.0",

server.js

@@ -101,7 +101,7 @@ app.use(i18next_mw.handle(lang));
 app.set('views', path.join(ROOTPATH, 'views'));
 app.set('view engine', 'pug');
 
-//app.use(favicon(path.join(ROOTPATH, 'assets', 'favicon.ico')));
+app.use(favicon(path.join(ROOTPATH, 'assets', 'favicon.ico')));
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: false }));
 app.use(expressValidator());

views/common/footer.pug

+footer.footer
+	.container
+		.content.has-text-centered
+			p
+				= t('footer.poweredby') + ' '
+				a(href='https://github.com/Requarks/wiki') Requarks Wiki
+				| .
+				p
+					a.icon(href='https://github.com/Requarks/wiki')
+						i.fa.fa-github

views/common/header.pug

+
+nav.nav.has-shadow
+	.nav-left
+		a.nav-item.is-brand(href='/')
+			img(src='/favicons/android-icon-96x96.png', alt='Wiki')
+		a.nav-item(href='/')
+			h1.title Wiki
+	.nav-center
+		p.nav-item.control.has-addons
+			input.input(type='text', placeholder='Find...')
+			a.button.is-info
+				span.icon.is-small
+					i.fa.fa-search
+	span.nav-toggle
+		span
+		span
+		span
+	.nav-right.nav-menu
+		a.nav-item(href='#')
+			| Account
+		a.nav-item(href='#')
+			| History
+		a.nav-item(href='#')
+			| Source
+		span.nav-item
+			a.button
+				span.icon
+					i.fa.fa-edit
+				span Edit
+			a.button.is-primary(href='#')
+				span.icon
+					i.fa.fa-plus
+				span Create
+
+

views/layout.pug

@@ -3,6 +3,7 @@ html
 	head
 		meta(http-equiv='X-UA-Compatible', content='IE=edge')
 		meta(charset='UTF-8')
+		meta(name='viewport', content='width=device-width, initial-scale=1')
 		meta(name='theme-color', content='#009688')
 		meta(name='msapplication-TileColor', content='#009688')
 		meta(name='msapplication-TileImage', content='/favicons/ms-icon-144x144.png')

views/pages/view.pug

+extends ../layout
+
+block content
+
+	section.section
+		.container.is-fluid
+			.columns
+
+				.column.is-narrow
+
+					aside.menu
+						p.menu-label
+							| General
+						ul.menu-list
+							li
+								a(href='#') Dashboard
+							li
+								a(href='#') Customers
+						p.menu-label
+							| Administration
+						ul.menu-list
+							li
+								a(href='#') Team Settings
+								li
+									a.is-active(href='#') Manage Your Team
+									ul
+										li
+											a(href='#') Members
+										li
+											a(href='#') Plugins
+										li
+											a(href='#') Add a member
+							li
+								a(href='#') Invitations
+							li
+								a(href='#') Authentication
+						p.menu-label
+							| Transactions
+						ul.menu-list
+							li
+								a(href='#') Payments
+							li
+								a(href='#') Transfers
+							li
+								a(href='#') Balance
+
+				.column
+					h1.title
+						| Primary bold title
+					h2.subtitle
+						| Primary bold subtitle
+