ok

css/album.css

@@ -1,4 +1,4 @@
-#portfolio-grid {
+#album-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-auto-flow: dense;

html/album.templ

@@ -0,0 +1,17 @@
+package html
+templ Album(images []string, activePage string, pages []string) {
+	@layout("album") {
+		<main>
+			@albumHeader(activePage, pages)
+			<section>
+				<div id="album-grid">
+					for _, img := range images {
+						<div>
+							@AvifImage("album/"+img, "album", true)
+						</div>
+					}
+				</div>
+			</section>
+		</main>
+	}
+}

html/image.templ

@@ -21,15 +21,14 @@ func processImage(fileName string) string {
 		log.Fatal(err)
 	}
 
-	return dst[4:]
+	return "/" + dst[4:]
 }
 
-templ AvifImage(srcPath, alt string, lazy bool, priority bool) {
+templ AvifImage(srcPath, alt string, lazy bool) {
 	<img src={ processImage(srcPath) } alt={ alt }
 		if lazy {
 			loading="lazy"
-		}
-		if priority {
+		} else {
 			fetchpriority="high"
 		}
 	/>

html/index.templ

@@ -10,20 +10,20 @@ templ Index() {
 						Naturalne składniki, domowe receptury i pasja. Tworzymy torty i wypieki na Twoje najważniejsze chwile
 						- od codziennych radości po wielkie uroczystości
 					</p>
-					<a href="wyroby.html" class="btn">Zobacz naszą ofertę</a>
+					<a href="/wyroby/" class="btn">Zobacz naszą ofertę</a>
 				</div>
 				<div>
-					@AvifImage("001.avif", "tort", false, true)
+					@AvifImage("001.avif", "tort", false)
 				</div>
 			</header>
 			<section id="about-us">
 				<div>
 					<div>
 						<div>
-							@AvifImage("002.avif", "kawiarnia", true, false)
+							@AvifImage("002.avif", "kawiarnia", true)
 						</div>
 						<div>
-							@AvifImage("003.avif", "kawiarnia", true, false)
+							@AvifImage("003.avif", "kawiarnia", true)
 						</div>
 					</div>
 					<div>
@@ -42,12 +42,12 @@ templ Index() {
 				<h2>Nasze Wyroby</h2>
 				<div class="card">
 					<div>
-						@AvifImage("004.avif", "tort", true, false)
+						@AvifImage("004.avif", "tort", true)
 					</div>
 					<div>
 						<h3>Torty Okazjonalne</h3>
 						<p>Weselne, urodzinowe i te bez okazji – od klasyki po nowoczesne musy.</p>
-						<a href="wyroby_torty.html">
+						<a href="/wyroby/torty/">
 							Przeglądaj Torty
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
@@ -69,12 +69,12 @@ templ Index() {
 				</div>
 				<div class="card">
 					<div>
-						@AvifImage("005.avif", "ciasto", true, false)
+						@AvifImage("005.avif", "ciasto", true)
 					</div>
 					<div class="greener">
 						<h3>Domowe Ciasta</h3>
 						<p>Zapach tradycji: od serników po puszyste bezy</p>
-						<a href="wyroby.html">
+						<a href="/wyroby/">
 							Wyberz ciasto
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
@@ -96,12 +96,12 @@ templ Index() {
 				</div>
 				<div class="card">
 					<div>
-						@AvifImage("006.avif", "slodkosci", true, false)
+						@AvifImage("006.avif", "slodkosci", true)
 					</div>
 					<div>
 						<h3>Słodkie Stoły</h3>
 						<p>Kompleksowa oprawa słodkości na większe przyjęcia.</p>
-						<a href="wyroby_slodkie_stoly.html">
+						<a href="/wyroby/slodkie_stoly/">
 							Sprawdź słodkie stoły
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
@@ -174,10 +174,10 @@ templ Index() {
 					</div>
 					<div>
 						<div>
-							@AvifImage("007.avif", "kawiarnia", true, false)
+							@AvifImage("007.avif", "kawiarnia", true)
 						</div>
 						<div>
-							@AvifImage("008.avif", "ciasto i kawa", true, false)
+							@AvifImage("008.avif", "ciasto i kawa", true)
 						</div>
 					</div>
 				</div>

html/kawiarnia.templ

@@ -13,7 +13,7 @@ templ Kawiarnia() {
 					</p>
 				</div>
 				<div>
-					@AvifImage("009.avif", "kawiarnia", false, true)
+					@AvifImage("009.avif", "kawiarnia", false)
 					<div></div>
 				</div>
 			</header>

html/layout.templ

@@ -11,21 +11,22 @@ templ layout(activePage string) {
 			<title>Piekarnik Gosi</title>
 			<meta name="viewport" content="width=device-width,initial-scale=1"/>
 			<meta name="description" content=""/>
-			<link href="style.css" rel="stylesheet"/>
-			<link rel="icon" href="images/favicon.avif"/>
-			<script src="htmx.min.js"></script>
-			<script defer src="portfolio.js"></script>
+			<link href="/style.css" rel="stylesheet"/>
+			<link rel="icon" href="/images/favicon.avif"/>
+			<script src="/htmx.min.js"></script>
+			<script src="/preload.js"></script>
+			<script defer src="/album.js"></script>
 		</head>
-		<body hx-boost="true">
+		<body hx-boost="true" hx-ext="preload" preload="mouseover">
 			<nav>
 				<div>
-					<a href="index.html">
-						<img src="images/logo.svg" alt="logo"/>
+					<a href="/">
+						<img src="/images/logo.svg" alt="logo"/>
 					</a>
 					<div>
 						@Link(activePage, "index", "Strona Główna")
 						@Link(activePage, "wyroby", "Wyroby")
-						@Link(activePage, "portfolio", "Portfolio")
+						@Link(activePage, "album", "Album")
 						@Link(activePage, "kawiarnia", "Kawiarnia")
 					</div>
 					<a class="btn" href="#footer">Kontakt</a>
@@ -35,7 +36,7 @@ templ layout(activePage string) {
 			<footer id="footer">
 				<div>
 					<div>
-						<img src="images/logo.svg" alt="logo" style="width: 14rem"/>
+						<img src="/images/logo.svg" alt="logo" style="width: 14rem"/>
 						<p>Pasja, natura i domowy smak w każdym kawałku ciasta.</p>
 					</div>
 				</div>
@@ -179,7 +180,11 @@ templ layout(activePage string) {
 templ Link(activePage, targetPage, title string) {
 	<a
 		if activePage != targetPage {
-			href={ fmt.Sprint(targetPage, ".html") }
+			if targetPage == "index" {
+				href="/"
+			} else {
+				href={ fmt.Sprint("/", targetPage, "/") }
+			}
 		}
 	>{ title }</a>
 }
@@ -187,7 +192,11 @@ templ Link(activePage, targetPage, title string) {
 templ GreenLink(activePage, targetPage, title string) {
 	<a
 		if activePage != targetPage {
-			href={ fmt.Sprint(targetPage, ".html") }
+			if targetPage == "index" {
+				href="/"
+			} else {
+				href={ fmt.Sprint("/", targetPage, "/") }
+			}
 		}
 		class="btn-green"
 	>{ title }</a>
@@ -206,23 +215,23 @@ templ subnavHeader(title, description string) {
 templ wyrobyHeader(activePage string) {
 	@subnavHeader("Nasze słodkości", "Poznaj nasze tradycyjne receptury przekute w nowoczesne formy. Każdy wypiek to historia pasji, a każde lody to powiew naturalnej świeżości") {
 		@GreenLink(activePage, "wyroby", "Ciasta")
-		@GreenLink(activePage, "wyroby_deserki", "Deserki")
-		@GreenLink(activePage, "wyroby_torty", "Torty")
-		@GreenLink(activePage, "wyroby_slodkie_stoly", "Słodkie stoły")
-		@GreenLink(activePage, "wyroby_lody", "Lody")
+		@GreenLink(activePage, "wyroby/deserki", "Deserki")
+		@GreenLink(activePage, "wyroby/torty", "Torty")
+		@GreenLink(activePage, "wyroby/slodkie_stoly", "Słodkie stoły")
+		@GreenLink(activePage, "wyroby/lody", "Lody")
 	}
 }
 
 func to_url(input string) string {
 	lower_case := strings.ToLower(input)
-	return "portfolio_" + strings.NewReplacer(" ", "_", "ł", "l", "ó", "o").Replace(lower_case)
+	return "album/" + strings.NewReplacer(" ", "_", "ł", "l", "ó", "o").Replace(lower_case)
 }
 
-templ portfolioHeader(activePage string, pages []string) {
+templ albumHeader(activePage string, pages []string) {
 	@subnavHeader("Nasze Słodkie Realizacje", "Galeria pasji uwieczniona w kremie i dekoracjach. Zobacz wybrane projekty, które uświetniły wyjątkowe chwile naszych klientów – od bajkowych tortów dla dzieci po eleganckie torty weselne.") {
 		for i, name := range pages {
 			if i == 0 {
-				@GreenLink(activePage, "portfolio", name)
+				@GreenLink(activePage, "album", name)
 			} else {
 				@GreenLink(activePage, to_url(name), name)
 			}

html/portfolio.templ

@@ -1,17 +0,0 @@
-package html
-templ Portfolio(images []string, activePage string, pages []string) {
-	@layout("portfolio") {
-		<main>
-			@portfolioHeader(activePage, pages)
-			<section>
-				<div id="portfolio-grid">
-					for _, img := range images {
-						<div>
-							@AvifImage("portfolio/"+img, "portfolio", true, false)
-						</div>
-					}
-				</div>
-			</section>
-		</main>
-	}
-}

html/wyroby_ciasta.templ

@@ -5,7 +5,7 @@ import "piekarnikgosi/types"
 templ card(product types.Product) {
 	<div class="card">
 		<div>
-			@AvifImage("wyroby/"+product.Image+".avif", product.Name, true, false)
+			@AvifImage("wyroby/"+product.Image+".avif", product.Name, true)
 		</div>
 		<div>
 			<h3>{ product.Name }</h3>

html/wyroby_lody.templ

@@ -3,7 +3,7 @@ package html
 templ WyrobyLody() {
 	@layout("wyroby") {
 		<main id="lody">
-			@wyrobyHeader("wyroby_lody")
+			@wyrobyHeader("wyroby/lody")
 			<section>
 				<p>
 					Oferujemy wynajem wózka z lodami rzemieślniczymi na każdą okazję.

html/wyroby_slodkie_stoly.templ

@@ -3,7 +3,7 @@ package html
 templ WyrobySlodkieStoly() {
 	@layout("wyroby") {
 		<main id="slodkie_stoly">
-			@wyrobyHeader("wyroby_slodkie_stoly")
+			@wyrobyHeader("wyroby/slodkie_stoly")
 			<section id="cennik">
 				<p>
 					Aranżacja i transport słodkości ustalane są indywidualnie

html/wyroby_torty.templ

@@ -3,7 +3,7 @@ package html
 templ WyrobyTorty() {
 	@layout("wyroby") {
 		<main id="wyroby-torty">
-			@wyrobyHeader("wyroby_torty")
+			@wyrobyHeader("wyroby/torty")
 			<section id="rodzaje-tortow">
 				<div class="card-low">
 					<h3>Torty z masą cukrową</h3>
@@ -171,7 +171,7 @@ templ WyrobyTorty() {
 						<header>
 							<h2>Torty Musowe</h2>
 							<div>
-								@AvifImage("010.avif", "tort musowy", true, false)
+								@AvifImage("010.avif", "tort musowy", true)
 							</div>
 						</header>
 						<div>