Switch to handlebars for templating

author: Mark Powers <markppowers0@gmail.com> 2020-11-15 21:43:36 -0600
committer: Mark Powers <markppowers0@gmail.com> 2020-11-15 21:43:36 -0600
commit: 63668ca89f055b2233a8aa6caf4213853918d68d (patch)
tree: 0d9bf673daaadba36b70a3b7651a1c46c074e938 /src
parent: 104d9fd314d6f8650c8e032164c7db00c869eea7 (diff)
16 files changed, 269 insertions, 156 deletions
diff --git a/src/css/mobile-styles.css b/src/css/mobile-styles.css
new file mode 100644
index 0000000..36553cc
--- /dev/null
+++ b/src/css/mobile-styles.css
@@ -0,0 +1,23 @@
+@media screen and (min-width: 900px) {
+    body {
+        width: 100%;
+        /* margin: auto; */
+    }
+    .card-img {
+        display: flex;
+        flex-flow: row wrap;
+        align-content: flex-start;
+    }
+    .card img {
+        width: 400px;
+    }
+    form input[type=text], input[type=password], input[type=email] {
+        max-width: 600px;
+    }
+    form textarea {
+        max-width: 600px;
+    }
+    form input[type=submit] {
+        margin-left: 0px;
+    }
+}
+\ No newline at end of file
diff --git a/src/css/styles.css b/src/css/styles.css
index 522b007..f406104 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -11,8 +11,9 @@
   
 
 body {
-    width: 100%;
-    margin: 0px;
+    width: 80%;
+    margin: auto;
+    /* margin: 0px; */
     background-color: var(--background); 
     font-family: Arial, Helvetica, sans-serif;
 }
@@ -93,7 +94,7 @@ a {
     width: 100%;
 }
 .feed {
-    width: 80%;
+    /* width: 80%; */
     min-width: 200px;
     margin: auto;
     display: flex;
@@ -109,30 +110,6 @@ p {
     margin-top: 0;
 }
 
-@media screen and (min-width: 900px) {
-    body {
-        width: 100%;
-        /* margin: auto; */
-    }
-    .card-img {
-        display: flex;
-        flex-flow: row wrap;
-        align-content: flex-start;
-    }
-    .card img {
-        width: 400px;
-    }
-    form input[type=text], input[type=password], input[type=email] {
-        max-width: 600px;
-    }
-    form textarea {
-        max-width: 600px;
-    }
-    form input[type=submit] {
-        margin-left: 0px;
-    }
-}
-
 .titlebar {
     padding: 5px;
     border-top: 1px solid var(--light-text);
diff --git a/src/html/admin.html b/src/html/admin.html
index c6683c3..3eaa60a 100644
--- a/src/html/admin.html
+++ b/src/html/admin.html
@@ -32,6 +32,7 @@
 </head>
 
 <body>
+    <noscript>Please enable Javascript!</noscript>
     <h1>
         <a class="navigation" href="/" title="marks.kitchen">&lt;</a>
         Admin
@@ -135,4 +136,4 @@
     </div>
 </body>
 
-</html>
-\ No newline at end of file
+</html>
diff --git a/src/index.js b/src/index.js
index 62d8bb5..4b9a3c6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -100,8 +100,9 @@ function setUpModels(){
 }
 
 const models = setUpModels();
+const templates = require('./templates');
 sync();
 
-server.setUpRoutes(models, jwtFunctions, database);
+server.setUpRoutes(models, jwtFunctions, database, templates.setUpTemplates());
 server.listen(config.port);
 
diff --git a/src/server.js b/src/server.js
index 7be1237..e82fc12 100644
--- a/src/server.js
+++ b/src/server.js
@@ -87,7 +87,7 @@ async function constructFeedFromType(models, postType){
     return constructFeed(posts)
 }
 
-async function constructSinglePost(models, postType, postId){
+async function formatPostsforSingle(models, postType, postId){
     var posts = await models.posts.findAll({
         where: { 
             type: postType,
@@ -96,11 +96,25 @@ async function constructSinglePost(models, postType, postId){
     });
     posts = posts.map(x => x.get({ plain: true }));
     await addImagesAndTagsToPosts(models, posts)
-    
-    return constructFeed(posts)
+    posts.forEach(post => {
+        post.createdAt = post.createdAt.toString().substring(0, 10)
+    })
+    return posts
+}
+
+async function formatPostsForType(models, postType){
+    var posts = await models.posts.findAll({
+        where: { type: postType }, order: [['createdAt', 'DESC']]
+    });
+    posts = posts.map(x => x.get({ plain: true }));
+    await addImagesAndTagsToPosts(models, posts)
+    posts.forEach(post => {
+        post.createdAt = post.createdAt.toString().substring(0, 10)
+    })
+    return posts;
 }
 
-function setUpRoutes(models, jwtFunctions, database) {
+function setUpRoutes(models, jwtFunctions, database, templates) {
     // Authentication routine
     server.use(function (req, res, next) {
         if (req.path.toLowerCase().startsWith("/admin")) {
@@ -142,41 +156,25 @@ function setUpRoutes(models, jwtFunctions, database) {
     })
 
     server.get('/', async (req, res) => {
-        var html = []
-        html.push(templates["index"]["pre"])
-        html.push(templates["titlebar"])
-        html.push(await constructFeedFromType(models, "index"))
-        html.push(templates["footer"])
-        html.push(templates["index"]["post"])
-    
-        res.status(200).send(html.join(""))
+        let posts = await formatPostsForType(models, "index")
+        let body = templates["index"]({posts});
+        res.status(200).send(body)
     })
     server.get('/bread', async (req, res) => {
-        var html = []
-        html.push(templates["bread"]["pre"])
-        html.push(await constructFeedFromType(models, "bread"))
-        html.push(templates["footer"])
-        html.push(templates["bread"]["post"])
-    
-        res.status(200).send(html.join(""))
+        let posts = await formatPostsForType(models, "bread")
+        let body = templates["bread"]({posts});
+        res.status(200).send(body)
     })
     server.get('/blog', async (req, res) => {
-        var html = []
-        html.push(templates["blog"]["pre"])
-        html.push(await constructFeedFromType(models, "blog"))
-        html.push(templates["footer"])
-        html.push(templates["blog"]["post"])
-    
-        res.status(200).send(html.join(""))
+        let posts = await formatPostsForType(models, "blog")
+        let body = templates["blog"]({posts});
+        res.status(200).send(body)
     })
     server.get('/post/:type/:id', async (req, res) => {
-        var html = []
-        html.push(templates["blog"]["pre"])
-        html.push(await constructSinglePost(models, req.params.type, req.params.id))
-        html.push(templates["footer"])
-        html.push(templates["blog"]["post"])
-    
-        res.status(200).send(html.join(""))
+        let posts = await formatPostsforSingle(models, req.params.type, req.params.id)
+        let date = posts[0].createdAt;
+        let body = templates["blog-single"]({posts, date});
+        res.status(200).send(body)
     })
     server.get('/tags/:name', async (req, res) => {
         const { name } = req.params;
@@ -189,15 +187,12 @@ function setUpRoutes(models, jwtFunctions, database) {
         });
         posts = posts.map(x => x.get({ plain: true }));
         await addImagesAndTagsToPosts(models, posts)
+        posts.forEach(post => {
+            post.createdAt = post.createdAt.toString().substring(0, 10)
+        })
 
-        var html = []
-        html.push(templates["blog"]["pre"])
-        html.push(`<h1>#${name}</h1>`)
-        html.push(await constructFeed(posts))
-        html.push(templates["footer"])
-        html.push(templates["blog"]["post"])
-    
-        res.status(200).send(html.join(""))
+        let body = templates["tags"]({posts, name})
+        res.status(200).send(body)
     })
     
     server.get('/admin', (req, res) => res.sendFile(__dirname + "/html/admin.html"));
@@ -206,14 +201,23 @@ function setUpRoutes(models, jwtFunctions, database) {
     server.get('/email-success', (req, res) => res.sendFile(__dirname + "/html/email-success.html"))
     server.get('/feed', (req, res) => res.sendFile(__dirname + "/html/feed.html"));
     server.get('/essay', (req, res) => res.sendFile(__dirname + "/html/essay.html"));
-    server.get('/misc', (req, res) => res.sendFile(__dirname + "/html/misc.html"));
+    // server.get('/misc', (req, res) => res.sendFile(__dirname + "/html/misc.html"));
     server.get('/word-square', (req, res) => res.sendFile(__dirname + "/html/word-square.html"));
     server.get('/chess', (req, res) => res.sendFile(__dirname + "/html/chess.html"));
     server.get('/admin/chess', async (req, res, next) => res.sendFile(__dirname + "/html/chess.html"));
-    server.get('/projects', (req, res) => res.sendFile(__dirname + "/html/projects.html"));
+    // server.get('/projects', (req, res) => res.sendFile(__dirname + "/html/projects.html"));
     server.get('/zines', (req, res) => res.sendFile(__dirname + "/public/zines.html"));
     server.use('/static', express.static(__dirname + '/public'))
 
+    server.get('/misc', async (req, res) => {
+        let body = templates["misc"]();
+        res.status(200).send(body)
+    })
+    server.get('/projects', async (req, res) => {
+        let body = templates["projects"]();
+        res.status(200).send(body)
+    })
+
     server.get('/wordsquares/best', async (req, res, next) => {
         var best = await database.query("select words, name from wordsquares where best = 1", { type: database.QueryTypes.SELECT })
         res.status(200).send({ best: best });
diff --git a/src/templates.js b/src/templates.js
index b748853..293f0e4 100644
--- a/src/templates.js
+++ b/src/templates.js
@@ -1,86 +1,33 @@
-module.exports = {
-    titlebar: `<nav class="titlebar">
-    <div>
-    <a href="bread" class="btn btn-primary">Bread</a>
-    <a href="blog" class="btn btn-primary">Blog</a>
-    <!-- <a href="essay" class="btn btn-primary">Essays</a> (Hello inspector, this page exists, but just isn't very interesting, so I'm removing the link) -->
-    <a href="https://games.marks.kitchen" class="btn btn-primary">Games</a>
-    <a href="email" class="btn btn-primary">Email</a>
-    <a href="misc" class="btn btn-primary">Misc</a>
-</div>
-</nav>`,
-    footer: `<footer>
-    <div>Mark Powers (<span class="email">mark</span>) &#169; 2020 </div>
-    <div>
-        <a href="/feed.xml">RSS feed</a>
-        <span class="spacer"></span>
-        <a href="https://github.com/Mark-Powers">GitHub</a>
-        <span class="spacer"></span>
-        <a href="https://git.marks.kitchen/mark">Gitea</a>
-        <span class="spacer"></span>
-        <a href="https://fosstodon.org/@markp">Mastodon</a>
-        <span class="spacer"></span>
-        <br>
-    </div>
-</footer>`,
+const fs = require('fs');
+const path = require('path');
+const handlebars = require("handlebars");
+
+function loadTemplate(templates, name, filepath){
+    const templateContent = fs.readFileSync(filepath).toString()
+    templates[name] = handlebars.compile(templateContent);
+}
+
+function loadPartial(name, filepath){
+    handlebars.registerPartial(name, fs.readFileSync(filepath).toString());
+}
+
+function setUpTemplates(){
+    loadPartial("navigation", path.join(__dirname, "templates/navigation.html"))
+    loadPartial("footer", path.join(__dirname, "templates/footer.html"))
+    loadPartial("feed", path.join(__dirname, "templates/feed.html"))
 
-    index: {
-        pre: `<!doctype html>
-        <html lang="en">
-        
-        <head>
-            <title>Mark's Kitchen</title>
-            <meta charset="UTF-8">
-            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-            <link rel="stylesheet" type="text/css" href="/css/styles.css">
-            <link rel="shortcut icon" href="/favicon.ico">
-            <link rel="alternate" type="application/rss+xml" title="RSS Feed for marks.kitchen" href="/feed.xml" />
-        </head>
-        
-        <body>
-            <h1>Welcome to Mark's Kitchen</h1>`,
-            post: `</body>
-            </html>`
-    },
-    bread: {
-        pre: `<!doctype html>
-        <html lang="en">
-        
-        <head>
-            <title>Mark's Kitchen - Bread</title>
-            <meta charset="UTF-8">
-            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-            <link rel="stylesheet" type="text/css" href="/css/styles.css">
-            <link rel="shortcut icon" href="/favicon.ico">
-        </head>
-        
-        <body>
-            <h1>
-                <a class="navigation" href="/" title="marks.kitchen">&lt;</a>
-                Bread
-            </h1>
-            Some highlights (and lowlights) of breadmaking`,
-            post: `</body>
-            </html>`
-    },
-    blog: {
-        pre: `<!doctype html>
-        <html lang="en">
-        
-        <head>
-            <title>Mark's Kitchen - Blog</title>
-            <meta charset="UTF-8">
-            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-            <link rel="stylesheet" type="text/css" href="/css/styles.css">
-            <link rel="shortcut icon" href="/favicon.ico">
-        </head>
-        
-        <body>
-            <h1>
-                <a class="navigation" href="/" title="marks.kitchen">&lt;</a>
-                Blog
-            </h1>`,
-            post: `</body>
-            </html>`
-    }
+    let templates = {};
+    loadTemplate(templates, "index", path.join(__dirname, 'templates/index.html'))
+    loadTemplate(templates, "bread", path.join(__dirname, 'templates/bread.html'))
+    loadTemplate(templates, "blog", path.join(__dirname, 'templates/blog.html'))
+    loadTemplate(templates, "blog-single", path.join(__dirname, 'templates/blog-single.html'))
+    loadTemplate(templates, "tags", path.join(__dirname, 'templates/tags.html'))
+    loadTemplate(templates, "misc", path.join(__dirname, 'templates/misc.html'))
+    loadTemplate(templates, "projects", path.join(__dirname, 'templates/projects.html'))
+    return templates
+}
+
+
+module.exports = {
+    setUpTemplates
 }
 \ No newline at end of file
diff --git a/src/templates/blog-single.html b/src/templates/blog-single.html
new file mode 100644
index 0000000..8622007
--- /dev/null
+++ b/src/templates/blog-single.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <title>Mark's Kitchen - Blog</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="stylesheet" type="text/css" href="/css/styles.css">
+    <link rel="shortcut icon" href="/favicon.ico">
+</head>
+
+<body>
+    <h1>
+        <a class="navigation" href="/" title="marks.kitchen">&lt;</a>
+        <a class="navigation" href="/blog" title="blog">&lt;</a>
+        Post from {{date}}
+    </h1>
+    {{> navigation}}
+    {{> feed}}
+    {{> footer}}
+</body>
+
+</html>
+\ No newline at end of file
diff --git a/src/templates/blog.html b/src/templates/blog.html
new file mode 100644
index 0000000..40b86f5
--- /dev/null
+++ b/src/templates/blog.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <title>Mark's Kitchen - Blog</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="stylesheet" type="text/css" href="/css/styles.css">
+    <link rel="shortcut icon" href="/favicon.ico">
+</head>
+
+<body>
+    <h1>
+        <a class="navigation" href="/" title="marks.kitchen">&lt;</a>
+        Blog
+    </h1>
+    {{> navigation}}
+    {{> feed}}
+    {{> footer}}
+</body>
+
+</html>
+\ No newline at end of file
diff --git a/src/templates/bread.html b/src/templates/bread.html
new file mode 100644
index 0000000..b5d02ed
--- /dev/null
+++ b/src/templates/bread.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <title>Mark's Kitchen - Bread</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="stylesheet" type="text/css" href="/css/styles.css">
+    <link rel="shortcut icon" href="/favicon.ico">
+</head>
+
+<body>
+    <h1>
+        <a class="navigation" href="/" title="marks.kitchen">&lt;</a>
+        Bread
+    </h1>
+    <p>Some highlights (and lowlights) of breadmaking</p>
+    {{> navigation}}
+    {{> feed}}
+    {{> footer}}
+</body>
+
+</html>
+\ No newline at end of file
diff --git a/src/templates/feed.html b/src/templates/feed.html
new file mode 100644
index 0000000..2158f3e
--- /dev/null
+++ b/src/templates/feed.html
@@ -0,0 +1,24 @@
+<div class="feed">
+    {{#each posts}}
+    <div class="card">
+        <p class="card-text">{{{this.description}}}</p>
+        <div class="card-img">
+            {{#each this.images}}
+            <span>
+                <a href="/{{this}}"><img src="/{{this}}"></a>
+            </span>
+            {{/each}}
+        </div>
+        <p class="date">
+            <a href="/post/{{this.type}}/{{this.id}}">
+                {{this.createdAt}}
+            </a>
+            <span>
+                {{#each this.tags}}
+                <a class="tag" href="/tags/{{this}}">{{this}}</a>
+                {{/each}}
+            </span>
+        </p>
+    </div>
+    {{/each}}
+</div>
+\ No newline at end of file
diff --git a/src/templates/footer.html b/src/templates/footer.html
new file mode 100644
index 0000000..617b5fa
--- /dev/null
+++ b/src/templates/footer.html
@@ -0,0 +1,14 @@
+<footer>
+    <div>Mark Powers (<span class="email">mark</span>) &#169; 2020 </div>
+    <div>
+        <a href="/feed.xml">RSS feed</a>
+        <span class="spacer"></span>
+        <a href="https://github.com/Mark-Powers">GitHub</a>
+        <span class="spacer"></span>
+        <a href="https://git.marks.kitchen">Git Repos</a>
+        <span class="spacer"></span>
+        <a href="https://fosstodon.org/@markp">Mastodon</a>
+        <span class="spacer"></span>
+        <br>
+    </div>
+</footer>
+\ No newline at end of file
diff --git a/src/templates/index.html b/src/templates/index.html
new file mode 100644
index 0000000..efb7369
--- /dev/null
+++ b/src/templates/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <title>Mark's Kitchen</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="stylesheet" type="text/css" href="/css/styles.css">
+    <link rel="shortcut icon" href="/favicon.ico">
+    <link rel="alternate" type="application/rss+xml" title="RSS Feed for marks.kitchen" href="/feed.xml" />
+</head>
+
+<body>
+    <h1>Welcome to Mark's Kitchen</h1>
+    {{> navigation}}
+    {{> feed}}
+    {{> footer}}
+</body>
+
+</html>
+\ No newline at end of file
diff --git a/src/html/misc.html b/src/templates/misc.html
index 6ab0a15..9fb376a 100644
--- a/src/html/misc.html
+++ b/src/templates/misc.html
@@ -15,6 +15,7 @@
         <a class="navigation" href="/" title="marks.kitchen">&lt;</a>
         Miscellany
     </h1>
+    {{> navigation}}
     <div>
         <a href="projects" class="btn btn-primary">Projects</a>
     </div>
diff --git a/src/templates/navigation.html b/src/templates/navigation.html
new file mode 100644
index 0000000..6bb10f1
--- /dev/null
+++ b/src/templates/navigation.html
@@ -0,0 +1,10 @@
+<nav class="titlebar">
+    <div>
+        <a href="/" class="btn btn-primary">Home</a>
+        <a href="/bread" class="btn btn-primary">Bread</a>
+        <a href="/blog" class="btn btn-primary">Blog</a>
+        <a href="https://games.marks.kitchen" class="btn btn-primary">Games</a>
+        <a href="/email" class="btn btn-primary">Email</a>
+        <a href="/misc" class="btn btn-primary">Misc</a>
+    </div>
+</nav>
+\ No newline at end of file
diff --git a/src/html/projects.html b/src/templates/projects.html
index fef817f..cf3361a 100644
--- a/src/html/projects.html
+++ b/src/templates/projects.html
@@ -15,6 +15,7 @@
             <a class="navigation" href="/misc" title="marks.kitchen/misc">&lt;</a>
             Projects
         </h1>
+        {{> navigation}}
         <h2>A collection of my projects, mostly programming</h2>
         <div id="feed" class="feed projects">
             <div class="card">
diff --git a/src/templates/tags.html b/src/templates/tags.html
new file mode 100644
index 0000000..31858e8
--- /dev/null
+++ b/src/templates/tags.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <title>Mark's Kitchen - Tags</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="stylesheet" type="text/css" href="/css/styles.css">
+    <link rel="shortcut icon" href="/favicon.ico">
+</head>
+
+<body>
+    <h1>
+        <a class="navigation" href="/" title="marks.kitchen">&lt;</a>
+        Tag {{name}}
+    </h1>
+    {{> navigation}}
+    {{> feed}}
+    {{> footer}}
+</body>
+
+</html>
+\ No newline at end of file
author	Mark Powers <markppowers0@gmail.com>	2020-11-15 21:43:36 -0600
committer	Mark Powers <markppowers0@gmail.com>	2020-11-15 21:43:36 -0600
commit	63668ca89f055b2233a8aa6caf4213853918d68d (patch)
tree	0d9bf673daaadba36b70a3b7651a1c46c074e938 /src
parent	104d9fd314d6f8650c8e032164c7db00c869eea7 (diff)