Documentation

Getting started with Lexington Themes

Content Collections

Every theme leverages Astro Content Collections for content-focused pages:

  • Blog posts and articles
  • Changelog entries
  • Team members and authors
  • Customer testimonials
  • Help center documentation
  • Product showcases

Content collections provide type safety, automatic routing, and seamless content management.

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
└── testimonials/ # Customer testimonials
├── customer-1.md
└── customer-2.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...

SEO Configuration

All themes include built-in SEO features using the @astrolib/seo integration with comprehensive meta tag support.

Basic Usage

---
import { AstroSeo } from '@astrolib/seo';
---

<AstroSeo
  title="Your Page Title"
  description="Your page description for search results"
  canonical="https://yourdomain.com/current-page"
  openGraph={{
    url: "https://yourdomain.com/current-page",
    title: "Your Page Title",
    description: "Your page description",
    images: [
      {
        url: "https://yourdomain.com/og-image.png",
        width: 1200,
        height: 630,
        alt: "Page preview image",
        type: "image/png",
      }
    ],
    site_name: "Your Site Name",
  }}
  twitter={{
    handle: "@yourhandle",
    site: "@yoursite",
    cardType: "summary_large_image",
  }}
/>

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'
);
---