Add search #200
Add search #200
Conversation
This adds a search functionality to the website, powered by lunr.js. While data is prepared and collected during build time, the index is built on the client, as the precomputed index is 1.2 MB, which is already the size of a full page load (even if the data is only fetched once you actually search something). I wasn't able to make this work with dynamically routed pages, although it is fully compatible with all our generated pages, as the content is fetched from the built HTML. I also haven't included pagination and mobile support, probably something for a future improvement.
|
okay, that is incredible |
|
It actually highlights matching words, I just fixed that
Not sure about moving it, that's personally where I would expect a search bar to be |
|
The contrast feels kind of low too me, and sites tend to make icon and text of the same color |
|
Best I can do is reenable the border. Although it passes accessibility checks anyway. |
| } | ||
|
|
||
| function highlight(text, startIndex, match) { | ||
| const highlightColor = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'link' : 'warning'; |
There was a problem hiding this comment.
Isn't this the kind of thing CSS variables are made for ?
There was a problem hiding this comment.
there isn't a better way to go about it without adding additional CSS to our bulma style
There was a problem hiding this comment.
Is that an issue ? I feel like a "highlighted" class would be decently reusable
There was a problem hiding this comment.
sure, I just can't be bothered honestly, I would have to yell at way too many people to get this done considering it needs to be both merged and published
There was a problem hiding this comment.
Wait it has to go in the quilt-bulma repository ? We can't have custom styles here ?
There was a problem hiding this comment.
Nope, the CSS is built there, we don't have access to variables here. That's why I hate it.
There was a problem hiding this comment.
given that the rest of the site has similar issues, I'd say it is fine for now and can be addressed in a future PR
(on that note I really would like a theme chooser instead of relying on the browser's preferred color scheme ONLY..)
| } | ||
|
|
||
| function cleanPath(path: string): string { | ||
| if (process.platform === "win32") { |
There was a problem hiding this comment.
why not simply check if it starts with /?
There was a problem hiding this comment.
but your comment says only on windows do the paths start with an extra /?
There was a problem hiding this comment.
On windows it looks like /C:/... which is just.. wrong. But on Linux you have your normal /home/... path, if you remove the leading slash here you get a broken path as well.
It is the expected behavior on Linux but not on Windows.
There was a problem hiding this comment.
Why not relativize the paths before returning them?
is that not what that dir parameter is for?
There was a problem hiding this comment.
No, because the path is fucked and needs to be unfucked no matter what. This works, honestly.
| } | ||
|
|
||
| function highlight(text, startIndex, match) { | ||
| const highlightColor = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'link' : 'warning'; |
There was a problem hiding this comment.
given that the rest of the site has similar issues, I'd say it is fine for now and can be addressed in a future PR
(on that note I really would like a theme chooser instead of relying on the browser's preferred color scheme ONLY..)
ghost
deleted the
6 participants
This adds a search functionality to the website, powered by lunr.js. While data is prepared and collected during build time, the index is built on the client, as the precomputed index is 1.2 MB, which is already the size of a full page load (even if the data is only fetched once you actually search something). I wasn't able to make this work with dynamically routed pages, although it is fully compatible with all our generated pages, as the content is fetched from the built HTML. I also haven't included pagination and mobile support, probably something for a future improvement.
See preview on Cloudflare Pages: https://preview-200.quiltmc-org.pages.dev