From ade244c72af62827c4c30151404abf755597f243 Mon Sep 17 00:00:00 2001
From: Arne Rief <riearn@proton.me>
Date: Mon, 1 Sep 2025 21:57:30 +0200
Subject: Search & socials

---
 layouts/_default/list.html   | 28 +++++++++++-------
 layouts/_default/search.html | 69 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 86 insertions(+), 11 deletions(-)
 create mode 100644 layouts/_default/search.html

(limited to 'layouts/_default')

diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 8ff9b18..d3d2d99 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,28 +1,34 @@
 {{- define "main" }}
-<section class="section-list">
-    <header class="section-list__header">
-        <h1 class="section-list__headline">
+<section class="list-page">
+    <header class="list-page__header">
+        <h1 class="list-page__headline">
             {{ .Title }}
         </h1>
+        {{- with .Content }}
+            <div class="list-page__description">
+                {{ . }}
+            </div>
+        {{- else  }}
         {{- $description := or .Description .Summary (lang.Translate "list.default_description" .Title | default (printf "All posts in %s" .Title)) }}
-        <p class="section-list__description">
-            {{ $description }}
-        </p>
+            <p class="list-page__description">
+                {{ $description }}
+            </p>
+        {{- end }}
     </header>
 
-    <section class="section-list__content" aria-label="{{ lang.Translate "posts.name" | default "Posts" }}">
+    <section class="list-page__content" aria-label="{{ lang.Translate "posts.name" | default "Posts" }}">
         {{- /* 20 posts per site */ -}}
         {{- $paginator := .Paginate .Pages 20 }}
         {{- with $paginator.Pages }}
-            <ul class="section-list__posts">
+            <ul class="list-page__posts-list">
                 {{- range . }}
-                    <li class="section-list__post">
+                    <li class="list-page__post">
                         {{- partial "list/post-card.html" . }}
                     </li>
                 {{- end }}
             </ul>
-        {{- else }}
-            <p class="section-list__empty-message">
+        {{ else }}
+            <p class="list-page__empty-message">
                 {{ lang.Translate "list.empty" | default "No posts found in this section." }}
             </p>
         {{- end }}
diff --git a/layouts/_default/search.html b/layouts/_default/search.html
new file mode 100644
index 0000000..569cc9a
--- /dev/null
+++ b/layouts/_default/search.html
@@ -0,0 +1,69 @@
+{{ define "main" }}
+<section class="search-page">
+    <header class="search-page__header">
+        <h1 class="search-page__heading">
+            {{ .Title }}
+        </h1>
+        {{- with .Content }}
+            <div class="search-page__description">
+                {{ . }}
+            </div>
+        {{- else }}
+        {{- $description := or .Description (lang.Translate "search.description" | default "Find posts by search term.") }}
+            <p class="search-page__description">
+                {{ $description }}
+            </p>
+        {{- end }}
+    </header>
+
+    <section class="search-page__container" aria-label="{{ lang.Translate "search.label" | default "Search all posts" }}">
+        <form id="search-form" class="search-form" role="search" autocomplete="off">
+            <label for="search-input" class="search-form__label">
+                {{ lang.Translate "search.label" | default "Search all posts" }}
+            </label>
+            <div class="search-form__input-wrapper">
+                <input
+                    id="search-input"
+                    class="search-form__input"
+                    type="search"
+                    data-index-url="{{ site.Home.RelPermalink }}index.json"
+                    placeholder="{{ lang.Translate "search.placeholder" | default "Type to search..." }}"
+                />
+                <button
+                    id="search-reset"
+                    type="button"
+                    class="search-form__reset"
+                    aria-label="{{ lang.Translate "search.reset" | default "Clear search" }}"
+                >
+                    <span class="search-clear__icon" aria-hidden="true">&times;</span>
+                </button>
+            </div>
+        </form>
+
+    </section>
+
+    <div id="search-results" class="search-page__results" aria-live="polite">
+        <p class="search-results__count" hidden>
+            <span id="search-results-number">0</span>
+            {{ lang.Translate "search.matches" | default "matches" }}
+        </p>
+
+        <ul class="search-results__list" hidden></ul>
+
+        {{- /* Hidden template, used for hydrating search results from index.json with JS */ -}}
+        <template id="search-result-template">
+            {{- $mockPost := dict 
+                "Title" "TEMPLATE_TITLE"
+                "RelPermalink" "TEMPLATE_URL"
+                "Date" now
+                "Summary" "TEMPLATE_SUMMARY"
+                "Params" (dict "tags" (slice "TEMPLATE_TAG"))
+            -}}
+            <li class="search-results__list-item">
+                {{- partial "list/post-card.html" $mockPost }}
+            </li>
+        </template>
+
+    </div>
+</section>
+{{ end }}
-- 
cgit v1.2.3