Search results component

<lbj-simple-search> is a Stencil web component I built for Urban Institute's Lyndon design system. It shows faceted, paginated search results from a Drupal Search API Solr index. Below, the original component runs against a mock of that API.

The results are sample records created for this demo. They are not real publications, and their links go nowhere.

Try it

Pick a content type from Filter by Content. The counts come from the facet metadata.
Type a word such as housing or data into the search box and press Enter.
Page through the results with Previous / Next, then use Reset to go back to the start.

How it worked in production

Drupal's Search API indexed content into Solr. The jsonapi_search_api module exposed it as /jsonapi/index/latest_work, and jsonapi_search_api_facets added facet counts in meta.facets.
An event subscriber (lyndon_sidekick's JsonApiOnResponse) altered each response. It added a per-node eyebrow, appended subtitles to titles, and formatted the display date for readers.
A Drupal block plugin placed the web component on a page and set its filter column, facet column, and page size from editor configuration.
The component builds the JSON:API query from its attributes (filter[…], filter[fulltext], page[limit], page[offset]). It renders results as <lbj-lede> cards and handles faceting, keyword search, and pagination on the client.

In this demo, a small script wraps window.fetch and answers those same JSON:API requests from a static JSON file. That lets the component run unchanged on a static host.

Source

Component and mock backend: github.com/joshmiller83/demos. More Drupal work from the same project: drupal.joshnliz.com.

Lyndon is MIT licensed. Urban's licensed web fonts are not included, so Lato and Jost stand in.