Content Editor

The Content Editor is WP2Astro's simplified editing interface, designed specifically for content creators, writers, and non-technical users. It focuses on what matters most: creating great content.

What is Content Editor?

Content Editor is a streamlined mode that:

• Hides technical files and complexity
• Shows only blog posts and pages
• Provides WYSIWYG editing features
• Makes frontmatter editing visual
• Auto-saves everything
• Requires no code knowledge

[screenshot of content editor]

Perfect for bloggers, writers, content managers, and anyone who just wants to write.

Accessing Content Editor

From Dashboard

1. Go to your WP2Astro dashboard
2. Find your project
3. Ensure codespace is "Running"
4. Click the "Content" button

vs Dev Mode

Choose Content Editor when you want to:

• Write or edit blog posts
• Update page content
• Add new articles
• Edit metadata (titles, dates, authors)

Choose Dev Mode when you need to:

• Modify code or components
• Change layouts or styles
• Configure the site
• Use the terminal

Interface Overview

The Content Editor has a clean, focused layout:

Left Panel: Content List

Browse your content:

• Blog Posts: All posts in src/content/blog/
• Pages: Files in src/pages/ (optional)
• Search bar to filter
• Click to open and edit

Right Panel: Editor

Two sections:

1. Frontmatter Editor: Visual form for metadata
2. Content Editor: Where you write your post

Frontmatter Editor

Frontmatter is the metadata at the top of each post. Instead of editing YAML code, you get a visual form:

Common Fields

Title

The post title shown in listings and browser tabs.

Description

Used for SEO and post previews.

Publish Date

When the post was published.

Author

Who wrote the post.

Tags

Topics and keywords for the post.

Categories

Post categories for organization.

Featured Image

Main image for the post.

Draft Status

Hide drafts from your live site.

Example View

Content Editor

Below the frontmatter, you write your post content.

Markdown Editing

Write in Markdown for formatting:

# Main Heading

This is a paragraph with **bold** and *italic* text.

## Subheading

- List item 1
- List item 2
- List item 3

[Link to Astro](https://astro.build)

![Image description](./image.jpg)

WYSIWYG Features

While you write in Markdown, the editor provides helpful features:

Toolbar Buttons:

• B - Bold text
• I - Italic text
• # - Headings
• • - Bullet list
• 1. - Numbered list
• " - Blockquote
• <> - Code block
• 🔗 - Insert link
• 🖼️ - Insert image

Keyboard Shortcuts:

• Cmd/Ctrl + B: Bold
• Cmd/Ctrl + I: Italic
• Cmd/Ctrl + K: Insert link
• Cmd/Ctrl + Shift + 7: Numbered list
• Cmd/Ctrl + Shift + 8: Bullet list

Live Preview

Toggle between:

• Edit Mode: See the Markdown code
• Preview Mode: See how it will look
• Split Mode: Both side-by-side

Syntax Highlighting

Code blocks get automatic highlighting:

```javascript
function hello() {
  console.log("Hello, World!");
}
```

Renders as:

function hello() {
  console.log("Hello, World!");
}

Creating New Posts

New Blog Post

1. Click "New Post" button (+ icon)
2. Modal appears with options:
   • Post title
   • Initial tags
   • Author name
   • Date (defaults to today)
3. Click "Create"
4. New post opens in editor
5. Start writing!

File Naming

Posts are automatically saved with a filename based on the title:

You can change the filename in Dev Mode if needed.

Working with Images

Upload Images

Two ways to add images:

Method 1: Image Picker

1. Click "Insert Image" button
2. Opens media manager
3. Upload or select existing image
4. Image added to post

Method 2: Drag and Drop

1. Drag image file into editor
2. Auto-uploads to public/ directory
3. Markdown code inserted automatically

Image Syntax

![Alt text description](./path/to/image.jpg)

Image Optimization

Images are automatically optimized:

• Resized for web
• Converted to modern formats (WebP)
• Lazy loaded below the fold
• Responsive srcset generated

Auto-Save

Content Editor saves automatically:

• Auto-save: Every 2 seconds of inactivity
• Manual save: Cmd/Ctrl + S
• Save indicator: Green checkmark when saved

What Gets Saved

Both frontmatter and content are saved together to the MDX file:

---
title: "My Post"
date: 2024-02-20
---

Post content here...

Save Status

Watch the header for save status:

• "Saving...": Currently writing to file
• "Saved ✓": All changes saved
• "Offline": No connection (changes queued)

Organizing Content

Categories

Group related posts:

Add categories in frontmatter editor.

Tags

Add searchable keywords:

Tags appear as chips you can click to add/remove.

Drafts

Mark posts as drafts to hide from live site:

Drafts are:

• Visible in the editor
• Hidden from blog listing
• Excluded from RSS feed
• Not indexed by search engines

Markdown Cheat Sheet

Headings

# H1 - Main Title
## H2 - Section
### H3 - Subsection
#### H4 - Sub-subsection

Text Formatting

**bold text**
*italic text*
***bold and italic***
~~strikethrough~~
`inline code`

Links

[Link text](https://example.com)
[Link with title](https://example.com "Tooltip text")

Lists

- Bullet point 1
- Bullet point 2
  - Nested bullet

1. Numbered item 1
2. Numbered item 2
   1. Nested number

Images

![Alt text](./image.jpg)
![Image with title](./image.jpg "Image title")

Blockquotes

> This is a quote
> It can span multiple lines

Code Blocks

```javascript
const greeting = "Hello, World!";
console.log(greeting);
```

Tables

| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Data 1   | Data 2   | Data 3   |
| Data 4   | Data 5   | Data 6   |

Horizontal Rule

---

MDX Features

Content Editor supports MDX, which means you can use JSX components:

Import Components

---
title: "My Post"
---

import { Alert } from '@components/Alert';

# My Post

Regular markdown content...

<Alert type="info">
  This is an alert component!
</Alert>

More markdown...

Built-in Components

WP2Astro provides common components:

<Callout type="warning">
  Important information here
</Callout>

<CodeBlock language="javascript">
  const x = 42;
</CodeBlock>

<YouTube id="dQw4w9WgXcQ" />

Search and Filter

Search Content

Use the search bar to find posts:

• Search by title
• Search by content
• Search by tags
• Real-time filtering

Filter Options

Filter posts by:

• All Posts: Show everything
• Published: Only published posts
• Drafts: Only draft posts
• By Category: Filter by category
• By Tag: Filter by tag

Keyboard Shortcuts

Speed up your writing:

Editor Shortcuts

• Cmd/Ctrl + B: Bold selection
• Cmd/Ctrl + I: Italic selection
• Cmd/Ctrl + K: Insert link
• Cmd/Ctrl + Shift + C: Insert code block
• Cmd/Ctrl + Shift + Q: Insert blockquote

Navigation

• Cmd/Ctrl + P: Quick search posts
• Cmd/Ctrl + N: New post
• Cmd/Ctrl + S: Save (auto-save handles this)
• Esc: Close modals

Publishing Workflow

Draft → Review → Publish

Typical workflow:

1. Create Draft

   • New post starts as draft
   • Visible only in editor
   • Not on live site

2. Write Content

   • Add frontmatter
   • Write post body
   • Add images
   • Format with markdown

3. Review

   • Use Preview mode
   • Check formatting
   • Proofread
   • Add tags and categories

4. Publish

   • Toggle "Published" status
   • Auto-saves and commits
   • Triggers deployment
   • Live in 2-3 minutes

Collaboration Features

Comments (Coming Soon)

Leave notes for team members:

{/* TODO: Add more examples here */}
{/* Review this section - Sarah */}

Version History

View previous versions:

• See what changed
• Who made changes
• When changes were made
• Revert if needed

Access via Git integration in Dev Mode.

Tips for Writers

Writing in Markdown

If you're new to Markdown:

1. Start simple - basic formatting is easy
2. Use the toolbar buttons
3. Check preview often
4. Don't worry about syntax - it's forgiving

SEO Best Practices

For better search ranking:

• Write descriptive titles (50-60 characters)
• Add meta descriptions (150-160 characters)
• Use headings hierarchically (H1 → H2 → H3)
• Add alt text to all images
• Include relevant keywords naturally
• Link to related content

Content Organization

Keep content organized:

• Use consistent categories
• Tag appropriately (5-10 tags per post)
• Date posts accurately
• Set featured images for all posts
• Keep drafts organized

Troubleshooting

Content Not Saving

1. Check save indicator (top right)
2. Verify internet connection
3. Check codespace is "Running"
4. Try manual save (Cmd/Ctrl + S)

Images Not Showing

1. Verify image uploaded successfully
2. Check image path is correct
3. Ensure image is in public/ directory
4. Try refreshing the editor

Formatting Issues

1. Check Markdown syntax
2. Use preview mode to verify
3. Ensure no unclosed code blocks
4. Check for special characters

Can't Find a Post

1. Check search/filter settings
2. Verify post isn't deleted
3. Look in correct directory
4. Switch to Dev Mode to see all files

Switching to Dev Mode

Need more control? Switch to Dev Mode:

1. Save your changes (auto-saved anyway)
2. Go back to dashboard
3. Click "Dev Mode" instead of "Content"
4. Access full file system and code editor

Changes sync between both modes.

Next Steps

• Learn about Dev Mode for advanced features
• Explore GitHub Codespaces for details
• Read about Deployment to publish your changes

Additional Resources

• Markdown Guide
• MDX Documentation
• Astro Content Collections
• WP2Astro Support