Eleventy Catalog Site Build

ELI5

A static site generator (Eleventy) reads every prompts/<id>/ directory, hands the data to a few Nunjucks templates, and writes a browsable catalog into site/_site/. There’s no server runtime — it’s HTML, CSS, and a sprinkle of JSON.

Technical Deep Dive

Toolchain (site/package.json)

Build Surface

flowchart LR
  src["../prompts/<id>/"] --> data["site/_data/prompts.js (fast-glob + js-yaml + fast-xml-parser)"]
  data --> tmpl["site/index.njk + site/prompts/*.njk"]
  tmpl --> out["site/_site/"]
  out --> srv["npm run serve (eleventy --serve --port=8080)"]
  out --> build["npm run build (eleventy)"]

Permalinks are template-driven: the catalog renders at /, and per-prompt pages live under /prompts/<slug>/ with sibling prompt.json, prompt.txt, and index.json outputs from the templates in site/prompts/.

Scripts

"scripts": {
  "build": "eleventy",
  "serve": "eleventy --serve --port=8080",
  "clean": "rm -rf _site"
}

Search Affordances

site/index.njk exposes a <input id="q" type="search"> and tags each card with a data-haystack attribute composed of id, title, summary, and tags — a client-side filter operates over those attributes without any server. Cards are grouped by status (ready, tested, draft) using a groupByStatus filter on the prompts collection.

Key Terms

• _data/prompts.js — Eleventy data file that materialises every prompt as a JS object for templates.
• groupByStatus — Eleventy filter (registered in eleventy config) that buckets the prompts collection by meta.status.
• data-haystack — per-card DOM attribute used by the in-page search input for client-side filtering.

Q&A

Q: Which Eleventy version does the site pin? A: ^3.0.0 (site/package.json:devDependencies).

Q: Where does the prompts.js data file source its data from? A: It walks prompts/<id>/ via fast-glob, parses meta.yml with js-yaml, and extracts sections of prompt.xml with fast-xml-parser — the same files bin/eva reads.

Q: What command serves the site locally and on which port? A: npm run serve → eleventy --serve --port=8080.

Examples

cd site
npm install
npm run serve   # http://localhost:8080