demo for nunjucks

bpd01001 · Feb 20, 2024 · b2e784f · b2e784f
1 parent aee3d34
commit b2e784f
Show file tree

Hide file tree

Showing 10 changed files with 834 additions and 18 deletions.
diff --git a/client-side/index.js b/client-side/index.js
@@ -45,7 +45,11 @@ app.get('/emoji-lister-server-side.html', (req, res) => {
 
 // Nunjucks Writes the HTML
 app.get('/emoji-lister-nunjucks.html', (req, res) => {
-    let html = nunjucks.render('emoji.njk', {emojis: emojis, name: "Brian"})
+    let html = nunjucks.render('emoji.njk', {
+        emojis: emojis, 
+        title: "Emoji Lister", 
+        bodyClass: 'emoji'
+    })
     res.send(html)
 })
 

diff --git a/client-side/package.json b/client-side/package.json
@@ -4,7 +4,8 @@
   "description": "Client-side rendering demo",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node --watch index.js"
   },
   "author": "",
   "license": "ISC",

diff --git a/client-side/static/css/style.css b/client-side/static/css/style.css
@@ -0,0 +1,9 @@
+
+
+.emoji p {
+
+}
+
+.bodyclass p {
+
+}
diff --git a/client-side/views/emoji.njk b/client-side/views/emoji.njk
@@ -1,16 +1,8 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Emoji Lister</title>
-</head>
-<body>
-    <h1>Emoji Lister for {{ name | upper }}</h1>
-    <main>
-        {% for  code, url in emojis %}
-            <img src="{{ url }}" alt="{{ code }}" title="{{ code }}">
-        {% endfor %}
-    </main>
-</body>
-</html>
+{% extends "parent.njk" %}
+
+{% block main %}
+    {% for  code, url in emojis %}
+        <img src="{{ url }}" alt="{{ code }}" title="{{ code }}">
+    {% endfor %}
+{% endblock %}
+
diff --git a/client-side/views/parent.njk b/client-side/views/parent.njk
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ title }}</title>
+    <link rel="stylesheet" href="/css/style.css">
+</head>
+<body class="{{bodyClass}}">
+    <h1>{{ title }}</h1>
+    <main>
+        {% block main %}No template content specified{% endblock %}
+    </main>
+</body>
+</html>
diff --git a/rick-and-morty/data.json b/rick-and-morty/data.json
diff --git a/rick-and-morty/index.js b/rick-and-morty/index.js
@@ -0,0 +1,30 @@
+const express = require('express')
+const nunjucks = require('nunjucks')
+// Import JSON dataset
+const data = require("./data.json")
+const app = express()
+const port = 3000   
+
+// Tell nunjucks where your template files are located (e.g., 'views' directory)
+nunjucks.configure('views', {
+    autoescape: true,
+    noCache: true, // <-- Should only be true when developing
+    express: app
+});
+
+// Endpoint for /characters shows all characters
+app.get('/characters', function (req, res) {
+    res.render('default.njk', { 
+        title: "Rick and Morty", 
+        data: data
+    });
+});
+
+// Endpoint for /characters/:id shows details for ONE characer
+app.get('/character/:id', function (req, res) {
+    res.render('character.njk', { /* character data goes here */ });
+});
+
+app.listen(port, () => {
+    console.log(`Example app listening on port ${port}`)
+})