Feature Request: Search

[brandonprajogo]

Hi, I'm curious, do you accept feature request? If you do, I want to request search feature to make user easier when search for spesific content.

I saw this feature is already present in Herman's Bear Blog, which would be nice if you also add this feature to Hugo Bear Blog theme since it also based on Bear Blog. Thanks!

[janraasch]

Hi @brandonprajogo,

Thanks for suggesting this feature!

I should mention that search functionality isn't part of the core Bear Blog platform, as it's intentionally JavaScript-free. Herman likely added search as a custom script to his blog. While I aim to keep hugo-bearblog JavaScript-free as well, you can add this functionality on your site yourself.

Here's how to implement a search feature:

• Create a file at layout/partials/custom_body.html
• Add this search implementation to the file:

 <script>
    //
    // Credit: Adapted with minor modifications from Herman's blog (https://herman.bearblog.dev/blog/)
    //
    // Select the content container and the blog posts list
    const mainContainer = document.querySelector('content');
    const blogPosts = document.querySelector('ul.blog-posts');
  
    if (blogPosts) {
    const searchInput = document.createElement('input');
    searchInput.type = 'text';
    searchInput.id = 'searchInput';
    searchInput.placeholder = 'Search...';
    searchInput.style.display = 'block';
    searchInput.style.marginTop = '16px';
  
    mainContainer.insertBefore(searchInput, blogPosts);
  
    // Add event listener to filter posts based on input
    searchInput.addEventListener('input', function() {
      const searchTerm = this.value.toLowerCase();
      const posts = document.querySelectorAll('.blog-posts li');
  
      posts.forEach(post => {
        const title = post.textContent.toLowerCase();
        post.style.display = title.includes(searchTerm) ? '' : 'none';
      });
    });
  }
</script>

Let me know if you need any clarification or run into any issues!

Best regards,
Jan

CC: @rokcso - This could be an interesting addition to hugo-bearblog-neo if it aligns with your vision! 💡

[rokcso]

@janraasch Thank you for your suggestion, I have been trying to implement this feature and it will be updated to hugo-bearblog-neo soon.

CC: @brandonprajogo