Add documentation search.

NEWS

@@ -1,5 +1,6 @@
 2.0.10.dev0
  * #1161: Fix a traceback (TypeError) in the "check" action with Python 3.14.
+ * Add documentation search.
  * Change the URL of the local documentation development server to be more like the production URL.
 
 2.0.9

README.md

@@ -2,9 +2,6 @@
 title: borgmatic
 permalink: index.html
 ---
-
-## It's your data. Keep it that way.
-
 <img src="docs/static/borgmatic.png" alt="borgmatic logo" width="150px" style="float: right; padding-left: 1em;">
 
 borgmatic is simple, configuration-driven backup software for servers and

docs/Dockerfile

@@ -29,6 +29,7 @@ COPY --from=borgmatic /contributors.html /source/docs/_includes/borgmatic/contri
 COPY . /source
 RUN NODE_ENV=${ENVIRONMENT} npx eleventy --input=/source/docs --output=/output/docs \
   && mv /output/docs/index.html /output/index.html
+RUN npx -y pagefind --site /output
 
 FROM docker.io/nginx:1.26.1-alpine
 

docs/_includes/header.njk

@@ -1,4 +1,5 @@
 <header class="elv-layout elv-layout-full elv-header{% if headerClass %} {{ headerClass }}{% endif %}">
     {% if page.url != '/' %}<h3><a href="https://torsion.org/borgmatic/">borgmatic</a></h3>{% endif %}
     <h1 class="elv-hed">{{ title | safe }}</h1>
+    {% if page.url == '/' %}<h3>It's your data. Keep it that way.</h3>{% endif %}
 </header>

docs/_includes/index.css

@@ -548,3 +548,15 @@ main .elv-toc + h1 .direct-link {
 .mdi.mdi-content-copy {
     --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19 21H8V7h11m0-2H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2m-3-4H4a2 2 0 0 0-2 2v14h2V3h12V1Z'/%3E%3C/svg%3E");
 }
+
+#search-entrance {
+		padding-bottom: 1em;
+}
+
+#search-entrance form {
+		display: inline-block;
+}
+
+#search {
+		padding-top: 1em;
+}

docs/_includes/layouts/base.njk

@@ -4,8 +4,7 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
                 <meta name="generator" content="{{ eleventy.generator }}">
-		<link rel="icon" href="https://torsion.org/borgmatic/docs/static/borgmatic.png" type="image/x-icon">
-		<title>{{ subtitle + ' - ' if subtitle}}{{ title }}</title>
+		<title>borgmatic{% if subtitle or title %} - {% endif %}{{ subtitle + ' - ' if subtitle}}{{ title }}</title>
 {%- set css %}
 {% include 'index.css' %}
 {% include 'components/lists.css' %}

docs/_includes/layouts/main.njk

@@ -7,6 +7,16 @@ headerClass: elv-header-default
 
 <main class="elv-layout{% if layoutClass %} {{ layoutClass }}{% endif %}">
     <div id="documentation" class="elv-toc">
+        {% if page.url != '/search/' %}
+        <div id="search-entrance">
+            🔍
+            <form action="/borgmatic/docs/search/">
+                <label>
+                    <input type="search" name="query" placeholder="Search">
+                </label>
+            </form>
+        </div>
+        {% endif %}
         <div>
             {% set navPages = collections.all | eleventyNavigation %}
             {% macro renderNavListItem(entry) -%}

docs/search.md

@@ -0,0 +1,14 @@
+---
+title: Search documentation
+eleventyExcludeFromCollections: true
+---
+<link href="/borgmatic/pagefind/pagefind-ui.css" rel="stylesheet">
+<script src="/borgmatic/pagefind/pagefind-ui.js"></script>
+<div id="search"></div>
+<script>
+    window.addEventListener('DOMContentLoaded', (event) => {
+        let search = new PagefindUI({ element: '#search', showSubResults: true, autofocus: true });
+        let url_parameters = new URLSearchParams(window.location.search);
+        search.triggerSearch(url_parameters.get('query'));
+    });
+</script>