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
+244
-14
@@ -1,17 +1,247 @@
|
||||
---
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
|
||||
const recentPosts = await Astro.glob('../../../content/blog/*.mdx');
|
||||
const sortedPosts = recentPosts
|
||||
.sort((a, b) => new Date(b.frontmatter.date).valueOf() - new Date(a.frontmatter.date).valueOf())
|
||||
.slice(0, 3);
|
||||
---
|
||||
|
||||
---
|
||||
<BaseLayout title="Home">
|
||||
<div class="hero">
|
||||
<div class="container">
|
||||
<h1 class="hero-title">Theater Ziefen</h1>
|
||||
<p class="hero-subtitle">An Unforgettable Theatrical Experience</p>
|
||||
<p class="hero-date">Coming 2029</p>
|
||||
<div class="hero-cta">
|
||||
<a href="/about" class="btn btn-primary">Learn More</a>
|
||||
<a href="/blog" class="btn btn-secondary">Latest Updates</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>Astro</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Astro</h1>
|
||||
</body>
|
||||
</html>
|
||||
<section class="intro">
|
||||
<div class="container">
|
||||
<h2>Welcome to Theater Ziefen</h2>
|
||||
<p>
|
||||
We are excited to bring you an exceptional theatrical production in 2029.
|
||||
This website will be your hub for all updates, news, and information about
|
||||
our upcoming show.
|
||||
</p>
|
||||
<p>
|
||||
Stay connected with us through our blog, where we'll share behind-the-scenes
|
||||
insights, production updates, and announcements about ticket sales when they
|
||||
become available.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{sortedPosts.length > 0 && (
|
||||
<section class="recent-posts">
|
||||
<div class="container">
|
||||
<h2>Latest Updates</h2>
|
||||
<div class="posts-grid">
|
||||
{sortedPosts.map((post) => (
|
||||
<article class="post-card">
|
||||
<h3>
|
||||
<a href={`/blog/${post.file.split('/').pop()?.replace('.mdx', '')}`}>
|
||||
{post.frontmatter.title}
|
||||
</a>
|
||||
</h3>
|
||||
<p class="post-date">
|
||||
{new Date(post.frontmatter.date).toLocaleDateString('de-DE', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}
|
||||
</p>
|
||||
<p class="post-excerpt">{post.frontmatter.excerpt}</p>
|
||||
<a href={`/blog/${post.file.split('/').pop()?.replace('.mdx', '')}`} class="read-more">
|
||||
Read more →
|
||||
</a>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
<div class="view-all">
|
||||
<a href="/blog" class="btn btn-secondary">View All Posts</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.hero {
|
||||
background: linear-gradient(135deg, #2c3e50 0%, #8b0000 100%);
|
||||
color: white;
|
||||
padding: 6rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 1rem;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.hero-date {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #ffd700;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 4px;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #c0392b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #8b0000;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: white;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: #f8f9fa;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.intro {
|
||||
padding: 4rem 0;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.intro h2 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #2c3e50;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.intro p {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.8;
|
||||
max-width: 800px;
|
||||
margin: 0 auto 1rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.recent-posts {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.recent-posts h2 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 2rem;
|
||||
color: #2c3e50;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.posts-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.post-card {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.post-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.post-card h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.post-card h3 a {
|
||||
color: #2c3e50;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.post-card h3 a:hover {
|
||||
color: #8b0000;
|
||||
}
|
||||
|
||||
.post-date {
|
||||
color: #999;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.post-excerpt {
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.read-more {
|
||||
color: #8b0000;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.read-more:hover {
|
||||
color: #c0392b;
|
||||
}
|
||||
|
||||
.view-all {
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.intro h2,
|
||||
.recent-posts h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.posts-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user