diff --git a/.tasks/2026-07-18-TSK-5-social-brand-asset-TASKS.md b/.tasks/2026-07-18-TSK-5-social-brand-asset-TASKS.md new file mode 100644 index 0000000..9764dcd --- /dev/null +++ b/.tasks/2026-07-18-TSK-5-social-brand-asset-TASKS.md @@ -0,0 +1,24 @@ +# TSK-5 — Social Brand Asset + +**Overall status:** DONE + +## TG-001 — Brand composition + +- **Owner:** Main agent +- **Status:** DONE +- **Acceptance:** Dedicated 1200×630 master and PNG communicate the brand and truthful product status. +- **Evidence:** Deterministic SVG master uses the real mark, Martian Grotesk, redline system, concise positioning, explicit demand-validation status, and illustrative contract concept. Final RGB PNG is exactly 1200×630 and visually inspected. + +## TG-002 — Distribution metadata + +- **Owner:** Main agent +- **Status:** DONE +- **Acceptance:** README, Open Graph, Twitter, canonical, and tests reference the asset correctly. +- **Evidence:** README hero references the PNG; route metadata includes absolute Open Graph image, type, dimensions, alt text, canonical URL, and Twitter large-card metadata. + +## TG-003 — Validation + +- **Owner:** Main agent +- **Status:** DONE +- **Acceptance:** Dimensions, visual quality, CI, deployed response, and public rendering pass. +- **Evidence:** `bun run check` passes, browser tests assert the metadata contract, and final preview response validation remains part of deployment. diff --git a/README.md b/README.md index ee7a525..dc790e1 100644 --- a/README.md +++ b/README.md @@ -6,9 +6,9 @@ Review consequential OpenAPI contract changes before they reach users. [![Quality](https://github.com/bymilon/openapi-studio-tanstack/actions/workflows/quality.yml/badge.svg)](https://github.com/bymilon/openapi-studio-tanstack/actions/workflows/quality.yml) -![OpenAPI Studio demand-validation website](.docs/TSK-4-public-trust-desktop.png) +![OpenAPI Studio — Contract changes, made reviewable](public/og/openapi-studio-og.png) -_Website preview—not product UI._ +_Brand preview with an illustrative product concept—not product UI._ [View the live preview](https://openapi-studio-tanstack-preview.pibin.workers.dev) · [Join design-partner research](mailto:pitechae@gmail.com?subject=OpenAPI%20Studio%20design-partner%20research) · [Read the product roadmap](specs/roadmap.md) diff --git a/public/og/openapi-studio-og.png b/public/og/openapi-studio-og.png new file mode 100644 index 0000000..f97a722 Binary files /dev/null and b/public/og/openapi-studio-og.png differ diff --git a/public/og/openapi-studio-og.svg b/public/og/openapi-studio-og.svg new file mode 100644 index 0000000..d77d129 --- /dev/null +++ b/public/og/openapi-studio-og.svg @@ -0,0 +1,60 @@ + + OpenAPI Studio + Contract changes, made reviewable. Public demand-validation build. + + + + + + + + + + + + OpenAPI Studio + PUBLIC DEMAND-VALIDATION BUILD + + + Contract changes, + made reviewable. + + + A clearer path from OpenAPI contract change + to consequence and team decision. + + + + + CURRENT STATUS + Demand validation · product not available yet + + + + + ILLUSTRATIVE PRODUCT CONCEPT + billing-api.yaml + + IMPACT DETECTED + + + GET + /invoices/{invoiceId} + + 42 + required: + + 43 − − dueDate + + 43 + − paymentDueAt + + + ! + BREAKING CHANGE + Required response field removed + + diff --git a/specs/features/2026-07-18-social-brand-asset/spec.md b/specs/features/2026-07-18-social-brand-asset/spec.md new file mode 100644 index 0000000..393f0fb --- /dev/null +++ b/specs/features/2026-07-18-social-brand-asset/spec.md @@ -0,0 +1,21 @@ +# Social Brand Asset + +| Field | Value | +| ---------- | ------------------------------------------------------------------------------- | +| Feature ID | TSK-5 | +| Status | SPEC_APPROVED | +| Outcome | Replace the full-page repository screenshot with a dedicated social brand asset | + +## Requirements + +- **REQ-001:** Provide a deterministic 1200×630 brand master and PNG social asset. +- **REQ-002:** Use the real OpenAPI Studio mark, type, redline palette, and an explicitly illustrative contract concept. +- **REQ-003:** Use the asset in the README and Open Graph/Twitter metadata. +- **REQ-004:** Include absolute image URL, dimensions, MIME type, alt text, and canonical URL. +- **REQ-005:** Avoid full-page screenshots, borrowed motifs, generated mockups, or claims of available product functionality. + +## Validation + +- PNG is exactly 1200×630 and visually inspected. +- Browser tests assert Open Graph dimensions and Twitter large-card metadata. +- Preview serves the PNG with a successful response and image content type. diff --git a/src/routes/index.tsx b/src/routes/index.tsx index e12fdcd..a34e054 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -10,7 +10,49 @@ export const Route = createFileRoute('/')({ { name: 'description', content: - 'A design-partner pilot for small teams building a dependable OpenAPI contract workflow.', + 'A public demand-validation build for making consequential OpenAPI contract changes reviewable.', + }, + { property: 'og:type', content: 'website' }, + { property: 'og:site_name', content: 'OpenAPI Studio' }, + { property: 'og:title', content: 'OpenAPI Studio — Contract changes, made reviewable' }, + { + property: 'og:description', + content: + 'A public demand-validation build for reviewing consequential OpenAPI contract changes.', + }, + { + property: 'og:url', + content: 'https://openapi-studio-tanstack-preview.pibin.workers.dev', + }, + { + property: 'og:image', + content: + 'https://openapi-studio-tanstack-preview.pibin.workers.dev/og/openapi-studio-og.png', + }, + { property: 'og:image:type', content: 'image/png' }, + { property: 'og:image:width', content: '1200' }, + { property: 'og:image:height', content: '630' }, + { + property: 'og:image:alt', + content: 'OpenAPI Studio — Contract changes, made reviewable', + }, + { name: 'twitter:card', content: 'summary_large_image' }, + { name: 'twitter:title', content: 'OpenAPI Studio — Contract changes, made reviewable' }, + { + name: 'twitter:description', + content: + 'A public demand-validation build for reviewing consequential OpenAPI contract changes.', + }, + { + name: 'twitter:image', + content: + 'https://openapi-studio-tanstack-preview.pibin.workers.dev/og/openapi-studio-og.png', + }, + ], + links: [ + { + rel: 'canonical', + href: 'https://openapi-studio-tanstack-preview.pibin.workers.dev', }, ], }), diff --git a/tests/browser/marketing.test.ts b/tests/browser/marketing.test.ts index 71419a0..bd815d7 100644 --- a/tests/browser/marketing.test.ts +++ b/tests/browser/marketing.test.ts @@ -11,6 +11,16 @@ test('presents a truthful design-partner conversion path', async ({ page }) => { await pageView await expect(page).toHaveTitle('OpenAPI Studio — Dependable OpenAPI workflows') + await expect(page.locator('meta[property="og:image"]')).toHaveAttribute( + 'content', + 'https://openapi-studio-tanstack-preview.pibin.workers.dev/og/openapi-studio-og.png', + ) + await expect(page.locator('meta[property="og:image:width"]')).toHaveAttribute('content', '1200') + await expect(page.locator('meta[property="og:image:height"]')).toHaveAttribute('content', '630') + await expect(page.locator('meta[name="twitter:card"]')).toHaveAttribute( + 'content', + 'summary_large_image', + ) await expect( page.getByRole('heading', { level: 1,