Getting started with Summit's Themes

How Content Works

In a Summit theme, almost all of your site content lives in one config file: src/data/business.json. Your business name, phone, services, service areas, hours, reviews, and brand details all come from there, and every section and page reads from that single object. Edit it once and the change appears everywhere — no hunting through dozens of files.

You can edit business.json three ways: directly as plain JSON, with an AI coding agent via the shipped llms.txt map, or — optionally — through a visual CMS by following the opt-in Sanity addon.

Example: editing business.json

{
  "name": "Aircrest HVAC",
  "phone": "(555) 010-2400",
  "services": ["AC Repair", "Furnace Install"],
  "serviceAreas": ["Boulder", "Longmont"]
}

Keeping it valid JSON is the only rule. The services and service areas you list here also feed the city × service local-SEO landing pages and the JSON-LD schema.

Content Collections (for the blog)

For long-form, content-driven pages — primarily the Q&A blog engine — themes use Astro Content Collections. Blog posts and their authors live as markdown/MDX files and get type safety, automatic routing, and consistent management. The rest of the site (homepage, service pages, contact details) is driven by business.json, not collections.

How Content Collections Work

Content collections are defined in your src/content/config.ts file and stored in folders within the src/content/ directory. Each collection can have its own schema for type safety and validation.

Basic Collection Structure

src/content/
├── config.ts # Collection definitions
├── blog/ # Blog posts
│ ├── post-1.md
│ ├── post-2.mdx
│ └── ...
└── authors/ # Author profiles
├── john-doe.md
└── jane-smith.md

Example Content File

---
title: "Getting Started with Astro"
description: "Learn how to build fast websites with Astro"
publishDate: 2024-01-15
author: "john-doe"
tags: ["astro", "web-development", "tutorial"]
featured: true
---

# Getting Started with Astro

Your content goes here...

Content Best Practices

Frontmatter Structure

Keep your frontmatter consistent across content types:

---
title: "Post Title" # Required
description: "Brief description" # Required for SEO
publishDate: 2024-01-15 # Date format: YYYY-MM-DD
author: "author-slug" # Reference to author collection
tags: ["tag1", "tag2"] # Array of tags
featured: false # Boolean for featured content
draft: false # Boolean to hide from production
coverImage: "/images/post-cover.jpg" # Optional cover image
---

Content Organization

• Use descriptive filenames that match your URL structure
• Keep related content in appropriate collections
• Use consistent naming conventions across files
• Include all required frontmatter fields for proper functionality

SEO Optimization

• Write compelling titles (50-60 characters)
• Create descriptive meta descriptions (150-160 characters)
• Use proper heading hierarchy (H1, H2, H3, etc.)
• Include relevant keywords naturally
• Add alt text to all images
• Use semantic HTML structure

Working with Collections in Pages

Fetching Collection Data

---
import { getCollection } from 'astro:content';

// Get all blog posts
const posts = await getCollection('blog');

// Get published posts only
const publishedPosts = await getCollection('blog', ({ data }) => {
  return !data.draft;
});

// Get featured posts
const featuredPosts = await getCollection('blog', ({ data }) => {
  return data.featured === true;
});
---

Rendering Collection Items

---
const posts = await getCollection('blog');
---

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {posts.map((post) => (
    <article class="border rounded-lg p-6">
      <h2 class="text-xl font-bold mb-2">
        <a href={`/blog/${post.slug}/`}>{post.data.title}</a>
      </h2>
      <p class="text-gray-600 mb-4">{post.data.description}</p>
      <time class="text-sm text-gray-500">
        {post.data.publishDate.toDateString()}
      </time>
    </article>
  ))}
</div>

Advanced Content Features

Content Relationships

Link content items together using references:

---
title: "Advanced Astro Techniques"
author: "john-doe" # References authors collection
relatedPosts:
  - "astro-basics" # References other blog posts
  - "astro-components"
category: "tutorials" # References categories collection
---

Content Filtering and Sorting

---
import { getCollection } from 'astro:content';

const allPosts = await getCollection('blog');

// Sort by publish date (newest first)
const sortedPosts = allPosts.sort((a, b) =>
  new Date(b.data.publishDate).getTime() - new Date(a.data.publishDate).getTime()
);

// Filter by tag
const tutorialPosts = allPosts.filter(post =>
  post.data.tags?.includes('tutorial')
);

// Get posts by author
const authorPosts = allPosts.filter(post =>
  post.data.author === 'john-doe'
);
---