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));

Relationship map

A second, separate widget: an interactive map of how people and subjects connect across the archive. It opens on Roosevelt and expands outward as you click — six degrees, made literal. Clicking through opens the TR Center in a new tab.

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

<trc-graph></trc-graph>                  <!-- correspondence network -->
<trc-graph mode="subjects"></trc-graph>  <!-- subject constellation -->

Roosevelt is deliberately excluded from the subject constellation. He's tagged on 18,491 items, so leaving him in connects every subject to him and to nothing else — the structure disappears. The people graph keeps him, because there he's the point.

Topic breakdown

A third widget: embed a subject by name and it shows how that subject's items break down by format, each row opening that slice at the TR Center in a new tab. Fully precomputed, so it makes no live calls until you click through.

Build your embed

Search for a subject, adjust the options, and copy the snippet.

Rows Theme Show title

Snippet

Pick a subject above to generate your embed code.

Live preview

Preview appears here.

The finished embed is just two lines:

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

<trc-topic name="Conservation of natural resources"></trc-topic>

Match your site

Every widget defaults to the TR Center's palette. Add theme="trlibrary" to restyle any of them to trlibrary.com — coral, deep navy, Clearface headings — without touching the embed code otherwise.

<trc-topic name="Hunting" theme="trlibrary"></trc-topic>
<trc-search theme="trlibrary"></trc-search>
<trc-graph theme="trlibrary"></trc-graph>

On a dark section

theme="trlibrary-dark" renders white on TRPL's forest green, sized to drop straight into a "From the Archives"-style column. The widget carries its own green, so it sits seamlessly whether the surrounding section is green or not.

<trc-topic name="Conservation of natural resources" theme="trlibrary-dark" heading="off"></trc-topic>

From the Archives

John Muir

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. The relationship map and topic breakdowns are fully precomputed and make no live calls at all until you click through.