removed tailwindcss-dracula

- defined custom colours for ui elements - created layouts directory in views that control layouts - made the header in homepage flexbox
2024-03-15 11:55:28 -06:00 · 2024-03-15 11:55:28 -06:00 · 8a736a57f9
commit 8a736a57f9
parent 9c35be1fcf
16 changed files with 102143 additions and 22204 deletions
--- a/.air.toml
+++ b/.air.toml
@ -6,7 +6,7 @@ tmp_dir = "tmp"
  args_bin = []
  bin = "./tmp/main"
  pre_cmd = [""]
-  cmd = "templ generate && npx tailwindcss -i css/style.css -o public/css/style.css && go build -o ./tmp/main ."
+  cmd = "templ generate && go build -o ./tmp/main ."
  delay = 1000
  exclude_dir = ["tmp", "vendor", "testdata", "node_modules", "public"]
  exclude_file = []
--- a/main.go
+++ b/main.go
@ -4,7 +4,7 @@ import (
 	"log"
 	"net/http"

-	"git.staur.ca/stobbsm/clustvirt/view"
+	"git.staur.ca/stobbsm/clustvirt/view/static"
 	"github.com/go-chi/chi/v5"
 	"github.com/go-chi/chi/v5/middleware"
 )
@ -40,7 +40,7 @@ func main() {
 		}
 		fs.ServeHTTP(w, r)
 	})
-	r.Get("/", view.HomePage)
+	r.Get("/", static.HomePage)

 	log.Println(http.ListenAndServe(":3000", r))
 }
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,11 @@
 {
-  "name": "assets",
+  "name": "clustvirt",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "devDependencies": {
        "@tailwindcss/forms": "^0.5.7",
-        "tailwind-dracula": "^1.1.0",
        "tailwindcss": "^3.4.1"
      }
    },
@ -200,12 +199,15 @@
      "dev": true
    },
    "node_modules/binary-extensions": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
      "dev": true,
      "engines": {
        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
    "node_modules/brace-expansion": {
@ -1195,15 +1197,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/tailwind-dracula": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/tailwind-dracula/-/tailwind-dracula-1.1.0.tgz",
-      "integrity": "sha512-LjU1df6WGS5eUwozdPtZ7jARojHYTIe6y1Gj5v2QNaNnMnLm7ipPtlIEGlNXXraWjVnWeRbLZl4vvr48mMFGxw==",
-      "dev": true,
-      "peerDependencies": {
-        "tailwindcss": "2.x || 3.x"
-      }
-    },
    "node_modules/tailwindcss": {
      "version": "3.4.1",
      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
--- a/package.json
+++ b/package.json
@ -1,7 +1,6 @@
 {
  "devDependencies": {
    "@tailwindcss/forms": "^0.5.7",
-    "tailwind-dracula": "^1.1.0",
    "tailwindcss": "^3.4.1"
  }
 }
--- a/public/css/style.css
+++ b/public/css/style.css
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -3,10 +3,10 @@ module.exports = {
  content: ["**/*.templ", "**/*.go"],
  safelist: [
    {
-      pattern: /(bg|text|shadow|divide|border)-(aro|blade|buffy|cullen|dracula|lincoln|marcelin|morbius|nosferatu|vanhelsing|voncount)-[0-9]+/,
+      pattern: /list-image-(accepted|informational|never|possible)/,
    },
    {
-      pattern: /list-image-(accepted|informational|never|possible)/,
+      pattern: /[a-z]+-(uiblue|uired|uigreen|uiyellow|uiorange)-[0-9]+/
    },
  ],
  theme: {
@ -20,11 +20,72 @@ module.exports = {
      content: {
        link: 'url("/static/icons/link.svg")',
      },
+      colors: {
+        'uiblue': {
+          50: '#eff2f8',
+          100: '#dee6f2',
+          200: '#becce4',
+          300: '#9db3d7',
+          400: '#7d99c9',
+          500: '#5c80bc',
+          600: '#4a6696',
+          700: '#374d71',
+          800: '#25334b',
+          900: '#121a26',
+        },
+        'uired': {
+          50: '#fbe9ef',
+          100: '#f7d2de',
+          200: '#efa5bd',
+          300: '#e8789d',
+          400: '#e04b7c',
+          500: '#d81e5b',
+          600: '#ad1849',
+          700: '#821237',
+          800: '#560c24',
+          900: '#2b0612',
+        },
+        'uigreen': {
+          50: '#f5f9f5',
+          100: '#ebf2ec',
+          200: '#d8e5d8',
+          300: '#c4d9c5',
+          400: '#b1ccb1',
+          500: '#9dbf9e',
+          600: '#7e997e',
+          700: '#5e735f',
+          800: '#3f4c3f',
+          900: '#1f2620',
+        },
+        'uiyellow': {
+          50: '#fffff5',
+          100: '#ffffea',
+          200: '#fffed6',
+          300: '#fffec1',
+          400: '#fffdad',
+          500: '#fffd98',
+          600: '#ccca7a',
+          700: '#99985b',
+          800: '#66653d',
+          900: '#33331e',
+        },
+        'uiorange': {
+          50: '#f9f3ef',
+          100: '#f2e8df',
+          200: '#e5d0bf',
+          300: '#d8b9a0',
+          400: '#cba180',
+          500: '#be8a60',
+          600: '#986e4d',
+          700: '#72533a',
+          800: '#4c3726',
+          900: '#261c13',
+        },
+      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
-    require('tailwind-dracula')(),
  ],
 }

--- a/view/_footer.gohtml
+++ b/view/_footer.gohtml
@ -1,7 +0,0 @@
-{{ define "footer" }}
-  <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>
-{{ end }}
--- a/view/_header.gohtml
+++ b/view/_header.gohtml
@ -1,10 +0,0 @@
-{{ define "header" }}
-  <h1 class="text-2xl font-bold">Clustvirt</h1>
-  <h2 class="text-sm font-thin italic">Libvirtd simplified and clustered</h2>
-  <nav>
-    <ul>
-      <li>Server 1</li>
-      <li>Server 2</li>
-    </ul>
-  </nav>
-{{ end }}
--- a/view/_index.gohtml
+++ b/view/_index.gohtml
@ -1,22 +0,0 @@
-{{ define "_index" }}
-<!DOCTYPE html>
-<html class="text-nosferatu-100 bg-nosferatu-900">
-<head>
-  <title>Clustvirt</title>
-  <link href="/static/css/style.css" type="text/css" rel="stylesheet"/>
-</head>
-<body>
-  <header>
-    {{ template "header" }}
-  </header>
-  
-  <div id="content" name="content">
-    {{ template "content" . }}
-  </div>
-
-  <footer>
-    {{ template "footer" }}
-  </footer>
-</body>
-</html>
-{{ end }}
--- a/view/components/index.templ
+++ b/view/components/index.templ
@ -1,46 +0,0 @@
-package components
-
-templ Index(content ...templ.Component) {
-<!DOCTYPE html>
-<html class={ "text-nosferatu-100" , "bg-nosferatu-900" }>
-
-<head>
-  <title>Clustvirt</title>
-  <link href="/static/css/style.css" type="text/css" rel="stylesheet" />
-</head>
-
-<body>
-  <header>
-    @header()
-  </header>
-  <div id="content" name="content">
-    for _, cnt := range content {
-      @cnt
-    }
-  </div>
-  <footer>
-    @footer()
-  </footer>
-</body>
-
-</html>
-}
-
-templ header() {
-  <h1 class={ "text-2xl", "font-bold" }>Clustvirt</h1>
-  <h2 class={ "text-sm", "font-thin", "italic" }>Libvirtd simplified and clustered</h2>
-  <nav>
-    <ul>
-      <li>Server 1</li>
-      <li>Server 2</li>
-    </ul>
-  </nav>
-}
-
-templ footer() {
-  <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>
-}
--- a/view/host.gohtml
+++ b/view/host.gohtml
@ -1,4 +0,0 @@
-{{ define "content" }}
-  <h1>{{.HostName}}</h1>
-  <p>This will contain all the graphs, storage pool lists, vm lists, etc for the host selected.</p>
-{{ end }}
--- a/view/layouts/staticpage.templ
+++ b/view/layouts/staticpage.templ
@ -0,0 +1,56 @@
+package layouts
+
+type StaticPageConfig struct {
+  MainTitle string
+  SubTitle string
+}
+
+templ StaticPage(config StaticPageConfig, children ...templ.Component) {
+<!DOCTYPE html>
+<html class={ "text-slate-100" , "bg-slate-900" }>
+
+<head>
+  <title>Clustvirt</title>
+  <link href="/static/css/style.css" type="text/css" rel="stylesheet" />
+</head>
+
+<body>
+  <header class={
+    "flex",
+    "sm:flex-col", "sm:h20", "sm:justify-start",
+    "lg:flex-row", "lg:h-8", "lg:items-end", "lg:justify-center",
+    "gap-x-2",
+    }>
+    @header(config.MainTitle, config.SubTitle)
+  </header>
+  <div id="content" name="content">
+    for _, child := range children {
+    @child
+    }
+  </div>
+  <footer>
+    @footer()
+  </footer>
+</body>
+
+</html>
+}
+
+templ header(title string, subtitle string) {
+<h1 class={ "text-2xl", "font-bold", "h-8" }>{ title }</h1>
+<h2 class={ "text-sm", "font-thin", "italic", "h-4", "align-bottom" }>{ subtitle }</h2>
+<nav>
+  @nav()
+</nav>
+}
+
+templ nav() {
+}
+
+templ footer() {
+<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>
+}
--- a/view/layouts/staticpage_templ.go
+++ b/view/layouts/staticpage_templ.go
@ -1,7 +1,7 @@
 // Code generated by templ - DO NOT EDIT.

 // templ: version: v0.2.598
-package components
+package layouts

 //lint:file-ignore SA4006 This context is only used if a nested component is present.

@ -10,7 +10,12 @@ import "context"
 import "io"
 import "bytes"

-func Index(content ...templ.Component) templ.Component {
+type StaticPageConfig struct {
+	MainTitle string
+	SubTitle  string
+}
+
+func StaticPage(config StaticPageConfig, children ...templ.Component) 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 {
@ -27,7 +32,7 @@ func Index(content ...templ.Component) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var2 = []any{"text-nosferatu-100", "bg-nosferatu-900"}
+		var templ_7745c5c3_Var2 = []any{"text-slate-100", "bg-slate-900"}
 		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
@ -40,11 +45,33 @@ func Index(content ...templ.Component) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><head><title>Clustvirt</title><link href=\"/static/css/style.css\" type=\"text/css\" rel=\"stylesheet\"></head><body><header>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><head><title>Clustvirt</title><link href=\"/static/css/style.css\" type=\"text/css\" rel=\"stylesheet\"></head><body>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = header().Render(ctx, templ_7745c5c3_Buffer)
+		var templ_7745c5c3_Var3 = []any{
+			"flex",
+			"sm:flex-col", "sm:h20", "sm:justify-start",
+			"lg:flex-row", "lg:h-8", "lg:items-end", "lg:justify-center",
+			"gap-x-2",
+		}
+		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("<header 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("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = header(config.MainTitle, config.SubTitle).Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@ -52,8 +79,8 @@ func Index(content ...templ.Component) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		for _, cnt := range content {
-			templ_7745c5c3_Err = cnt.Render(ctx, templ_7745c5c3_Buffer)
+		for _, child := range children {
+			templ_7745c5c3_Err = child.Render(ctx, templ_7745c5c3_Buffer)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@ -77,7 +104,7 @@ func Index(content ...templ.Component) templ.Component {
 	})
 }

-func header() templ.Component {
+func header(title string, subtitle 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 {
@ -85,13 +112,13 @@ func header() templ.Component {
 			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var3 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var3 == nil {
-			templ_7745c5c3_Var3 = templ.NopComponent
+		templ_7745c5c3_Var4 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var4 == nil {
+			templ_7745c5c3_Var4 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var4 = []any{"text-2xl", "font-bold"}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var4...)
+		var templ_7745c5c3_Var5 = []any{"text-2xl", "font-bold", "h-8"}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var5...)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@ -99,16 +126,29 @@ func header() templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ.CSSClasses(templ_7745c5c3_Var4).String()))
+		_, 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("\">Clustvirt</h1>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var5 = []any{"text-sm", "font-thin", "italic"}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var5...)
+		var templ_7745c5c3_Var6 string
+		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: 39, Col: 52}
+		}
+		_, 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("</h1>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 = []any{"text-sm", "font-thin", "italic", "h-4", "align-bottom"}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var7...)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@ -116,14 +156,55 @@ func header() templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ.CSSClasses(templ_7745c5c3_Var5).String()))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ.CSSClasses(templ_7745c5c3_Var7).String()))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">Libvirtd simplified and clustered</h2><nav><ul><li>Server 1</li><li>Server 2</li></ul></nav>")
+		_, 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(subtitle)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/layouts/staticpage.templ`, Line: 40, Col: 80}
+		}
+		_, 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("</h2><nav>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = nav().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</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
+	})
+}
+
+func nav() 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_Var9 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var9 == nil {
+			templ_7745c5c3_Var9 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
 		if !templ_7745c5c3_IsBuffer {
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
 		}
@ -139,9 +220,9 @@ func footer() templ.Component {
 			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var6 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var6 == nil {
-			templ_7745c5c3_Var6 = templ.NopComponent
+		templ_7745c5c3_Var10 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var10 == nil {
+			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>")
--- a/view/pages.go
+++ b/view/pages.go
@ -1,43 +0,0 @@
-package view
-
-import (
-	"log"
-	"os"
-)
-
-// Regular pages are defined as views here, like the homepage
-
-// Major components of each page.
-const (
-	index  = `view/_index.gohtml`
-	header = `view/_header.gohtml`
-	footer = `view/_footer.gohtml`
-)
-
-// These constitute the static parts of the site that don't need to change, loaded as a template for rendering
-const (
-	home = `view/static/home.gohtml`
-)
-
-func init() {
-	if fi, err := os.Stat(index); err != nil {
-		log.Fatal(fi.Name(), fi.IsDir(), err)	
-	}
-	if fi, err := os.Stat(header); err != nil {
-		log.Fatal(fi.Name(), fi.IsDir(), err)	
-	}
-	if fi, err := os.Stat(footer); err != nil {
-		log.Fatal(fi.Name(), fi.IsDir(), err)	
-	}
-	if fi, err := os.Stat(home); err != nil {
-		log.Fatal(fi.Name(), fi.IsDir(), err)	
-	}}
-
-var ViewHome *View
-
-func init() {
-	log.Println("Initializing homepage")
-	var err error
-	ViewHome, err = NewFromFile(home)
-	log.Println(err)
-}
--- a/view/static/home.go
+++ b/view/static/home.go
@ -1,9 +1,10 @@
-package view
+package static

 import (
 	"context"
 	"net/http"

+	"git.staur.ca/stobbsm/clustvirt/view/layouts"
 	"git.staur.ca/stobbsm/clustvirt/view/components"
 )

@ -12,9 +13,9 @@ func HomePage(w http.ResponseWriter, r *http.Request) {
 	defer r.Body.Close()
 	ibWhatIsThis := components.InfoBox(
 		components.InfoBoxConfig{
-			ColourClass: "aro",
-			InFlex: true,
-			FlexBasis: "basis-1/3",
+			ColourClass: "uigreen",
+			InFlex:      true,
+			FlexBasis:   "basis-1/3",
 		},
 		"What is this?",
 		components.ContentP(
@ -29,9 +30,9 @@ func HomePage(w http.ResponseWriter, r *http.Request) {

 	ibWhy := components.InfoBox(
 		components.InfoBoxConfig{
-			ColourClass: "dracula",
-			InFlex: true,
-			FlexBasis: "basis-2/3",
+			ColourClass: "uiyellow",
+			InFlex:      true,
+			FlexBasis:   "basis-2/3",
 		},
 		"Why?",
 		components.ContentList(
@ -49,9 +50,9 @@ func HomePage(w http.ResponseWriter, r *http.Request) {

 	ibProjectGoals := components.InfoBox(
 		components.InfoBoxConfig{
-			ColourClass: "blade",
-			InFlex: true,
-			FlexBasis: "basis-7/12",
+			ColourClass: "uiorange",
+			InFlex:      true,
+			FlexBasis:   "basis-7/12",
 		},
 		"Project Goals",
 		components.ContentList(
@ -78,9 +79,9 @@ func HomePage(w http.ResponseWriter, r *http.Request) {

 	ibStretchGoals := components.InfoBox(
 		components.InfoBoxConfig{
-			ColourClass: "cullen",
-			InFlex: true,
-			FlexBasis: "basis-5/12",
+			ColourClass: "uiblue",
+			InFlex:      true,
+			FlexBasis:   "basis-5/12",
 		},
 		"Stretch Goals",
 		components.ContentList(
@ -97,9 +98,9 @@ func HomePage(w http.ResponseWriter, r *http.Request) {

 	ibRedditRequested := components.InfoBox(
 		components.InfoBoxConfig{
-			ColourClass: "morbius",
-			InFlex: true,
-			FlexBasis: "basis-8/12",
+			ColourClass: "uired",
+			InFlex:      true,
+			FlexBasis:   "basis-8/12",
 		},
 		"Reddit Requested Features",
 		components.ContentList(
@ -121,9 +122,9 @@ func HomePage(w http.ResponseWriter, r *http.Request) {

 	ibNeverHappening := components.InfoBox(
 		components.InfoBoxConfig{
-			ColourClass: "marcelin",
-			InFlex: true,
-			FlexBasis: "basis-4/12",
+			ColourClass: "uiyellow",
+			InFlex:      true,
+			FlexBasis:   "basis-4/12",
 		},
 		"Never Going to Happen",
 		components.ContentList(
@ -141,7 +142,11 @@ func HomePage(w http.ResponseWriter, r *http.Request) {
 		),
 	)

-	idx := components.Index(
+	idx := layouts.StaticPage(
+		layouts.StaticPageConfig{
+			MainTitle: "ClustVirt",
+			SubTitle: "Libvirt, clustered and managed",
+		},
 		components.FlexRow(
 			true,
 			ibWhatIsThis,
--- a/view/view.go
+++ b/view/view.go
@ -1,55 +0,0 @@
-// Package view handles WebUI generation for clustvirt. The methods and utilties in this module control what is viewed,
-// templates that are loaded, and building those templates. Caching is not considered beyond what is done
-// automattically by go (if anything).
-package view
-
-import (
-	"html/template"
-	"io"
-	"log"
-	"os"
-)
-
-// View is responsible for assembling a group of templates, providing
-// methods to add data and compose pages in a common way.
-type View struct {
-	content  string
-	template *template.Template
-}
-
-var basetemplate *template.Template
-
-// New returns a new instance of the View, expecting the content to be the actual
-// content as a template defining "content", in string format.
-func New(content string) *View {
-	if basetemplate == nil {
-		log.Println("Initializing base template")
-		basetemplate = template.Must(template.New("").ParseFiles(index, header, footer))
-	}
-	log.Println("Cloning base template")
-	v := &View{template: template.Must(basetemplate.Clone())}
-	v.parse(content)
-
-	return v
-}
-
-// NewFromFile loads a template from a file
-func NewFromFile(file string) (*View, error) {
-	b, err := os.ReadFile(file)
-	return New(string(b)), err
-}
-
-func (v *View) parse(tmpl string) error {
-	log.Println("Parsing template contents")
-	if _, err := v.template.Parse(tmpl); err != nil {
-		return err
-	}
-	log.Println("Template parsed")
-	return nil
-}
-
-// Render returns the executed template with data
-func (v *View) Render(w io.Writer, data any) error {
-	log.Println("Excuting template")
-	return v.template.ExecuteTemplate(w, "_index", data)
-}