Content Management System (CMS)

**Referenced Files in This Document** - [config.yml](file://src/admin/config.yml) - [index.html](file://src/admin/index.html) - [config.ts](file://tina/config.ts) - [config.prebuild.jsx](file://tina/__generated__/config.prebuild.jsx) - [package.json](file://package.json) - [news.11tydata.json](file://src/content/news/news.11tydata.json) - [cases.11tydata.json](file://src/content/cases/cases.11tydata.json) - [team.11tydata.json](file://src/content/team/team.11tydata.json) - [knowledge.11tydata.js](file://src/content/knowledge/knowledge.11tydata.js) - [newsletters.11tydata.json](file://src/content/newsletters/newsletters.11tydata.json) - [2025-10-17-political-powerhouse.md](file://src/content/news/2025-10-17-political-powerhouse.md) - [adelaide-city-fc.md](file://src/content/cases/adelaide-city-fc.md) - [01-matt-neagle.md](file://src/content/team/01-matt-neagle.md) - [getting-started.md](file://src/content/knowledge/getting-started.md) - [curabitur-ullamcorper-ultricies-nisi.md](file://src/content/newsletters/curabitur-ullamcorper-ultricies-nisi.md)

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
  10. Appendices

Introduction

This document explains the Git-backed content management system (CMS) used in the Ace Strategies Prime platform. It covers how editors access the CMS via the admin interface, the CMS configuration (collections, fields, validation, permissions), content schemas for News & Insights, Case Studies, Team Members, Knowledge Base, and Newsletters, media management, and the relationship between CMS-managed content and the static site generation pipeline. Practical workflows for creating, editing, and publishing content are included, along with guidance for editors and administrators.

Project Structure

The CMS is implemented using two complementary systems:

  • Sveltia CMS admin UI loaded in a static HTML page
  • Tina CMS configuration and schema for Git-backed editing and local development

Key locations:

  • Admin UI entry: src/admin/index.html loads the Sveltia CMS script
  • Admin configuration: src/admin/config.yml defines collections, fields, and media folders
  • Tina CMS configuration: tina/config.ts defines the schema and media handling
  • Build scripts: package.json integrates Tina CMS builds with Eleventy static site generation
  • Content sources: src/content/* for folder-based collections and src/_data/* for JSON settings/data files
  • Content examples: sample Markdown and JSON files demonstrate front matter and structure
graph TB
subgraph "Admin UI"
A["src/admin/index.html"]
B["src/admin/config.yml"]
end
subgraph "Tina CMS"
TCFG["tina/config.ts"]
TGEN["tina/__generated__/config.prebuild.jsx"]
end
subgraph "Build & Runtime"
PKG["package.json"]
ELEVENTY["Eleventy Static Site"]
end
subgraph "Content Sources"
NEWS["src/content/news/*.md"]
CASES["src/content/cases/*.md"]
TEAM["src/content/team/*.md"]
KNOWL["src/content/knowledge/*.md"]
NEWSLET["src/content/newsletters/*.md"]
DATA["_data/*.json"]
end
A --> B
A --> TCFG
TCFG --> TGEN
PKG --> TCFG
PKG --> ELEVENTY
B --> NEWS
B --> CASES
B --> TEAM
B --> KNOWL
B --> NEWSLET
B --> DATA
TCFG --> NEWS
TCFG --> CASES
TCFG --> TEAM
TCFG --> KNOWL
TCFG --> NEWSLET
TCFG --> DATA

Diagram sources

  • [index.html:1-12](file://src/admin/index.html#L1-L12)
  • [config.yml:1-774](file://src/admin/config.yml#L1-L774)
  • [config.ts:1-331](file://tina/config.ts#L1-L331)
  • [config.prebuild.jsx:1-103](file://tina/generated/config.prebuild.jsx#L1-L103)
  • [package.json:1-32](file://package.json#L1-L32)

Section sources

  • [index.html:1-12](file://src/admin/index.html#L1-L12)
  • [config.yml:1-774](file://src/admin/config.yml#L1-L774)
  • [config.ts:1-331](file://tina/config.ts#L1-L331)
  • [config.prebuild.jsx:1-103](file://tina/generated/config.prebuild.jsx#L1-L103)
  • [package.json:1-32](file://package.json#L1-L32)

Core Components

  • Admin UI loader: Loads the Sveltia CMS client to provide a browser-based editor
  • Admin configuration: Defines collections, fields, widgets, and media storage for Sveltia CMS
  • Tina CMS schema: Defines collections, fields, validation, and media handling for local editing and builds
  • Build pipeline: Integrates Tina CMS builds with Eleventy to generate the static site
  • Content sources: Markdown files with front matter and JSON data files for settings and structured content

Key responsibilities:

  • Editor access: Admin UI and configuration enable editors to manage content
  • Content modeling: Collections and fields define schemas for each content type
  • Media handling: Centralized upload folder and public URLs for assets
  • Static site integration: Content is transformed into pages via Eleventy

Section sources

  • [index.html:1-12](file://src/admin/index.html#L1-L12)
  • [config.yml:1-774](file://src/admin/config.yml#L1-L774)
  • [config.ts:1-331](file://tina/config.ts#L1-L331)
  • [package.json:1-32](file://package.json#L1-L32)

Architecture Overview

The CMS architecture combines a browser-based admin (Sveltia CMS) with a Git-backed schema (Tina CMS). Editors access the admin UI, which loads the CMS client. The admin configuration (Sveltia) and Tina schema define collections and fields. Changes are saved to the repository, and the static site is rebuilt using Eleventy.

sequenceDiagram
participant Editor as "Editor"
participant AdminUI as "Admin UI (index.html)"
participant Sveltia as "Sveltia CMS"
participant Tina as "Tina CMS Schema"
participant Repo as "Git Repository"
participant Build as "Build Pipeline"
participant Site as "Static Site"
Editor->>AdminUI : Open admin URL
AdminUI->>Sveltia : Load CMS client
Editor->>Sveltia : Edit content (collections, fields)
Sveltia->>Repo : Save changes (Markdown/JSON)
Editor->>Tina : Build admin bundle (optional)
Tina->>Repo : Generate schema/media config
Build->>Repo : Pull latest changes
Build->>Site : Run Eleventy to regenerate site
Site-->>Editor : Publish updated site

Diagram sources

  • [index.html:1-12](file://src/admin/index.html#L1-L12)
  • [config.yml:1-774](file://src/admin/config.yml#L1-L774)
  • [config.ts:1-331](file://tina/config.ts#L1-L331)
  • [package.json:1-32](file://package.json#L1-L32)

Detailed Component Analysis

Admin UI and Authentication

  • Admin entry point: src/admin/index.html loads the Sveltia CMS client script
  • Backend configuration: src/admin/config.yml sets the GitHub backend, branch, and media folder
  • Authentication: The GitHub backend in the admin config implies GitHub OAuth integration for access control
flowchart TD
Start(["Open Admin UI"]) --> LoadClient["Load Sveltia CMS client"]
LoadClient --> ConfigureBackend["Configure GitHub backend<br/>and media folder"]
ConfigureBackend --> AuthFlow{"Authenticated?"}
AuthFlow --> |Yes| EditContent["Edit collections and fields"]
AuthFlow --> |No| PromptLogin["Prompt GitHub OAuth login"]
PromptLogin --> AuthFlow
EditContent --> SaveToRepo["Save to repository"]
SaveToRepo --> End(["Content ready"])

Diagram sources

  • [index.html:1-12](file://src/admin/index.html#L1-L12)
  • [config.yml:1-774](file://src/admin/config.yml#L1-L774)

Section sources

  • [index.html:1-12](file://src/admin/index.html#L1-L12)
  • [config.yml:1-774](file://src/admin/config.yml#L1-L774)

CMS Configuration and Collections

The CMS supports both Sveltia and Tina configurations. The Sveltia admin config defines:

  • Backend: GitHub repository and branch
  • Media: Uploads folder and public URL mapping
  • Collections: Folder-based and file-based collections with fields and widgets

The Tina schema mirrors the collections and fields, adding validation and UI hints.

Collections overview:

  • News & Insights: Title, date, author, excerpt, image, image alt, PDF download, featured flag, draft flag, body
  • Case Studies: Client, category (select), engagement title, image, image alt, client quote, quote author, display order, featured, draft, body
  • Team Members: URL anchor, full name, role/title, display order, homepage card image, profile image, alt texts, short bio, featured, draft, full bio
  • Knowledge Base: Title, date, author, excerpt, tags list, body
  • Newsletters: Title, date, excerpt, PDF link, archive link, featured, draft

Settings and structured data collections include site settings, homepage content, and various JSON-based content sets.

Section sources

  • [config.yml:11-105](file://src/admin/config.yml#L11-L105)
  • [config.ts:22-122](file://tina/config.ts#L22-L122)
  • [config.ts:124-327](file://tina/config.ts#L124-L327)

Content Schemas and Examples

Each content type follows a consistent pattern using front matter and Markdown bodies. Representative examples:

  • News & Insights: Demonstrates title, date, author, excerpt, image, PDF metadata, featured flag, and body
  • Case Studies: Demonstrates client, category, engagement title, image, quote, quote author, order, featured, and body
  • Team Members: Demonstrates anchor, name, role, order, images, alt texts, short bio, featured, and full bio
  • Knowledge Base: Demonstrates title, date, author, excerpt, tags list, and body
  • Newsletters: Demonstrates title, date, excerpt, PDF and archive links, featured, and draft

These examples illustrate the fields defined in the CMS configuration and how content is authored and stored.

Section sources

  • [2025-10-17-political-powerhouse.md:1-18](file://src/content/news/2025-10-17-political-powerhouse.md#L1-L18)
  • [adelaide-city-fc.md:1-14](file://src/content/cases/adelaide-city-fc.md#L1-L14)
  • [01-matt-neagle.md:1-21](file://src/content/team/01-matt-neagle.md#L1-L21)
  • [getting-started.md:1-52](file://src/content/knowledge/getting-started.md#L1-L52)
  • [curabitur-ullamcorper-ultricies-nisi.md:1-10](file://src/content/newsletters/curabitur-ullamcorper-ultricies-nisi.md#L1-L10)

Media Management

  • Upload location: src/assets/repository/images/uploads
  • Public URLs: Assets are served under /assets/repository/images/uploads
  • Usage: Images are referenced via front matter fields (e.g., image, image_alt) in content files

Best practices:

  • Store images in the uploads folder and reference them via front matter
  • Use descriptive alt texts for accessibility and SEO
  • Keep image sizes reasonable to optimize performance

Section sources

  • [config.yml:8-9](file://src/admin/config.yml#L8-L9)
  • [config.ts:15-20](file://tina/config.ts#L15-L20)
  • [2025-10-17-political-powerhouse.md:6-7](file://src/content/news/2025-10-17-political-powerhouse.md#L6-L7)
  • [adelaide-city-fc.md:5-6](file://src/content/cases/adelaide-city-fc.md#L5-L6)
  • [01-matt-neagle.md:6-9](file://src/content/team/01-matt-neagle.md#L6-L9)

Static Site Generation Integration

  • Build command: npm run build invokes Eleventy and Pagefind indexing
  • CMS build: npm run build:cms invokes the Tina CMS build
  • Local development: npm run dev:cms starts Tina CMS dev server alongside Eleventy
  • Permalinks: Some collections disable permalinks (e.g., news, cases, team), while others define custom permalinks (e.g., knowledge base)
flowchart TD
DevStart["npm run dev:cms"] --> TinaDev["Tina CMS dev server"]
TinaDev --> EleventyServe["Eleventy --serve"]
EleventyServe --> Rebuild["On content change"]
Rebuild --> EleventyBuild["Eleventy build"]
EleventyBuild --> Output["_site generated"]

Diagram sources

  • [package.json:5-12](file://package.json#L5-L12)
  • [news.11tydata.json:1-2](file://src/content/news/news.11tydata.json#L1-L2)
  • [cases.11tydata.json:1-2](file://src/content/cases/cases.11tydata.json#L1-L2)
  • [team.11tydata.json:1-2](file://src/content/team/team.11tydata.json#L1-L2)
  • [knowledge.11tydata.js:1-8](file://src/content/knowledge/knowledge.11tydata.js#L1-L8)

Section sources

  • [package.json:5-12](file://package.json#L5-L12)
  • [news.11tydata.json:1-2](file://src/content/news/news.11tydata.json#L1-L2)
  • [cases.11tydata.json:1-2](file://src/content/cases/cases.11tydata.json#L1-L2)
  • [team.11tydata.json:1-2](file://src/content/team/team.11tydata.json#L1-L2)
  • [knowledge.11tydata.js:1-8](file://src/content/knowledge/knowledge.11tydata.js#L1-L8)

Dependency Analysis

  • Admin UI depends on Sveltia CMS client loaded from CDN
  • Admin configuration depends on GitHub backend credentials and media folder settings
  • Tina CMS schema depends on content paths and field definitions
  • Build pipeline depends on environment variables (branch, tokens) and CLI scripts
  • Content depends on Eleventy data files for permalinks and computed properties
graph LR
Admin["Admin UI (index.html)"] --> Sveltia["Sveltia CMS"]
Admin --> ConfigYml["Admin Config (config.yml)"]
Sveltia --> Repo["GitHub Repo"]
Tina["Tina Schema (config.ts)"] --> Repo
Build["Build Scripts (package.json)"] --> Eleventy["Eleventy"]
Eleventy --> Site["_site"]
ConfigYml --> Content["Content Sources"]
Tina --> Content

Diagram sources

  • [index.html:1-12](file://src/admin/index.html#L1-L12)
  • [config.yml:1-774](file://src/admin/config.yml#L1-L774)
  • [config.ts:1-331](file://tina/config.ts#L1-L331)
  • [package.json:1-32](file://package.json#L1-L32)

Section sources

  • [index.html:1-12](file://src/admin/index.html#L1-L12)
  • [config.yml:1-774](file://src/admin/config.yml#L1-L774)
  • [config.ts:1-331](file://tina/config.ts#L1-L331)
  • [package.json:1-32](file://package.json#L1-L32)

Performance Considerations

  • Optimize images: Use appropriate sizes and formats; leverage the centralized uploads folder for consistency
  • Minimize unnecessary fields: Keep front matter concise to reduce parsing overhead
  • Leverage Eleventy’s incremental builds: Use appropriate data file structures to avoid heavy computations
  • Monitor build times: Use separate scripts for CMS builds and site builds to isolate bottlenecks

Troubleshooting Guide

Common issues and resolutions:

  • Admin not loading: Verify the Sveltia CMS script URL and network connectivity
  • Authentication failures: Confirm GitHub backend settings and repository permissions
  • Media upload errors: Ensure the uploads folder exists and is writable; check public URL mapping
  • Build failures: Validate environment variables (branch, tokens) and CLI commands in package.json
  • Permalink issues: Review Eleventy data files for permalink settings and computed properties

Section sources

  • [index.html:1-12](file://src/admin/index.html#L1-L12)
  • [config.yml:1-774](file://src/admin/config.yml#L1-L774)
  • [package.json:5-12](file://package.json#L5-L12)
  • [news.11tydata.json:1-2](file://src/content/news/news.11tydata.json#L1-L2)
  • [cases.11tydata.json:1-2](file://src/content/cases/cases.11tydata.json#L1-L2)
  • [team.11tydata.json:1-2](file://src/content/team/team.11tydata.json#L1-L2)
  • [knowledge.11tydata.js:1-8](file://src/content/knowledge/knowledge.11tydata.js#L1-L8)

Conclusion

The Ace Strategies Prime platform uses a Git-backed CMS combining Sveltia CMS for the admin UI and Tina CMS for schema-driven editing and builds. Editors manage content through the admin interface, which saves changes to the repository. The static site is regenerated via Eleventy, ensuring content consistency and version control. The documented collections, fields, and workflows provide a clear blueprint for creating, editing, and publishing content across News & Insights, Case Studies, Team Members, Knowledge Base, and Newsletters.

Appendices

Practical Workflows

  • Creating a News & Insights article

    • Navigate to the News & Insights collection in the admin
    • Fill in title, date, author, excerpt, image, PDF metadata, and body
    • Toggle featured and draft flags as needed
    • Save and publish; the article appears on the site after the next build

  • Editing a Case Study

    • Select the Case Studies collection
    • Choose category from the predefined list
    • Add client, engagement title, image, client quote, and body
    • Set display order and featured flag
    • Save and publish

  • Managing Team Member profiles

    • Enter URL anchor, full name, role/title, and display order
    • Upload homepage card and profile images with alt texts
    • Write short bio and full bio
    • Toggle featured and draft flags
    • Save and publish

  • Knowledge Base notes

    • Use the Knowledge Base collection
    • Include title, date, author, excerpt, and tags list
    • Write content in the body using Markdown
    • Save and publish; the site rebuilds automatically

  • Newsletter creation

    • Use the Newsletters collection
    • Enter title, date, excerpt, and optional PDF/archive links
    • Set featured and draft flags
    • Save and publish

  • Publishing procedure

    • Save content in the admin
    • Trigger a build (npm run build or via CI)
    • Deploy the generated site

[No sources needed since this section provides general guidance]