Updating Content

Learn how to update text, images, and data in your Capricorn template.

Content System Overview

Capricorn templates use a file-based content system — no database or CMS required. Your content lives in easy-to-edit files within the content/ folder.

Two Types of Content

MDX Content

MDX combines Markdown formatting with structured metadata, perfect for content that needs its own page.

How MDX Works

Each .mdx file has two parts:

---
title: "Your Title"
slug: "url-friendly-slug"
excerpt: "Brief description"
date: "2024-01-15"
image: "/images/your-image.jpg"
---
 
Your content here using **Markdown** formatting.
 
## Subheadings work
 
- So do lists
- And other Markdown features

Frontmatter (between ---) contains metadata that:

• Defines the page URL via slug
• Provides info for listing pages
• Sets SEO data

Content (below frontmatter) is your actual page content written in Markdown.

Creating New MDX Content

1. Navigate to the appropriate folder in content/
2. Create a new .mdx file (e.g., my-new-post.mdx)
3. Add frontmatter with required fields
4. Write your content below
5. Save — the page is automatically created!

MDX Tips

URLs are generated from the slug field:

slug: "my-awesome-post"  →  /blog/my-awesome-post

Use Markdown formatting:

## Headings
 
**Bold text** and *italic text*
 
- Bullet lists
- Work great
 
1. Numbered lists
2. Also work
 
> Blockquotes for testimonials or highlights
 
[Links](https://example.com) and ![Images](/images/photo.jpg)

Keep slugs URL-friendly:

• ✅ teeth-whitening-guide
• ❌ Teeth Whitening Guide!

TypeScript Content

For structured data displayed on pages (not needing individual URLs), we use TypeScript files with data arrays.

How TypeScript Content Works

// content/team.ts
export const team = [
  {
    name: "Jane Smith",
    role: "Founder",
    bio: "20+ years of experience...",
    image: "/images/team/jane.jpg",
  },
  {
    name: "John Doe",
    role: "Manager",
    bio: "Specializes in...",
    image: "/images/team/john.jpg",
  },
];

Components then import and display this data automatically.

Editing TypeScript Content

1. Open the relevant .ts file in content/
2. Modify the data array
3. Save — changes appear immediately

Common Content Types

Most templates include some of these:

Check your specific template documentation for exact files available.

Images

Adding Images

1. Place images in public/images/
2. Organize by type:

   public/images/
   ├── blog/
   ├── team/
   ├── services/
   └── general/

3. Reference with absolute paths: /images/folder/filename.jpg

Image Best Practices

Formats:

• .jpg — Photos and complex images
• .png — Graphics with transparency
• .webp — Modern format (smaller files)
• .svg — Icons and logos

Optimization:

• Compress images before uploading
• Aim for under 500KB per image
• Use appropriate dimensions (don’t upload 4000px images for thumbnails)

Recommended Sizes:

Naming:

• Use lowercase
• Use hyphens for spaces
• Be descriptive
• ✅ teeth-whitening-before.jpg
• ❌ IMG_1234.JPG

Configuration Files

Site Configuration

Edit config/site.config.ts for business info:

export const siteConfig = {
  name: "Your Business Name",
  description: "Your business description",
  phone: "(555) 123-4567",
  email: "info@yourbusiness.com",
  address: "123 Main St, City, State 12345",
  social: {
    facebook: "https://facebook.com/yourbusiness",
    instagram: "https://instagram.com/yourbusiness",
    twitter: "https://twitter.com/yourbusiness",
  },
};

Navigation

Edit config/navigation.config.ts for menus:

export const navigationConfig = {
  mainNav: [
    { label: "Home", href: "/" },
    { label: "Services", href: "/services" },
    { label: "About", href: "/about" },
    { label: "Contact", href: "/contact" },
  ],
};

Customization Checklist

When setting up your template, update in this order:

1. ☐ config/site.config.ts — Your business name, contact info
2. ☐ app/globals.css — Your brand colors
3. ☐ config/navigation.config.ts — Your menu structure
4. ☐ content/*.ts — Your team, testimonials, etc.
5. ☐ content/*.mdx — Your services, blog posts, etc.
6. ☐ public/images/ — Replace all placeholder images

Tips for Great Content

Writing

• Keep paragraphs short (2-3 sentences)
• Use headings to break up content
• Include calls-to-action
• Write for your audience

SEO

• Write descriptive titles (50-60 characters)
• Keep excerpts compelling (150-160 characters)
• Use relevant keywords naturally
• Add alt text to images

Consistency

• Use the same image dimensions for similar content
• Keep formatting consistent across pages
• Match your brand voice throughout

Template-Specific Content

Each template has its own content structure. See your specific template documentation for:

• Exact MDX frontmatter fields required
• Available TypeScript content files
• Template-specific components

Template Guides:

• Astra Dental Template →

Next: Styling & Theming →