search

cncf / dot-org-hugo-theme

Hugo theme ideal for Organizations to use. Built initially for the TODO site redesign.
https://dot-org-hugo-theme-demo.netlify.app/
MIT License
43 stars 14 forks source link

Add Pagefind search #37

Closed cjyabraham closed 8 months ago

cjyabraham commented 9 months ago

This addresses #35 by integrating Pagefind search.

Preview: https://deploy-preview-37--dot-org-hugo-theme-demo-jh.netlify.app/

It adds the search icon to the topnav on both mobile and desktop. It also demonstrates language-specific search results in both English and Spanish.

You can set up your own local instance of this following these instructions.

netlify[bot] commented 9 months ago

Deploy Preview for dot-org-hugo-theme-demo-thetwopct ready!

Name Link
Latest commit f3cfc11f06c130f1932c5311144761e7baa1ca88
Latest deploy log https://app.netlify.com/sites/dot-org-hugo-theme-demo-thetwopct/deploys/65aea1df346129000830dcdf
Deploy Preview https://deploy-preview-37--dot-org-hugo-theme-demo-thetwopct.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 9 months ago

Deploy Preview for dot-org-hugo-theme-demo ready!

Name Link
Latest commit f3cfc11f06c130f1932c5311144761e7baa1ca88
Latest deploy log https://app.netlify.com/sites/dot-org-hugo-theme-demo/deploys/65aea1dfc25e7e00083350e7
Deploy Preview https://deploy-preview-37--dot-org-hugo-theme-demo.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

thetwopct commented 9 months ago

@cjyabraham Do you think adding the search to the site/header should be a theme option?

thetwopct commented 9 months ago

@cjyabraham A few things popped up when running locally

1) Was it intentional to leave out this data-pagefind-body attribute as currently the header and footer are searched, which could give some poor results.

[Parsing files]
Did not find a data-pagefind-body element on the site.
↳ Indexing all <body> elements on the site.

2) There is no /es/demo-page, so maybe Hugo is using the en language content? If Hugo does that, I wonder if we need to add some smarts to the head of the page to detect it (I'm still not 100% sure how the languages/fallover/works)

[Reading languages]
* "/es/demo-page/" has no html lang attribute

3) I find the Search icon a little bold and jarring. There is a thinner one in the TODO branding icons section which matches the font a little closer. I will swap that in and add a hover color change.

Screenshot-2024-01-22 --15 20 33

4) Locally, I cannot get the search bar to appear on the page, the paths are not valid

Screenshot-2024-01-22 --15 28 10

I've played about with this and cannot get it to load. I also cannot reach the public/pagefind/ file directly (404 error) even though the files exist.

cjyabraham commented 9 months ago
  1. I did add data-pagefind-body here. You may need to build your site first before you run pagefind?
cjyabraham commented 9 months ago

@cjyabraham Do you think adding the search to the site/header should be a theme option?

Yes, good idea.

thetwopct commented 9 months ago