@dreamtree-org/landing-kit 0.5.0 → 0.7.0

package/MIGRATION.md

@@ -94,3 +94,27 @@ The built-in `brands` / `getBrand(id)` registry is deprecated: it warns once and
 2. Replace `getBrand('billpro')` with `toLandingBrand(require('./dreamtree.brand.json'), { headline, pitch, points, category })`. The copy that used to live in `brands.js` moves into your code.
 3. Run `npx @dreamtree-org/twreact-ui brand build --out app/brand.css` so the app's twreact-ui components use the same colours.
 
+## 0.6.0 — tenant pages (additive)
+
+Nothing changes for product landing pages. New, opt-in:
+
+- `@dreamtree-org/landing-kit/schema` (CommonJS + ESM, no React): `SECTION_TYPES`, `validatePage`,
+  `validateTheme`, `themeVars`, `sanitizeRichText`, `brandPalette`, `contrastRatio`, presets and fonts.
+- `TenantPage`, `HeroSlider`, `NamedIcon` from the main entry, styled by `styles.css` (`.dt-lp-tenant`).
+- `.dt-lp-tenant` adds `--dt-brand-contrast`, `--dt-brand-accent-contrast` and `--dt-lp-font-heading`;
+  `brandStyle()` is unchanged.
+- Apps that stored per-tenant brand colours elsewhere can move them into a theme with
+  `validateTheme({ preset: 'custom', primary, accent })`.
+
+
+## 0.7.0 — serve-time page transforms (additive)
+
+Nothing changes unless you opt in:
+
+- `landingRoutes(app, { transformPage })`: `(body, { req, route, file, kind }) => string | null`
+  (may be async) runs on every prerendered page (`kind: 'page'`) and crawler file (`'crawler'`)
+  before the origin is filled in. Return the rewritten body, or null to serve the prerendered one;
+  a throw is logged and also serves the prerendered body. It runs per request, so cache inside it.
+- `fillPage(template, page)` from `/server`: the template fill `prerenderPages` does, as a string.
+  Keep a copy of the template (prerenderPages overwrites `landing.html`) and an SSR bundle to
+  re-render pages with live data, e.g. CMS-driven pricing.

package/README.md

@@ -108,6 +108,49 @@ Maps the product's `dreamtree.brand.json` (create it with `npx @dreamtree-org/tw
 | `createDemoIsland(props)` | mounts `DemoDialog` on demand for un-hydrated pages; returns `{ openDemo }` |
 | `BookDemoButton`, `BrandLockup`, `Section`, `SectionIntro`, `TextLink`, `SmartLink` | building blocks |
 
+### Tenant pages (0.6.0): a store's own landing page as data
+
+For multi-tenant apps where **each customer edits their own page** (a store front, a clinic,
+a franchise). The page is a JSON document; the app stores it, the package validates and renders it.
+
+```js
+// Server (CommonJS is fine): validate before storing
+const { validatePage, validateTheme, sanitizeRichText } = require('@dreamtree-org/landing-kit/schema');
+const page = validatePage(req.body.page);      // { ok, errors: [{ path, message }], page }
+const theme = validateTheme(req.body.theme);   // { ok, errors, warnings, theme }
+if (!page.ok || !theme.ok) return res.status(422).json({ errors: [...page.errors, ...theme.errors] });
+```
+
+```jsx
+// Browser: render
+import { TenantPage } from '@dreamtree-org/landing-kit';
+import '@dreamtree-org/landing-kit/styles.css';
+
+<TenantPage
+  page={doc} theme={theme} storeName="TechNext"
+  slots={{ featured: <FeaturedProducts />, categories: (props) => <CategoryTiles title={props.title} /> }}
+  resolveMedia={(ref, variant) => `/api/public-media/${ref.media_id}`}
+  linkComponent={RouterLink}
+  onSubscribe={({ email, consent }) => api.subscribe(email, consent)}
+/>
+```
+
+- **Document:** `{ version: 1, sections: [{ id, type, enabled, props }] }`, at most 20 sections, any order, a type may repeat.
+- **Section types** (`SECTION_TYPES`, each a list of typed fields a builder can turn into a form):
+  `hero_slider`, `featured`†, `categories`†, `promo_banner`, `trust_badges`, `cta_cards`, `testimonials`,
+  `faq`, `rich_text`, `usp_strip`, `brand_strip`, `newsletter`, `gallery`. † rendered from the app's `slots`.
+- **Safe by construction:** links must be http(s), `mailto:`, `tel:`, `/path` or `#fragment`; icons are names
+  (`ICON_NAMES`, drawn from the package's own SVGs); images are `{ media_id }` refs the app resolves;
+  rich text keeps an allowlist (`sanitizeRichText`) on save **and** on render.
+- **Theme:** `{ preset, primary, accent, font, radius, mode, logo, favicon }`. `themeVars(theme)` returns the
+  CSS variables for the page root plus `palette.primary` / `palette.accent` (50…950 from one colour, the
+  colour itself at 600) to map onto the app's own tokens. `validateTheme` warns when button text or links
+  would fall under WCAG contrast. Six `THEME_PRESETS` and six `FONT_PAIRS` (with the stylesheet to load).
+- **HeroSlider:** swipe, arrow keys, always-visible 44px controls, pause/play; autoplay stops on hover,
+  focus and `prefers-reduced-motion`; the first slide's heading is the page's only `h1`.
+- `newSection(type)` / `sectionDefaults(type)` start a section with valid defaults; `defaultPage({ name, tagline })`
+  is a neutral starting page.
+
 ### `<AuthShell>` & `@dreamtree-org/landing-kit/auth`
 
 The shared auth frame for login, signup, password reset, consent and platform-admin sign-in (`desktop [ brand panel 40% | form card ]`, `mobile [ logo · form card · footer · legal links ]`). Import from `@dreamtree-org/landing-kit` or the lightweight `@dreamtree-org/landing-kit/auth` subpath (with `@dreamtree-org/landing-kit/auth.css` or `styles.css`).
@@ -223,7 +266,8 @@ to emit a graph without URLs. No ratings, reviews or prices are ever generated;
 
 | Function | Meaning |
 |---|---|
-| `landingRoutes(app, { dist, isPublicHost, hasSession, redirects, onSession, onPrivateHost, trailingSlash, rawFiles, manifest, cacheControl })` | serves `/` (visitors only, `Vary: Cookie`), every page in the manifest (default `landing-pages.json`; its paths are relative to its own directory), robots/sitemap/llms with the origin filled in, verification meta tags from env; 404s the raw files (`rawFiles: 'redirect'` 301s them to their page instead); `/x/` → 301 `/x` (`trailingSlash: 'serve'` answers both); `isPublicHost` may be async; a non-public host gets `Disallow: /` and, at `/`, `next()` or the app shell (`onPrivateHost: 'app-shell'`) |
+| `landingRoutes(app, { dist, isPublicHost, hasSession, redirects, onSession, onPrivateHost, trailingSlash, rawFiles, manifest, cacheControl, transformPage })` | serves `/` (visitors only, `Vary: Cookie`), every page in the manifest (default `landing-pages.json`; its paths are relative to its own directory), robots/sitemap/llms with the origin filled in, verification meta tags from env; 404s the raw files (`rawFiles: 'redirect'` 301s them to their page instead); `/x/` → 301 `/x` (`trailingSlash: 'serve'` answers both); `isPublicHost` may be async; a non-public host gets `Disallow: /` and, at `/`, `next()` or the app shell (`onPrivateHost: 'app-shell'`); `transformPage(body, { req, route, file, kind })` may rewrite a page or crawler file per request (e.g. live prices) and falls back to the prerendered body on null or a throw |
+| `fillPage(template, page)` | one page poured into the template, as a string: what `prerenderPages` writes. Pair it with `transformPage` to re-render a page with live data |
 | `prerenderPages({ dist, pages, files, homeFile, pagesDir, manifest })` | build step: fills `%TITLE% %DESCRIPTION% %PATH% %JSONLD% %HEAD% <!--landing-->` per page, writes `landing.html`, `landing-pages/…`, the manifest and crawler files; throws on an unfilled slot before writing anything |
 | `sessionCheck({ cookie: 'JWT_TOKEN', bearer, verify })` | `hasSession(req)` from your own JWT check |
 | `siteUrl(req)` · `verificationTags(env)` · `readCookie` · `fillSite` | helpers |