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>
This commit is contained in:
Johannes Gasser
+238
@@ -0,0 +1,238 @@
|
||||
# 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! 🎭
|
||||
Reference in New Issue
Block a user