Cycles
Design · c9

WWW Component Extraction + content→prose Rename

archivedcreated 2026-09-11· last activity 2026-09-11

Why

The content/ directory in the layer collides with @nuxt/content's namespace — it strips the directory prefix from auto-imports, forcing us to bake Content into every filename as a workaround. Meanwhile, 6+ reusable marketing components remain local to www.qpoint.io that belong in the shared layer.

Objective

  1. Rename content/prose/ in the layer to fix the namespace collision
  2. Extract Hero, Quote, Point, PointSimple, FAQ, BlogAuthor, BlogCard from www into the layer
  3. Document all new components in the design site

Scope

  • Layer: rename components/content/components/prose/, add 7 new components + IconQuote
  • www: update ~130 MDC references, delete 8 local component files, update Vue template references
  • design: rename 5 demo files, update component-registry.ts (group + 12 entries), add 8 new demos, add 3 new patterns
  • app: unaffected (no content/ component usage)

Key Changes

  • ContentSectionHeadlineProseSectionHeadline (and all 5 content→prose renames)
  • New layer components: ProseHero, ProseQuote, ProsePoint, ProsePointSimple, ProseFAQ, ProseBlogAuthor, ProseBlogCard
  • New icon: IconQuote (render-function component, inlined SVG path)
  • ProseBlogCard takes an author prop instead of fetching internally via queryCollection
  • point/Big.vue in www deleted — it was a duplicate of ProseBigPoint
  • 3 new patterns documented: Hero Section, Alternating Sections, FAQ Grid

Outcome

Layer prose group now has 12 components. www has zero local copies of these components. Design site documents all of them with interactive demos and copyable pattern code.

Visual record

4 captures — heroes, page slices, and full-page renders. Click to view.

c9 hero
c9 slice
c9 slice
c9 full

Artifacts

  • initial-prompt.md
  • initial-prompt.md

Qpoint Brand Style Guide