Feature Request: Search

[brandonprajogo]

Hi @maolonglong , thank you for created this beautiful theme! I enjoyed it, and use it for my main site. 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 Simple theme since it also based on Bear Blog. Thanks!

[maolonglong]

I need to do some research because the initial goal of this theme was "simple" and "no-js", so I need to find a "simple" solution and let users choose whether to enable the search feature (because the search feature is likely to introduce js).

[brandonprajogo]

@maolonglong I found the solution. Previously I raise the same issue in the original Hugo Bear Blog theme. The creator provided this code that you can add manually into layout/partials/custom_body.html to enable search function:

 <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>

Can you also implement this into Hugo Simple Theme with Simple.css design? Since the goal of this theme is using no JavaScript, you can make this feature optional so it can be disabled in hugo.toml config, or just include the code in the documentation so people that want it can just copy the code into layout/partials/custom_body.html manually.