Search

[pmatula]

Hi,
I think search is a very important feature for a blog.
It's already mentioned: #51 (but it's mixed with the tags topic)

I think it should at least offer a possibility to enable that.
Interesting offers:

• https://lunrjs.com/
• https://fusejs.io/

Is there any plan to implement something like this or is that a no-go @hugo-sid ?

[hugo-sid]

Thanks for the query @pmatula.

I think search is a very important feature for a blog.

I totally agree with you.

Interesting offers:

https://lunrjs.com/
https://fusejs.io/

Fuse & Lunr are there on my radar but pagefind looks more exciting.

I haven't had much time to work on this lately, so a PR would be greatly appreciated. Thank you!

[pmatula]

Okay, good to know :-) I guess we should focus on pagefind.

[pmatula]

I did a quick & dirty implementation:

1. /layouts/partials/header.html

<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
<script src="/pagefind/pagefind-ui.js"></script>
<div id="search"></div>
<script>
   window.addEventListener('DOMContentLoaded', (event) => {
    new PagefindUI({ element: "#search", showSubResults: true });
});
</script>

I removed that part:

<li class="menu-separator">
      <span>|</span>
</li>

Two reasons for that:

1. I was not able to change it, that everything is "even" - the | was on top and messed up the whole thing.

2. I think when you have enabled dark/light mode icon + search bar, the | looks a bit cluttering (even If I would be able to solve my first issue)

3. I added /assets/sass/_pagefind.scss with the following content:

body {
    --pagefind-ui-scale: 0.6;
    --pagefind-ui-primary: #034ad8;
    --pagefind-ui-text: #393939;
    --pagefind-ui-background: #ffffff;
    --pagefind-ui-border: #eeeeee;
    --pagefind-ui-tag: #eeeeee;
    --pagefind-ui-border-width: 2px;
    --pagefind-ui-border-radius: 8px;
    --pagefind-ui-image-border-radius: 8px;
    --pagefind-ui-image-box-ratio: 3 / 4;
    --pagefind-ui-font: sans-serif;
}

#search {
    padding-right: 0.8em;
}

3. I modified the body part in assets/sass/_dark.scss:

  body {
    color: $dark-text-base-color;
    background-color: $dark-black;
    --pagefind-ui-primary: #eeeeee;
    --pagefind-ui-text: #eeeeee;
    --pagefind-ui-background: #152028;
    --pagefind-ui-border: #152028;
    --pagefind-ui-tag: #152028;
  }

After that you just need to run

hugo
npx -y pagefind --site public

It's okayish .. but for a proper solution, you need a way more mature approach :-) But maybe that's helpful for some people.

[DandyLyons]

This looks great! Thank you for working on it. I would assume at some point we'd want to make this configurable in the config.toml.

[pmatula]

yeah, at least the settings from https://pagefind.app/docs/ui/