refactor: Change views

app.js

@@ -7,6 +7,10 @@ const bodyParser = require('body-parser')
 
 const index = require('./routes/index')
 const courses = require('./routes/courses')
+const categories = require('./routes/categories')
+const about = require('./routes/about')
+const settings = require('./routes/settings')
+const sitemap = require('./routes/sitemap')
 
 const app = express()
 
@@ -24,6 +28,10 @@ app.use(express.static(path.join(__dirname, 'public')))
 
 app.use('/', index)
 app.use('/courses', courses)
+app.use('/categories', categories)
+app.use('/about', about)
+app.use('/settings', settings)
+app.use('/sitemap', sitemap)
 
 // catch 404 and forward to error handler
 app.use(function (req, res, next) {

bin/www

@@ -6,7 +6,7 @@
 
 const app = require('../app')
 const http = require('http')
-
+require('dotenv').config({ path: 'variables.env' })
 /**
  * Get port from environment and store in Express.
  */

package.json

@@ -10,8 +10,10 @@
   },
   "dependencies": {
     "body-parser": "~1.15.2",
+    "contentful": "^4.6.1",
     "cookie-parser": "~1.4.3",
     "debug": "~2.2.0",
+    "dotenv": "^4.0.0",
     "express": "~4.14.0",
     "morgan": "~1.7.0",
     "pug": "~2.0.0-beta6",

public/stylesheets/style.css

@@ -1,8 +1,144 @@
+* {
+  box-sizing: border-box;
+}
+
 body {
-  padding: 50px;
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+  background-color: #eee;
+  color: #333;
+  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1rem;
+  line-height: 1.5em;
+}
+
+header, section {
+  background-color: #fff;
+  margin: 0 auto 2rem;
+  padding: 1rem 2rem 2rem;
+  width: 80%;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: Montserrat, Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-weight: bold;
+  line-height: 1.2em;
+  margin-bottom: 1.5rem;
+}
+
+h1 {
+  font-size: 2rem;
+  text-align: center;
+}
+
+h2 {
+  font-size: 1.25rem;
+  margin-bottom: .5rem;
 }
 
 a {
-  color: #00B7FF;
+  color: #b13131;
+  text-decoration: none;
 }
+
+p {
+  margin-bottom: 1.5rem;
+}
+h2 + p {
+  color: #757575;
+  font-family: Montserrat, Helvetica Neue, Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  margin-top: -.5rem;
+  text-transform: uppercase;
+}
+p code {
+  background-color: rgba(251, 175, 93, 0.25);
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  border-radius: 4px;
+  display: inline-block;
+  margin: 0 .25rem;
+  padding: 0 .25rem;
+}
+
+ul {
+  border-bottom: 1px solid #ccc;
+  list-style: none;
+  margin: 0 0 1.5rem 0;
+  padding: 0;
+}
+
+li {
+  background-image: linear-gradient(to bottom, transparent 50%, #a2d39c 50%, #a2d39c 95%, #7cc576 95%);
+  background-size: 100% 200%;
+  background-position: top center;
+  color: #666;
+  display: block;
+  text-align: center;
+  text-decoration: none;
+  transition: all .25s ease-in-out;
+}
+li:hover {
+  background-position: bottom center;
+  color: rgba(0, 0, 0, 0.75);
+}
+li a {
+  color: #666;
+  display: block;
+  padding: 1rem 0;
+  transition: all .25s ease-in-out;
+}
+
+nav ul {
+  background-color: #eee;
+  border: 0;
+  display: flex;
+  padding: 0 2rem;
+  position: relative;
+  left: -2rem;
+  width: calc(100% + 4rem);
+}
+nav ul li {
+  background-image: linear-gradient(to bottom, transparent 50%, #448ccb 50%, #448ccb 95%, #0072bc 95%);
+  flex: 1 1 auto;
+}
+nav ul li a:hover {
+  color: #eee;
+}
+
+nav ul li {
+  border-left: 2px solid #ddd;
+  transform: skew(-15deg);
+}
+nav ul li:last-child {
+  border-right: 2px solid #ddd;
+}
+nav ul li a {
+  transform: skew(15deg);
+}
+
+/* Home Page __ hero*/
+.hero {
+  display: flex;
+  justify-content: space-between;
+}
+.hero__image {
+  background-color: #20B5B6;
+  width: 65%;
+  height: 600px;
+  border-radius: .375rem;
+  box-shadow: 5px 5px 25px 0 rgba(46,61,73,.2);
+}
+.featured-cards-list {
+  width: 30%;
+  height: 600px;
+  display:flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.featured-cards__list {
+  background-color: #00AAE0;
+  height: 150px;
+  border-radius: .375rem;
+  box-shadow: 5px 5px 25px 0 rgba(46,61,73,.2);
+}
+
+

routes/categories.js

@@ -0,0 +1,9 @@
+const express = require('express')
+const router = express.Router()
+
+/* GET courses listing. */
+router.get('/', function (req, res, next) {
+  res.render('categories', { title: 'Categories' })
+})
+
+module.exports = router

routes/courses.js

@@ -6,9 +6,14 @@ router.get('/', function (req, res, next) {
   res.render('courses', { title: 'Courses' })
 })
 
-/* GET courses listing. */
+/* GET course detail. */
 router.get('/:slug', function (req, res, next) {
   res.render('courses', { title: `Course with slug ${req.params.slug}` })
 })
 
+/* GET course lesson detail. */
+router.get('/:cslug/lessons/:lslug', function (req, res, next) {
+  res.render('courses', { title: `Course with slug ${req.params.cslug}` })
+})
+
 module.exports = router

routes/index.js

@@ -3,7 +3,7 @@ const router = express.Router()
 
 /* GET home page. */
 router.get('/', function (req, res, next) {
-  res.render('index', { title: 'Express' })
+  res.render('index', { title: 'Welcome to Contentful university' })
 })
 
 module.exports = router

routes/lessons.js

@@ -1,14 +0,0 @@
-const express = require('express')
-const router = express.Router()
-
-/* GET lessons listing. */
-router.get('/', function (req, res, next) {
-  res.render('lessons', { title: 'Lessons' })
-})
-
-/* GET lessons listing. */
-router.get('/:slug', function (req, res, next) {
-  res.render('lessons', { title: `Lesson with slug ${req.params.slug}` })
-})
-
-module.exports = router

routes/sitemap.js

@@ -0,0 +1,9 @@
+const express = require('express')
+const router = express.Router()
+
+/* GET seeting page. */
+router.get('/', function (req, res, next) {
+  res.render('sitemap', { title: 'Sitemap' })
+})
+
+module.exports = router

services/contentful.js

@@ -0,0 +1,20 @@
+const { createClient } = require('contentful')
+
+const client = createClient({space: process.env.CF_SPACE, accessToken: process.env.CF_ACCESS_TOKEN})
+
+export function getCourses () {
+  // TODO
+}
+
+export function getLessons (courseId) {
+  // TODO
+}
+
+export function getCategories () {
+  // TODO
+}
+
+export function getCoursesByCategory (category) {
+  // TODO
+}
+

variables.env

@@ -0,0 +1,4 @@
+NODE_ENV=development
+CF_SPACE=82t39nctsu20
+CF_ACCESS_TOKEN=8a3a5137487cc1d04203ee1ff206075bc5dd74342f6b53eb302111fe8d2f235e
+PORT=3000

views/about.pug

@@ -0,0 +1,5 @@
+extends layout
+
+block content
+  h1= title
+  p Welcome to #{title}

views/categories.pug

@@ -0,0 +1,5 @@
+extends layout
+
+block content
+  h1= title
+  p Welcome to #{title}

views/course.pug

@@ -0,0 +1,5 @@
+extends layout
+
+block content
+  h1= title
+  p Welcome to #{title}

views/index.pug

@@ -1,5 +1,11 @@
 extends layout
 
 block content
-  h1= title
-  p Welcome to #{title}
+  .container
+    section.hero
+      .hero__image
+      .featured-cards-list
+        .featured-cards__list
+        .featured-cards__list
+        .featured-cards__list
+

views/layout.pug

@@ -4,4 +4,22 @@ html
     title= title
     link(rel='stylesheet', href='/stylesheets/style.css')
   body
+    header
+      .header__navbar--logo
+        a.logo--link(href='#') Contentful University
+      .header__navbar--navigation
+        nav
+          ul
+            li
+              a.button--navigation(href='/') Home
+            li
+              a.button--navigation(href='/courses') Courses
+            li
+              a.button--navigation(href='/categories') Categories
+            li
+              a.button--navigation(href='/about') About
+            li
+              a.button--navigation(href='/settings') Settings
+            li
+              a.button--navigation(href='/sitemap') Sitemap
     block content

views/settings.pug

@@ -0,0 +1,5 @@
+extends layout
+
+block content
+  h1= title
+  p Welcome to #{title}

views/sitemap.pug

@@ -0,0 +1,5 @@
+extends layout
+
+block content
+  h1= title
+  p Welcome to #{title}