Add basic pagefind setup

pagefind.yml

@@ -0,0 +1,10 @@
+site: public
+output_subdir: pagefind
+exclude_selectors:
+  # Ignore codeblocks
+  - "code"
+  # Blocked due to https://github.com/Pagefind/pagefind/issues/1134
+  # - "#that-s-all-i-know"
+  # - "#that-s-all-i-know-checkered-flag"
+  # - "#that-s-all-i-know+p"
+  # - "#that-s-all-i-know-checkered-flag+p"

templates/docs/index.html

@@ -1,6 +1,6 @@
 {% extends "skel.html" %}
 {% block content %}
-<article class="content">
+<article data-pagefind-filter="section:Documentation" class="content">
     <header>
         <h1>{{ section.title }}</h1>
         {% set iso_date = section.extra.updated | date(format = '%Y-%m-%d') %}

templates/docs/with_menu.html

@@ -16,8 +16,8 @@
 {% set root_section = get_section(path="docs/technical/_index.md") %}
 {% endif %}
 
-<div class="docs-body">
-    <div class="docs-menu">
+<div data-pagefind-filter="section:Documentation" class="docs-body">
+    <div class="docs-menu" data-pagefind-ignore="all">
         <div class="docs-menu-inner">
             {% for doc_section_path in docs_sections.subsections %}
             {% set doc_section = get_section(path=doc_section_path) %}

templates/includes/header.html

@@ -7,6 +7,11 @@
     <label for="site-header-dropdown-checkbox" class="page-overlay"></label>
     <nav>
         {% for link in navigation.header %}
+        {% if loop.index0 == navigation.header | length - 1 %}
+        <pagefind-modal-trigger></pagefind-modal-trigger>
+        <pagefind-modal></pagefind-modal>
+        {% endif %}
+
         {% if link.section %}
         {% set href = "/" ~ link.section ~ "/" %}
         {% set section = get_section(path=link.section ~ "/_index.md") %}

templates/page.html

@@ -6,7 +6,7 @@
 {% endif %}
 {% endblock head_extra %}
 {% block content %}
-<article class="content">
+<article data-pagefind-filter="section:Pages" class="content">
     <header>
         <h1>{{ page.title }}</h1>
     </header>

templates/post.html

@@ -44,22 +44,24 @@
 </script>
 {% endblock head_extra %}
 {% block content %}
-<article class="content post {%- if page.toc %} with-sidebar{% endif %}">
+<article data-pagefind-filter="section:Blog" class="content post {%- if page.toc %} with-sidebar{% endif %}">
     <header>
-        <h1>{{ page.title }}</h1>
+        <h1 data-pagefind-filter="heading">{{ page.title }}</h1>
         <span>
+            <span data-pagefind-sort="date:{{page.date | date(format='%Y-%m-%d')}}">
             {{ page.date | date(format="%Y-%m-%d") }}
+            </span>
             {% if page.taxonomies.category %}
             —
             {% for category in page.taxonomies.category | sort %}
-                <a href="/category/{{ category | slugify }}">
+                <a href="/category/{{ category | slugify }}" data-pagefind-filter="category">
                     {{- category -}}
                 </a>
             {%- if not loop.last %}, {% endif %}{% endfor %}
             {% endif %}
             —
             {% for author in page.taxonomies.author %}
-                <a href="/author/{{ author | default (value=['unknown author']) | slugify }}">
+                <a href="/author/{{ author | default (value=['unknown author']) | slugify }}" data-pagefind-filter="author">
                     {{- author | default (value=["unknown author"]) -}}
                 </a>
             {%- if not loop.last %}, {% endif %}

templates/skel.html

@@ -49,7 +49,8 @@
     <link rel="stylesheet" href="{{ get_url(path="/style.css" , cachebust=true) }}" />
     <script async src="{{ get_url(path="/js/components.js" , cachebust=true) }}"></script>
     <script defer data-domain="matrix.org" src="https://plausible.io/js/script.tagged-events.js"></script>
-
+    <link href="/pagefind/pagefind-component-ui.css" rel="stylesheet">
+    <script src="/pagefind/pagefind-component-ui.js" type="module"></script>
 
     {% block head_extra %}{% endblock head_extra -%}
 </head>
@@ -58,7 +59,7 @@
     {% set navigation = load_data(path="navigation.toml") %}
     {% include "includes/header.html" %}
     {{ banner::banner() }}
-    <main>
+    <main data-pagefind-body>
         {% block content %}{% endblock content %}
     </main>