diff --git a/framework/h/lifecycle.go b/framework/h/lifecycle.go
index 5428965..abe13fd 100644
--- a/framework/h/lifecycle.go
+++ b/framework/h/lifecycle.go
@@ -113,3 +113,13 @@ func Alert(text string) JsCommand {
func EvalJs(js string) JsCommand {
return JsCommand{Command: js}
}
+
+func InjectScript(src string) JsCommand {
+ // language=JavaScript
+ return JsCommand{Command: fmt.Sprintf(`
+ var script = document.createElement('script');
+ script.src = '%s';
+ src.async = true;
+ document.head.appendChild(script);
+ `, src)}
+}
diff --git a/htmgo-site/pages/base/root.go b/htmgo-site/pages/base/root.go
index 53de4c2..0235f8b 100644
--- a/htmgo-site/pages/base/root.go
+++ b/htmgo-site/pages/base/root.go
@@ -25,8 +25,10 @@ func RootPage(children ...h.Ren) *h.Element {
`),
),
- h.Class("bg-neutral-50 min-h-screen overflow-x-hidden"),
- partials.NavBar(),
- h.Fragment(children...),
+ h.Body(
+ h.Class("bg-neutral-50 min-h-screen overflow-x-hidden"),
+ partials.NavBar(false),
+ h.Fragment(children...),
+ ),
)
}
diff --git a/htmgo-site/pages/markdown.go b/htmgo-site/pages/markdown.go
index 001f802..bc1dfd1 100644
--- a/htmgo-site/pages/markdown.go
+++ b/htmgo-site/pages/markdown.go
@@ -15,7 +15,7 @@ func MarkdownHandler(ctx *h.RequestContext, path string) error {
func MarkdownPage(ctx *h.RequestContext, path string) *h.Element {
return base.RootPage(
h.Div(
- h.Class("flex flex-col p-4 justify-center items-center"),
+ h.Class("w-full p-4 flex flex-col justify-center items-center"),
MarkdownContent(ctx, path),
h.Div(
h.Class("min-h-12"),
@@ -29,7 +29,7 @@ func MarkdownContent(ctx *h.RequestContext, path string) *h.Element {
renderer := service.Get[markdown.Renderer](ctx.ServiceLocator())
return h.Div(
h.Article(
- h.Class("prose max-w-sm pt-3 p-4 md:p-4 md:max-w-2xl prose-code:text-black"),
+ h.Class("prose max-w-[95vw] md:max-w-2xl px-4 prose-code:text-black"),
h.Raw(renderer.RenderFile(path, embeddedMd)),
),
)
diff --git a/htmgo-site/partials/load/generated.go b/htmgo-site/partials/load/generated.go
index ba527a5..e63b0bf 100644
--- a/htmgo-site/partials/load/generated.go
+++ b/htmgo-site/partials/load/generated.go
@@ -3,8 +3,14 @@ package load
import "github.com/maddalax/htmgo/framework/h"
import "github.com/labstack/echo/v4"
+import "htmgo-site/partials"
func GetPartialFromContext(ctx echo.Context) *h.Partial {
+ path := ctx.Request().URL.Path
+ if path == "ToggleNavbar" || path == "/htmgo-site/partials.ToggleNavbar" {
+ cc := ctx.(*h.RequestContext)
+ return partials.ToggleNavbar(cc)
+ }
return nil
}
diff --git a/htmgo-site/partials/navbar.go b/htmgo-site/partials/navbar.go
index 004d1d8..1d9c6c8 100644
--- a/htmgo-site/partials/navbar.go
+++ b/htmgo-site/partials/navbar.go
@@ -7,9 +7,19 @@ type NavItem struct {
Url string
}
-func NavBar() *h.Element {
+func ToggleNavbar(ctx *h.RequestContext) *h.Partial {
+ return h.NewPartial(
+ h.OobSwap(ctx, MobileNav(h.GetQueryParam(ctx, "expanded") == "true")),
+ )
+}
- star := h.Raw(`
+var navItems = []NavItem{
+ {Name: "Docs", Url: "/docs"},
+ {Name: "Examples", Url: "/examples"},
+}
+
+func Star() *h.RawContent {
+ return h.Raw(`
Star
`)
+}
- navItems := []NavItem{
- {Name: "Docs", Url: "/docs"},
- {Name: "Examples", Url: "/examples"},
- }
-
+func NavBar(expanded bool) *h.Element {
prelease := h.Div(h.Class("bg-yellow-200 text-yellow-800 text-center p-2"),
h.Text("This is a prerelease version and generally should not be used at this time. Watch on github for the stable release!"),
)
- return h.Div(
- prelease,
- h.Nav(
- h.Class("bg-neutral-100 border border-b-slate-300 p-4 md:p-3"),
+ desktopNav := h.Nav(
+ h.Class("hidden sm:block bg-neutral-100 border border-b-slate-300 p-4 md:p-3"),
+ h.Div(
+ h.Class("max-w-[95%] md:max-w-prose mx-auto"),
h.Div(
- h.Class("max-w-[95%] md:max-w-prose mx-auto"),
+ h.Class("flex justify-between items-center"),
h.Div(
- h.Class("flex justify-between items-center"),
- h.Div(
- h.Class("flex items-center"),
- h.A(
- h.Class("text-2xl"),
- h.Href("/"),
- h.Text("htmgo"),
- )),
- h.Div(
- h.Class("flex gap-4 items-center"),
- h.List(navItems, func(item NavItem, index int) *h.Element {
- return h.Div(
- h.Class("flex items-center"),
- h.A(
- h.Class(""),
- h.Href(item.Url),
- h.Text(item.Name),
- ),
- )
- }),
- h.Div(h.Class("ml-2"), star),
- ),
+ h.Class("flex items-center"),
+ h.A(
+ h.Class("text-2xl"),
+ h.Href("/"),
+ h.Text("htmgo"),
+ )),
+ h.Div(
+ h.Class("flex gap-4 items-center"),
+ h.List(navItems, func(item NavItem, index int) *h.Element {
+ return h.Div(
+ h.Class("flex items-center"),
+ h.A(
+ h.Class(""),
+ h.Href(item.Url),
+ h.Text(item.Name),
+ ),
+ )
+ }),
+ h.Div(h.Class("ml-2 hidden md:block"), Star()),
),
),
),
)
+
+ return h.Div(
+ h.Class("mb-4"),
+ h.Id("navbar"),
+ prelease,
+ MobileNav(expanded),
+ desktopNav,
+ )
+}
+
+func MobileNav(expanded bool) *h.Element {
+ return h.Nav(
+ h.Id("mobile-nav"),
+ h.Class("block sm:hidden bg-neutral-100 border border-b-slate-300 p-4 md:p-3"),
+ h.Div(
+ h.Class("max-w-[95%] md:max-w-prose mx-auto"),
+ h.Div(
+ h.Class("flex justify-between items-center"),
+ h.Div(
+ h.Class("flex items-center"),
+ h.A(
+ h.Class("text-2xl"),
+ h.Href("/"),
+ h.Text("htmgo"),
+ )),
+ h.Div(
+ h.Class("flex items-center"),
+ h.Button(
+ h.GetPartialWithQs(ToggleNavbar, h.Ternary(expanded, "expanded=false", "expanded=true")),
+ h.Trigger(h.TriggerClick),
+ h.Class("text-2xl"),
+ h.Text("☰"),
+ ),
+ ),
+ ),
+ ),
+ h.If(expanded, h.Div(
+ h.Class("mt-2 ml-2 flex flex-col gap-2"),
+ h.Script("https://buttons.github.io/buttons.js"),
+ h.List(navItems, func(item NavItem, index int) *h.Element {
+ return h.Div(
+ h.Class("flex items-center"),
+ h.A(
+ h.Class(""),
+ h.Href(item.Url),
+ h.Text(item.Name),
+ ),
+ )
+ }),
+ h.Div(Star()),
+ )),
+ )
}