From 133187ad9882a2e49063ab94e2d141edcf87b248 Mon Sep 17 00:00:00 2001
From: Leonard Lorenz <dev@leonardlorenz.de>
Date: Mon, 26 Oct 2020 12:19:44 +0100
Subject: [PATCH] added html templates, static, index

---
 .gitignore                         |   3 --
 content/html/index.html            |  16 ++++++
 content/static/css/blog.css        |  81 +++++++++++++++++++++++++++++
 content/static/css/index.css       |  21 ++++++++
 content/static/favicon.ico         | Bin 0 -> 318 bytes
 content/static/js/blog.js          |  31 +++++++++++
 content/templates/blog.html        |  29 +++++++++++
 content/templates/edit.html        |  18 +++++++
 content/templates/post-edit.html   |  39 ++++++++++++++
 content/templates/post-submit.html |  30 +++++++++++
 10 files changed, 265 insertions(+), 3 deletions(-)
 create mode 100644 content/html/index.html
 create mode 100644 content/static/css/blog.css
 create mode 100644 content/static/css/index.css
 create mode 100755 content/static/favicon.ico
 create mode 100644 content/static/js/blog.js
 create mode 100644 content/templates/blog.html
 create mode 100644 content/templates/edit.html
 create mode 100644 content/templates/post-edit.html
 create mode 100644 content/templates/post-submit.html
diff --git a/.gitignore b/.gitignore
index bec1af8..66238b6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,3 @@
 target
 .env
-html
-templates
-static
 db.sqlite3
diff --git a/content/html/index.html b/content/html/index.html
new file mode 100644
index 0000000..58c0a6c
--- /dev/null
+++ b/content/html/index.html
@@ -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>
diff --git a/content/static/css/blog.css b/content/static/css/blog.css
new file mode 100644
index 0000000..7029cfa
--- /dev/null
+++ b/content/static/css/blog.css
@@ -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;
+  }
+*/
+}
diff --git a/content/static/css/index.css b/content/static/css/index.css
new file mode 100644
index 0000000..3aab276
--- /dev/null
+++ b/content/static/css/index.css
@@ -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;
+}
diff --git a/content/static/favicon.ico b/content/static/favicon.ico
new file mode 100755
index 0000000000000000000000000000000000000000..f0d493238f93968369aeae10adbc82c8e7c4894c
GIT binary patch
literal 318
zcmZQzU<5(|0RbS%!l1#(z#zuJz@P!d0zj+)#2|4HXaJKC0wgya!2kaY41c#XF#J?!
hVE8hff#EHXjSIhFXJB~!o`K={eFlaH_6!Uly#Vpw8tni8

literal 0
HcmV?d00001

diff --git a/content/static/js/blog.js b/content/static/js/blog.js
new file mode 100644
index 0000000..b330ebb
--- /dev/null
+++ b/content/static/js/blog.js
@@ -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;
+}
diff --git a/content/templates/blog.html b/content/templates/blog.html
new file mode 100644
index 0000000..4b6abbe
--- /dev/null
+++ b/content/templates/blog.html
@@ -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>
diff --git a/content/templates/edit.html b/content/templates/edit.html
new file mode 100644
index 0000000..42f989b
--- /dev/null
+++ b/content/templates/edit.html
@@ -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>
diff --git a/content/templates/post-edit.html b/content/templates/post-edit.html
new file mode 100644
index 0000000..65030ba
--- /dev/null
+++ b/content/templates/post-edit.html
@@ -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>
diff --git a/content/templates/post-submit.html b/content/templates/post-submit.html
new file mode 100644
index 0000000..7e8c14c
--- /dev/null
+++ b/content/templates/post-submit.html
@@ -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>
