1 files changed, 89 insertions, 0 deletions
diff --git a/src/templates/blog/post.html b/src/templates/blog/post.html
new file mode 100644
index 0000000..92c48a2
--- /dev/null
+++ b/src/templates/blog/post.html
@@ -0,0 +1,89 @@
+{% extends "base.html" %}
+
+{% block head %}
+{{ super() }}
+
+<style>
+    article {
+        width: 600px;
+        text-align: left;
+    }
+
+    header {
+        padding: 14px;
+        background-color: rgba(255, 255, 255, 0.6);
+        border-bottom: 2px solid black;
+    }
+
+    textarea {
+        resize: none;
+        width: 250px;
+        height: 90px;
+    }
+
+    #comments {
+        background-color: rgba(255, 255, 255, 0.6);
+        padding: 12px 20px;
+        width: 400px;
+    }
+
+    .comment {
+        border-bottom: 1px solid black;
+    }
+
+    .comment:last-child {
+        border-bottom: none;
+    }
+
+    .created-at {
+        font-size: 10px;
+        color: #333;
+    }
+</style>
+
+<script src="/static/js/htmx.min.js"></script>
+{% endblock %}
+
+{% block content %}
+
+<article>
+    <header>
+        <h1>{{ post.title }}</h1>
+
+        {% if post.description %}
+        <p>{{ post.description }}</p>
+        {% endif %}
+
+        <p>posted {{ post.created_at.strftime("%a %d %b %Y at %H:%M:%S") }}</p>
+    </header>
+
+    {{ post.text|safe }}
+</article>
+
+<h3>comments</h3>
+
+<form
+    hx-post="/blog/{{ post.id.hex }}/comments"
+    hx-target="#comments"
+    hx-on::after-request="if(event.detail.successful) this.reset()"
+    class="flex-col"
+    style="gap: 6px; margin-bottom: 12px;"
+>
+    <span class="flex-col">
+        <input type="text" name="author" placeholder="author" />
+    </span>
+
+    <span class="flex-col">
+        <textarea placeholder="text" name="text"></textarea>
+    </span>
+
+    <input type="submit" value="create" />
+</form>
+
+<div
+    id="comments"
+    hx-get="/blog/{{ post.id.hex }}/comments"
+    hx-trigger="revealed, newPost from:body"
+></div>
+
+{% endblock %}