feat: update project assets and components with new images and improve image handling

package-lock.json

@@ -1,10 +1,11 @@
 {
-  "name": "Gallus_Pub",
+  "name": "Gallus Pub Site",
   "version": "0.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
+      "name": "Gallus Pub Site",
       "version": "0.0.1",
       "dependencies": {
         "astro": "^5.12.0"

src/components/Drinks.astro

@@ -1,5 +1,10 @@
 ---
+import { Image } from "astro:assets";
 import "../styles/components/Drinks.css"
+import MonthlyHit from "../assets/images/MonthlyHit.png";
+import Whiskey1 from "../assets/images/whiskey/Whiskey1.png";
+import Whiskey2 from "../assets/images/whiskey/Whiskey2.png";
+import Whiskey3 from "../assets/images/whiskey/Whiskey3.png";
 
 const { id } = Astro.props;
 ---
@@ -17,7 +22,7 @@ const { id } = Astro.props;
 
     <div class="mate-vodka">
         <div class="circle" title="Mate Vodka">
-            <img src="/images/MonthlyHit.png" alt="Monats Hit" class="circle-image" />
+            <Image src={MonthlyHit} alt="Monats Hit" class="circle-image" />
             <span class="circle-label"></span>
         </div>
         <div>Mate Vodka</div>
@@ -29,15 +34,15 @@ const { id } = Astro.props;
 
     <div class="circle-row">
         <div class="circle whiskey-circle" title="Whiskey 1">
-            <img src="/images/whiskey/Whiskey1.png" alt="Whiskey 1" class="circle-image" />
+            <Image src={Whiskey1} alt="Whiskey 1" class="circle-image" />
             <span class="circle-label"></span>
         </div>
         <div class="circle whiskey-circle" title="Whiskey 2">
-            <img src="/images/whiskey/Whiskey2.png" alt="Whiskey 2" class="circle-image" />
+            <Image src={Whiskey2} alt="Whiskey 2" class="circle-image" />
             <span class="circle-label"></span>
         </div>
         <div class="circle whiskey-circle" title="Whiskey 3">
-            <img src="/images/whiskey/Whiskey3.png" alt="Whiskey 3" class="circle-image" />
+            <Image src={Whiskey3} alt="Whiskey 3" class="circle-image" />
             <span class="circle-label"></span>
         </div>
     </div>

src/components/EventsGrid.astro

@@ -2,9 +2,10 @@
 // src/components/EventsGrid.astro
 
 import HoverCard from "./HoverCard.astro";
+import type { ImageMetadata } from "astro";
 
 interface Event {
-	image: string;
+	image: ImageMetadata;
 	title: string;
 	date: string;
 	description: string;

src/components/Header.astro

@@ -1,5 +1,7 @@
 ---
 // src/components/Header.astro
+import { Image } from "astro:assets";
+import Logo from "../assets/images/Logo.png";
 const { url } = Astro;
 import "../styles/components/Header.css";
 ---
@@ -9,7 +11,7 @@ import "../styles/components/Header.css";
 	<div class="desktop-layout">
 		<div class="logo-container">
 			<a href="/">
-				<img src="/images/Logo.png" alt="Logo" class="logo" />
+				<Image src={Logo} alt="Logo" class="logo" />
 			</a>
 		</div>
 
@@ -31,7 +33,7 @@ import "../styles/components/Header.css";
 		<!-- Centered Logo -->
 		<div class="mobile-logo-container">
 			<a href="/">
-				<img src="/images/Logo.png" alt="Logo" class="logo" />
+				<Image src={Logo} alt="Logo" class="logo" />
 			</a>
 		</div>
 
@@ -65,16 +67,16 @@ import "../styles/components/Header.css";
 		const mobileMenuLinks = document.querySelectorAll('.mobile-menu a');
 		
 		// Toggle menu when burger icon is clicked
-		burgerIcon.addEventListener('click', () => {
+		burgerIcon?.addEventListener('click', () => {
 			burgerIcon.classList.toggle('active');
-			mobileMenu.classList.toggle('active');
+			mobileMenu?.classList.toggle('active');
 		});
 		
 		// Close menu when a navigation link is clicked
 		mobileMenuLinks.forEach(link => {
 			link.addEventListener('click', () => {
-				burgerIcon.classList.remove('active');
-				mobileMenu.classList.remove('active');
+				burgerIcon?.classList.remove('active');
+				mobileMenu?.classList.remove('active');
 			});
 		});
 	});

src/components/HoverCard.astro

@@ -1,11 +1,18 @@
 ---
+import { Image } from "astro:assets";
+import type { ImageMetadata } from "astro";
 import "../styles/components/HoverCard.css";
-const {title, description, image = "", date} = Astro.props;
+const {title, description, image, date} = Astro.props as {
+	title: string;
+	description: string;
+	image: ImageMetadata;
+	date: string;
+};
 ---
 
 <article class="hover-card">
 	<div class="image-container">
-		<img class="card-image" src={image} alt={title} />
+		<Image class="card-image" src={image} alt={title} />
 	</div>
 
 	<div class="hover-text">

src/components/ImageCarousel.astro

@@ -1,13 +1,15 @@
 ---
 // src/components/ImageCarousel.astro
+import { Image } from "astro:assets";
+import type { ImageMetadata } from "astro";
 import "../styles/components/ImageCarousel.css";
 
-interface Image {
-  src: string;
+interface ImageData {
+  src: ImageMetadata;
   alt: string;
 }
 
-const { images = [], id } = Astro.props as { images: Image[], id?: string };
+const { images = [], id } = Astro.props as { images: ImageData[], id?: string };
 ---
 
 <section id={id} class="image-carousel-container">
@@ -21,7 +23,7 @@ const { images = [], id } = Astro.props as { images: Image[], id?: string };
       <div class="carousel-track">
         {images.map((image, index) => (
           <div class="carousel-slide" data-index={index}>
-            <img src={image.src} alt={image.alt} class="carousel-image" />
+            <Image src={image.src} alt={image.alt} class="carousel-image" />
           </div>
         ))}
       </div>

src/components/Welcome.astro

@@ -1,6 +1,8 @@
 ---
 // src/components/Welcome.astro
+import { Image } from "astro:assets";
 import "../styles/components/Welcome.css"
+import WelcomeImg from "../assets/images/Welcome.png";
 
 const { id } = Astro.props;
 ---
@@ -52,7 +54,7 @@ const { id } = Astro.props;
 
 
 	<div class="welcome-image">
-		<img src="/images/Welcome.png" alt="Welcome background image" />
+		<Image src={WelcomeImg} alt="Welcome background image" />
 	</div>
 
 </section>

src/pages/index.astro

@@ -6,9 +6,28 @@ import EventsGrid from "../components/EventsGrid.astro";
 import Drinks from "../components/Drinks.astro";
 import ImageCarousel from "../components/ImageCarousel.astro";
 
+// Import event images
+import eventKaraoke from "../assets/images/events/event_karaoke.jpg";
+import eventPubQuiz from "../assets/images/events/event_pub-quiz.jpg";
+import eventSchlager from "../assets/images/events/event_schlager-karaoke.jpeg";
+import eventAdvent from "../assets/images/events/event_advents-kalender.jpeg";
+import eventFerien from "../assets/images/events/event_ferien.jpeg";
+import eventNeujahr from "../assets/images/events/event_neujahrs-apero.jpeg";
+
+// Import gallery images
+import Gallery1 from "../assets/images/gallery/Gallery1.png";
+import Gallery2 from "../assets/images/gallery/Gallery2.png";
+import Gallery3 from "../assets/images/gallery/Gallery3.png";
+import Gallery4 from "../assets/images/gallery/Gallery4.png";
+import Gallery5 from "../assets/images/gallery/Gallery5.png";
+import Gallery6 from "../assets/images/gallery/Gallery6.png";
+import Gallery7 from "../assets/images/gallery/Gallery7.png";
+import Gallery8 from "../assets/images/gallery/Gallery8.png";
+import Gallery9 from "../assets/images/gallery/Gallery9.png";
+
 const events = [
 		{
-		image: "/images/events/event_karaoke.jpg",
+		image: eventKaraoke,
 		title: "Karaoke",
 		date: "Mittwoch - Samstag",
 		description: `
@@ -18,7 +37,7 @@ const events = [
 		`,
 	},
 	{
-		image: "/images/events/event_pub-quiz.jpg",
+		image: eventPubQuiz,
 		title: "Pub Quiz",
 		date: "Jeden Freitag",
 		description: `
@@ -29,7 +48,7 @@ const events = [
 		`,
 	},
 		{
-		image: "/images/events/event_schlager-karaoke.jpeg",
+		image: eventSchlager,
 		title: "Schlager Hüttenzauber Karaoke",
 		date: "27. November - 19:00 Uhr",
 		description: `
@@ -37,7 +56,7 @@ const events = [
 		`,
 	},
 			{
-		image: "/images/events/event_advents-kalender.jpeg",
+		image: eventAdvent,
 		title: "Adventskalender",
 		date: "03. Dezember - 20. Dezember 2025",
 		description: `
@@ -45,7 +64,7 @@ const events = [
 		`,
 	},
 	{
-		image: "/images/events/event_ferien.jpeg",
+		image: eventFerien,
 		title: "Weihnachtsferien",
 		date: "21. Dezember 2025 - 01. Januar 2026",
 		description: `
@@ -53,7 +72,7 @@ const events = [
 		`,
 	},
 	{
-		image: "/images/events/event_neujahrs-apero.jpeg",
+		image: eventNeujahr,
 		title: "Neujahrs-Apero",
 		date: "02. Januar 2026 - 18:00-20:00 Uhr",
 		description: `
@@ -64,15 +83,15 @@ const events = [
 ];
 
 const images = [
-	{ src: "/images/gallery/Gallery7.png", alt: "Siebtes Bild" },
-	{ src: "/images/gallery/Gallery8.png", alt: "Achtes Bild" },
-	{ src: "/images/gallery/Gallery9.png", alt: "Neuntes Bild" },
-	{ src: "/images/gallery/Gallery6.png", alt: "Sechstes Bild" },
-	{ src: "/images/gallery/Gallery1.png", alt: "Erstes Bild" },
-	{ src: "/images/gallery/Gallery2.png", alt: "Zweites Bild" },
-	{ src: "/images/gallery/Gallery3.png", alt: "Drittes Bild" },
-	{ src: "/images/gallery/Gallery4.png", alt: "Viertes Bild" },
-	{ src: "/images/gallery/Gallery5.png", alt: "Fünftes Bild" },
+	{ src: Gallery7, alt: "Siebtes Bild" },
+	{ src: Gallery8, alt: "Achtes Bild" },
+	{ src: Gallery9, alt: "Neuntes Bild" },
+	{ src: Gallery6, alt: "Sechstes Bild" },
+	{ src: Gallery1, alt: "Erstes Bild" },
+	{ src: Gallery2, alt: "Zweites Bild" },
+	{ src: Gallery3, alt: "Drittes Bild" },
+	{ src: Gallery4, alt: "Viertes Bild" },
+	{ src: Gallery5, alt: "Fünftes Bild" },
 ];
 ---