Adding even more components

- Starting on main manager page
- Manager layout will be included in the manager page
- Manager page will use htmx to load different components via api

main.go

@@ -4,10 +4,12 @@ import (
 	"log"
 	"net/http"
 
+	"git.staur.ca/stobbsm/clustvirt/view/components"
+	"git.staur.ca/stobbsm/clustvirt/view/layouts"
 	"git.staur.ca/stobbsm/clustvirt/view/static"
+	"github.com/a-h/templ"
 	"github.com/go-chi/chi/v5"
 	"github.com/go-chi/chi/v5/middleware"
-	"github.com/a-h/templ"
 )
 
 const DEBUG bool = true
@@ -28,6 +30,10 @@ func main() {
 
 	// Start webserver and serve homepage
 
+	defaultNavBar := []components.NavItem{
+		{Name: "Home", Href: "/"},
+		{Name: "About", Href: "/about"},
+	}
 	fs := http.StripPrefix("/static/", http.FileServer(http.Dir("public")))
 
 	r := chi.NewRouter()
@@ -41,7 +47,8 @@ func main() {
 		}
 		fs.ServeHTTP(w, r)
 	})
-	r.Get("/", templ.Handler(static.Home()).ServeHTTP)
+	r.Get("/", templ.Handler(layouts.Manager("Cluster Manager", "ClustVirt", defaultNavBar)).ServeHTTP)
+	r.Get("/about", templ.Handler(static.Home()).ServeHTTP)
 
 	log.Println(http.ListenAndServe(":3000", r))
 }

public/css/style.css

@@ -848,6 +848,26 @@ span>a:visited {
   margin-right: auto;
 }
 
+.my-8 {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
 .mr-auto {
   margin-right: auto;
 }
@@ -856,10 +876,18 @@ span>a:visited {
   display: block;
 }
 
+.inline-block {
+  display: inline-block;
+}
+
 .flex {
   display: flex;
 }
 
+.inline-flex {
+  display: inline-flex;
+}
+
 .contents {
   display: contents;
 }
@@ -868,6 +896,30 @@ span>a:visited {
   display: none;
 }
 
+.size-fit {
+  width: -moz-fit-content;
+  width: fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+}
+
+.size-max {
+  width: -moz-max-content;
+  width: max-content;
+  height: -moz-max-content;
+  height: max-content;
+}
+
+.size-72 {
+  width: 18rem;
+  height: 18rem;
+}
+
+.size-64 {
+  width: 16rem;
+  height: 16rem;
+}
+
 .h-4 {
   height: 1rem;
 }
@@ -908,6 +960,52 @@ span>a:visited {
   height: 7rem;
 }
 
+.h-44 {
+  height: 11rem;
+}
+
+.h-52 {
+  height: 13rem;
+}
+
+.h-36 {
+  height: 9rem;
+}
+
+.h-40 {
+  height: 10rem;
+}
+
+.h-max {
+  height: -moz-max-content;
+  height: max-content;
+}
+
+.h-auto {
+  height: auto;
+}
+
+.h-48 {
+  height: 12rem;
+}
+
+.h-56 {
+  height: 14rem;
+}
+
+.h-64 {
+  height: 16rem;
+}
+
+.h-72 {
+  height: 18rem;
+}
+
+.h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
+}
+
 .w-full {
   width: 100%;
 }
@@ -933,10 +1031,55 @@ span>a:visited {
   width: 91.666667%;
 }
 
+.w-6 {
+  width: 1.5rem;
+}
+
+.w-40 {
+  width: 10rem;
+}
+
+.w-44 {
+  width: 11rem;
+}
+
+.w-auto {
+  width: auto;
+}
+
+.w-48 {
+  width: 12rem;
+}
+
+.w-52 {
+  width: 13rem;
+}
+
+.w-64 {
+  width: 16rem;
+}
+
+.w-72 {
+  width: 18rem;
+}
+
+.w-max {
+  width: -moz-max-content;
+  width: max-content;
+}
+
 .flex-auto {
   flex: 1 1 auto;
 }
 
+.flex-grow {
+  flex-grow: 1;
+}
+
+.grow {
+  flex-grow: 1;
+}
+
 .basis-1\/2 {
   flex-basis: 50%;
 }
@@ -969,6 +1112,14 @@ span>a:visited {
   flex-basis: 66.666667%;
 }
 
+.basis-2\/4 {
+  flex-basis: 50%;
+}
+
+.basis-2\/5 {
+  flex-basis: 40%;
+}
+
 .list-inside {
   list-style-position: inside;
 }
@@ -1009,6 +1160,10 @@ span>a:visited {
   align-items: center;
 }
 
+.justify-center {
+  justify-content: center;
+}
+
 .justify-between {
   justify-content: space-between;
 }
@@ -9048,6 +9203,26 @@ span>a:visited {
   align-self: flex-start;
 }
 
+.self-center {
+  align-self: center;
+}
+
+.justify-self-end {
+  justify-self: end;
+}
+
+.justify-self-center {
+  justify-self: center;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
 .border-uiblue-100 {
   --tw-border-opacity: 1;
   border-color: rgb(221 231 248 / var(--tw-border-opacity));
@@ -138667,6 +138842,11 @@ span>a:visited {
   padding-right: 2rem;
 }
 
+.py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
 .align-bottom {
   vertical-align: bottom;
 }
@@ -220316,6 +220496,10 @@ span>a:visited {
     display: inline-block;
   }
 
+  .md\:inline-flex {
+    display: inline-flex;
+  }
+
   .md\:contents {
     display: contents;
   }

view/components/hero.templ

@@ -0,0 +1,5 @@
+package components
+
+templ Hero() {
+  { children... }
+}

view/components/hero_templ.go

@@ -0,0 +1,35 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.598
+package components
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+func Hero() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}

view/components/navbar.templ

@@ -0,0 +1,40 @@
+package components
+
+templ NavBar(hero templ.Component, navItems []NavItem) {
+	<nav
+		class={ "w-100",
+    "bg-uigrey-600",
+    "shadow",
+    "shadow-uigrey-700",
+    "rounded",
+    "rounded-full",
+    "md:px-auto" }
+	>
+		<div
+			class={ "md:h-16",
+      "h-28",
+      "mx-auto",
+      "md:px-4",
+      "container",
+      "flex",
+      "items-center",
+      "justify-between",
+      "flex-wrap",
+      "md:flex-nowrap" }
+		>
+			<a href="/">
+				@hero
+			</a>
+			<div class={ "text-uigrey-200", "font-semibold", "md:w-auto", "md:order-2", "order-3" }>
+				<ul class={ "flex", "justify-between", "sm:w-full", "md:w-auto" }>
+					for _, ni := range navItems {
+						<li class={ "hover:text-uiblue-200", "md:px-4", "md:py-2" }>
+							<a href={ templ.URL(ni.Href) }>{ ni.Name }</a>
+						</li>
+					}
+				</ul>
+			</div>
+			<div class={ "order-2", "md:order-3" }>Login</div>
+		</div>
+	</nav>
+}

view/components/navbar_templ.go

@@ -0,0 +1,184 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.598
+package components
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+func NavBar(hero templ.Component, navItems []NavItem) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		var templ_7745c5c3_Var2 = []any{"w-100",
+			"bg-uigrey-600",
+			"shadow",
+			"shadow-uigrey-700",
+			"rounded",
+			"rounded-full",
+			"md:px-auto"}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<nav class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ.CSSClasses(templ_7745c5c3_Var2).String()))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 = []any{"md:h-16",
+			"h-28",
+			"mx-auto",
+			"md:px-4",
+			"container",
+			"flex",
+			"items-center",
+			"justify-between",
+			"flex-wrap",
+			"md:flex-nowrap"}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var3...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ.CSSClasses(templ_7745c5c3_Var3).String()))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><a href=\"/\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = hero.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</a>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 = []any{"text-uigrey-200", "font-semibold", "md:w-auto", "md:order-2", "order-3"}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var4...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ.CSSClasses(templ_7745c5c3_Var4).String()))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 = []any{"flex", "justify-between", "sm:w-full", "md:w-auto"}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var5...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<ul class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ.CSSClasses(templ_7745c5c3_Var5).String()))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, ni := range navItems {
+			var templ_7745c5c3_Var6 = []any{"hover:text-uiblue-200", "md:px-4", "md:py-2"}
+			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var6...)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<li class=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ.CSSClasses(templ_7745c5c3_Var6).String()))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><a href=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var7 templ.SafeURL = templ.URL(ni.Href)
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var7)))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var8 string
+			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(ni.Name)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/components/navbar.templ`, Line: 31, Col: 47}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</a></li>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</ul></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var9 = []any{"order-2", "md:order-3"}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var9...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ.CSSClasses(templ_7745c5c3_Var9).String()))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">Login</div></div></nav>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}

view/components/util.go

@@ -4,6 +4,11 @@ import (
 	"fmt"
 )
 
+type NavItem struct {
+	Name string
+	Href string
+}
+
 func NoWrapSize(size string) string {
 	return fmt.Sprintf("%s:flex-nowrap", size)
 }

view/layouts/manager.templ

@@ -1,6 +1,8 @@
 package layouts
 
-templ Manager(config LayoutConfig) {
+import "git.staur.ca/stobbsm/clustvirt/view/components"
+
+templ Manager(title string, subtitle string, navBarItem []components.NavItem) {
 <!DOCTYPE html>
 <html class={ "text-slate-50", "bg-slate-900" }>
 <head>
@@ -9,11 +11,11 @@ templ Manager(config LayoutConfig) {
 </head>
 
 <body>
-  <header class={}>
+  <header class={"mx-4"}>
-    @header(config.MainTitle, config.SubTitle)
+    @header(title, subtitle, navBarItem)
   </header>
 
-  <footer>
+  <footer class={"mx-4"}>
     @footer()
   </footer>
 </body>

view/layouts/manager_templ.go

@@ -10,7 +10,9 @@ import "context"
 import "io"
 import "bytes"
 
-func Manager(config LayoutConfig) templ.Component {
+import "git.staur.ca/stobbsm/clustvirt/view/components"
+
+func Manager(title string, subtitle string, navBarItem []components.NavItem) templ.Component {
 	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
 		if !templ_7745c5c3_IsBuffer {
@@ -44,7 +46,7 @@ func Manager(config LayoutConfig) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var3 = []any{}
+		var templ_7745c5c3_Var3 = []any{"mx-4"}
 		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var3...)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
@@ -61,11 +63,28 @@ func Manager(config LayoutConfig) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = header(config.MainTitle, config.SubTitle).Render(ctx, templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = header(title, subtitle, navBarItem).Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</header><footer>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</header>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 = []any{"mx-4"}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var4...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<footer class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ.CSSClasses(templ_7745c5c3_Var4).String()))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

view/layouts/staticpage.templ

@@ -1,17 +1,17 @@
 package layouts
 
-templ StaticPage(title string, subtitle string) {
+import "git.staur.ca/stobbsm/clustvirt/view/components"
-<!DOCTYPE html>
-<html class={ "text-uigrey-100" , "bg-uigrey-900" }>
 
-<head>
+templ StaticPage(title string, subtitle string, navBarItems []components.NavItem) {
+	<!DOCTYPE html>
+	<html class={ "text-uigrey-100" , "bg-uigrey-900" }>
+		<head>
 			<title>Clustvirt</title>
-  <link href="/static/css/style.css" type="text/css" rel="stylesheet" />
+			<link href="/static/css/style.css" type="text/css" rel="stylesheet"/>
-</head>
+		</head>
-
+		<body>
-<body>
 			<header>
-    @header(title, subtitle)
+				@header(title, subtitle, navBarItems)
 			</header>
 			<div id="content" name="content" class={ "flex" , "flex-col" , "gap-2" }>
 				{ children... }
@@ -19,50 +19,23 @@ templ StaticPage(title string, subtitle string) {
 			<footer>
 				@footer()
 			</footer>
-</body>
+		</body>
-
+	</html>
-</html>
 }
 
-templ header(title string, subtitle string) {
+templ hero(title string) {
-<h2 class={ "text-lg" , "font-semibold" , "italic" , "h-6" }>{ subtitle }</h2>
-@nav(title)
-}
-
-templ nav(title string) {
-<nav class={ "w-100" , "bg-uigrey-600" , "shadow" , "shadow-uigrey-700" , "md:px-auto" }>
-  <div class={
-    "md:h-16",
-    "h-28",
-    "mx-auto",
-    "md:px-4",
-    "container",
-    "flex",
-    "items-center",
-    "justify-between",
-    "flex-wrap",
-    "md:flex-nowrap" }>
   <h1 class={ "text-2xl", "font-bold", "text-uiblue-200", "md:order-1" }>{ title }</h1>
-    <div class={"text-uigrey-200", "font-semibold", "md:w-auto", "md:order-2", "order-3"}>
+}
-      <ul class={ "flex", "justify-between", "sm:w-full", "md:w-auto" }>
+
-        <li class={ "hover:text-uiblue-200", "md:px-4", "md:py-2" }><a href="#">What</a></li>
+templ header(title string, subtitle string, navBarItems []components.NavItem) {
-        <li class={ "hover:text-uiblue-200", "md:px-4", "md:py-2" }><a href="#">Why</a></li>
+	<h2 class={ "text-lg" , "font-semibold" , "italic" , "h-6" }>{ subtitle }</h2>
-        <li class={ "hover:text-uiblue-200", "md:px-4", "md:py-2" }><a href="#">Goals</a></li>
+	@components.NavBar(hero(title), navBarItems)
-        <li class={ "hover:text-uiblue-200", "md:px-4", "md:py-2" }><a href="#">Stretch</a></li>
-        <li class={ "hover:text-uiblue-200", "md:px-4", "md:py-2" }><a href="#">Requests</a></li>
-        <li class={ "hover:text-uiblue-200", "md:px-4", "md:py-2" }><a href="#">Never</a></li>
-        <li class={ "hover:text-uiblue-200", "md:px-4", "md:py-2" }><a href="#">Notes</a></li>
-      </ul>
-    </div>
-    <div class={"order-2", "md:order-3"}>Login</div>
-  </div>
-</nav>
 }
 
 templ footer() {
-<div class="flex gap-4 md:gap-6 sm:gap-8 divide divide-solid">
+	<div class="flex gap-4 md:gap-6 sm:gap-8 divide divide-solid">
 		<div id="footer_left" class="flex-auto basis-1/4 md:basis-1/3 p-2">Left</div>
 		<div id="footer_middle" class="flex-auto basis-1/2 md:basis-1/3 p-2">Middle</div>
 		<div id="footer_right" class="flex-auto basis-1/4 md:basis-1/3 p-2">Right</div>
-</div>
+	</div>
 }

view/layouts/staticpage_templ.go

@@ -10,7 +10,9 @@ import "context"
 import "io"
 import "bytes"
 
-func StaticPage(title string, subtitle string) templ.Component {
+import "git.staur.ca/stobbsm/clustvirt/view/components"
+
+func StaticPage(title string, subtitle string, navBarItems []components.NavItem) templ.Component {
 	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
 		if !templ_7745c5c3_IsBuffer {
@@ -44,7 +46,7 @@ func StaticPage(title string, subtitle string) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = header(title, subtitle).Render(ctx, templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = header(title, subtitle, navBarItems).Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -92,7 +94,7 @@ func StaticPage(title string, subtitle string) templ.Component {
 	})
 }
 
-func header(title string, subtitle string) templ.Component {
+func hero(title string) templ.Component {
 	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
 		if !templ_7745c5c3_IsBuffer {
@@ -105,12 +107,12 @@ func header(title string, subtitle string) templ.Component {
 			templ_7745c5c3_Var4 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var5 = []any{"text-lg", "font-semibold", "italic", "h-6"}
+		var templ_7745c5c3_Var5 = []any{"text-2xl", "font-bold", "text-uiblue-200", "md:order-1"}
 		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var5...)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<h2 class=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<h1 class=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -123,19 +125,15 @@ func header(title string, subtitle string) templ.Component {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var6 string
-		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(subtitle)
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(title)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/layouts/staticpage.templ`, Line: 27, Col: 71}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/layouts/staticpage.templ`, Line: 26, Col: 80}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h2>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h1>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = nav(title).Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -146,7 +144,7 @@ func header(title string, subtitle string) templ.Component {
 	})
 }
 
-func nav(title string) templ.Component {
+func header(title string, subtitle string, navBarItems []components.NavItem) templ.Component {
 	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
 		if !templ_7745c5c3_IsBuffer {
@@ -159,12 +157,12 @@ func nav(title string) templ.Component {
 			templ_7745c5c3_Var7 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var8 = []any{"w-100", "bg-uigrey-600", "shadow", "shadow-uigrey-700", "md:px-auto"}
+		var templ_7745c5c3_Var8 = []any{"text-lg", "font-semibold", "italic", "h-6"}
 		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var8...)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<nav class=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<h2 class=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -176,230 +174,20 @@ func nav(title string) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var9 = []any{
+		var templ_7745c5c3_Var9 string
-			"md:h-16",
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(subtitle)
-			"h-28",
+		if templ_7745c5c3_Err != nil {
-			"mx-auto",
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/layouts/staticpage.templ`, Line: 30, Col: 72}
-			"md:px-4",
+		}
-			"container",
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
-			"flex",
-			"items-center",
-			"justify-between",
-			"flex-wrap",
-			"md:flex-nowrap"}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var9...)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h2>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ.CSSClasses(templ_7745c5c3_Var9).String()))
+		templ_7745c5c3_Err = components.NavBar(hero(title), navBarItems).Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var10 = []any{"text-2xl", "font-bold", "text-uiblue-200", "md:order-1"}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var10...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<h1 class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ.CSSClasses(templ_7745c5c3_Var10).String()))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var11 string
-		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(title)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/layouts/staticpage.templ`, Line: 44, Col: 82}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h1>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var12 = []any{"text-uigrey-200", "font-semibold", "md:w-auto", "md:order-2", "order-3"}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var12...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ.CSSClasses(templ_7745c5c3_Var12).String()))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var13 = []any{"flex", "justify-between", "sm:w-full", "md:w-auto"}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var13...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<ul class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ.CSSClasses(templ_7745c5c3_Var13).String()))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var14 = []any{"hover:text-uiblue-200", "md:px-4", "md:py-2"}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var14...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<li class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ.CSSClasses(templ_7745c5c3_Var14).String()))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><a href=\"#\">What</a></li>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var15 = []any{"hover:text-uiblue-200", "md:px-4", "md:py-2"}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var15...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<li class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ.CSSClasses(templ_7745c5c3_Var15).String()))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><a href=\"#\">Why</a></li>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var16 = []any{"hover:text-uiblue-200", "md:px-4", "md:py-2"}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var16...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<li class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ.CSSClasses(templ_7745c5c3_Var16).String()))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><a href=\"#\">Goals</a></li>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var17 = []any{"hover:text-uiblue-200", "md:px-4", "md:py-2"}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var17...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<li class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ.CSSClasses(templ_7745c5c3_Var17).String()))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><a href=\"#\">Stretch</a></li>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var18 = []any{"hover:text-uiblue-200", "md:px-4", "md:py-2"}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var18...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<li class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ.CSSClasses(templ_7745c5c3_Var18).String()))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><a href=\"#\">Requests</a></li>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var19 = []any{"hover:text-uiblue-200", "md:px-4", "md:py-2"}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var19...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<li class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ.CSSClasses(templ_7745c5c3_Var19).String()))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><a href=\"#\">Never</a></li>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var20 = []any{"hover:text-uiblue-200", "md:px-4", "md:py-2"}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var20...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<li class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ.CSSClasses(templ_7745c5c3_Var20).String()))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><a href=\"#\">Notes</a></li></ul></div>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var21 = []any{"order-2", "md:order-3"}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var21...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ.CSSClasses(templ_7745c5c3_Var21).String()))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">Login</div></div></nav>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -418,9 +206,9 @@ func footer() templ.Component {
 			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var22 := templ.GetChildren(ctx)
+		templ_7745c5c3_Var10 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var22 == nil {
+		if templ_7745c5c3_Var10 == nil {
-			templ_7745c5c3_Var22 = templ.NopComponent
+			templ_7745c5c3_Var10 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"flex gap-4 md:gap-6 sm:gap-8 divide divide-solid\"><div id=\"footer_left\" class=\"flex-auto basis-1/4 md:basis-1/3 p-2\">Left</div><div id=\"footer_middle\" class=\"flex-auto basis-1/2 md:basis-1/3 p-2\">Middle</div><div id=\"footer_right\" class=\"flex-auto basis-1/4 md:basis-1/3 p-2\">Right</div></div>")

view/static/home.templ

@@ -1,15 +1,23 @@
 package static
 
 import (
-"git.staur.ca/stobbsm/clustvirt/view/layouts"
+	"git.staur.ca/stobbsm/clustvirt/view/layouts"
-"git.staur.ca/stobbsm/clustvirt/view/components"
+	"git.staur.ca/stobbsm/clustvirt/view/components"
 )
 
 templ Home() {
-@layouts.StaticPage("ClustVirt", "Libvirt, clustered and managed") {
+	@layouts.StaticPage("ClustVirt", "Libvirt, clustered and managed", []components.NavItem{
-@components.FlexRow(true) {
+		{Name: "What", Href: "#"},
-<div class={ "basis-1/3" }>
+		{Name: "Why", Href: "#"},
+		{Name: "Goals", Href: "#"},
+		{Name: "Stretch", Href: "#"},
+		{Name: "Requests", Href: "#"},
+		{Name: "Never", Href: "#"},
+		{Name: "Notes", Href: "#"},
+	}) {
+		<div>
 			@components.InfoBox("What is This?", "uiorange") {
+        <div class={"mx-4"}>
 				@components.ContentP() {
 					Clustvirt (work in progress name) aims to be the agnostic
 					cluster controller for libvirtd. The server component is
@@ -18,9 +26,10 @@ templ Home() {
 					LXC containers (through libvirtd), gather information about
 					each host, and monitor each host.
 				}
+        </div>
 			}
-</div>
+		</div>
-<div class={ "basis-2/3" }>
+		<div>
 			@components.InfoBox("Why?", "uiblue") {
 				@components.List("informational") {
 					@components.ListItem() {
@@ -47,10 +56,8 @@ templ Home() {
 					}
 				}
 			}
-</div>
+		</div>
-}
+		<div>
-@components.FlexRow(true) {
-<div class={ "basis-7/12" }>
 			@components.InfoBox("Project Goals", "uigreen") {
 				@components.List("accepted") {
 					@components.ListItem() {
@@ -100,8 +107,8 @@ templ Home() {
 					}
 				}
 			}
-</div>
+    </div>
-<div class={ "basis-5/12" }>
+		<div>
 			@components.InfoBox("Stretch Goals", "uipurple") {
 				@components.List("possible") {
 					@components.ListItem() {
@@ -123,10 +130,8 @@ templ Home() {
 					}
 				}
 			}
-</div>
+		</div>
-}
+		<div>
-@components.FlexRow(true) {
-<div class={ "basis-8/12" }>
 			@components.InfoBox("Reddit Requested Feature", "uiyellow") {
 				@components.List("possible") {
 					@components.ListItem() {
@@ -162,8 +167,8 @@ templ Home() {
 					}
 				}
 			}
-</div>
+		</div>
-<div class={ "basis-4/12" }>
+		<div class={  }>
 			@components.InfoBox("Never Going to Happen", "uired") {
 				@components.List("never") {
 					@components.ListItem() {
@@ -192,58 +197,61 @@ templ Home() {
 					}
 				}
 			}
-</div>
+		</div>
-}
+		@components.InfoBox("Other things to note", "uipink") {
-@components.InfoBox("Other things to note", "uipink") {
+      <div class={"flex", "flex-col", "gap-4", "mx-4"}>
-@components.ContentP() {
+			@components.ContentP() {
-I recently created a <span>@components.ANewTab("http://redd.it/1bct15z", "post")
+				I recently created a 
-</span>
+				<span>
-on reddit announcing that I was building this, and while the majority
+					@components.ANewTab("http://redd.it/1bct15z", "post")
-of responses were supportive, even offering features that may enhance
+				</span>
-what I originally set out to do, many responded with
+				on reddit announcing that I was building this, and while the majority
-"Why do we need another one??"
+				of responses were supportive, even offering features that may enhance
-}
+				what I originally set out to do, many responded with
-@components.ContentP() {
+				"Why do we need another one??"
-Besides the list above about why this exists, I wanted to clarify
+			}
-a few things those individuals did not seeem to get: This is not
+			@components.ContentP() {
-a rebuild of Proxmox, Cloudstack, VMWare, Harvester or any of
+				Besides the list above about why this exists, I wanted to clarify
-the other "Hyper-converged/Single-solution/turnkey/Operating System"
+				a few things those individuals did not seeem to get: This is not
-offerings out there. This will not take over your base operating system
+				a rebuild of Proxmox, Cloudstack, VMWare, Harvester or any of
-on your machine, just act as a cluster manager and interface to access
+				the other "Hyper-converged/Single-solution/turnkey/Operating System"
-the existing libvirtd instances on those machines, nor will it prescribe
+				offerings out there. This will not take over your base operating system
-a set of requirements that make it hard to move your own infrastructure
+				on your machine, just act as a cluster manager and interface to access
-around.
+				the existing libvirtd instances on those machines, nor will it prescribe
-}
+				a set of requirements that make it hard to move your own infrastructure
-@components.ContentP() {
+				around.
-At the heart of this project is that I hate the enshitifiation of
+			}
-Open Source that has been going on, where its just another way to make
+			@components.ContentP() {
-money and control the eco system. RedHat tried to do it by locking
+				At the heart of this project is that I hate the enshitifiation of
-down their source code, Proxmox does it by making sure anything you
+				Open Source that has been going on, where its just another way to make
-do on Proxmox is tied to Proxmox (no offense to Proxmox), and even
+				money and control the eco system. RedHat tried to do it by locking
-Hashicorp, who I loved so dearly, changed from a pure Open Source
+				down their source code, Proxmox does it by making sure anything you
-licensing model to one that protects the business over the community
+				do on Proxmox is tied to Proxmox (no offense to Proxmox), and even
-}
+				Hashicorp, who I loved so dearly, changed from a pure Open Source
-@components.ContentP() {
+				licensing model to one that protects the business over the community
-I will not let that happen here.
+			}
-}
+			@components.ContentP() {
-@components.ContentP() {
+				I will not let that happen here.
-This project will seek to use the Unix philosophy, of building off
+			}
-of existing standards, combining tools, and having one tool do one
+			@components.ContentP() {
-job well. This does not mean there will be one application for each
+				This project will seek to use the Unix philosophy, of building off
-aspect of the job, but that this application stack will manage Libvirtd
+				of existing standards, combining tools, and having one tool do one
-well, and have individual and configurable paths to manage each sub-aspect
+				job well. This does not mean there will be one application for each
-of the libvirt stack. This stack will not create a Ceph cluster for you,
+				aspect of the job, but that this application stack will manage Libvirtd
-it leaves you to do that. It will not even talk to a ceph cluster.
+				well, and have individual and configurable paths to manage each sub-aspect
-It will, however, let you add that cluster via configuration options to
+				of the libvirt stack. This stack will not create a Ceph cluster for you,
-define it as a storage pool that libvirt can use.
+				it leaves you to do that. It will not even talk to a ceph cluster.
-}
+				It will, however, let you add that cluster via configuration options to
-@components.ContentP() {
+				define it as a storage pool that libvirt can use.
-If you want something that will allow you to use a single interface
+			}
-to create all sub aspects that can be used by libvirt
+			@components.ContentP() {
-(managing all firewall rules, creating a ceph cluster, etc.),
+				If you want something that will allow you to use a single interface
-use something like Proxmox which includes that builtin
+				to create all sub aspects that can be used by libvirt
-functionality. This isn't the stack for you.
+				(managing all firewall rules, creating a ceph cluster, etc.),
-}
+				use something like Proxmox which includes that builtin
-}
+				functionality. This isn't the stack for you.
-}
+			}
+      </div>
+		}
+	}
 }