feat: make pagefind the new default search engine

.github/workflows/CI.yml

@@ -39,24 +39,15 @@ jobs:
             ${{ runner.os }}-
       - uses: julia-actions/julia-buildpkg@v1
       - uses: julia-actions/julia-runtest@v1
-  julia-format:
-    name: Formatter
+  runic:
+    name: Runic formatting
     runs-on: ubuntu-latest
     steps:
-      - uses: julia-actions/setup-julia@latest
       - uses: actions/checkout@v4
-      - name: Install JuliaFormatter and format
-        run: |
-          julia --color=yes -e 'using Pkg; Pkg.add(PackageSpec(name="JuliaFormatter"))'
-          julia --color=yes -e 'using JuliaFormatter; format(".", verbose=true)'
-      - name: Format check
-        run: |
-          julia --color=yes -e '
-          out = Cmd(`git diff --name-only`) |> read |> String
-          if out == ""
-              exit(0)
-          else
-              @error "Some files have not been formatted !!!"
-              write(stdout, out)
-              exit(1)
-          end'
+      - uses: julia-actions/setup-julia@v2
+        with:
+          version: '1.11'
+      - uses: julia-actions/cache@v2
+      - uses: fredrikekre/runic-action@v1
+        with:
+          version: '1'

Project.toml

@@ -9,7 +9,7 @@ Git = "d7ba0133-e1db-5d97-8f8c-041e4b3a1eb2"
 Gumbo = "708ec375-b3d6-5a57-a7ce-8257bf98657a"
 HypertextLiteral = "ac1192a8-f4b3-4bfe-ba22-af5b92cd3ab2"
 JSON = "682c06a0-de6a-54ab-a142-c8b1cf79cde6"
-NodeJS = "2bd173c7-0d6d-553b-b6af-13a54713934c"
+NodeJS_22_jll = "8fca9ca2-e7a1-5ccf-8c05-43be5a78664f"
 Pkg = "44cfe95a-1eb2-52ea-b672-e2afdf69b78f"
 
 [compat]
@@ -18,7 +18,7 @@ Git = "1"
 Gumbo = "0.8.2"
 HypertextLiteral = "0.9"
 JSON = "0.20,0.21"
-NodeJS = "1, 2"
+NodeJS_22_jll = "22.15.0"
 julia = "1"
 
 [extras]

assets/default/pagefind.css

@@ -0,0 +1,152 @@
+#multi-page-nav .search {
+    margin-left: auto;
+    font-size: 16px;
+}
+
+#multi-page-nav .search .search-keybinding {
+    float: right;
+    width: 0;
+    transform: translateX(-1em);
+    color: #999;
+}
+
+#multi-page-nav .search:focus-within .search-keybinding {
+    display: none;
+}
+
+#multi-page-nav .search #search-input {
+    border: 1px solid #666;
+    border-radius: 3.2px;
+    color: #999;
+    background-color: unset;
+    height: 28px;
+    font-family: inherit;
+    width: 20em;
+    font-size: 14px;
+    padding: 0 8px;
+}
+
+#multi-page-nav .search #search-input::placeholder {
+    color: #999;
+    opacity: 1;
+}
+
+#multi-page-nav .search:focus-within #search-input {
+    background-color: #fff;
+    outline: none;
+    box-shadow: none;
+    color: #000;
+}
+
+.theme--documenter-dark #multi-page-nav .search:focus-within #search-input {
+    background-color: #202227;
+    color: #eee;
+}
+
+#multi-page-nav .search:focus-within .suggestions {
+    display: block;
+}
+
+#multi-page-nav .hidden {
+    display: none !important;
+}
+
+#multi-page-nav .suggestions {
+    margin: -5px 1.5rem 0 0;
+    display: none;
+    background: #fff;
+    min-width: 20em;
+    max-width: 50vw;
+    position: absolute;
+    border: 1px solid #cfd4db;
+    border-radius: 6px;
+    padding: .4rem;
+    list-style-type: none;
+    z-index: 10;
+    right: 0;
+    max-height: max(50vh, 250px);
+    overflow-y: auto;
+}
+
+.theme--documenter-dark #multi-page-nav .suggestions {
+    background: #2e3138;
+    border: 1px solid #5e6d6f;
+}
+
+#multi-page-nav .suggestions mark {
+    background-color: inherit;
+    color: #000;
+}
+.theme--documenter-dark #multi-page-nav .suggestions mark {
+    color: #fff;
+}
+
+#multi-page-nav .suggestions .suggestion {
+    line-height: 1.3;
+    border-radius: 4px;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+}
+#multi-page-nav .suggestions .sub-suggestions .suggestion {
+    margin-left: 1rem;
+}
+
+#multi-page-nav .suggestions .suggestion-header {
+    padding: .4rem .6rem;
+}
+#multi-page-nav .suggestions .suggestion-header:focus-visible {
+    outline: none;
+}
+.theme--documenter-dark #multi-page-nav .suggestions .suggestion-header:hover,
+.theme--documenter-dark #multi-page-nav .suggestions .suggestion-header:focus {
+    background-color: #202227;
+}
+#multi-page-nav .suggestions .suggestion-header:hover,
+#multi-page-nav .suggestions .suggestion-header:focus {
+    background-color: #eee;
+}
+
+#multi-page-nav .suggestions .suggestion .suggestion-excerpt {
+    font-size: small;
+    color: #666;
+}
+.theme--documenter-dark #multi-page-nav .suggestions .suggestion .suggestion-excerpt {
+    color: #aaa;
+}
+
+#multi-page-nav .suggestion .suggestion-title {
+    font-size: 1.2rem;
+    font-weight: bold;
+}
+
+#multi-page-nav .suggestion .sub-suggestions .suggestion-title {
+    font-size: 1rem;
+}
+
+#multi-page-nav .suggestion a {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: black;
+}
+
+.theme--documenter-dark #multi-page-nav .suggestion a {
+    color: white;
+}
+
+#multi-page-nav .suggestions .suggestion .page-title {
+    font-weight: bold;
+}
+
+@media screen and (max-width: 1055px) {
+    #multi-page-nav .search #search-input {
+        width: 100%;
+    }
+    #multi-page-nav .suggestions {
+        max-width: 100vw;
+        width: calc(100% - 3.5rem);
+        margin: 10px 2.5em 4.5em 0;
+    }
+}

assets/default/pagefind_integration.js

@@ -0,0 +1,150 @@
+// custom search widget
+(async function() {
+    const MAX_RESULTS = 20
+    let FOCUSABLE_ELEMENTS = []
+    let FOCUSED_ELEMENT_INDEX = 0
+
+    const pagefind = await import(window.MULTIDOCUMENTER_ROOT_PATH + "pagefind/pagefind.js")
+
+    function initialize() {
+        pagefind.init()
+        registerSearchListener()
+
+        document.body.addEventListener('keydown', ev => {
+            if (document.activeElement === document.body && (ev.key === '/' || ev.key === 's')) {
+                document.getElementById('search-input').focus()
+                ev.preventDefault()
+            }
+        })
+    }
+
+    function registerSearchListener() {
+        const input = document.getElementById('search-input')
+        const suggestions = document.getElementById('search-result-container')
+
+        async function runSearch() {
+            const query = input.value
+
+            const search = await pagefind.debouncedSearch(query, {}, 300);
+
+            if (search) {
+                buildResults(search.results)
+            }
+        }
+
+        input.addEventListener('keyup', ev => {
+            runSearch()
+        })
+
+        input.addEventListener('keydown', ev => {
+            if (ev.key === 'ArrowDown') {
+                FOCUSED_ELEMENT_INDEX = 0
+                FOCUSABLE_ELEMENTS[FOCUSED_ELEMENT_INDEX].focus()
+                ev.preventDefault()
+                return
+            } else if (ev.key === 'ArrowUp') {
+                FOCUSED_ELEMENT_INDEX = FOCUSABLE_ELEMENTS.length - 1
+                FOCUSABLE_ELEMENTS[FOCUSED_ELEMENT_INDEX].focus()
+                ev.preventDefault()
+                return
+            }
+        })
+
+        suggestions.addEventListener('keydown', ev => {
+            if (ev.key === 'ArrowDown') {
+                FOCUSED_ELEMENT_INDEX += 1
+                if (FOCUSED_ELEMENT_INDEX < FOCUSABLE_ELEMENTS.length) {
+                    FOCUSABLE_ELEMENTS[FOCUSED_ELEMENT_INDEX].focus()
+                } else {
+                    FOCUSED_ELEMENT_INDEX = -1
+                    input.focus()
+                }
+                ev.preventDefault()
+            } else if (ev.key === 'ArrowUp') {
+                FOCUSED_ELEMENT_INDEX -= 1
+                if (FOCUSED_ELEMENT_INDEX >= 0) {
+                    FOCUSABLE_ELEMENTS[FOCUSED_ELEMENT_INDEX].focus()
+                } else {
+                    FOCUSED_ELEMENT_INDEX = -1
+                    input.focus()
+                }
+                ev.preventDefault()
+            }
+        })
+
+        input.addEventListener('focus', ev => {
+            runSearch()
+        })
+    }
+
+    function renderResult(result) {
+        const entry = document.createElement('li')
+        entry.classList.add('suggestion')
+
+        const linkContainer = document.createElement('a')
+        linkContainer.classList.add('suggestion-header')
+        linkContainer.setAttribute('href', result.url)
+
+        const page = document.createElement('p')
+        page.classList.add('suggestion-title')
+
+        const pageTitle = document.createElement('span')
+        pageTitle.innerText = result.title ?? result.meta.title
+
+        page.appendChild(pageTitle)
+
+        const excerpt = document.createElement('p')
+        excerpt.classList.add('suggestion-excerpt')
+        excerpt.innerHTML = result.excerpt
+
+        linkContainer.appendChild(page)
+        linkContainer.appendChild(excerpt)
+
+        entry.appendChild(linkContainer)
+
+        return entry
+    }
+
+    async function buildResults(results) {
+        const suggestions = document.getElementById('search-result-container')
+
+        const children = await Promise.all(results.slice(0, MAX_RESULTS - 1).map(async (r, i) => {
+            const data = await r.data()
+
+            const entry = renderResult(data)
+
+            if (data.sub_results.length > 0) {
+                const subResults = document.createElement('ol')
+                subResults.classList.add('sub-suggestions')
+
+                data.sub_results.forEach(subresult => {
+                    const entry = renderResult(subresult)
+                    subResults.appendChild(entry)
+                })
+                entry.appendChild(subResults)
+            }
+
+            return entry
+        }))
+
+        if (results.length > 0) {
+            suggestions.classList.remove('hidden')
+        } else {
+            suggestions.classList.add('hidden')
+        }
+
+
+        suggestions.replaceChildren(
+            ...children
+        )
+
+        FOCUSED_ELEMENT_INDEX = -1
+        FOCUSABLE_ELEMENTS = [...suggestions.querySelectorAll('a')]
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initialize)
+    } else {
+        initialize()
+    };
+})()

docs/make.jl

@@ -23,12 +23,12 @@ open(joinpath(@__DIR__, "src", "index.md"), write = true) do io
         io,
         """
 
-## Docstrings
+        ## Docstrings
 
-```@autodocs
-Modules = [MultiDocumenter]
-```
-""",
+        ```@autodocs
+        Modules = [MultiDocumenter]
+        ```
+        """,
     )
 end
 cp(