diff options
Diffstat (limited to 'examples')
| -rw-r--r-- | examples/simple/simple.go | 72 | ||||
| -rw-r--r-- | examples/tailwindcss/tailwindcss.go | 125 |
2 files changed, 0 insertions, 197 deletions
diff --git a/examples/simple/simple.go b/examples/simple/simple.go deleted file mode 100644 index 20c41fb..0000000 --- a/examples/simple/simple.go +++ /dev/null @@ -1,72 +0,0 @@ -package main - -import ( - "net/http" - - g "github.com/maragudk/gomponents" - c "github.com/maragudk/gomponents/components" - . "github.com/maragudk/gomponents/html" -) - -func main() { - _ = http.ListenAndServe("localhost:8080", http.HandlerFunc(handler)) -} - -func handler(w http.ResponseWriter, r *http.Request) { - _ = Page(props{ - title: r.URL.Path, - path: r.URL.Path, - }).Render(w) -} - -type props struct { - title string - path string -} - -// Page is a whole document to output. -func Page(p props) g.Node { - return c.HTML5(c.HTML5Props{ - Title: p.title, - Language: "en", - Head: []g.Node{ - StyleEl(Type("text/css"), - g.Raw("html { font-family: sans-serif; }"), - g.Raw("ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; }"), - g.Raw("ul li { display: block; padding: 8px; float: left; }"), - g.Raw(".is-active { font-weight: bold; }"), - ), - }, - Body: []g.Node{ - Navbar(p.path, []PageLink{ - {Path: "/foo", Name: "Foo"}, - {Path: "/bar", Name: "Bar"}, - }), - H1(g.Text(p.title)), - P(g.Textf("Welcome to the page at %v.", p.path)), - }, - }) -} - -type PageLink struct { - Path string - Name string -} - -func Navbar(currentPath string, links []PageLink) g.Node { - return Div( - Ul( - NavbarLink("/", "Home", currentPath), - - g.Group(g.Map(links, func(pl PageLink) g.Node { - return NavbarLink(pl.Path, pl.Name, currentPath) - })), - ), - - Hr(), - ) -} - -func NavbarLink(href, name, currentPath string) g.Node { - return Li(A(Href(href), c.Classes{"is-active": currentPath == href}, g.Text(name))) -} diff --git a/examples/tailwindcss/tailwindcss.go b/examples/tailwindcss/tailwindcss.go deleted file mode 100644 index 6e92288..0000000 --- a/examples/tailwindcss/tailwindcss.go +++ /dev/null @@ -1,125 +0,0 @@ -package main - -import ( - "net/http" - "time" - - g "github.com/maragudk/gomponents" - c "github.com/maragudk/gomponents/components" - . "github.com/maragudk/gomponents/html" -) - -func main() { - http.Handle("/", createHandler(indexPage())) - http.Handle("/contact", createHandler(contactPage())) - http.Handle("/about", createHandler(aboutPage())) - - _ = http.ListenAndServe("localhost:8080", nil) -} - -func createHandler(title string, body g.Node) http.HandlerFunc { - return func(w http.ResponseWriter, r *http.Request) { - // Rendering a Node is as simple as calling Render and passing an io.Writer - _ = Page(title, r.URL.Path, body).Render(w) - } -} - -func indexPage() (string, g.Node) { - return "Welcome!", Div( - H1(g.Text("Welcome to this example page")), - P(g.Text("I hope it will make you happy. 😄 It's using TailwindCSS for styling.")), - ) -} - -func contactPage() (string, g.Node) { - return "Contact", Div( - H1(g.Text("Contact us")), - P(g.Text("Just do it.")), - ) -} - -func aboutPage() (string, g.Node) { - return "About", Div( - H1(g.Text("About this site")), - P(g.Text("This is a site showing off gomponents.")), - ) -} - -func Page(title, path string, body g.Node) g.Node { - // HTML5 boilerplate document - return c.HTML5(c.HTML5Props{ - Title: title, - Language: "en", - Head: []g.Node{ - Link(Rel("stylesheet"), Href("https://unpkg.com/tailwindcss@2.1.2/dist/base.min.css")), - Link(Rel("stylesheet"), Href("https://unpkg.com/tailwindcss@2.1.2/dist/components.min.css")), - Link(Rel("stylesheet"), Href("https://unpkg.com/@tailwindcss/typography@0.4.0/dist/typography.min.css")), - Link(Rel("stylesheet"), Href("https://unpkg.com/tailwindcss@2.1.2/dist/utilities.min.css")), - }, - Body: []g.Node{ - Navbar(path, []PageLink{ - {Path: "/contact", Name: "Contact"}, - {Path: "/about", Name: "About"}, - }), - Container( - Prose(body), - PageFooter(), - ), - }, - }) -} - -type PageLink struct { - Path string - Name string -} - -func Navbar(currentPath string, links []PageLink) g.Node { - return Nav(Class("bg-gray-700 mb-4"), - Container( - Div(Class("flex items-center space-x-4 h-16"), - NavbarLink("/", "Home", currentPath == "/"), - - // We can Map custom slices to Nodes - g.Group(g.Map(links, func(pl PageLink) g.Node { - return NavbarLink(pl.Path, pl.Name, currentPath == pl.Path) - })), - ), - ), - ) -} - -// NavbarLink is a link in the Navbar. -func NavbarLink(path, text string, active bool) g.Node { - return A(Href(path), g.Text(text), - // Apply CSS classes conditionally - c.Classes{ - "px-3 py-2 rounded-md text-sm font-medium focus:outline-none focus:text-white focus:bg-gray-700": true, - "text-white bg-gray-900": active, - "text-gray-300 hover:text-white hover:bg-gray-700": !active, - }, - ) -} - -func Container(children ...g.Node) g.Node { - return Div(Class("max-w-7xl mx-auto px-2 sm:px-6 lg:px-8"), g.Group(children)) -} - -func Prose(children ...g.Node) g.Node { - return Div(Class("prose"), g.Group(children)) -} - -func PageFooter() g.Node { - return Footer(Class("prose prose-sm prose-indigo"), - P( - // We can use string interpolation directly, like fmt.Sprintf. - g.Textf("Rendered %v. ", time.Now().Format(time.RFC3339)), - - // Conditional inclusion - g.If(time.Now().Second()%2 == 0, g.Text("It's an even second.")), - g.If(time.Now().Second()%2 == 1, g.Text("It's an odd second.")), - ), - - P(A(Href("https://www.gomponents.com"), g.Text("gomponents"))), - ) -} |