fix doc page css

This commit is contained in:
maddalax 2024-10-13 08:24:23 -05:00
parent 149f64ebb6
commit f39c4d2c58
7 changed files with 65 additions and 36 deletions

View file

@ -35,9 +35,21 @@ func RootPage(ctx *h.RequestContext, children ...h.Ren) *h.Element {
`),
),
h.Body(
h.Class("bg-stone-50 min-h-screen overflow-x-hidden"),
partials.NavBar(ctx, false),
h.Class("bg-stone-50 h-screen"),
h.Fragment(children...),
),
)
}
func PageWithNav(ctx *h.RequestContext, children ...h.Ren) *h.Element {
return RootPage(ctx,
h.Fragment(
partials.NavBar(ctx, partials.NavBarProps{
Expanded: false,
}),
h.Div(
children...,
),
),
)
}

View file

@ -15,37 +15,48 @@ func DocsPage(ctx *h.RequestContext) *h.Page {
return h.NewPage(base.RootPage(
ctx,
h.Div(
h.Class("flex flex-col md:flex-row gap-6 justify-center overflow-x-hidden"),
h.Class("flex h-full"),
h.Aside(
h.Class("md:h-screen md:sticky md:top-0 md:w-42"), // Applied sticky positioning here
h.Class("hidden md:block md:min-w-60 text-white overflow-y-auto"),
partials.DocSidebar(pages),
),
h.Main(
h.Class("md:flex gap-4 justify-center mb-6"),
h.Div(
h.Class("flex flex-col"),
h.Div(
h.Class("flex flex-col flex-1 overflow-hidden"),
partials.NavBar(ctx, partials.NavBarProps{
Expanded: false,
ShowPreRelease: false,
}),
h.Main(
h.Div(
h.Class("flex flex-col justify-center items-center md:mt-6 "),
h.List(pages, func(page *dirwalk.Page, index int) *h.Element {
anchor := partials.CreateAnchor(page.Parts)
return h.Div(
h.Class("border-b border-b-slate-300 w-full pb-8 p-4 md:px-0 -mb-2"),
MarkdownContent(ctx, page.FilePath, anchor),
h.Div(
h.Class("ml-4 pl-1 mt-2 bg-rose-200"),
h.If(anchor == "core-concepts-partials",
h.GetPartial(partials.CurrentTimePartial, "load, every 1s"),
),
),
)
}),
h.Class("w-full md:hidden bg-neutral-50 overflow-y-auto"),
partials.DocSidebar(pages),
),
h.Class("overflow-y-auto justify-center md:mx-auto overflow-x-hidden pb-6"),
h.Div(
h.Class("flex justify-center items-center mt-6"),
h.A(
h.Text("Back to Top"),
h.Class("py-2 px-3 bg-slate-800 rounded text-white"),
h.Href("#"),
h.Class("flex flex-col"),
h.Div(
h.Class("flex flex-col justify-center items-center md:mt-6 "),
h.List(pages, func(page *dirwalk.Page, index int) *h.Element {
anchor := partials.CreateAnchor(page.Parts)
return h.Div(
h.Class("border-b border-b-slate-300 w-full pb-8 p-4 md:px-0 -mb-2"),
MarkdownContent(ctx, page.FilePath, anchor),
h.Div(
h.Class("ml-4 pl-1 mt-2 bg-rose-200"),
h.If(anchor == "core-concepts-partials",
h.GetPartial(partials.CurrentTimePartial, "load, every 1s"),
),
),
)
}),
),
h.Div(
h.Class("flex justify-center items-center mt-6"),
h.A(
h.Text("Back to Top"),
h.Class("py-2 px-3 bg-slate-800 rounded text-white"),
h.Href("#quick-start-introduction"),
),
),
),
),

View file

@ -50,7 +50,7 @@ var examples = []Example{
func ExamplesPage(ctx *h.RequestContext) *h.Page {
return h.NewPage(
base.RootPage(ctx, h.Div(
base.PageWithNav(ctx, h.Div(
h.Class("flex items-center justify-center"),
h.Div(
h.Class("w-full px-4 flex flex-col prose max-w-[95vw] md:max-w-3xl mt-6"),

View file

@ -8,7 +8,7 @@ import (
func HtmlToGoPage(ctx *h.RequestContext) *h.Page {
return h.NewPage(
base.RootPage(ctx,
base.PageWithNav(ctx,
h.Div(
h.Class("flex flex-col h-full items-center justify-center w-full pt-6"),
h.H3(

View file

@ -7,7 +7,7 @@ import (
func IndexPage(ctx *h.RequestContext) *h.Page {
return h.NewPage(
base.RootPage(ctx, h.Div(
base.PageWithNav(ctx, h.Div(
h.Class("flex items-center justify-center"),
h.Div(
h.Class("w-full px-4 flex flex-col prose md:max-w-3xl mt-6 mx-auto"),

View file

@ -22,7 +22,7 @@ func MarkdownContent(ctx *h.RequestContext, path string, id string) *h.Element {
return h.Div(
h.If(id != "", h.Id(id)),
h.Div(
h.Class("w-full flex flex-col prose max-w-[95vw] md:max-w-3xl prose-code:text-black prose-p:my-1 prose:p-0 prose-li:m-0 prose-ul:m-0 prose-ol:m-0"),
h.Class("w-full flex flex-col prose max-w-md md:max-w-xl lg:max-w-3xl prose-code:text-black prose-p:my-1 prose:p-0 prose-li:m-0 prose-ul:m-0 prose-ol:m-0"),
h.UnsafeRaw(renderer.RenderFile(path, embeddedMd)),
),
)

View file

@ -18,6 +18,11 @@ var navItems = []NavItem{
{Name: "Convert HTML", Url: "/html-to-go"},
}
type NavBarProps struct {
Expanded bool
ShowPreRelease bool
}
func ToggleNavbar(ctx *h.RequestContext) *h.Partial {
return h.SwapManyPartial(
ctx,
@ -69,15 +74,16 @@ func Star(ctx *h.RequestContext) *h.Element {
)
}
func NavBar(ctx *h.RequestContext, expanded bool) *h.Element {
prelease := h.A(h.Class("bg-yellow-200 text-yellow-800 text-center p-2 flex items-center justify-center"),
func NavBar(ctx *h.RequestContext, props NavBarProps) *h.Element {
prelease := h.If(props.ShowPreRelease, h.A(
h.Class("bg-yellow-200 text-yellow-800 text-center p-2 flex items-center justify-center"),
h.Href("https://github.com/maddalax/htmgo/issues"),
h.Attribute("target", "_blank"),
h.Text("htmgo is in alpha release. Please report any issues on GitHub."),
)
))
desktopNav := h.Nav(
h.Class("hidden sm:block bg-neutral-100 border border-b-slate-300 p-4 md:p-3"),
h.Class("hidden sm:block bg-neutral-100 border border-b-slate-300 p-4 md:p-3 max-h-[100vh - 9rem] overflow-y-auto"),
h.Div(
h.Class("max-w-[95%] md:max-w-3xl px-4 mx-auto"),
h.Div(
@ -110,7 +116,7 @@ func NavBar(ctx *h.RequestContext, expanded bool) *h.Element {
return h.Div(
h.Id("navbar"),
prelease,
MobileNav(ctx, expanded),
MobileNav(ctx, props.Expanded),
desktopNav,
)
}