LargePreview

src/components/PostPreviewLarge.astro

@@ -0,0 +1,75 @@
+---
+import type { Post } from "../types/global";
+import { findImageByPath } from "../lib/findImage";
+
+interface Props {
+  post: Post;
+  url: string;
+}
+
+const { post, url } = Astro.props;
+
+const img = findImageByPath(post.image.path);
+---
+
+<a href={url} class="no-link-link">
+  <div class="wide-container">
+    <div class="image-col col">
+      <img src={img.src} alt={post.image.alt} />
+    </div>
+    <div class="text-col col">
+      <h2 class="headline">{post.title}</h2>
+      <h7 class="subtitle">{post.subtitle}</h7>
+      <p class="description">{post.description}</p>
+      <div class="bottom-info">
+        <span>Author: {post.author}</span>
+        <span>{post.date}</span>
+      </div>
+    </div>
+  </div>
+</a>
+
+<style>
+  .wide-container {
+    display: flex;
+    gap: 32px;
+    padding: 24px;
+  }
+
+  .col {
+    width: 50%;
+    box-sizing: border-box;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .text-col {
+    flex-direction: column;
+    justify-content: flex-start;
+    margin: 32px 0;
+  }
+
+  h2 {
+    margin: 0;
+  }
+
+  .image-col {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .image-col img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+    border-radius: 8px;
+  }
+
+  .bottom-info {
+    display: flex;
+    justify-content: space-between;
+  }
+</style>

src/components/PostPreviewSmall.astro

@@ -1,4 +1,6 @@
 ---
+
+import { findImageByPath } from "../lib/findImage";
 import type { Post } from "../types/global";
 
 interface Props {
@@ -7,15 +9,16 @@ interface Props {
 }
 
 const { post, url } = Astro.props;
+
+const img = findImageByPath(post.image.path)
 ---
 
-<a href={url}>
+<a href={url} class="no-link-link">
   <div class="frame">
-    <img src="" />
+    <img src={img.src} alt={post.image.alt} />
-    <h3>{post.title}</h3>
+    <h2 class="headline">{post.title}</h2>
-    <span class="subtitle">{post.subtitle}</span>
+    <h7 class="subtitle">{post.subtitle}</h7>
-    <br />
+    <p class="description">{post.description}</p>
-    <br />
     <div class="bottom-info">
       <span>Author: {post.author}</span>
       <span>{post.date}</span>
@@ -25,37 +28,26 @@ const { post, url } = Astro.props;
 
 <style>
   .frame {
-    flex: auto 0 0;
+    flex: 220px; auto 0 0;
     padding: 8px;
-    display: block;
+    display: flex;
-    border: 2px solid black;
+    flex-direction: column;
-    border-radius: 12px;
+    border: 1px solid black;
+    border-radius: 8px;
     width: 240px;
+    height: 100%;
   }
 
   img {
-    max-height: 230px;
+    max-height: 220px;
     width: 220px;
-    border-radius: 12px;
+    border-radius: 8px;
     aspect-ratio: 1 / 1;
   }
 
-  h2 {
-    margin-top: 8px;
-    margin-bottom: 0;
-  }
-
-  .subtitle {
-    font-weight: lighter;
-  }
-
   .bottom-info {
     display: flex;
     justify-content: space-between;
- } 
+    margin-top: auto;
-
-  a {
-    text-decoration: none;
-    color: black;
   }
 </style>

src/lib/findImage.ts

@@ -0,0 +1,13 @@
+const images = import.meta.glob("/src/assets/**/*.{jpg,png}", { eager: true }) as Record<string, { default: string }>;
+
+export function findImageByPath(path: string, { fallback }: { fallback?: string } = {}): any {
+  if (!path) return fallback ?? null;
+  const key = Object.keys(images).find(
+    p => p.endsWith("/" + path) || p.endsWith(path)
+  );
+  if (!key) {
+    if (fallback) return fallback;
+    throw new Error(`Image not found: ${path}`);
+  }
+  return images[key].default;
+}

src/pages/index.astro

@@ -1,17 +1,27 @@
 ---
 import Main from "../layouts/Main.astro";
 import PostPreviewSmall from "../components/PostPreviewSmall.astro";
+import PostPreviewLarge from "../components/PostPreviewLarge.astro";
 
 const allPosts: Array<any> = Object.values(
   import.meta.glob("./posts/*.md", { eager: true })
 );
+
+const mostRecentPost = allPosts.at(allPosts.length - 1);
+console.log(mostRecentPost)
 ---
 
 <Main title="Startseite">
+  <PostPreviewLarge
+    url={mostRecentPost.url}
+    post={mostRecentPost.frontmatter}
+  />
   <div class="post-grid">
     {
-      allPosts.map((post_file: any) => (
+      allPosts
-        <PostPreviewSmall url={post_file.url} post={post_file.frontmatter}> </PostPreviewSmall>
+        .slice(0, allPosts.length - 1)
+        .map((post_file: any) => (
+          <PostPreviewSmall url={post_file.url} post={post_file.frontmatter} />
         ))
     }
   </div>
@@ -21,7 +31,7 @@ const allPosts: Array<any> = Object.values(
   .post-grid {
     padding: 24px 24px;
     display: flex;
-		gap: 16px;
+    gap: 32px;
     flex-wrap: wrap;
   }
 </style>

src/pages/posts/110626_Test1.md

@@ -1,6 +1,10 @@
 ---
 title: 'The first post'
-subtitle: "In the first post we're talking about some nice luxury hotels. Stay tuned!"
+subtitle: "Luxury Hotels at its best!"
+description: "In the first post we're talking about some nice luxury hotels. Stay tuned!"
+image:
+    path: "blog1_title.png"
+    alt: "This is alt Text"
 author: 'Tim'
 date: '11.06.2026'
 ---

src/pages/posts/120626_Test2.md

@@ -1,6 +1,9 @@
 ---
 title: 'The second post'
 subtitle: 'In the second post we re talking about some nice luxury hotels. Stay tuned!'
+image:
+    path: "/assets/blog_img/blog2_title.png"
+    alt: "This is alt Text"
 author: 'Tim'
 date: '12.06.2026'
 ---

src/pages/posts/130626_Test3.md

@@ -1,6 +1,10 @@
 ---
 title: 'The third post'
-subtitle: 'In the third post we re talking about some nice luxury hotels. Stay tuned!'
+subtitle: 'Lets go to Scandinavia. By bike! Hell yeah.'
+description: "In the first post we're talking about some nice luxury hotels. Stay tuned!"
+image:
+    path: "/assets/blog_img/blog3_title.png"
+    alt: "This is alt Text"
 author: 'Elli'
 date: '13.06.2026'
 ---

src/styles/global.css

@@ -24,3 +24,22 @@ body {
 .nav-link:hover {
     text-decoration: underline;
 }
+
+.no-link-link {
+    text-decoration: none;
+    color: black;
+}
+
+.headline {
+    margin-top: 8px;
+    margin-bottom: 0;
+    font-weight: bold;
+}
+
+.subtitle {
+    font-weight: lighter;
+}
+
+.description {
+    font-weight: bold;
+}

src/types/global.ts

@@ -1,6 +1,11 @@
 export interface Post {
     title: String,
     subtitle: String, 
+    description: String,
     date: String, 
     author: String,
+    image: {
+        path: string,
+        alt: string
+    }
 }