feat(courses): Add course list

app.js

@@ -1,3 +1,4 @@
+require('dotenv').config({ path: 'variables.env' })
 const express = require('express')
 const path = require('path')
 // const favicon = require('serve-favicon')
@@ -11,7 +12,7 @@ const categories = require('./routes/categories')
 const about = require('./routes/about')
 const settings = require('./routes/settings')
 const sitemap = require('./routes/sitemap')
-
+const {initClient} = require('./services/contentful')
 const app = express()
 
 // view engine setup
@@ -51,4 +52,7 @@ app.use(function (err, req, res, next) {
   res.render('error')
 })
 
+// init the contentful client
+initClient()
+
 module.exports = app

bin/www

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

public/stylesheets/style.css

@@ -129,7 +129,25 @@ label {
   padding: 2rem;
   box-shadow: $grad;
 }
-
+/* Course */
+.course {
+  position: relative;
+  background-color: white;
+  padding: 10px;
+  width: 30%;
+  height: 500px;
+  border-radius: 7px;
+  box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.45);
+  position:relative;
+}
+.course__description {
+  border-top: 2px solid black;
+  margin: 60px 0 20px 0;
+}
+.course__link {
+  position: absolute;
+  bottom:20px;
+}
 /* Home Page __ hero*/
 .hero {
   display: flex;

routes/courses.js

@@ -1,9 +1,18 @@
 const express = require('express')
+const {getCourses} = require('./../services/contentful')
+
 const router = express.Router()
 
 /* GET courses listing. */
-router.get('/', function (req, res, next) {
-  res.render('courses', { title: 'Courses' })
+router.get('/', async function (req, res, next) {
+  // we get all the entries with the content type `course`
+  let courses = []
+  try {
+    courses = await getCourses()
+  } catch (e) {
+    console.log('Error ', e)
+  }
+  res.render('courses', { title: 'Courses', courses: courses.items })
 })
 
 /* GET course detail. */

services/contentful.js

@@ -1,22 +1,25 @@
 const { createClient } = require('contentful')
 
-const client = createClient({space: process.env.CF_SPACE, accessToken: process.env.CF_ACCESS_TOKEN})
+let client = null
 
-export function getCourses () {
+exports.initClient = () => {
+  client = createClient({space: process.env.CF_SPACE, accessToken: process.env.CF_ACCESS_TOKEN})
+}
+exports.getCourses = () => {
   // to get all the courses we simply request from Contentful all the entries
   // with the content_type `course`
   return client.getEntries({content_type: 'course'})
 }
 
-export function getLessons (courseId) {
+exports.getLessons = (courseId) => {
   // TODO
 }
 
-export function getCategories () {
+exports.getCategories = () => {
   // TODO
 }
 
-export function getCoursesByCategory (category) {
+exports.getCoursesByCategory = (category) => {
   // TODO
 }
 

views/courses.pug

@@ -1,5 +1,8 @@
 extends layout
 
+include mixins/_courseCard
+
 block content
   h1= title
-  p Welcome to #{title}
+  each course in courses
+    +courseCard(course)

views/mixins/_courseCard.pug

@@ -0,0 +1,10 @@
+mixin courseCard(course = {fields: {title: '', description: '', categories: [], slug: ''}})
+  .course
+    .course__categories
+      if(course.fields.categories)
+        each category in course.fields.categories
+          a.course__categories--category(href=`categories/${category.fields.slug}`) #{category.title}
+    h1.course__title #{course.fields.title}
+    .course__description #{course.fields.shortDescription}
+    a.course__link(href=`/courses/${course.fields}`) view more 
+