97 lines
2.0 KiB
Plaintext
97 lines
2.0 KiB
Plaintext
---
|
|
globs: src/data/**/*.ts,src/data/**/*.json
|
|
---
|
|
|
|
# Data and Content Management
|
|
|
|
## Data Structure
|
|
|
|
Non-secret content belongs in `src/data/` as TypeScript modules or JSON files. Keep data presentation-agnostic.
|
|
|
|
## Current Data Files
|
|
|
|
- [src/data/projects.ts](mdc:src/data/projects.ts) - Project portfolio data
|
|
- [src/data/services.ts](mdc:src/data/services.ts) - Service offerings data
|
|
|
|
## Data Patterns
|
|
|
|
### TypeScript Data Modules
|
|
```typescript
|
|
// src/data/projects.ts
|
|
export interface Project {
|
|
id: string
|
|
title: string
|
|
description: string
|
|
category: string
|
|
images: string[]
|
|
videoUrl?: string
|
|
}
|
|
|
|
export const projects: Project[] = [
|
|
{
|
|
id: 'project-1',
|
|
title: 'Project Title',
|
|
description: 'Project description',
|
|
category: 'commercial',
|
|
images: ['/image1.jpg', '/image2.jpg']
|
|
}
|
|
]
|
|
```
|
|
|
|
### JSON Data Files
|
|
```json
|
|
{
|
|
"services": [
|
|
{
|
|
"id": "vfx",
|
|
"name": "Visual Effects",
|
|
"description": "High-end VFX services"
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
## Data Usage Rules
|
|
|
|
1. **Server Components**: Prefer server components for data fetching
|
|
2. **File Imports**: Use direct imports instead of client-side fetching for static data
|
|
3. **Type Safety**: Define TypeScript interfaces for all data structures
|
|
4. **Separation**: Keep data separate from presentation logic
|
|
|
|
## Content Guidelines
|
|
|
|
- Use descriptive, SEO-friendly content
|
|
- Include proper alt text for images
|
|
- Maintain consistent naming conventions
|
|
- Keep content up-to-date and accurate
|
|
|
|
## Data Fetching Patterns
|
|
|
|
```typescript
|
|
// ✅ Good: Server component with direct import
|
|
import { projects } from '@/data/projects'
|
|
|
|
export default function PortfolioPage() {
|
|
return (
|
|
<div>
|
|
{projects.map(project => (
|
|
<ProjectCard key={project.id} project={project} />
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ❌ Avoid: Client-side fetching of static data
|
|
'use client'
|
|
import { useEffect, useState } from 'react'
|
|
|
|
export function PortfolioPage() {
|
|
const [projects, setProjects] = useState([])
|
|
|
|
useEffect(() => {
|
|
fetch('/api/projects').then(res => res.json())
|
|
}, [])
|
|
|
|
// ...
|
|
}
|
|
``` |