Powering Search With Astro Actions and Fuse.js

Static site generation is fantastic, but it presents challenges. Static sites are either completely static, or the frameworks used lose the benefits of true static generation when server-side routes are involved.

Astro cleverly balances pure static site generation with robust server-side capabilities. Astro Actions empower near-entirely static sites with server-side power, ideal for features like search. For content-heavy sites, adding search usually means a front-end-only solution, a SaaS service, or a complete server-side rewrite in other frameworks.

Astro allows for mostly static build-time generation, while handling search via server-side code (e.g., Fuse.js). This demo uses Fuse.js to search a set of bookmarks generated during the build, returning results via server calls.

GitHub Live Demo

Project Setup

Create a basic Astro project:

npm create astro@latest

Follow the prompts:

• Project location: (Your preferred directory, e.g., ./astro-search)
• Project starter: Basic minimalist starter
• Install dependencies: Yes
• Initialize Git repository: Recommended

Navigate to the project directory and run npm run dev. You'll see the default Astro homepage.

Initial Configuration

Remove the default homepage content (/src/pages/index.astro). Add Tailwind CSS:

npx astro add tailwind

Follow the CLI instructions to integrate Tailwind. Add basic markup to /src/pages/index.astro:

---
// ./src/pages/index.astro
import Layout from '../layouts/Layout.astro';
---

<layout>
  <div>
    <h1 id="My-Latest-Bookmarks">My Latest Bookmarks</h1>
    <p>This is only 10 of A LARGE NUMBER THAT WE'LL CHANGE LATER</p>
  </div>
</layout>

Integrating Bookmark Data

Use the provided bookmark data (or fetch 110 items from the GitHub link in the original article). Create /src/data/bookmarks.json with your bookmark data. (See original article for sample data).

Now, configure Astro's Content Layer API. Create /src/content.config.ts:

import { defineCollection, z } from "astro:content";
import { file } from 'astro/loaders';

const bookmarks = defineCollection({
  schema: z.object({
    pageTitle: z.string(),
    url: z.string(),
    description: z.string().optional()
  }),
  loader: file("src/data/bookmarks.json"),
});

export const collections = { bookmarks };

Restart the server (npm run dev).

Displaying Bookmarks

Import and use the bookmarks collection in /src/pages/index.astro:

---
import Layout from '../layouts/Layout.astro';
import { getCollection } from 'astro:content';

const bookmarks = await getCollection('bookmarks');
---

<layout>
  <div>
    <h1 id="My-Latest-Bookmarks">My Latest Bookmarks</h1>
    <p>This is only {bookmarks.length} bookmarks</p>

    <h2 id="Latest-Bookmarks">Latest Bookmarks</h2>
    <ul>
      {bookmarks.slice(0, 10).map((item) => (
        <li>
          <a href="https://www.php.cn/link/881ad08b23bec80777fe4bce8bee4e0a">
            <h3 id="item-data-pageTitle">{item.data?.pageTitle}</h3>
            <p>{item.data?.description}</p>
          </a>
        </li>
      ))}
    </ul>
  </div>
</layout>

This displays the 10 most recent bookmarks.

Implementing Search with Actions and JavaScript

Create a new component /src/components/Search.astro:

Search:

<script> // ... (JavaScript code as in original article) ... </script>

Setting up an Astro Action

Add a Netlify integration:

npx astro add netlify

Create /src/actions/index.js for the search action:

// ... (Action code as in original article, using Fuse.js) ...

Integrating the Action

Update the Search component's JavaScript to use the actions.search function (with modifications to handle Fuse.js's result structure as shown in the original article).

Conclusion

This enhanced guide provides a more concise and structured explanation of building a search functionality using Astro Actions and Fuse.js. Remember to adapt the code snippets to your specific project setup and requirements. Further improvements could include more robust error handling and potentially using a more advanced client-side framework like React within Astro Islands.

The above is the detailed content of Powering Search With Astro Actions and Fuse.js. For more information, please follow other related articles on the PHP Chinese website!