jtom38/go-cook-portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

reworked how the views should be setup to make it cleaner and also starting to figure out how to work with the context with templ

Browse Source
This commit is contained in:
James Tombleson 2024-04-13 11:50:05 -07:00
parent ea3fd917d6
commit bdd9c8d963
9 changed files with 84 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
views/auth/cookie.templ
View File

@ -1,10 +1,10 @@
package auth
import "templ-test/views"
import "templ-test/models"
import "templ-test/views/layout"
templ ShowCookie(m models.AllCookies) {
@views.WithLayout("Cookie Explorer", true) {
@layout.Testing("Cookie Explorer") {
<h2>These are stored as cookies</h2>
<p>Username: { m.Username }</p>
<p>JWT Token: { m.Token }</p>

4
views/auth/login.templ
View File

@ -1,9 +1,9 @@
package auth
import "templ-test/views"
import "templ-test/views/layout"
templ AuthLogin() {
@views.WithLayout("Login", true) {
@layout.WithLayout("Login", true) {
<form hx-post="/auth/login">
<div class="mb-3">
<label for="username" class="form-label">Username</label>

10
views/home/error.templ Normal file
View 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>
}
}

11
views/home.templ → views/home/home.templ
View File

@ -1,9 +1,10 @@
package views
package home
import "templ-test/views/components/bootstrap"
import "templ-test/views/layout"
templ Home() {
@Testing("Home", true) {
@layout.WithLayout("Home", true) {
<p>
this should be above the alert
</p>
@ -14,9 +15,3 @@ templ Home() {
}
}
templ List() {
@Testing("Lists", true) {
}
}

9
views/home/settings.templ Normal file
View 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
View 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
View 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>
}

48
views/layout.templ → views/layout/navbar.templ
View File

@ -1,51 +1,7 @@
package views
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>
}
package layout
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">
<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">

9
views/layout/util.go Normal file
View File

@ -0,0 +1,9 @@
package layout
import (
"context"
)
func useLightOrDarkTheme(ctx context.Context) string {
return "dark"
}