Add tailwind v2 CSS framework
This commit is contained in:
parent
920e7972af
commit
815c6a689d
@ -7,8 +7,8 @@ import (
|
||||
"strings"
|
||||
)
|
||||
|
||||
func StaticTemplate(templatePath string) http.HandlerFunc {
|
||||
tpl := views.Must(views.FromFS(templates.FS, templatePath))
|
||||
func StaticTemplate(templatePath ...string) http.HandlerFunc {
|
||||
tpl := views.Must(views.FromFS(templates.FS, templatePath...))
|
||||
|
||||
var testWriter strings.Builder
|
||||
err := tpl.ExecuteWriter(&testWriter, nil)
|
||||
@ -19,7 +19,7 @@ func StaticTemplate(templatePath string) http.HandlerFunc {
|
||||
return func(w http.ResponseWriter, r *http.Request) { tpl.Execute(w, nil) }
|
||||
}
|
||||
|
||||
func FAQ(templatePath string) http.HandlerFunc {
|
||||
func FAQ(templatePath ...string) http.HandlerFunc {
|
||||
questions := []struct {
|
||||
Question string
|
||||
Answer string
|
||||
@ -34,7 +34,7 @@ func FAQ(templatePath string) http.HandlerFunc {
|
||||
},
|
||||
}
|
||||
|
||||
tpl := views.Must(views.FromFS(templates.FS, templatePath))
|
||||
tpl := views.Must(views.FromFS(templates.FS, templatePath...))
|
||||
|
||||
var testWriter strings.Builder
|
||||
err := tpl.ExecuteWriter(&testWriter, nil)
|
||||
|
||||
6
main.go
6
main.go
@ -18,9 +18,9 @@ func notFoundHandler(w http.ResponseWriter, r *http.Request) {
|
||||
func main() {
|
||||
r := chi.NewRouter()
|
||||
r.Use(middleware.Logger)
|
||||
r.Get("/", ctrlrs.StaticTemplate("home.gohtml"))
|
||||
r.Get("/contact", ctrlrs.StaticTemplate("contact.gohtml"))
|
||||
r.Get("/faq", ctrlrs.FAQ("faq.gohtml"))
|
||||
r.Get("/", ctrlrs.StaticTemplate("home.gohtml", "tailwind.gohtml"))
|
||||
r.Get("/contact", ctrlrs.StaticTemplate("contact.gohtml", "tailwind.gohtml"))
|
||||
r.Get("/faq", ctrlrs.FAQ("faq.gohtml", "tailwind.gohtml"))
|
||||
r.NotFound(notFoundHandler)
|
||||
fmt.Println("Starting the server on :3000...")
|
||||
http.ListenAndServe(":3000", r)
|
||||
|
||||
@ -1,2 +1,9 @@
|
||||
<h1>Contact Page</h1>
|
||||
<p>To get in touch, email me at <a href="mailto:example@example.com">example@example.com</a></p>
|
||||
<!doctype html>
|
||||
<html>
|
||||
{{template "head" .}}
|
||||
<body class="px-6">
|
||||
<h1 class="py-4 text-4xl semibold tracking-tight font-sans">Contact Page</h1>
|
||||
<p>To get in touch, email me at <a class="underline" href="mailto:example@example.com">example@example.com</a></p>
|
||||
{{template "footer" .}}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,24 @@
|
||||
<h1>FAQ</h1>
|
||||
<hr>
|
||||
{{range .}}
|
||||
{{template "qa" .}}
|
||||
{{end}}
|
||||
<!doctype html>
|
||||
<html>
|
||||
{{template "head" .}}
|
||||
<body class="px-6">
|
||||
<h1 class="py-4 text-4xl semibold tracking-tight">FAQ</h1>
|
||||
<hr class="pb-4">
|
||||
<div class="flex flex-col gap-8">
|
||||
{{range .}}
|
||||
{{template "qa" .}}
|
||||
{{end}}
|
||||
</div>
|
||||
{{template "footer" .}}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
{{define "qa"}}
|
||||
<h3>{{.Question}}</h3>
|
||||
<p>{{.Answer}}</p>
|
||||
<div>
|
||||
<h3 class="block text-lg semibold">{{.Question}}</h3>
|
||||
<p class="block text-sm ml-2">{{.Answer}}</p>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
@ -1,15 +1,26 @@
|
||||
<h1>Welcome to my awesome site!</h1>
|
||||
{{template "lorem-ipsum"}}
|
||||
{{template "lorem-ipsum"}}
|
||||
{{template "lorem-ipsum"}}
|
||||
<!doctype html>
|
||||
<html>
|
||||
{{template "head" .}}
|
||||
<body class="px-6">
|
||||
<h1 class="py-4 text-4xl semibold tracking-tight">
|
||||
Welcome to my awesome site!
|
||||
</h1>
|
||||
<div class="flex flex-col gap-4">
|
||||
{{template "lorem-ipsum"}}
|
||||
{{template "lorem-ipsum"}}
|
||||
{{template "lorem-ipsum"}}
|
||||
</div>
|
||||
{{template "footer" .}}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
{{define "lorem-ipsum"}}
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
|
||||
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
|
||||
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
|
||||
in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
|
||||
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
|
||||
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
|
||||
in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
{{end}}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user