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

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

Could you resolve merge conflicts?

@azat-io just did!

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

@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.

@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.