From 463c202d80f57efb8e46bab4ee4ad7038444b25d Mon Sep 17 00:00:00 2001
From: Elias Haugsbakk <elias.haugsbakk@gmail.com>
Date: Mon, 6 Jul 2026 21:12:40 +0200
Subject: implement post searching

---
 .../src/main/resources/templates/blog-search.html  | 41 ++++++++++++++++++++++
 .../src/main/resources/templates/blog.html         | 25 ++++++++++---
 .../src/main/resources/templates/layout.html       |  5 +++
 .../src/main/resources/templates/post.html         |  1 +
 4 files changed, 68 insertions(+), 4 deletions(-)
 create mode 100644 clams-server/src/main/resources/templates/blog-search.html

(limited to 'clams-server/src/main/resources/templates')

diff --git a/clams-server/src/main/resources/templates/blog-search.html b/clams-server/src/main/resources/templates/blog-search.html
new file mode 100644
index 0000000..e2188cf
--- /dev/null
+++ b/clams-server/src/main/resources/templates/blog-search.html
@@ -0,0 +1,41 @@
+{% extends "templates/layout.html" %}
+
+{% block content %}
+<main class="main-container">
+    <a href="/blog" class="back-link-top">&larr; back</a>
+    <header>
+        <h1>Elias Haugsbakk's Blog</h1>
+        <p class="intro-text">For search: "<strong>{{ search_term }}</strong>" -- Found {{ results_count }} matching posts</p>
+
+        <form action="/blog" method="GET" class="search-form">
+            <input type="text" name="search" value="{{ search_term }}" placeholder="Search posts..." aria-label="Search blog posts">
+            <button type="submit">Search</button>
+        </form>
+    </header>
+
+    <div class="search-results-container">
+        {% if results is empty %}
+            <div class="no-results">
+                {% if search_term is empty %}
+                    <p>Please enter a search term to search the blog posts. Or <a href="/blog">go back to all posts</a>.</p>
+                {% else %}
+                    <p>Found no posts matching <strong>"{{ search_term }}"</strong>. <br>
+                        <a href="/blog">Go back to all posts</a>.</p>
+                {% endif %}
+            </div>
+        {% else %}
+            <ul class="search-results-list">
+                {% for post in results %}
+                    <li class="search-result-item">
+                        <span class="search-result-date">{{ post.formattedDate }}</span>
+                        <a href="/blog/{{ post.slug }}">{{ post.title }}</a>
+                        {% if post.summary is not empty %}
+                            <span class="search-result-summary">-- {{ post.summary }}</span>
+                        {% endif %}
+                    </li>
+                {% endfor %}
+            </ul>
+        {% endif %}
+    </div>
+</main>
+{% endblock %}
diff --git a/clams-server/src/main/resources/templates/blog.html b/clams-server/src/main/resources/templates/blog.html
index 200a144..2c484a1 100644
--- a/clams-server/src/main/resources/templates/blog.html
+++ b/clams-server/src/main/resources/templates/blog.html
@@ -4,10 +4,12 @@
 <main class="main-container">
     <header>
         <h1>Elias Haugsbakk's Blog</h1>
-        <p class="intro-text">This is the home page for my blog. The list of blog posts is a diverse collection of some of my writings; if you're just browsing, this might be a good place to start.</p>
+        <p class="intro-text">This is the home page for my blog. The featured list is a diverse collection of some
+            of my writings; if you're just browsing, this might be a good place to start.</p>
 
         <form action="/blog" method="GET" class="search-form">
-            <input type="text" name="search" value="{{ search_value }}" placeholder="Search posts..." aria-label="Search blog posts">
+            <input type="text" name="search" value="{{ search_value }}" placeholder="Search posts..."
+                   aria-label="Search blog posts">
             <button type="submit">Search</button>
         </form>
     </header>
@@ -16,14 +18,29 @@
         <div class="left-column">
             <section id="all" class="blog-section">
                 <h2>All Posts</h2>
-                {{ all_posts| raw }}
+                {% for group in posts_by_year %}
+                <details class="year-accordion" {% if loop.first %}open{% endif %}>
+                    <summary class="year-toggle">{{ group.key }}</summary>
+                    <ul class="post-list">
+                        {% for post in group.value %}
+                        <li><a href="/blog/{{ post.slug }}">{{ post.title }}</a></li>
+                        {% endfor %}
+                    </ul>
+                </details>
+                {% endfor %}
             </section>
         </div>
 
         <div class="right-column">
             <section id="recent" class="blog-section">
                 <h2>Featured</h2>
-                {{ recent_posts | raw }}
+                <ul class="recent-list">
+                    {% for post in featured_posts %}
+                    <li>
+                        <a href="/blog/{{ post.slug }}">{{ post.title }}</a> <span class="featured-desc">-- {{ post.summary }}</span>
+                    </li>
+                    {% endfor %}
+                </ul>
             </section>
         </div>
     </div>
diff --git a/clams-server/src/main/resources/templates/layout.html b/clams-server/src/main/resources/templates/layout.html
index 4c8b8dc..1460721 100644
--- a/clams-server/src/main/resources/templates/layout.html
+++ b/clams-server/src/main/resources/templates/layout.html
@@ -6,6 +6,11 @@
     <title>{{ page_title }}</title>
     <link rel="stylesheet" href="/css/common.css">
     <link rel="stylesheet" href="/css/{{ page_css }}.css">
+
+    <!-- Google Fonts link for Spectral (Regular 400 and Italic) -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;1,400&display=swap" rel="stylesheet">
 </head>
 <body>
 
diff --git a/clams-server/src/main/resources/templates/post.html b/clams-server/src/main/resources/templates/post.html
index 7e99e1f..7899099 100644
--- a/clams-server/src/main/resources/templates/post.html
+++ b/clams-server/src/main/resources/templates/post.html
@@ -2,6 +2,7 @@
 
 {% block content %}
 <main class="main-container">
+    <a href="/blog" class="back-link-top">&larr; back</a>
     <header class="post-header">
         <span class="post-date">{{ published_date }}</span>
         <span class="post-author">{{ author }}</span>
-- 
cgit v1.2.3