Added image grid

css/portfolio.css

@@ -1,27 +1,31 @@
-.portfolio {
+#portfolio-grid {
-    padding-top: 2rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    grid-auto-flow: dense;
+    gap: 0.5rem;
 
-    & > header {
+    & > * {
-        justify-content: center;
+        overflow: hidden;
-        align-items: center;
+        border-radius: var(--small-border-radius);
-        display: flex;
-        flex-direction: column;
-
-        & > p {
-            margin: 0;
-        }
-
-        & > * {
-            text-align: center;
-            max-width: 40rem;
-        }
     }
 
-    & > div:nth-child(2) {
+    & img {
-        display: flex;
+        display: block;
-        align-items: center;
+        width: 100%;
-        gap: 1rem;
+        height: 100%;
-        justify-content: center;
+        object-fit: cover;
-        padding: 3rem;
     }
-}
+
+    & > :nth-child(7n) {
+        grid-column: span 2;
+        grid-row: span 2;
+    }
+
+    & > :nth-child(11n+5) {
+        grid-column: span 2;
+    }
+
+    & > :nth-child(13n+9) {
+        grid-row: span 2;
+    }
+}

html/layout.templ

@@ -190,19 +190,32 @@ templ GreenLink(activePage, targetPage, title string) {
 	>{ title }</a>
 }
 
-templ wyrobyHeader(activePage string) {
+templ subnavHeader(title, description string) {
 	<header class="subnav">
-		<h1>Nasze słodkości</h1>
+		<h1>{ title }</h1>
-		<p>
+		<p>{ description }</p>
-			Poznaj nasze tradycyjne receptury przekute w nowoczesne formy. Każdy wypiek to historia pasji, a każde lody
-			to powiew naturalnej świeżości
-		</p>
 		<nav>
-			@GreenLink(activePage, "wyroby", "Ciasta")
+			{ children... }
-			@GreenLink(activePage, "wyroby_deserki", "Deserki")
-			@GreenLink(activePage, "wyroby_torty", "Torty")
-			@GreenLink(activePage, "wyroby_slodkie_stoly", "Słodkie stoły")
-			@GreenLink(activePage, "wyroby_lody", "Lody")
 		</nav>
 	</header>
 }
+
+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")
+	}
+}
+
+templ portfolioHeader(activePage 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.") {
+		@GreenLink(activePage, "portfolio_ciasta", "Ciasta")
+		@GreenLink(activePage, "portfolio_deserki", "Deserki")
+		@GreenLink(activePage, "portfolio_torty", "Torty")
+		@GreenLink(activePage, "portfolio_slodkie_stoly", "Słodkie stoły")
+		@GreenLink(activePage, "portfolio_lody", "Lody")
+	}
+}

html/layout_templ.go

@@ -197,7 +197,7 @@ func GreenLink(activePage, targetPage, title string) templ.Component {
 	})
 }
 
-func wyrobyHeader(activePage string) templ.Component {
+func subnavHeader(title, description string) templ.Component {
 	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
 		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
@@ -218,31 +218,199 @@ func wyrobyHeader(activePage string) templ.Component {
 			templ_7745c5c3_Var8 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "<header class=\"subnav\"><h1>Nasze słodkości</h1><p>Poznaj nasze tradycyjne receptury przekute w nowoczesne formy. Każdy wypiek to historia pasji, a każde lody to powiew naturalnej świeżości</p><nav>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "<header class=\"subnav\"><h1>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = GreenLink(activePage, "wyroby", "Ciasta").Render(ctx, templ_7745c5c3_Buffer)
+		var templ_7745c5c3_Var9 string
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(title)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `html/layout.templ`, Line: 195, Col: 13}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = GreenLink(activePage, "wyroby_deserki", "Deserki").Render(ctx, templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</h1><p>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = GreenLink(activePage, "wyroby_torty", "Torty").Render(ctx, templ_7745c5c3_Buffer)
+		var templ_7745c5c3_Var10 string
+		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(description)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `html/layout.templ`, Line: 196, Col: 18}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = GreenLink(activePage, "wyroby_slodkie_stoly", "Słodkie stoły").Render(ctx, templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "</p><nav>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = GreenLink(activePage, "wyroby_lody", "Lody").Render(ctx, templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = templ_7745c5c3_Var8.Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</nav></header>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</nav></header>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func wyrobyHeader(activePage string) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var11 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var11 == nil {
+			templ_7745c5c3_Var11 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Var12 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+			templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+			templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+			if !templ_7745c5c3_IsBuffer {
+				defer func() {
+					templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+					if templ_7745c5c3_Err == nil {
+						templ_7745c5c3_Err = templ_7745c5c3_BufErr
+					}
+				}()
+			}
+			ctx = templ.InitializeContext(ctx)
+			templ_7745c5c3_Err = GreenLink(activePage, "wyroby", "Ciasta").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, " ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = GreenLink(activePage, "wyroby_deserki", "Deserki").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, " ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = GreenLink(activePage, "wyroby_torty", "Torty").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, " ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = GreenLink(activePage, "wyroby_slodkie_stoly", "Słodkie stoły").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, " ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = GreenLink(activePage, "wyroby_lody", "Lody").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			return nil
+		})
+		templ_7745c5c3_Err = 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").Render(templ.WithChildren(ctx, templ_7745c5c3_Var12), templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func portfolioHeader(activePage string) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var13 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var13 == nil {
+			templ_7745c5c3_Var13 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Var14 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+			templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+			templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+			if !templ_7745c5c3_IsBuffer {
+				defer func() {
+					templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+					if templ_7745c5c3_Err == nil {
+						templ_7745c5c3_Err = templ_7745c5c3_BufErr
+					}
+				}()
+			}
+			ctx = templ.InitializeContext(ctx)
+			templ_7745c5c3_Err = GreenLink(activePage, "portfolio_ciasta", "Ciasta").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, " ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = GreenLink(activePage, "portfolio_deserki", "Deserki").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, " ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = GreenLink(activePage, "portfolio_torty", "Torty").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, " ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = GreenLink(activePage, "portfolio_slodkie_stoly", "Słodkie stoły").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, " ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = GreenLink(activePage, "portfolio_lody", "Lody").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			return nil
+		})
+		templ_7745c5c3_Err = 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.").Render(templ.WithChildren(ctx, templ_7745c5c3_Var14), templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

html/portfolio.templ

@@ -1,18 +1,14 @@
 package html
 
-templ Portfolio() {
+templ Portfolio(images []string) {
 	@layout("portfolio") {
 		<main>
-			<section class="portfolio">
+			@portfolioHeader("portfolio")
-				<header>
+			<section>
-					<h1>Nasze Słodkie Realizacje</h1>
+				<div id="portfolio-grid">
-					<p>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.</p>
+					for _, img := range images {
-				</header>
+						@AvifImage("portfolio/"+img, "portfolio")
-				<div>
+					}
-					<a class="btn-green">Ciasta</a>
-					<a class="btn-green" href="wyroby_torty.gohtml">Torty</a>
-					<a class="btn-green" href="wyroby_slodkie_stoly.html">Slodkie stoły</a>
-					<a class="btn-green" href="wyroby_lody.html">Lody</a>
 				</div>
 			</section>
 		</main>

html/portfolio_templ.go

@@ -8,7 +8,7 @@ package html
 import "github.com/a-h/templ"
 import templruntime "github.com/a-h/templ/runtime"
 
-func Portfolio() templ.Component {
+func Portfolio(images []string) templ.Component {
 	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
 		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
@@ -41,7 +41,25 @@ func Portfolio() templ.Component {
 				}()
 			}
 			ctx = templ.InitializeContext(ctx)
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<main><section class=\"portfolio\"><header><h1>Nasze Słodkie Realizacje</h1><p>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.</p></header><div><a class=\"btn-green\">Ciasta</a> <a class=\"btn-green\" href=\"wyroby_torty.gohtml\">Torty</a> <a class=\"btn-green\" href=\"wyroby_slodkie_stoly.html\">Slodkie stoły</a> <a class=\"btn-green\" href=\"wyroby_lody.html\">Lody</a></div></section></main>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<main>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = portfolioHeader("portfolio").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<section><div id=\"portfolio-grid\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			for _, img := range images {
+				templ_7745c5c3_Err = AvifImage("portfolio/"+img, "portfolio").Render(ctx, templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</div></section></main>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}

main.go

@@ -7,9 +7,11 @@ import (
 	"log"
 	"net/http"
 	"os"
+	"path/filepath"
 	"piekarnikgosi/data"
 	"piekarnikgosi/html"
 	"piekarnikgosi/utils"
+	"sort"
 )
 
 type ComponentRenderer interface {
@@ -29,11 +31,26 @@ func saveFile(name string, comp ComponentRenderer) {
 	}
 }
 
+func portfolioImages() []string {
+	entries, err := os.ReadDir("img/portfolio")
+	if err != nil {
+		log.Fatal(err)
+	}
+	var names []string
+	for _, e := range entries {
+		if filepath.Ext(e.Name()) == ".avif" {
+			names = append(names, e.Name())
+		}
+	}
+	sort.Strings(names)
+	return names
+}
+
 func generateHTML() {
 	log.Println("generating html")
 	saveFile(`index`, html.Index())
 	saveFile(`kawiarnia`, html.Kawiarnia())
-	saveFile(`portfolio`, html.Portfolio())
+	saveFile(`portfolio`, html.Portfolio(portfolioImages()))
 	saveFile(`wyroby`, html.Wyroby(data.Cakes, "wyroby"))
 	saveFile(`wyroby_deserki`, html.Wyroby(data.Desserts, "wyroby_deserki"))
 	saveFile(`wyroby_torty`, html.WyrobyTorty())