added html templates, static, index
This commit is contained in:
Leonard Lorenz
parent
6e72cba14c
commit
133187ad98
10 changed files with 265 additions and 3 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -1,6 +1,3 @@
|
||||||
target
|
target
|
||||||
.env
|
.env
|
||||||
html
|
|
||||||
templates
|
|
||||||
static
|
|
||||||
db.sqlite3
|
db.sqlite3
|
||||||
|
|
|
||||||
16
content/html/index.html
Normal file
16
content/html/index.html
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>mtrx' site</title>
|
||||||
|
<link rel="stylesheet" href="/static/css/index.css">
|
||||||
|
<link rel="shortcut icon" type="image/jpg" href="/static/favicon.ico"/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>
|
||||||
|
Hi, I'm mtrx.<br>
|
||||||
|
I have a <a href="/blog">blog.</a><br>
|
||||||
|
If you have questions or input for me please send me an E-Mail to me[at]mtrx.tech
|
||||||
|
</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
81
content/static/css/blog.css
Normal file
81
content/static/css/blog.css
Normal file
|
|
@ -0,0 +1,81 @@
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-family: sans-serif;
|
||||||
|
padding: 20px;
|
||||||
|
width: 60%;
|
||||||
|
padding-left: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
article {
|
||||||
|
padding-top: 2em;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-link {
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-title {
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-publish-date {
|
||||||
|
font-size: 0.7em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-body {
|
||||||
|
padding-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#submit-form {
|
||||||
|
padding-top: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#submit-body, #submit-title {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 2em;
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#submit-body {
|
||||||
|
height: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#submit-form {
|
||||||
|
display: block
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:1080px) {
|
||||||
|
html {
|
||||||
|
padding: 20px;
|
||||||
|
width: 90%;
|
||||||
|
padding-left: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
h1 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-link {
|
||||||
|
font-size: 2.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-title {
|
||||||
|
font-size: 2.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-body {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-publish-date {
|
||||||
|
font-size: 1.7em;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
}
|
||||||
21
content/static/css/index.css
Normal file
21
content/static/css/index.css
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-family: sans-serif;
|
||||||
|
padding: 20px;
|
||||||
|
width: 60%;
|
||||||
|
padding-left: 20%;
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:1080px) {
|
||||||
|
html {
|
||||||
|
font-family: sans-serif;
|
||||||
|
padding: 20px;
|
||||||
|
width: 90%;
|
||||||
|
padding-left: 5%;
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
BIN
content/static/favicon.ico
Executable file
BIN
content/static/favicon.ico
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 318 B |
31
content/static/js/blog.js
Normal file
31
content/static/js/blog.js
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
function setTokenCookie() {
|
||||||
|
let token = document.getElementById('set-token').value;
|
||||||
|
let tokenCookie = 'token=' + token + "; SameSite=None; secure";
|
||||||
|
document.cookie = tokenCookie;
|
||||||
|
document.getElementById("token").value = token
|
||||||
|
document.getElementById("cookie-block").hidden = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearTokenCookie() {
|
||||||
|
document.cookie = "token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; SameSite=None; secure";
|
||||||
|
document.getElementById("cookie-block").hidden = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// if cookie is set, use it to pass the token
|
||||||
|
let c_pairs = document.cookie.split(";");
|
||||||
|
let cookie_set = false;
|
||||||
|
for (c of c_pairs) {
|
||||||
|
if (c.trim().split("=")[0].startsWith("token")){
|
||||||
|
// stick token into all the form input fields
|
||||||
|
let token = c.split("=")[1];
|
||||||
|
let tokenFields = document.querySelectorAll(".token");
|
||||||
|
for (t of tokenFields) {
|
||||||
|
t.value = token;
|
||||||
|
}
|
||||||
|
cookie_set = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!cookie_set) {
|
||||||
|
document.getElementById("cookie-block").hidden = false;
|
||||||
|
}
|
||||||
29
content/templates/blog.html
Normal file
29
content/templates/blog.html
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>mtrx' blog</title>
|
||||||
|
<link rel="stylesheet" href="/static/css/blog.css">
|
||||||
|
<link rel="shortcut icon" type="image/jpg" href="/static/favicon.ico"/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1><a href="/blog" class="post-link" style="text-decoration:none;color:black;">mtrx' blog</a></h1>
|
||||||
|
<ul>
|
||||||
|
{% for post in posts %}
|
||||||
|
<article>
|
||||||
|
<a href="/blog/id/{{ post.id }}" class="post-link">[link]</a>
|
||||||
|
<div class="post-content">
|
||||||
|
<h2 class="post-title">{{ post.title }}</h2>
|
||||||
|
<sub class="post-publish-date"> {{ post.publish_date }}</sub>
|
||||||
|
<p class="post-body">{{ post.body }}</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let dates = document.querySelectorAll(".post-publish-date");
|
||||||
|
Array.from(dates).map((d) => d.textContent = `${d.textContent.split("T")[0]} - ${d.textContent.split("T")[1].split(".")[0]}`)
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
18
content/templates/edit.html
Normal file
18
content/templates/edit.html
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>mtrx' blog</title>
|
||||||
|
<link rel="stylesheet" href="/static/css/blog.css">
|
||||||
|
<link rel="shortcut icon" type="image/jpg" href="/static/favicon.ico"/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1><a href="/blog" class="post-link" style="text-decoration:none;color:black;">mtrx' blog</a></h1>
|
||||||
|
<h2>Edit posts</h2>
|
||||||
|
<ul style="list-style: none;">
|
||||||
|
{% for post in posts %}
|
||||||
|
<li><a href="/blog/edit/{{ post.id }}">{{ post.title }}</a></li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
39
content/templates/post-edit.html
Normal file
39
content/templates/post-edit.html
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Edit Post</title>
|
||||||
|
<link rel="stylesheet" href="/static/css/blog.css">
|
||||||
|
<link rel="shortcut icon" type="image/jpg" href="/static/favicon.ico"/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="cookie-block" hidden>
|
||||||
|
<p>Please set your token cookie first.</p>
|
||||||
|
<input id="set-token" type="text" name="set-token">
|
||||||
|
<button onclick="setTokenCookie()">Set Token Cookie</button>
|
||||||
|
</div>
|
||||||
|
<button onclick="clearTokenCookie()">Clear Token Cookie</button>
|
||||||
|
|
||||||
|
<form id="submit-form" action="/api/blog/posts/edit/{{ id }}" method=POST>
|
||||||
|
<input class="token" type="text" name="token" hidden>
|
||||||
|
<label for="title">Title</label>
|
||||||
|
<textarea id="submit-title" type="text" name="title">{{ title }}</textarea>
|
||||||
|
<br>
|
||||||
|
<label for="submit-body">Content</label>
|
||||||
|
<textarea id="submit-body" type="text" name="body">{{ body }}</textarea>
|
||||||
|
<br>
|
||||||
|
<button id="submit-button" type="submit">Edit Post</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<form action="/api/blog/posts/hide/{{ id }}" method="POST">
|
||||||
|
<input class="token" type="text" name="token" hidden>
|
||||||
|
<button type="submit">Hide Post</button>
|
||||||
|
</form>
|
||||||
|
<form action="/api/blog/posts/delete/{{ id }}" method="POST">
|
||||||
|
<input class="token" type="text" name="token" hidden>
|
||||||
|
<button type="submit">Delete Post</button>
|
||||||
|
</form>
|
||||||
|
<script src="/static/js/blog.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
30
content/templates/post-submit.html
Normal file
30
content/templates/post-submit.html
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Submit Post</title>
|
||||||
|
<link rel="stylesheet" href="/static/css/blog.css">
|
||||||
|
<link rel="shortcut icon" type="image/jpg" href="/static/favicon.ico"/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="cookie-block" hidden>
|
||||||
|
<p>Please set your token cookie first.</p>
|
||||||
|
<input id="set-token" type="text" name="set-token">
|
||||||
|
<button onclick="setTokenCookie()">Set Token Cookie</button>
|
||||||
|
</div>
|
||||||
|
<button onclick="clearTokenCookie()">Clear Token Cookie</button>
|
||||||
|
|
||||||
|
<form id="submit-form" action="/api/blog/create" method=POST>
|
||||||
|
<input class="token" type="text" name="token" hidden>
|
||||||
|
<label for="title">Title</label>
|
||||||
|
<textarea id="submit-title" type="text" name="title">{{ title }}</textarea>
|
||||||
|
<br>
|
||||||
|
<label for="submit-body">Content</label>
|
||||||
|
<textarea id="submit-body" type="text" name="body">{{ body }}</textarea>
|
||||||
|
<br>
|
||||||
|
<button id="submit-button" type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
<script src="/static/js/blog.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in a new issue