tidy: moved to components

.gitignore

@@ -5,12 +5,12 @@
 # go webserver code
 !cmd/
 !internal/
-!vendor/
 !static/
 !.air.toml
 !go.mod
 !go.sum
 !gomod2nix.toml
+static/js/
 
 # blogs
 !posts/

cmd/webserver/pages/cache.go → cmd/webserver/cache/cache.go

@@ -1,4 +1,4 @@
-package pages
+package cache
 
 import (
 	"fmt"

static/styles/components/ascii.css → cmd/webserver/components/ascii/ascii.css

@@ -5,10 +5,10 @@
     text-wrap: nowrap;
     white-space-collapse: preserve;
     text-align: center;
-}
 
-.ascii-char {
-    display: inline-block;
-    font-size: 5px;
-    width: 3px;
+    & .ascii-char {
+        display: inline-block;
+        font-size: 5px;
+        width: 3px;
+    }
 }

cmd/webserver/components/ascii/ascii.go

@@ -0,0 +1,21 @@
+package components
+
+import (
+	"html/template"
+)
+
+type Props struct {
+	Ascii [][]string
+}
+
+func (props Props) Component(t *template.Template) error {
+	name := "ascii"
+
+	filepath := "cmd/webserver/components/" + name + "/" + name + ".tmpl"
+
+	if _, err := t.New(name + "-component").ParseFiles(filepath); err != nil {
+		return err
+	} else {
+		return nil
+	}
+}

cmd/webserver/components/footer/footer.go

@@ -0,0 +1,19 @@
+package components
+
+import (
+	"html/template"
+)
+
+type Props struct{}
+
+func (props Props) Component(t *template.Template) error {
+	name := "footer"
+
+	filepath := "cmd/webserver/components/" + name + "/" + name + ".tmpl"
+
+	if _, err := t.New(name + "-component").ParseFiles(filepath); err != nil {
+		return err
+	} else {
+		return nil
+	}
+}

static/styles/components/header.css → cmd/webserver/components/header/header.css

@@ -30,4 +30,9 @@ header {
             }
         }
     }
+
+    .divider {
+        border-block-start: var(--space-3xs) solid var(--clr-high);
+        width: 100%;
+    }
 }

cmd/webserver/components/header/header.go

@@ -0,0 +1,39 @@
+package components
+
+import (
+	"html/template"
+
+	ascii "personal-website/cmd/webserver/components/ascii"
+	nav "personal-website/cmd/webserver/components/nav"
+)
+
+type Props struct {
+	Ascii       [][]string
+	PageCurrent string
+	Pages       []string
+}
+
+func (props Props) Component(t *template.Template) error {
+	name := "header"
+
+	filepath := "cmd/webserver/components/" + name + "/" + name + ".tmpl"
+
+	if err := (ascii.Props{
+		Ascii: props.Ascii,
+	}.Component(t)); err != nil {
+		return err
+	}
+
+	if err := (nav.Props{
+		PageCurrent: props.PageCurrent,
+		Pages:       props.Pages,
+	}.Component(t)); err != nil {
+		return err
+	}
+
+	if _, err := t.New(name + "-component").ParseFiles(filepath); err != nil {
+		return err
+	} else {
+		return nil
+	}
+}

cmd/webserver/components/header/header.tmpl

@@ -0,0 +1,11 @@
+{{ define "header" }}
+   <header>
+        {{ template "ascii" . }}
+        {{ template "nav" . }}
+        <div class="divider"></div>
+    </header> 
+{{ end }}
+
+{{ define "header-oob" }}
+    {{ template "nav-oob" . }}
+{{ end }}

cmd/webserver/components/nav/nav.css

@@ -0,0 +1,25 @@
+#nav {
+    width: 100%;
+
+    & a.selected {
+        font-weight: 700;
+        text-decoration: underline;
+    }
+
+    & ul {
+        display: flex;
+        justify-content: space-evenly;
+        list-style-type: none;
+        text-align: center;
+
+        & li {
+            flex: 1;
+
+            & a {
+                display: block;
+                padding-block: var(--space-2xs);
+                padding-inline: var(--space-xs);
+            }
+        }
+    }
+}

cmd/webserver/components/nav/nav.go

@@ -0,0 +1,22 @@
+package components
+
+import (
+	"html/template"
+)
+
+type Props struct {
+	PageCurrent string
+	Pages       []string
+}
+
+func (props Props) Component(t *template.Template) error {
+	name := "nav"
+
+	filepath := "cmd/webserver/components/" + name + "/" + name + ".tmpl"
+
+	if _, err := t.New(name + "-component").ParseFiles(filepath); err != nil {
+		return err
+	} else {
+		return nil
+	}
+}

cmd/webserver/components/header.tmpl → cmd/webserver/components/nav/nav.tmpl

@@ -1,16 +1,3 @@
-{{ define "nav-links" }}
-    {{ range $name := newRange "home" "blog" "projects" }}
-        <li><a 
-            id="nav-link-{{$name}}"
-            class="{{ if eq $.CurrentPage $name }}selected{{ end }}"
-            href="/{{ $name }}"
-            hx-get="/{{ $name }}/content"
-            hx-target="main"
-            hx-push-url="/{{ $name }}"
-        >{{ title $name }}</a></li>
-    {{ end }}
-{{ end }}
-
 {{ define "nav" }}
     <nav id="nav" hx-swap-oob="true">
         <ul>
@@ -19,14 +6,19 @@
     </nav>
 {{ end }}
 
-{{ define "nav-links-updater" }}
+{{ define "nav-oob" }}
     {{ template "nav" . }}
 {{ end }}
 
-{{ define "header" }}
-    <header>
-        {{ template "ascii" . }}
-        {{ template "nav" . }}
-        <div class="divider"></div>
-    </header>
+{{ define "nav-links" }}
+    {{ range $name := .Pages }}
+        <li><a 
+            id="nav-link-{{$name}}"
+            class="{{ if eq $.PageCurrent $name }}selected{{ end }}"
+            href="/{{ $name }}"
+            hx-get="/{{ $name }}/content"
+            hx-target="main"
+            hx-push-url="/{{ $name }}"
+        >{{ $name }}</a></li>
+    {{ end }}
 {{ end }}

cmd/webserver/components/spacer/spacer.go

@@ -0,0 +1,19 @@
+package components
+
+import (
+	"html/template"
+)
+
+type Props struct{}
+
+func (props Props) Component(t *template.Template) error {
+	name := "spacer"
+
+	filepath := "cmd/webserver/components/" + name + "/" + name + ".tmpl"
+
+	if _, err := t.New(name + "-component").ParseFiles(filepath); err != nil {
+		return err
+	} else {
+		return nil
+	}
+}

cmd/webserver/components/spacer/spacer.tmpl

@@ -0,0 +1,3 @@
+{{ define "spacer" }}
+    <span class="spacer">-</span>
+{{ end }}

cmd/webserver/layouts/base.go

@@ -0,0 +1,40 @@
+package layouts
+
+import (
+	"html/template"
+
+	// Components
+	footer "personal-website/cmd/webserver/components/footer"
+	header "personal-website/cmd/webserver/components/header"
+)
+
+type BaseLayout struct {
+	Ascii       [][]string
+	Pages       []string
+	PageCurrent string
+}
+
+func (props BaseLayout) Layout(t *template.Template) error {
+	name := "base"
+
+	filepath := "cmd/webserver/layouts/" + name + ".tmpl"
+
+	if _, err := t.New(name + "-layout").ParseFiles(filepath); err != nil {
+		return err
+	}
+
+	// Components
+	if err := (footer.Props{}.Component(t)); err != nil {
+		return err
+	}
+
+	if err := (header.Props{
+		Ascii:       props.Ascii,
+		PageCurrent: props.PageCurrent,
+		Pages:       props.Pages,
+	}.Component(t)); err != nil {
+		return err
+	}
+
+	return nil
+}

cmd/webserver/layouts/base.tmpl

@@ -0,0 +1,26 @@
+{{ define "base-layout" }}
+    <!DOCTYPE html>
+    <html lang="en">
+        <head>
+            <meta charset="UTF-8">
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            <meta name="description" content="Ethan Thoma's personal website" />
+
+            <script type="text/javascript" src="/static/js/htmx.min.js" defer></script>
+
+            <link rel="stylesheet" type="text/css" href="/static/styles/main.css">
+
+            <link rel="apple-touch-icon" sizes="180x180" href="/static/favicon/apple-touch-icon.png">
+            <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon/favicon-32x32.png">
+            <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon/favicon-16x16.png">
+            <link rel="manifest" href="/static/favicon/site.webmanifest">
+        </head>
+    <body>
+        {{ template "header" . }}
+        <main>
+            {{ template "content" . }}
+        </main>
+        {{ template "footer" . }}
+    </body>
+    </html>
+{{ end }}