Building an Interactive Blog Filter

The Strategy: Client-Side Filtering

Your experience with React and SPAs likely has you thinking about managing a list of posts in state and re-rendering a component when a filter changes. Astro encourages a different, often more performant, approach for this kind of task.

The strategy will be:

1. Astro will render the entire list of blog posts as static HTML during the build process. This ensures a fast initial load and excellent SEO.
2. We will also render a list of filter buttons (one for each tag).
3. We will add a small, targeted vanilla JavaScript script to the page. This script will listen for clicks on the filter buttons and simply show or hide the appropriate post elements that are already on the page.

This is a classic example of progressive enhancement and is closely related to the "Astro Islands" concept we'll explore more deeply later. The page works perfectly without JavaScript, and the script is a lightweight layer that enhances the user experience.

Step 1: Preparing the UI Components

First, we need to set up the HTML on our blog index page. This involves two parts: creating the filter buttons and adding metadata to our post cards so the script can identify them. We'll focus on filtering by tags for now.

Let's modify your blog index page, which is likely src/pages/blog/index.astro or similar.

1. Generate Unique Tags and Buttons: Just like we did in the last lesson for getStaticPaths, we'll fetch all posts and create a unique list of tags. We'll then map over this list to create our filter buttons.
2. Tag the Posts: We need a way for our JavaScript to know which tags belong to which post. The cleanest way to do this is by adding a data-* attribute to each post card's container.

Update your blog index page with the following structure.

---
// src/pages/blog/index.astro (or your blog listing page)
import { getCollection } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';
import BlogPostCard from '../../components/BlogPostCard.astro'; // Or your card component

const allPosts = await getCollection('blog', ({ data }) => !data.draft);
// Sort posts by date, newest first
allPosts.sort((a, b) => new Date(b.data.date).valueOf() - new Date(a.data.date).valueOf());

// Get all unique tags
const uniqueTags = [...new Set(allPosts.map(post => post.data.tags).flat())];
---

<BaseLayout pageTitle="Our Blog">
  <div class="container">
    <h1>Our Blog & Insights</h1>

    <!-- Filter Buttons -->
    <div class="filter-controls">
      <button class="filter-btn active" data-tag="all">All</button>
      {uniqueTags.map(tag => (
        <button class="filter-btn" data-tag={tag}>{tag}</button>
      ))}
    </div>

    <!-- Blog Post Grid -->
    <div class="post-list">
      {allPosts.map(post => (
        <div class="post-card-wrapper" data-tags={post.data.tags.join(',')}>
          <BlogPostCard 
            post={post}
          />
        </div>
      ))}
    </div>

  </div>
</BaseLayout>

<style>
  /* Add some basic styling for the buttons */
  .filter-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
  }

  .filter-btn {
    padding: 0.5rem 1rem;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 9999px;
    cursor: pointer;
    text-transform: capitalize;
    transition: all 0.2s ease;
  }

  .filter-btn:hover {
    background-color: #e0e0e0;
  }

  .filter-btn.active {
    background-color: #8A2BE2; /* Example color */
    color: white;
    border-color: #8A2BE2;
  }
</style>

Key changes:

• We add a filter-controls div containing an "All" button and a button for each unique tag.
• Crucially, each button has a data-tag attribute holding the tag name it filters for.
• Each BlogPostCard is wrapped in a div with a data-tags attribute. This attribute contains a comma-separated string of all tags for that post (e.g., data-tags="finance,taxes,small-business").

Step 2: Implementing the Client-Side Filtering Logic

Now that the HTML is structured correctly, we can add the JavaScript to make it interactive. A simple tutorial provides a great blueprint for exactly this task.

Inspired by that article, we can now add our own <script> tag to the bottom of our src/pages/blog/index.astro file, right before the closing </BaseLayout> tag. Our implementation will be slightly different and arguably a bit more direct.

// Add this script inside your src/pages/blog/index.astro file

<script>
  document.addEventListener('DOMContentLoaded', () => {
    // 1. Get all the necessary elements
    const filterButtons = document.querySelectorAll('.filter-btn');
    const posts = document.querySelectorAll('.post-card-wrapper');

    // 2. Add a click event listener to each button
    filterButtons.forEach(button => {
      button.addEventListener('click', () => {
        const filterValue = button.dataset.tag;

        // 3. Manage active state for buttons
        filterButtons.forEach(btn => btn.classList.remove('active'));
        button.classList.add('active');

        // 4. Loop through each post and check if it should be shown
        posts.forEach(post => {
          const postTags = post.dataset.tags.split(',');
          
          const shouldShow = filterValue === 'all' || postTags.includes(filterValue);
          
          if (shouldShow) {
            // Use 'grid' or 'block' depending on your layout's display property
            post.style.display = 'block'; 
          } else {
            post.style.display = 'none';
          }
        });
      });
    });
  });
</script>

How the script works:

1. It waits for the page's HTML to be fully loaded (DOMContentLoaded).
2. It grabs all the filter buttons and all the post containers from the DOM.
3. It attaches a click event listener to every button.
4. When a button is clicked, it gets the filterValue from the data-tag attribute.
5. It then loops through every single post on the page. For each post, it checks if its data-tags attribute includes the filterValue.
6. It sets the style.display property to either 'block' (to show) or 'none' (to hide) based on the match.

Now, restart your dev server. Your blog page should have a set of tag buttons that instantly filter the list of posts!

The Astro Way: Targeted JavaScript vs. Full Hydration

You just implemented a core pattern of modern Astro development. To help you connect this to your background, let's look at an article that contrasts this approach with the heavier client-side rendering you might be used to.

As the article highlights, the benefits are significant:

• Performance: The page loads instantly with all content visible.
• SEO: Search engines can easily crawl all the pre-rendered HTML content.
• Reduced JavaScript: We only shipped a few lines of vanilla JS, not an entire rendering library like React, to handle this feature.

What you built is a simple "island of interactivity." In future lessons, we'll see how to use this same principle to "hydrate" full React components for more complex features, but only where they are needed.

Conclusion

Excellent work today! You've successfully added a fast, modern, and interactive feature to your blog that significantly improves the user experience.

Key Takeaways:

• Client-side interactivity in Astro can often be achieved with small, targeted vanilla JavaScript scripts.
• Using data-* attributes is a clean and effective way to pass information from your server-rendered HTML to your client-side scripts.
• This pattern of shipping static HTML and "sprinkling" in JavaScript is a core Astro philosophy that prioritizes performance and SEO.
• You've built your first "island of interactivity," a fundamental concept in Astro.

Up Next:

Your site's functionality is getting quite advanced! However, the design is still very basic. To build the "premium, minimal, and trustworthy" site you envisioned for an accountant, we need to establish a professional design system. In our next lesson, we will begin the Styling and Professional Design module by developing a minimal color palette and typography scale to form the visual foundation of your website.