aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/css/styles.css102
-rw-r--r--src/html/admin.html5
-rw-r--r--src/html/blog.html36
-rw-r--r--src/html/bread.html18
-rw-r--r--src/html/essay.html1
-rw-r--r--src/html/feed.html16
-rw-r--r--src/html/index.html22
-rw-r--r--src/html/login.html1
-rw-r--r--src/index.js4
-rw-r--r--src/js/feed.js10
-rw-r--r--src/server.js14
11 files changed, 188 insertions, 41 deletions
diff --git a/src/css/styles.css b/src/css/styles.css
index 9a7d048..a455835 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -1,5 +1,39 @@
+:root {
+ --background: #fff;
+ --background-accent: #f0f0f0;
+ --accent: #ada;
+ --text: #000;
+ --btn-color: #2d2;
+ --btn-text: #000;
+ --btn-hover: #0a0;
+ --light-text: #aaa
+}
+
+
body {
padding: 15px;
+ background-color: var(--background);
+ font-family: Arial, Helvetica, sans-serif;
+}
+
+h1 {
+ font-size: 30pt;
+ font-weight: 150;
+ margin-bottom: 0;
+}
+
+@keyframes zoom-left {
+ 0% {left: 100%; }
+ 100% {left: 0;}
+}
+
+footer {
+ text-align: center;
+ padding-top: 1em;
+ padding-bottom: 2em;
+ border-top: 1px solid var(--light-text);
+ color: var(--light-text);
+ background-color: var(--background-accent);
}
.essay{
@@ -7,14 +41,14 @@ body {
}
.figure {
- border: 1px solid #777777;
- background-color: #dddddd;
+ border: 1px solid #777;
+ background-color: #ddd;
padding: 10px;
}
.item {
margin: 10px;
- border: 2px solid #777777;
+ border: 2px solid #777;
border-radius: 5px;
padding: 7px;
}
@@ -26,15 +60,17 @@ img {
.card {
margin: 1em;
padding: 2%;
- border: 1px solid #aaaaaa;
+ border: 1px solid var(--text);
+ border-radius: 3px;
display: inline;
min-width: 200px;
+ background-color: var(--background-accent);
}
.card img {
width: 100%;
- padding: 2%;
-
+ margin: 2%;
+ border: 2px solid #888;
}
.main-page{
@@ -42,10 +78,22 @@ img {
flex-direction: row;
}
+#feed {
+ width: 100%;
+}
.feed {
width: 90%;
display: flex;
flex-direction: column;
+ margin-top: 8px;
+ animation-name: zoom-left;
+ animation-duration: .5s;
+ animation-iteration-count: 1;
+ position: relative;
+}
+
+p {
+ margin-top: 0;
}
@media screen and (min-width: 900px) {
@@ -60,14 +108,20 @@ img {
}
.sidebar {
- height: 100vh;
+ /* height: 50vh; */
+ height: 100%;
width: 100px;
margin: 20px;
+ padding: 20px;
+ border: 1px solid var(--text);
+ border-radius: 3px;
+ background-color: var(--background-accent);
}
.sidebar ul {
list-style: none;
padding: 0;
+ margin-top: 0;
}
.sidebar ul li {
@@ -77,18 +131,46 @@ img {
margin-right: auto;
}
-.btn-primary {
+.btn {
+ display: inline-block;
+ padding: 1px 3px;
+ border: 1px solid var(--btn-text);
+ border-radius: 3px;
width: 100%;
- height: 2em;
- border-radius: 0;
+ max-width: 100px;
+ line-height: 2em;
text-align: center;
+ vertical-align: middle;
+ white-space: nowrap;
+ text-decoration: none;
+}
+
+.btn-primary {
+ height: 2em;
font-size: 20px;
+ background-color: var(--btn-color);
+ color: var(--btn-text);
+}
+
+.btn-primary:hover{
+ background-color: var(--btn-hover);
}
.date {
font-style: italic;
margin: 0em;
}
+.tag {
+ font-style: normal;
+ padding-left: 1em;
+ font-weight: lighter;
+ font-size: .8em;
+ text-decoration: none;
+ color: var(--light-text);
+}
+.tag::before{
+ content: "#";
+}
.url-table, .ip-table {
width: 30%;
diff --git a/src/html/admin.html b/src/html/admin.html
index 1ec7e15..0f98eea 100644
--- a/src/html/admin.html
+++ b/src/html/admin.html
@@ -5,7 +5,6 @@
<title>Mark's Kitchen - Admin</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/bootstrap.css">
<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> -->
@@ -36,12 +35,16 @@
<textarea rows="4" cols="50" name="description"></textarea>
</div>
<div>
+ <span>Tags: <input type="text" name="tags"/></span>
+ </div>
+ <div>
Images: <input type="file" name="images" multiple>
</div>
<div>
<select name="type">
<option value="" disabled selected>Select...</option>
<option value="bread">Bread</option>
+ <option value="blog">Blog</option>
<option value="index">Index</option>
</select>
</div>
diff --git a/src/html/blog.html b/src/html/blog.html
new file mode 100644
index 0000000..01cd2f6
--- /dev/null
+++ b/src/html/blog.html
@@ -0,0 +1,36 @@
+<!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>
+ window.onload = loadFeed(function () {
+ console.log("callback!");
+ 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>Blog</h1>
+ <div id="feed"></div>
+ </div>
+</body>
+
+</html> \ No newline at end of file
diff --git a/src/html/bread.html b/src/html/bread.html
index 1ce1478..0658e11 100644
--- a/src/html/bread.html
+++ b/src/html/bread.html
@@ -5,12 +5,12 @@
<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/bootstrap.css">
<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 = function () {
+ window.onload = loadFeed(function () {
var feed = new Vue({
el: '.feed',
data: {
@@ -21,7 +21,7 @@
.then(response => this.posts = response);
}
});
- }
+ })
</script>
</head>
@@ -29,17 +29,7 @@
<div>
<h1>Bread</h1>
Some highlights (and lowlights) of breadmaking
- <div class="feed">
- <div class="card" v-for="post in posts">
- <p class="card-text">{{ 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">{{ post.createdAt.substring(0,10) }}</p>
- </div>
- </div>
+ <div id="feed"></div>
</div>
</body>
diff --git a/src/html/essay.html b/src/html/essay.html
index 7110df1..6152a4f 100644
--- a/src/html/essay.html
+++ b/src/html/essay.html
@@ -5,7 +5,6 @@
<title>Mark's Kitchen - Essays</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/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/css/styles.css">
</head>
diff --git a/src/html/feed.html b/src/html/feed.html
new file mode 100644
index 0000000..358ef61
--- /dev/null
+++ b/src/html/feed.html
@@ -0,0 +1,16 @@
+<div class="feed">
+ <div class="card" v-for="post in posts">
+ <p class="card-text">{{ 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">
+ {{ post.createdAt.substring(0,10) }}
+ <span v-for="tag in post.tags">
+ <a class="tag" href="#">{{tag}}</a>
+ </span>
+ </p>
+ </div>
+</div> \ No newline at end of file
diff --git a/src/html/index.html b/src/html/index.html
index 01f6e4e..73ed147 100644
--- a/src/html/index.html
+++ b/src/html/index.html
@@ -5,13 +5,13 @@
<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/bootstrap.css">
<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 = function () {
+ window.onload = loadFeed(function () {
var feed = new Vue({
el: '.feed',
data: {
@@ -22,7 +22,7 @@
.then(response => this.posts = response);
}
});
- }
+ })
</script>
</head>
@@ -32,22 +32,16 @@
<nav class="float-left sidebar">
<ul>
<li><a href="bread" class="btn btn-primary">Bread</a></li>
+ <li><a href="blog" class="btn btn-primary">Blog</a></li>
<li><a href="essay" class="btn btn-primary">Essays</a></li>
</ul>
</nav>
- <div class="feed">
- <div class="card" v-for="post in posts">
- <p class="card-text">{{ 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">{{ post.createdAt.substring(0,10) }}</p>
- </div>
- </div>
+ <div id="feed"></div>
</div>
+ <footer>
+ <div>Mark Powers</div>
+ </footer>
</body>
</html> \ No newline at end of file
diff --git a/src/html/login.html b/src/html/login.html
index 53a2d06..58ca2ae 100644
--- a/src/html/login.html
+++ b/src/html/login.html
@@ -5,7 +5,6 @@
<title>Mark's Kitchen - Login</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/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/css/styles.css">
</head>
diff --git a/src/index.js b/src/index.js
index c689779..5315c8d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -57,6 +57,9 @@ function setUpModels(){
"pictures": database.define('pictures', {
source: { type: Sequelize.TEXT, allowNull: false},
}),
+ "tags": database.define('tags', {
+ text: { type: Sequelize.TEXT, allowNull: false},
+ }),
"users": database.define('user', {
username: {
type: Sequelize.STRING,
@@ -73,6 +76,7 @@ function setUpModels(){
})
}
models.pictures.belongsTo(models.posts);
+ models.tags.belongsTo(models.posts);
return models;
}
diff --git a/src/js/feed.js b/src/js/feed.js
new file mode 100644
index 0000000..a80af9c
--- /dev/null
+++ b/src/js/feed.js
@@ -0,0 +1,10 @@
+function loadFeed(callback){
+ var myRequest = new Request('/feed');
+ fetch(myRequest).then(function(response) {
+ return response.text();
+ }).then(function(response) {
+ console.log(response);
+ document.getElementById("feed").innerHTML = response;
+ callback()
+ });
+}
diff --git a/src/server.js b/src/server.js
index 5bbb980..1f0573c 100644
--- a/src/server.js
+++ b/src/server.js
@@ -66,6 +66,8 @@ function setUpRoutes(models, jwtFunctions, database) {
server.get('/admin', (req, res) => res.sendFile(__dirname + "/html/admin.html"));
server.get('/login', (req, res) => res.sendFile(__dirname + "/html/login.html"))
server.get('/bread', (req, res) => res.sendFile(__dirname + "/html/bread.html"));
+ server.get('/blog', (req, res) => res.sendFile(__dirname + "/html/blog.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('/snake', (req, res) => res.sendFile(__dirname + "/html/snake.html"));
server.get('/setScore', (req, res) => {
@@ -82,6 +84,9 @@ function setUpRoutes(models, jwtFunctions, database) {
res.status(400).send(e.message);
}
})
+ server.get('/blog/:id', async (req, res, next) => {
+
+ });
server.get('/posts/:type', async (req, res, next) => {
try {
const { type } = req.params;
@@ -90,6 +95,9 @@ function setUpRoutes(models, jwtFunctions, database) {
for (const post of posts) {
const images = await models.pictures.findAll({ attributes: ["source"], where: { postId: post.id } }).map(x => x.source);
post.images = images;
+ const tags = await models.tags.findAll({ attributes: ["text"], where: { postId: post.id } }).map(x => x.text);
+ console.log(tags);
+ post.tags= tags;
}
res.status(200).send(posts);
next();
@@ -105,6 +113,9 @@ function setUpRoutes(models, jwtFunctions, database) {
await models.pictures.create({ "source": "uploads/" + file.filename, "postId": newPost.id });
console.log("uploaded ", file.path);
})
+ req.body.tags.split(" ").forEach(async (tag) => {
+ await models.tags.create({ "text": tag, "postId": newPost.id});
+ })
console.log(newPost);
res.redirect(`/${type}`);
next();
@@ -137,6 +148,9 @@ function setUpRoutes(models, jwtFunctions, database) {
server.get('/essay/:id', (req, res) => {
res.sendFile(__dirname + "/html/essay/" + req.params.id);
});
+ server.get('/js/:id', (req, res) => {
+ res.sendFile(__dirname + "/js/" + req.params.id);
+ });
}
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-22 01:45:28 +0000