npm package: @duffcloudservices/cms-astro
Description: Astro integration for DCS CMS content and SEO management
Author: Duff Cloud Services
Latest version: 0.1.1

# @duffcloudservices/cms-astro

Astro integration for DCS CMS content and SEO management.

## Installation

```bash
pnpm add @duffcloudservices/cms-astro
```

## Usage

### Configuration

```typescript
// astro.config.mjs
import { defineConfig } from 'astro/config'
import dcs from '@duffcloudservices/cms-astro'

export default defineConfig({
  integrations: [dcs()],
})
```

### Using in Components

```astro
---
// src/pages/index.astro
import { t, getPageSeo, getPageContent } from '@duffcloudservices/cms-astro'

const seo = getPageSeo('home')
const content = getPageContent('home')
---
<html>
  <head>
    <title>{seo?.title}</title>
    <meta name="description" content={seo?.description} />
    {seo?.openGraph?.image && (
      <meta property="og:image" content={seo.openGraph.image} />
    )}
  </head>
  <body>
    <h1>{t('home', 'hero.title', 'Welcome')}</h1>
    <p>{t('home', 'hero.subtitle', 'Build amazing things')}</p>
    
    <!-- Or use content object directly -->
    <p>{content['cta.text']}</p>
  </body>
</html>
```

### DCS Configuration Files

Create `.dcs/content.yaml`:

```yaml
version: 1
global:
  nav.home: Home
  footer.copyright: © 2026 Company
pages:
  home:
    hero.title: Welcome to Our Site
    hero.subtitle: Build something amazing
    cta.text: Get Started
```

Create `.dcs/seo.yaml`:

```yaml
version: 1
global:
  siteName: My Site
  defaultTitle: My Site
  titleTemplate: "%s | My Site"
  images:
    ogDefault: /images/og-default.jpg
pages:
  home:
    title: Welcome
    description: The homepage of My Site
```

## API

### Integration Options

```typescript
dcs({
  contentPath: '.dcs/content.yaml', // Path to content file
  seoPath: '.dcs/seo.yaml',         // Path to SEO file
  debug: false,                      // Enable debug logging
})
```

### Runtime Functions

#### `t(page, key, fallback?)`

Get text for a specific page and key.

```astro
{t('home', 'hero.title', 'Default Title')}
```

#### `getContent()`

Get the full content configuration object.

#### `getSeo()`

Get the full SEO configuration object.

#### `getPageContent(page)`

Get all content for a page (global merged with page-specific).

```astro
---
const content = getPageContent('home')
---
{Object.entries(content).map(([key, value]) => (
  <p>{key}: {value}</p>
))}
```

#### `getPageSeo(page, overrides?)`

Get resolved SEO for a page with optional overrides.

```astro
---
const seo = getPageSeo('home', { title: 'Custom Title' })
---
<title>{seo?.title}</title>
```

## Advanced Usage

### Layout Component with SEO

```astro
---
// src/layouts/BaseLayout.astro
import { getPageSeo } from '@duffcloudservices/cms-astro'

interface Props {
  page: string
  titleOverride?: string
}

const { page, titleOverride } = Astro.props
const seo = getPageSeo(page, titleOverride ? { title: titleOverride } : undefined)
---
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{seo?.title ?? 'My Site'}</title>
    {seo?.description && (
      <meta name="description" content={seo.description} />
    )}
    {seo?.canonical && (
      <link rel="canonical" href={seo.canonical} />
    )}
  </head>
  <body>
    <slot />
  </body>
</html>
```

## License

MIT