templates: Add a proper menu and navigation

internal/dis/component/control/static/assets.go

@@ -21,7 +21,7 @@ type Assets struct {
 	Styles  string // <link> tags inserted by the asset
 }
 
-//go:generate node build.mjs Home User Admin Legal
+//go:generate node build.mjs Default User Admin
 
 // MustParse parses a new template from the given source
 // and calls [RegisterAssoc] on it.

internal/dis/component/control/static/assets_dist.go

@@ -7,26 +7,20 @@ import _ "embed"
 //go:embed "assets_disclaimer.txt"
 var AssetsDisclaimer string
 
-// AssetsHome contains assets for the 'Home' entrypoint.
-var AssetsHome = Assets{
-	Scripts: `<script type="module" src="/static/Home.38d394c2.js"></script><script src="/static/Home.38d394c2.js" nomodule="" defer></script><script type="module" src="/static/Home.38d394c2.js"></script><script src="/static/Home.38d394c2.js" nomodule="" defer></script>`,
-	Styles:  `<link rel="stylesheet" href="/static/Home.4b303448.css"><link rel="stylesheet" href="/static/Home.f9675eae.css">`,	
+// AssetsDefault contains assets for the 'Default' entrypoint.
+var AssetsDefault = Assets{
+	Scripts: `<script type="module" src="/static/Default.38d394c2.js"></script><script src="/static/Default.38d394c2.js" nomodule="" defer></script><script type="module" src="/static/Default.38d394c2.js"></script><script src="/static/Default.38d394c2.js" nomodule="" defer></script>`,
+	Styles:  `<link rel="stylesheet" href="/static/Default.db26a303.css"><link rel="stylesheet" href="/static/Default.f9675eae.css">`,	
 }
 
 // AssetsUser contains assets for the 'User' entrypoint.
 var AssetsUser = Assets{
-	Scripts: `<script type="module" src="/static/Home.38d394c2.js"></script><script src="/static/Home.38d394c2.js" nomodule="" defer></script><script type="module" src="/static/User.4197014b.js"></script><script src="/static/User.30d54198.js" nomodule="" defer></script>`,
-	Styles:  `<link rel="stylesheet" href="/static/Home.4b303448.css"><link rel="stylesheet" href="/static/User.38d394c2.css">`,	
+	Scripts: `<script type="module" src="/static/Default.38d394c2.js"></script><script src="/static/Default.38d394c2.js" nomodule="" defer></script><script type="module" src="/static/User.4197014b.js"></script><script src="/static/User.30d54198.js" nomodule="" defer></script>`,
+	Styles:  `<link rel="stylesheet" href="/static/Default.db26a303.css"><link rel="stylesheet" href="/static/User.38d394c2.css">`,	
 }
 
 // AssetsAdmin contains assets for the 'Admin' entrypoint.
 var AssetsAdmin = Assets{
-	Scripts: `<script nomodule="" defer src="/static/User.30d54198.js"></script><script type="module" src="/static/User.4197014b.js"></script><script type="module" src="/static/Home.38d394c2.js"></script><script src="/static/Home.38d394c2.js" nomodule="" defer></script><script type="module" src="/static/Admin.4ca3cb6f.js"></script><script src="/static/Admin.9750ba9c.js" nomodule="" defer></script>`,
-	Styles:  `<link rel="stylesheet" href="/static/Home.4b303448.css"><link rel="stylesheet" href="/static/Admin.6d59e220.css"><link rel="stylesheet" href="/static/User.38d394c2.css"><link rel="stylesheet" href="/static/Admin.6d2ae968.css">`,	
-}
-
-// AssetsLegal contains assets for the 'Legal' entrypoint.
-var AssetsLegal = Assets{
-	Scripts: `<script type="module" src="/static/Home.38d394c2.js"></script><script src="/static/Home.38d394c2.js" nomodule="" defer></script><script type="module" src="/static/Legal.38d394c2.js"></script><script src="/static/Legal.38d394c2.js" nomodule="" defer></script>`,
-	Styles:  `<link rel="stylesheet" href="/static/Home.4b303448.css"><link rel="stylesheet" href="/static/Legal.d1531eba.css"><link rel="stylesheet" href="/static/Legal.20259812.css">`,	
+	Scripts: `<script nomodule="" defer src="/static/User.30d54198.js"></script><script type="module" src="/static/User.4197014b.js"></script><script type="module" src="/static/Default.38d394c2.js"></script><script src="/static/Default.38d394c2.js" nomodule="" defer></script><script type="module" src="/static/Admin.4ca3cb6f.js"></script><script src="/static/Admin.9750ba9c.js" nomodule="" defer></script>`,
+	Styles:  `<link rel="stylesheet" href="/static/Default.db26a303.css"><link rel="stylesheet" href="/static/Admin.6d59e220.css"><link rel="stylesheet" href="/static/User.38d394c2.css"><link rel="stylesheet" href="/static/Admin.6d2ae968.css">`,	
 }

internal/dis/component/control/static/custom/context.go

@@ -10,6 +10,7 @@ import (
 	"github.com/FAU-CDI/wisski-distillery/pkg/httpx"
 	"github.com/gorilla/csrf"
 	"github.com/tkw1536/goprogram/lib/reflectx"
+	"golang.org/x/exp/slices"
 )
 
 // baseContextName is the name of the [BaseContext] type
@@ -25,6 +26,10 @@ type BaseContext struct {
 
 	GeneratedAt time.Time // time this page was generated at
 
+	// Menu and breadcrumbs
+	Menu   []component.MenuItem
+	Crumbs []component.MenuItem
+
 	CSRF template.HTML // CSRF Field
 }
 
@@ -43,7 +48,8 @@ const (
 // The given request *must not* be nil.
 //
 // For convenience the passed context is also returned.
-func (tc *BaseContext) use(base component.Base, r *http.Request) *BaseContext {
+func (tc *BaseContext) use(custom *Custom, r *http.Request, crumbs []component.MenuItem) *BaseContext {
+	// tc.custom = custom
 	tc.inited = true
 	tc.requestWasNil = r == nil
 
@@ -55,9 +61,20 @@ func (tc *BaseContext) use(base component.Base, r *http.Request) *BaseContext {
 		tc.CSRF = csrf.TemplateField(r)
 	}
 
+	// build the menu
+	tc.Menu = custom.BuildMenu(r)
+
+	// build the breadcrumbs
+	tc.Crumbs = slices.Clone(crumbs)
+	last := len(tc.Crumbs) - 1
+	for i := range tc.Crumbs {
+		tc.Crumbs[i].Active = i == last
+	}
+
 	return tc
 }
 
+// DoInitCheck is called by the template to check that the BaseContext was initialized properly
 func (bc BaseContext) DoInitCheck() template.HTML {
 	if !bc.inited {
 		return initError
@@ -69,26 +86,21 @@ func (bc BaseContext) DoInitCheck() template.HTML {
 }
 
 // NewForm is like New, but returns a new BaseFormContext
-func (custom *Custom) NewForm(context httpx.FormContext, r *http.Request) (ctx BaseFormContext) {
+func (custom *Custom) NewForm(context httpx.FormContext, r *http.Request, crumbs []component.MenuItem) (ctx BaseFormContext) {
 	ctx.FormContext = context
-	ctx.use(custom.Base, r)
+	ctx.use(custom, r, crumbs)
 	return
 }
 
-// RenderContext is exactly like NewForm, but returns any to be used as httpx.Form.RenderTemplateContext
-func (custom *Custom) RenderContext(ctx httpx.FormContext, r *http.Request) any {
-	return custom.NewForm(ctx, r)
-}
-
 // Update updates an embedded BaseContext field in context.
 //
 // Assumes that context is a pointer to a struct type.
 // If this is not the case, might call panic().
-func (custom *Custom) Update(context any, r *http.Request) *BaseContext {
+func (custom *Custom) Update(context any, r *http.Request, crumbs []component.MenuItem) *BaseContext {
 	ctx := reflect.ValueOf(context).
 		Elem().FieldByName(baseContextName).Addr().
 		Interface().(*BaseContext)
-	ctx.use(custom.Base, r)
+	ctx.use(custom, r, crumbs)
 	return ctx
 }
 

internal/dis/component/control/static/custom/custom.go

@@ -2,16 +2,20 @@ package custom
 
 import (
 	"github.com/FAU-CDI/wisski-distillery/internal/dis/component"
+	"github.com/FAU-CDI/wisski-distillery/pkg/lazy"
 )
 
 // Custom implements theme and page customization.
 type Custom struct {
 	component.Base
 	Dependencies struct {
-		// nothing yet
+		Routeables []component.Routeable
+		Menuable   []component.Menuable
 	}
+	menu lazy.Lazy[[]component.MenuItem]
 }
 
 var (
 	_ component.Backupable = (*Custom)(nil)
+	_ component.Menuable   = (*Custom)(nil)
 )

internal/dis/component/control/static/custom/menu.go

@@ -0,0 +1,47 @@
+package custom
+
+import (
+	"html/template"
+	"net/http"
+
+	"github.com/FAU-CDI/wisski-distillery/internal/dis/component"
+	"github.com/FAU-CDI/wisski-distillery/pkg/mux"
+	"golang.org/x/exp/slices"
+)
+
+// getMenuItems gets a fresh copy of the cached slice of menu items
+func (custom *Custom) Menu(r *http.Request) []component.MenuItem {
+	return custom.menu.Get(func() []component.MenuItem {
+		items := make([]component.MenuItem, 0, len(custom.Dependencies.Routeables))
+		for _, route := range custom.Dependencies.Routeables {
+			routes := route.Routes()
+			if routes.MenuTitle == "" {
+				continue
+			}
+			items = append(items, component.MenuItem{
+				Title:    routes.MenuTitle,
+				Priority: routes.MenuPriority,
+				Path:     template.URL(routes.Prefix),
+			})
+		}
+		slices.SortFunc(items, component.MenuItemSort)
+		return items
+	})
+}
+
+func (custom *Custom) BuildMenu(r *http.Request) []component.MenuItem {
+	// NOTE(twiesing): Don't name this method "Menu", as it will cause
+	// a stack overflow.
+	path := mux.NormalizePath(r.URL.Path)
+
+	// get the static menu items, and then return all the regular ones
+	var items []component.MenuItem
+	for _, m := range custom.Dependencies.Menuable {
+		items = append(items, m.Menu(r)...)
+	}
+	for i, item := range items {
+		items[i].Active = string(item.Path) == path
+	}
+	slices.SortFunc(items, component.MenuItemSort)
+	return items
+}

internal/dis/component/control/static/dist/Legal.20259812.css

@@ -1 +0,0 @@
-html{background-color:#87a485}body{max-width:80vw!important}

internal/dis/component/control/static/src/base/index.css

@@ -8,6 +8,30 @@ footer {
     margin: 2em;
 }
 
+nav.pure-menu, nav.breadcrumbs {
+    padding-top: 1em;
+    padding-bottom: 1em;
+    border-bottom: 1px solid black;
+}
+
+nav.breadcrumbs {
+    padding-left: 1em;
+    font-size: small;
+}
+
+nav.breadcrumbs a:not(:last-child)::after {
+    cursor: default;
+    content: " > ";
+    color: black;
+}
+nav.breadcrumbs a {
+    text-decoration: none;
+    color: blue !important;
+}
+nav.breadcrumbs a.active {
+    font-weight: bold;
+}
+
 footer {
     font-size: small;
     border-top: 1px solid black;

internal/dis/component/control/static/src/entry/Legal/index.css

@@ -1,7 +0,0 @@
-html {
-    background-color: #87A485;
-}
-
-body {
-    max-width: 80vw !important;
-}

internal/dis/component/control/static/src/entry/Legal/index.ts

@@ -1 +0,0 @@
-import "latex.css/style.min.css"

internal/dis/component/control/static/templates/_base.html

@@ -10,6 +10,21 @@
 
 <body>
     {{ .BaseContext.DoInitCheck }}
+    <nav class="pure-menu pure-menu-horizontal">
+        <ul class="pure-menu-list">
+            {{ range .BaseContext.Menu }}    
+                <li class="pure-menu-item{{ if .Active }} pure-menu-selected{{ end }}">
+                    <a href="{{ .Path }}" class="pure-menu-link">{{ .Title }}</a>
+                </li>
+            {{ end }}
+        </ul>
+    </nav>
+    <nav class="breadcrumbs" role="group" aria-label="Breadcrumbs">
+        {{ range .BaseContext.Crumbs }}    
+            <a class="{{ if .Active }}active{{ end }}" href="{{ .Path }}">{{ .Title }}</a>
+        {{ end }}
+    </nav>
+    
     <header>
         <h1 id="top">{{ template "title" . }}</h1>
         {{ block "header" . }}<!-- no header by default -->{{ end }}

internal/dis/component/control/static/templates/_form.html

@@ -1,7 +1,6 @@
 {{ template "_base.html" . }}
 {{ define "title" }}{{ block "form/title" . }}Form{{ end }}{{ end }}
 
-{{ define "header" }}<!-- no header -->{{ end }}
 {{ define "content" }}
 <div class="pure-u-1">
     {{ block "form/extra" . }}<!-- no extra -->{{ end }}