feat: add pagefind search

Makefile

@@ -22,6 +22,7 @@ ALLSPHINXOPTS = --builder $(BUILDER) \
 .PHONY: html
 html: venv
 	$(SPHINXBUILD) $(ALLSPHINXOPTS)
+	$(VENVDIR)/bin/python3 -m pagefind --site $(BUILDDIR) --verbose
 
 ## htmlview       to open the index page built by the html target in your browser
 .PHONY: htmlview

pep_sphinx_extensions/pep_theme/static/mq.css

@@ -17,6 +17,10 @@
     nav#pep-sidebar {
         display: none;
     }
+    /* Show mobile search container on small screens */
+    .mobile-search-container {
+        display: block;
+    }
     pre {
         font-size: 0.8175rem;
     }
@@ -46,6 +50,10 @@
         float: left;
         margin-right: 2%;
     }
+    /* Hide mobile search container on larger screens */
+    .mobile-search-container {
+        display: none;
+    }
   /* Make less prominent when sidebar ToC is available */
   details > summary {
       font-size: 1rem;

pep_sphinx_extensions/pep_theme/templates/page.html

@@ -46,11 +46,16 @@ <h1>Python Enhancement Proposals</h1>
                 <span class="visually-hidden">Toggle light / dark / auto colour theme</span>
             </button>
         </header>
-        <article>
+        {# Mobile search box - visible only on small screens #}
+        <div id="mobile-search" class="mobile-search-container"></div>
+        <article data-pagefind-body>
+            {# Add pagefind meta for the title to improve search result display #}
+            <div data-pagefind-meta="title:{{ title }}" style="display:none;"></div>
             {{ body }}
         </article>
         {%- if not pagename.startswith(("404", "numerical")) %}
         <nav id="pep-sidebar">
+            <div id="search"></div>
             <h2>Contents</h2>
             {{ toc }}
             <br>
@@ -65,5 +70,18 @@ <h2>Contents</h2>
     <script src="{{ pathto('_static/sticky_banner.js', resource=True) }}"></script>
     <script src="https://analytics.python.org/js/script.outbound-links.js"
             data-domain="peps.python.org" defer></script>
+    <script src="/pagefind/pagefind-ui.js"></script>
+    <script>
+        window.addEventListener('DOMContentLoaded', (event) => {
+            // Initialize pagefind for desktop sidebar
+            new PagefindUI({ element: "#search", showSubResults: true });
+
+            // Initialize pagefind for mobile view
+            const mobileSearch = document.getElementById('mobile-search');
+            if (mobileSearch && window.innerWidth <= 640) {
+                new PagefindUI({ element: "#mobile-search", showSubResults: false });
+            }
+        });
+    </script>
 </body>
 </html>

requirements.txt

@@ -5,6 +5,8 @@ Pygments >= 2.9.0
 Sphinx >= 5.1.1, != 6.1.0, != 6.1.1, < 8.1.0
 docutils >= 0.19.0
 sphinx-notfound-page >= 1.0.2
+# For search
+pagefind[bin] >= 1.3.0
 
 # For tests
 pytest