Article Editor

The Article Editor is a rich text editor for creating blog posts, documentation, and other long-form content. Write in a familiar word processor interface while Pagesmith handles the MDX output.

Opening the Article Editor

1. Navigate to a content file (blog post, doc page)
2. Click the Article tab
3. The rich text editor opens with your content

Or create new content:

1. Click + New Article
2. Choose the content type (post, doc, page)
3. Start writing

Writing Content

Formatting

The editor toolbar includes:

• Headings — H1, H2, H3
• Bold — Cmd/Ctrl + B
• Italic — Cmd/Ctrl + I
• Code — Inline code
• Links — Cmd/Ctrl + K
• Lists — Bullet and numbered
• Quotes — Block quotes

Markdown Shortcuts

Type markdown directly for speed:

Keyboard Shortcuts

Adding Media

Images

1. Click the image icon in toolbar
2. Upload an image or paste URL
3. Add alt text for accessibility
4. Optional: Add caption

Images are automatically optimized and stored in your project.

Code Blocks

1. Type ``` or click code block icon
2. Select the language for syntax highlighting
3. Enter your code
4. Code is displayed with proper formatting

Supported languages: JavaScript, TypeScript, Python, HTML, CSS, Bash, JSON, and more.

Videos

1. Click video icon
2. Paste YouTube or Vimeo URL
3. Video embeds responsively

MDX Components

Use custom components for richer content:

Callouts

<Callout type="info">
This is an informational note.
</Callout>

<Callout type="warning">
Be careful with this step.
</Callout>

<Callout type="tip">
Here's a helpful tip.
</Callout>

Tabs

<Tabs>
  <Tab title="React">
    React code example
  </Tab>
  <Tab title="Vue">
    Vue code example
  </Tab>
</Tabs>

Accordions

<Accordion title="Click to expand">
Hidden content that expands when clicked.
</Accordion>

Cards

<Card title="Feature Name" href="/link">
Description of the feature.
</Card>

Frontmatter

Each article has metadata in the frontmatter:

---
title: "Article Title"
description: "Brief description for SEO"
publishedAt: 2024-01-15
author: "Your Name"
category: "tutorials"
tags: ["tag1", "tag2"]
image: "/images/cover.jpg"
draft: false
---

Edit frontmatter by clicking the Settings icon or editing YAML directly.

Draft and Publish

Saving Drafts

All changes save automatically. Your work is never lost.

Draft Status

Set draft: true in frontmatter to hide from public listings.

Publishing

1. Remove draft: true or set to false
2. Publish your site
3. Article is now live

SEO Settings

For each article, set:

• Title — Browser tab and search result title
• Description — Search result description (150 chars)
• Canonical URL — If content exists elsewhere
• OG Image — Social sharing preview

Access via Settings panel or frontmatter.

Organizing Content

Categories

Assign articles to categories:

category: "tutorials"

Tags

Add multiple tags:

tags: ["react", "beginners", "how-to"]

Series

Group related articles:

series: "Getting Started"
seriesOrder: 1

Content Collections

Pagesmith organizes content in Astro collections:

src/content/
├── blog/           # Blog posts
│   ├── post-1.mdx
│   └── post-2.mdx
├── docs/           # Documentation
│   ├── getting-started.mdx
│   └── api-reference.mdx
└── config.ts       # Collection schemas

Each collection can have its own schema for consistent frontmatter.

Tips

Write in Markdown, Preview Rich

The editor renders rich preview, but you can switch to raw MDX view anytime.

Use Templates

Create article templates for consistent formatting:

• Tutorial template
• Update/changelog template
• Review template

Batch Editing

Edit frontmatter across multiple articles from the content list view.

Related Docs

• Documentation & Blog Use Case — Full tutorial
• Content Sites for SEO — SEO strategy
• SEO Best Practices — Optimize your content