Astro island to complete blog page

Astro island to complete blog page

When I open my blog page, I’m often overwhelmed by the sheer number of posts and struggle to find the one I’m looking for. To solve this problem, I want to implement a search input that will allow me to quickly find the post I want to read.
My blog page is built with Astro, which means all of the post data is prepared on the server side and then passed to the script tag for user interaction. While I’ve tried various methods to implement this feature, accessing the necessary data via the script tag hasn’t been very intuitive.
To make the process more clear and understandable, I’ve decided to use React to implement the search functionality. This will help me create a more readable and reasoned process for finding and displaying the right posts to my readers.

Astro Islands (aka Component Islands) are a pattern of web architecture pioneered by Astro. The idea of “islands architecture” was first coined by Etsy’s frontend architect Katie Sylor-Miller in 2019, and expanded on in this post by Preact creator Jason Miller.

Astro Island is an interactive UI component on an otherwise static HTML page. Multiple islands can exist and render in isolation, like islands in a sea of non-interactive HTML. In Astro, any supported UI framework can render islands, allowing mixing and matching of different frameworks or using a favorite. Astro uses partial/selective hydration to power islands automatically.

How Do Islands Work in Astro?

Astro generates sites with zero client-side JavaScript by default. Use a frontend UI component built with React, Preact, Svelte, Vue, SolidJS, AlpineJS, or Lit and Astro will render it to HTML ahead of time and strip out unused JavaScript. But for interactive UI, Astro asks you to create an island. With Astro Islands, most of your site remains pure HTML and CSS, while adding a single, isolated island of interactivity.

---
// Example: Use a dynamic React component on the page.
import MyReactComponent from '../components/MyReactComponent.jsx';
---

<!-- This component is now interactive on the page! 
     The rest of your website remains static and zero JS. -->
<MyReactComponent client:load />

Remaining Tasks to Complete

This post should show up with my other blog posts, because Astro.glob() is returning a list of all my posts in order to create my list.

---
const allPosts = (await Astro.glob('../pages/posts/*.mdx')).filter(
  (post) => !post.frontmatter.draft,
);
---

<PostSearch client:visible allPosts={allPosts} />

useFuse

In PostSearch component, i make hook for it, to pass the posts and config, return state of input and setInput, and fuse search result, separate pass to input element and render the result just done. let’s try it!