diff --git a/src/assets/blog_img/blog1_title.png b/src/assets/blog_img/blog1_title.png new file mode 100755 index 0000000..b351059 Binary files /dev/null and b/src/assets/blog_img/blog1_title.png differ diff --git a/src/assets/blog_img/blog2_title.png b/src/assets/blog_img/blog2_title.png new file mode 100755 index 0000000..0e90424 Binary files /dev/null and b/src/assets/blog_img/blog2_title.png differ diff --git a/src/assets/blog_img/blog3_title.png b/src/assets/blog_img/blog3_title.png new file mode 100755 index 0000000..3757812 Binary files /dev/null and b/src/assets/blog_img/blog3_title.png differ diff --git a/src/components/PostPreviewLarge.astro b/src/components/PostPreviewLarge.astro new file mode 100644 index 0000000..d4d5c47 --- /dev/null +++ b/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); +--- + + +
+
+ {post.image.alt} +
+
+

{post.title}

+ {post.subtitle} +

{post.description}

+
+ Author: {post.author} + {post.date} +
+
+
+ + + diff --git a/src/components/PostPreviewSmall.astro b/src/components/PostPreviewSmall.astro index a56ee7c..03a7917 100644 --- a/src/components/PostPreviewSmall.astro +++ b/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) --- - +
- -

{post.title}

- {post.subtitle} -
-
+ {post.image.alt} +

{post.title}

+ {post.subtitle} +

{post.description}

Author: {post.author} {post.date} @@ -25,37 +28,26 @@ const { post, url } = Astro.props; diff --git a/src/lib/findImage.ts b/src/lib/findImage.ts new file mode 100644 index 0000000..b42a0a8 --- /dev/null +++ b/src/lib/findImage.ts @@ -0,0 +1,13 @@ +const images = import.meta.glob("/src/assets/**/*.{jpg,png}", { eager: true }) as Record; + +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; +} \ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro index 6c7e8dd..c650ad0 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,18 +1,28 @@ --- import Main from "../layouts/Main.astro"; import PostPreviewSmall from "../components/PostPreviewSmall.astro"; +import PostPreviewLarge from "../components/PostPreviewLarge.astro"; const allPosts: Array = Object.values( import.meta.glob("./posts/*.md", { eager: true }) ); + +const mostRecentPost = allPosts.at(allPosts.length - 1); +console.log(mostRecentPost) ---
+
{ - allPosts.map((post_file: any) => ( - - )) + allPosts + .slice(0, allPosts.length - 1) + .map((post_file: any) => ( + + )) }
@@ -21,7 +31,7 @@ const allPosts: Array = Object.values( .post-grid { padding: 24px 24px; display: flex; - gap: 16px; - flex-wrap: wrap; + gap: 32px; + flex-wrap: wrap; } diff --git a/src/pages/posts/110626_Test1.md b/src/pages/posts/110626_Test1.md index 443a372..eacc423 100644 --- a/src/pages/posts/110626_Test1.md +++ b/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' --- diff --git a/src/pages/posts/120626_Test2.md b/src/pages/posts/120626_Test2.md index 9d21a86..71a7f81 100644 --- a/src/pages/posts/120626_Test2.md +++ b/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' --- diff --git a/src/pages/posts/130626_Test3.md b/src/pages/posts/130626_Test3.md index 450407b..6ac8018 100644 --- a/src/pages/posts/130626_Test3.md +++ b/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' --- diff --git a/src/styles/global.css b/src/styles/global.css index 965206d..f22cfef 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -23,4 +23,23 @@ 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; } \ No newline at end of file diff --git a/src/types/global.ts b/src/types/global.ts index 73b1a8d..65d8aa8 100644 --- a/src/types/global.ts +++ b/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 + } } \ No newline at end of file