some stuff for smallpostpreview

package.json

@@ -12,6 +12,9 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^6.0.8"
+    "@astrojs/preact": "^5.0.2",
+    "@astrojs/rss": "^4.0.17",
+    "astro": "^6.4.6",
+    "preact": "^10.29.0"
   }
 }

src/components/PostPreviewSmall.astro

@@ -0,0 +1,61 @@
+---
+import type { Post } from "../types/global";
+
+interface Props {
+  post: Post;
+  url: string;
+}
+
+const { post, url } = Astro.props;
+---
+
+<a href={url}>
+  <div class="frame">
+    <img src="" />
+    <h3>{post.title}</h3>
+    <span class="subtitle">{post.subtitle}</span>
+    <br />
+    <br />
+    <div class="bottom-info">
+      <span>Author: {post.author}</span>
+      <span>{post.date}</span>
+    </div>
+  </div>
+</a>
+
+<style>
+  .frame {
+    flex: auto 0 0;
+    padding: 8px;
+    display: block;
+    border: 2px solid black;
+    border-radius: 12px;
+    width: 240px;
+  }
+
+  img {
+    max-height: 230px;
+    width: 220px;
+    border-radius: 12px;
+    aspect-ratio: 1 / 1;
+  }
+
+  h2 {
+    margin-top: 8px;
+    margin-bottom: 0;
+  }
+
+  .subtitle {
+    font-weight: lighter;
+  }
+
+ .bottom-info {
+    display: flex;
+    justify-content: space-between;
+ } 
+
+  a {
+    text-decoration: none;
+    color: black;
+  }
+</style>

src/layouts/BlogPostLayout.astro

@@ -0,0 +1,9 @@
+---
+import Main from "./Main.astro";
+
+const { frontmatter } = Astro.props;
+---
+
+<Main title={frontmatter.title}>
+    <slot/>
+</Main>

src/layouts/Main.astro

@@ -1,6 +1,6 @@
 ---
-import Footer from "../components/footer.astro";
-import Header from "../components/header.astro";
+import Footer from "../components/Footer.astro";
+import Header from "../components/Header.astro";
 import "../styles/global.css";
 
 const { title } = Astro.props;

src/layouts/postPreviewSmall.astro

@@ -1,40 +0,0 @@
----
-const { image, title, subtitle, description } = Astro.props;
----
-
-<div>
-    <img src={image} />
-    <h2>{title}</h2>
-    <span class="subtitle">{subtitle}</span>
-    <p>{description}</p>
-</div>
-
-<style>
-    div {
-        margin: 8px;
-        padding: 8px;
-        display: block;
-        border: 2px solid black;
-        border-radius: 12px;
-    }
-
-    img {
-        max-height: 100%;
-        width: 100%;
-        border-radius: 12px;
-        aspect-ratio: 1 / 1;
-    }
-
-    h2 {
-        margin-top: 8px;
-        margin-bottom: 0;
-    }
-
-    .subtitle {
-        font-weight: lighter;
-    }
-
-    p {
-        margin-bottom: 0;
-    }
-</style>

src/pages/about.astro

@@ -1,5 +1,5 @@
 ---
-import Main from "../layouts/main.astro";
+import Main from "../layouts/Main.astro";
 ---
 
 <Main title="Über uns" />

src/pages/index.astro

@@ -1,21 +1,27 @@
 ---
-import Main from "../layouts/main.astro";
-import PostPreviewSmall from "../layouts/postPreviewSmall.astro";
+import Main from "../layouts/Main.astro";
+import PostPreviewSmall from "../components/PostPreviewSmall.astro";
+
+const allPosts: Array<any> = Object.values(
+  import.meta.glob("./posts/*.md", { eager: true })
+);
 ---
 
 <Main title="Startseite">
-	<div class="grid">
-		
-		<div>Test</div><div>Test</div><div>Test</div>
-		<div>Test</div>
-	</div>
+  <div class="post-grid">
+    {
+      allPosts.map((post_file: any) => (
+        <PostPreviewSmall url={post_file.url} post={post_file.frontmatter}> </PostPreviewSmall>
+      ))
+    }
+  </div>
 </Main>
 
 <style>
-	.grid {
-		padding: 24px 24px;
-		width: 100vw - 48px;
-		display: grid;
-		grid-template-columns: auto auto auto auto ;
-	}
+  .post-grid {
+    padding: 24px 24px;
+    display: flex;
+		gap: 16px;
+		flex-wrap: wrap;	
+  }
 </style>

src/pages/posts/110626_Test1.md

@@ -0,0 +1,8 @@
+---
+title: 'The first post'
+subtitle: "In the first post we're talking about some nice luxury hotels. Stay tuned!"
+author: 'Tim'
+date: '11.06.2026'
+---
+
+Here is my _great_ post!

src/pages/posts/120626_Test2.md

@@ -0,0 +1,8 @@
+---
+title: 'The second post'
+subtitle: 'In the second post we re talking about some nice luxury hotels. Stay tuned!'
+author: 'Tim'
+date: '12.06.2026'
+---
+
+Here is my _great_ post!

src/pages/posts/130626_Test3.md

@@ -0,0 +1,8 @@
+---
+title: 'The third post'
+subtitle: 'In the third post we re talking about some nice luxury hotels. Stay tuned!'
+author: 'Elli'
+date: '13.06.2026'
+---
+
+Here is my _great_ post!

src/types/global.ts

@@ -0,0 +1,6 @@
+export interface Post {
+    title: String,
+    subtitle: String, 
+    date: String, 
+    author: String,
+}

tsconfig.json

@@ -1,5 +1,15 @@
 {
   "extends": "astro/tsconfigs/strict",
-  "include": [".astro/types.d.ts", "**/*"],
-  "exclude": ["dist"]
+  "include": [
+    ".astro/types.d.ts",
+    "src/**/*"
+  ],
+  "exclude": [
+    "dist"
+  ],
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "types": ["vite/client"]
+  }
 }