From 858edd9939f5ef8167079d2bf9dd1b0bb2248617 Mon Sep 17 00:00:00 2001 From: doup Date: Sun, 23 Feb 2025 11:42:29 +0100 Subject: [PATCH 01/73] Save pagefind progress --- .gitignore | 1 + pagefind.yml | 6 +++ reindex.sh | 4 ++ sass/_mixins.scss | 16 ++++++++ sass/_vars.scss | 14 +++++++ sass/components/_main-menu-backdrop.scss | 15 +------ sass/components/_search.scss | 33 +++++++++++++++ sass/site.scss | 1 + static/search.mjs | 51 ++++++++++++++++++++++++ templates/layouts/base.html | 13 +++++- templates/layouts/example.html | 4 +- templates/shortcodes/release_notes.md | 2 +- 12 files changed, 143 insertions(+), 17 deletions(-) create mode 100644 pagefind.yml create mode 100755 reindex.sh create mode 100644 sass/components/_search.scss create mode 100644 static/search.mjs diff --git a/.gitignore b/.gitignore index b428d603e0..f8d13c1f6c 100644 --- a/.gitignore +++ b/.gitignore @@ -10,6 +10,7 @@ content/community/people/ content/community/donate/ static/assets/examples/ static/processed_images/ +static/pagefind/ # Tools target/ diff --git a/pagefind.yml b/pagefind.yml new file mode 100644 index 0000000000..fb309bc7cb --- /dev/null +++ b/pagefind.yml @@ -0,0 +1,6 @@ +site: public +output_path: static/pagefind +exclude_selectors: + - ".tree-menu" + - ".example__back" + - ".example__github" diff --git a/reindex.sh b/reindex.sh new file mode 100755 index 0000000000..ea94943154 --- /dev/null +++ b/reindex.sh @@ -0,0 +1,4 @@ +#!/bin/bash +rm -rf public +zola build +./pagefind diff --git a/sass/_mixins.scss b/sass/_mixins.scss index c236eef35c..7d81a199f3 100644 --- a/sass/_mixins.scss +++ b/sass/_mixins.scss @@ -1,3 +1,19 @@ +@mixin backdrop($z-index) { + visibility: hidden; + position: fixed; + inset: 0px; + z-index: $z-index; + background-color: rgba($color-black, 0.2); + cursor: pointer; + opacity: 0.0; + transition: opacity $duration * 2; +} + +@mixin backdrop-visible() { + visibility: visible; + opacity: 1.0; +} + @mixin card() { display: block; overflow: hidden; diff --git a/sass/_vars.scss b/sass/_vars.scss index 5768a4ce95..e9e2ac1833 100644 --- a/sass/_vars.scss +++ b/sass/_vars.scss @@ -45,6 +45,8 @@ $duration: 250ms; $z-layout-header: 800; $z-main-menu-backdrop: 900; $z-main-menu: 1000; +$z-search-backdrop: 1100; +$z-search: 1200; // General $max-width: 1200px; @@ -65,6 +67,18 @@ $border-radius: 10px; @media #{$bp-desktop-up} { --header-height: 72px; } + + --pagefind-ui-scale: 1; + --pagefind-ui-primary: #eeeeee; + --pagefind-ui-text: #eeeeee; + --pagefind-ui-background: #152028; + --pagefind-ui-border: #152028; + --pagefind-ui-tag: #152028; + --pagefind-ui-border-width: 2px; + --pagefind-ui-border-radius: 8px; + --pagefind-ui-image-border-radius: 8px; + --pagefind-ui-image-box-ratio: 3 / 2; + --pagefind-ui-font: sans-serif; } // Accessibility diff --git a/sass/components/_main-menu-backdrop.scss b/sass/components/_main-menu-backdrop.scss index 3d836acb19..b0797b13ea 100644 --- a/sass/components/_main-menu-backdrop.scss +++ b/sass/components/_main-menu-backdrop.scss @@ -1,20 +1,9 @@ .main-menu-backdrop { - visibility: hidden; - position: fixed; - top: 0px; - left: 0px; - width: 100%; - height: 100%; - z-index: $z-main-menu-backdrop; - background-color: rgba($color-black, 0.2); - cursor: pointer; - opacity: 0.0; - transition: opacity $duration * 2; + @include backdrop($z-main-menu-backdrop); } @include state-checked("mobile-menu") { .main-menu-backdrop { - visibility: visible; - opacity: 1.0; + @include backdrop-visible(); } } diff --git a/sass/components/_search.scss b/sass/components/_search.scss new file mode 100644 index 0000000000..b293059703 --- /dev/null +++ b/sass/components/_search.scss @@ -0,0 +1,33 @@ +.search { + &--visible { + .search__dialog { + display: block; + } + + .search__backdrop { + @include backdrop-visible(); + } + } + + &__backdrop { + @include backdrop($z-search-backdrop); + } + + &__dialog { + display: none; + width: 100%; + max-width: 1000px; + padding: 16px; + min-height: 400px; + max-height: calc(100% - 320px); + overflow-y: auto; + border-radius: 8px; + border: 2px solid #2c2c2d; + position: fixed; + top: 160px; + left: 50%; + transform: translateX(-50%); + z-index: $z-search; + background-color: #1e1e22; + } +} diff --git a/sass/site.scss b/sass/site.scss index 1aa47aa9b8..21b828dee2 100644 --- a/sass/site.scss +++ b/sass/site.scss @@ -47,6 +47,7 @@ @import "components/on-this-page"; @import "components/page-with-menu"; @import "components/pr-list"; +@import "components/search"; @import "components/sponsors"; @import "components/syntax-theme"; @import "components/tree-menu"; diff --git a/static/search.mjs b/static/search.mjs new file mode 100644 index 0000000000..879c22c630 --- /dev/null +++ b/static/search.mjs @@ -0,0 +1,51 @@ +class Search { + CLASS_VISIBLE = "search--visible"; + + constructor() { + this.searchEl = document.querySelector("[data-search]"); + this.searchBackdropEl = document.querySelector("[data-search-backdrop]"); + this.searchDialogEl = document.querySelector("[data-search-dialog]"); + } + + isOpen() { + return this.searchEl.classList.contains(this.CLASS_VISIBLE); + } + + show() { + this.searchEl.classList.add(this.CLASS_VISIBLE); + } +} + +window.addEventListener('load', () => { + const search = new Search(); + + window.addEventListener('keydown', (event) => { + search.show(); + // if (event.code === "Escape" && !isHidden) { + // pagefindEl.classList.add("hidden"); + // event.stopPropagation(); + // event.preventDefault(); + // } + + // if (event.code === "KeyS" && isHidden) { + // pagefindEl.classList.remove("hidden"); + + // new PagefindUI({ + // element: pagefindEl, + // showSubResults: true, + // showImages: false, + // autofocus: true, + // }); + }); +}); + +// const pagefindEl = document.querySelector("[data-pagefind-search-wrapper]"); + +// pagefindEl.addEventListener("click", (event) => { +// if (event.target === pagefindEl) { +// pagefindEl.classList.add("hidden"); +// } +// }); + +// window.addEventListener("keypress", +// }); diff --git a/templates/layouts/base.html b/templates/layouts/base.html index ca249d83d4..746de57210 100644 --- a/templates/layouts/base.html +++ b/templates/layouts/base.html @@ -88,6 +88,11 @@ + + + + + {% if ancestor_is_public_draft or section_or_page and section_or_page.extra and section_or_page.extra.public_draft %} @@ -179,7 +184,7 @@ -
+
{% if section %} {{ public_draft::warning(section=section) }} @@ -231,6 +236,12 @@
+
+
+
+ +
+
- {% if ancestor_is_public_draft or section_or_page and section_or_page.extra and section_or_page.extra.public_draft %} @@ -218,31 +214,7 @@ -
-
-
-
- -
X
-
-
- - - -
-
+ {% include "search.html" %} {% if ancestor_is_public_draft or section_or_page and section_or_page.extra and section_or_page.extra.public_draft %} @@ -97,6 +96,8 @@ {% endif %} {% if page.extra.public_draft or section.extra.public_draft %}[DRAFT] {% endif -%}{{ page_title }} + + {% block head_extensions %}{% endblock head_extensions %} diff --git a/templates/search.html b/templates/search.html index b7e55ac020..b77427133d 100644 --- a/templates/search.html +++ b/templates/search.html @@ -9,7 +9,7 @@ -
Close
+
Close
@@ -24,11 +24,23 @@
Tip: Press S to open the search dialog, and - Escape to close it. + Esc to close it. Use ↑/↓ to select a result, and Enter to navigate.
+ From 81723d88f617eac8a2f82c8fef331ef52ea641ef Mon Sep 17 00:00:00 2001 From: doup Date: Sun, 2 Mar 2025 00:33:08 +0100 Subject: [PATCH 21/73] Replace HTML entities with actual characters --- templates/search.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/search.html b/templates/search.html index b77427133d..ca1639f990 100644 --- a/templates/search.html +++ b/templates/search.html @@ -24,7 +24,7 @@
Tip: Press S to open the search dialog, and - Esc to close it. Use ↑/↓ to select a result, and Enter to navigate. + Esc to close it. Use ↑/↓ to select a result, and Enter to navigate.