@mideind/vor-news

Embeddable React component for the Vör news-reading experience.

See the top-level DESIGN.md and CLAUDE.md for project-wide context.

Quick start

cd client
pnpm install
pnpm storybook         # component dev environment
pnpm rollup            # build the library to dist/esm/

If you don't have pnpm, enable it via Corepack: corepack enable. The packageManager field in package.json pins the version.

Testing

pnpm test               # vitest — pure unit logic (node env, no DOM)
pnpm test-storybook     # Storybook test-runner — every story in a real browser

pnpm test-storybook runs each story (render smoke-test + any play function) through Playwright/Chromium, so it needs a Storybook to point at and the Playwright browser installed:

# one-time: install the browser the runner drives (not committed; lives in
# ~/.cache/ms-playwright)
pnpm exec playwright install chromium

# then either run against a live dev server…
pnpm storybook                 # in one terminal (serves :6006)
pnpm test-storybook            # in another (defaults to :6006)

# …or against a static build (the headless / CI path)
pnpm build-storybook
npx http-server storybook-static -p 6006 --silent &   # any static server works
pnpm test-storybook --url http://127.0.0.1:6006

Use the test-runner (not vitest) for anything that needs real layout, ResizeObserver, or EventSource — vitest runs in node with no DOM. play-function assertions import from storybook/test.

Usage

import { VorFeed } from '@mideind/vor-news';
import '@mideind/vor-news/style.css';

export default function Page() {
    return (
        <VorFeed
            apiBaseUrl="https://vor.example.com"
            apiKey={process.env.NEXT_PUBLIC_VOR_API_KEY!}
            initialLanguage="is"
        />
    );
}

The component ships as ESM only with a separate CSS export. Styles are scoped under .vor-container via postcss-prefix-selector so they do not leak into or inherit from host application styles.

For a full Next.js embed — the client boundary, transpilePackages, CSP allowlist, dark-mode sync, and the host-identity token — see INTEGRATION.md.

Host compatibility

Target: Next.js App Router with React Server Components. VorFeed and any subcomponent that touches state, effects, or browser APIs declares "use client". No Node-only imports should leak into the client bundle. See INTEGRATION.md for the step-by-step host setup.

License

MIT. See LICENSE.