Site Setup Overview

Partner Documentation

This section covers technical integration of sites with the DCS platform. For site owner documentation, see the Portal Guide.

Supported Frameworks

DCS integrates with these frameworks:

Framework	Support Level	Use Case
VitePress	Full	Documentation, blogs, marketing
Vue 3 SPA	Full	Web applications
Nuxt	Partial	SSR applications
Static HTML	Basic	Simple sites

Integration Architecture

┌─────────────────────────────────────────────────────────────┐
│                      Your Site                              │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐ │
│  │ Components  │  │ Composables │  │ Configuration Files │ │
│  │ (Vue/MD)    │  │ (API calls) │  │ (.dcs/, .github/)   │ │
│  └──────┬──────┘  └──────┬──────┘  └──────────┬──────────┘ │
└─────────┼────────────────┼────────────────────┼─────────────┘
          │                │                    │
          ▼                ▼                    ▼
    ┌───────────────────────────────────────────────────┐
    │                  DCS APIs                         │
    │  ├── Text Content API                            │
    │  ├── SEO Metadata API                            │
    │  ├── Blog Content API                            │
    │  └── Analytics API                               │
    └───────────────────────────────────────────────────┘
          │                │                    │
          ▼                ▼                    ▼
    ┌───────────────────────────────────────────────────┐
    │               DCS Portal                          │
    │  ├── Content Management UI                       │
    │  ├── Development Requests                        │
    │  └── Analytics Dashboard                         │
    └───────────────────────────────────────────────────┘

Required Files

Every DCS-integrated site needs:

File	Purpose
.dcs/config.yaml	Main configuration
.dcs/pages.yaml	Page registry
.github/copilot-instructions.md	AI development guidelines
.env	Environment variables

Integration Points

1. Text Content

The useTextContent composable fetches and displays text overrides:

<script setup lang="ts">
import { useTextContent } from '@/lib/use-text-content'
const { t } = useTextContent()
</script>

<template>
  <h1>{{ t('home.hero.title', 'Default Title') }}</h1>
</template>

2. SEO Metadata

SEO data is managed through the portal and fetched at build or runtime:

// VitePress frontmatter override
const seo = await fetchSEO('page-slug')
useHead({
  title: seo.title,
  meta: [
    { name: 'description', content: seo.description }
  ]
})

3. Blog Content

Blog posts are created in the portal and rendered by your site:

// Fetch blog posts
const posts = await fetchBlogPosts()

4. Analytics

Page views and events are automatically tracked:

// Custom event tracking
trackEvent('button_click', { button: 'cta' })

Deployment Model

DCS uses Azure Static Web Apps for hosting:

Code Push → GitHub Actions → Build → Azure SWA
                                      │
                            ┌─────────┴─────────┐
                            │                   │
                       Development         Production
                       (preview)           (live)

Environments

Environment	Purpose	URL
Production	Live site	yoursite.com
Development	Preview changes	dev.yoursite.com
Draft	PR previews	pr-123.azurestaticapps.net

Getting Started

Choose your starting point:

• VitePress Sites — Most common setup
• Configuration Files — Detailed config reference
• GitHub Setup — Repository configuration

Quick Start Checklist

• [ ] Create .dcs/config.yaml
• [ ] Create .dcs/pages.yaml
• [ ] Add useTextContent composable
• [ ] Configure environment variables
• [ ] Set up GitHub secrets
• [ ] Add Copilot instructions
• [ ] Register site in DCS portal
• [ ] Test integration

Next Steps

• VitePress Sites — Framework-specific guide
• GitHub Setup — Repository configuration
• DCS Configuration — Config file reference