From f97b31093c643308e65c0d252b52575ba879cd4b Mon Sep 17 00:00:00 2001 From: Nickiel12 Date: Sat, 13 Jan 2024 18:33:26 -0800 Subject: [PATCH] added htmx swapping and url history features --- web/dashboard.templ | 12 +++++++ web/hello.templ | 1 + web/router.go | 68 ++++++++++++++++++++++++++++++++++------ web/sass/nav.scss | 34 +++++++++++++------- web/sass/site.scss | 31 ++++++++++++++++++ web/static/index.js | 18 ++++++++++- web/templates/index.html | 56 ++++++++++++++++++++++++--------- 7 files changed, 184 insertions(+), 36 deletions(-) create mode 100644 web/dashboard.templ 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!

- +
-
+
+
+ +
  • + + Not home! + +
    • + +
    +
    + {{.InnerHtml}} +
    +