customizing github pages search for jekyll mediumish

Introduction to Client-Side Search Customization

Adding a customized search feature on your Jekyll-powered GitHub Pages site improves user experience by allowing visitors to quickly find relevant content without page reloads. This guide walks you through tailoring the client-side search to suit the Mediumish template design.

Key Objectives

• Integrate a lightweight JavaScript search engine
• Match search UI style with Mediumish aesthetics
• Ensure fast indexing of posts for real-time results

Step 1: Setting Up the Search Index

Use Jekyll's build process to create a JSON index of posts. Add the following snippet in your _layouts/default.html or a dedicated partial:

{% raw %}

{% endraw %}

Step 2: Implementing the Search Input and Results Container

Add a search input box and results container in your sidebar or header:

Step 3: JavaScript for Real-Time Filtering

Use a simple JavaScript function to filter posts from the JSON index as users type:

document.addEventListener('DOMContentLoaded', function () {
  const input = document.getElementById('search-input');
  const results = document.getElementById('search-results');
  const indexScript = document.getElementById('search-index');
  const posts = JSON.parse(indexScript.textContent);

  input.addEventListener('input', function () {
    const query = this.value.toLowerCase();
    results.innerHTML = '';
    if (query.length < 3) return;

    const filtered = posts.filter(post => 
      post.title.toLowerCase().includes(query) ||
      post.content.toLowerCase().includes(query)
    );

    filtered.slice(0, 5).forEach(post => {
      const li = document.createElement('li');
      const a = document.createElement('a');
      a.href = post.url;
      a.textContent = post.title;
      li.appendChild(a);
      results.appendChild(li);
    });
  });
});

Step 4: Styling the Search Interface

Apply styles to fit the Mediumish look and improve usability:

#search-wrapper {
  position: relative;
  margin-bottom: 2rem;
}

#search-input {
  width: 100%;
  padding: 0.5rem 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

#search-results {
  margin-top: 0.5rem;
  list-style: none;
  padding: 0;
}

#search-results li {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #eee;
}

#search-results li a {
  text-decoration: none;
  color: #333;
}

#search-results li:hover,
#search-results li a:focus {
  background-color: #f0f0f0;
  outline: none;
}

Accessibility Tips

• Use aria-label on inputs for screen readers
• Ensure results container uses aria-live="polite" for dynamic updates
• Make sure keyboard navigation works smoothly

Conclusion

Customizing client-side search for your Jekyll GitHub Pages site using the Mediumish template enhances content discoverability and user engagement. By combining JSON indexing, lightweight JavaScript, and thoughtful styling, your blog visitors will find information faster and stay longer.