#607: Pagefind Search #615
Conversation
Pagefind search issue 607
✅ Deploy Preview for scientific-python-hugo-theme ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
| <link href="/pagefind/pagefind-ui.css" rel="stylesheet"> | ||
| <script src="/pagefind/pagefind-ui.js"></script> | ||
|
|
||
| <style> |
There was a problem hiding this comment.
Would be nice to have this defined outside of the template, in the assets/css dir.
There was a problem hiding this comment.
Hmm, I added it under assets/theme-css instead of doc/assets/css since the search feature is provided by the theme and not just the example doc site. That worked fine locally with the serve-dev make target, but it's blowing up in the CI build: https://app.netlify.com/sites/scientific-python-hugo-theme/deploys/66a68856fbc041000831976e
For now I'm reverting to put this CSS back where it was (inline) in the search partial, which worked, and affords the benefit of having (almost) the entire implementation in a single file, for easy delete or modify.
| .pagefind-ui button { | ||
| border: none; | ||
| } | ||
| .pagefind-ui__result-title.svelte-4xnkmf .pagefind-ui__result-link.svelte-4xnkmf { |
There was a problem hiding this comment.
Would be better if we didn't have to pull in svelte to make search work, but I can't examine JS yet to see how involved that would be.
There was a problem hiding this comment.
It's a nice feature of pagefind that it generates a reasonable search results listing for you out of the box. The downside is if we use that default then we don't have much control over how it is rendered and styled, but I thought it was reasonable to lean on it at least for the proof of concept phase of this ticket.
I wasn't super happy about having to refer to these CSS classes here, especially the little hash-like suffixes, which don't convey an obvious meaning and I could imagine might change between pagefind releases. An alternative would be to apply these two color unset rules (which make the results more legible against dark mode) by coding the selector to match the DOM structure instead of referring to these class names. But that is also brittle since the generated DOM could also change shape between releases.
layouts/partials/search.html
Outdated
|
|
||
| <dialog class="search-dialog"></dialog> | ||
|
|
||
| <script> |
There was a problem hiding this comment.
Maybe make this standalone js as well and link to it? Not crucial, your call.
There was a problem hiding this comment.
I tried but wasn't able to resolve (404) the standalone js file. I put it in assets/js/search.js with the URL "./js/search.js", following the pattern of CSS files under theme-css, but no luck. Also tried adding and putting it under a dedicated assets/theme-js directory, so it would look more identical to the CSS case but that didn't work either.
So I'm inclined to leave the JS here unless we can figure out how to get hugo to serve it in a way that makes sense. But it doesn't seem important enough to spend a lot of time on.
Add proof-of-concept pagefind site search.