johannes.gasser/theater-ziefen-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

switch from tinacms to sanity

Browse Source
This commit is contained in:
Johannes Gasser
2026-05-07 09:36:34 +02:00
parent bd97af838d
commit bf04f8679d
30 changed files with 10345 additions and 23187 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PhotoGallery.astro
+4 -2
View File
@@ -1,6 +1,8 @@
---
import { urlFor } from '../sanity/imageUrl';
interface Props {
images: string[];
images: any[];
}
const { images } = Astro.props;
@@ -10,7 +12,7 @@ const { images } = Astro.props;
<div class="grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] md:grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-[--spacing-md] md:gap-[--spacing-sm] mt-[--spacing-lg]">
{images.map((image) => (
<div class="relative overflow-hidden rounded-lg shadow-[0_4px_10px_rgba(0,0,0,0.2)] transition-all duration-300 aspect-[4/3] hover:-translate-y-1 hover:shadow-[0_8px_20px_rgba(0,0,0,0.3)] group">
<img src={image} alt="Theater photo" loading="lazy" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" />
<img src={urlFor(image)} alt="Theater photo" loading="lazy" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" />
</div>
))}
</div>
src/pages/about.astro
+8 -6
View File
@@ -1,21 +1,23 @@
---
import BaseLayout from '../layouts/BaseLayout.astro';
import { sanityClient } from '../sanity/client';
import { renderPortableText } from '../sanity/portableText';
import { pageBySlugQuery } from '../sanity/queries';
const { Content, frontmatter } = await import('../../content/pages/about.mdx');
const page = await sanityClient.fetch(pageBySlugQuery, { slug: 'about' });
const bodyHtml = renderPortableText(page?.body);
---
<BaseLayout title={frontmatter.title} description={frontmatter.description}>
<BaseLayout title={page?.title} description={page?.description}>
<div class="page-header">
<div class="container">
<h1>{frontmatter.title}</h1>
<h1>{page?.title}</h1>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="prose">
<Content />
</div>
<div class="prose" set:html={bodyHtml} />
</div>
</div>
</BaseLayout>
src/pages/blog/[slug].astro
+18 -20
View File
@@ -1,30 +1,30 @@
---
import BaseLayout from '../../layouts/BaseLayout.astro';
import { sanityClient } from '../../sanity/client';
import { renderPortableText } from '../../sanity/portableText';
import { urlFor } from '../../sanity/imageUrl';
import { allPostsQuery } from '../../sanity/queries';
export async function getStaticPaths() {
const allPosts = import.meta.glob<{ Content: any; frontmatter: Record<string, any> }>('../../../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 posts = await sanityClient.fetch(allPostsQuery);
return posts.map((post: any) => ({
params: { slug: post.slug },
props: { post },
}));
}
const { post } = Astro.props as { post: { Content: any; frontmatter: Record<string, any> } };
const { Content, frontmatter } = post;
const { post } = Astro.props as { post: any };
const bodyHtml = renderPortableText(post.body);
---
<BaseLayout title={frontmatter.title} description={frontmatter.excerpt}>
<BaseLayout title={post.title} description={post.excerpt}>
<article class="blog-post">
<header class="post-header">
<div class="container">
<h1>{frontmatter.title}</h1>
<h1>{post.title}</h1>
<p class="post-meta">
<time datetime={frontmatter.date}>
{new Date(frontmatter.date).toLocaleDateString('de-DE', {
<time datetime={post.date}>
{new Date(post.date).toLocaleDateString('de-DE', {
year: 'numeric',
month: 'long',
day: 'numeric'
@@ -34,17 +34,15 @@ const { Content, frontmatter } = post;
</div>
</header>
{frontmatter.coverImage && (
{post.coverImage && (
<div class="post-cover">
<img src={frontmatter.coverImage} alt={frontmatter.title} />
<img src={urlFor(post.coverImage)} alt={post.title} />
</div>
)}
<div class="post-content">
<div class="container">
<div class="prose">
<Content />
</div>
<div class="prose" set:html={bodyHtml} />
</div>
</div>
src/pages/blog/index.astro
+12 -16
View File
@@ -1,14 +1,10 @@
---
import BaseLayout from '../../layouts/BaseLayout.astro';
import { sanityClient } from '../../sanity/client';
import { urlFor } from '../../sanity/imageUrl';
import { allPostsQuery } from '../../sanity/queries';
const allPostFiles = import.meta.glob<{ frontmatter: Record<string, any> }>('../../../content/blog/*.mdx', { eager: true });
const allPosts = Object.entries(allPostFiles).map(([path, post]) => ({
...post,
slug: path.split('/').pop()?.replace('.mdx', '') || ''
}));
const sortedPosts = allPosts.sort(
(a, b) => new Date(b.frontmatter.date).valueOf() - new Date(a.frontmatter.date).valueOf()
);
const allPosts = await sanityClient.fetch(allPostsQuery);
---
<BaseLayout title="Blog" description="Latest news and updates from Theater Ziefen">
@@ -21,33 +17,33 @@ const sortedPosts = allPosts.sort(
<div class="blog-content">
<div class="container">
{sortedPosts.length === 0 ? (
{allPosts.length === 0 ? (
<p class="no-posts">No blog posts yet. Check back soon!</p>
) : (
<div class="posts-list">
{sortedPosts.map((post) => (
{allPosts.map((post: any) => (
<article class="post-item">
{post.frontmatter.coverImage && (
{post.coverImage && (
<div class="post-image">
<img src={post.frontmatter.coverImage} alt={post.frontmatter.title} />
<img src={urlFor(post.coverImage)} alt={post.title} />
</div>
)}
<div class="post-content">
<h2>
<a href={`/blog/${post.slug}`}>
{post.frontmatter.title}
{post.title}
</a>
</h2>
<p class="post-meta">
<time datetime={post.frontmatter.date}>
{new Date(post.frontmatter.date).toLocaleDateString('de-DE', {
<time datetime={post.date}>
{new Date(post.date).toLocaleDateString('de-DE', {
year: 'numeric',
month: 'long',
day: 'numeric'
})}
</time>
</p>
<p class="post-excerpt">{post.frontmatter.excerpt}</p>
<p class="post-excerpt">{post.excerpt}</p>
<a href={`/blog/${post.slug}`} class="read-more">
Read full post →
</a>
src/pages/index.astro
+18 -45
View File
@@ -3,39 +3,12 @@ import BaseLayout from '../layouts/BaseLayout.astro';
import AnchorNav from '../components/AnchorNav.astro';
import TheaterSection from '../components/TheaterSection.astro';
import PhotoGallery from '../components/PhotoGallery.astro';
import { sanityClient } from '../sanity/client';
import { renderPortableText } from '../sanity/portableText';
import { urlFor } from '../sanity/imageUrl';
import { theaterHomepageQuery } from '../sanity/queries';
// Import theater homepage content
const theaterFiles = import.meta.glob('../../content/theater/*.mdx', { eager: true });
const theaterHomepage = Object.values(theaterFiles)[0] as any;
const content = theaterHomepage?.frontmatter || {};
// Helper function to render rich-text content
function renderRichText(richText: any, lang: 'de' | 'en'): string {
if (!richText || !richText.children) return '';
let html = '';
richText.children.forEach((child: any) => {
if (child.type === 'p') {
html += '<p>';
child.children.forEach((textNode: any) => {
if (textNode.type === 'text') {
html += textNode.text;
}
});
html += '</p>';
} else if (child.type === 'h3') {
html += '<h3>';
child.children.forEach((textNode: any) => {
if (textNode.type === 'text') {
html += textNode.text;
}
});
html += '</h3>';
}
});
return html;
}
const content = await sanityClient.fetch(theaterHomepageQuery) ?? {};
---
<BaseLayout title={content.title || 'Freilichttheater Ziefen 2028'}>
@@ -69,8 +42,8 @@ function renderRichText(richText: any, lang: 'de' | 'en'): string {
titleEn={content.projekt?.title_en || 'The Project'}
variant="light"
>
<div class="content-de" data-lang="de" set:html={renderRichText(content.projekt?.content_de, 'de')} />
<div class="content-en" data-lang="en" set:html={renderRichText(content.projekt?.content_en, 'en')} />
<div class="content-de" data-lang="de" set:html={renderPortableText(content.projekt?.content_de)} />
<div class="content-en" data-lang="en" set:html={renderPortableText(content.projekt?.content_en)} />
</TheaterSection>
<!-- Section 2: Wer steckt dahinter -->
@@ -80,8 +53,8 @@ function renderRichText(richText: any, lang: 'de' | 'en'): string {
titleEn={content.team?.title_en || "Who's Behind It"}
variant="dark"
>
<div class="content-de" data-lang="de" set:html={renderRichText(content.team?.content_de, 'de')} />
<div class="content-en" data-lang="en" set:html={renderRichText(content.team?.content_en, 'en')} />
<div class="content-de" data-lang="de" set:html={renderPortableText(content.team?.content_de)} />
<div class="content-en" data-lang="en" set:html={renderPortableText(content.team?.content_en)} />
{content.team?.organizations && content.team.organizations.length > 0 && (
<div class="grid grid-cols-1 md:grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-12 mt-16">
@@ -90,7 +63,7 @@ function renderRichText(richText: any, lang: 'de' | 'en'): string {
<Fragment>
{org.logo && (
<div class="mb-4 flex justify-center">
<img src={org.logo} alt={`${org.name} logo`} class="h-20 w-auto object-contain" />
<img src={urlFor(org.logo)} alt={`${org.name} logo`} class="h-20 w-auto object-contain" />
</div>
)}
<h3 class="text-3xl mb-2 text-white">{org.name}</h3>
@@ -125,8 +98,8 @@ function renderRichText(richText: any, lang: 'de' | 'en'): string {
titleEn={content.stueck?.title_en || 'The Play'}
variant="light"
>
<div class="content-de" data-lang="de" set:html={renderRichText(content.stueck?.content_de, 'de')} />
<div class="content-en" data-lang="en" set:html={renderRichText(content.stueck?.content_en, 'en')} />
<div class="content-de" data-lang="de" set:html={renderPortableText(content.stueck?.content_de)} />
<div class="content-en" data-lang="en" set:html={renderPortableText(content.stueck?.content_en)} />
</TheaterSection>
<!-- Section 4: Mitwirkung -->
@@ -136,8 +109,8 @@ function renderRichText(richText: any, lang: 'de' | 'en'): string {
titleEn={content.mitwirkung?.title_en || 'Participation in the Play'}
variant="dark"
>
<div class="content-de" data-lang="de" set:html={renderRichText(content.mitwirkung?.content_de, 'de')} />
<div class="content-en" data-lang="en" set:html={renderRichText(content.mitwirkung?.content_en, 'en')} />
<div class="content-de" data-lang="de" set:html={renderPortableText(content.mitwirkung?.content_de)} />
<div class="content-en" data-lang="en" set:html={renderPortableText(content.mitwirkung?.content_en)} />
{content.mitwirkung?.director_name && (
<div class="mt-16 p-12 bg-white/10 rounded-lg text-center">
@@ -212,8 +185,8 @@ function renderRichText(richText: any, lang: 'de' | 'en'): string {
titleEn={content.presse?.title_en || 'Press'}
variant="dark"
>
<div class="content-de" data-lang="de" set:html={renderRichText(content.presse?.content_de, 'de')} />
<div class="content-en" data-lang="en" set:html={renderRichText(content.presse?.content_en, 'en')} />
<div class="content-de" data-lang="de" set:html={renderPortableText(content.presse?.content_de)} />
<div class="content-en" data-lang="en" set:html={renderPortableText(content.presse?.content_en)} />
</TheaterSection>
<!-- Section 7: Foto Galerie -->
@@ -233,8 +206,8 @@ function renderRichText(richText: any, lang: 'de' | 'en'): string {
titleEn={content.tickets?.title_en || 'Tickets'}
variant="dark"
>
<div class="content-de" data-lang="de" set:html={renderRichText(content.tickets?.content_de, 'de')} />
<div class="content-en" data-lang="en" set:html={renderRichText(content.tickets?.content_en, 'en')} />
<div class="content-de" data-lang="de" set:html={renderPortableText(content.tickets?.content_de)} />
<div class="content-en" data-lang="en" set:html={renderPortableText(content.tickets?.content_en)} />
{content.tickets?.ticket_url && (
<div class="mt-[--spacing-lg] text-center">