BS4: box search not working

[dieghernan]

Hi,

I am testing the in-development version of pkgdown for creating a template (uses BS4) and the search box doesn’t seem to work:
Web: https://dieghernan.github.io/rogtemplate/index.html
Source: https://github.com/dieghernan/rogtemplate

The funny thing is that it seems to work locally, so my first guess is that it should be related with relative/absolute paths.

Am I missing something?

Regards

[GregorDeCillia]

I just looked into the js console after attempting a search on your site. It says that search.json is missing.

GET https://dieghernan.github.io/search.json 404

The index.json is available at https://dieghernan.github.io/rogtemplate/search.json, so it is looking at the wrong directory.

[maelle]

👋 @dieghernan & @GregorDeCillia! I think the problem is simply that the URL is missing from the configuration file, I opened a PR rOpenGov/rogtemplate#1 (re-open this issue if not).

The function pkgdown::pkgdown_sitrep() indicates the issue.

I'll add a mention of this to the docs of ?build_search.

[dieghernan]

Thanls @maelle @GregorDeCillia, I think I found the root cause of the issue:

The current in-development template line for search.json is :

pkgdown/inst/templates/BS4/navbar.html

Line 20 in 705ff7c

<input type="search" class="form-control mr-sm-2" aria-label="Search" name="search-input" data-search-index="{{{search-index}}}" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">

So basically:

data-search-index="{{{search-index}}}"

This differs of how other hihg-level assets are treated in the package, see pkgdown.css:

pkgdown/inst/templates/BS4/head.html

Line 42 in 705ff7c

<link href="{{#site}}{{root}}{{/site}}pkgdown.css" rel="stylesheet">

I created a custom navbar.html template on my repo replacing data-search-index="{{{search-index}}}" with data-search-index="{{#site}}{{root}}{{/site}}search.json" and now it works fine:

https://github.com/dieghernan/rogtemplate/blob/45f62da2ff65cec6c01a726e44c62abd0037ee30/inst/pkgdown/templates/navbar.html#L20

See results: https://dieghernan.github.io/rogtemplate/

Note that I tried "{{#site}}{{root}}{{/site}}{{{search-index}}}"` but it didn't work!. I think this is due to the
leading slash included on:

pkgdown/R/render.r

Line 50 in 9ce6af4

data$`search-index` <- paste0("/", pkg$prefix, "search.json")

Note that other similar resources don't have the leading slash:

pkgdown/inst/templates/BS4/head.html

Lines 13 to 18 in 705ff7c

	<link rel="icon" type="image/png" sizes="16x16" href="{{#site}}{{root}}{{/site}}favicon-16x16.png">
	<link rel="icon" type="image/png" sizes="32x32" href="{{#site}}{{root}}{{/site}}favicon-32x32.png">
	<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="{{#site}}{{root}}{{/site}}apple-touch-icon.png" />
	<link rel="apple-touch-icon" type="image/png" sizes="120x120" href="{{#site}}{{root}}{{/site}}apple-touch-icon-120x120.png" />
	<link rel="apple-touch-icon" type="image/png" sizes="76x76" href="{{#site}}{{root}}{{/site}}apple-touch-icon-76x76.png" />
	<link rel="apple-touch-icon" type="image/png" sizes="60x60" href="{{#site}}{{root}}{{/site}}apple-touch-icon-60x60.png" />

PS: I am missing the GitHub link, that should be displayed by default:

https://pkgdown.r-lib.org/dev/articles/customization.html?q=navbar#navbar-1

By default, the top navbar will contain links to:

• “Get Started”, if you have an article with the same name as the package (e.g., vignettes/pkgdown.Rmd).
• The reference index.
• Articles (i.e., vignettes, if present).
• News (if present).
• An icon linking to the source repository.

May I open a new issue?

[GregorDeCillia]

Thanks for sharing this. It makes sense that this should not be due to missing links in pkgdown.yaml because the link to the search.json is supposed to be relative.

About the GitHub Link

I think you need your repo url in the DESCRIPTION so that pkgdown knows the target for the source-link. See https://pkgdown.r-lib.org/articles/linking.html

[dieghernan]

Thanks @GregorDeCillia now it's working.

May I suggest to reopen this issue until is completely solved?

[maelle]

Oh, good catch and sorry for the false resolution!

The problem is that the past link was relative to the website root which for e.g. pkgdown's own website is fine, but in the case of your GitHub pages website was not. 🤦‍♀️ I'll make a fix. Thanks for your patience 😉

[maelle]

#1772

[GregorDeCillia]

Thank you @maelle I'll test this with https://statistikat.github.io/STATcubeR/dev/ as soon as the PR is in pkgdown@master. I guess this is the same issue

GET https://statistikat.github.io/dev/search.json (404)

[dieghernan]

Thanks @maelle , now it is working with the navbar template provided by pkgdown.

https://dieghernan.github.io/rogtemplate/index.html

[maelle]

🎉 thanks for the update, and thanks again for reporting the issue!

[GregorDeCillia]

The new version now also finds the search index for my package. However, clicking into a search result leads to a 404. Example:

• go to https://dieghernan.github.io/rogtemplate/index.html
• search for "MIT"
• click the link to the LICENSE file.

This navigates to https://dieghernan.github.io/LICENSE.html?q=mit#mit-license (404) but it should be https://dieghernan.github.io/rogtemplate/LICENSE.html?q=mit#mit-license

[maelle]

Thank you! Wrong assumption on what the root is, again. I'll PR a fix of the search index building.

[maelle]

Here we go again: #1774 🙂 I'll come back to this thread next week.

[dieghernan]

Thanks @maelle @GregorDeCillia @hadley , now is working fine in https://dieghernan.github.io/rogtemplate/