Merge pull request #21 from fac-14/designsystem

Relates #11 - Add design system document and sass middleware.
fac-14 · Sep 12, 2018 · 2bd7db9 · 2bd7db9
2 parents 72c7639 + 0f84c2e
commit 2bd7db9
Show file tree

Hide file tree

Showing 11 changed files with 726 additions and 177 deletions.
diff --git a/Documents/techaccessdesignsystem.png b/Documents/techaccessdesignsystem.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "env2": "^2.2.2",
     "express": "^4.16.3",
     "express-handlebars": "^3.0.0",
+    "node-sass-middleware": "^0.11.0",
     "pg-promise": "^8.4.6",
     "querystring": "^0.2.0",
     "sequelize": "^4.38.0",

diff --git a/public/.gitkeep b/public/.gitkeep
diff --git a/public/images/unsplashpeoplecoding.jpeg b/public/images/unsplashpeoplecoding.jpeg
diff --git a/Documents/.gitkeep → public/stylesheets/.gitkeep b/Documents/.gitkeep → public/stylesheets/.gitkeep
diff --git a/src/app.js b/src/app.js
@@ -1,5 +1,6 @@
 const express = require('express');
 const handlebars = require('express-handlebars');
+var sassMiddleware = require('node-sass-middleware');
 const path = require('path');
 const controllers = require('./controllers/index.js');
 // const helpers = require('./views/helpers/index.js');
@@ -23,6 +24,13 @@ app.engine(
 app.set('port', process.env.PORT || 1337);
 app.set('host', process.env.PORT || 'localhost');
 //app.use(favicon(path.join(__dirname, '..', 'public', 'favicon.ico')));
+app.use(sassMiddleware({
+  src: __dirname,
+  dest: path.join(__dirname, '..', 'public'),
+  debug: true,
+  outputStyle: 'compressed',
+  prefix:  '/stylesheets'
+}));
 app.use(express.static(path.join(__dirname, '..', 'public')));
 app.use(controllers);
 

diff --git a/src/controllers/home.js b/src/controllers/home.js
@@ -1,3 +1,3 @@
 exports.get = (req, res) => {
-  res.send('Hello there! You have a server');
+  res.render('home', {activePage:{home: true}})
 }
diff --git a/src/views/home.hbs b/src/views/home.hbs
@@ -0,0 +1,7 @@
+ <nav>Tech Access App</nav>
+        <figure>
+            <img src='/images/unsplashpeoplecoding.jpeg' alt='image of people coding'>
+        </figure>
+        <section>
+            <p>Think that a career in tech isn't for 'someone like you?' Let us prove you wrong.</p>
+        </section>
diff --git a/src/views/layouts/main.hbs b/src/views/layouts/main.hbs
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+{{>htmlhead}}
+<body>
+    <main>
+       {{{body}}}
+    </main>
+</body>
+</html>
diff --git a/src/views/partials/htmlhead.hbs b/src/views/partials/htmlhead.hbs
@@ -0,0 +1,6 @@
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>tech-access</title>
+</head>