diff --git a/web/dashboard.templ b/web/dashboard.templ
new file mode 100644
index 0000000..f3d0da4
--- /dev/null
+++ b/web/dashboard.templ
@@ -0,0 +1,12 @@
+package web
+
+templ dashboard() {
+ Home
+ Hello World!
+
+
+
+
+
+
+}
diff --git a/web/hello.templ b/web/hello.templ
index bebfdc0..7e9b435 100644
--- a/web/hello.templ
+++ b/web/hello.templ
@@ -1,6 +1,7 @@
package web
templ hello(name string) {
+ Hello
Hello { name }
SUPRISE!!!
}
diff --git a/web/router.go b/web/router.go
index 3680345..d6b0141 100644
--- a/web/router.go
+++ b/web/router.go
@@ -1,22 +1,25 @@
package web
import (
+ "html/template"
"net/http"
- "html/template"
- "context"
+ "bytes"
+ "context"
+ "github.com/a-h/templ"
"github.com/go-chi/chi/v5"
"github.com/rs/zerolog"
"github.com/rs/zerolog/log"
)
-const TemplateDir = "./web/templates/"
-
-type IndexData struct {
- Title string
+type TemplateState struct {
+ InnerHtml template.HTML
+ ActivePage string
}
+const TemplateDir = "./web/templates/"
+
func SetLogLevel(level zerolog.Level) {
zerolog.SetGlobalLevel(level)
}
@@ -29,19 +32,64 @@ func WebRouter() http.Handler {
return r
}
-func getIndex(w http.ResponseWriter, req *http.Request) {
+//for name, values := range req.Header {
+ // Loop over all values for the name.
+// for _, value := range values {
+// log.Debug().Msg(name + " " + value);
+// }
+// }
+
+func renderFullPage(w http.ResponseWriter, c templ.Component, pageName string) {
+ var buf bytes.Buffer
+
+ // Render the provided templ component
+ err := c.Render(context.Background(), &buf)
+ if err != nil {
+ log.Fatal().Err(err).Msg("Fatal error reading hello template");
+ }
+
+ // get the index template
index, err := template.ParseFiles(TemplateDir + "index.html")
if err != nil {
log.Fatal().
Err(err).
Msg("Fatal error reading index template")
}
+
+ // Inject the templ component html into the index template
+ err = index.Execute(w,
+ TemplateState{
+ InnerHtml: template.HTML(buf.String()),
+ ActivePage: pageName,
+ });
+ if err != nil {
+ log.Fatal().Err(err).Msg("Fatal error reading hello template");
+ }
+}
- err = index.Execute(w, IndexData{Title: "thetitle"})
+func getIndex(w http.ResponseWriter, req *http.Request) {
+ component := dashboard();
+
+ _, ok := req.Header["Hx-Request"]
+ if ok {
+ err := component.Render(context.Background(), w);
+ if err != nil {
+ log.Fatal().Err(err).Msg("Couldn't render dashboard templ template");
+ }
+ } else {
+ renderFullPage(w, component, "index");
+ }
}
func getHello(w http.ResponseWriter, req *http.Request) {
- log.Debug().Msg("Got index")
component := hello("Nick")
- component.Render(context.Background(), w)
+ _, ok := req.Header["Hx-Request"]
+ if ok {
+ err := component.Render(context.Background(), w);
+ if err != nil {
+ log.Fatal().Err(err).Msg("Couldn't render dashboard templ template");
+ }
+ }else {
+ renderFullPage(w, component, "hello");
+ }
}
diff --git a/web/sass/nav.scss b/web/sass/nav.scss
index 41ae196..f35dcba 100644
--- a/web/sass/nav.scss
+++ b/web/sass/nav.scss
@@ -1,30 +1,42 @@
+header {
+ background-color: $nav-bg;
+ height: 30px;
+ width: 100%;
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
nav {
background-color: $nav-bg;
display: flex;
+ flex-direction: column;
ul {
margin: 0;
padding: 0;
list-style: none;
+ padding-left: 0;
}
- li { display: inline-block; }
-
- button.title {
- color: $green;
+ li {
+ margin-top: 10px;
+ margin-bottom: 10px;
}
- button.active {
+ a.active {
+ pointer-events: none;
background-color: $nav-active-bg;
color: $nav-active-color;
}
- button {
+ a {
+ transition: background-color $hl-trn-spd ease-in, color $hl-trn-spd ease-in;
+ border-radius: 5px;
+ text-align: center;
+ padding: 12px 0px;
+ display: inline-block;
+ cursor: pointer;
color: $nav-color;
- display: block;
- padding: 12px 24px;
+ width: 100%;
text-decoration: none;
- @include button_link;
}
- button:hover {
+ a:hover {
background-color: $nav-hover;
}
-
}
diff --git a/web/sass/site.scss b/web/sass/site.scss
index 559f068..bed97e1 100644
--- a/web/sass/site.scss
+++ b/web/sass/site.scss
@@ -1,5 +1,8 @@
@import 'catpuccin';
+// highlight transition speed
+$hl-trn-spd: 0.2s;
+
$bg: $latte-base;
$nav-bg: $latte-crust;
$nav-color: $latte-text;
@@ -21,3 +24,31 @@ body.dark-mode {
$nav-bg: $macchiato-crust;
$green: $macchiato-green;
}
+
+div#below-header {
+ display:flex;
+}
+
+div#left-col {
+ width: 15vw;
+ padding: 10px;
+}
+
+div#main-body-content {
+ width: 70vw;
+ padding: 10px;
+ opacity: 1;
+ transition: opacity 0.2s ease-out;
+}
+div#main-body-content.htmx-swapping {
+ opacity: 0;
+ transition: opacity 0.2s ease-out;
+}
+div#main-body-content.htmx-added {
+ opacity: 0;
+}
+
+div#right-col {
+ width: 15vw;
+ padding: 10px;
+}
diff --git a/web/static/index.js b/web/static/index.js
index 8f0f646..0998160 100644
--- a/web/static/index.js
+++ b/web/static/index.js
@@ -3,4 +3,20 @@ function say_hello() {
console.log("Hello World");
}
-export {say_hello};
+function register_nav_links() {
+ var navAnchors = document.querySelectorAll("nav a");
+
+ navAnchors.forEach(function (a_el) {
+ a_el.addEventListener("click", nav_a_click);
+ });
+}
+
+function nav_a_click(event) {
+ var active_anchor = document.querySelector("nav a.active");
+ active_anchor.classList.remove("active");
+
+ var clicked = event.target;
+ clicked.classList.add("active");
+}
+
+export {say_hello, register_nav_links};
diff --git a/web/templates/index.html b/web/templates/index.html
index cf6dc8f..54769f3 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -5,30 +5,58 @@
- {{.Title}}
-
-
Hello World!
-
+