ContentForge Architecture — CampaignForge Spec Dashboard

1

Architecture Decisions

5 contested decisions with kill criteria. Each evaluated like a $5K/day campaign test.

Framework

DECIDED

Astro + Svelte Islands
Zero JS on articles. ~5KB per tool island. Cloudflare Pages native. Svelte knowledge reuse.

Next.js -- 80-120KB React runtime on every page. No SSR on CF Pages.

Plain HTML -- doesn't scale past 50 pages. No component model.

Content Source

PHASED

Phase 1: Astro Content Collections
MDX + Zod schemas. Git-versioned. Zero external deps. Type-safe.

Phase 2+: Directus
GUI editing, roles, API. When team grows or 100+ pages/vertical.

Tool State Management

DECIDED

Svelte 5 Runes
$state for wizard steps. $derived auto-computes formulas. ~5.4KB runtime.

Vanilla JS -- manual DOM updates, untestable, 3,200 line monolith.

CSS Architecture

DECIDED

Tailwind CSS v4
@theme tokens. Multi-brand via CSS custom properties. Tree-shaken.

Custom CSS -- no multi-brand theming. Manual duplication.

Image Optimization

DECIDED

Astro <Image> -- build-time AVIF/WebP/srcset. Zero runtime cost. No paid Cloudflare plan needed.

2

Islands Architecture -- Two Page Types

Article pages ship zero JavaScript. Tool pages hydrate only the interactive component. Everything else is static HTML.

Article Page (60-70% of pages)

0 KB JavaScript -- Lighthouse 100

Header + Navstatic HTML

Hero + Breadcrumbstatic HTML

Key Takeawaysstatic HTML

Article Body (2,500 words)MDX → static

Tables, Callouts, TipsAstro components

Mid-Article CTAstatic link

Tool Page (30-40% of pages)

~5-8 KB JavaScript -- Lighthouse 95+

Header + Navstatic HTML

Hero + Badgesstatic HTML

TOOL ISLAND (Svelte)client:load

Multi-Step Wizard$state steps

Calculator Logic$derived

Result Cards + CTAreactive

Email Captureclient:visible

Editorial Content (1,500 words)static -- for SEO

Sources + Relatedstatic HTML

Footerstatic HTML

Static HTML (0 KB)

Svelte Island (~5 KB)

SEO Content (0 KB)

3

Component Architecture -- From 3,200-Line Monolith to Composable

Each tool: ~150 lines Svelte (UI) + ~200 lines TypeScript (logic, 100% tested). Shared components eliminate duplication.

src/components/tools/
├── shared/ -- reusable across all tools, all verticals
│   ├── StepWizard.svelte -- multi-step form shell (progress, nav, validation)
│   ├── ResultCard.svelte -- standardized result presentation
│   ├── InputField.svelte -- form input + mobile optimization + validation
│   ├── ButtonGroup.svelte -- single-select cards (44px+ tap targets)
│   ├── ProgressBar.svelte -- horizontal progress indicator
│   ├── MethodologyDisclosure.svelte -- "How we calculate" expandable
│   ├── SourceCitation.svelte -- data source attribution
│   ├── EmailCapture.svelte -- "Email yourself this estimate"
│   └── offer-routing.ts -- CTA URL builder (portal, tracking, A/B)
├── edu/ -- EDU vertical tools
│   ├── EFCCalculator.svelte -- ~150 lines (UI only)
│   ├── efc-calculator.logic.ts -- ~200 lines (pure math, 100% tested)
│   ├── efc-calculator.data.ts -- brackets, rates, state grants
│   ├── FinancialAidQuiz.svelte
│   ├── ScholarshipFinder.svelte
│   └── ... (7 more tools)
└── auto-insurance/ -- future vertical
    └── CoverageChecker.svelte

4

SEO & E-E-A-T Strategy -- YMYL Compliance

Education financial aid = YMYL (Your Money Your Life). Google holds this content to the highest standard.

📝

Schema Markup

Article → Article schema
Tool → WebApplication
FAQ → FAQPage
Breadcrumb → BreadcrumbList

🔗

Internal Linking

Hub-and-spoke model
4 pillar hubs
5-7 spokes per hub
Tools as secondary hubs

🔬

E-E-A-T Pages

/about/
/editorial-policy/
/methodology/
/contact/

📅

Freshness

FAFSA: annually
Pell amounts: Jan
Tools: annually
Articles: semi-annually

🗺️

URL Structure

/tools/efc-calculator/
/financial-aid/fafsa-guide/
/online-degrees/best-for-adults/
Category nesting

📊

Content Depth

Pillar: 3,000-5,000 words
Articles: 1,500-2,500
Tool editorial: 1,500-2,500
40-50 pages for authority

🗃️

Sitemaps

Separate: articles + tools
lastmod only (no priority)
Accurate timestamps
GSC submitted

📱

Core Web Vitals

LCP < 1.5s
INP < 100ms
CLS < 0.05
TTFB < 200ms

5

Multi-Vertical System -- One Codebase, Many Brands

Shared components + design tokens. Vertical-specific: colors, fonts, data connectors, offer routing, tracking IDs.

Education

degreesources.com
10 tools, 31 pages
LIVE

Auto Insurance

TBD domain
Coverage checkers, rate comparisons
Phase 5+

Medicare

TBD domain
Plan finders, enrollment tools
Phase 5+

Solar

TBD domain
Savings calculators, incentive finders
Phase 5+

Financial

financialsharks.com
Tax, crypto, exchanges
Phase 5+

Multi-Vertical Hub

lifenexus.com
Cross-vertical portal
Future

SHARED (all verticals)

StepWizard, ResultCard, InputField
BaseLayout, ArticleLayout, ToolLayout
Nav, Footer, Breadcrumb, CTACard
Spacing, radius, shadows, font sizes
Event taxonomy, Zaraz integration
Zod content schemas, build pipeline

PER-VERTICAL (brand-specific)

Colors, fonts (CSS custom properties)
Logo, favicon, OG images
Calculator logic + data sources
Offer routing + partner URLs
Pixel IDs, publisher IDs, tracking
Category taxonomy, content

6

Migration Plan -- 5-6 Weeks, Tool-by-Tool

Old site is the rollback. Each tool A/B tested against current before full migration. Zero SEO equity loss.

Week 1

Astro scaffold + Tailwind + Svelte integration

Design tokens migrated from site.css → @theme

Base layouts recreated (header, footer, nav)

Week 1-2

Article JSON → MDX frontmatter conversion

Tool JSON → MDX frontmatter + component refs

Visual comparison: old vs new (pixel match)

Week 2-4

EFC Calculator → Svelte (highest traffic)

Financial Aid Quiz → Svelte (primary funnel)

Scholarship Finder → Svelte (search pattern)

Remaining 7 tools → Svelte (parallel)

Week 3-4

Schema markup (WebApplication, Article, FAQ)

E-E-A-T pages (/about, /editorial-policy, /methodology)

Sitemaps + breadcrumbs + GSC submission

Week 4-5

Event taxonomy via Zaraz

Meta CAPI event mapping

GrowthBook first A/B test (CTA text)

Week 5-6

Lighthouse audit (95+ all pages)

Playwright E2E suite (all 10 tools)

A11y audit (zero critical violations)

GO LIVE -- switch CF Pages build to Astro

7

ROI Analysis -- Break-Even at 6-8 Weeks

At $500/day ad spend across platforms, the migration pays for itself through cost reduction and conversion improvement.

CPM Reduction (Lighthouse → Meta Landing Page Score)

-$25-50/day

Better Core Web Vitals → higher Meta HiVA → 5-10% lower CPMs. Astro's 0 JS articles + fast tool pages directly improve landing page quality score.

CPL Reduction (CAPI Tool Events)

-$50-75/day

Feeding tool_complete events to Meta CAPI gives the algorithm a mid-funnel signal to optimize against. 10-15% CPL improvement estimated.

Organic Traffic (SEO Authority, 6-12 mo)

~$100-200/day equiv.

E-E-A-T pages + schema + content freshness → organic rankings for YMYL keywords. Organic traffic = free leads that reduce paid dependency.

Conversion Rate (A/B Testing)

+5-20% CR

GrowthBook A/B testing on CTAs, form layouts, and result presentation. 10% improvement on $500/day spend = $50/day in recovered revenue.