features/cookies-maybe #2
@ -1,10 +1,10 @@
|
|||||||
package auth
|
package auth
|
||||||
|
|
||||||
import "templ-test/views"
|
|
||||||
import "templ-test/models"
|
import "templ-test/models"
|
||||||
|
import "templ-test/views/layout"
|
||||||
|
|
||||||
templ ShowCookie(m models.AllCookies) {
|
templ ShowCookie(m models.AllCookies) {
|
||||||
@views.WithLayout("Cookie Explorer", true) {
|
@layout.Testing("Cookie Explorer") {
|
||||||
<h2>These are stored as cookies</h2>
|
<h2>These are stored as cookies</h2>
|
||||||
<p>Username: { m.Username }</p>
|
<p>Username: { m.Username }</p>
|
||||||
<p>JWT Token: { m.Token }</p>
|
<p>JWT Token: { m.Token }</p>
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
package auth
|
package auth
|
||||||
|
|
||||||
import "templ-test/views"
|
import "templ-test/views/layout"
|
||||||
|
|
||||||
templ AuthLogin() {
|
templ AuthLogin() {
|
||||||
@views.WithLayout("Login", true) {
|
@layout.WithLayout("Login", true) {
|
||||||
<form hx-post="/auth/login">
|
<form hx-post="/auth/login">
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label for="username" class="form-label">Username</label>
|
<label for="username" class="form-label">Username</label>
|
||||||
@ -20,4 +20,4 @@ templ AuthLogin() {
|
|||||||
<button type="submit" class="btn btn-primary">Submit</button>
|
<button type="submit" class="btn btn-primary">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
10
views/home/error.templ
Normal file
10
views/home/error.templ
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
package home
|
||||||
|
|
||||||
|
import "templ-test/views/layout"
|
||||||
|
|
||||||
|
templ Error(message error) {
|
||||||
|
@layout.Testing("Error") {
|
||||||
|
<h1>Oops... :(</h1>
|
||||||
|
<h3>{ message.Error() } </h3>
|
||||||
|
}
|
||||||
|
}
|
@ -1,9 +1,10 @@
|
|||||||
package views
|
package home
|
||||||
|
|
||||||
import "templ-test/views/components/bootstrap"
|
import "templ-test/views/components/bootstrap"
|
||||||
|
import "templ-test/views/layout"
|
||||||
|
|
||||||
templ Home() {
|
templ Home() {
|
||||||
@Testing("Home", true) {
|
@layout.WithLayout("Home", true) {
|
||||||
<p>
|
<p>
|
||||||
this should be above the alert
|
this should be above the alert
|
||||||
</p>
|
</p>
|
||||||
@ -14,9 +15,3 @@ templ Home() {
|
|||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
templ List() {
|
|
||||||
@Testing("Lists", true) {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
9
views/home/settings.templ
Normal file
9
views/home/settings.templ
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
package home
|
||||||
|
|
||||||
|
import "templ-test/views/layout"
|
||||||
|
|
||||||
|
templ UserSettings() {
|
||||||
|
@layout.Testing("Settings") {
|
||||||
|
<h2>This is not ready yet</h2>
|
||||||
|
}
|
||||||
|
}
|
27
views/layout/body.templ
Normal file
27
views/layout/body.templ
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
package layout
|
||||||
|
|
||||||
|
templ WithLayout(pageName string, useDarkMode bool) {
|
||||||
|
<html>
|
||||||
|
@getHtmlHead()
|
||||||
|
<body>
|
||||||
|
@bootstrapNavBar()
|
||||||
|
@getBodyHeader(pageName)
|
||||||
|
<div class="container-fluid">
|
||||||
|
{ children... }
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
}
|
||||||
|
|
||||||
|
templ Testing(pageName string) {
|
||||||
|
<html>
|
||||||
|
@getHtmlHead()
|
||||||
|
<body>
|
||||||
|
@bootstrapNavBar()
|
||||||
|
@getBodyHeader(pageName)
|
||||||
|
<div class="container-fluid">
|
||||||
|
{ children... }
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
}
|
19
views/layout/header.templ
Normal file
19
views/layout/header.templ
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
package layout
|
||||||
|
|
||||||
|
templ getHtmlHead() {
|
||||||
|
<head>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"/>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://unpkg.com/htmx.org@1.9.11" integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0" crossorigin="anonymous"></script>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta name="twitter:card" content="fill in later"/>
|
||||||
|
<meta name="twitter:image" content=""/>
|
||||||
|
<meta name="og:image" content=""/>
|
||||||
|
</head>
|
||||||
|
}
|
||||||
|
|
||||||
|
templ getBodyHeader(pageName string) {
|
||||||
|
<header>
|
||||||
|
<h1>{ pageName }</h1>
|
||||||
|
</header>
|
||||||
|
}
|
@ -1,51 +1,7 @@
|
|||||||
package views
|
package layout
|
||||||
|
|
||||||
templ WithLayout(pageName string, useDarkMode bool) {
|
|
||||||
<html>
|
|
||||||
@getHtmlHead()
|
|
||||||
<body>
|
|
||||||
@bootstrapNavBar()
|
|
||||||
@getBodyHeader(pageName)
|
|
||||||
<div class="container-fluid">
|
|
||||||
{ children... }
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
}
|
|
||||||
|
|
||||||
templ Testing(pageName string, useDarkMode bool) {
|
|
||||||
<html>
|
|
||||||
@getHtmlHead()
|
|
||||||
<body>
|
|
||||||
@bootstrapNavBar()
|
|
||||||
@getBodyHeader(pageName)
|
|
||||||
<div class="container-fluid">
|
|
||||||
{ children... }
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
}
|
|
||||||
|
|
||||||
templ getHtmlHead() {
|
|
||||||
<head>
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"/>
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
|
||||||
<script src="https://unpkg.com/htmx.org@1.9.11" integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0" crossorigin="anonymous"></script>
|
|
||||||
<meta charset="utf-8"/>
|
|
||||||
<meta name="twitter:card" content="fill in later"/>
|
|
||||||
<meta name="twitter:image" content=""/>
|
|
||||||
<meta name="og:image" content=""/>
|
|
||||||
</head>
|
|
||||||
}
|
|
||||||
|
|
||||||
templ getBodyHeader(pageName string) {
|
|
||||||
<header>
|
|
||||||
<h1>{ pageName }</h1>
|
|
||||||
</header>
|
|
||||||
}
|
|
||||||
|
|
||||||
templ bootstrapNavBar() {
|
templ bootstrapNavBar() {
|
||||||
<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
|
<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme={ useLightOrDarkTheme(ctx)}>
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<a class="navbar-brand" href="#">Navbar</a>
|
<a class="navbar-brand" href="#">Navbar</a>
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
9
views/layout/util.go
Normal file
9
views/layout/util.go
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
package layout
|
||||||
|
|
||||||
|
import (
|
||||||
|
"context"
|
||||||
|
)
|
||||||
|
|
||||||
|
func useLightOrDarkTheme(ctx context.Context) string {
|
||||||
|
return "dark"
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user