Files
theater-ziefen-website/EDITOR_GUIDE.md
T
Johannes Gasser d70897a680 Initial setup of Theater Ziefen website
- Set up Astro with TypeScript
- Integrate TinaCMS for content management
- Create homepage with hero section and recent posts
- Build blog listing and individual post pages
- Add About and Contact pages
- Implement responsive design with theater theme
- Configure Netlify deployment
- Add comprehensive documentation for developers and editors

Tech stack:
- Framework: Astro 5.x
- CMS: TinaCMS with Git-based workflow
- Content: MDX format for blog and pages
- Styling: Scoped CSS with responsive design
- Deployment: Netlify (configured)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-28 17:47:49 +01:00

6.6 KiB

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! 🎭