feature: add features

src/content/config.ts

@@ -0,0 +1,13 @@
+import { defineCollection, z } from 'astro:content';
+
+const features = defineCollection({
+	type: 'content',
+	schema: ({ image }) => z.object({
+		title: z.string(),
+		lead: z.string().optional(),
+		image: image().optional(),
+		tags: z.array(z.string()).optional()
+	}),
+});
+
+export const collections = { features };

src/content/features/digests/index.md

@@ -0,0 +1,8 @@
+---
+title: Auszüge
+lead: Daten einfach aus HeimV exportieren
+image: ./screenshot.png
+---
+
+
+

src/layouts/Markdown.astro

@@ -0,0 +1,7 @@
+---
+
+---
+
+<div class="prose prose-headings:font-heading prose-p:my-3 max-w-full">
+  <slot />
+</div>

src/layouts/MarkdownLayout.astro

@@ -1,14 +1,15 @@
 ---
 import Layout from "./Layout.astro";
+import Markdown from "./Markdown.astro";
 const { frontmatter } = Astro.props;
 ---
 
 <Layout title={frontmatter.title}>
-  <main class="container mx-auto max-w-3xl p-4 h-min-screen">
+  <main class="container mx-auto max-w-3xl p-4 min-h-screen">
     <div class="bg-white rounded-md shadow p-10">
-      <div class="prose prose-headings:font-heading prose-p:my-3 max-w-full">
+      <Markdown>
         <slot />
-      </div>
+      </Markdown>
     </div>
   </main>
 </Layout>

src/pages/features/[...slug]/index.astro

@@ -2,6 +2,7 @@
 import { type CollectionEntry, getCollection } from "astro:content";
 import Layout from "../../../layouts/Layout.astro";
 import { Image } from "astro:assets";
+import Markdown from "../../../layouts/Markdown.astro";
 
 export async function getStaticPaths() {
   const features = await getCollection("features");
@@ -14,13 +15,16 @@ type Props = CollectionEntry<"features">;
 
 const feature = Astro.props;
 const { Content } = await feature.render();
-const { title, image } = feature.data;
+const { title, lead, image } = feature.data;
 ---
 
 <Layout title={title}>
-  <main class="container pb-4 mt-5 mx-auto">
-    <Image src={image} alt={title} />
-    <h1 class="text-7xl text-center">{title}</h1>
-    <Content />
+  <main class="container mx-auto max-w-5xl p-4 min-h-screen">
+    <h1 class="text-5xl font-heading text-center">{title}</h1>
+    {image && <Image src={image} alt={title} />}
+    {lead && <p class="text-center italic">{lead}</p>}
+    <Markdown>
+      <Content />
+    </Markdown>
   </main>
 </Layout>