diff --git a/framework/h/tag.go b/framework/h/tag.go index 86d2d2a..2792dea 100644 --- a/framework/h/tag.go +++ b/framework/h/tag.go @@ -372,8 +372,8 @@ func Label(children ...Ren) *Element { return Tag("label", children...) } -func IFrame(src string) *Element { - return Tag("iframe", Src(src)) +func IFrame(src string, children ...Ren) *Element { + return Tag("iframe", children...).AppendChildren(Src(src)) } func Address(children ...Ren) *Element { diff --git a/htmgo-site/pages/snippets/chat.go b/htmgo-site/pages/snippets/chat.go new file mode 100644 index 0000000..2dc3e46 --- /dev/null +++ b/htmgo-site/pages/snippets/chat.go @@ -0,0 +1,10 @@ +package snippets + +import ( + "github.com/maddalax/htmgo/framework/h" +) + +func ChatExample(ctx *h.RequestContext) *h.Page { + SetSnippet(ctx, &ChatSnippet) + return Index(ctx) +} diff --git a/htmgo-site/pages/snippets/code.go b/htmgo-site/pages/snippets/code.go index 38656ef..6a686f5 100644 --- a/htmgo-site/pages/snippets/code.go +++ b/htmgo-site/pages/snippets/code.go @@ -22,7 +22,7 @@ func getFunctionFilePath(fn interface{}) string { } func GetGithubPath(path string) string { - return fmt.Sprintf("https://github.com/maddalax/htmgo/blob/master%s", path) + return fmt.Sprintf("https://github.com/maddalax/htmgo/tree/master/htmgo-site/partials%s.go", path) } func RenderCodeToString(partial h.PartialFunc) *h.Element { diff --git a/htmgo-site/pages/snippets/data.go b/htmgo-site/pages/snippets/data.go index 54c69c3..ea4891f 100644 --- a/htmgo-site/pages/snippets/data.go +++ b/htmgo-site/pages/snippets/data.go @@ -3,11 +3,13 @@ package snippets import "github.com/maddalax/htmgo/framework/h" type Snippet struct { - name string - description string - sidebarName string - path string - partial h.PartialFunc + name string + description string + sidebarName string + path string + partial h.PartialFunc + externalRoute string + sourceCodePath string } func SetSnippet(ctx *h.RequestContext, snippet *Snippet) { diff --git a/htmgo-site/pages/snippets/form.go b/htmgo-site/pages/snippets/form.go index b599ef6..0d8bfa3 100644 --- a/htmgo-site/pages/snippets/form.go +++ b/htmgo-site/pages/snippets/form.go @@ -5,6 +5,6 @@ import ( ) func FormExample(ctx *h.RequestContext) *h.Page { - SetSnippet(ctx, &FormWithLoadingState) + SetSnippet(ctx, &FormWithLoadingStateSnippet) return Index(ctx) } diff --git a/htmgo-site/pages/snippets/index.go b/htmgo-site/pages/snippets/index.go index 00ce2bc..4f94557 100644 --- a/htmgo-site/pages/snippets/index.go +++ b/htmgo-site/pages/snippets/index.go @@ -65,29 +65,49 @@ func snippetView(snippet *Snippet) *h.Element { ), ), h.Div( - h.Class("border px-8 py-4 rounded-md shadow-sm border-slate-200 w-full"), - h.Div( - h.Get( - h.GetPartialPath(snippet.partial), - "load", + h.ClassX("border px-8 py-4 rounded-md shadow-sm border-slate-200 w-full", map[string]bool{ + "mb-6": snippet.externalRoute == "", + }), + h.IfElse( + snippet.externalRoute != "", + h.IFrame( + snippet.externalRoute, + h.Class("h-full min-h-[800px] w-[50vw]"), + ), + h.Div( + h.Get( + h.GetPartialPath(snippet.partial), + "load", + ), ), ), ), h.Div( - h.Class("mt-8 flex flex-col gap-2 justify-center"), + h.Class("flex flex-col gap-2 justify-center"), h.Div( h.Class("flex gap-2 items-center"), h.A( - githubLogo(), - h.Href(GetGithubPath(snippet.path)), - h.Class("font-sm text-blue-500 hover:text-blue-400"), + h.Fragment( + githubLogo(), + h.If( + snippet.externalRoute != "", + h.Text("View source"), + ), + ), + h.Href( + h.Ternary(snippet.sourceCodePath == "", GetGithubPath(snippet.path), snippet.sourceCodePath), + ), + h.Class("flex gap-1 items-center font-sm text-blue-500 hover:text-blue-400"), ), - h.H3( - h.Text("Source Code"), - h.Class("text-lg font-bold"), + h.If( + snippet.externalRoute == "", + h.H3( + h.Text("Source Code"), + h.Class("text-lg font-bold"), + ), ), ), - RenderCodeToString(snippet.partial), + h.If(snippet.externalRoute == "", RenderCodeToString(snippet.partial)), ), ) } @@ -98,7 +118,7 @@ func emptyState() *h.Element { h.Div( h.Class("flex gap-2 items-center"), h.H3( - h.Text("Choose a snippet on the sidebar to view"), + h.Text("Choose an example on the sidebar to view"), h.Class("text-lg"), ), ), diff --git a/htmgo-site/pages/snippets/sidebar.go b/htmgo-site/pages/snippets/sidebar.go index fed5d9e..d303e09 100644 --- a/htmgo-site/pages/snippets/sidebar.go +++ b/htmgo-site/pages/snippets/sidebar.go @@ -12,7 +12,7 @@ func SnippetSidebar() *h.Element { h.Class("mb-3"), h.A( h.Href("#"), - h.Text("Snippets"), + h.Text("Examples"), h.Class("md:mt-4 text-xl text-slate-900 font-bold"), ), ), diff --git a/htmgo-site/pages/snippets/snippets.go b/htmgo-site/pages/snippets/snippets.go index 31475e3..bdda1ab 100644 --- a/htmgo-site/pages/snippets/snippets.go +++ b/htmgo-site/pages/snippets/snippets.go @@ -4,7 +4,7 @@ import ( "htmgo-site/partials/snippets" ) -var FormWithLoadingState = Snippet{ +var FormWithLoadingStateSnippet = Snippet{ name: "Form", description: "A simple form submission example with a loading state", sidebarName: "Form with loading state", @@ -12,6 +12,26 @@ var FormWithLoadingState = Snippet{ partial: snippets.FormExample, } -var Snippets = []Snippet{ - FormWithLoadingState, +var UserAuthSnippet = Snippet{ + name: "User Authentication", + description: "An example showing basic user registration and login with htmgo", + sidebarName: "User Authentication", + path: "/snippets/user-auth", + externalRoute: "https://auth-example.htmgo.dev", + sourceCodePath: "https://github.com/maddalax/htmgo/tree/master/examples/simple-auth", +} + +var ChatSnippet = Snippet{ + name: "Chat App", + description: "A simple chat application built with htmgo", + sidebarName: "Chat App", + path: "/snippets/chat", + externalRoute: "https://chat-example.htmgo.dev", + sourceCodePath: "https://github.com/maddalax/htmgo/tree/master/examples/chat", +} + +var Snippets = []Snippet{ + FormWithLoadingStateSnippet, + UserAuthSnippet, + ChatSnippet, } diff --git a/htmgo-site/pages/snippets/user-auth.go b/htmgo-site/pages/snippets/user-auth.go new file mode 100644 index 0000000..fe3504e --- /dev/null +++ b/htmgo-site/pages/snippets/user-auth.go @@ -0,0 +1,10 @@ +package snippets + +import ( + "github.com/maddalax/htmgo/framework/h" +) + +func UserAuthExample(ctx *h.RequestContext) *h.Page { + SetSnippet(ctx, &UserAuthSnippet) + return Index(ctx) +}