diff --git a/main.go b/main.go index 4241447..ab12e4d 100644 --- a/main.go +++ b/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)) } diff --git a/public/css/style.css b/public/css/style.css index 60e41b0..3a74bfb 100644 --- a/public/css/style.css +++ b/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; } diff --git a/public/images/home/logo-banner-dark-800.png b/public/images/home/logo-banner-dark-800.png new file mode 100644 index 0000000..6fd220f --- /dev/null +++ b/public/images/home/logo-banner-dark-800.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1a6c583386f719f0b03cb2949d6ddff3fd4a7c92c6e1150c4afc78aa93b752f5 +size 64715 diff --git a/view/components/hero.templ b/view/components/hero.templ new file mode 100644 index 0000000..5e2109d --- /dev/null +++ b/view/components/hero.templ @@ -0,0 +1,5 @@ +package components + +templ Hero() { + { children... } +} diff --git a/view/components/hero_templ.go b/view/components/hero_templ.go new file mode 100644 index 0000000..30f35c8 --- /dev/null +++ b/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 + }) +} diff --git a/view/components/navbar.templ b/view/components/navbar.templ new file mode 100644 index 0000000..5055c80 --- /dev/null +++ b/view/components/navbar.templ @@ -0,0 +1,40 @@ +package components + +templ NavBar(hero templ.Component, navItems []NavItem) { + +} diff --git a/view/components/navbar_templ.go b/view/components/navbar_templ.go new file mode 100644 index 0000000..46f63cf --- /dev/null +++ b/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("") + 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 + }) +} diff --git a/view/components/util.go b/view/components/util.go index ed1ec09..ad1d9c1 100644 --- a/view/components/util.go +++ b/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) } diff --git a/view/layouts/manager.templ b/view/layouts/manager.templ index 0e0347d..9897406 100644 --- a/view/layouts/manager.templ +++ b/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) { @@ -9,11 +11,11 @@ templ Manager(config LayoutConfig) { -
- @header(config.MainTitle, config.SubTitle) +
+ @header(title, subtitle, navBarItem)
-