tabbed interface.

This commit is contained in:
Erik Brakkee 2024-07-29 21:05:14 +02:00
parent 68056b0b77
commit 77cffde408
9 changed files with 69 additions and 28 deletions

View File

@ -35,6 +35,8 @@ func pageHandler(w http.ResponseWriter, r *http.Request) {
templates.UsageTab(secure, r.URL.Host, username).Render(r.Context(), w) templates.UsageTab(secure, r.URL.Host, username).Render(r.Context(), w)
case "downloads.html": case "downloads.html":
templates.DownloadsTab().Render(r.Context(), w) templates.DownloadsTab().Render(r.Context(), w)
case "sessions.html":
templates.SessionsTab().Render(r.Context(), w)
default: default:
http.NotFound(w, r) http.NotFound(w, r)
} }

View File

@ -9,20 +9,9 @@ import (
"path/filepath" "path/filepath"
) )
type RenderFunc func(secure string, host string, username string) templ.Component type RenderFunc func() templ.Component
type Params struct { func render(dir string, name string, render RenderFunc) {
secure string
host string
username string
}
type Rendering struct {
params Params
render RenderFunc
}
func render(dir string, name string, params Params, render RenderFunc) {
fname := filepath.Join(dir, name) fname := filepath.Join(dir, name)
log.Printf("Writing to %s", fname) log.Printf("Writing to %s", fname)
f, err := os.Create(fname) f, err := os.Create(fname)
@ -31,7 +20,7 @@ func render(dir string, name string, params Params, render RenderFunc) {
} }
defer f.Close() defer f.Close()
err = render(params.secure, params.host, params.username).Render(context.Background(), f) err = render().Render(context.Background(), f)
if err != nil { if err != nil {
panic(err) panic(err)
} }
@ -40,11 +29,15 @@ func render(dir string, name string, params Params, render RenderFunc) {
func main() { func main() {
dir := "html/docs" dir := "html/docs"
params := Params{ fullindex := func() templ.Component {
secure: "s", return templates.Index("s", "example.com", "converge")
host: "example.com", }
username: "converge", usage := func() templ.Component {
return templates.UsageTab("s", "example.com", "converge")
} }
render(dir, "index.html", params, templates.Index) render(dir, "fullindex.html", fullindex)
render(dir, "index.html", templates.AboutTab)
render(dir, "usage.html", usage)
render(dir, "downloads.html", templates.Downloads)
} }

View File

@ -44,7 +44,7 @@ templ About() {
templ AboutTab() { templ AboutTab() {
@BasePage() { @BasePage(1) {
@About() @About()
} }
} }

View File

@ -1,7 +1,15 @@
package templates package templates
templ BasePage() { func active(actual int, active int) string {
res := "nav-item nav-link"
if actual == active {
return res + " active"
}
return res
}
templ BasePage(tab int) {
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
@ -19,12 +27,34 @@ templ BasePage() {
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="container"> <nav class="navbar navbar-expand-sm navbar-light bg-light">
{ children... } <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
</div> data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNav" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="nav nav-pills">
<a class={active(1,tab)} href="index.html">overview</a>
<a class={active(2,tab)} href="usage.html">usage</a>
<a class={active(3,tab)} href="downloads.html">downloads</a>
<a class={active(4,tab)} href="sessions.html">sessions</a>
</div>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col">
{ children... }
</div> </div>
</div> </div>
</div> </div>
</body> </body>

View File

@ -0,0 +1 @@
package templates

View File

@ -40,7 +40,7 @@ templ Downloads() {
templ DownloadsTab() { templ DownloadsTab() {
@BasePage() { @BasePage(3) {
@Downloads() @Downloads()
} }
} }

View File

@ -1,7 +1,7 @@
package templates package templates
templ Index(secure string, host string, username string) { templ Index(secure string, host string, username string) {
@BasePage() { @BasePage(0) {
@About() @About()
@Usage(secure, host, username) @Usage(secure, host, username)
@Downloads() @Downloads()

View File

@ -0,0 +1,15 @@
package templates
templ Sessions() {
<div>
To be done
</div>
}
templ SessionsTab() {
@BasePage(4) {
@Sessions()
}
}

View File

@ -123,7 +123,7 @@ templ Usage(secure string, host string, username string) {
templ UsageTab(secure string, host string, username string) { templ UsageTab(secure string, host string, username string) {
@BasePage() { @BasePage(2) {
@Usage(secure, host, username) @Usage(secure, host, username)
} }
} }