From 5a5b666794b688881eb1e1635bf9f2ceb3cc4346 Mon Sep 17 00:00:00 2001 From: Mark Powers Date: Sat, 19 Dec 2020 22:35:50 -0600 Subject: Add title to posts --- src/css/styles.css | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'src/css/styles.css') diff --git a/src/css/styles.css b/src/css/styles.css index f406104..ab634ec 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -30,6 +30,10 @@ h1 { margin-left: 20px; } +.card-title { + margin-left: 0; +} + @keyframes zoom-left { 0% {left: 100%; } 100% {left: 0;} -- cgit v1.2.3 From 572671a916335fbbe8766b37b683b8a585c49abd Mon Sep 17 00:00:00 2001 From: Mark Powers Date: Thu, 24 Dec 2020 12:48:58 -0600 Subject: Add background changer and css --- src/css/styles.css | 12 +++++++++++- src/icon/favicon.ico | Bin 1150 -> 0 bytes src/icon/favicon.svg | 1 - src/js/background.js | 29 +++++++++++++++++++++++++++++ src/res/change.jpg | Bin 0 -> 4689611 bytes src/res/day.jpg | Bin 0 -> 3710493 bytes src/res/favicon.ico | Bin 0 -> 1150 bytes src/res/favicon.svg | 1 + src/res/night.jpg | Bin 0 -> 4125007 bytes src/server.js | 9 ++++++--- src/templates/footer.html | 6 +++++- src/templates/navigation.html | 18 ++++++++---------- 12 files changed, 60 insertions(+), 16 deletions(-) delete mode 100644 src/icon/favicon.ico delete mode 100644 src/icon/favicon.svg create mode 100644 src/js/background.js create mode 100644 src/res/change.jpg create mode 100644 src/res/day.jpg create mode 100644 src/res/favicon.ico create mode 100644 src/res/favicon.svg create mode 100644 src/res/night.jpg (limited to 'src/css/styles.css') diff --git a/src/css/styles.css b/src/css/styles.css index ab634ec..3a555cb 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -11,11 +11,16 @@ body { - width: 80%; + width: 60%; + min-width: 500px; margin: auto; /* margin: 0px; */ background-color: var(--background); font-family: Arial, Helvetica, sans-serif; + height: 100%; + background-position: center; + background-repeat: no-repeat; + background-size: cover; } h1, h2 { @@ -119,12 +124,17 @@ p { border-top: 1px solid var(--light-text); border-bottom: 1px solid var(--light-text); background-color: var(--background-accent); + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; } + .titlebar a{ margin: auto; max-width: 10%; min-width: 100px; + flex-grow: 1; } .btn { diff --git a/src/icon/favicon.ico b/src/icon/favicon.ico deleted file mode 100644 index 7646b67..0000000 Binary files a/src/icon/favicon.ico and /dev/null differ diff --git a/src/icon/favicon.svg b/src/icon/favicon.svg deleted file mode 100644 index ad339b8..0000000 --- a/src/icon/favicon.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/js/background.js b/src/js/background.js new file mode 100644 index 0000000..f8a7684 --- /dev/null +++ b/src/js/background.js @@ -0,0 +1,29 @@ +function set_background_image(){ + let date = new Date(); + let current_hour = date.getHours() + if(current_hour <= 8 || current_hour >= 20){ + var photo = "night.jpg" + } else if(current_hour <= 10 || current_hour > 17){ + var photo = "change.jpg" + } else { + var photo = "day.jpg" + } + let btn = document.getElementById("loadBtn") + if(btn){ + btn.remove() + } + if(!document.getElementById("backgroundId")){ + document.body.style.backgroundImage = `url('/res/${photo}')`; + let desc = document.createElement("p") + desc.id = "backgroundId" + desc.innerHTML = "Background images in the public domain, painted by Ivan Konstantinovich Aivazovsky." + footer.appendChild(desc) + } +} +let el = document.createElement("a") +el.id = "loadBtn" +el.innerText = "load background" +el.onclick = set_background_image +let footer = document.getElementsByTagName("footer")[0] +footer.appendChild(el) + diff --git a/src/res/change.jpg b/src/res/change.jpg new file mode 100644 index 0000000..0d0b1c3 Binary files /dev/null and b/src/res/change.jpg differ diff --git a/src/res/day.jpg b/src/res/day.jpg new file mode 100644 index 0000000..13c115c Binary files /dev/null and b/src/res/day.jpg differ diff --git a/src/res/favicon.ico b/src/res/favicon.ico new file mode 100644 index 0000000..7646b67 Binary files /dev/null and b/src/res/favicon.ico differ diff --git a/src/res/favicon.svg b/src/res/favicon.svg new file mode 100644 index 0000000..ad339b8 --- /dev/null +++ b/src/res/favicon.svg @@ -0,0 +1 @@ + diff --git a/src/res/night.jpg b/src/res/night.jpg new file mode 100644 index 0000000..9b9471c Binary files /dev/null and b/src/res/night.jpg differ diff --git a/src/server.js b/src/server.js index 81f1edb..d820cd7 100644 --- a/src/server.js +++ b/src/server.js @@ -324,8 +324,8 @@ function setUpRoutes(models, jwtFunctions, database, templates) { }) - server.get('/favicon.ico', (req, res) => res.sendFile(__dirname + "/icon/favicon.ico")) - server.get('/favicon.svg', (req, res) => res.sendFile(__dirname + "/icon/favicon.svg")) + server.get('/favicon.ico', (req, res) => res.sendFile(__dirname + "/res/favicon.ico")) + server.get('/favicon.svg', (req, res) => res.sendFile(__dirname + "/res/favicon.svg")) server.get('/css/:id', (req, res) => { res.sendFile(__dirname + "/css/" + req.params.id); }); @@ -338,6 +338,9 @@ function setUpRoutes(models, jwtFunctions, database, templates) { server.get('/js/:id', (req, res) => { res.sendFile(__dirname + "/js/" + req.params.id); }); + server.get('/res/:id', (req, res) => { + res.sendFile(__dirname + "/res/" + req.params.id); + }); server.get('/feed.xml', async (req, res) => { var feed = new rss({ @@ -345,7 +348,7 @@ function setUpRoutes(models, jwtFunctions, database, templates) { description: "Posts from marks.kitchen", feed_url: "https://marks.kitchen/rss", site_url: "https://marks.kitchen", - webMaster: "webmaster@marks.kitchen", + webMaster: "webmaster@marks.kitchen (Mark Powers)", copyright: "Mark Powers" }) var posts = await models.posts.findAll({ diff --git a/src/templates/footer.html b/src/templates/footer.html index 617b5fa..6dc5a48 100644 --- a/src/templates/footer.html +++ b/src/templates/footer.html @@ -11,4 +11,8 @@
- \ No newline at end of file +
+ + +
+ diff --git a/src/templates/navigation.html b/src/templates/navigation.html index ab53b13..b101bab 100644 --- a/src/templates/navigation.html +++ b/src/templates/navigation.html @@ -1,12 +1,10 @@ -- cgit v1.2.3 From 5137bb9b277fcd45327680166c9e39f26ec48c45 Mon Sep 17 00:00:00 2001 From: Mark Powers Date: Wed, 30 Dec 2020 22:28:39 -0600 Subject: Add like button to posts --- src/css/styles.css | 17 +++++++++++++++-- src/index.js | 6 +++++- src/server.js | 10 ++++++++++ src/templates/feed.html | 5 ++++- 4 files changed, 34 insertions(+), 4 deletions(-) (limited to 'src/css/styles.css') diff --git a/src/css/styles.css b/src/css/styles.css index 3a555cb..88d8e68 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -8,7 +8,6 @@ --btn-hover: #0a0; --light-text: #aaa; } - body { width: 60%; @@ -142,7 +141,6 @@ p { padding: 1px 3px; border: 1px solid var(--btn-text); border-radius: 3px; - width: 100%; max-width: 100px; line-height: 2em; text-align: center; @@ -152,6 +150,7 @@ p { } .btn-primary { + width: 100%; height: 2em; font-size: 20px; background-color: var(--btn-color); @@ -162,6 +161,15 @@ p { background-color: var(--btn-hover); } +.btn-secondary { + background-color: var(--btn-color); + color: var(--btn-text); +} + +.btn-secondary:hover{ + background-color: var(--btn-hover); +} + .date { font-style: italic; margin: 0em; @@ -223,3 +231,8 @@ a.navigation:visited, a.navigation:link { .email::after { content: "@marks.kitchen"; } + +a.cool { + float: right; +} + diff --git a/src/index.js b/src/index.js index a94f8d0..7ceecf0 100644 --- a/src/index.js +++ b/src/index.js @@ -56,7 +56,11 @@ function setUpModels(){ }, title: { type: Sequelize.STRING, - },}), + }, + likes: { + type: Sequelize.INTEGER, + } + }), "pictures": database.define('pictures', { source: { type: Sequelize.TEXT, allowNull: false}, }), diff --git a/src/server.js b/src/server.js index d820cd7..cd76b5d 100644 --- a/src/server.js +++ b/src/server.js @@ -146,6 +146,15 @@ function setUpRoutes(models, jwtFunctions, database, templates) { let body = templates["blog-single"]({posts, date}); res.status(200).send(body) }) + server.get('/post/like/:type/:id', async (req, res) => { + let type = req.params.type + let id = req.params.id + var post = await models.posts.findOne({ + where: { type, id }, + }); + post.update({likes: post.likes+1}) + res.redirect(`/post/${type}/${id}`); + }) server.get('/tags/:name', async (req, res) => { const { name } = req.params; const postsWithTag = await models.tags.findAll({ attributes: ["postId"], where: { text: name } }) @@ -258,6 +267,7 @@ function setUpRoutes(models, jwtFunctions, database, templates) { const type = req.body.type req.body.description = marked(req.body.description) const newPost = await models.posts.create(req.body); + newPost.likes = 0 req.files.forEach(async (file) => { await models.pictures.create({ "source": "uploads/" + file.filename, "postId": newPost.id }); console.log("uploaded ", file.path); diff --git a/src/templates/feed.html b/src/templates/feed.html index d7494a2..ae3494c 100644 --- a/src/templates/feed.html +++ b/src/templates/feed.html @@ -21,7 +21,10 @@ {{this}} {{/each}} + + 👍 ({{this.likes}}) +

{{/each}} - \ No newline at end of file + -- cgit v1.2.3 From 5b5dc610bc0da17fd006982de50b4dc74b134a54 Mon Sep 17 00:00:00 2001 From: Mark Powers Date: Tue, 5 Jan 2021 20:25:10 -0600 Subject: Refactor likes to use JS to avoid redirect --- src/css/styles.css | 3 ++- src/js/like.js | 11 +++++++++++ src/server.js | 2 +- src/templates/feed.html | 4 ++-- src/templates/header.html | 2 +- 5 files changed, 17 insertions(+), 5 deletions(-) create mode 100644 src/js/like.js (limited to 'src/css/styles.css') diff --git a/src/css/styles.css b/src/css/styles.css index 88d8e68..4572569 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -147,6 +147,7 @@ p { vertical-align: middle; white-space: nowrap; text-decoration: none; + cursor: pointer; } .btn-primary { @@ -232,7 +233,7 @@ a.navigation:visited, a.navigation:link { content: "@marks.kitchen"; } -a.cool { +.cool { float: right; } diff --git a/src/js/like.js b/src/js/like.js new file mode 100644 index 0000000..cd1e015 --- /dev/null +++ b/src/js/like.js @@ -0,0 +1,11 @@ +function likePost(type, id){ + fetch(`/post/like/${type}/${id}`) + .then(response => response.json()) + .then(response => { + console.log(response) + let btn_id=`btn_${type}_${id}` + let el = document.getElementById(btn_id) + el.innerText = `👍 (${response.likes})` + }) +} + diff --git a/src/server.js b/src/server.js index 07da08c..773feb0 100644 --- a/src/server.js +++ b/src/server.js @@ -153,7 +153,7 @@ function setUpRoutes(models, jwtFunctions, database, templates) { where: { type, id }, }); post.update({likes: post.likes+1}) - res.redirect(`/post/${type}/${id}`); + res.status(200).send({likes: post.likes}); }) server.get('/tags/:name', async (req, res) => { const { name } = req.params; diff --git a/src/templates/feed.html b/src/templates/feed.html index ae3494c..3ea4f16 100644 --- a/src/templates/feed.html +++ b/src/templates/feed.html @@ -21,9 +21,9 @@ {{this}} {{/each}} - + 👍 ({{this.likes}}) - +

{{/each}} diff --git a/src/templates/header.html b/src/templates/header.html index 2ceebfd..1989b04 100644 --- a/src/templates/header.html +++ b/src/templates/header.html @@ -2,4 +2,4 @@ - + -- cgit v1.2.3