# FuryRoadMap

FuryRoadMap publishes a product roadmap (Planned / In progress / Shipped) as an embed on any website.
The owner edits items in the FuryRoadMap dashboard; the embed updates on its own, no redeploy.
Site: https://furyroadmap.fun
Docs: https://furyroadmap.fun/docs/install

## Install (script tag)

Place the container where the roadmap should render, then the script anywhere after it:

<div id="furyroadmap"></div>
<script async src="https://furyroadmap.fun/embed.js" data-roadmap="<slug>"></script>

Attributes on the script tag:
- data-roadmap (required): the roadmap slug.
- data-target (default "#furyroadmap"): CSS selector of the element to render into.
- data-layout (default: theme layout): "columns", "list" or "timeline".
- data-theme (default: theme mode): "light", "dark" or "auto".

Behaviour: under 15 KB gzipped, async, renders into a shadow root, reserves 240px before load
(no layout shift), never throws. On any error it shows one muted line, "Roadmap unavailable."
Programmatic mount (React: call from useEffect): window.FuryRoadMap.mount('#my-div', { roadmap: '<slug>' }).
Mount is idempotent per element.

## Iframe alternative

<iframe src="https://furyroadmap.fun/embed/<slug>" title="Product roadmap" style="width:100%;border:0;min-height:240px" loading="lazy"></iframe>

Query params: ?layout=columns|list|timeline and ?theme=light|dark|auto.
The page posts { type: "furyroadmap:height", slug, height } to window.parent on load and on resize;
listen for "message" events from origin https://furyroadmap.fun and set the iframe height.

## Public API

GET https://furyroadmap.fun/api/v1/public/roadmaps/<slug>
Read-only JSON, CORS enabled (Access-Control-Allow-Origin: *). 404 for unknown or private slugs,
301 to the new slug for 30 days after a rename, 429 when rate limited.

Payload shape:
{
  "slug": string,
  "name": string,
  "tagline": string | null,
  "theme": { "mode": "light"|"dark"|"auto", "layout": "columns"|"list"|"timeline",
             "colors": { "primary", "background", "surface", "text", "mutedText", "border" },
             "font": string | { "google": string }, "radius": number, "density": "compact"|"comfortable",
             "showTarget": boolean, "showTags": boolean, "showShippedDate": boolean },
  "badge": boolean,
  "columns": [
    { "status": "planned", "label": "Planned", "items": Item[] },
    { "status": "in_progress", "label": "In progress", "items": Item[] },
    { "status": "shipped", "label": "Shipped", "items": Item[] }
  ],
  "updatedAt": ISO 8601 string
}
Item: { "id": string, "title": string, "descriptionHtml": string | null (sanitized HTML),
        "target": string | null, "tags": string[], "shippedAt": ISO 8601 string | null }

Cache headers on the API: Cache-Control: public, max-age=0, s-maxage=60, stale-while-revalidate=86400.
The hosted page for a roadmap is https://furyroadmap.fun/r/<slug>.