Infra: add pagefind search (#4247)

miketheman · web-flow · commit 5f1edbbfa1b5 · 2026-01-24T21:53:43.000+02:00
diff --git a/Makefile b/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
diff --git a/pep_sphinx_extensions/pep_theme/static/mq.css b/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;
diff --git a/pep_sphinx_extensions/pep_theme/static/style.css b/pep_sphinx_extensions/pep_theme/static/style.css
@@ -427,6 +427,182 @@ dl.footnote > dd {
     padding-bottom: 2rem;
     font-weight: bold;
 }
+/* Pagefind search styling (custom, no default CSS) */
+.pagefind-ui {
+    --pagefind-ui-primary: var(--colour-links);
+    --pagefind-ui-text: var(--colour-text);
+    --pagefind-ui-background: var(--colour-background);
+    --pagefind-ui-border: var(--colour-background-accent-strong);
+    font-family: inherit;
+    width: 100%;
+}
+
+/* Search form */
+.pagefind-ui__form {
+    position: relative;
+}
+
+/* Search icon */
+.pagefind-ui__form::before {
+    background-color: var(--pagefind-ui-text);
+    width: 14px;
+    height: 14px;
+    top: 8px;
+    left: 8px;
+    content: "";
+    position: absolute;
+    display: block;
+    opacity: 0.5;
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.7549 11.255H11.9649L11.6849 10.985C12.6649 9.845 13.2549 8.365 13.2549 6.755C13.2549 3.165 10.3449 0.255005 6.75488 0.255005C3.16488 0.255005 0.254883 3.165 0.254883 6.755C0.254883 10.345 3.16488 13.255 6.75488 13.255C8.36488 13.255 9.84488 12.665 10.9849 11.685L11.2549 11.965V12.755L16.2549 17.745L17.7449 16.255L12.7549 11.255ZM6.75488 11.255C4.26488 11.255 2.25488 9.245 2.25488 6.755C2.25488 4.26501 4.26488 2.255 6.75488 2.255C9.24488 2.255 11.2549 4.26501 11.2549 6.755C11.2549 9.245 9.24488 11.255 6.75488 11.255Z' fill='%23000000'/%3E%3C/svg%3E%0A");
+    mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.7549 11.255H11.9649L11.6849 10.985C12.6649 9.845 13.2549 8.365 13.2549 6.755C13.2549 3.165 10.3449 0.255005 6.75488 0.255005C3.16488 0.255005 0.254883 3.165 0.254883 6.755C0.254883 10.345 3.16488 13.255 6.75488 13.255C8.36488 13.255 9.84488 12.665 10.9849 11.685L11.2549 11.965V12.755L16.2549 17.745L17.7449 16.255L12.7549 11.255ZM6.75488 11.255C4.26488 11.255 2.25488 9.245 2.25488 6.755C2.25488 4.26501 4.26488 2.255 6.75488 2.255C9.24488 2.255 11.2549 4.26501 11.2549 6.755C11.2549 9.245 9.24488 11.255 6.75488 11.255Z' fill='%23000000'/%3E%3C/svg%3E%0A");
+    -webkit-mask-size: 100%;
+    mask-size: 100%;
+    z-index: 9;
+    pointer-events: none;
+}
+
+/* Search input */
+.pagefind-ui__search-input {
+    height: 30px;
+    padding: 4px 28px 4px 28px;
+    background-color: var(--pagefind-ui-background);
+    border: 1px solid var(--pagefind-ui-border);
+    border-radius: 3px;
+    font-size: 0.875rem;
+    font-family: inherit;
+    appearance: none;
+    -webkit-appearance: none;
+    width: 100%;
+    box-sizing: border-box;
+    color: var(--pagefind-ui-text);
+}
+.pagefind-ui__search-input:focus {
+    outline: none;
+    border-color: var(--pagefind-ui-primary);
+}
+.pagefind-ui__search-input::placeholder {
+    color: var(--pagefind-ui-text);
+    opacity: 0.5;
+}
+
+/* Clear button - fixed position relative to input (30px height, center button) */
+.pagefind-ui__search-clear {
+    position: absolute;
+    top: 5px;
+    right: 4px;
+    padding: 2px 6px;
+    color: var(--pagefind-ui-text);
+    font-size: 0.75rem;
+    cursor: pointer;
+    background-color: var(--pagefind-ui-background);
+    border: none;
+    opacity: 0.6;
+}
+.pagefind-ui__search-clear:hover {
+    opacity: 1;
+}
+
+/* Results container */
+.pagefind-ui__results-area {
+    margin-top: 0.5rem;
+}
+
+/* Results list */
+#pep-sidebar .pagefind-ui__results {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+/* Individual result */
+.pagefind-ui__result {
+    padding: 0.5rem 0 0.5rem 0.5rem;
+    border-bottom: 1px solid var(--colour-rule-light);
+}
+.pagefind-ui__result:last-child {
+    border-bottom: none;
+}
+
+/* Result link */
+.pagefind-ui__result-link {
+    font-weight: bold;
+    font-size: 0.9rem;
+    text-decoration: none;
+    color: var(--colour-links);
+}
+.pagefind-ui__result-link:hover {
+    text-decoration: underline;
+}
+
+/* Result title */
+.pagefind-ui__result-title {
+    margin: 0;
+}
+
+/* Result excerpt/snippet */
+.pagefind-ui__result-excerpt {
+    font-size: 0.8rem;
+    color: var(--colour-text);
+    margin: 0.25rem 0 0;
+    line-height: 1.4;
+}
+
+/* Highlight matches in results */
+.pagefind-ui__result-excerpt mark,
+mark.pagefind-ui__highlight {
+    background-color: var(--colour-caution);
+    color: inherit;
+    padding: 0 2px;
+}
+
+/* Message when no results */
+.pagefind-ui__message {
+    font-size: 0.85rem;
+    color: var(--colour-text);
+    padding: 0.5rem 0;
+}
+
+/* Loading state */
+.pagefind-ui__loading {
+    font-size: 0.85rem;
+    color: var(--colour-text);
+    opacity: 0.7;
+}
+
+/* Sub-results (nested) */
+.pagefind-ui__result-nested {
+    margin-left: 1rem;
+    padding: 0.25rem 0;
+}
+.pagefind-ui__result-nested .pagefind-ui__result-link {
+    font-weight: normal;
+    font-size: 0.85rem;
+}
+
+/* Button styling */
+.pagefind-ui__button {
+    background: var(--colour-background-accent-light);
+    border: 1px solid var(--colour-background-accent-strong);
+    padding: 0.4rem 0.8rem;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.85rem;
+    color: var(--colour-text);
+    margin-top: 0.5rem;
+}
+.pagefind-ui__button:hover {
+    background: var(--colour-background-accent-medium);
+}
+
+/* Drawer (expandable results container) */
+.pagefind-ui__drawer {
+    overflow: hidden;
+}
+
+/* Suppress unused pagefind elements */
+.pagefind-ui__suppressed {
+    display: none;
+}
 
 .reference.external > strong {
     font-weight: normal;  /* Fix strong links for :pep: and :rfc: roles */
diff --git a/pep_sphinx_extensions/pep_theme/templates/page.html b/pep_sphinx_extensions/pep_theme/templates/page.html
@@ -33,7 +33,7 @@
     </script>
     <section id="pep-page-section">
         <header>
-            <h1>Python Enhancement Proposals</h1>
+            <h1 data-pagefind-ignore>Python Enhancement Proposals</h1>
             <ul class="breadcrumbs">
                 <li><a href="https://www.python.org/" title="The Python Programming Language">Python</a> &raquo; </li>
                 <li><a href="{{ pathto("pep-0000") }}">PEP Index</a> &raquo; </li>
@@ -46,11 +46,21 @@ <h1>Python Enhancement Proposals</h1>
                 <span class="visually-hidden">Toggle light / dark / auto colour theme</span>
             </button>
         </header>
+        {# Mobile search box - visible only on small screens #}
+        <div id="mobile-search" class="mobile-search-container"></div>
+        {# Exclude noisy non-PEP pages from Pagefind indexing #}
+        {%- if pagename.startswith(("404", "numerical", "pep-0000", "topic")) %}
         <article>
+        {%- else %}
+        <article data-pagefind-body>
+        {%- endif %}
+            {# Add pagefind meta for the title to improve search result display #}
+            <span data-pagefind-meta="title:{{ title }}" data-pagefind-weight="10" class="visually-hidden">{{ title }}</span>
             {{ body }}
         </article>
         {%- if not pagename.startswith(("404", "numerical")) %}
         <nav id="pep-sidebar">
+            <div id="search"></div>
             <h2>Contents</h2>
             {{ toc }}
             <br>
@@ -65,5 +75,25 @@ <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) => {
+            // Ranking configuration to boost exact title matches
+            const searchOptions = {
+                ranking: {
+                    termSimilarity: 9.0, // Higher values favor exact matches
+                    termFrequency: 0.5, // Lower values reduce penalty for low term frequency
+                    pageLength: 0.2, // Lower values reduce the impact of page length
+                }
+            };
+
+            // Initialize pagefind for either mobile or desktop, not both
+            if (window.innerWidth <= 640) {
+                new PagefindUI({ element: "#mobile-search", ...searchOptions, showSubResults: false });
+            } else {
+                new PagefindUI({ element: "#search", ...searchOptions, showSubResults: true });
+            }
+        });
+    </script>
 </body>
 </html>
diff --git a/requirements.txt b/requirements.txt
@@ -6,6 +6,8 @@ Pygments >= 2.19
 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.4.0
 
 # For tests
 pytest>=9
