added koa-handlebars example

thomasv5 · Nov 6, 2018 · b5786603ab15fd0eb01dabd42c6fa5b1a611a002 · b578660
1 parent f907a0f
commit b5786603ab15fd0eb01dabd42c6fa5b1a611a002
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 0 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,5 @@
+
+node_modules/
+coverage/
+public/
+views/
diff --git a/exercises/01_nodejs/01_templates_forms/simple_templating_koa/index.js b/exercises/01_nodejs/01_templates_forms/simple_templating_koa/index.js
@@ -0,0 +1,52 @@
+#!/usr/bin/env node
+
+'use strict'
+
+const Koa = require('koa')
+const Router = require('koa-router')
+const bodyParser = require('koa-bodyparser')
+const views = require('koa-views')
+
+const app = new Koa()
+app.use(bodyParser())
+app.use(require('koa-static')('public'))
+
+app.use(views(`${__dirname}/views`, { extension: 'handlebars' }, {
+	map: {
+		handlebars: 'handlebars'
+	}
+}))
+
+const router = new Router()
+
+const port = 8080
+
+router.get('/', async ctx => {
+	await ctx.render('home')
+})
+
+router.get('/date', async ctx => {
+	const d = new Date()
+	const date = `${d.getDate()}/${d.getMonth()+1}/${d.getFullYear()}`
+	const data = {
+		title: 'My First Template',
+		today: date
+	}
+	await ctx.render('date', data)
+})
+
+router.get('/food', async ctx => {
+	const food = [
+		{name: 'bread', qty: 5},
+		{name: 'butter', qty: 2},
+		{name: 'jam', qty: 1},
+		{name: 'cheese', qty: 4}
+	]
+	await ctx.render('food', {myFood: food})
+})
+
+app.use(router.routes())
+app.use(router.allowedMethods())
+const server = app.listen(port)
+
+module.exports = server
diff --git a/exercises/01_nodejs/01_templates_forms/simple_templating_koa/public/css/style.css b/exercises/01_nodejs/01_templates_forms/simple_templating_koa/public/css/style.css
@@ -0,0 +1,12 @@
+
+p, h2 {
+  font-family: verdana, sans-serif;
+}
+
+h2 {
+  color: #666;
+}
+
+img {
+  float: right;
+}
diff --git a/.../01_nodejs/01_templates_forms/simple_templating_koa/public/images/clock_big.png b/.../01_nodejs/01_templates_forms/simple_templating_koa/public/images/clock_big.png
diff --git a/...1_nodejs/01_templates_forms/simple_templating_koa/public/images/clock_small.png b/...1_nodejs/01_templates_forms/simple_templating_koa/public/images/clock_small.png
diff --git a/exercises/01_nodejs/01_templates_forms/simple_templating_koa/views/date.handlebars b/exercises/01_nodejs/01_templates_forms/simple_templating_koa/views/date.handlebars
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>{{title}}</title>
+  </head>
+  <body>
+    <h1>{{title}}</h1>
+		<p>This server date is {{today}}</p>
+  </body>
+</html>
diff --git a/exercises/01_nodejs/01_templates_forms/simple_templating_koa/views/food.handlebars b/exercises/01_nodejs/01_templates_forms/simple_templating_koa/views/food.handlebars
@@ -0,0 +1,15 @@
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>{{title}}</title>
+  </head>
+  <body>
+    <h2>My Favourite Food</h2>
+		<ol>
+			{{#each myFood}}
+			<li>{{this.name}}</li>
+			{{/each}}
+		</ol>
+  </body>
+</html>
diff --git a/exercises/01_nodejs/01_templates_forms/simple_templating_koa/views/home.handlebars b/exercises/01_nodejs/01_templates_forms/simple_templating_koa/views/home.handlebars
@@ -0,0 +1,12 @@
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>{{name}}</title>
+  </head>
+  <body>
+    <h2>Handlebars</h2>
+		<p><img src="images/clock_small.png" /></p>
+		<p>This page has been generated by the <strong>Handlebars</strong> template engine.</p>
+  </body>
+</html>