Theodore Roosevelt Center search widget

An embeddable, dependency-free search box for 139,714 archival items. Results open at theodorerooseveltcenter.org.

Try henry cabot lodge — natural word order, which the archive's own search can't match. Or cartoon, harvard, panama. Combine several; they narrow together.

Install

Two lines. No build step, no framework, no dependencies.

<script src="https://trc.labs.trlibrary.com/trc-search.min.js" defer></script>

<trc-search></trc-search>

Options

Attribute	Description
`placeholder`	Placeholder text for the input.
`collection`	Lock all searches to one collection slug, e.g. `harvard-college-library`.
`accent`	Shorthand for `--trc-rust`. Any CSS color.
`theme`	`inherit` uses the host page's fonts. `auto` enables dark mode.
`preview`	`off` disables live count and preview requests.
`data-base`	Override where the widget loads its index from.

Theming

The widget follows the Theodore Roosevelt Center's palette and typography by default.

#132E52 navy

#BC4C01 rust

#BED0CE sage

#F7F6F2 paper

Every value is a CSS custom property, so any single token can be overridden from the host page without forking the widget:

trc-search {
  --trc-rust: #8c1515;   /* accent and links   */
  --trc-navy: #1a1a1a;   /* text               */
  --trc-sage: #e8e2d5;   /* filter chips       */
  --trc-paper: #fafafa;  /* preview panel      */
  --trc-radius: 0;       /* square corners     */
  --trc-body: inherit;   /* host page's font   */
}

The widget never fetches webfonts. It declares Aleo and Nunito Sans as a stack, so it picks them up when the host page already serves them and falls back cleanly when not. Use theme="inherit" to adopt the host's typography instead.

Scoped to one collection

<trc-search collection="harvard-college-library"
            placeholder="Search the Harvard materials"></trc-search>

Events

The element emits trc-filter whenever the active filters change, so a host page can track usage or mirror state.

document.querySelector('trc-search')
  .addEventListener('trc-filter', e => console.log(e.detail.filters, e.detail.url));

How it works

Autocomplete runs entirely against a static index built weekly from the Center's public WordPress API and served from GitHub Pages — so typing costs their servers nothing, and suggestions keep working even when the archive itself is slow or down. Result counts and previews are fetched live, and fail quietly when unavailable.