Step-by-Step Guide: Implementing Search in Bear Blog

Bear is an awesome platform designed for people who want to focus on blogging. It provides everything you need to write blog posts without distractions. Or "no-nonsense," as they say at Bear.

Since Bear is focused on just blogging, you might find it lacks some features that other platforms offer. That's the trade-off you make when prioritizing minimalism and speed. Luckily, with some development skills, you can easily add those features yourself!

One of these features is the ability to search through your blog posts on the blog overview page.

If you only came here to add this custom feature to your own Bear blog, follow the steps below.

1. Copy the following script: html <script src="https://cdn.jsdelivr.net/gh/froodooo/bear-plugins@0.0.5/bear/blog-search.js"></script> (See my bear-plugins GitHub repository for the latest release number)
2. From your Bear blog dashboard, click on your blog name, then on Settings, then on Header and footer directives, and paste the above script in the Footer directive.

... and you're done! Go to the blog overview page on your website. It now has a search input field at the top. This input field filters all your blog posts and only shows those whose titles contain your search query.

For everyone who want to know more or prefer to host the code themselves instead of using my GitHub repository, read on.

The Technical Details

Let's start with the content of blog-search.js. Take a look:

if (document.querySelector(".blog-posts") && document.body.classList.contains("blog")) {
  document.querySelector("main").insertBefore(
    Object.assign(
      document.createElement("input"), {
      type: "text",
      id: "searchInput",
      placeholder: "Search...",
      style: "display: block;",
      oninput: (event) => {
        document.querySelectorAll(".blog-posts li").forEach((post) => {
          post.style.display = post.textContent.toLowerCase().includes(event.target.value.toLowerCase()) ? "" : "none";
        })
      }
    }),
    document.querySelector(".blog-posts")
  );
}

Let me walk you through it.

The if statement checks if we're on a page that contains an element with the class blog-posts, which should be true for the blog overview page.

Next, we look for the <main> tag and add a text input field to it. We give this input field an id, a placeholder value, and an oninput event that triggers whenever someone types in the text field. When that happens, we take the search query and hide all blog titles that do not include this search query.

Instead of using my default script hosted on the jsDelivr CDN, you can copy and paste the full script in the footer directive of your Bear blog in between <script> tags.

One note about the code: you might have noticed the lack of variables that would increase readability. I chose to use as few custom variables as possible to avoid conflicts with variables in other scripts you might have included in your blog. Not using custom variables minimizes this risk.

If you have any questions or comments, please contact me via email or on Mastodon.

Kudos for the initial version of this code go to Herman, creator of Bear.