@vulcantech/collections

Server-side portfolio/collections fetch layer for VulcanTech consumer sites. Mirrors @vulcantech/blog: ISR-tagged reads from the CMS with the rich-text body sanitized at this boundary so every consumer render is safe by default.

Configuration

Set these env vars on the consumer site (server-only — no NEXT_PUBLIC_ prefix):

| Var | Required | Notes | |---|---|---| | VULCANTECH_CMS_URL | no | Defaults to https://cms.vulcantech.io | | VULCANTECH_PROJECT_ID | yes | The CMS project id | | VULCANTECH_API_KEY | yes | API key with the portfolio:read scope |

API

import {
  fetchCollectionItems,
  fetchCollectionItemBySlug,
  fetchCollections,
  type PortfolioItemData,
  type PortfolioCollection,
} from "@vulcantech/collections";

// All published items, or just one collection
const items = await fetchCollectionItems();
const gallery = await fetchCollectionItems({ collection: "gallery" });

// One item — pass `collection` to disambiguate cross-collection slug collisions
const item = await fetchCollectionItemBySlug("engine-bay-reset", "gallery");

// Collection groups (each carries an optional defaultDisplayMode)
const collections = await fetchCollections();

Rendering displayMode

Each item carries displayMode: "gallery" | "before-after". Branch on it to choose how to render — a standard image gallery, or a before/after slider fed from item.beforeAfterPairs. Fall back to the collection's defaultDisplayMode for legacy items that have no explicit mode:

const mode = item.displayMode ?? collection?.defaultDisplayMode ?? "gallery";

item.content is sanitized HTML — render with dangerouslySetInnerHTML.

Integration

1. npm install @vulcantech/collections (inside the VulcanTech monorepo, use the workspace wiring in MONOREPO.md instead).
2. Set the env vars above.
3. ISR invalidation — ensure src/app/api/revalidate/route.ts exists; the CMS purges collection:{projectId}:{slug} tags on edit.