initial commit

new website repo yay!!!

2 files changed, 116 insertions, 0 deletions

diff --git a/src/templates/blog/index.html b/src/templates/blog/index.html
new file mode 100644
index 0000000..a0aee24
--- /dev/null
+++ b/src/templates/blog/index.html
@@ -0,0 +1,27 @@
+{% extends "base.html" %}
+
+{% block head %}
+{{ super() }}
+
+<link rel="stylesheet" href="/static/stylesheets/blog.css">
+{% endblock %}
+
+{% block content %}
+
+<h1>blog</h1>
+
+<div id="posts">
+    {% for post in posts|sort(attribute="created_at", reverse=True) %}
+    <a class="container post" href="/blog/{{ post.id }}">
+        <h2>{{ post.title }}</h2>
+        <p>{{ post.description or "" }}</p>
+        <p class="created-at">posted {{ format_ts(post.created_at) }}</p>
+    </a>
+    {% endfor %}
+
+    {% if posts|length == 0 %}
+    <p>huh, I guess nothing has been posted yet.</p>
+    {% endif %}
+</div>
+
+{% endblock %}
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 %}