better templating
This commit is contained in:
parent
45640416cd
commit
71facc227d
2
.gitignore copy
Normal file
2
.gitignore copy
Normal file
@ -0,0 +1,2 @@
|
||||
output.css
|
||||
config.json
|
@ -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)
|
||||
}
|
||||
}
|
@ -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
16
web/views/.layout.html
Normal 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}}
|
@ -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>© 2024 My Web App</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
|
@ -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>© 2024 My Web App</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
<footer>
|
||||
<p>© 2024 My Web App</p>
|
||||
</footer>
|
||||
{{end}}
|
||||
|
Loading…
Reference in New Issue
Block a user