gromer

git clone https://pyrossh.dev/repos/gromer.git

gromer is a framework and cli to build multipage web apps in golang using htmx and alpinejs.

c9c1d70a — Peter John

improve styling

Files changed (19) hide show

_example/assets/favicon.ico +0 -0
_example/assets/images/icon.png +0 -0
_example/components/Checkbox.go +2 -30
_example/components/todo.go +1 -1
_example/containers/Error.go +1 -11
_example/containers/TodoCount.go +1 -12
_example/containers/TodoList.go +1 -93
_example/main.go +3 -3
_example/routes/404/get.go +8 -2
_example/routes/about/get.go +9 -3
_example/routes/get.go +79 -113
_example/routes/post.go +1 -1
_example/routes/styles.go +0 -153
go.mod +3 -0
go.sum +6 -0
gsx/gsx.go +75 -58
gsx/twx.go +552 -0
http.go +35 -35
utils.go +0 -4

_example/assets/favicon.ico CHANGED Viewed

Binary file

_example/assets/images/icon.png DELETED Viewed

Binary file

_example/components/Checkbox.go CHANGED Viewed

@@ -4,37 +4,9 @@ import (
 	. "github.com/pyros2097/gromer/gsx"
 )
-var _ = Css(`
-	.checkbox {
-		text-align: center;
-		width: 40px;
-		/* auto, since non-WebKit browsers doesn't support input styling */
-		height: auto;
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		margin: auto 0;
-		border: none; /* Mobile Safari */
+// var CheckboxStyles = M{}
-		-webkit-appearance: none;
-		appearance: none;
-	}
-	.checkbox {
-		opacity: 0;
-	}
-	.checkbox + label {
-		background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
-		background-repeat: no-repeat;
-		background-position: center left;
-	}
-	.checkbox:checked + label {
-		background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
-	}
-`)
-func Checkbox(c Context, value bool) *Node {
+func Checkbox(c *Context, value bool) *Node {
 	return c.Render(`
 		<input class="checkbox" type="checkbox" checked="{value}" />
 	`)

_example/components/todo.go CHANGED Viewed

@@ -5,7 +5,7 @@ import (
 	. "github.com/pyros2097/gromer/gsx"
 )
-func Todo(c Context, todo *todos.Todo) *Node {
+func Todo(c *Context, todo *todos.Todo) *Node {
 	return c.Render(`
 		<li id="todo-{todo.ID}" class="{ completed: todo.Completed }">
 			<div class="view">

_example/containers/Error.go CHANGED Viewed

@@ -4,7 +4,7 @@ import (
 	. "github.com/pyros2097/gromer/gsx"
 )
-func Error(c Context, err error) *Node {
+func Error(c *Context, err error) *Node {
 	c.Set("err", err.Error())
 	return c.Render(`
 		<span class="error">
@@ -12,13 +12,3 @@ func Error(c Context, err error) *Node {
 		</span>
 	`)
 }
-var _ = Css(`
-	.error {
-		color: red;
-		font-size: 18px;
-		font-weight: 500;
-		padding: 24px;
-		border: red 1px solid;
-	}
-`)

_example/containers/TodoCount.go CHANGED Viewed

@@ -5,7 +5,7 @@ import (
 	. "github.com/pyros2097/gromer/gsx"
 )
-func TodoCount(c Context, filter string) *Node {
+func TodoCount(c *Context, filter string) *Node {
 	todos, err := todos.GetAllTodo(c, todos.GetAllTodoParams{
 		Filter: filter,
 		Limit:  1000,
@@ -20,14 +20,3 @@ func TodoCount(c Context, filter string) *Node {
 		</span>
 	`)
 }
-var _ = Css(`
-	.todo-count {
-		float: left;
-		text-align: left;
-	}
-	.todo-count strong {
-		font-weight: 300;
-	}
-`)

_example/containers/TodoList.go CHANGED Viewed

@@ -6,7 +6,7 @@ import (
 	. "github.com/pyros2097/gromer/gsx"
 )
-func TodoList(c Context, page int, filter string) *Node {
+func TodoList(c *Context, page int, filter string) *Node {
 	index := Default(page, 1)
 	todos, err := todos.GetAllTodo(c, todos.GetAllTodoParams{
 		Filter: filter,
@@ -22,95 +22,3 @@ func TodoList(c Context, page int, filter string) *Node {
 		</ul>
 	`)
 }
-var _ = Css(`
-	.todo-list {
-		margin: 0;
-		padding: 0;
-		list-style: none;
-	}
-	.todo-list li {
-		position: relative;
-		font-size: 24px;
-		border-bottom: 1px solid #ededed;
-	}
-	.todo-list li:last-child {
-		border-bottom: none;
-	}
-	.todo-list li.editing {
-		border-bottom: none;
-		padding: 0;
-	}
-	.todo-list li.editing .edit {
-		display: block;
-		width: 506px;
-		padding: 12px 16px;
-		margin: 0 0 0 43px;
-	}
-	.todo-list li.editing .view {
-		display: none;
-	}
-	.todo-list li label {
-		word-break: break-all;
-		padding: 15px 15px 15px 60px;
-		display: block;
-		line-height: 1.2;
-		transition: color 0.4s;
-	}
-	.todo-list li.completed label {
-		color: #d9d9d9;
-		text-decoration: line-through;
-	}
-	.todo-list li .destroy {
-		display: none;
-		position: absolute;
-		top: 0;
-		right: 10px;
-		bottom: 0;
-		width: 40px;
-		height: 40px;
-		margin: auto 0;
-		font-size: 30px;
-		color: #cc9a9a;
-		margin-bottom: 11px;
-		transition: color 0.2s ease-out;
-	}
-	.todo-list li .destroy:hover {
-		color: #af5b5e;
-	}
-	.todo-list li .destroy:after {
-		content: '×';
-	}
-	.todo-list li:hover .destroy {
-		display: block;
-	}
-	.todo-list li .edit {
-		display: none;
-	}
-	.todo-list li.editing:last-child {
-		margin-bottom: -1px;
-	}
-	@media screen and (-webkit-min-device-pixel-ratio: 0) {
-		.todo-list li .toggle {
-			background: none;
-		}
-		.todo-list li .toggle {
-			height: 40px;
-		}
-	}
-`)

_example/main.go CHANGED Viewed

@@ -38,9 +38,9 @@ func main() {
 	gromer.StylesRoute(staticRouter, "/styles.css")
 	pageRouter := baseRouter.NewRoute().Subrouter()
-	gromer.Handle(pageRouter, "GET", "/", routes.GET)
+	gromer.Handle(pageRouter, "GET", "/", routes.GET, routes.Meta, routes.Styles)
-	gromer.Handle(pageRouter, "POST", "/", routes.POST)
+	gromer.Handle(pageRouter, "POST", "/", routes.POST, routes.Meta, routes.Styles)
-	gromer.Handle(pageRouter, "GET", "/about", about.GET)
+	gromer.Handle(pageRouter, "GET", "/about", about.GET, about.Meta, about.Styles)
 	log.Info().Msg("http server listening on http://localhost:3000")
 	srv := server.New(baseRouter, nil)

_example/routes/404/get.go CHANGED Viewed

@@ -4,8 +4,14 @@ import (
 	. "github.com/pyros2097/gromer/gsx"
 )
+var (
+	Meta = M{
+		"title": "Page Not Found",
+	}
+	Styles = M{}
+)
-func GET(c Context) (*Node, int, error) {
+func GET(c *Context) (*Node, int, error) {
-	c.Meta("title", "Page Not Found")
 	return c.Render(`
 		<main class="box center">
 			<h1>Page Not Found</h1>

_example/routes/about/get.go CHANGED Viewed

@@ -4,9 +4,15 @@ import (
 	. "github.com/pyros2097/gromer/gsx"
 )
+var (
+	Meta = M{
+		"title":       "About Gromer",
+		"description": "About Gromer",
+	}
+	Styles = M{}
+)
-func GET(c Context) (*Node, int, error) {
+func GET(c *Context) (*Node, int, error) {
-	c.Meta("title", "About Gromer")
-	c.Meta("description", "About Gromer")
 	return c.Render(`
 		<div class="flex flex-col justify-center items-center">
 			A new link is here

_example/routes/get.go CHANGED Viewed

@@ -5,130 +5,96 @@ import (
 	. "github.com/pyros2097/gromer/gsx"
 )
-var _ = Css(`
+var (
-	.container {
+	Meta = M{
-		background: #fff;
-		margin: 130px 0 40px 0;
-		position: relative;
-		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
+		"title":       "Gromer Todos",
+		"description": "Gromer Todos",
+		"author":      "gromer",
+		"keywords":    "gromer",
 	}
-	.container h1 {
+	Styles = M{
+		"container":       "bg-gray-50 min-h-screen font-sans",
+		"todos-container": "container mx-auto flex flex-col items-center",
+		"title":           "text-opacity-20 text-red-900 text-8xl text-center",
+		"main":            "mt-8 shadow-xl w-full max-w-prose bg-white",
-		position: absolute;
+		"bottom": M{
-		top: -155px;
-		width: 100%;
-		font-size: 100px;
-		font-weight: 100;
-		text-align: center;
+			"container": "flex flex-row items-center flex-wrap sm:flex-nowrap p-2 font-light border-t-2 border-gray-100",
-		color: rgba(175, 47, 47, 0.15);
+			"row":       "flex-1 flex flex-row",
+			"section-1": "flex-1 flex flex-row order-1 justify-start",
+			"section-2": "flex-1 flex flex-row order-2 sm:order-3 justify-end",
+			"section-3": "flex-1 flex flex-row order-3 sm:order-2 min-w-full sm:min-w-min justify-center",
+			"link":      "rounded border px-1 mx-2 hover:border-red-100",
-		-webkit-text-rendering: optimizeLegibility;
+			"active":    "border-red-900",
+			"clear":     "font-light hover:underline",
-		-moz-text-rendering: optimizeLegibility;
+			"disabled":  "invisible disabled",
+		},
+		"footer": M{
+			"container": "mt-16 p-4 flex flex-col",
-		text-rendering: optimizeLegibility;
+			"link":      "hover:underline",
+			"subtitle":  "m-0.5 text-xs text-center text-gray-500",
+		},
 	}
-	input::-webkit-input-placeholder {
-		font-style: italic;
-		font-weight: 300;
-		color: #e6e6e6;
-	}
-	input::-moz-placeholder {
-		font-style: italic;
-		font-weight: 300;
-		color: #e6e6e6;
-	}
-	input::input-placeholder {
-		font-style: italic;
-		font-weight: 300;
-		color: #e6e6e6;
-	}
-	.clear-completed, .clear-completed:active {
-		float: right;
-		position: relative;
-		line-height: 20px;
-		text-decoration: none;
-		cursor: pointer;
-	}
-	.clear-completed:hover {
-		text-decoration: underline;
-	}
-	.filters {
-		margin: 0;
-		padding: 0;
-		list-style: none;
-		position: absolute;
-		right: 0;
-		left: 0;
-	}
-	.filters li {
-		display: inline;
-	}
-	.filters li a {
-		color: inherit;
-		margin: 3px;
-		padding: 3px 7px;
-		text-decoration: none;
-		border: 1px solid transparent;
-		border-radius: 3px;
-	}
-	.filters li a:hover {
-		border-color: rgba(175, 47, 47, 0.1);
-	}
-	.filters li a.selected {
-		border-color: rgba(175, 47, 47, 0.2);
-	}
-`)
+)
 type GetParams struct {
 	Page   int    `json:"page"`
 	Filter string `json:"filter"`
 }
-func GET(c Context, params GetParams) (*Node, int, error) {
+func GET(c *Context, params GetParams) (*Node, int, error) {
-	c.Meta("title", "Gromer Todos")
-	c.Meta("description", "Gromer Todos")
-	c.Meta("author", "gromer")
-	c.Meta("keywords", "gromer")
 	return c.Render(`
 		<div class="container">
-			<header class="header">
+			<div class="todos-container">
+				<header>
-				<h1>todos</h1>
+					<h1 class="title">todos</h1>
-				<form hx-post="/" hx-target="#todo-list" hx-swap="afterbegin" _="on htmx:afterOnLoad set #text.value to ''">
+					<form hx-post="/" hx-target="#todo-list" hx-swap="afterbegin" _="on htmx:afterOnLoad set #text.value to ''">
-					<input type="hidden" name="intent" value="create" />
+						<input type="hidden" name="intent" value="create" />
-					<input class="new-todo" id="text" name="text" placeholder="What needs to be done?" autofocus="false" autocomplete="off" />
+						<input class="new-todo" id="text" name="text" placeholder="What needs to be done?" autofocus="false" autocomplete="off" />
-				</form>
+					</form>
-			</header>
+				</header>
-			<section class="main">
+				<main class="main">
-				<input class="toggle-all" id="toggle-all" type="checkbox" />
+					<input class="toggle-all" id="toggle-all" type="checkbox" />
-				<label for="toggle-all">Mark all as complete</label>
+					<label for="toggle-all">Mark all as complete</label>
-				<TodoList id="todo-list" page="{params.Page}" filter="{params.Filter}" />
+					<TodoList id="todo-list" page="{params.Page}" filter="{params.Filter}"></TodoList>
+					<div class="bottom">
+						<div class="section-1">
+							<TodoCount filter="{params.Filter}"></TodoCount>
+						</div>
+						<ul class="section-2">
+							<li>
+								<a href="?filter=all" class="link active">All</a>
+							</li>
+							<li>
+								<a href="?filter=active" class="link">Active</a>
+							</li>
+							<li>
+								<a href="?filter=completed" class="link">Completed</a>
+							</li>
+						</ul>
+						<div class="section-3">
+						<form hx-target="#todo-list" hx-post="/">
+							<input type="hidden" name="intent" value="clear_completed" />
+							<button type="submit" class="bottom-clear">Clear completed</button>
+						</form>
+						</div>
+					</div>
-			</section>
+				</main>
-			<footer class="footer">
+				<footer class="footer">
-				<TodoCount filter="{params.Filter}" />
-				<ul class="filters">
+					<span class="subtitle">Written by
-					<li>
-						<a href="?filter=all">All</a>
-					</li>
-					<li>
-						<a href="?filter=active">Active</a>
-					</li>
-					<li>
-						<a href="?filter=completed">Completed</a>
-					</li>
-				</ul>
-				<form hx-target="#todo-list" hx-post="/">
-					<input type="hidden" name="intent" value="clear_completed" />
+						<a class="link" href="https://github.com/pyrossh/">pyrossh</a>
-					<button type="submit" class="clear-completed" >Clear completed</button>
-				</form>
+					</span>
+					<span class="subtitle">using
+						<a class="link" href="https://github.com/pyrossh/gromer">Gromer</a>
+					</span>
+					<span class="subtitle">thanks to
+						<a class="link" href="https://github.com/wishawa/">Wisha Wa</a>
+					</span>
+					<span class="subtitle">according to the spec
+						<a class="link" href="https://todomvc.com/">TodoMVC</a>
+					</span>
-			</footer>
+				</footer>
+			</div>
 		</div>
 	`), 200, nil
 }

_example/routes/post.go CHANGED Viewed

@@ -14,7 +14,7 @@ type PostParams struct {
 	Text   string `json:"text"`
 }
-func POST(c Context, params PostParams) (*Node, int, error) {
+func POST(c *Context, params PostParams) (*Node, int, error) {
 	if params.Intent == "clear_completed" {
 		allTodos, err := todos.GetAllTodo(c, todos.GetAllTodoParams{
 			Filter: "all",

_example/routes/styles.go DELETED Viewed

@@ -1,153 +0,0 @@
-package routes
-import (
-	. "github.com/pyros2097/gromer/gsx"
-)
-var _ = Css(`
-	hr {
-		margin: 20px 0;
-		border: 0;
-		border-top: 1px dashed #c5c5c5;
-		border-bottom: 1px dashed #f7f7f7;
-	}
-	html,
-	body {
-		margin: 0;
-		padding: 0;
-	}
-	button {
-		margin: 0;
-		padding: 0;
-		border: 0;
-		background: none;
-		font-size: 100%;
-		vertical-align: baseline;
-		font-family: inherit;
-		font-weight: inherit;
-		color: inherit;
-		-webkit-appearance: none;
-		appearance: none;
-		-webkit-font-smoothing: antialiased;
-		-moz-osx-font-smoothing: grayscale;
-	}
-	body {
-		font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
-		line-height: 1.4em;
-		background: #f5f5f5;
-		color: #4d4d4d;
-		min-width: 230px;
-		max-width: 550px;
-		margin: 0 auto;
-		-webkit-font-smoothing: antialiased;
-		-moz-osx-font-smoothing: grayscale;
-		font-weight: 300;
-	}
-	:focus {
-		outline: 0;
-	}
-	.hidden {
-		display: none;
-	}
-	.new-todo,
-	.edit {
-		position: relative;
-		margin: 0;
-		width: 100%;
-		font-size: 24px;
-		font-family: inherit;
-		font-weight: inherit;
-		line-height: 1.4em;
-		border: 0;
-		color: inherit;
-		padding: 6px;
-		border: 1px solid #999;
-		box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-		box-sizing: border-box;
-		-webkit-font-smoothing: antialiased;
-		-moz-osx-font-smoothing: grayscale;
-	}
-	.new-todo {
-		padding: 16px 16px 16px 60px;
-		border: none;
-		background: rgba(0, 0, 0, 0.003);
-		box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
-	}
-	.main {
-		position: relative;
-		z-index: 2;
-		border-top: 1px solid #e6e6e6;
-	}
-	.toggle-all {
-		text-align: center;
-		border: none; /* Mobile Safari */
-		opacity: 0;
-		position: absolute;
-	}
-	.toggle-all + label {
-		width: 60px;
-		height: 34px;
-		font-size: 0;
-		position: absolute;
-		top: -52px;
-		left: -13px;
-		-webkit-transform: rotate(90deg);
-		transform: rotate(90deg);
-	}
-	.toggle-all + label:before {
-		content: '❯';
-		font-size: 22px;
-		color: #e6e6e6;
-		padding: 10px 27px 10px 27px;
-	}
-	.toggle-all:checked + label:before {
-		color: #737373;
-	}
-	.footer {
-		color: #777;
-		padding: 10px 15px;
-		height: 20px;
-		text-align: center;
-		border-top: 1px solid #e6e6e6;
-	}
-	.footer:before {
-		content: '';
-		position: absolute;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		height: 50px;
-		overflow: hidden;
-		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
-	}
-	@media screen and (-webkit-min-device-pixel-ratio: 0) {
-		.toggle-all {
-			background: none;
-		}
-	}
-	@media (max-width: 430px) {
-		.footer {
-			height: 50px;
-		}
-		.filters {
-			bottom: 10px;
-		}
-	}
-`)

go.mod CHANGED Viewed

@@ -20,13 +20,16 @@ require (
 require (
 	cloud.google.com/go v0.94.0 // indirect
 	cloud.google.com/go/firestore v1.5.0 // indirect
+	github.com/alecthomas/repr v0.1.0 // indirect
 	github.com/aymerick/douceur v0.2.0 // indirect
 	github.com/aymerick/raymond v2.0.2+incompatible // indirect
 	github.com/blang/semver v3.5.1+incompatible // indirect
 	github.com/davecgh/go-spew v1.1.1 // indirect
 	github.com/felixge/httpsnoop v1.0.1 // indirect
+	github.com/go-errors/errors v1.4.2 // indirect
 	github.com/go-playground/locales v0.14.0 // indirect
 	github.com/go-playground/universal-translator v0.18.0 // indirect
+	github.com/go-stack/stack v1.8.1 // indirect
 	github.com/gobuffalo/envy v1.6.5 // indirect
 	github.com/golang/groupcache v0.0.0-20210331224755-41bb18bfe9da // indirect
 	github.com/golang/protobuf v1.5.2 // indirect

go.sum CHANGED Viewed

@@ -99,6 +99,8 @@ github.com/BurntSushi/toml v0.3.1/go.mod h1:xHWCNGjB5oqiDr8zfno3MHue2Ht5sIBksp03
 github.com/BurntSushi/xgb v0.0.0-20160522181843-27f122750802/go.mod h1:IVnqGOEym/WlBOVXweHU+Q+/VP0lqqI8lqeDx9IjBqo=
 github.com/GoogleCloudPlatform/cloudsql-proxy v1.24.0/go.mod h1:3tx938GhY4FC+E1KT/jNjDw7Z5qxAEtIiERJ2sXjnII=
 github.com/OneOfOne/xxhash v1.2.2/go.mod h1:HSdplMjZKSmBqAxg5vPj2TmRDmfkzw+cTzAElWljhcU=
+github.com/alecthomas/repr v0.1.0 h1:ENn2e1+J3k09gyj2shc0dHr/yjaWSHRlrJ4DPMevDqE=
+github.com/alecthomas/repr v0.1.0/go.mod h1:2kn6fqh/zIyPLmm3ugklbEi5hg5wS435eygvNfaDQL8=
 github.com/antihax/optional v1.0.0/go.mod h1:uupD/76wgC+ih3iEmQUL+0Ugr19nfwCT1kdvxnR2qWY=
 github.com/aws/aws-sdk-go v1.15.27/go.mod h1:mFuSZ37Z9YOHbQEwBWztmVzqXrEkub65tZoCYDt7FT0=
 github.com/aws/aws-sdk-go v1.37.0/go.mod h1:hcU610XS61/+aQV88ixoOzUoG7v3b31pl2zKMmprdro=
@@ -169,6 +171,8 @@ github.com/fsnotify/fsnotify v1.5.1/go.mod h1:T3375wBYaZdLLcVNkcVbzGHY7f1l/uK5T5
 github.com/ghodss/yaml v1.0.0/go.mod h1:4dBDuWmgqj2HViK6kFavaiC9ZROes6MMH2rRYeMEF04=
 github.com/gin-contrib/sse v0.1.0/go.mod h1:RHrZQHXnP2xjPF+u1gW/2HnVO7nvIa9PG3Gm+fLHvGI=
 github.com/gin-gonic/gin v1.6.3/go.mod h1:75u5sXoLsGZoRN5Sgbi1eraJ4GU3++wFwWzhwvtwp4M=
+github.com/go-errors/errors v1.4.2 h1:J6MZopCL4uSllY1OfXM374weqZFFItUbrImctkmUxIA=
+github.com/go-errors/errors v1.4.2/go.mod h1:sIVyrIiJhuEF+Pj9Ebtd6P/rEYROXFi3BopGUQ5a5Og=
 github.com/go-gl/glfw v0.0.0-20190409004039-e6da0acd62b1/go.mod h1:vR7hzQXu2zJy9AVAgeJqvqgH9Q5CA+iKCZ2gyEVpxRU=
 github.com/go-gl/glfw/v3.3/glfw v0.0.0-20191125211704-12ad95a8df72/go.mod h1:tQ2UAYgL5IevRw8kRxooKSPJfGvJ9fJQFa0TUsXzTg8=
 github.com/go-gl/glfw/v3.3/glfw v0.0.0-20200222043503-6f7a984d4dc4/go.mod h1:tQ2UAYgL5IevRw8kRxooKSPJfGvJ9fJQFa0TUsXzTg8=
@@ -185,6 +189,8 @@ github.com/go-playground/validator/v10 v10.2.0/go.mod h1:uOYAAleCW8F/7oMFd6aG0GO
 github.com/go-playground/validator/v10 v10.9.0 h1:NgTtmN58D0m8+UuxtYmGztBJB7VnPgjj221I1QHci2A=
 github.com/go-playground/validator/v10 v10.9.0/go.mod h1:74x4gJWsvQexRdW8Pn3dXSGrTK4nAUsbPlLADvpJkos=
 github.com/go-sql-driver/mysql v1.6.0/go.mod h1:DCzpHaOWr8IXmIStZouvnhqoel9Qv2LBy8hT2VhHyBg=
+github.com/go-stack/stack v1.8.1 h1:ntEHSVwIt7PNXNpgPmVfMrNhLtgjlmnZha2kOpuRiDw=
+github.com/go-stack/stack v1.8.1/go.mod h1:dcoOX6HbPZSZptuspn9bctJ+N/CnF5gGygcUP3XYfe4=
 github.com/gobuffalo/envy v1.6.5 h1:X3is06x7v0nW2xiy2yFbbIjwHz57CD6z6MkvqULTCm8=
 github.com/gobuffalo/envy v1.6.5/go.mod h1:N+GkhhZ/93bGZc6ZKhJLP6+m+tCNPKwgSpH9kaifseQ=
 github.com/gobuffalo/velvet v0.0.0-20170320144106-d97471bf5d8f h1:ddIdPdlkAgKMB0mbkft2LT3oxN1h3MN1fopCFrOgkhY=

gsx/gsx.go CHANGED Viewed

@@ -21,14 +21,17 @@ var (
 		Data:     "div",
 		DataAtom: atom.Lookup([]byte("div")),
 	}
-	htmlTags = []string{"a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bb", "bdo", "big", "blockquote", "body", "br /", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "command", "datagrid", "datalist", "dd", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "em", "embed", "eventsource", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "h1 to <h6>", "head", "header", "hgroup", "hr /", "html", "i", "iframe", "img", "input", "ins", "isindex", "kbd", "keygen", "label", "legend", "li", "link", "map", "mark", "menu", "meta", "meter", "nav", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strike", "strong", "style", "sub", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr"}
-	compMap  = map[string]ComponentFunc{}
-	funcMap  = map[string]interface{}{}
-	styles   = ""
-	refRegex = regexp.MustCompile(`{(.*?)}`)
+	htmlTags   = []string{"a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bb", "bdo", "big", "blockquote", "body", "br /", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "command", "datagrid", "datalist", "dd", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "em", "embed", "eventsource", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "h1 to <h6>", "head", "header", "hgroup", "hr /", "html", "i", "iframe", "img", "input", "ins", "isindex", "kbd", "keygen", "label", "legend", "li", "link", "map", "mark", "menu", "meta", "meter", "nav", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strike", "strong", "style", "sub", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr"}
+	compMap    = map[string]ComponentFunc{}
+	funcMap    = map[string]interface{}{}
+	classesMap = map[string]M{}
+	refRegex   = regexp.MustCompile(`{(.*?)}`)
 )
 type (
+	M             map[string]interface{}
+	MS            map[string]string
+	Arr           []interface{}
 	ComponentFunc struct {
 		Func interface{}
 		Args []string
@@ -42,8 +45,8 @@ type (
 	Context struct {
 		context.Context
 		hxRequest bool
-		data      map[string]interface{}
+		data      M
-		metas     map[string]string
+		meta      M
 		links     map[string]link
 		scripts   map[string]bool
 	}
@@ -52,61 +55,76 @@ type (
 	}
 )
-func NewContext(c context.Context, hxRequest bool) Context {
+func NewContext(c context.Context, hxRequest bool) *Context {
+	return &Context{
+		Context:   c,
+		hxRequest: hxRequest,
+		data:      M{},
+		meta:      M{},
+		links:     map[string]link{},
+		scripts:   map[string]bool{},
+	}
+}
-	return Context{Context: c, hxRequest: hxRequest, data: map[string]interface{}{}, metas: map[string]string{}, links: map[string]link{}, scripts: map[string]bool{}}
+func (c *Context) Get(k string) interface{} {
+	return c.data[k]
 }
-func (h Context) Get(k string) interface{} {
+func (c *Context) Set(k string, v interface{}) {
-	return h.data[k]
+	c.data[k] = v
 }
-func (h Context) Set(k string, v interface{}) {
+func (c *Context) Meta(meta M) {
-	h.data[k] = v
+	c.meta = meta
 }
-func (h Context) Meta(k, v string) {
+func (c *Context) AddMeta(k, v string) {
-	h.metas[k] = v
+	c.meta[k] = v
 }
-func (h Context) Link(rel, href, t, as string) {
+func (c *Context) Link(rel, href, t, as string) {
-	h.links[href] = link{rel, href, t, as}
+	c.links[href] = link{rel, href, t, as}
 }
-func (h Context) Script(src string, sdefer bool) {
+func (c *Context) Script(src string, sdefer bool) {
-	h.scripts[src] = sdefer
+	c.scripts[src] = sdefer
 }
+func (c *Context) Data(data M) {
+	c.data = data
+}
-func (h Context) Render(tpl string) *Node {
+func (c *Context) Render(tpl string) *Node {
 	newTpl := stripWhitespace(tpl)
 	doc, err := html.ParseFragment(bytes.NewBuffer([]byte(newTpl)), contextNode)
 	if err != nil {
 		panic(err)
 	}
-	populate(h, doc[0])
+	populate(c, doc[0])
 	return &Node{*doc[0]}
 }
-func (n *Node) Write(ctx Context, w io.Writer) {
+func (n *Node) Write(c *Context, w io.Writer) {
-	if !ctx.hxRequest {
+	if !c.hxRequest {
 		w.Write([]byte(`<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">`))
 		w.Write([]byte(`<meta http-equiv="Content-Type" content="text/html;charset=utf-8"><meta content="utf-8" http-equiv="encoding">`))
 		w.Write([]byte(`<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, viewport-fit=cover">`))
-		for k, v := range ctx.metas {
+		for k, v := range c.meta {
 			w.Write([]byte(fmt.Sprintf(`<meta name="%s" content="%s">`, k, v)))
 		}
-		for k, v := range ctx.metas {
+		for k, v := range c.meta {
 			if k == "title" {
 				w.Write([]byte(fmt.Sprintf(`<title>%s</title>`, v)))
 			}
 		}
-		for _, v := range ctx.links {
+		for _, v := range c.links {
 			if v.Type != "" || v.As != "" {
 				w.Write([]byte(fmt.Sprintf(`<link rel="%s" href="%s" type="%s" as="%s">`, v.Rel, v.Href, v.Type, v.As)))
 			} else {
 				w.Write([]byte(fmt.Sprintf(`<link rel="%s" href="%s">`, v.Rel, v.Href)))
 			}
 		}
-		for src, sdefer := range ctx.scripts {
+		for src, sdefer := range c.scripts {
 			if sdefer {
 				w.Write([]byte(fmt.Sprintf(`<script src="%s" defer="true"></script>`, src)))
 			} else {
@@ -116,7 +134,7 @@ func (n *Node) Write(ctx Context, w io.Writer) {
 		w.Write([]byte(`</head><body>`))
 	}
 	html.Render(w, &n.Node)
-	if !ctx.hxRequest {
+	if !c.hxRequest {
 		w.Write([]byte(`</body></html>`))
 	}
 }
@@ -139,6 +157,14 @@ func assertName(t, name string) {
 	}
 }
+func SetClasses(k string, m M) {
+	classesMap[k] = m
+}
+func GetStyles(k string) string {
+	return normalizeCss + "\n" + computeCss(classesMap[k], k)
+}
 func RegisterComponent(f interface{}, args ...string) {
 	name := strings.ToLower(getFunctionName(f))
 	assertName("component", name)
@@ -154,15 +180,6 @@ func RegisterFunc(f interface{}) {
 	funcMap[name] = f
 }
-func Css(v string) string {
-	styles += v
-	return v
-}
-func GetStyles() string {
-	return styles
-}
 func getFunctionName(temp interface{}) string {
 	strs := strings.Split((runtime.FuncForPC(reflect.ValueOf(temp).Pointer()).Name()), ".")
 	return strs[len(strs)-1]
@@ -194,13 +211,13 @@ func convert(ref string, i interface{}) interface{} {
 	}
 }
-func getRefValue(ctx Context, ref string) interface{} {
+func getRefValue(c *Context, ref string) interface{} {
 	if f, ok := funcMap[ref]; ok {
 		return f.(func() string)()
 	} else {
 		parts := strings.Split(strings.ReplaceAll(ref, "!", ""), ".")
 		if len(parts) == 2 {
-			if v, ok := ctx.data[parts[0]]; ok {
+			if v, ok := c.data[parts[0]]; ok {
 				a := reflect.ValueOf(v)
 				if a.Kind() == reflect.Ptr {
 					i := a.Elem().FieldByName(parts[1]).Interface()
@@ -211,7 +228,7 @@ func getRefValue(ctx Context, ref string) interface{} {
 				}
 			}
 		}
-		return convert(ref, ctx.data[ref])
+		return convert(ref, c.data[ref])
 	}
 }
@@ -219,11 +236,11 @@ func removeBrackets(v string) string {
 	return strings.ReplaceAll(strings.ReplaceAll(v, "{", ""), "}", "")
 }
-func substituteString(ctx Context, v string) string {
+func substituteString(c *Context, v string) string {
 	found := refRegex.FindString(v)
 	if found != "" {
 		varName := removeBrackets(found)
-		varValue := fmt.Sprintf("%v", getRefValue(ctx, varName))
+		varValue := fmt.Sprintf("%v", getRefValue(c, varName))
 		return strings.ReplaceAll(v, found, varValue)
 	}
 	return v
@@ -280,10 +297,10 @@ func cloneNode(n *html.Node) *html.Node {
 	return newNode
 }
-func populate(ctx Context, n *html.Node) {
+func populate(c *Context, n *html.Node) {
 	if n.Type == html.TextNode {
 		if n.Data != "" && strings.Contains(n.Data, "{") && n.Data != "{children}" {
-			n.Data = substituteString(ctx, n.Data)
+			n.Data = substituteString(c, n.Data)
 		}
 	} else if n.Type == html.ElementNode {
 		for i, at := range n.Attr {
@@ -292,7 +309,7 @@ func populate(ctx Context, n *html.Node) {
 				arr := strings.Split(xfor, " in ")
 				ctxItemKey := arr[0]
 				ctxKey := arr[1]
-				data := ctx.data[ctxKey]
+				data := c.data[ctxKey]
 				switch reflect.TypeOf(data).Kind() {
 				case reflect.Slice:
 					v := reflect.ValueOf(data)
@@ -308,8 +325,8 @@ func populate(ctx Context, n *html.Node) {
 					firstChild := cloneNode(n.FirstChild)
 					n.RemoveChild(n.FirstChild)
 					for i := 0; i < v.Len(); i++ {
-						compCtx := Context{
+						compCtx := &Context{
-							Context: ctx.Context,
+							Context: c.Context,
 							data: map[string]interface{}{
 								ctxItemKey: v.Index(i).Interface(),
 							},
@@ -333,7 +350,7 @@ func populate(ctx Context, n *html.Node) {
 						kvarray := strings.Split(kv, ":")
 						k := strings.TrimSpace(kvarray[0])
 						v := strings.TrimSpace(kvarray[1])
-						varValue := getRefValue(ctx, v)
+						varValue := getRefValue(c, v)
 						if varValue.(bool) {
 							classes += k
 						}
@@ -347,26 +364,26 @@ func populate(ctx Context, n *html.Node) {
 					n.Attr[i] = html.Attribute{
 						Namespace: at.Namespace,
 						Key:       at.Key,
-						Val:       substituteString(ctx, at.Val),
+						Val:       substituteString(c, at.Val),
 					}
 				}
 			}
 		}
-		for c := n.FirstChild; c != nil; c = c.NextSibling {
+		for child := n.FirstChild; child != nil; child = child.NextSibling {
-			populate(ctx, c)
+			populate(c, child)
 		}
 		if comp, ok := compMap[n.Data]; ok {
-			newNode := populateComponent(ctx, comp, n, true)
+			newNode := populateComponent(c, comp, n, true)
 			n.AppendChild(newNode)
 		}
 	}
 }
-func renderComponent(ctx Context, comp ComponentFunc, n *html.Node) *Node {
+func renderComponent(c *Context, comp ComponentFunc, n *html.Node) *Node {
-	args := []reflect.Value{reflect.ValueOf(ctx)}
+	args := []reflect.Value{reflect.ValueOf(c)}
 	funcType := reflect.TypeOf(comp.Func)
 	for i, arg := range comp.Args {
-		if v, ok := ctx.data[arg]; ok {
+		if v, ok := c.data[arg]; ok {
 			args = append(args, reflect.ValueOf(v))
 		} else {
 			v := getAttribute(arg, n.Attr)
@@ -388,8 +405,8 @@ func renderComponent(ctx Context, comp ComponentFunc, n *html.Node) *Node {
 	return compNode
 }
-func populateComponent(ctx Context, comp ComponentFunc, n *html.Node, remove bool) *html.Node {
+func populateComponent(c *Context, comp ComponentFunc, n *html.Node, remove bool) *html.Node {
-	compNode := renderComponent(ctx, comp, n)
+	compNode := renderComponent(c, comp, n)
 	if n.FirstChild != nil {
 		newChild := cloneNode(n.FirstChild)
 		newChild.Parent = nil
@@ -397,7 +414,7 @@ func populateComponent(ctx Context, comp ComponentFunc, n *html.Node, remove boo
 			n.RemoveChild(n.FirstChild)
 		}
 		if !remove {
-			populate(ctx, newChild)
+			populate(c, newChild)
 		}
 		if compNode.FirstChild != nil {
 			populateChildren(compNode.FirstChild, newChild)

gsx/twx.go ADDED Viewed

@@ -0,0 +1,552 @@
+package gsx
+import "strings"
+type KeyValues struct {
+	Keys   M
+	Values MS
+}
+var colors = KeyValues{
+	Keys: M{
+		"bg":       "background-color",
+		"text":     "color",
+		"divide":   "border-color",
+		"border":   "border-color",
+		"ring":     "--tw-ring-color",
+		"border-l": "border-left-color",
+		"border-r": "border-right-color",
+		"border-t": "border-top-color",
+		"border-b": "border-bottom-color",
+	},
+	Values: MS{
+		"transparent": "transparent",
+		"current":     "currentColor",
+		"black":       "rgba(0, 0, 0, 1)",
+		"white":       "rgba(255, 255, 255, 1)",
+		"gray-50":     "rgba(249, 250, 251, 1)",
+		"gray-100":    "rgba(243, 244, 246, 1)",
+		"gray-200":    "rgba(229, 231, 235, 1)",
+		"gray-300":    "rgba(209, 213, 219, 1)",
+		"gray-400":    "rgba(156, 163, 175, 1)",
+		"gray-500":    "rgba(107, 114, 128, 1)",
+		"gray-600":    "rgba(75, 85, 99, 1)",
+		"gray-700":    "rgba(55, 65, 81, 1)",
+		"gray-800":    "rgba(31, 41, 55, 1)",
+		"gray-900":    "rgba(17, 24, 39, 1)",
+		"red-50":      "rgba(254, 242, 242, 1)",
+		"red-100":     "rgba(254, 226, 226, 1)",
+		"red-200":     "rgba(254, 202, 202, 1)",
+		"red-300":     "rgba(252, 165, 165, 1)",
+		"red-400":     "rgba(248, 113, 113, 1)",
+		"red-500":     "rgba(239, 68, 68, 1)",
+		"red-600":     "rgba(220, 38, 38, 1)",
+		"red-700":     "rgba(185, 28, 28, 1)",
+		"red-800":     "rgba(153, 27, 27, 1)",
+		"red-900":     "rgba(127, 29, 29, 1)",
+		"yellow-50":   "rgba(255, 251, 235, 1)",
+		"yellow-100":  "rgba(254, 243, 199, 1)",
+		"yellow-200":  "rgba(253, 230, 138, 1)",
+		"yellow-300":  "rgba(252, 211, 77, 1)",
+		"yellow-400":  "rgba(251, 191, 36, 1)",
+		"yellow-500":  "rgba(245, 158, 11, 1)",
+		"yellow-600":  "rgba(217, 119, 6, 1)",
+		"yellow-700":  "rgba(180, 83, 9, 1)",
+		"yellow-800":  "rgba(146, 64, 14, 1)",
+		"yellow-900":  "rgba(120, 53, 15, 1)",
+		"green-50":    "rgba(236, 253, 245, 1)",
+		"green-100":   "rgba(209, 250, 229, 1)",
+		"green-200":   "rgba(167, 243, 208, 1)",
+		"green-300":   "rgba(110, 231, 183, 1)",
+		"green-400":   "rgba(52, 211, 153, 1)",
+		"green-500":   "rgba(16, 185, 129, 1)",
+		"green-600":   "rgba(5, 150, 105, 1)",
+		"green-700":   "rgba(4, 120, 87, 1)",
+		"green-800":   "rgba(6, 95, 70, 1)",
+		"green-900":   "rgba(6, 78, 59, 1)",
+		"blue-50":     "rgba(239, 246, 255, 1)",
+		"blue-100":    "rgba(219, 234, 254, 1)",
+		"blue-200":    "rgba(191, 219, 254, 1)",
+		"blue-300":    "rgba(147, 197, 253, 1)",
+		"blue-400":    "rgba(96, 165, 250, 1)",
+		"blue-500":    "rgba(59, 130, 246, 1)",
+		"blue-600":    "rgba(37, 99, 235, 1)",
+		"blue-700":    "rgba(29, 78, 216, 1)",
+		"blue-800":    "rgba(30, 64, 175, 1)",
+		"blue-900":    "rgba(30, 58, 138, 1)",
+		"indigo-50":   "rgba(238, 242, 255, 1)",
+		"indigo-100":  "rgba(224, 231, 255, 1)",
+		"indigo-200":  "rgba(199, 210, 254, 1)",
+		"indigo-300":  "rgba(165, 180, 252, 1)",
+		"indigo-400":  "rgba(129, 140, 248, 1)",
+		"indigo-500":  "rgba(99, 102, 241, 1)",
+		"indigo-600":  "rgba(79, 70, 229, 1)",
+		"indigo-700":  "rgba(67, 56, 202, 1)",
+		"indigo-800":  "rgba(55, 48, 163, 1)",
+		"indigo-900":  "rgba(49, 46, 129, 1)",
+		"purple-50":   "rgba(245, 243, 255, 1)",
+		"purple-100":  "rgba(237, 233, 254, 1)",
+		"purple-200":  "rgba(221, 214, 254, 1)",
+		"purple-300":  "rgba(196, 181, 253, 1)",
+		"purple-400":  "rgba(167, 139, 250, 1)",
+		"purple-500":  "rgba(139, 92, 246, 1)",
+		"purple-600":  "rgba(124, 58, 237, 1)",
+		"purple-700":  "rgba(109, 40, 217, 1)",
+		"purple-800":  "rgba(91, 33, 182, 1)",
+		"purple-900":  "rgba(76, 29, 149, 1)",
+		"pink-50":     "rgba(253, 242, 248, 1)",
+		"pink-100":    "rgba(252, 231, 243, 1)",
+		"pink-200":    "rgba(251, 207, 232, 1)",
+		"pink-300":    "rgba(249, 168, 212, 1)",
+		"pink-400":    "rgba(244, 114, 182, 1)",
+		"pink-500":    "rgba(236, 72, 153, 1)",
+		"pink-600":    "rgba(219, 39, 119, 1)",
+		"pink-700":    "rgba(190, 24, 93, 1)",
+		"pink-800":    "rgba(157, 23, 77, 1)",
+		"pink-900":    "rgba(131, 24, 67, 1)",
+	},
+}
+var spacing = KeyValues{
+	Keys: M{
+		"mr": "margin-right",
+		"ml": "margin-left",
+		"mt": "margin-top",
+		"mb": "margin-bottom",
+		"mx": Arr{
+			"margin-left",
+			"margin-right",
+		},
+		"my": Arr{
+			"margin-top",
+			"margin-bottom",
+		},
+		"m":  "margin",
+		"pr": "padding-right",
+		"pl": "padding-left",
+		"pt": "padding-top",
+		"pb": "padding-bottom",
+		"px": Arr{
+			"padding-left",
+			"padding-right",
+		},
+		"py": Arr{
+			"padding-top",
+			"padding-bottom",
+		},
+		"p": "padding",
+	},
+	Values: MS{
+		"0":    "0px",
+		"1":    "0.25rem",
+		"2":    "0.5rem",
+		"3":    "0.75rem",
+		"4":    "1rem",
+		"5":    "1.25rem",
+		"6":    "1.5rem",
+		"7":    "1.75rem",
+		"8":    "2rem",
+		"9":    "2.25rem",
+		"10":   "2.5rem",
+		"11":   "2.75rem",
+		"12":   "3rem",
+		"14":   "3.5rem",
+		"16":   "4rem",
+		"20":   "5rem",
+		"24":   "6rem",
+		"28":   "7rem",
+		"32":   "8rem",
+		"36":   "9rem",
+		"40":   "10rem",
+		"44":   "11rem",
+		"48":   "12rem",
+		"52":   "13rem",
+		"56":   "14rem",
+		"60":   "15rem",
+		"64":   "16rem",
+		"72":   "18rem",
+		"80":   "20rem",
+		"96":   "24rem",
+		"auto": "auto",
+		"px":   "1px",
+		"0.5":  "0.125rem",
+		"1.5":  "0.375rem",
+		"2.5":  "0.625rem",
+		"3.5":  "0.875rem",
+	},
+}
+var radius = KeyValues{
+	Keys: M{
+		"rounded":   "border-radius",
+		"rounded-t": "border-top-radius",
+		"rounded-r": "border-right-radius",
+		"rounded-l": "border-left-radius",
+		"rounded-b": "border-bottom-radius",
+		"rounded-tl": Arr{
+			"border-top-radius",
+			"border-left-radius",
+		},
+		"rounded-tr": Arr{
+			"border-top-radius",
+			"border-right-radius",
+		},
+		"rounded-bl": Arr{
+			"border-bottom-radius",
+			"border-left-radius",
+		},
+		"rounded-br": Arr{
+			"border-bottom-radius",
+			"border-right-radius",
+		},
+	},
+	Values: MS{
+		"none": "0px",
+		"sm":   "0.125rem",
+		"":     "0.25rem",
+		"md":   "0.375rem",
+		"lg":   "0.5rem",
+		"xl":   "0.75rem",
+		"2xl":  "1rem",
+		"3xl":  "1.5rem",
+		"full": "9999px",
+	},
+}
+var borders = KeyValues{
+	Keys: M{
+		"border":   "border-width",
+		"border-l": "border-left-width",
+		"border-r": "border-right-width",
+		"border-t": "border-top-width",
+		"border-b": "border-bottom-width",
+	},
+	Values: MS{
+		"0": "0px",
+		"2": "2px",
+		"4": "4px",
+		"8": "8px",
+		"":  "1px",
+	},
+}
+var sizes = KeyValues{
+	Keys: M{
+		"h":      "height",
+		"w":      "width",
+		"top":    "top",
+		"left":   "left",
+		"bottom": "bottom",
+		"right":  "right",
+		"minh":   "min-height",
+		"minw":   "min-width",
+		"maxh":   "max-height",
+		"maxw":   "max-width",
+	},
+	Values: MS{
+		"auto":  "auto",
+		"min":   "min-content",
+		"max":   "max-content",
+		"0":     "0px",
+		"1":     "0.25rem",
+		"2":     "0.5rem",
+		"3":     "0.75rem",
+		"4":     "1rem",
+		"5":     "1.25rem",
+		"6":     "1.5rem",
+		"7":     "1.75rem",
+		"8":     "2rem",
+		"9":     "2.25rem",
+		"10":    "2.5rem",
+		"11":    "2.75rem",
+		"12":    "3rem",
+		"14":    "3.5rem",
+		"16":    "4rem",
+		"20":    "5rem",
+		"24":    "6rem",
+		"28":    "7rem",
+		"32":    "8rem",
+		"36":    "9rem",
+		"40":    "10rem",
+		"44":    "11rem",
+		"48":    "12rem",
+		"52":    "13rem",
+		"56":    "14rem",
+		"60":    "15rem",
+		"64":    "16rem",
+		"72":    "18rem",
+		"80":    "20rem",
+		"96":    "24rem",
+		"px":    "1px",
+		"0.5":   "0.125rem",
+		"1.5":   "0.375rem",
+		"2.5":   "0.625rem",
+		"3.5":   "0.875rem",
+		"1/2":   "50%",
+		"1/3":   "33.33%",
+		"2/3":   "66.66%",
+		"1/4":   "25%",
+		"2/4":   "50%",
+		"3/4":   "75%",
+		"1/5":   "20%",
+		"2/5":   "40%",
+		"3/5":   "60%",
+		"4/5":   "80%",
+		"1/6":   "16.66%",
+		"2/6":   "33.33%",
+		"3/6":   "50%",
+		"4/6":   "66.66%",
+		"5/6":   "83.33%",
+		"1/12":  "8.33%",
+		"2/12":  "16.66%",
+		"3/12":  "25%",
+		"4/12":  "33.33%",
+		"5/12":  "41.66%",
+		"6/12":  "50%",
+		"7/12":  "58.33%",
+		"8/12":  "66.66%",
+		"9/12":  "75%",
+		"10/12": "83.33%",
+		"11/12": "91.66%",
+		"full":  "100%",
+	},
+}
+var twClassLookup = MS{
+	"flex":                "display: flex;",
+	"inline-flex":         "display: inline-flex;",
+	"block":               "display: block;",
+	"inline-block":        "display: inline-block;",
+	"inline":              "display: inline;",
+	"table":               "display: table;",
+	"inline-table":        "display: inline-table;",
+	"grid":                "display: grid;",
+	"inline-grid":         "display: inline-grid;",
+	"contents":            "display: contents;",
+	"list-item":           "display: list-item;",
+	"hidden":              "display: none;",
+	"flex-1":              "flex: 1;",
+	"flex-row":            "flex-direction: row;",
+	"flex-col":            "flex-direction: column;",
+	"flex-wrap":           "flex-wrap: wrap;",
+	"flex-nowrap":         "flex-wrap: nowrap;",
+	"flex-wrap-reverse":   "flex-wrap: wrap-reverse;",
+	"items-baseline":      "align-items: baseline;",
+	"items-start":         "align-items: flex-start;",
+	"items-center":        "align-items: center;",
+	"items-end":           "align-items: flex-end;",
+	"items-stretch":       "align-items: stretch;",
+	"justify-start":       "justify-content: flex-start;",
+	"justify-end":         "justify-content: flex-end;",
+	"justify-center":      "justify-content: center;",
+	"justify-between":     "justify-content: space-between;",
+	"justify-around":      "justify-content: space-around;",
+	"justify-evenly":      "justify-content: space-evenly;",
+	"uppercase":           "text-transform: uppercase",
+	"lowercase":           "text-transform: lowercase",
+	"capitalize":          "text-transform: capitalize",
+	"normal-case":         "text-transform: normal-case",
+	"text-left":           "text-align: left;",
+	"text-center":         "text-align: center;",
+	"text-right":          "text-align: right;",
+	"text-justify":        "text-align: justify;",
+	"underline":           "text-decoration: underline;",
+	"line-through":        "text-decoration: line-through;",
+	"no-underline":        "text-decoration: none;",
+	"whitespace-normal":   "white-space: normal;",
+	"whitespace-nowrap":   "white-space: nowrap;",
+	"whitespace-pre":      "white-space: pre;",
+	"whitespace-pre-line": "white-space: pre-line;",
+	"whitespace-pre-wrap": "white-space: pre-wrap;",
+	"break-normal":        "word-break: normal; overflow-wrap: normal;",
+	"break-words":         "word-break: break-word;",
+	"break-all":           "word-break: break-all;",
+	"font-sans":           "font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";",
+	"font-serif":          "font-family: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;",
+	"font-mono":           "font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;",
+	"font-thin":           "font-weight: 100;",
+	"font-extralight":     "font-weight: 200;",
+	"font-light":          "font-weight: 300;",
+	"font-normal":         "font-weight: 400;",
+	"font-medium":         "font-weight: 500;",
+	"font-semibold":       "font-weight: 600;",
+	"font-bold":           "font-weight: 700;",
+	"font-extrabold":      "font-weight: 800;",
+	"font-black":          "font-weight: 900;",
+	"text-xs":             "font-size: 0.75rem; line-height: 1rem;",
+	"text-sm":             "font-size: 0.875rem; line-height: 1.25rem;",
+	"text-base":           "font-size: 1rem; line-height: 1.5rem;",
+	"text-lg":             "font-size: 1.125rem; line-height: 1.75rem;",
+	"text-xl":             "font-size: 1.25rem; line-height: 1.75rem;",
+	"text-2xl":            "font-size: 1.5rem; line-height: 2rem;",
+	"text-3xl":            "font-size: 1.875rem; line-height: 2.25rem;",
+	"text-4xl":            "font-size: 2.25rem; line-height: 2.5rem;",
+	"text-5xl":            "font-size: 3rem; line-height: 1;",
+	"text-6xl":            "font-size: 3.75rem;; line-height: 1;",
+	"text-7xl":            "font-size: 4.5rem; line-height: 1;",
+	"text-8xl":            "font-size: 6rem; line-height: 1;",
+	"text-9xl":            "font-size: 8rem; line-height: 1;",
+	"cursor-auto":         "cursor: auto;",
+	"cursor-default":      "cursor: default;",
+	"cursor-pointer":      "cursor: pointer;",
+	"cursor-wait":         "cursor: wait;",
+	"cursor-text":         "cursor: text;",
+	"cursor-move":         "cursor: move;",
+	"cursor-help":         "cursor: help;",
+	"cursor-not-allowed":  "cursor: not-allowed;",
+	"pointer-events-none": "pointer-events: none;",
+	"pointer-events-auto": "pointer-events: auto;",
+	"select-none":         "user-select: none;",
+	"select-text":         "user-select: text;",
+	"select-all":          "user-select: all;",
+	"select-auto":         "user-select: auto;",
+	"w-screen":            "100vw",
+	"h-screen":            "100vh",
+	"static":              "position: static;",
+	"fixed":               "position: fixed;",
+	"absolute":            "position: absolute;",
+	"relative":            "position: relative;",
+	"sticky":              "position: sticky;",
+	"overflow-auto":       "overflow: auto;",
+	"overflow-hidden":     "overflow: hidden;",
+	"overflow-visible":    "overflow: visible;",
+	"overflow-scroll":     "overflow: scroll;",
+	"overflow-x-auto":     "overflow-x: auto;",
+	"overflow-y-auto":     "overflow-y: auto;",
+	"overflow-x-hidden":   "overflow-x: hidden;",
+	"overflow-y-hidden":   "overflow-y: hidden;",
+	"overflow-x-visible":  "overflow-x: visible;",
+	"overflow-y-visible":  "overflow-y: visible;",
+	"overflow-x-scroll":   "overflow-x: scroll;",
+	"overflow-y-scroll":   "overflow-y: scroll;",
+	"origin-center":       "transform-origin: center;",
+	"origin-top":          "transform-origin: top;",
+	"origin-top-right":    "transform-origin: top right;",
+	"origin-right":        "transform-origin: right;",
+	"origin-bottom-right": "transform-origin: bottom right;",
+	"origin-bottom":       "transform-origin: bottom;",
+	"origin-bottom-left":  "transform-origin: bottom left;",
+	"origin-left":         "transform-origin: left;",
+	"origin-top-left":     "transform-origin: top left;",
+	"shadow-sm":           "box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, 0.05);",
+	"shadow":              "box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);",
+	"shadow-md":           "box-shadow: 0 0 #0000, 0 0 #0000, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);",
+	"shadow-lg":           "box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);",
+	"shadow-xl":           "box-shadow: 0 0 #0000, 0 0 #0000, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);",
+	"shadow-2xl":          "box-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, 0.25);",
+	"shadow-inner":        "box-shadow: 0 0 #0000, 0 0 #0000, inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);",
+	"shadow-none":         "box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000;",
+	"ring-inset":          "--tw-ring-inset: insest;",
+	"ring-0":              "box-shadow:  0 0 0 calc(0px + 0px) rgba(59, 130, 246, 0.5);",
+	"ring-1":              "box-shadow:  0 0 0 calc(1px + 0px) rgba(59, 130, 246, 0.5);",
+	"ring-2":              "box-shadow:  0 0 0 calc(2px + 0px) rgba(59, 130, 246, 0.5);",
+	"ring-4":              "box-shadow:  0 0 0 calc(4px + 0px) rgba(59, 130, 246, 0.5);",
+	"ring-8":              "box-shadow:  0 0 0 calc(8px + 0px) rgba(59, 130, 246, 0.5);",
+	"ring":                "box-shadow:  0 0 0 calc(3px + 0px) rgba(59, 130, 246, 0.5);",
+}
+func init() {
+	mapApply(sizes)
+	mapApply(spacing)
+	mapApply(colors)
+	mapApply(borders)
+	mapApply(radius)
+}
+func mapApply(obj KeyValues) {
+	for key, v := range obj.Keys {
+		for vkey, vv := range obj.Values {
+			suffix := ""
+			if vkey != "" {
+				suffix = "-" + vkey
+			}
+			className := key + suffix
+			if vstring, ok := v.(string); ok {
+				twClassLookup[className] = vstring + ": " + vv + ";"
+			}
+			if varr, ok := v.(Arr); ok {
+				twClassLookup[className] = ""
+				for _, kk := range varr {
+					twClassLookup[className] += kk.(string) + ": " + vv + ";"
+				}
+			}
+		}
+	}
+}
+var normalizeCss = `*, ::before, ::after { box-sizing: border-box; }
+html { -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; line-height: 1.15; -webkit-text-size-adjust: 100%; }
+body { margin: 0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; }
+hr { height: 0; color: inherit; }
+abbr[title] { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; }
+b, strong { font-weight: bolder; }
+code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; font-size: 1em; }
+small { font-size: 80%; }
+sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
+sub { bottom: -0.25em; }
+sup { top: -0.5em; }
+table { text-indent: 0; border-color: inherit; }
+button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }
+button, select { text-transform: none; }
+button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; }
+::-moz-focus-inner { border-style: none; padding: 0; }
+:-moz-focusring { outline: 1px dotted ButtonText; outline: auto; }
+:-moz-ui-invalid { box-shadow: none; }
+legend { padding: 0; }
+progress { vertical-align: baseline; }
+::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
+[type='search'] { -webkit-appearance: textfield; outline-offset: -2px; }
+::-webkit-search-decoration { -webkit-appearance: none; }
+::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
+summary { display: list-item; }
+blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; }
+button { background-color: transparent; background-image: none; }
+fieldset { margin: 0; padding: 0; }
+ol, ul { list-style: none; margin: 0; padding: 0; }
+html { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; line-height: 1.5; }
+body { font-family: inherit; line-height: inherit; }
+*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor; }
+hr { border-top-width: 1px; }
+img { border-style: solid; }
+textarea { resize: vertical; }
+input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; color: #9ca3af; }
+input:-ms-input-placeholder, textarea:-ms-input-placeholder { opacity: 1; color: #9ca3af; }
+input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; }
+button, [role="button"] { cursor: pointer; }
+table { border-collapse: collapse; }
+h1, h2, h3, h4, h5, h6 { 	font-size: inherit; 	font-weight: inherit; }
+a { color: inherit; text-decoration: inherit; }
+button, input, optgroup, select, textarea { padding: 0; line-height: inherit; color: inherit; }
+pre, code, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
+img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
+img, video { max-width: 100%; height: auto; }
+[hidden] { display: none; }
+*, ::before, ::after { --tw-border-opacity: 1; border-color: rgba(229, 231, 235, var(--tw-border-opacity)); }`
+func computeCss(classMap M, parent string) string {
+	p := "\n"
+	for k, v := range classMap {
+		switch it := v.(type) {
+		case string:
+			if parent != "" {
+				if k == "container" {
+					p += "." + parent
+				} else {
+					p += "." + parent + " ." + k
+				}
+			} else {
+				p += "." + k
+			}
+			p += " {\n"
+			for _, c := range strings.Split(it, " ") {
+				if s, ok := twClassLookup[c]; ok {
+					p += "  " + s + "\n"
+				}
+			}
+			p += "}\n"
+		case M:
+			p += computeCss(it, k)
+		}
+	}
+	return p
+}

http.go CHANGED Viewed

@@ -20,6 +20,7 @@ import (
 	"time"
 	"github.com/felixge/httpsnoop"
+	"github.com/go-errors/errors"
 	"github.com/go-playground/validator/v10"
 	"github.com/google/uuid"
 	"github.com/gorilla/handlers"
@@ -69,7 +70,6 @@ func init() {
 			PartsExclude: []string{zerolog.TimestampFieldName},
 		})
 	}
-	gsx.RegisterFunc(GetStylesUrl)
 	gsx.RegisterFunc(GetAssetUrl)
 }
@@ -86,9 +86,8 @@ func RespondError(w http.ResponseWriter, status int, err error) {
 	}
 	if status >= 500 {
 		merror["error"] = "Internal Server Error"
-		stack := string(debug.Stack())
+		sterr, _ := err.(*errors.Error)
-		println(stack)
-		log.WithLevel(zerolog.ErrorLevel).Err(err).Bool("panic", status == 599).Str("stack", stack).Stack()
+		log.Error().Msg(err.Error() + "\n" + sterr.ErrorStack())
 	}
 	validationErrors, ok := err.(validator.ValidationErrors)
 	if ok {
@@ -107,15 +106,9 @@ func GetRouteParams(route string) []string {
 	return params
 }
-func PerformRequest(route string, h interface{}, ctx context.Context, w http.ResponseWriter, r *http.Request) {
+func PerformRequest(route string, h interface{}, c *gsx.Context, w http.ResponseWriter, r *http.Request) {
 	params := GetRouteParams(route)
-	renderContext := gsx.NewContext(ctx, r.Header.Get("HX-Request") == "true")
-	renderContext.Set("requestId", uuid.NewString())
-	renderContext.Link("stylesheet", GetStylesUrl(), "", "")
-	renderContext.Link("icon", "/assets/favicon.ico", "image/x-icon", "image")
-	renderContext.Script("/gromer/js/htmx@1.7.0.js", false)
-	renderContext.Script("/gromer/js/alpinejs@3.9.6.js", true)
-	args := []reflect.Value{reflect.ValueOf(renderContext)}
+	args := []reflect.Value{reflect.ValueOf(c)}
 	funcType := reflect.TypeOf(h)
 	icount := funcType.NumIn()
 	vars := mux.Vars(r)
@@ -189,7 +182,7 @@ func PerformRequest(route string, h interface{}, ctx context.Context, w http.Res
 			RespondError(w, 400, fmt.Errorf("Illegal Content-Type tag found %s", contentType))
 			return
 		}
-		renderContext.Set("params", instance.Elem().Interface())
+		c.Set("params", instance.Elem().Interface())
 		args = append(args, instance.Elem())
 	}
 	values := reflect.ValueOf(h).Call(args)
@@ -200,25 +193,18 @@ func PerformRequest(route string, h interface{}, ctx context.Context, w http.Res
 		RespondError(w, responseStatus, responseError.(error))
 		return
 	}
-	if v, ok := response.(*gsx.Node); ok {
-		w.Header().Set("Content-Type", "text/html")
+	w.Header().Set("Content-Type", "text/html")
-		// This has to be at end always
-		w.WriteHeader(responseStatus)
-		v.Write(renderContext, w)
-		return
-	}
-	w.Header().Set("Content-Type", "application/json")
 	// This has to be at end always
 	w.WriteHeader(responseStatus)
-	data, _ := json.Marshal(response)
+	response.(*gsx.Node).Write(c, w)
-	w.Write(data)
 }
 func LogMiddleware(next http.Handler) http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 		defer func() {
 			if err := recover(); err != nil {
+				log.Error().Msgf("%s %d %s %s", r.Method, 599, useragent.Parse(r.UserAgent()).Name, r.URL.Path)
-				RespondError(w, 599, fmt.Errorf("%+v", err))
+				RespondError(w, 599, errors.Errorf(fmt.Sprintf("%+v", err)))
 			}
 		}()
 		m := httpsnoop.CaptureMetrics(next, w, r)
@@ -226,10 +212,7 @@ func LogMiddleware(next http.Handler) http.Handler {
 		if len(ip) > 0 && ip[0] == '[' {
 			ip = ip[1 : len(ip)-1]
 		}
-		log.WithLevel(zerolog.InfoLevel).Msgf("%s %d %.2fkb %s %s %s", r.Method,
+		log.Info().Msgf("%s %d %.2fkb %s %s %s", r.Method, m.Code, float64(m.Written)/1024.0, m.Duration.Round(time.Millisecond).String(),
-			m.Code,
-			float64(m.Written)/1024.0,
-			m.Duration.Round(time.Millisecond).String(),
 			useragent.Parse(r.UserAgent()).Name,
 			r.URL.Path,
 		)
@@ -273,16 +256,33 @@ func StaticRoute(router *mux.Router, path string, fs embed.FS) {
 func StylesRoute(router *mux.Router, path string) {
 	router.Path(path).Methods("GET").HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		err := r.ParseForm()
+		if err != nil {
+			RespondError(w, 400, err)
+			return
+		}
+		key := r.Form.Get("key")
 		w.Header().Set("Content-Type", "text/css")
 		w.WriteHeader(200)
-		w.Write([]byte(gsx.GetStyles()))
+		w.Write([]byte(gsx.GetStyles(key)))
 	})
 }
-func Handle(router *mux.Router, method, route string, h interface{}) {
+func Handle(router *mux.Router, method, route string, h interface{}, meta, styles gsx.M) {
+	key := getSum(route, func() [16]byte {
+		return md5.Sum([]byte(route))
+	})
+	gsx.SetClasses(key, styles)
 	router.HandleFunc(route, func(w http.ResponseWriter, r *http.Request) {
-		ctx := context.WithValue(context.WithValue(r.Context(), "url", r.URL), "header", r.Header)
+		newCtx := context.WithValue(context.WithValue(r.Context(), "url", r.URL), "header", r.Header)
+		c := gsx.NewContext(newCtx, r.Header.Get("HX-Request") == "true")
+		c.Set("requestId", uuid.NewString())
+		c.Link("stylesheet", GetStylesUrl(key), "", "")
+		c.Link("icon", "/assets/favicon.ico", "image/x-icon", "image")
+		c.Script("/gromer/js/htmx@1.7.0.js", false)
+		c.Script("/gromer/js/alpinejs@3.9.6.js", true)
+		c.Meta(meta)
-		PerformRequest(route, h, ctx, w, r)
+		PerformRequest(route, h, c, w, r)
 	}).Methods(method, "OPTIONS")
 }
@@ -316,9 +316,9 @@ func GetAssetUrl(fs embed.FS, path string) string {
 	return fmt.Sprintf("/assets/%s?hash=%s", path, sum)
 }
-func GetStylesUrl() string {
+func GetStylesUrl(k string) string {
 	sum := getSum("styles.css", func() [16]byte {
-		return md5.Sum([]byte(gsx.GetStyles()))
+		return md5.Sum([]byte(gsx.GetStyles(k)))
 	})
-	return fmt.Sprintf("/styles.css?hash=%s", sum)
+	return fmt.Sprintf("/styles.css?key=%s&hash=%s", k, sum)
 }

utils.go CHANGED Viewed

@@ -11,10 +11,6 @@ import (
 	"github.com/segmentio/go-camelcase"
 )
-type M map[string]interface{}
-type MS map[string]string
-type Arr []interface{}
 var Validator = validator.New()
 var ValidatorErrorMap = map[string]string{
 	"required": "is required",

~repos /gromer

git clone https://pyrossh.dev/repos/gromer.git

gromer is a framework and cli to build multipage web apps in golang using htmx and alpinejs.