docs: add searchbar

[yujonglee]

Description

Resolves #224.

It use Pagefind to create local search index at build-time, and use Canary to build SearchBar UI.

Screen.Recording.2024-08-26.at.12.36.49.PM.mov

Additional context

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.
• Read contribution guidelines.

[azat-io]

Wow. It looks nice. Let's fix linter errors and I'll see it.

[yujonglee]

@azat-io I guess this is ready for review. not sure why CI is not triggered.

[azat-io]

Could you resolve merge conflicts?

[yujonglee]

@azat-io just did!

[yujonglee]

@azat-io anything I could do to help get this merged in?

[azat-io]

@yujonglee Hello! I tried to start your branch locally. And it seems that the search not working for me.

I'm also a bit confused by the design. I'd like to customize it a bit. Take the search icon from the common icon library. And stylize the search input a bit.

[yujonglee]

@azat-io Thank you for trying it out.

I guess you ran pnpm run docs:dev. But astro-pagefind only generate index in production build. That's why it can not find index and search not work for you.

[404] /pagefind/pagefind.js 3ms

If you run pnpm run docs:build at least once, it will create index, and search will work ``pnpm run docs:dev`. Sorry that I didn't mentioned it earlier.

[pagefind] Pagefind indexed 31 pages
[pagefind] Pagefind wrote index to eslint-plugin-perfectionist/dist/pagefind

---

Regarding styling & customization, it is very important goal for me to make these components easy to customize. So I would love to hear more about which part of design was confusing for you.

We have docs about the styling here:

https://getcanary.dev/docs/common/customization/styling

For things you mentioned -

And stylize the search input a bit.

https://github.com/fastrepl/canary/blob/590fc07d4a2a20d3193d6f7e57c3d28976b9dde1/js/packages/web/src/components/canary-search-input.ts#L39

  canary-search-input::part(input) {
    background-color: red;
  }

Take the search icon from the common icon library.

https://github.com/fastrepl/canary/blob/590fc07d4a2a20d3193d6f7e57c3d28976b9dde1/js/packages/web/src/components/canary-search.ts#L36-L38

 ...
 <canary-search-input slot="input">
   // plug your icon component and override the default
  <common-icon-lib slot="input-before"></common-icon-lib >
</canary-search-input>
...

Any customization should be doable, if Canary expose them with slot and part. Would appreciate if there's anything missing for your use-case.

Thank you.