# Content Editor Guide for Theater Ziefen Website

This guide is for non-technical team members who will be managing the website content.

## 📋 Quick Start

### What You Need

- The development server running (ask your developer to set this up)
- A web browser
- Basic knowledge of writing and formatting text

### Accessing the Editor

1. Open your web browser
2. Go to: `http://localhost:4321/admin`
3. You'll see the TinaCMS admin panel

## ✍️ Creating and Editing Blog Posts

### Creating a New Blog Post

1. **Navigate to Blog Posts**
   - In the TinaCMS admin panel, click on "Blog Posts" in the left sidebar

2. **Create New Post**
   - Click the "Create New" button
   - You'll see a form with several fields

3. **Fill in the Post Details**
   - **Title**: Enter your blog post title (e.g., "Rehearsal Updates for March")
   - **Publication Date**: Click to select the date (usually today's date)
   - **Excerpt**: Write a short summary (2-3 sentences) - this appears on the blog listing page
   - **Cover Image**: (Optional) Click "Upload" to add a featured image

4. **Write Your Content**
   - Use the rich text editor to write your blog post
   - Formatting options available:
     - **Bold**: Select text and click B
     - **Italic**: Select text and click I
     - **Headings**: Use ## for main headings, ### for subheadings
     - **Lists**: Click the bullet or numbered list icons
     - **Links**: Select text, click the link icon, enter URL

5. **Save Your Post**
   - Click "Save" in the top right
   - Your post will appear on the website immediately!

### Editing an Existing Blog Post

1. Go to "Blog Posts" in the sidebar
2. Click on the post you want to edit
3. Make your changes
4. Click "Save"

### Deleting a Blog Post

1. Go to "Blog Posts" in the sidebar
2. Click on the post you want to delete
3. Click the "Delete" button
4. Confirm the deletion

## 📄 Editing Static Pages

### Editing the About Page

1. In the TinaCMS admin panel, click on "Pages" in the left sidebar
2. Select "About Theater Ziefen"
3. Edit the content using the rich text editor
4. Click "Save"

### Content Tips for Pages

- **Keep it concise**: Visitors typically scan pages, so use short paragraphs
- **Use headings**: Break up content with headings (## Main Heading, ### Subheading)
- **Add lists**: Bullet points make information easy to scan
- **Include calls to action**: Encourage visitors to check the blog, contact you, etc.

## 🖼️ Working with Images

### Adding Images to Blog Posts

1. In the blog post editor, find the "Cover Image" field
2. Click "Upload"
3. Select your image file (JPG or PNG recommended)
4. The image will be uploaded and displayed

### Image Best Practices

- **Size**: Keep images under 2MB for fast loading
- **Dimensions**: 1200x630 pixels works well for blog post covers
- **Format**: Use JPG for photos, PNG for graphics with text
- **File names**: Use descriptive names (e.g., `rehearsal-march-2026.jpg` instead of `IMG_1234.jpg`)

## 📝 Formatting Tips

### Markdown Basics

The editor uses Markdown, a simple formatting language:

```
# Heading 1 (largest)
## Heading 2
### Heading 3

**Bold text**
*Italic text*

- Bullet point 1
- Bullet point 2

1. Numbered item 1
2. Numbered item 2

[Link text](https://example.com)
```

### Writing Style Guidelines

**For Blog Posts:**
- Use a conversational, friendly tone
- Include dates for time-specific information
- Add personal touches and behind-the-scenes details
- End with a call to action or question

**For Static Pages:**
- Be clear and informative
- Use headings to organize information
- Keep paragraphs short (3-4 lines max)
- Update regularly with current information

## 🔄 Publishing Workflow

### How Changes Go Live

1. **You save your changes** in the TinaCMS editor
2. **Changes are saved to Git** automatically
3. **GitHub receives the changes**
4. **Netlify deploys the updated site** (takes 2-3 minutes)
5. **Your changes are live!**

### Checking Your Published Changes

1. Wait 2-3 minutes after saving
2. Visit the live website
3. Refresh your browser to see the changes

## ⚠️ Common Issues and Solutions

### Problem: Can't access `/admin`

**Solution:** Make sure the development server is running. Ask your developer to start it with `npm run dev`.

### Problem: Changes not appearing

**Solution:**
1. Make sure you clicked "Save"
2. Wait a few minutes for deployment
3. Hard refresh your browser (Ctrl+F5 or Cmd+Shift+R)
4. Check if you're viewing the correct URL (development vs. production)

### Problem: Image won't upload

**Solution:**
1. Check file size (should be under 5MB)
2. Make sure it's a supported format (JPG, PNG, GIF)
3. Try renaming the file to remove special characters

### Problem: Formatting looks weird

**Solution:**
1. Try removing all formatting and reapplying it
2. Make sure you're using valid Markdown syntax
3. Preview your changes before saving

## 📅 Content Planning Tips

### Blog Post Ideas

- Rehearsal updates and progress reports
- Cast and crew spotlights
- Behind-the-scenes photos and stories
- Production timeline updates
- Ticket sales announcements (when ready)
- Event announcements
- Community involvement opportunities
- Historical context about the production

### Posting Frequency

- **Minimum**: 1-2 posts per month to keep the site active
- **Ideal**: 1 post per week during active production
- **Special occasions**: Extra posts for major announcements

### Content Calendar

Create a simple calendar with:
- Upcoming post topics
- Important dates to announce
- Seasonal content (holidays, seasons)
- Milestone celebrations

## 🎯 SEO Tips (Optional but Helpful)

### Make Your Content Searchable

1. **Use descriptive titles**: Instead of "Update", use "March 2026 Rehearsal Schedule"
2. **Write good excerpts**: Include key information in the first 2-3 sentences
3. **Use relevant keywords**: Include terms people might search for
4. **Add alt text to images**: Describe what's in the image

## 🆘 Getting Help

### If You Need Assistance

1. **Check this guide first**
2. **Ask your developer** for technical issues
3. **Consult the README.md** for more detailed information
4. **Visit TinaCMS documentation**: https://tina.io/docs

### Quick Reference

- Admin Panel: `http://localhost:4321/admin`
- Live Website: (your website URL)
- Save Button: Top right corner of editor
- Preview: View your page before saving

## 📞 Support Contacts

- **Technical Issues**: [Developer contact]
- **Content Questions**: [Content manager contact]
- **General Questions**: info@theater-ziefen.ch

---

**Remember**: Don't be afraid to experiment! You can always undo changes or ask for help. The system is designed to be user-friendly, so feel free to explore and learn as you go.

Happy editing! 🎭