Skip to content

Commit e704194

Browse files
mikethemanmiketheman
authored
Infra: update pagefind and improve interface (#4891)
Signed-off-by: Mike Fiedler <miketheman@gmail.com>
1 parent 2a60d2d commit e704194

4 files changed

Lines changed: 26 additions & 199 deletions

File tree

‎pep_sphinx_extensions/pep_theme/static/colour_scheme.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ const setColourScheme = (colourScheme = getColourScheme()) => {
99
document.documentElement.dataset.colour_scheme = colourScheme
1010
localStorage.setItem("colour_scheme", colourScheme)
1111
setPygments(colourScheme)
12+
setPfTheme(colourScheme)
1213
}
1314

1415
// Map system theme to a cycle of steps
@@ -31,5 +32,10 @@ const setPygments = (colourScheme = getColourScheme()) => {
3132
pygmentsLight.media = colourScheme === "auto" ? "(prefers-color-scheme: light)" : ""
3233
}
3334

35+
const setPfTheme = (colourScheme = getColourScheme()) => {
36+
const isDark = colourScheme === "dark" || (colourScheme === "auto" && prefersDark.matches)
37+
document.documentElement.dataset.pfTheme = isDark ? "dark" : ""
38+
}
39+
3440
// Update Pygments state (the page theme is initialised inline, see page.html)
3541
document.addEventListener("DOMContentLoaded", () => setColourScheme())

‎pep_sphinx_extensions/pep_theme/static/style.css‎

Lines changed: 13 additions & 176 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,19 @@
5050
--colour-caution: var(--light, #ffa) var(--dark, #550);
5151
--colour-attention: var(--light, #bdf) var(--dark, #045);
5252
--colour-tip: var(--light, #bfc) var(--dark, #041);
53+
54+
/* Pagefind component UI — theme variable overrides */
55+
--pf-text: var(--colour-text);
56+
--pf-text-muted: var(--colour-rule-strong);
57+
--pf-background: var(--colour-background);
58+
--pf-border: var(--colour-background-accent-strong);
59+
--pf-border-focus: var(--colour-links);
60+
--pf-hover: var(--colour-background-accent-light);
61+
--pf-mark: var(--colour-text-strong);
62+
--pf-outline-width: 0px;
63+
--pf-input-height: 30px;
64+
--pf-border-radius: 3px;
65+
--pf-searchbox-max-width: 100%;
5366
}
5467

5568
img.invert-in-dark-mode {
@@ -420,182 +433,6 @@ dl.footnote > dd {
420433
padding-bottom: 2rem;
421434
font-weight: bold;
422435
}
423-
/* Pagefind search styling (custom, no default CSS) */
424-
.pagefind-ui {
425-
--pagefind-ui-primary: var(--colour-links);
426-
--pagefind-ui-text: var(--colour-text);
427-
--pagefind-ui-background: var(--colour-background);
428-
--pagefind-ui-border: var(--colour-background-accent-strong);
429-
font-family: inherit;
430-
width: 100%;
431-
}
432-
433-
/* Search form */
434-
.pagefind-ui__form {
435-
position: relative;
436-
}
437-
438-
/* Search icon */
439-
.pagefind-ui__form::before {
440-
background-color: var(--pagefind-ui-text);
441-
width: 14px;
442-
height: 14px;
443-
top: 8px;
444-
left: 8px;
445-
content: "";
446-
position: absolute;
447-
display: block;
448-
opacity: 0.5;
449-
-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");
450-
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");
451-
-webkit-mask-size: 100%;
452-
mask-size: 100%;
453-
z-index: 9;
454-
pointer-events: none;
455-
}
456-
457-
/* Search input */
458-
.pagefind-ui__search-input {
459-
height: 30px;
460-
padding: 4px 28px 4px 28px;
461-
background-color: var(--pagefind-ui-background);
462-
border: 1px solid var(--pagefind-ui-border);
463-
border-radius: 3px;
464-
font-size: 0.875rem;
465-
font-family: inherit;
466-
appearance: none;
467-
-webkit-appearance: none;
468-
width: 100%;
469-
box-sizing: border-box;
470-
color: var(--pagefind-ui-text);
471-
}
472-
.pagefind-ui__search-input:focus {
473-
outline: none;
474-
border-color: var(--pagefind-ui-primary);
475-
}
476-
.pagefind-ui__search-input::placeholder {
477-
color: var(--pagefind-ui-text);
478-
opacity: 0.5;
479-
}
480-
481-
/* Clear button - fixed position relative to input (30px height, center button) */
482-
.pagefind-ui__search-clear {
483-
position: absolute;
484-
top: 5px;
485-
right: 4px;
486-
padding: 2px 6px;
487-
color: var(--pagefind-ui-text);
488-
font-size: 0.75rem;
489-
cursor: pointer;
490-
background-color: var(--pagefind-ui-background);
491-
border: none;
492-
opacity: 0.6;
493-
}
494-
.pagefind-ui__search-clear:hover {
495-
opacity: 1;
496-
}
497-
498-
/* Results container */
499-
.pagefind-ui__results-area {
500-
margin-top: 0.5rem;
501-
}
502-
503-
/* Results list */
504-
#pep-sidebar .pagefind-ui__results {
505-
list-style: none;
506-
padding: 0;
507-
margin: 0;
508-
}
509-
510-
/* Individual result */
511-
.pagefind-ui__result {
512-
padding: 0.5rem 0 0.5rem 0.5rem;
513-
border-bottom: 1px solid var(--colour-rule-light);
514-
}
515-
.pagefind-ui__result:last-child {
516-
border-bottom: none;
517-
}
518-
519-
/* Result link */
520-
.pagefind-ui__result-link {
521-
font-weight: bold;
522-
font-size: 0.9rem;
523-
text-decoration: none;
524-
color: var(--colour-links);
525-
}
526-
.pagefind-ui__result-link:hover {
527-
text-decoration: underline;
528-
}
529-
530-
/* Result title */
531-
.pagefind-ui__result-title {
532-
margin: 0;
533-
}
534-
535-
/* Result excerpt/snippet */
536-
.pagefind-ui__result-excerpt {
537-
font-size: 0.8rem;
538-
color: var(--colour-text);
539-
margin: 0.25rem 0 0;
540-
line-height: 1.4;
541-
}
542-
543-
/* Highlight matches in results */
544-
.pagefind-ui__result-excerpt mark,
545-
mark.pagefind-ui__highlight {
546-
background-color: var(--colour-caution);
547-
color: inherit;
548-
padding: 0 2px;
549-
}
550-
551-
/* Message when no results */
552-
.pagefind-ui__message {
553-
font-size: 0.85rem;
554-
color: var(--colour-text);
555-
padding: 0.5rem 0;
556-
}
557-
558-
/* Loading state */
559-
.pagefind-ui__loading {
560-
font-size: 0.85rem;
561-
color: var(--colour-text);
562-
opacity: 0.7;
563-
}
564-
565-
/* Sub-results (nested) */
566-
.pagefind-ui__result-nested {
567-
margin-left: 1rem;
568-
padding: 0.25rem 0;
569-
}
570-
.pagefind-ui__result-nested .pagefind-ui__result-link {
571-
font-weight: normal;
572-
font-size: 0.85rem;
573-
}
574-
575-
/* Button styling */
576-
.pagefind-ui__button {
577-
background: var(--colour-background-accent-light);
578-
border: 1px solid var(--colour-background-accent-strong);
579-
padding: 0.4rem 0.8rem;
580-
border-radius: 4px;
581-
cursor: pointer;
582-
font-size: 0.85rem;
583-
color: var(--colour-text);
584-
margin-top: 0.5rem;
585-
}
586-
.pagefind-ui__button:hover {
587-
background: var(--colour-background-accent-medium);
588-
}
589-
590-
/* Drawer (expandable results container) */
591-
.pagefind-ui__drawer {
592-
overflow: hidden;
593-
}
594-
595-
/* Suppress unused pagefind elements */
596-
.pagefind-ui__suppressed {
597-
display: none;
598-
}
599436

600437
.reference.external > strong {
601438
font-weight: normal; /* Fix strong links for :pep: and :rfc: roles */

‎pep_sphinx_extensions/pep_theme/templates/page.html‎

Lines changed: 6 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<title>{{ title + " | peps.python.org"|safe }}</title>
99
<link rel="shortcut icon" href="{{ pathto('_static/py.png', resource=True) }}">
1010
<link rel="canonical" href="https://peps.python.org/{{ pagename }}/">
11+
<link rel="stylesheet" href="/pagefind/pagefind-component-ui.css" type="text/css">
1112
<link rel="stylesheet" href="{{ pathto('_static/style.css', resource=True) }}" type="text/css">
1213
<link rel="stylesheet" href="{{ pathto('_static/mq.css', resource=True) }}" type="text/css">
1314
<link rel="stylesheet" href="{{ pathto('_static/pygments.css', resource=True) }}" type="text/css" media="(prefers-color-scheme: light)" id="pyg-light">
@@ -47,7 +48,9 @@ <h1 data-pagefind-ignore>Python Enhancement Proposals</h1>
4748
</button>
4849
</header>
4950
{# Mobile search box - visible only on small screens #}
50-
<div id="mobile-search" class="mobile-search-container"></div>
51+
<div id="mobile-search" class="mobile-search-container">
52+
<pagefind-searchbox hide-shortcut style="font-family: inherit"></pagefind-searchbox>
53+
</div>
5154
{# Exclude noisy non-PEP pages from Pagefind indexing #}
5255
{%- if pagename.startswith(("404", "numerical", "pep-0000", "topic")) %}
5356
<article>
@@ -60,7 +63,7 @@ <h1 data-pagefind-ignore>Python Enhancement Proposals</h1>
6063
</article>
6164
{%- if not pagename.startswith(("404", "numerical")) %}
6265
<nav id="pep-sidebar">
63-
<div id="search"></div>
66+
<pagefind-searchbox shortcut="/" style="font-family: inherit"></pagefind-searchbox>
6467
<h2>Contents</h2>
6568
{{ toc }}
6669
<br>
@@ -79,25 +82,6 @@ <h2>Contents</h2>
7982
{%- endif %}
8083
<script src="https://analytics.python.org/js/script.outbound-links.js"
8184
data-domain="peps.python.org" defer></script>
82-
<script src="/pagefind/pagefind-ui.js"></script>
83-
<script>
84-
window.addEventListener('DOMContentLoaded', (event) => {
85-
// Ranking configuration to boost exact title matches
86-
const searchOptions = {
87-
ranking: {
88-
termSimilarity: 9.0, // Higher values favor exact matches
89-
termFrequency: 0.5, // Lower values reduce penalty for low term frequency
90-
pageLength: 0.2, // Lower values reduce the impact of page length
91-
}
92-
};
93-
94-
// Initialize pagefind for either mobile or desktop, not both
95-
if (window.innerWidth <= 640) {
96-
new PagefindUI({ element: "#mobile-search", ...searchOptions, showSubResults: false });
97-
} else {
98-
new PagefindUI({ element: "#search", ...searchOptions, showSubResults: true });
99-
}
100-
});
101-
</script>
85+
<script src="/pagefind/pagefind-component-ui.js" type="module"></script>
10286
</body>
10387
</html>

‎requirements.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ Sphinx >= 5.1.1, != 6.1.0, != 6.1.1, < 8.1.0
77
docutils >= 0.19.0
88
sphinx-notfound-page >= 1.0.2
99
# For search
10-
pagefind[bin] >= 1.4.0
10+
pagefind[bin] >= 1.5.0
1111

1212
# For tests
1313
pytest>=9

0 commit comments

Comments
 (0)