# Optimized local search for Hugo's theme "Github Style Plus" using Fuse.js.

Changed the theme to github-styling

This blog uses the theme github-styling, which is customized by fork github-style-plus, which was Clone from github-style.

As the name suggests, it’s a blog theme whose design was submitted to Github, so it doesn’t seem to be extremely popular, it seems difficult to keep up with Github’s design changes, and it seems like there aren’t many options, but if you want to customize it yourself, it doesn’t seem to be a problem, so I decided to use it.

As a result, I personally found the design to be familiar and familiar, so I think it’s good.

When changing the theme, I was forced to change the directory and needed to set up a redirect for netlify, which was a hassle, but I was able to change the theme without tripping over anything.

However, it does take up a lot of my time, so I would like to work with this theme for a long time.

However, as mentioned above, there were some parts that needed to be customized, and the most critical one was the slowness of local search.

Local search takes 1 minute

Personally, I think Github’s greatest ease of use is its high search performance.

Code searches are really useful.

In comparison, searching for this topic was too slow.

Blogs are packed with past knowledge, so I want to search them frequently, but it’s painful to have to spend a minute each time searching for them.

So I decided to improve it.

The video below is before the actual improvement, and it actually took 1 minute and 20 seconds.

When I looked at the network tab, I found that I was viewing all files.

Deciphering local search in github-style-plus

The source that actually looks at all the files is below.

fetch(
  `${host.indexOf("localhost") > -1 ? "http://" : "https://"}${host}/index.xml`,
)
  .then((resp) => resp.text())
  .then(async (res) => {
    parser = new DOMParser();
    xmlDoc = parser.parseFromString(res, "text/xml");
    const linkResult = xmlDoc.getElementsByTagName("link");
    const titleResult = xmlDoc.getElementsByTagName("title");
    const arr = [];

    const matched = [];
    await (async function searchLink() {
      for (let i = 0; i < linkResult.length; i++) {
        await fetch(linkResult[i].textContent).then((resp) =>
          resp.text().then((res) => {
            const pureText = stripHtml(res);
            if (pureText.indexOf(keyword) >= 0) {
              matched.push(i);
            }
          }),
        );
      }
    })();
  });

First, get your own index.xml and get the number of all URLs.

Based on that number, for is run, and the content of all URLs is extracted and checked to see if the keyword is included.

If it is included, it is stored in matched and matched is used to generate Dom.

There are currently 200 articles, so it would definitely take some time to go through them all.

improve

After the improvement, it looks like this:

When I was looking into speeding up searches, I found Fuse.js.

Powerful, lightweight fuzzy-search library, with zero dependencies.

I reimplemented it as below.

<script src="https://cdn.jsdelivr.net/npm/fuse.js@7.1.0"></script>

First, load Fuse.js.

const fetchIndex = async () => {
  const response = await fetch(
    `${host.indexOf("localhost") > -1 ? "http://" : "https://"}${host}/index.xml`,
  );
  const xmlText = await response.text();
  const parser = new DOMParser();
  const xmlDoc = parser.parseFromString(xmlText, "text/xml");
  const items = Array.from(xmlDoc.getElementsByTagName("item"));

  searchIndex = items.map((item) => ({
    title: item.getElementsByTagName("title")[0].textContent,
    link: item.getElementsByTagName("link")[0].textContent,
    content: item.getElementsByTagName("description")[0]?.textContent || "",
  }));

  fuse = new Fuse(searchIndex, {
    keys: ["title", "content"],
    threshold: 0.3,
  });
};

Next, define fuse.

Now you can search for specific keywords from title and content. What we are doing is the same as before the improvement: we are getting title, link, and description from index.xml.

threshold seems to be the threshold for fuzzy search.

There were other options.

Then, if you pass the search word to search as shown in the code below,

const results = fuse.search(query).map((res) => res.item);

Returned with fetchIndex

• title
• link
• content

can be obtained, so you can generate Dom using it.

With this method, you can implement a search by simply acquiring index.xml for the first time.

Now you can search blogs frequently and easily access your own knowledge.

Full code here

In the first place, if description was used before the improvement, there may not have been a need to fetch.

Or maybe they could not get tag with this method, so they purposely went to look at the HTML of all URLs.