feat: initial commit

2025-06-10 21:09:58 +02:00
commit 1fb753469e
84 changed files with 3912 additions and 0 deletions
--- a/internal/http/handler/webui/common/component/page.templ
+++ b/internal/http/handler/webui/common/component/page.templ
@ -0,0 +1,68 @@
+package component
+
+type PageOptions struct {
+	Title string
+	Head  func() templ.Component
+}
+
+type PageOptionFunc func(opts *PageOptions)
+
+func WithTitle(title string) PageOptionFunc {
+	return func(opts *PageOptions) {
+		if title != "" {
+			opts.Title = title + " | Kouiz"
+		} else {
+			opts.Title = "Kouiz"
+		}
+	}
+}
+
+func WithHead(fn func() templ.Component) PageOptionFunc {
+	return func(opts *PageOptions) {
+		opts.Head = fn
+	}
+}
+
+func NewPageOptions(funcs ...PageOptionFunc) *PageOptions {
+	opts := &PageOptions{
+		Title: "",
+		Head:  nil,
+	}
+	for _, fn := range funcs {
+		fn(opts)
+	}
+
+	return opts
+}
+
+templ Page(funcs ...PageOptionFunc) {
+	{{ opts := NewPageOptions(funcs...) }}
+	<!DOCTYPE html>
+	<html data-theme="dark">
+		<head>
+			<meta charset="utf-8"/>
+			<meta name="viewport" content="width=device-width, initial-scale=1"/>
+			<title>{ opts.Title }</title>
+			<link rel="icon" type="image/x-icon" href={ string(BaseURL(ctx, WithPath("/assets/favicon.ico"))) }/>
+			<link rel="stylesheet" href={ string(BaseURL(ctx, WithPath("/assets/bulma.min.css"))) }/>
+			<link rel="stylesheet" href={ string(BaseURL(ctx, WithPath("/assets/fontawesome/css/all.min.css"))) }/>
+			<link rel="stylesheet" href={ string(BaseURL(ctx, WithPath("/assets/style.css"))) }/>
+			<script src={ string(BaseURL(ctx, WithPath("/assets/htmx.min.js"))) }></script>
+			if opts.Head != nil {
+				@opts.Head()
+			}
+		</head>
+		<body hx-boost="true" class="is-fullheight">
+			<div id="main" class="is-fullheight">
+				{ children... }
+			</div>
+			<script type="text/javascript">
+				htmx.config.responseHandling = [
+					{code:"204", swap: false},   // 204 - No Content by default does nothing, but is not an error
+					{code:"[23]..", swap: true}, // 200 & 300 responses are non-errors and are swapped
+					{code:"[45]..", swap: true, error:true}, // 400 & 500 responses are not swapped and are errors
+				];
+			</script>
+		</body>
+	</html>
+}