Make autocomplete edition-aware #11047
Conversation
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #11047 +/- ##
==========================================
- Coverage 17.14% 17.01% -0.14%
==========================================
Files 91 92 +1
Lines 4981 5025 +44
Branches 867 876 +9
==========================================
+ Hits 854 855 +1
- Misses 3588 3623 +35
- Partials 539 547 +8 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull Request Overview
This PR enhances the autocomplete functionality to be edition-aware, improving the user experience by showing more relevant search results and linking to specific book editions rather than just works. The changes also include visual improvements to the autocomplete UI.
- Makes autocomplete results display specific book editions instead of just works
- Updates the link generation to include edition parameters when applicable
- Improves visual styling with updated border radius, font sizes, and transitions
- Adds high-resolution image support with srcset attributes
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| static/css/components/header-bar.less | Updates autocomplete styling with new border radius, font sizes, transitions, and layout improvements |
| openlibrary/plugins/openlibrary/js/SearchBar.js | Implements edition-aware autocomplete logic, updates link generation, and adds high-resolution image support |
| const book = work.editions?.docs?.[0] || work; | ||
| const author_name = work.author_name ? work.author_name[0] : ''; | ||
| let link = `${work.key}/${encodeURIComponent(work.title.replace(/ /g, '_'))}`; | ||
| if (book !== work) { | ||
| link += `?edition=key:${book.key}`; | ||
| } | ||
| return ` | ||
| <li tabindex=0> | ||
| <a href="${work.key}"> | ||
| <img src="//covers.openlibrary.org/b/id/${work.cover_i}-S.jpg?default=https://openlibrary.org/static/images/icons/avatar_book-sm.png" alt=""/> | ||
| <a href="${link}"> | ||
| <img | ||
| src="//covers.openlibrary.org/b/id/${book.cover_i}-S.jpg?default=https://openlibrary.org/static/images/icons/avatar_book-sm.png" | ||
| srcset="//covers.openlibrary.org/b/id/${book.cover_i}-M.jpg?default=https://openlibrary.org/static/images/icons/avatar_book-sm.png 2x" | ||
| alt="" | ||
| /> | ||
| <span class="book-desc"> | ||
| <div class="book-title">${websafe(work.title)}</div><div class="book-subtitle">${websafe(work.subtitle)}</div> by <span class="book-author">${websafe(author_name)}</span> | ||
| <div class="book-title">${websafe(book.title)}</div> | ||
| <div class="book-subtitle">${websafe(book.subtitle)}</div> |
There was a problem hiding this comment.
The variable name 'book' is misleading since it could be either a book edition or a work object. Consider renaming to 'bookOrWork' or 'displayItem' to clarify that it represents the item being displayed, which may fallback to the work if no edition is available.
Copilot uses AI. Check for mistakes.
1327afb to
b91ade1
Compare
Closes #11018
Technical
Testing
Screenshot
Note there's still something off with the search ranking... see #10969 . But this should help non-English users find the book they want.
Stakeholders