goipam/web/templates/mainComponents.templ

114 lines
2.9 KiB
Plaintext
Raw Permalink Normal View History

2024-02-22 10:18:59 +01:00
package templates
templ head(title string) {
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="/static/bulma.min.css"/>
<link rel="stylesheet" href="/static/materialsymbols.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>{ title }</title>
</head>
}
templ footer(timestamp string) {
<footer class="footer is-fixed-bottom">
<div class="content has-text-centered">
<p>
2024-02-22 20:52:37 +01:00
<strong>GoIPAM</strong> by <a href="https://www.jmbit.de">Johannes Bülow</a> &copy; { timestamp } .
2024-02-22 10:18:59 +01:00
The source code is licensed <a href="https://opensource.org/license/gpl-2-0/">GPLv2</a>.
Using <a href="https://bulma.io/">Bulma</a>, <a href="https://htmx.org/">HTMX</a>, <a href="https://templ.guide/">Templ</a>, <a href="https://gin-gonic.com/">Gin</a> and <a href="https://gorm.io/">GORM</a>.
</p>
</div>
<script src="/static/htmx.min.js"></script>
<script src="/static/bulmaScripts.js"></script>
</footer>
}
templ navbar(loggedIn bool) {
2024-02-23 11:22:28 +01:00
<nav id="navbarTop" class="navbar is-transparent is-fixed-top mb-5" role="navigation" aria-label="main navigation">
2024-02-22 10:18:59 +01:00
<div class="navbar-brand">
2024-02-22 20:52:37 +01:00
<a class="navbar-item has-text-centered" href="/">
<p class="title">GoIPAM</p>
2024-02-22 10:18:59 +01:00
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarTop">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbar" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="/index.html">
Home
</a>
<a class="navbar-item">
Page
</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
@loginButton(loggedIn)
</div>
</div>
</div>
</nav>
}
templ loginButton(loggedIn bool) {
if loggedIn {
2024-02-22 20:52:37 +01:00
<a class="navbar-link" href="/profile/">
2024-02-22 10:18:59 +01:00
Profile
</a>
<div class="buttons">
2024-02-22 20:52:37 +01:00
<a class="button is-light" href="/logout.html">
2024-02-22 10:18:59 +01:00
Log out
</a>
</div>
} else {
<div class="buttons">
<a class="button is-light" href="/login.html">
Log in
</a>
</div>
}
}
2024-02-22 20:52:37 +01:00
templ ErrorMessage(title string, content string) {
2024-02-23 11:22:28 +01:00
<article class="message container is-warning" id="errorMessage">
2024-02-22 10:18:59 +01:00
<div class="message-header">
<p>{ title }</p>
2024-02-23 11:22:28 +01:00
<button
class="delete"
aria-label="delete"
hx-get="/empty.html"
hx-trigger="click"
hx-target="#errorMessage"
hx-swap="outerHTML"
></button>
2024-02-22 10:18:59 +01:00
</div>
<div class="message-body">
{ content }
</div>
</article>
}
2024-02-22 20:52:37 +01:00
// wrapBase handles the basics of HTML
templ wrapBase(metaContent MetaContent, title string) {
2024-02-22 20:52:37 +01:00
<!DOCTYPE HTML>
<html>
@head(title)
<body class="has-navbar-fixed-top">
@navbar(metaContent.IsLoggedIn)
if metaContent.ErrorText != "" {
@ErrorMessage(metaContent.ErrorTitle, metaContent.ErrorText)
2024-02-22 20:52:37 +01:00
}
{ children... }
@footer(metaContent.Timestamp)
</body>
</html>
}
templ Empty() {
<div id="empty"></div>
}