fix doc page css
This commit is contained in:
parent
149f64ebb6
commit
f39c4d2c58
7 changed files with 65 additions and 36 deletions
|
|
@ -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...,
|
||||
),
|
||||
),
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
|
|||
|
|
@ -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"),
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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"),
|
||||
|
|
|
|||
|
|
@ -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)),
|
||||
),
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue