gomponents first page

go.mod

@@ -17,6 +17,7 @@ require (
 	github.com/google/go-cmp v0.6.0 // indirect
 	github.com/google/uuid v1.6.0 // indirect
 	github.com/hashicorp/hcl/v2 v2.19.1 // indirect
+	github.com/maragudk/gomponents v0.20.2 // indirect
 	github.com/mitchellh/go-wordwrap v1.0.1 // indirect
 	github.com/zclconf/go-cty v1.14.2 // indirect
 	golang.org/x/mod v0.17.0 // indirect

go.sum

@@ -46,6 +46,8 @@ github.com/lib/pq v1.10.9 h1:YXG7RB+JIjhP29X+OtkiDnYaXQwpS4JEWq7dtCCRUEw=
 github.com/lib/pq v1.10.9/go.mod h1:AlVN5x4E4T544tWzH6hKfbfQvm3HdbOxrmggDNAPY9o=
 github.com/mailru/easyjson v0.7.7 h1:UGYAvKxe3sBsEDzO8ZeWOSlIQfWFlxbzLZe7hwFURr0=
 github.com/mailru/easyjson v0.7.7/go.mod h1:xzfreul335JAWq5oZzymOObrkdz5UnU4kGfJJLY9Nlc=
+github.com/maragudk/gomponents v0.20.2 h1:39FhnBNNCJzqNcD9Hmvp/5xj0otweFoyvVgFG6kXoy0=
+github.com/maragudk/gomponents v0.20.2/go.mod h1:nHkNnZL6ODgMBeJhrZjkMHVvNdoYsfmpKB2/hjdQ0Hg=
 github.com/mattn/go-runewidth v0.0.9 h1:Lm995f3rfxdpd6TSmuVCHVb/QhupuXlYr8sCI/QdE+0=
 github.com/mattn/go-runewidth v0.0.9/go.mod h1:H031xJmbD/WCDINGzjvQ9THkh0rPKHF+m2gUSrubnMI=
 github.com/mattn/go-sqlite3 v1.14.16 h1:yOQRA0RpS5PFz/oikGwBEqvAWhWg5ufRz4ETLjwpU1Y=

web/components/navbar.go

@@ -0,0 +1,43 @@
+package components
+
+import (
+	g "github.com/maragudk/gomponents"
+	c "github.com/maragudk/gomponents/components"
+	. "github.com/maragudk/gomponents/html"
+)
+
+type PageLink struct {
+	Path string
+	Name string
+}
+
+func Navbar(currentPath string, links []PageLink) g.Node {
+	return Nav(Class("bg-gray-700 mb-4"),
+		container(
+			Div(Class("flex items-center space-x-4 h-16"),
+				navbarLink("/", "Home", currentPath == "/"),
+
+				// We can Map custom slices to Nodes
+				g.Group(g.Map(links, func(l PageLink) g.Node {
+					return navbarLink(l.Path, l.Name, currentPath == l.Path)
+				})),
+			),
+		),
+	)
+}
+
+// NavbarLink is a link in the Navbar.
+func navbarLink(path, text string, active bool) g.Node {
+	return A(Href(path), g.Text(text),
+		// Apply CSS classes conditionally
+		c.Classes{
+			"px-3 py-2 rounded-md text-sm font-medium focus:outline-none focus:text-white focus:bg-gray-700": true,
+			"text-white bg-gray-900":                           active,
+			"text-gray-300 hover:text-white hover:bg-gray-700": !active,
+		},
+	)
+}
+
+func container(children ...g.Node) g.Node {
+	return Div(Class("mx-auto px-2 sm:px-6 lg:px-8"), g.Group(children))
+}

web/handlers/homePageHandler.go

@@ -0,0 +1,26 @@
+package handlers
+
+import (
+	g "github.com/maragudk/gomponents"
+	"net/http"
+	"portfolio/web/components"
+)
+
+func HomePageHandler(w http.ResponseWriter, r *http.Request) {
+
+	err := Page("Homepage", createBody(w, r)).Render(w)
+	if err != nil {
+		return
+	}
+
+}
+
+func createBody(w http.ResponseWriter, r *http.Request) []g.Node {
+
+	return []g.Node{
+		components.Navbar(r.URL.Path, []components.PageLink{
+			{Path: "/contact", Name: "Contact"},
+			{Path: "/about", Name: "About"},
+		}),
+	}
+}

web/handlers/pageTemplates.go

@@ -0,0 +1,20 @@
+package handlers
+
+import (
+	g "github.com/maragudk/gomponents"
+	c "github.com/maragudk/gomponents/components"
+	. "github.com/maragudk/gomponents/html"
+)
+
+func Page(title string, body []g.Node) g.Node {
+
+	return c.HTML5(c.HTML5Props{
+		Title:    title,
+		Language: "en",
+		Head: []g.Node{
+			Script(Src("https://cdn.tailwindcss.com?plugins=typography")),
+			Link(Rel("icon"), Type("image/x-icon"), Href("assets/images/favicon.ico")),
+		},
+		Body: body,
+	})
+}

web/webRoutes.go

@@ -2,7 +2,7 @@ package web
 
 import (
 	"net/http"
-	handlers2 "portfolio/api/handlers"
+	"portfolio/web/handlers"
 )
 
 func WebRoutes() *http.ServeMux {
@@ -11,7 +11,8 @@ func WebRoutes() *http.ServeMux {
 	mux := http.NewServeMux()
 
 	// Register the routes and webHandler
-	mux.HandleFunc("/", handlers2.CatchAllHandler)
+	mux.HandleFunc("/", handlers.HomePageHandler)
 
+	mux.Handle("/assets/", http.StripPrefix("/assets/", http.FileServer(http.Dir("./web/assets"))))
 	return mux
 }