107 lines
3.9 KiB
Go
107 lines
3.9 KiB
Go
package pages
|
|
|
|
import (
|
|
"github.com/labstack/echo/v4"
|
|
"github.com/camzawacki/personal-site/pkg/routenames"
|
|
"github.com/camzawacki/personal-site/pkg/ui"
|
|
. "github.com/camzawacki/personal-site/pkg/ui/components"
|
|
"github.com/camzawacki/personal-site/pkg/ui/icons"
|
|
"github.com/camzawacki/personal-site/pkg/ui/layouts"
|
|
"github.com/camzawacki/personal-site/pkg/ui/models"
|
|
. "maragu.dev/gomponents"
|
|
. "maragu.dev/gomponents/html"
|
|
)
|
|
|
|
func Home(ctx echo.Context, posts *models.Posts) error {
|
|
r := ui.NewRequest(ctx)
|
|
r.Metatags.Description = "This is the home page."
|
|
r.Metatags.Keywords = []string{"Software", "Coding", "Go"}
|
|
|
|
// This pages helps to illustrate the different options you can take when using HTMX to introduce interactivity
|
|
// to your web application. The following three options are available, but here, we're opting for the first one.
|
|
// 1) Highly-optimized and progressive enhancement:
|
|
// This is highly-optimized because the server is doing the least amount of work possible, only rendering
|
|
// the least amount possible based on the incoming request. It's possible that even your route handler would
|
|
// want to check the HTMX request in order to limit what it does. With HTMX, it's possible to still return a
|
|
// normal, full page, but use hx-select to pluck out only the part you want to re-render. It requires some extra
|
|
// condition checks and code but performance is improved. Progressive enhancement refers to having a fully
|
|
// functional web app, even if JS was disabled, but providing the enhancement if JS is enabled. All of these
|
|
// examples should continue to work fine without JS.
|
|
// 2) Not optimized and progressive enhancement:
|
|
// As mentioned previously, you can remove all of these conditions, re-render the entire page for every request,
|
|
// and rely on HTMX's hx-select to only replace what you want to (ie, the posts).
|
|
// 3) Optimized and partial renderings:
|
|
// You could have a separate route that is only for fetching posts while paging, and that would render only
|
|
// that partial HTML, which HTMX would then use to inject in to this page.
|
|
|
|
headerMsg := func() Node {
|
|
return Group{
|
|
Stats(
|
|
Stat{
|
|
Title: "User name",
|
|
Value: func() string {
|
|
if r.IsAuth {
|
|
return r.AuthUser.Name
|
|
}
|
|
return "(not logged in)"
|
|
}(),
|
|
Description: "The logged in user's name",
|
|
Icon: icons.UserCircle(),
|
|
},
|
|
Stat{
|
|
Title: "Admin status",
|
|
Value: func() string {
|
|
if r.IsAdmin {
|
|
return "Administrator"
|
|
}
|
|
return "Non-administrator"
|
|
}(),
|
|
Description: "Use `make admin` to create an admin account",
|
|
Icon: icons.LockClosed(),
|
|
},
|
|
Stat{
|
|
Title: "GitHub Stars",
|
|
Value: "2,500+",
|
|
Description: "Star if you like Pagoda",
|
|
Icon: icons.Star(),
|
|
},
|
|
),
|
|
H2(Text("Recent posts")),
|
|
Span(Text("Below is an example of both paging and AJAX fetching using HTMX")),
|
|
}
|
|
}
|
|
|
|
cards := func() Node {
|
|
return Div(
|
|
Class("flex w-full gap-2 mt-5"),
|
|
Card(CardParams{
|
|
Title: "Serving files",
|
|
Body: Group{
|
|
Text("In the example posts above, check how the file URL contains a cache-buster query parameter which changes only when the app is restarted. "),
|
|
Text("Static files also contain cache-control headers which are configured via middleware."),
|
|
},
|
|
Color: ColorWarning,
|
|
Size: SizeSmall,
|
|
}),
|
|
Card(CardParams{
|
|
Title: "Documentation",
|
|
Body: Group{
|
|
Text("Have you read through the entire documentation? If not, you may be missing functionality or have questions. "),
|
|
},
|
|
Footer: Group{
|
|
ButtonLink(ColorNeutral, "https://github.com/camzawacki/personal-site?tab=readme-ov-file#table-of-contents", "Learn more"),
|
|
},
|
|
Color: ColorNeutral,
|
|
Size: SizeSmall,
|
|
}),
|
|
)
|
|
}
|
|
|
|
g := Group{
|
|
Iff(r.Htmx.Target != "posts", headerMsg),
|
|
posts.Render(r.Path(routenames.Home)),
|
|
Iff(r.Htmx.Target != "posts", cards),
|
|
}
|
|
|
|
return r.Render(layouts.Primary, g)
|
|
}
|