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
@@ -0,0 +1,236 @@
|
||||
---
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const allPosts = await import.meta.glob('../../../content/blog/*.mdx', { eager: true });
|
||||
|
||||
return Object.entries(allPosts).map(([path, post]) => {
|
||||
const slug = path.split('/').pop()?.replace('.mdx', '') || '';
|
||||
return {
|
||||
params: { slug },
|
||||
props: { post },
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
const { post } = Astro.props;
|
||||
const { Content, frontmatter } = post;
|
||||
---
|
||||
|
||||
<BaseLayout title={frontmatter.title} description={frontmatter.excerpt}>
|
||||
<article class="blog-post">
|
||||
<header class="post-header">
|
||||
<div class="container">
|
||||
<h1>{frontmatter.title}</h1>
|
||||
<p class="post-meta">
|
||||
<time datetime={frontmatter.date}>
|
||||
{new Date(frontmatter.date).toLocaleDateString('de-DE', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}
|
||||
</time>
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{frontmatter.coverImage && (
|
||||
<div class="post-cover">
|
||||
<img src={frontmatter.coverImage} alt={frontmatter.title} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div class="post-content">
|
||||
<div class="container">
|
||||
<div class="prose">
|
||||
<Content />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="post-footer">
|
||||
<div class="container">
|
||||
<a href="/blog" class="back-link">← Back to all posts</a>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.post-header {
|
||||
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
|
||||
color: white;
|
||||
padding: 4rem 0 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.post-header h1 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.post-cover {
|
||||
width: 100%;
|
||||
max-height: 500px;
|
||||
overflow: hidden;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.post-cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.post-content {
|
||||
padding: 3rem 0;
|
||||
}
|
||||
|
||||
.prose {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.8;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.prose :global(h1) {
|
||||
font-size: 2.5rem;
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #2c3e50;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.prose :global(h2) {
|
||||
font-size: 2rem;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 0.75rem;
|
||||
color: #2c3e50;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.prose :global(h3) {
|
||||
font-size: 1.5rem;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.prose :global(p) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.prose :global(ul),
|
||||
.prose :global(ol) {
|
||||
margin-bottom: 1.5rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.prose :global(li) {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.prose :global(a) {
|
||||
color: #8b0000;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.prose :global(a:hover) {
|
||||
color: #c0392b;
|
||||
}
|
||||
|
||||
.prose :global(strong) {
|
||||
font-weight: 700;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.prose :global(blockquote) {
|
||||
border-left: 4px solid #8b0000;
|
||||
padding-left: 1.5rem;
|
||||
margin: 2rem 0;
|
||||
font-style: italic;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.prose :global(code) {
|
||||
background-color: #f8f9fa;
|
||||
padding: 0.2rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.prose :global(pre) {
|
||||
background-color: #2c3e50;
|
||||
color: white;
|
||||
padding: 1.5rem;
|
||||
border-radius: 6px;
|
||||
overflow-x: auto;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.prose :global(pre code) {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.prose :global(img) {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 6px;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.post-footer {
|
||||
padding: 2rem 0 3rem;
|
||||
border-top: 1px solid #e1e8ed;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
color: #8b0000;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
color: #c0392b;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.post-header h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.prose {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.prose :global(h1) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.prose :global(h2) {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.prose :global(h3) {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.post-cover {
|
||||
max-height: 300px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user