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
|
||||
.env
|
||||
html
|
||||
templates
|
||||
static
|
||||
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