Hubs (Site Builder)

Overview

A Hub is a customizable website/digital presence platform. It’s the largest module in the codebase (~150+ files) and includes a visual block editor, commerce capabilities, team management, analytics, and theming.

Module path: src/lib/modules/hubs/ Routes: /hubs, /hubs/new, /hubs/[hubId]/*

What is a Hub?

Each hub has:

• A unique handle (e.g., @john-smith)
• Customizable branding (logo, cover, colors)
• Multiple pages with visual blocks
• Commerce capabilities (services, products, bookings)
• Team collaboration with role-based access
• Analytics tracking

Hub Creation (Wizard)

Three-step wizard at /hubs/new:

1. Brand Setup - Handle, display name, favicon, cover, theme, contact info, social links
2. Apps Selection - Enable: Portfolio, Services, Store, Bookings, Contact
3. Content - Initial content for selected apps (optional)

Store: wizardController (stores/wizard-manager.svelte.ts) Service: HubService.createHub() (services/hub-service.ts)

Visual Editor (Block System)

The page builder at /hubs/[hubId]/builder uses a block-based visual editor:

Block Types

Category	Blocks
Hero	hero.with-image-reviews, hero.carousel
Features	feature-image-icon, feature-steps-background
Gallery	gallery-grid, gallery-masonry
Testimonials	testimonials-carousel, testimonials-quote-style
FAQ	faq-centered-cards
Contact	contact-centered, contact-with-form
Forms	form-contact-simple, form-newsletter-signup
Pricing	pricing-cards-toggle
Footer	footer-centered-socials
Store	store-product-grid

Block Instance

interface BlockInstance {
  id: string;              // UUID
  type: string;            // e.g., "hero.with-image-reviews"
  version: number;
  props: Record<string, unknown>; // Editable content
  meta?: Record<string, unknown>; // Builder-only data
}

Editor Components

• VisualEditor.svelte - Main editor canvas
• BlockRenderer.svelte - Block rendering
• BlockItem.svelte - Individual block UI
• BlockEditorDialog.svelte - Block property editor
• DropZone.svelte - Drag-drop targets
• sidebar-left.svelte - Block catalog
• sidebar-right.svelte - Block properties inspector

Commerce Features

Services

• Title, description, category, pricing
• Multiple package tiers (basic/standard/premium)
• Delivery time, revisions, deliverables
• FAQ, media, requirements

Products

• Product editor with variants
• Pricing and media management
• Stripe product integration

Bookings

• Availability editor
• Booking policies
• Notification settings

Portfolio

• Showcase work and case studies
• Media galleries

Hub Data Model

interface HubConfig {
  id: string;
  handle: string;          // Unique handle
  name: string;
  status: 'active' | 'suspended' | 'archived';
  isPublished: boolean;
  identity: Identity;      // displayName, tagline, contact, social
  branding: Branding;      // logo, favicon, cover
  theme: ThemeTokens;      // colors, typography, radius
  navigation: NavItem[];   // Primary and footer menus
  pages: Page[];           // Visual pages with blocks
  apps: InstalledApp[];    // Enabled features
  commerce: Commerce;      // services, products, bundles, bookings
  portfolio: PortfolioItem[];
  contact: ContactConfig;
  seo: SiteSEO;
  domain: DomainConfig;
  payments: PaymentsConfig;
  integrations: Integrations; // GA4, Plausible, Zapier
}

Firestore Structure

hubs/{hubId}                    # HubConfig document
├── folders/{folderId}          # Doc folders
├── documents/{docId}           # Docs/pages
├── members/{userId}            # Team members
├── invitations/{invitationId}  # Invites
├── apps/
│   ├── services/               # Service items
│   ├── store/                  # Products
│   ├── portfolio/              # Portfolio items
│   └── bookings/               # Booking config
└── media/{assetId}             # Media files

State Management

Store	Purpose
hubsManager	Hub CRUD, pages, blocks, docs, drag-drop
wizardController	Hub creation wizard state
teamManager	Team members, invitations, permissions
analyticsManager	Hub visitor analytics
appsManager	Services, products, portfolio, bookings
themeManager	Theme presets, colors, typography
contentManager	App content editing dialogs
hubsConfigManager	Plan-based hub limits
hubCompletion	Marketplace readiness percentage

Team Management

Roles: owner, editor, viewer, billing

Features:

• Invite members by email
• Role-based access control
• Member card display
• Pending invitation management

Analytics

Tracks hub visitors with:

• Page views and traffic sources
• Browser and device breakdown
• Revenue charts with time range toggle
• Referral traffic analysis

Collection: analytics_events

Theme System

• Pre-built theme presets
• Color scheme customization
• Typography settings
• Radius and spacing tokens
• Live preview in editor

Hub Routes

/hubs                    # Hub list
/hubs/new                # Creation wizard
/hubs/[hubId]            # Hub dashboard
/hubs/[hubId]/builder    # Visual page editor
/hubs/[hubId]/pages      # Page management
/hubs/[hubId]/apps       # App marketplace
/hubs/[hubId]/media      # Media library
/hubs/[hubId]/publish    # Publishing
/hubs/[hubId]/history    # Version history
/hubs/[hubId]/team       # Team management
/hubs/[hubId]/blogs      # Hub blog
/hubs/[hubId]/docs       # Hub documentation
/hubs/[hubId]/settings/* # Brand, theme, domain, payments, etc.