google / docsy

A set of Hugo doc templates for launching open source content.
https://docsy.dev
Apache License 2.0
2.59k stars 895 forks source link

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

Closed frodriguezsmartclip closed 4 years ago

frodriguezsmartclip commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

frodriguezsmartclip commented 4 years ago

Hi Lisa,

I've just followed this thread to config succesfully offline search: https://github.com/google/docsy/pull/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"]
  1. Create static/js/offline-search.js with the content code (link)
  2. Create an insert static\js\lunr.js
  3. 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

LisaFC commented 4 years ago

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:

results

@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 commented 4 years ago

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 commented 4 years ago

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

Screen Shot 2020-03-13 at 0 48 32
LisaFC commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

@LisaFC @tekezo

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

Anotación 2020-03-12 171623

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):

Anotación 2020-03-12 171923

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 commented 4 years ago

@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. https://github.com/google/docsy/blob/d547e1913083a97d1d9c4c45d45d9f4e7ba08341/assets/js/offline-search.js#L99-L174

LisaFC commented 4 years ago

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

nryberg commented 3 years ago

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.

pankeshpatel commented 3 months ago

I am trying to enable Lunr.js offline search in my hugo site with docsy theme.

I have enabled the following in my config.toml file

# Enable Lunr.js offline search
offlineSearch = true
offlineSearchSummaryLength = 70
offlineSearchMaxResults = 10

and disabled the following algolia_docsearch , gcs_engine_id

when I run locally on my mac, the search functionality works.

however, when I deployed it on S3 bucket by CloudFront, it gave me the following error

Refused to load the script 'https://unpkg.com/lunr@2.3.8/lunr.min.js' because it violates the following Content Security Policy directive: "script-src 'self' https://code.jquery.com https://stackpath.bootstrapcdn.com https://cdnjs.cloudflare.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Upon some trial and test, I have realized that this CDN 'https://unpkg.com/lunr@2.3.8/lunr.min.js causes an issue.

When I add the following CDN manually on my pages and upload to S3 bucket, the search function works.

<script src="https://cdnjs.cloudflare.com/ajax/libs/lunr.js/2.3.9/lunr.min.js" integrity="sha512-4xUl/d6D6THrAnXAwGajXkoWaeMNwEKK4iNfq5DotEbLPAfk6FSxSP3ydNxqDgCw1c/0Z1Jg6L8h2j+++9BZmg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

My hugo with docsy them project use the following this submodules https://github.com/google/docsy/tree/2bedb2ff278eddba4a7fc4441ca6bf7a42caeb68

This submodule by default puts "https://unpkg.com/lunr@2.3.8/lunr.min.js" CDN and does not allow me to change it to "https://cdnjs.cloudflare.com/ajax/libs/lunr.js/2.3.9/lunr.min.js"

My question is how could I resolve this CDN issue to enable "offline-search"

The submodule overwrites my changes. So it prevents me from putting any content security meta tag. https://github.com/google/docsy/tree/2bedb2ff278eddba4a7fc4441ca6bf7a42caeb68