better templating

This commit is contained in:
0ceanSlim 2024-05-17 15:53:56 -04:00
parent 45640416cd
commit 71facc227d
6 changed files with 66 additions and 56 deletions

2
.gitignore copy Normal file
View File

@ -0,0 +1,2 @@
output.css
config.json

View File

@ -1,7 +1,23 @@
package routes
import "net/http"
import (
"html/template"
"net/http"
)
func ExampleHandler(w http.ResponseWriter, r *http.Request) {
http.ServeFile(w, r, "web/views/example.html")
data := PageData{
Title: "Example Page",
}
tmpl, err := template.ParseFiles("web/views/.layout.html", "web/views/example.html")
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
err = tmpl.ExecuteTemplate(w, "layout", data)
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
}
}

View File

@ -14,14 +14,14 @@ func RootHandler(w http.ResponseWriter, r *http.Request) {
Title: "Home Page",
}
tmpl, err := template.ParseFiles("web/views/index.html")
tmpl, err := template.ParseFiles("web/views/.layout.html", "web/views/index.html")
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
err = tmpl.Execute(w, data)
err = tmpl.ExecuteTemplate(w, "layout", data)
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
}
}
}

16
web/views/.layout.html Normal file
View File

@ -0,0 +1,16 @@
{{define "layout"}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GO Web App - {{.Title}}</title>
<link rel="stylesheet" href="/static/output.css" />
<link rel="icon" href="/static/img/favicon.ico" type="image/x-icon" />
<script src="/static/htmx.min.js"></script>
</head>
<body class="text-center text-blue-300 bg-gray-800">
{{template "view" .}}
</body>
</html>
{{end}}

View File

@ -1,13 +1,4 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example Route</title>
<link rel="stylesheet" href="/static/output.css" />
<link rel="icon" href="/static/img/favicon.ico" type="image/x-icon" />
</head>
<body class="text-center text-blue-400 bg-gray-800">
{{define "view"}}
<header>
<h1 class="mt-8 mb-8 text-3xl font-bold text-blue-300">
This is an additional example route
@ -23,5 +14,4 @@
<footer>
<p>&copy; 2024 My Web App</p>
</footer>
</body>
</html>
{{end}}

View File

@ -1,41 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GO Web App</title>
<link rel="stylesheet" href="/static/output.css" />
<link rel="icon" href="/static/img/favicon.ico" type="image/x-icon" />
<script src="/static/htmx.min.js"></script>
</head>
<body class="text-center text-blue-300 bg-gray-800">
<header>
<h1 class="mt-8 mb-8 text-3xl font-bold text-blue-400">
Welcome to My GO Web App Framework {{.Title}}
</h1>
</header>
{{define "view"}}
<header>
<h1 class="mt-8 mb-8 text-3xl font-bold text-blue-400">
Welcome to My GO Web App Framework {{.Title}}
</h1>
</header>
<main>
<section>
<button
hx-get="/api/example"
class="p-2 text-white bg-blue-400 rounded-md"
>
Click Me!
</button>
<h1 class="font-bold">API Example</h1>
<a href="/api/example" target="_blank">Access Example API</a>
<h2>Content Section</h2>
<p>
This is the main content of your web app. You can add any HTML content
here.
</p>
<a href="/example">Another Example Route can be found here</a>
</section>
</main>
<main>
<section>
<button hx-get="/api/example" class="p-2 text-white bg-blue-400 rounded-md">
Click Me!
</button>
<h1 class="font-bold">API Example</h1>
<a href="/api/example" target="_blank">Access Example API</a>
<h2>Content Section</h2>
<p>
This is the main content of your web app. You can add any HTML content
here.
</p>
<a href="/example">Another Example Route can be found here</a>
</section>
</main>
<footer>
<p>&copy; 2024 My Web App</p>
</footer>
</body>
</html>
<footer>
<p>&copy; 2024 My Web App</p>
</footer>
{{end}}