5 files changed, 89 insertions, 0 deletions
diff --git a/templates/fragments/files_drawer_form.html b/templates/fragments/files_drawer_form.html
new file mode 100644
index 0000000..8b277da
--- /dev/null
+++ b/templates/fragments/files_drawer_form.html
@@ -0,0 +1,24 @@
+<form id="files-drawer-form">
+  <a
+    href="{% if not files_expanded %}/?show_files=1{% else %}/?show_files=0{% endif %}"
+    class="box"
+    id="files-btn"
+    hx-post="/click_files_drawer_toggle"
+    hx-trigger="click"
+    hx-target="#files-drawer-form"
+    hx-swap="outerHTML">
+
+    <span>Files</span>
+    <span id="files-arrow" class="arrow">{% if files_expanded %}▲{% else %}▼{% endif %}</span>
+  </a>
+  <input type="hidden" name="files_expanded" value="{{ files_expanded | tojson }}">
+
+  {% if not files_expanded %}
+  <style>
+  #files-list {
+    display: none;
+  }
+  </style>
+  {% endif %}
+</form>
+
diff --git a/templates/fragments/files_list.html b/templates/fragments/files_list.html
new file mode 100644
index 0000000..aba3000
--- /dev/null
+++ b/templates/fragments/files_list.html
@@ -0,0 +1,18 @@
+<div id="files-list">
+  <ul>
+  {% for item in listing %}
+    <li>
+    {% if item.kind == "file" %}
+      <a href="{{ item.static_path }}">📄 {{ item.name }}</a>
+    {% else %}
+      <a
+        href="/?show_files=1&dir={{ item.full_path | urlencode }}"
+        hx-post="/navigate_files/{{ item.full_path | urlencode }}"
+        hx-trigger="click"
+        hx-target="#files-list"
+        hx-swap="outerHTML">📂 {{ item.name }}/</a>
+    {% endif %}
+    </li>
+  {% endfor %}
+  </ul>
+</div>
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..911992f
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charSet="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>Jan Tuomi</title>
+  <meta name="description" content="The personal home page of Jan Tuomi" />
+  <link rel="stylesheet" href="static/index.css">
+  <script src="static/htmx.min.js"></script>
+</head>
+
+<body>
+  <div class="container">
+    <main>
+      <h1 class="title">Jan Tuomi</h1>
+      <div class="socials">
+        <a class="social" target="blank" rel="noopener noreferrer" href="https://t.me/kal_jan">
+          <img src="static/social/telegram.svg" alt="Telegram" />
+        </a>
+        <a class="social" target="blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/jantuomi/">
+          <img src="static/social/linkedin.svg" alt="LinkedIn" />
+        </a>
+        <a class="social" target="blank" rel="noopener noreferrer" href="http://github.com/jantuomi">
+          <img src="static/social/github.svg" alt="GitHub" />
+        </a>
+        <a class="social" target="blank" rel="noopener noreferrer" href="https://dice.camp/@kal_jan">
+          <img src="static/social/mastodon.svg" alt="Mastodon" />
+        </a>
+      </div>
+      <div class="boxes">
+        {% include 'fragments/files_drawer_form.html' %}
+      </div>
+      {% include 'fragments/files_list.html' %}
+    </main>
+  </div>
+</body>
+
+</html>
diff --git a/templates/responses/click_files_drawer_toggle.html b/templates/responses/click_files_drawer_toggle.html
new file mode 100644
index 0000000..87936f4
--- /dev/null
+++ b/templates/responses/click_files_drawer_toggle.html
@@ -0,0 +1,7 @@
+{% include 'fragments/files_drawer_form.html' %}
+
+<div id="files-list"
+  hx-swap-oob="outerHTML">
+
+  {% include 'fragments/files_list.html' %}
+</div>
diff --git a/templates/responses/navigate_files.html b/templates/responses/navigate_files.html
new file mode 100644
index 0000000..23763ba
--- /dev/null
+++ b/templates/responses/navigate_files.html
@@ -0,0 +1 @@
+{% include 'fragments/files_list.html' %}