Skip to content

Feature: Add q-search-results-list web component.#1193

Open
fchasen wants to merge 1 commit intomainfrom
feat-search_components
Open

Feature: Add q-search-results-list web component.#1193
fchasen wants to merge 1 commit intomainfrom
feat-search_components

Conversation

@fchasen
Copy link
Collaborator

@fchasen fchasen commented Feb 9, 2026

Description

Implements a new q-search-results-list web component to display and manage the searching a Pagefind index, replacing the current search results template and display logic.

  • The component takes a query attribute to search for in a Pagefind index.
  • Removes the updateSearchResults and displaySearchResults methods, as lit will handle batching UI updates.
  • Enables adding figures to the Pagefind index.
  • Adds subresults, contributors metadata and figures with image previews to the search results.
  • Adds excerpts with search query highlighting to all search result items.
  • Removes type and word count metadata from the search results.

Checklist

  • I have read the CONTRIBUTING.md file

  • I have made my changes in a new branch and not directly in the main branch

  • This pull request is ready for final review by the Quire team

Include screenshots of before/after if applicable.

quire-search

Additional Comments

Thumbnail handling for figures will be added once they are a size that can be used.

@geealbers
Copy link
Member

Ahead of the code review, this is looking really good @fchasen. It's exciting to see it in action. The two small style changes I'd make are:

.search-subresults {
  margin-left: 3rem;
}
.result-excerpt mark {
  background-color: var(--highlight-color, #F9F9A3);
}

Following the pattern of how you handled the other color items, the highlight it based on an as-yet non-existent css variable, but falls back to the highlight color value currently defined in content/_assets/styles/colors.scss.

I also played around with doing something to indicate that the excerpts are excerpts, but ultimately it felt too busy for me and probably unnecessary.

.result-excerpt:before {
  content: '... ';
}
.result-excerpt:after {
  content: ' ...';
}

Finally, on a non-style note, can we change the display of information on the figure image results? We may have spoken about this before and I thought otherwise, but now that I'm seeing it more in action we can eliminate the page title (I don't think it's clear what it is). And while you have the figure credit as a second meta item there, it would be better to include it as part of the excerpt, coming right after the caption, and have it be searchable too.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants