d70897a680
- 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>
6.6 KiB
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
- Open your web browser
- Go to:
http://localhost:4321/admin - You'll see the TinaCMS admin panel
✍️ Creating and Editing Blog Posts
Creating a New Blog Post
-
Navigate to Blog Posts
- In the TinaCMS admin panel, click on "Blog Posts" in the left sidebar
-
Create New Post
- Click the "Create New" button
- You'll see a form with several fields
-
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
-
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
-
Save Your Post
- Click "Save" in the top right
- Your post will appear on the website immediately!
Editing an Existing Blog Post
- Go to "Blog Posts" in the sidebar
- Click on the post you want to edit
- Make your changes
- Click "Save"
Deleting a Blog Post
- Go to "Blog Posts" in the sidebar
- Click on the post you want to delete
- Click the "Delete" button
- Confirm the deletion
📄 Editing Static Pages
Editing the About Page
- In the TinaCMS admin panel, click on "Pages" in the left sidebar
- Select "About Theater Ziefen"
- Edit the content using the rich text editor
- 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
- In the blog post editor, find the "Cover Image" field
- Click "Upload"
- Select your image file (JPG or PNG recommended)
- 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.jpginstead ofIMG_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
- You save your changes in the TinaCMS editor
- Changes are saved to Git automatically
- GitHub receives the changes
- Netlify deploys the updated site (takes 2-3 minutes)
- Your changes are live!
Checking Your Published Changes
- Wait 2-3 minutes after saving
- Visit the live website
- 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:
- Make sure you clicked "Save"
- Wait a few minutes for deployment
- Hard refresh your browser (Ctrl+F5 or Cmd+Shift+R)
- Check if you're viewing the correct URL (development vs. production)
Problem: Image won't upload
Solution:
- Check file size (should be under 5MB)
- Make sure it's a supported format (JPG, PNG, GIF)
- Try renaming the file to remove special characters
Problem: Formatting looks weird
Solution:
- Try removing all formatting and reapplying it
- Make sure you're using valid Markdown syntax
- 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
- Use descriptive titles: Instead of "Update", use "March 2026 Rehearsal Schedule"
- Write good excerpts: Include key information in the first 2-3 sentences
- Use relevant keywords: Include terms people might search for
- Add alt text to images: Describe what's in the image
🆘 Getting Help
If You Need Assistance
- Check this guide first
- Ask your developer for technical issues
- Consult the README.md for more detailed information
- 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! 🎭