CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Marketing About, How It Works, and Use Cases pages #52

Merged
an.di merged 8 commits from adilallo/feature/AboutUseCasesPages into main 2026-05-21 05:09:15 +00:00
Conversation 0 Commits 8 Files Changed 281
+10020 -1081
an.di commented 2026-05-21 05:08:25 +00:00
Owner
Copy Link
Copy Source

Overview

Adds the marketing About, How it works, and Use cases experiences (index, detail, and completed-rule views) aligned with Figma, plus supporting components, copy, assets, and tests. Also fixes create-flow save progress after magic-link sign-in, lets users edit the document title on final review, and adds an API to duplicate a use-case template into a signed-in user’s draft.

Changes

Marketing routes

  • /about — About page with AboutHeader, stats, book CTA, quote, and related sections (messages/en/pages/about.json).
  • /how-it-works — Guide page with decorative shapes, TripleStep, PageHeader, and localized copy.
  • /use-cases — Index with case-study cards (Mutual Aid Colorado, Food Not Bombs Boulder, Boulder County Street Medics), org logos, group vectors, rule stack, and related articles.
  • /use-cases/[slug] — Detail pages per case study.
  • /use-cases/[slug]/rule — Read-only completed-rule view under (marketing-case-study) with duplicate-into-create CTA.
  • /learn — Updated layout and refreshed blog thumbnail SVGs (horizontal / vertical / section / tag variants).

Components & design system

  • New or extended: PageHeader, AboutHeader, TripleStep, TripleTextBlock, CaseStudy, Stat / Stats, Groups, Book, UseCasesOrgs, layout Accordion, Shapes, refactored ContentBanner (container/view split), enhanced QuoteBlock, Rule card, RelatedArticles, ContentThumbnailTemplate, ContentContainer.
  • Marketing chrome: navigationChromelessPath for case-study rule routes; footer/top nav tweaks.

Create flow & auth

  • Save progress bug — PostLoginDraftTransfer, magic-link request/verify routes, and draft hydration/payload building.
  • Final review — FinalReviewTitleEditModal, title chip presets, normalizePublishedDocumentForEdit, publish/draft payload updates.
  • CreateFlowTopNav — Expanded actions and tests.

API & data

  • POST /api/use-cases/[slug]/duplicate — Auth-required; clones synthetic completed-rule JSON into a user draft (DB required).
  • Prisma: PublishedDocument schema tweak + migration.
  • Lib helpers: useCaseCompletedRule, useCaseSyntheticPost, howItWorksSyntheticPost, useCaseTemplateDuplicate.

Content & assets

  • Blog: new/updated posts (how-chaos-concentrates-control, digital-mediation-and-the-death-of-nuance, avoiding-burnout-sustainability-in-the-ruins, etc.) with matching SVG assets under public/content/blog/.
  • Case-study and decorative SVGs under public/assets/.
  • Large message bundles: useCases.json, useCasesDetail.json, useCasesCompletedRules.json, metadata entries.
  • Docs: figma-component-registry.md, content-creation.md.

Tests & Storybook

  • Page tests: about (via home/nav), how-it-works, use-cases index/detail/completed-rule, learn.
  • Component/unit tests for new sections and create-flow paths; E2E touch-ups.
  • New/updated stories for CaseStudy, Stats, Groups, PageHeader, AboutHeader, TripleStep, Accordion, ContentBanner, etc.

Screenshots

Screenshot 2026-05-20 at 11.06.10 PM.png Screenshot 2026-05-20 at 11.06.26 PM.png Screenshot 2026-05-20 at 11.06.48 PM.png Screenshot 2026-05-20 at 11.07.12 PM.png

How to Test

  1. npm install (if needed), ensure Postgres + env per CONTRIBUTING.md for duplicate API and create-flow save.
  2. npm run dev and visit:
    • /about
    • /how-it-works
    • /use-cases
    • /use-cases/mutual-aid-colorado (and food-not-bombs, boulder-county-street-medics)
    • /use-cases/mutual-aid-colorado/rule (chromeless; duplicate CTA when signed in)
    • /learn — blog cards and thumbnails
  3. Create flow: sign in via magic link with draft in progress → confirm draft transfers and save progress persists; on final review, open title edit modal and publish.
  4. Signed in: Duplicate template from a use-case completed-rule page → lands in create flow with expected draft.
  5. Verification: 
    npx tsc --noEmit
npx vitest run
npx next build
  6. Optional: npm run storybook for new section stories; npm run e2e for critical journeys.

Notes

  • About book CTA uses a stub href: "#" until download URL is wired (messages/en/pages/about.json comment).
  • Use-case completed rules are synthetic JSON in messages, not live DB documents, until backend sync is fully enabled.
  • Duplicate API returns 503 when DATABASE_URL is unset (matches other API routes).
  • Removed legacy building-community-trust blog post and old Content_Thumbnail SVGs in favor of per-post blog assets.
## Overview Adds the marketing **About**, **How it works**, and **Use cases** experiences (index, detail, and completed-rule views) aligned with Figma, plus supporting components, copy, assets, and tests. Also fixes create-flow **save progress** after magic-link sign-in, lets users **edit the document title on final review**, and adds an API to **duplicate a use-case template** into a signed-in user’s draft. ## Changes ### Marketing routes - **`/about`** — About page with `AboutHeader`, stats, book CTA, quote, and related sections (`messages/en/pages/about.json`). - **`/how-it-works`** — Guide page with decorative shapes, `TripleStep`, `PageHeader`, and localized copy. - **`/use-cases`** — Index with case-study cards (Mutual Aid Colorado, Food Not Bombs Boulder, Boulder County Street Medics), org logos, group vectors, rule stack, and related articles. - **`/use-cases/[slug]`** — Detail pages per case study. - **`/use-cases/[slug]/rule`** — Read-only completed-rule view under `(marketing-case-study)` with duplicate-into-create CTA. - **`/learn`** — Updated layout and refreshed blog thumbnail SVGs (horizontal / vertical / section / tag variants). ### Components & design system - New or extended: `PageHeader`, `AboutHeader`, `TripleStep`, `TripleTextBlock`, `CaseStudy`, `Stat` / `Stats`, `Groups`, `Book`, `UseCasesOrgs`, layout `Accordion`, `Shapes`, refactored `ContentBanner` (container/view split), enhanced `QuoteBlock`, `Rule` card, `RelatedArticles`, `ContentThumbnailTemplate`, `ContentContainer`. - Marketing chrome: `navigationChromelessPath` for case-study rule routes; footer/top nav tweaks. ### Create flow & auth - **Save progress bug** — `PostLoginDraftTransfer`, magic-link request/verify routes, and draft hydration/payload building. - **Final review** — `FinalReviewTitleEditModal`, title chip presets, `normalizePublishedDocumentForEdit`, publish/draft payload updates. - **`CreateFlowTopNav`** — Expanded actions and tests. ### API & data - **`POST /api/use-cases/[slug]/duplicate`** — Auth-required; clones synthetic completed-rule JSON into a user draft (DB required). - Prisma: `PublishedDocument` schema tweak + migration. - Lib helpers: `useCaseCompletedRule`, `useCaseSyntheticPost`, `howItWorksSyntheticPost`, `useCaseTemplateDuplicate`. ### Content & assets - Blog: new/updated posts (`how-chaos-concentrates-control`, `digital-mediation-and-the-death-of-nuance`, `avoiding-burnout-sustainability-in-the-ruins`, etc.) with matching SVG assets under `public/content/blog/`. - Case-study and decorative SVGs under `public/assets/`. - Large message bundles: `useCases.json`, `useCasesDetail.json`, `useCasesCompletedRules.json`, metadata entries. - Docs: `figma-component-registry.md`, `content-creation.md`. ### Tests & Storybook - Page tests: about (via home/nav), how-it-works, use-cases index/detail/completed-rule, learn. - Component/unit tests for new sections and create-flow paths; E2E touch-ups. - New/updated stories for CaseStudy, Stats, Groups, PageHeader, AboutHeader, TripleStep, Accordion, ContentBanner, etc. ## Screenshots <img width="424" alt="Screenshot 2026-05-20 at 11.06.10 PM.png" src="attachments/97744709-0bbe-47e4-9cb6-055b2463cb5c"> <img width="424" alt="Screenshot 2026-05-20 at 11.06.26 PM.png" src="attachments/ea2fb630-7ee5-4e48-a51c-bfd7f8e87cf5"> <img width="424" alt="Screenshot 2026-05-20 at 11.06.48 PM.png" src="attachments/53a6ee24-40f6-496a-bdef-e13bf8b435ad"> <img width="424" alt="Screenshot 2026-05-20 at 11.07.12 PM.png" src="attachments/6fbaf94a-668e-4144-a53e-1ab85efe6483"> ## How to Test 1. `npm install` (if needed), ensure Postgres + env per `CONTRIBUTING.md` for duplicate API and create-flow save. 2. `npm run dev` and visit: - `/about` - `/how-it-works` - `/use-cases` - `/use-cases/mutual-aid-colorado` (and `food-not-bombs`, `boulder-county-street-medics`) - `/use-cases/mutual-aid-colorado/rule` (chromeless; duplicate CTA when signed in) - `/learn` — blog cards and thumbnails 3. Create flow: sign in via magic link with draft in progress → confirm draft transfers and **save progress** persists; on final review, open title edit modal and publish. 4. Signed in: **Duplicate template** from a use-case completed-rule page → lands in create flow with expected draft. 5. Verification: ```bash npx tsc --noEmit npx vitest run npx next build ``` 6. Optional: `npm run storybook` for new section stories; `npm run e2e` for critical journeys. ## Notes - About **book** CTA uses a stub `href: "#"` until download URL is wired (`messages/en/pages/about.json` comment). - Use-case completed rules are **synthetic JSON** in messages, not live DB documents, until backend sync is fully enabled. - Duplicate API returns **503** when `DATABASE_URL` is unset (matches other API routes). - Removed legacy `building-community-trust` blog post and old `Content_Thumbnail` SVGs in favor of per-post blog assets.
Screenshot 2026-05-20 at 11.06.10 PM.png
149 KiB
Screenshot 2026-05-20 at 11.06.26 PM.png
117 KiB
Screenshot 2026-05-20 at 11.06.48 PM.png
248 KiB
Screenshot 2026-05-20 at 11.07.12 PM.png
197 KiB
an.di self-assigned this 2026-05-21 05:08:25 +00:00
an.di added 8 commits 2026-05-21 05:08:26 +00:00
Implement about page b6b9b63608
Implement use cases page 450da4d8ab
Implement how it works page 40ce5064d6
Create use cases pages 7c46cbd87b
Refine use cases rule examples 2f2b5d0dc2
Fix save progress bug 7ee6282c1a
Update learn page 1688ac85c9
Learn page svgs updated ea346abad8
an.di merged commit f3b73527fc into main 2026-05-21 05:09:15 +00:00
an.di deleted branch adilallo/feature/AboutUseCasesPages 2026-05-21 05:09:15 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
an.di (Andy DiLallo) ntnsndr (Nathan Schneider)
No Assignees an.di
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: CommunityRule/community-rule#52
Delete Branch "adilallo/feature/AboutUseCasesPages"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?