demos.joshnliz.com / Lyndon

Mini catalog: CSV in, catalog out

<lbj-mini-catalog> is a Stencil web component I built for Urban Institute's Lyndon design system. Point it at a CSV and it renders a catalog you can search, filter and page through. To publish a new library, directory or data catalog, an editor only had to upload a new CSV; nobody touched code.

Pick a preset

Each preset is the same component with a different CSV and different attributes.

CSV:

All records, people and bios are fictional sample data made for this demo.

The markup

This is everything the page needs. In Drupal, a block form wrote these attributes.

Bring your own CSV

Edit the preset's CSV below or load one of your own, then render it with the current preset's settings. The first row is the header; use ; to put several values in one cell. Everything stays in your browser.

Load a .csv file

How it worked in production

  1. Editors placed a Mini Catalog block with Layout Builder. The block form grouped the component's 64 attributes into tabs (data sources, buttons, UI text, configuration, data processing, title and description), and it wrote each saved setting straight onto the element as an attribute of the same name.
  2. The CSV came from one of three places: a file uploaded in the form, a URL (with token support), or a Drupal View whose rows were pushed into drupalSettings and read by the component through toggle_csv_local.
  3. In the browser, the component fetches and parses the CSV with PapaParse and derives filters from the columns. It searches with Fuse.js and renders each row in the chosen mode using other Lyndon components: ledes, cards, person cards, popovers and collapses.

Here, the “Bring your own CSV” panel adds one step before the component. A visitor's CSV is parsed, its headers are normalized and every cell is sanitized. It is then handed to the component as a blob: URL, so the original fetch-and-parse pipeline still does the rendering.

Source

The component: lbj-mini-catalog.tsx (sample CSVs and demo code are in the same repository). Also see the search results component and more Drupal work at drupal.joshnliz.com.

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