Key Features

**Referenced Files in This Document** - [README.md](file://README.md) - [package.json](file://package.json) - [.eleventy.js](file://.eleventy.js) - [src/admin/config.yml](file://src/admin/config.yml) - [src/_data/site.json](file://src/_data/site.json) - [src/assets/js/main.js](file://src/assets/js/main.js) - [src/assets/js/modules/carousel-system.js](file://src/assets/js/modules/carousel-system.js) - [src/assets/js/modules/search-functionality.js](file://src/assets/js/modules/search-functionality.js) - [src/assets/js/modules/theme-toggling.js](file://src/assets/js/modules/theme-toggling.js) - [src/assets/js/modules/iaa-alliance-theme-toggle.js](file://src/assets/js/modules/iaa-alliance-theme-toggle.js) - [src/assets/js/modules/material-design-3-main-theme-toggle.js](file://src/assets/js/modules/material-design-3-main-theme-toggle.js) - [src/assets/css/modules/25-responsive-tablet-max-width-1024px.css](file://src/assets/css/modules/25-responsive-tablet-max-width-1024px.css) - [src/assets/css/modules/26-responsive-mobile-max-width-900px.css](file://src/assets/css/modules/26-responsive-mobile-max-width-900px.css) - [src/assets/css/modules/27-responsive-small-mobile-max-width-600px.css](file://src/assets/css/modules/27-responsive-small-mobile-max-width-600px.css) - [src/assets/css/modules/28-responsive-extra-small-max-width-480px.css](file://src/assets/css/modules/28-responsive-extra-small-max-width-480px.css)

Table of Contents

  1. Introduction
  2. Project Structure
  3. Core Components
  4. Architecture Overview
  5. Detailed Component Analysis
  6. Dependency Analysis
  7. Performance Considerations
  8. Troubleshooting Guide
  9. Conclusion

Introduction

This document explains the platform’s key features and capabilities, focusing on:

  • Dual-content system for public website visitors and Invest Australia Alliance (IAA) members
  • Interactive carousels for capabilities, testimonials, and news
  • Member authentication portal with magic link authentication and session management
  • Content management system enabling editors to create and manage news articles, case studies, team profiles, and knowledge base content
  • Responsive design system with four breakpoints and a mobile-first approach
  • Search powered by Pagefind, theme switching capabilities, and custom animations
  • Integrations with external services such as ConvertKit for newsletters and Google Sheets for live polling data

Project Structure

The platform is an Eleventy-based static site with a Cloudflare Worker runtime for member authentication and APIs. The build pipeline integrates Pagefind for search indexing. Sveltia CMS provides a Git-backed content editing experience at /admin/.

graph TB
subgraph "Build and Runtime"
ELE["Eleventy (.eleventy.js)"]
PF["Pagefind (package.json build script)"]
WRK["Cloudflare Worker (worker.js)"]
end
subgraph "Source"
SRC["src/"]
DATA["_data/*.json"]
INC["_includes/*.njk"]
MOD["modules/*.js"]
CSS["css/modules/*.css"]
CMS["admin/config.yml"]
end
SRC --> ELE
DATA --> ELE
INC --> ELE
MOD --> ELE
CSS --> ELE
CMS --> ELE
ELE --> PF
PF --> WRK

Diagram sources

  • [.eleventy.js:1-283](file://.eleventy.js#L1-L283)
  • [package.json:1-32](file://package.json#L1-L32)
  • [src/admin/config.yml:1-774](file://src/admin/config.yml#L1-L774)

Section sources

  • [README.md:80-156](file://README.md#L80-L156)
  • [.eleventy.js:1-283](file://.eleventy.js#L1-L283)
  • [package.json:1-32](file://package.json#L1-L32)

Core Components

  • Dual-content system: Public pages (e.g., home, services, news, team) and IAA member-only pages (/alliance/members/* and /alliance/members/knowledge/*) served from the same static site with runtime gating.
  • Interactive carousels: Capabilities, testimonials, and news carousels with keyboard, touch, and mouse support.
  • Member authentication: Magic link email authentication via Resend, session cookies, and KV-backed membership lists.
  • Content management: Sveltia CMS schema defines collections and fields for news, cases, team, knowledge base, newsletters, and global settings.
  • Search: Pagefind client-side search integrated into the UI.
  • Theme toggles: Material Design 3 main toggle and IAA-specific toggle with persistent preferences.
  • Responsive design: Four breakpoints targeting tablet (1024px), mobile (900px), small mobile (600px), and extra small (480px).

Section sources

  • [README.md:425-477](file://README.md#L425-L477)
  • [README.md:174-204](file://README.md#L174-L204)
  • [README.md:497-521](file://README.md#L497-L521)
  • [README.md:638-653](file://README.md#L638-L653)
  • [src/assets/js/modules/carousel-system.js:1-169](file://src/assets/js/modules/carousel-system.js#L1-L169)
  • [src/assets/js/modules/search-functionality.js:1-179](file://src/assets/js/modules/search-functionality.js#L1-L179)
  • [src/assets/js/modules/material-design-3-main-theme-toggle.js:1-38](file://src/assets/js/modules/material-design-3-main-theme-toggle.js#L1-L38)
  • [src/assets/js/modules/iaa-alliance-theme-toggle.js:1-38](file://src/assets/js/modules/iaa-alliance-theme-toggle.js#L1-L38)
  • [src/assets/css/modules/25-responsive-tablet-max-width-1024px.css:1-333](file://src/assets/css/modules/25-responsive-tablet-max-width-1024px.css#L1-L333)
  • [src/assets/css/modules/26-responsive-mobile-max-width-900px.css:1-358](file://src/assets/css/modules/26-responsive-mobile-max-width-900px.css#L1-L358)
  • [src/assets/css/modules/27-responsive-small-mobile-max-width-600px.css:1-36](file://src/assets/css/modules/27-responsive-small-mobile-max-width-600px.css#L1-L36)
  • [src/assets/css/modules/28-responsive-extra-small-max-width-480px.css:1-13](file://src/assets/css/modules/28-responsive-extra-small-max-width-480px.css#L1-L13)

Architecture Overview

The runtime architecture separates public and member-only routes. Public pages are served statically; member-only routes are intercepted by the Worker to enforce session checks and handle authentication flows.

graph TB
U["User Browser"]
W["Cloudflare Worker (routes)"]
S["_site/ (static assets)"]
KV["KV: MEMBER_EMAILS, MAGIC_TOKENS"]
U --> |GET /| W
U --> |GET /alliance/members/*| W
U --> |GET /alliance/login/| W
U --> |POST /alliance/login/| W
U --> |GET /alliance/verify/| W
U --> |GET /alliance/logout/| W
U --> |GET /api/polling.json| W
U --> |GET /api/auth/*| W
W --> |session check| KV
W --> |store magic token| KV
W --> |serve static fallback| S

Diagram sources

  • [README.md:638-653](file://README.md#L638-L653)

Detailed Component Analysis

Interactive Carousel System

The carousel system supports three carousels (capabilities, testimonials, news) with:

  • Smooth horizontal scrolling
  • Previous/next buttons and optional indicator dots
  • Keyboard navigation (arrow keys)
  • Touch/mouse drag support
  • Dynamic snapping based on viewport and item widths
  • Accessibility attributes (roles, labels)
flowchart TD
Start(["initCarousels"]) --> Setup["setupCarousel(config)"]
Setup --> Query["Query DOM elements<br/>viewport, track, buttons"]
Query --> RenderDots["renderDots(): compute snap points<br/>and create indicator dots"]
RenderDots --> Bind["Bind events:<br/>prev/next click, scroll, resize, keydown"]
Bind --> Drag["Mouse/touch drag handlers"]
Drag --> Update["updateState(): enable/disable arrows,<br/>highlight active dot"]
Update --> End(["Ready"])

Diagram sources

  • [src/assets/js/modules/carousel-system.js:1-169](file://src/assets/js/modules/carousel-system.js#L1-L169)

Section sources

  • [src/assets/js/modules/carousel-system.js:1-169](file://src/assets/js/modules/carousel-system.js#L1-L169)

Member Authentication Portal (Magic Link)

Magic link authentication flow:

  • Session check on member-only routes
  • Email submission validates against MEMBER_EMAILS KV
  • Generates a random token, stores in MAGIC_TOKENS KV with TTL
  • Sends magic link via Resend; clicking verifies token and sets HttpOnly session cookie
  • Logout clears cookie and redirects to login
sequenceDiagram
participant V as "Visitor"
participant W as "Worker"
participant R as "Resend"
participant K as "KV (MEMBER_EMAILS/MAGIC_TOKENS)"
V->>W : GET /alliance/members/*
W->>W : Read ace_member_session cookie
alt Invalid/Expired
W-->>V : Redirect to /alliance/login?next=...
else Valid
W-->>V : Serve member page
end
V->>W : POST /alliance/login/ (email)
W->>K : Lookup "member : {email}"
alt Not approved
W-->>V : No-op (silent)
else Approved
W->>K : Put token : {hex} TTL=900s
W->>R : Send magic link email
R-->>W : OK
W-->>V : OK
end
V->>W : GET /alliance/verify?token={hex}
W->>K : Get token : {hex}
alt Not found/expired
W-->>V : Redirect to /alliance/login?error=expired
else Found
W->>W : Create session (HMAC-SHA256)
W-->>V : Set ace_member_session cookie, redirect to /alliance/members/
end
V->>W : GET /alliance/logout/
W-->>V : Clear cookie, redirect to /alliance/login

Diagram sources

  • [README.md:429-453](file://README.md#L429-L453)

Section sources

  • [README.md:425-477](file://README.md#L425-L477)

Content Management System (Sveltia CMS)

Sveltia CMS provides a Git-backed editor at /admin/ with:

  • Collections for news, cases, team, knowledge base, newsletters
  • Global settings (site metadata, ConvertKit form ID, Web3Forms key)
  • Page content and service page configurations
  • Data files for testimonials, IAA partners, clients, affiliations, and resources
erDiagram
COLLECTIONS {
string name
string label
string folder
boolean create
string format
}
FIELDS {
string label
string name
string widget
boolean required
}
FILES {
string label
string name
string file
}
COLLECTIONS ||--o{ FIELDS : "has"
COLLECTIONS ||--o{ FILES : "maps to"

Diagram sources

  • [src/admin/config.yml:11-774](file://src/admin/config.yml#L11-L774)

Section sources

  • [README.md:174-204](file://README.md#L174-L204)
  • [src/admin/config.yml:1-774](file://src/admin/config.yml#L1-L774)
  • [src/_data/site.json:1-20](file://src/_data/site.json#L1-L20)

Search Functionality (Pagefind)

Pagefind is integrated client-side:

  • Modal search UI with toggle, overlay, input, clear, and results list
  • Debounced search input (200ms)
  • Results categorized by content type with excerpts
  • Keyboard navigation (Up/Down/Enter) and Escape to close
  • Shortcut to open search (Cmd/Ctrl+K)
sequenceDiagram
participant U as "User"
participant UI as "Search UI"
participant PF as "Pagefind"
U->>UI : Click search toggle
UI->>UI : Open modal, focus input
UI->>PF : Load pagefind.js
U->>UI : Type query (≥2 chars)
UI->>PF : search(query)
PF-->>UI : results[]
UI->>UI : Render results with excerpts
U->>UI : ArrowDown/ArrowUp/Enter
UI-->>U : Navigate or open result
U->>UI : Escape
UI-->>U : Close modal

Diagram sources

  • [src/assets/js/modules/search-functionality.js:1-179](file://src/assets/js/modules/search-functionality.js#L1-L179)

Section sources

  • [README.md:33-44](file://README.md#L33-L44)
  • [package.json:6-6](file://package.json#L6-L6)
  • [src/assets/js/modules/search-functionality.js:1-179](file://src/assets/js/modules/search-functionality.js#L1-L179)

Theme Switching and Custom Animations

  • Theme toggles:
    • Material Design 3 main toggle persists preference in localStorage and updates body classes
    • IAA-specific toggle for member pages with similar behavior
  • Section observer adjusts body classes based on intersecting themed sections
  • Custom animations rely on GSAP and ScrollTrigger when available; graceful degradation otherwise
flowchart TD
TMain["Material Design Toggle"] --> Pref["Read localStorage preference"]
Pref --> ApplyMain["Apply theme-* classes to body"]
TMain --> SaveMain["Write preference on change"]
IAA["IAA Theme Toggle"] --> PrefIAA["Read localStorage preference"]
PrefIAA --> ApplyIAA["Apply theme-* classes to body"]
IAA --> SaveIAA["Write preference on change"]
Sections["Section Observer"] --> BodyClass["Toggle on-light-bg/on-dark-bg"]

Diagram sources

  • [src/assets/js/modules/material-design-3-main-theme-toggle.js:1-38](file://src/assets/js/modules/material-design-3-main-theme-toggle.js#L1-L38)
  • [src/assets/js/modules/iaa-alliance-theme-toggle.js:1-38](file://src/assets/js/modules/iaa-alliance-theme-toggle.js#L1-L38)
  • [src/assets/js/modules/theme-toggling.js:1-24](file://src/assets/js/modules/theme-toggling.js#L1-L24)

Section sources

  • [src/assets/js/modules/material-design-3-main-theme-toggle.js:1-38](file://src/assets/js/modules/material-design-3-main-theme-toggle.js#L1-L38)
  • [src/assets/js/modules/iaa-alliance-theme-toggle.js:1-38](file://src/assets/js/modules/iaa-alliance-theme-toggle.js#L1-L38)
  • [src/assets/js/modules/theme-toggling.js:1-24](file://src/assets/js/modules/theme-toggling.js#L1-L24)
  • [src/assets/js/main.js:1-37](file://src/assets/js/main.js#L1-L37)

Responsive Design System

The design follows a mobile-first approach with four breakpoints:

  • Tablet: max-width 1024px
  • Mobile: max-width 900px
  • Small mobile: max-width 600px
  • Extra small: max-width 480px

Key responsive behaviors include:

  • Adjusted base font size and section padding
  • Navigation transforms to a full-screen mobile menu with animated entrance
  • Carousel card sizing and scroll-snap behavior
  • Grid adjustments for teams, cases, services, and footers
  • Hero content and form layouts optimized per breakpoint
flowchart TD
MW["Mobile-first base styles"] --> B1024["max-width 1024px"]
B1024 --> B900["max-width 900px"]
B900 --> B600["max-width 600px"]
B600 --> B480["max-width 480px"]
B1024 --> Nav["Mobile menu transforms"]
B900 --> Car["Carousel card sizing"]
B900 --> Grids["Grid adjustments"]
B600 --> Forms["Form stacking"]
B480 --> Teams["Team grid single-column"]

Diagram sources

  • [src/assets/css/modules/25-responsive-tablet-max-width-1024px.css:1-333](file://src/assets/css/modules/25-responsive-tablet-max-width-1024px.css#L1-L333)
  • [src/assets/css/modules/26-responsive-mobile-max-width-900px.css:1-358](file://src/assets/css/modules/26-responsive-mobile-max-width-900px.css#L1-L358)
  • [src/assets/css/modules/27-responsive-small-mobile-max-width-600px.css:1-36](file://src/assets/css/modules/27-responsive-small-mobile-max-width-600px.css#L1-L36)
  • [src/assets/css/modules/28-responsive-extra-small-max-width-480px.css:1-13](file://src/assets/css/modules/28-responsive-extra-small-max-width-480px.css#L1-L13)

Section sources

  • [src/assets/css/modules/25-responsive-tablet-max-width-1024px.css:1-333](file://src/assets/css/modules/25-responsive-tablet-max-width-1024px.css#L1-L333)
  • [src/assets/css/modules/26-responsive-mobile-max-width-900px.css:1-358](file://src/assets/css/modules/26-responsive-mobile-max-width-900px.css#L1-L358)
  • [src/assets/css/modules/27-responsive-small-mobile-max-width-600px.css:1-36](file://src/assets/css/modules/27-responsive-small-mobile-max-width-600px.css#L1-L36)
  • [src/assets/css/modules/28-responsive-extra-small-max-width-480px.css:1-13](file://src/assets/css/modules/28-responsive-extra-small-max-width-480px.css#L1-L13)

Integration with External Services

  • ConvertKit: Site settings include a form ID for newsletter subscription integration.
  • Google Sheets: Worker exposes /api/polling.json backed by Google Sheets data via secrets; caching applied.
  • Contact form: Placeholder for Web3Forms access key in site settings; form posts to external service.
graph LR
Site["Site Settings (site.json)"] --> CK["ConvertKit Newsletter"]
Site --> WF["Web3Forms Contact"]
WRK["Worker"] --> GP["Google Sheets API"]
WRK --> API["/api/polling.json"]
API --> GP

Diagram sources

  • [src/_data/site.json:13-14](file://src/_data/site.json#L13-L14)
  • [README.md:480-494](file://README.md#L480-L494)
  • [README.md:357-362](file://README.md#L357-L362)
  • [README.md:647-648](file://README.md#L647-L648)

Section sources

  • [src/_data/site.json:1-20](file://src/_data/site.json#L1-L20)
  • [README.md:480-494](file://README.md#L480-L494)
  • [README.md:357-362](file://README.md#L357-L362)
  • [README.md:647-648](file://README.md#L647-L648)

Dependency Analysis

The runtime depends on:

  • Eleventy for templating and static generation
  • Pagefind for client-side search indexing
  • Cloudflare Worker for routing, authentication, and APIs
  • Sveltia CMS for content editing
  • External services for email (Resend), forms (Web3Forms), and polling data (Google Sheets)
graph TB
Pkg["package.json scripts/build"]
E["Eleventy config (.eleventy.js)"]
PF["Pagefind CLI"]
W["Worker routes"]
CMS["Sveltia CMS schema (config.yml)"]
Ext["External integrations"]
Pkg --> E
Pkg --> PF
E --> W
CMS --> E
W --> Ext

Diagram sources

  • [package.json:6-6](file://package.json#L6-L6)
  • [.eleventy.js:1-283](file://.eleventy.js#L1-L283)
  • [README.md:638-653](file://README.md#L638-L653)
  • [src/admin/config.yml:1-774](file://src/admin/config.yml#L1-L774)

Section sources

  • [package.json:1-32](file://package.json#L1-L32)
  • [.eleventy.js:1-283](file://.eleventy.js#L1-L283)
  • [README.md:638-653](file://README.md#L638-L653)
  • [src/admin/config.yml:1-774](file://src/admin/config.yml#L1-L774)

Performance Considerations

  • Static-first architecture reduces server costs and improves speed.
  • Pagefind builds a client-side index during build, minimizing runtime overhead.
  • HTML minification in production reduces payload size.
  • Carousel and theme toggles are lightweight and event-driven.
  • Graceful degradation ensures core functionality remains usable without animations.

Troubleshooting Guide

  • Contact form placeholder: Replace the Web3Forms access key in site settings before enabling.
  • Member auth KV setup: Ensure MEMBER_EMAILS and MAGIC_TOKENS KV namespaces are created and bound, and SESSION_SECRET and RESEND_API_KEY are set as secrets.
  • Polling data: Set GOOGLE_SHEETS_ID and GOOGLE_SHEETS_API_KEY secrets for /api/polling.json.
  • IAA partner logos: Upload pending logos for partners marked as logo_pending.
  • Custom domain: Point acestrategies.au to the Cloudflare Worker after deployment.

Section sources

  • [README.md:480-494](file://README.md#L480-L494)
  • [README.md:497-521](file://README.md#L497-L521)
  • [README.md:523-554](file://README.md#L523-L554)
  • [README.md:656-665](file://README.md#L656-L665)

Conclusion

The platform combines a modern static site generator with a Cloudflare Worker runtime to deliver a fast, accessible, and extensible digital experience. Its dual-content model, robust CMS, interactive carousels, and thoughtful responsive design support both public engagement and secure member access. Integrations with Pagefind, external email and form providers, and live polling data round out a flexible and scalable solution.