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 package routes
import "net/http" import (
"html/template"
"net/http"
)
func ExampleHandler(w http.ResponseWriter, r *http.Request) { 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,13 +14,13 @@ func RootHandler(w http.ResponseWriter, r *http.Request) {
Title: "Home Page", 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 { if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError) http.Error(w, err.Error(), http.StatusInternalServerError)
return return
} }
err = tmpl.Execute(w, data) err = tmpl.ExecuteTemplate(w, "layout", data)
if err != nil { if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError) 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> {{define "view"}}
<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">
<header> <header>
<h1 class="mt-8 mb-8 text-3xl font-bold text-blue-300"> <h1 class="mt-8 mb-8 text-3xl font-bold text-blue-300">
This is an additional example route This is an additional example route
@ -23,5 +14,4 @@
<footer> <footer>
<p>&copy; 2024 My Web App</p> <p>&copy; 2024 My Web App</p>
</footer> </footer>
</body> {{end}}
</html>

View File

@ -1,41 +1,27 @@
<!DOCTYPE html> {{define "view"}}
<html lang="en"> <header>
<head> <h1 class="mt-8 mb-8 text-3xl font-bold text-blue-400">
<meta charset="UTF-8" /> Welcome to My GO Web App Framework {{.Title}}
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> </h1>
<title>GO Web App</title> </header>
<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>
<main> <main>
<section> <section>
<button <button hx-get="/api/example" class="p-2 text-white bg-blue-400 rounded-md">
hx-get="/api/example" Click Me!
class="p-2 text-white bg-blue-400 rounded-md" </button>
> <h1 class="font-bold">API Example</h1>
Click Me! <a href="/api/example" target="_blank">Access Example API</a>
</button> <h2>Content Section</h2>
<h1 class="font-bold">API Example</h1> <p>
<a href="/api/example" target="_blank">Access Example API</a> This is the main content of your web app. You can add any HTML content
<h2>Content Section</h2> here.
<p> </p>
This is the main content of your web app. You can add any HTML content <a href="/example">Another Example Route can be found here</a>
here. </section>
</p> </main>
<a href="/example">Another Example Route can be found here</a>
</section>
</main>
<footer> <footer>
<p>&copy; 2024 My Web App</p> <p>&copy; 2024 My Web App</p>
</footer> </footer>
</body> {{end}}
</html>