fix(mixins): Add locale/api and active link
This commit is contained in:
committed by
Benedikt Rötsch
parent
07c5cc77b0
commit
713f554609
6
app.js
6
app.js
@@ -1,5 +1,6 @@
|
|||||||
require('dotenv').config({ path: 'variables.env' })
|
require('dotenv').config({ path: 'variables.env' })
|
||||||
const express = require('express')
|
const express = require('express')
|
||||||
|
const url = require('url')
|
||||||
const path = require('path')
|
const path = require('path')
|
||||||
const helpers = require('./helpers')
|
const helpers = require('./helpers')
|
||||||
// const favicon = require('serve-favicon')
|
// const favicon = require('serve-favicon')
|
||||||
@@ -31,6 +32,11 @@ app.use(express.static(path.join(__dirname, 'public')))
|
|||||||
// Pass custo helpers to all our templates
|
// Pass custo helpers to all our templates
|
||||||
app.use(function (req, res, next) {
|
app.use(function (req, res, next) {
|
||||||
res.locals.helpers = helpers
|
res.locals.helpers = helpers
|
||||||
|
const qs = url.parse(req.url).query
|
||||||
|
res.locals.queryString = qs ? `?${qs}` : ''
|
||||||
|
res.locals.query = req.query
|
||||||
|
res.locals.currentPath = req.path
|
||||||
|
console.log(req.path)
|
||||||
next()
|
next()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -9,8 +9,8 @@ router.get('/', async function (req, res, next) {
|
|||||||
let courses = []
|
let courses = []
|
||||||
let categories = []
|
let categories = []
|
||||||
try {
|
try {
|
||||||
courses = await getCourses()
|
courses = await getCourses(req.query.locale, req.query.api)
|
||||||
categories = await getCategories()
|
categories = await getCategories(req.query.locale, req.query.api)
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.log('Error ', e)
|
console.log('Error ', e)
|
||||||
}
|
}
|
||||||
@@ -23,7 +23,7 @@ router.get('/categories/:category', async function (req, res, next) {
|
|||||||
let courses = []
|
let courses = []
|
||||||
let categories = []
|
let categories = []
|
||||||
try {
|
try {
|
||||||
courses = await getCoursesByCategory(req.params.category)
|
courses = await getCoursesByCategory(req.params.category, req.query.locale, req.query.api)
|
||||||
categories = await getCategories()
|
categories = await getCategories()
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.log('Error ', e)
|
console.log('Error ', e)
|
||||||
@@ -33,7 +33,7 @@ router.get('/categories/:category', async function (req, res, next) {
|
|||||||
|
|
||||||
/* GET course detail. */
|
/* GET course detail. */
|
||||||
router.get('/:slug', async function (req, res, next) {
|
router.get('/:slug', async function (req, res, next) {
|
||||||
let course = await getCourse(req.params.slug)
|
let course = await getCourse(req.params.slug, req.query.locale, req.query.api)
|
||||||
const lessons = course.fields.lessons
|
const lessons = course.fields.lessons
|
||||||
const lessonIndex = lessons.findIndex((lesson) => lesson.fields.slug === req.params.lslug)
|
const lessonIndex = lessons.findIndex((lesson) => lesson.fields.slug === req.params.lslug)
|
||||||
const lesson = lessons[lessonIndex]
|
const lesson = lessons[lessonIndex]
|
||||||
@@ -42,7 +42,7 @@ router.get('/:slug', async function (req, res, next) {
|
|||||||
|
|
||||||
/* GET course lesson detail. */
|
/* GET course lesson detail. */
|
||||||
router.get('/:cslug/lessons/:lslug', async function (req, res, next) {
|
router.get('/:cslug/lessons/:lslug', async function (req, res, next) {
|
||||||
let course = await getCourse(req.params.cslug)
|
let course = await getCourse(req.params.cslug, req.query.locale, req.query.api)
|
||||||
const lessons = course.fields.lessons
|
const lessons = course.fields.lessons
|
||||||
const lessonIndex = lessons.findIndex((lesson) => lesson.fields.slug === req.params.lslug)
|
const lessonIndex = lessons.findIndex((lesson) => lesson.fields.slug === req.params.lslug)
|
||||||
const lesson = lessons[lessonIndex]
|
const lesson = lessons[lessonIndex]
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ const router = express.Router()
|
|||||||
|
|
||||||
/* GET home page. */
|
/* GET home page. */
|
||||||
router.get('/', async function (req, res, next) {
|
router.get('/', async function (req, res, next) {
|
||||||
const landingPage = await getLandingPage()
|
const landingPage = await getLandingPage(req.query.locale, req.query.api)
|
||||||
res.render('index', { title: 'Contentful University', landingPage })
|
res.render('index', { title: 'Contentful University', landingPage })
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ let cpaClient = null
|
|||||||
|
|
||||||
exports.initClient = (config = {space: process.env.CF_SPACE, accessToken: process.env.CF_ACCESS_TOKEN}) => {
|
exports.initClient = (config = {space: process.env.CF_SPACE, accessToken: process.env.CF_ACCESS_TOKEN}) => {
|
||||||
cdaClient = createClient(config)
|
cdaClient = createClient(config)
|
||||||
cpaClient = createClient({...config, host: 'preview.contentful.com'})
|
cpaClient = createClient({space: process.env.CF_SPACE, accessToken: process.env.CF_PREVIEW_ACCESS_TOKEN, host: 'preview.contentful.com'})
|
||||||
}
|
}
|
||||||
|
|
||||||
exports.getCourses = (locale = 'en-US', api = `cda`) => {
|
exports.getCourses = (locale = 'en-US', api = `cda`) => {
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
NODE_ENV=development
|
NODE_ENV=development
|
||||||
CF_SPACE=82t39nctsu20
|
CF_SPACE=82t39nctsu20
|
||||||
CF_ACCESS_TOKEN=8a3a5137487cc1d04203ee1ff206075bc5dd74342f6b53eb302111fe8d2f235e
|
CF_ACCESS_TOKEN=8a3a5137487cc1d04203ee1ff206075bc5dd74342f6b53eb302111fe8d2f235e
|
||||||
|
CF_PREVIEW_ACCESS_TOKEN=03265bbaa6138a24cbe370685b2c9993038ee9b6a3b011f30d5c86f7ea885fb3
|
||||||
PORT=3000
|
PORT=3000
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ block content
|
|||||||
each l in course.fields.lessons
|
each l in course.fields.lessons
|
||||||
if l.fields
|
if l.fields
|
||||||
li
|
li
|
||||||
a(href=`/courses/${course.fields.slug}/lessons/${l.fields.slug}`) #{l.fields.title}
|
a(href=`/courses/${course.fields.slug}/lessons/${l.fields.slug}${queryString}`) #{l.fields.title}
|
||||||
section.wrapper-with-sidebar__content
|
section.wrapper-with-sidebar__content
|
||||||
h1= course.fields.title
|
h1= course.fields.title
|
||||||
|
|
||||||
@@ -21,7 +21,7 @@ block content
|
|||||||
+lesson(lesson)
|
+lesson(lesson)
|
||||||
if lessonIndex + 1< lessons.length
|
if lessonIndex + 1< lessons.length
|
||||||
if lessons[lessonIndex + 1].fields
|
if lessons[lessonIndex + 1].fields
|
||||||
a.cta(href=`/courses/${course.fields.slug}/lessons/${lessons[lessonIndex + 1].fields.slug}`) View next lesson
|
a.cta(href=`/courses/${course.fields.slug}/lessons/${lessons[lessonIndex + 1].fields.slug}${queryString}`) View next lesson
|
||||||
else
|
else
|
||||||
p !{helpers.markdown(course.fields.description)}
|
p !{helpers.markdown(course.fields.description)}
|
||||||
a.cta(href=`/courses/${course.fields.slug}/lessons/${course.fields.lessons[0].fields.slug}`) Start course
|
a.cta(href=`/courses/${course.fields.slug}/lessons/${course.fields.lessons[0].fields.slug}${queryString}`) Start course
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ block content
|
|||||||
a.active(href=`/courses`) All courses
|
a.active(href=`/courses`) All courses
|
||||||
each category in categories
|
each category in categories
|
||||||
li
|
li
|
||||||
a(href=`/courses/categories/${category.sys.id}`) #{category.fields.title}
|
a(href=`/courses/categories/${category.sys.id}${queryString}`) #{category.fields.title}
|
||||||
section.wrapper-with-sidebar__content
|
section.wrapper-with-sidebar__content
|
||||||
h1= title
|
h1= title
|
||||||
.courses.grid-list-small
|
.courses.grid-list-small
|
||||||
|
|||||||
@@ -17,23 +17,23 @@ html
|
|||||||
fieldset
|
fieldset
|
||||||
label(for='api') API type:
|
label(for='api') API type:
|
||||||
select(name='api' onChange='this.form.submit()')
|
select(name='api' onChange='this.form.submit()')
|
||||||
option(value='CDA') Delivery API
|
option(value='cda' selected=query.api === 'cda') Delivery API
|
||||||
option(value='CPA') Preview API
|
option(value='cpa' selected=query.api === 'cpa') Preview API
|
||||||
fieldset
|
fieldset
|
||||||
label(for='locale') Language:
|
label(for='locale') Language:
|
||||||
select(name='locale' onChange='this.form.submit()')
|
select(name='locale' onChange='this.form.submit()')
|
||||||
option(value='en-US') English
|
option(value='en-US' selected=query.locale === 'en-US') English
|
||||||
option(value='de-DE') German
|
option(value='de-DE' selected=query.locale === 'de-DE') German
|
||||||
nav.header__navigation
|
nav.header__navigation
|
||||||
ul
|
ul
|
||||||
li
|
li
|
||||||
a.active(href='/') Home
|
a(href=`/${queryString}` class=(currentPath === '/'? 'active' : '')) Home
|
||||||
li
|
li
|
||||||
a(href='/courses') Courses
|
a(href=`/courses${queryString}` class=(currentPath.startsWith('/courses') ? 'active' : '') ) Courses
|
||||||
li
|
li
|
||||||
a(href='/about') About
|
a(href=`/about${queryString}` class=(currentPath.startsWith('/about') ? 'active' : '')) About
|
||||||
li
|
li
|
||||||
a(href='/settings') Settings
|
a(href=`/settings${queryString}` class=(currentPath.startsWith('/settings') ? 'active' : '')) Settings
|
||||||
|
|
||||||
#main__content
|
#main__content
|
||||||
block content
|
block content
|
||||||
@@ -45,13 +45,13 @@ html
|
|||||||
nav.footer__navigation
|
nav.footer__navigation
|
||||||
ul
|
ul
|
||||||
li
|
li
|
||||||
a.active(href='/') Home
|
a(href=`/${queryString}` class=(currentPath === '/'? 'active' : '')) Home
|
||||||
li
|
li
|
||||||
a(href='/courses') Courses
|
a(href=`/courses${queryString}` class=(currentPath.startsWith('/courses') ? 'active' : '') ) Courses
|
||||||
li
|
li
|
||||||
a(href='/about') About
|
a(href=`/about${queryString}` class=(currentPath.startsWith('/about') ? 'active' : '')) About
|
||||||
li
|
li
|
||||||
a(href='/settings') Settings
|
a(href=`/settings${queryString}` class=(currentPath.startsWith('/settings') ? 'active' : '')) Settings
|
||||||
.footer__apps
|
.footer__apps
|
||||||
a(href='#')
|
a(href='#')
|
||||||
img(src='/images/app-store-badge.png')
|
img(src='/images/app-store-badge.png')
|
||||||
|
|||||||
@@ -3,10 +3,10 @@ mixin courseCard(course = {fields: {title: '', description: '', categories: [],
|
|||||||
.course-card__categories
|
.course-card__categories
|
||||||
if(course.fields.categories)
|
if(course.fields.categories)
|
||||||
each category in course.fields.categories
|
each category in course.fields.categories
|
||||||
a.course-card__category(href=`/courses/categories/${category.sys.id}`) #{category.fields.title}
|
a.course-card__category(href=`/courses/categories/${category.sys.id}${queryString}`) #{category.fields.title}
|
||||||
h2.course-card__title= course.fields.title
|
h2.course-card__title= course.fields.title
|
||||||
.course-card__description-wrapper
|
.course-card__description-wrapper
|
||||||
p !{helpers.markdown(course.fields.shortDescription)}
|
p !{helpers.markdown(course.fields.shortDescription)}
|
||||||
.course-card__link-wrapper
|
.course-card__link-wrapper
|
||||||
a.course-card__link(href=`/courses/${course.fields.slug}`) view course
|
a.course-card__link(href=`/courses/${course.fields.slug}${queryString}`) view course
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user