offline search for mirror drives #1175
Conversation
|
Netlify Deployments: |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
| Device | URL |
|---|---|
| mobile | https://ocw-hugo-themes-www-pr-1175--ocw-next.netlify.app/ |
| Device | URL |
|---|---|
| mobile | https://ocw-hugo-themes-www-pr-1175--ocw-next.netlify.app/search/ |
| Device | URL |
|---|---|
| mobile | https://ocw-hugo-themes-course-v2-pr-1175--ocw-next.netlify.app/ |
Not what you expected? Are your scores flaky? GitHub runners could be the cause.
Try running on Foo instead
There was a problem hiding this comment.
This makes sense, works as described, and is super cool 👍
Some things I noticed... I think that at least the first two are worth addressing:
- I think we should change
minMatchCharLength: 5to something significantly lower. Currently, OCW has no math courses (joking...):
-
When there are no matches, the page is very blank. I think we should say "No results found". Or perhaps always show the count.
-
(Fixed)
Sometimes the titles contain invalid characters on the search page. For example,3.034-fall-2005has an ampersand in its title:
And, as mentioned in slack: We may want to move some/all of the JS to a file that gets processed by webpack. JS in template files do not. The arrow functions will make IE mad. See also #1075
| aria-label="Search" | ||
| placeholder="Search OpenCourseWare" | ||
| /> | ||
| <button id="search-button" type="submit" class="py-2 px-3">Search</button> |
There was a problem hiding this comment.
| <button id="search-button" type="submit" class="py-2 px-3">Search</button> | |
| <button id="search-button" type="button" class="py-2 px-3">Search</button> |
Then you won't need to prevent default down below.
|
@ChristopherChudzicki all set for another look |
What are the relevant tickets?
Closes #1174
Description (What does it do?)
This PR adds the Fuse.js library to the project and utilizes it to provide offline search functionality in the
www-offlinetheme, used as the home page of mirror drives. The search icon is now displayed in the header on pages that aren't the search page, linking to a newsearch.htmlpage at the root. In mitodl/ocw-studio#1705, we set upocw-studioto publish a file undercontent/websitesfor each website that has been published live at least once inside the root website,ocw-www. This content is currently being used to generate a paginated list of sites at the root when using thewww-offlinetheme inindex.html. Insearch.html, we put that same list into an array in Javascript and feed it into Fuse.js as a data source, indexing onprimary_course_numberandtitle. The search page mostly replicates a basic version of the online search without any facets or resource search, providing links to sites relative to the root of the mirror drive in the same way the paginated index does. Everything is done in raw Javascript right in a script tag on the page to avoid any issues with CORS when viewing the page without a web server offline.Screenshots (if appropriate):
How can this be tested?
ocw-hugo-themeson this branch as well as https://github.mit.edu/ocw-content-rc/ocw-www andocw-hugo-projectson thecg/www-offline-enable-sectionbranchocw-hugo-themes, runyarn installto make sure you install the latest dependenciesocw-hugo-themes, runyarn build /path/to/ocw-content-rc/ocw-www/ /path/to/ocw-hugo-projects/ocw-www/config-offline.yamlocw-content-rc/ocw-www/distfolder and double click onindex.htmlfile://path/to/ocw-content-rc/ocw-www/dist/courses/course-namecoursesfolder underdistand extract it there to a folder matching the coursesname` propertyRelease process
mitodl/ocw-hugo-projects#255 should be merged and released before this PR