How to config: Lunr.js offline search + Hugo inside docsy custom theme

[frodriguezsmartclip]

Hi, I have been reading the documentation, but the documentation about Lunr.js it's a little insufficient... 😢

It would be interesting if you could better document how to configure + steps to follow with "Lunr.js with Hugo and with Docsy", to have the search offline (yes, for now we dont want the documentation to be indexed).

It would be a very interesting feature. 🙏

Maybe, this post related. They can help you improve the documentation: https://www.integralist.co.uk/posts/static-search-with-lunr/

Thank you!! Have a nice day

[LisaFC]

Sure, is there anything else you need to know? If you follow the steps in our doc it should be all set up and ready for you, all the relevant lunr code is included in the theme so you don't need to go through all the steps in your linked doc to configure it, it should just work. Try it and let me know what happens! :)

[LisaFC]

lunr script is here: https://github.com/google/docsy/blob/d547e1913083a97d1d9c4c45d45d9f4e7ba08341/assets/js/offline-search.js

[frodriguezsmartclip]

Hi Lisa,

I've just followed this thread to config succesfully offline search: #142 starting from here

The docsy documentation about that, was insufficient because you need to create file index.json inside your custom layouts:

layouts/index.json

Content inside that index.json:

{{- $.Scratch.Add "index" slice -}}
{{- range where .Site.Pages ".Params.exclude_search" "!=" true -}}
{{- $.Scratch.Add "index" (dict "title" .Title "ref" .Permalink "body" .Plain "excerpt" .Summary) -}}
{{- end -}}
{{- $.Scratch.Get "index" | jsonify -}}

Once I put that, and follow the first link thread, I was able to have offline search. 😃

(Works too deploy with Netlify) ✔️

To sum-up:

1. Create index.json with new data.
2. Add offlineSearch = true to the main config.toml file.
3. Add JSON to the outputs for home in the main config.toml file:

[outputs]
	home = [ "HTML", "JSON"]

4. Create static/js/offline-search.js with the content code (link)
5. Create an insert static\js\lunr.js
6. Styling for the offline search field lives in /static/css/offline-search.css.

And, tadaaaa 🎉 It's works!!!

However, I think there is a "bug" when input search is empty after typing and deleting some words, the

$searchResults.innerHTML = '<ul"><li>No results...</li></ul>';

Still stays and is not destroyed.

In addiction, there is no option to "close" the results...

I have configured to leave the clean the input, by default, the browsers in the assets\scss\_search.scss. It works fine, but when cleaning the input, it gives the error of" no results ... ", so this

is not removed "ever" (unless you write something you find ...)

I do not know if I explained well.

Here put the screenshots:





input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
    cursor: pointer;
}

Other thing, I'll be nice feature to copy the search feature using Lunr.js in Mkdocs (see working here). I like how they resolve "matching" when typing, and show/hide and overlay the input search and results...

💡 May I have a new feature request inside docsy repo better?

Thanks a lot. Regards! 😉

[LisaFC]

I'm not sure what's going on with your site, because I just followed the instructions in the Docsy docs (literally just made the config changes and rebuilt the site) with a "clean" copy of docsy-example and have what seem to be working lunr offline search results - I didn't need to add any further layouts, scripts or configuration because it's all in the theme. Are you using the most recent version of the theme? Also did you run hugo before running hugo server, because you need to do that to build the index? It also looks like your results aren't using our CSS because mine look like this:

@tekezo did most of the work on this feature, maybe he can also help figure out what's going on.

(one thing I did notice was that I didn't seem to be getting a "No results" response when there were no matches, did this work at one stage and has it now broken....?)

[tekezo]

This issue looks similar to #201 .

@frodriguezsmartclip
Are you using the latest docsy?
Please confirm the submodule state.
https://www.docsy.dev/docs/updating/

[tekezo]

@LisaFC I can see the "No results" with:

• docsy-example@216831c
• docsy@12ea90d
• Hugo v0.67.0

[LisaFC]

Thanks for checking! I'll double check my one, but if it's working with all the latest versions for you it should be fine.

[frodriguezsmartclip]

@tekezo

I've just update docsy theme like this:

MINGW64 /c/Hugo/Sites/docs-adtopy/themes/docsy ((12ea90d...))
$ git remote -v
origin  https://github.com/google/docsy (fetch)
origin  https://github.com/google/docsy (push)

result-->

$ git pull origin master
From https://github.com/google/docsy
 * branch            master     -> FETCH_HEAD
Already up to date.

And branches...

git branch -a
* (HEAD detached at 12ea90d)
  master
  remotes/origin/HEAD -> origin/master
  remotes/origin/LisaFC-autoprefixer
  remotes/origin/LisaFC-markdown
  remotes/origin/master

And git log:

$ git log --oneline
12ea90d (HEAD, origin/master, origin/HEAD) Merge pull request #225 from Morishiri/update-swagger
2eb61a5 Update Swagger UI to v3.25.0
b75b52f Merge pull request #222 from google/LisaFC-customfix
7026ac5 Fixed instructions for custom sections
2c28143 Update _index.md

Maybe is something related to my custom template?? I'll check it in detail this weekend...

Thanks in advance!! 🙏

[frodriguezsmartclip]

@LisaFC @tekezo

Interesting.... If I rename my custom partials like this:

And then, my site is using partials from docsy, "works" a little (only show input search in header, not sidebar as I had it, and it's not the same css like yours):

My index.json has this code:

{{- $.Scratch.Add "index" slice -}}
{{- range where .Site.Pages ".Params.exclude_search" "!=" true -}}
{{- $.Scratch.Add "index" (dict "title" .Title "ref" .Permalink "body" .Plain "excerpt" .Summary) -}}
{{- end -}}
{{- $.Scratch.Get "index" | jsonify -}}

I run these commands:

hugo
Building sites … Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist`
WARN 2020/03/12 17:22:08 found no layout file for "JSON" for kind "home": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.       

                   | ES
-------------------+-----
  Pages            | 46
  Paginator pages  |  0
  Non-page files   |  1
  Static files     | 79
  Processed images |  2
  Aliases          |  0
  Sitemaps         |  1
  Cleaned          |  0

Total in 4182 ms

In config.tom have these 2 lines:

[outputs]
home = [ "HTML", "JSON"]
page = [ "HTML" ]

What files are exactly necesary to get offline work?? Maybe I have a bad configuration in one of them or something... becacuse when I rename my custom partials, "works"....

Thanks!

PS: @LisaFC

It also looks like your results aren't using our CSS because mine look like this:

Where can find your CSS for search results??

I have this css for file static/css/offline-search.css:

#search-results{
    position: absolute;
    width:100%;
    font-size: 0.9rem;
    top: 40px;
    padding-left: 5px;
    padding-right: 5px;    
    margin-top: -5px;
    z-index: 1;
}

#search-nav-container {
    position: relative;
    width: 100%;
}

#search-results ul li{
    list-style-type: none;
    list-style: none;
    padding: 8px;
}

.td-search-input.form-control:focus{
    color: #495057;    
    border-color: $primary;
    outline: 0;
    box-shadow: 0 0 0 3px #82afd5;
}

#search-results ul{
    list-style-type: none;
    list-style: none;
    padding: 8px;
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
    border-left:1px solid #ccc;
    border-top:1px solid #ccc;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
    background: #fff;
}

[tekezo]

@frodriguezsmartclip

What files are exactly necesary to get offline work??

There are no files you have to add for offline search.

index.json and *.js, *.css are unnecessary.
offline-search-index-xxx.json file will be generated automatically when just you enable offlineSearch in config.toml.

The result dialog is rendered using bootstrap card and popover.
There is no special css for the result dialog.

docsy/assets/js/offline-search.js

Lines 99 to 174 in d547e19

	//
	// Make result html
	//
	const $html = $('<div>');
	$html.append(
	$('<div>')
	.css({
	display: 'flex',
	justifyContent: 'space-between',
	marginBottom: '1em'
	})
	.append(
	$('<span>')
	.text('Search results')
	.css({ fontWeight: 'bold' })
	)
	.append(
	$('<i>')
	.addClass('fas fa-times search-result-close-button')
	.css({
	cursor: 'pointer'
	})
	)
	);
	const $searchResultBody = $('<div>').css({
	maxHeight: `calc(100vh - ${$targetSearchInput.offset().top +
	180}px)`,
	overflowY: 'auto'
	});
	$html.append($searchResultBody);
	if (results.length === 0) {
	$searchResultBody.append(
	$('<p>').text(`No results found for query "${searchQuery}"`)
	);
	} else {
	results.forEach(r => {
	const $cardHeader = $('<div>').addClass('card-header');
	const doc = resultDetails.get(r.ref);
	const href =
	$searchInput.data('offline-search-base-href') +
	r.ref.replace(/^\//, '');
	$cardHeader.append(
	$('<a>')
	.attr('href', href)
	.text(doc.title)
	);
	const $cardBody = $('<div>').addClass('card-body');
	$cardBody.append(
	$('<p>')
	.addClass('card-text text-muted')
	.text(doc.excerpt)
	);
	const $card = $('<div>').addClass('card');
	$card.append($cardHeader).append($cardBody);
	$searchResultBody.append($card);
	});
	}
	$targetSearchInput.on('shown.bs.popover', () => {
	$('.search-result-close-button').on('click', () => {
	$targetSearchInput.val('');
	$targetSearchInput.trigger('change');
	});
	});
	$targetSearchInput
	.data('content', $html[0].outerHTML)
	.popover('show');

[LisaFC]

Closing this as not reproducible with the latest version of the theme, feel free to reopen if you have more problems.

[nryberg]

If I use the Docsy Example site as a starting point, local search works fine.

If I build a Hugo Docsy site from the ground up, and enable local search, the search box doesn't appear in the menu bar. I feel like there's a setting that I'm just missing here.

My goal is to build a completely stripped version of the Docsy site, and local search in house is necessary.

I have built the site with hugo -D and no index files are being generated.