# Theater Ziefen Website

Official website for Theater Ziefen - Coming 2029

## 🎭 Overview

This is a modern, easy-to-maintain website built for Theater Ziefen. The site features:

- **Static pages** for general information
- **Blog** for news and updates
- **Visual CMS** (TinaCMS) for non-technical content editing
- **Future-ready** for ticket shop integration
- **Zero-cost hosting** on Netlify

## 🚀 Tech Stack

- **Framework**: [Astro](https://astro.build) - Fast, modern static site generator
- **CMS**: [TinaCMS](https://tina.io) - Git-based visual content management
- **Content**: MDX (Markdown + JSX) for blog posts and pages
- **Styling**: Scoped CSS with responsive design
- **Hosting**: Netlify (free tier)
- **Language**: TypeScript

## 📁 Project Structure

```text
/
├── content/                 # Content files (edited via TinaCMS)
│   ├── blog/               # Blog posts in MDX format
│   └── pages/              # Static pages in MDX format
├── public/                 # Static assets (images, favicon, etc.)
│   └── images/            # Image uploads
├── src/
│   ├── layouts/           # Page layouts
│   │   └── BaseLayout.astro
│   ├── pages/             # Route pages
│   │   ├── index.astro    # Homepage
│   │   ├── about.astro    # About page
│   │   ├── contact.astro  # Contact page
│   │   └── blog/          # Blog pages
│   │       ├── index.astro      # Blog listing
│   │       └── [slug].astro     # Individual blog posts
│   └── components/        # Reusable components (future)
├── tina/                  # TinaCMS configuration
│   └── config.ts          # CMS schema and settings
├── .env                   # Environment variables (not in git)
├── .env.example           # Environment variables template
├── netlify.toml           # Netlify deployment config
└── package.json           # Dependencies and scripts
```

## 🛠️ Development Setup

### Prerequisites

- Node.js 20 or higher
- npm or yarn
- Git

### Installation

1. Clone the repository:
```bash
git clone <repository-url>
cd website-theater-ziefen
```

2. Install dependencies:
```bash
npm install
```

3. Start the development server:
```bash
npm run dev
```

The site will be available at `http://localhost:4321`

The TinaCMS admin panel will be available at `http://localhost:4321/admin`

## 📝 Content Management with TinaCMS

### For Non-Technical Content Editors

1. **Start the development server** (ask your developer if you need help)
2. **Navigate to** `http://localhost:4321/admin`
3. **Click "Edit"** on any page to start editing
4. **Make your changes** using the visual editor
5. **Save** your changes - they'll be committed to Git automatically

### Editing Blog Posts

1. Go to `/admin` in your browser
2. Click on "Blog Posts" in the sidebar
3. To create a new post:
   - Click "Add New"
   - Fill in the title, date, excerpt
   - Write your content in the editor
   - Add a cover image (optional)
   - Click "Save"
4. To edit an existing post:
   - Click on the post in the list
   - Make your changes
   - Click "Save"

### Editing Pages

1. Go to `/admin` in your browser
2. Click on "Pages" in the sidebar
3. Select the page you want to edit
4. Make your changes using the visual editor
5. Click "Save"

## 🧞 Commands

All commands are run from the root of the project:

| Command                   | Action                                           |
| :------------------------ | :----------------------------------------------- |
| `npm install`             | Installs dependencies                            |
| `npm run dev`             | Starts dev server with TinaCMS at `localhost:4321` |
| `npm run build`           | Build your production site to `./dist/`          |
| `npm run preview`         | Preview your build locally, before deploying     |
| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |

## 🌐 Deployment to Netlify

### Initial Setup

1. Push your code to GitHub:
```bash
git add .
git commit -m "Initial commit"
git push origin main
```

2. Go to [Netlify](https://netlify.com) and sign in

3. Click "Add new site" → "Import an existing project"

4. Select your GitHub repository

5. Configure build settings:
   - **Build command**: `npm run build`
   - **Publish directory**: `dist`
   - Click "Deploy site"

### Automatic Deployments

Once set up, Netlify will automatically deploy your site whenever you push changes to GitHub. This includes content changes made through TinaCMS!

### Custom Domain

To use your own domain:

1. In Netlify, go to "Domain settings"
2. Click "Add custom domain"
3. Follow the instructions to configure your DNS

## 🎨 Customization

### Changing Colors

Edit the CSS variables in `src/layouts/BaseLayout.astro`:

```css
:root {
  --color-primary: #8b0000;      /* Main brand color */
  --color-secondary: #2c3e50;    /* Secondary color */
  --color-accent: #c0392b;       /* Accent color */
  /* ... more colors */
}
```

### Adding New Pages

1. Create a new MDX file in `content/pages/`
2. Create a corresponding `.astro` file in `src/pages/`
3. Add a link to the navigation in `src/layouts/BaseLayout.astro`

### Modifying the Homepage

Edit `src/pages/index.astro` to change the homepage content and layout.

## 🔮 Future: Adding Ticket Shop

When you're ready to add ticketing (planned for ~3 years):

### Option 1: Third-Party Integration (Easiest)
- Use services like Stripe, Eventbrite, or Ticketor
- Add embedded widgets to your pages
- No major code changes required

### Option 2: Custom Solution
- Build custom ticketing forms
- Integrate with Stripe for payments
- Add customer accounts and order management
- Requires developer assistance

## 📚 Additional Resources

- [Astro Documentation](https://docs.astro.build)
- [TinaCMS Documentation](https://tina.io/docs)
- [Netlify Documentation](https://docs.netlify.com)
- [MDX Documentation](https://mdxjs.com)

## 🤝 Support

For technical issues or questions:
- Check the documentation links above
- Contact your developer
- Open an issue in the GitHub repository

## 📄 License

Copyright © 2026 Theater Ziefen. All rights reserved.