aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMark Powers <markppowers0@gmail.com>2020-08-13 12:08:47 -0500
committerMark Powers <markppowers0@gmail.com>2020-08-13 12:08:47 -0500
commit0ea3736521aca1160a9c927b6a8e6a04724f67ee (patch)
tree03af5531f7d22a835997ea4f8699d636d69340d5
parent73e145884680242d64bc542afac09aee5f24b132 (diff)
Remove client JS requirement from single blog view
-rw-r--r--src/html/admin.html1
-rw-r--r--src/html/blog.html40
-rw-r--r--src/html/bread.html39
-rw-r--r--src/html/feed.html16
-rw-r--r--src/html/index.html57
-rw-r--r--src/html/misc.html3
-rw-r--r--src/html/post-single.html41
-rw-r--r--src/html/projects.html21
-rw-r--r--src/html/tags.html1
-rw-r--r--src/js/feed.js9
-rw-r--r--src/server.js49
11 files changed, 36 insertions, 241 deletions
diff --git a/src/html/admin.html b/src/html/admin.html
index 6136b3c..c6683c3 100644
--- a/src/html/admin.html
+++ b/src/html/admin.html
@@ -8,7 +8,6 @@
<link rel="stylesheet" type="text/css" href="/css/styles.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
- <!-- <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> -->
<script>
window.onload = function () {
var feed = new Vue({
diff --git a/src/html/blog.html b/src/html/blog.html
deleted file mode 100644
index 03a37e4..0000000
--- a/src/html/blog.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!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">
- <script src="/js/feed.js"></script>
- <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- <!-- <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> -->
- <script>
- window.onload = loadFeed(function () {
- var feed = new Vue({
- el: '.feed',
- data: {
- posts: []
- },
- created() {
- fetch(new Request('/posts/blog')).then(response => response.json())
- .then(response => this.posts = response);
- }
- });
- })
- </script>
-
-</head>
-
-<body>
- <div>
- <h1>
- <a class="navigation" href="/" title="marks.kitchen">&lt;</a>
- Blog
- </h1>
- <div id="feed" class="feed"></div>
- </div>
-</body>
-
-</html> \ No newline at end of file
diff --git a/src/html/bread.html b/src/html/bread.html
deleted file mode 100644
index aa52655..0000000
--- a/src/html/bread.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<!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">
- <script src="/js/feed.js"></script>
- <script src="https://cdn.jsdelivr.net/npm/vue"></script>
- <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
- <script>
- window.onload = loadFeed(function () {
- var feed = new Vue({
- el: '.feed',
- data: {
- posts: []
- },
- created() {
- fetch(new Request('/posts/bread')).then(response => response.json())
- .then(response => this.posts = response);
- }
- });
- })
- </script>
-</head>
-
-<body>
- <div>
- <h1>
- <a class="navigation" href="/" title="marks.kitchen">&lt;</a>
- Bread
- </h1>
- Some highlights (and lowlights) of breadmaking
- <div id="feed"></div>
- </div>
-</body>
-
-</html> \ No newline at end of file
diff --git a/src/html/feed.html b/src/html/feed.html
deleted file mode 100644
index 7128174..0000000
--- a/src/html/feed.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<div class="feed">
- <div class="card" v-for="post in posts">
- <p class="card-text" v-html="post.description"></p>
- <div class="card-img">
- <span v-for="image in post.images">
- <a v-bind:href="'/'+image"><img v-bind:src="'/'+image"></a>
- </span>
- </div>
- <p class="date">
- <a v-bind:href="'/post/'+post.type+'/'+post.id">{{ post.createdAt.substring(0,10) }}</a>
- <span v-for="tag in post.tags">
- <a class="tag" v-bind:href="'/tags#'+tag">{{tag}}</a>
- </span>
- </p>
- </div>
-</div> \ No newline at end of file
diff --git a/src/html/index.html b/src/html/index.html
deleted file mode 100644
index b68e458..0000000
--- a/src/html/index.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!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">
- <script src="/js/feed.js"></script>
- <script src="https://cdn.jsdelivr.net/npm/vue"></script>
- <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
- <script>
- window.onload = loadFeed(function () {
- var feed = new Vue({
- el: '.feed',
- data: {
- posts: []
- },
- created() {
- fetch(new Request('/posts/index')).then(response => response.json())
- .then(response => this.posts = response);
- }
- });
- })
- </script>
-</head>
-
-<body>
- <h1>Welcome to Mark's Kitchen</h1>
- <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>
-
- <div id="feed">
- </div>
-
- <footer>
- <div>Mark Powers</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>
- <span>mark-at-marks.kitchen</span>
- </div>
- </footer>
-</body>
-
-</html> \ No newline at end of file
diff --git a/src/html/misc.html b/src/html/misc.html
index 60455c5..6ab0a15 100644
--- a/src/html/misc.html
+++ b/src/html/misc.html
@@ -7,9 +7,6 @@
<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">
- <script src="/js/feed.js"></script>
- <script src="https://cdn.jsdelivr.net/npm/vue"></script>
- <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
</head>
<body>
diff --git a/src/html/post-single.html b/src/html/post-single.html
deleted file mode 100644
index 221ade4..0000000
--- a/src/html/post-single.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!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">
- <script src="/js/feed.js"></script>
- <script src="https://cdn.jsdelivr.net/npm/vue"></script>
- <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
- <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
- <script>
- window.onload = loadFeed(function () {
- var feed = new Vue({
- el: '.feed',
- data: {
- posts: []
- },
- created() {
- var name = window.location.pathname.split("/")[2];
- var id = parseInt(window.location.pathname.split("/")[3]);
- fetch(new Request('/posts/'+name+"/"+id)).then(response => response.json())
- .then(response => { response.forEach(post => this.posts = response);
- });
- }
- });
- })
- </script>
-</head>
-
-<body>
- <div>
- <h1>
- <a class="navigation" href="/" title="marks.kitchen">&lt;</a>
- </h1>
- <div id="feed"></div>
- </div>
-</body>
-
-</html> \ No newline at end of file
diff --git a/src/html/projects.html b/src/html/projects.html
index f71c833..25c94ef 100644
--- a/src/html/projects.html
+++ b/src/html/projects.html
@@ -6,27 +6,6 @@
<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">
- <script src="https://cdn.jsdelivr.net/npm/vue"></script>
- <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
- <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
- <script>
- window.onload = function () {
- var feed = new Vue({
- el: '.feed',
- data: {
- posts: []
- },
- created() {
- // fetch(new Request('/posts/blog')).then(response => response.json())
- // .then(response => { response.forEach(post => {
- // post.description = marked(post.description)
- // this.posts.push(post);
- // });
- // });
- }
- });
- }
- </script>
</head>
<body>
diff --git a/src/html/tags.html b/src/html/tags.html
index c6e4022..9302993 100644
--- a/src/html/tags.html
+++ b/src/html/tags.html
@@ -7,7 +7,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="/css/styles.css">
<script src="/js/feed.js"></script>
- <script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
window.onload = window.onhashchange = function () {
diff --git a/src/js/feed.js b/src/js/feed.js
deleted file mode 100644
index 87302f3..0000000
--- a/src/js/feed.js
+++ /dev/null
@@ -1,9 +0,0 @@
-function loadFeed(callback){
- var myRequest = new Request('/feed');
- fetch(myRequest).then(function(response) {
- return response.text();
- }).then(function(response) {
- document.getElementById("feed").innerHTML = response;
- callback()
- });
-}
diff --git a/src/server.js b/src/server.js
index 522823d..397cf9f 100644
--- a/src/server.js
+++ b/src/server.js
@@ -50,13 +50,7 @@ function hashWithSalt(password, salt){
return hash.digest("base64");
};
-async function constructFeed(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)
-
+function constructFeed(posts){
var html = []
html.push(`<div class="feed">`)
posts.forEach(post => {
@@ -83,6 +77,29 @@ async function constructFeed(models, postType){
return html.join("");
}
+async function constructFeedFromType(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)
+
+ return constructFeed(posts)
+}
+
+async function constructSinglePost(models, postType, postId){
+ var posts = await models.posts.findAll({
+ where: {
+ type: postType,
+ id: postId
+ }, order: [['createdAt', 'DESC']]
+ });
+ posts = posts.map(x => x.get({ plain: true }));
+ await addImagesAndTagsToPosts(models, posts)
+
+ return constructFeed(posts)
+}
+
function setUpRoutes(models, jwtFunctions, database) {
// Authentication routine
server.use(function (req, res, next) {
@@ -128,7 +145,7 @@ function setUpRoutes(models, jwtFunctions, database) {
var html = []
html.push(templates["index"]["pre"])
html.push(templates["titlebar"])
- html.push(await constructFeed(models, "index"))
+ html.push(await constructFeedFromType(models, "index"))
html.push(templates["footer"])
html.push(templates["index"]["post"])
@@ -137,7 +154,7 @@ function setUpRoutes(models, jwtFunctions, database) {
server.get('/bread', async (req, res) => {
var html = []
html.push(templates["bread"]["pre"])
- html.push(await constructFeed(models, "bread"))
+ html.push(await constructFeedFromType(models, "bread"))
html.push(templates["footer"])
html.push(templates["bread"]["post"])
@@ -146,7 +163,16 @@ function setUpRoutes(models, jwtFunctions, database) {
server.get('/blog', async (req, res) => {
var html = []
html.push(templates["blog"]["pre"])
- html.push(await constructFeed(models, "blog"))
+ html.push(await constructFeedFromType(models, "blog"))
+ html.push(templates["footer"])
+ html.push(templates["blog"]["post"])
+
+ res.status(200).send(html.join(""))
+ })
+ 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"])
@@ -208,9 +234,6 @@ function setUpRoutes(models, jwtFunctions, database) {
res.status(400).send(e.message);
}
})
- server.get('/post/:type/:id', async (req, res, next) => {
- res.sendFile(__dirname + "/html/post-single.html");
- })
server.get('/tags/:name', async (req, res, next) => {
try {
const { name } = req.params;