Implement site search with Pagefind

pelicanconf.py

@@ -57,12 +57,6 @@
     PLUGINS = ['webassets']
 else:
     PLUGINS = ['webassets', 'neighbors']
-    """
-    Search functionality disabled while troubleshooting performance issues
-    for non-desktop readers. See https://github.com/rust-lang/this-week-in-rust/issues/4271
-    PLUGINS = ['webassets', 'neighbors', 'search']
-    SEARCH_HTML_SELECTOR = "article"
-    """
 
 MARKDOWN = {
     'extension_configs': {

publishing/Dockerfile

@@ -19,16 +19,14 @@ ENV LANGUAGE=en_US.UTF-8
 COPY requirements.txt .
 RUN pip3 install -r requirements.txt
 
-# install Stork
-RUN curl https://files.stork-search.net/releases/v1.5.0/stork-ubuntu-20-04 -o stork \
-    && chmod +x stork \
-    && mv ./stork /usr/bin/stork
-
 # install sass/juice
 RUN curl -fsSL https://deb.nodesource.com/setup_20.x | bash -
 RUN apt-get install -y nodejs
 RUN npm install -g sass juice
 
+RUN curl -L -o pagefind.tar.gz https://github.com/Pagefind/pagefind/releases/download/v1.4.0/pagefind_extended-v1.4.0-aarch64-unknown-linux-musl.tar.gz
+RUN tar -xvf pagefind.tar.gz
+
 # pelican setup
 COPY content content
 COPY plugins plugins

publishing/justfile

@@ -64,6 +64,10 @@ generate-website: docker-build clean-website
 	docker run -it \
 		-v {{justfile_directory()}}/output-website:/usr/twir/output \
 		twir:latest
+	docker run -it \
+		-v {{justfile_directory()}}/output-website:/usr/twir/output \
+		twir:latest \
+		python3 -m pagefind --site /usr/twir/output
 	@echo "Finished generating website."
 
 # Host website locally on port 8000

requirements.txt

@@ -5,5 +5,4 @@ libsass==0.21.0
 Markdown==3.3.7
 markupsafe==2.0.1
 pelican==4.7.1
-pelican-webassets==2.0.0
-pelican-search==1.0.1
+pelican-webassets==2.0.0

themes/rusted/templates/_post-title.html

@@ -1,10 +1,10 @@
 <div class="row post-title">
   <div class="col-xs-12 col-sm-4">
     <span class="small text-muted time-prefix">
-      <time pubdate="pubdate" datetime="{{ article.date.isoformat() }}">{{ article.date.strftime("%d %b %Y").upper() }}</time>
+      <time pubdate="pubdate" datetime="{{ article.date.isoformat() }}" data-pagefind-sort="date:{{ article.date }}">{{ article.date.strftime("%d %b %Y").upper() }}</time>
     </span>
   </div>
   <div class="col-xs-12 col-sm-8 text-right custom-xs-text-left">
-    <a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a>
+    <a href="{{ SITEURL }}/{{ article.url }}" data-pagefind-meta="title">{{ article.title }}</a>
   </div>
 </div>

themes/rusted/templates/_search-bar.html

@@ -0,0 +1,19 @@
+<div class="row">
+  <div class="col-sm-1"></div>
+  <div>
+    <link href="/pagefind/pagefind-ui.css" rel="stylesheet">
+    <script src="/pagefind/pagefind-ui.js"></script>
+    <div class="col-sm-10" id="search"></div>
+    <script>
+        window.addEventListener('DOMContentLoaded', (event) => {
+            new PagefindUI({
+                element: "#search",
+                showSubResults: true,
+                debounceTimeoutMs: 0,
+                sort: { date: "desc" }
+            });
+        });
+    </script>
+  </div>
+  <div class="col-sm-1"></div>
+</div>

themes/rusted/templates/base.html

@@ -32,9 +32,6 @@
     <link href="{{ FEED_DOMAIN }}/{{ FEED_ALL_ATOM }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME|striptags }} - Full Atom Feed" />
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
-    <!-- Search temporarily disabled. See https://github.com/rust-lang/this-week-in-rust/issues/4271
-    <link rel="stylesheet" href="https://files.stork-search.net/basic.css" />
-    <link rel="stylesheet" media="screen and (prefers-color-scheme: dark)" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/stork-dark.css"> -->
     {% assets filters="libsass,cssmin", output="css/web-min.css", "css/main.scss" %}
 
     <link rel="stylesheet" href="/{{ ASSET_URL }}" />

themes/rusted/templates/index.html

@@ -27,23 +27,6 @@ <h1 class="pitch">Handpicked Rust updates, <br /> delivered to your inbox.</h1>
       </li>
     </ul>
   </div>
-  <!-- Search temporarily disabled. See https://github.com/rust-lang/this-week-in-rust/issues/4271
-  <div class ="col-md-12">
-    <ul class="list-unstyled search">
-      <li class="nav-header disabled"><h2>Search</h2></li>
-      <div>
-        <p class="subtext">Generic or unspecific search terms may result in unhelpful results - there is currently no exact matching on phrases.</p>
-        <input data-stork="sitesearch" class="form-control"/>
-        <div data-stork="sitesearch-output"></div>
-
-        <script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/stork.js"></script>
-        <script>
-          stork.initialize("{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/stork.wasm")
-          stork.downloadIndex("sitesearch", "{{ SITEURL }}/search-index.st")
-          stork.attach("sitesearch")
-        </script>
-      </div>
-    </ul>
-  </div> -->
 </div>
+{% include "_search-bar.html" %}
 {% endblock content %}