test more examples

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 {

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)
+}

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 {

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) {

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)
 }

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"),
 			),
 		),

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"),
 				),
 			),

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,
 }

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)
+}