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.

24e0ccde — Peter John

implement example

Files changed (11) hide show

_example/assets/icons/checked.svg +5 -0
_example/assets/icons/close.svg +1 -0
_example/assets/icons/list.svg +1 -0
_example/assets/icons/unchecked.svg +4 -0
_example/components/todo.go +23 -7
_example/containers/TodoList.go +5 -1
_example/main.go +6 -5
_example/routes/get.go +21 -12
gsx/gsx.go +27 -11
gsx/twx.go +156 -98
http.go +37 -18

_example/assets/icons/checked.svg ADDED Viewed

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512" fill="rgba(16,185,129,1)">
+  <title>Checkmark Circle</title>
+  <path
+    d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm108.25 138.29l-134.4 160a16 16 0 01-12 5.71h-.27a16 16 0 01-11.89-5.3l-57.6-64a16 16 0 1123.78-21.4l45.29 50.32 122.59-145.91a16 16 0 0124.5 20.58z" />
+</svg>

_example/assets/icons/close.svg ADDED Viewed

	@@ -0,0 +1 @@
1	+ <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Close</title><path d="M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z"/></svg>

_example/assets/icons/list.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>List</title><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M160 144h288M160 256h288M160 368h288"/><circle cx="80" cy="144" r="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><circle cx="80" cy="256" r="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><circle cx="80" cy="368" r="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>

_example/assets/icons/unchecked.svg ADDED Viewed

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512" fill="rgba(156,163,175,1)">
+  <title>Ellipse</title>
+  <path d="M256 464c-114.69 0-208-93.31-208-208S141.31 48 256 48s208 93.31 208 208-93.31 208-208 208z" />
+</svg>

_example/components/todo.go CHANGED Viewed

@@ -5,22 +5,38 @@ import (
 	. "github.com/pyros2097/gromer/gsx"
 )
+var TodoStyles = M{
+	"container": "border-t-2 border-gray-100 text-2xl",
+	"row":       "flex flex-row group",
+	"button-1":  "ml-4 text-gray-400",
+	"label":     "flex-1 min-w-0 flex items-center break-all ml-2 p-2 text-gray-800",
+	"striked":   "text-gray-500 line-through",
+	"button-2":  "mr-4 text-red-700 c-0 group-hover:opacity-100",
+	"unchecked": "text-gray-200",
+}
 func Todo(c *Context, todo *todos.Todo) *Node {
 	return c.Render(`
-		<li id="todo-{todo.ID}" class="{ completed: todo.Completed }">
+		<div id="todo-{todo.ID}" class="todo">
-			<div class="view">
+			<div class="row">
-				<form  hx-target="#todo-{todo.ID}" hx-swap="outerHTML">
+				<form hx-post="/" hx-target="#todo-{todo.ID}" hx-swap="outerHTML">
 					<input type="hidden" name="intent" value="complete" />
 					<input type="hidden" name="id" value="{todo.ID}" />
+					<button class="button-1">
-					<input class="checkbox" type="checkbox" checked="{value}" />
+						<img src="{ /assets/icons/unchecked.svg: !todo.Completed, /assets/icons/checked.svg: todo.Completed }" width="24" height="24" />
+					</button>
 				</form>
+				<label class="{ label: true, striked: todo.Completed }">
+					{todo.Text}
-				<label>{todo.Text}</label>
+				</label>
 				<form hx-post="/" hx-target="#todo-{todo.ID}" hx-swap="delete">
 					<input type="hidden" name="intent" value="delete" />
 					<input type="hidden" name="id" value="{todo.ID}" />
-					<button class="destroy"></button>
+					<button class="button-2">
+						<img src="/assets/icons/close.svg" width="24" height="24" />
+					</button>
 				</form>
 			</div>
-		</li>
+		</div>
 	`)
 }

_example/containers/TodoList.go CHANGED Viewed

@@ -6,6 +6,10 @@ import (
 	. "github.com/pyros2097/gromer/gsx"
 )
+var TodoListStyles = M{
+	"container": "list-none",
+}
 func TodoList(c *Context, page int, filter string) *Node {
 	index := Default(page, 1)
 	todos, err := todos.GetAllTodo(c, todos.GetAllTodoParams{
@@ -17,7 +21,7 @@ func TodoList(c *Context, page int, filter string) *Node {
 	}
 	c.Set("todos", todos)
 	return c.Render(`
-		<ul id="todo-list" class="relative" x-for="todo in todos">
+		<ul id="todo-list" class="todolist" x-for="todo in todos">
 			<Todo />
 		</ul>
 	`)

_example/main.go CHANGED Viewed

@@ -19,10 +19,10 @@ import (
 )
 func init() {
-	gsx.RegisterComponent(components.Todo, "todo")
+	gsx.RegisterComponent(components.Todo, components.TodoStyles, "todo")
-	gsx.RegisterComponent(components.Checkbox, "value")
+	gsx.RegisterComponent(components.Checkbox, nil, "value")
-	gsx.RegisterComponent(containers.TodoCount, "filter")
+	gsx.RegisterComponent(containers.TodoCount, nil, "filter")
-	gsx.RegisterComponent(containers.TodoList, "page", "filter")
+	gsx.RegisterComponent(containers.TodoList, containers.TodoListStyles, "page", "filter")
 }
 func main() {
@@ -35,7 +35,8 @@ func main() {
 	staticRouter.Use(gromer.CompressMiddleware)
 	gromer.StaticRoute(staticRouter, "/gromer/", gromer_assets.FS)
 	gromer.StaticRoute(staticRouter, "/assets/", assets.FS)
-	gromer.StylesRoute(staticRouter, "/styles.css")
+	gromer.PageStylesRoute(staticRouter, "/styles.css")
+	gromer.ComponentStylesRoute(staticRouter, "/components.css")
 	pageRouter := baseRouter.NewRoute().Subrouter()
 	gromer.Handle(pageRouter, "GET", "/", routes.GET, routes.Meta, routes.Styles)

_example/routes/get.go CHANGED Viewed

@@ -14,10 +14,16 @@ var (
 	}
 	Styles = M{
-		"container":       "bg-gray-50 min-h-screen font-sans",
+		"bg":        "bg-gray-50 min-h-screen font-sans",
-		"todos-container": "container mx-auto flex flex-col items-center",
+		"container": "container mx-auto flex flex-col items-center",
-		"title":           "text-opacity-20 text-red-900 text-8xl text-center",
+		"title":     "text-opacity-20 text-red-900 text-8xl text-center",
+		"main": M{
-		"main":            "mt-8 shadow-xl w-full max-w-prose bg-white",
+			"container":  "mt-8 shadow-xl w-full max-w-prose bg-white",
+			"input-box":  "flex flex-row text-2xl h-16",
+			"button":     "ml-4 w-8 disabled",
+			"input-form": "flex flex-1",
+			"input":      "flex-1 min-w-0 p-2 placeholder:text-gray-300",
+		},
 		"bottom": M{
 			"container": "flex flex-row items-center flex-wrap sm:flex-nowrap p-2 font-light border-t-2 border-gray-100",
 			"row":       "flex-1 flex flex-row",
@@ -44,18 +50,21 @@ type GetParams struct {
 func GET(c *Context, params GetParams) (*Node, int, error) {
 	return c.Render(`
+		<div class="bg">
-		<div class="container">
+			<div class="container">
-			<div class="todos-container">
 				<header>
 					<h1 class="title">todos</h1>
-					<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 class="new-todo" id="text" name="text" placeholder="What needs to be done?" autofocus="false" autocomplete="off" />
-					</form>
 				</header>
 				<main class="main">
+					<div class="input-box">
+						<button class="button">
+							<img src="/assets/icons/list.svg" width="24" height="24" />
+						</button>
+						<form class="input-form" hx-post="/" hx-target="#todo-list" hx-swap="afterbegin" _="on htmx:afterOnLoad set #text.value to ''">
-					<input class="toggle-all" id="toggle-all" type="checkbox" />
+							<input type="hidden" name="intent" value="create" />
-					<label for="toggle-all">Mark all as complete</label>
+							<input id="text" name="text" class="input" placeholder="What needs to be done?" autofocus="false" autocomplete="off">
+						</form>
+					</div>
 					<TodoList id="todo-list" page="{params.Page}" filter="{params.Filter}"></TodoList>
 					<div class="bottom">
 						<div class="section-1">

gsx/gsx.go CHANGED Viewed

@@ -33,8 +33,9 @@ type (
 	MS            map[string]string
 	Arr           []interface{}
 	ComponentFunc struct {
-		Func interface{}
+		Func    interface{}
-		Args []string
+		Args    []string
+		Classes M
 	}
 	link struct {
 		Rel  string
@@ -161,16 +162,27 @@ func SetClasses(k string, m M) {
 	classesMap[k] = m
 }
-func GetStyles(k string) string {
+func GetPageStyles(k string) string {
 	return normalizeCss + "\n" + computeCss(classesMap[k], k)
 }
+func GetComponentStyles() string {
+	css := ""
+	for k, v := range compMap {
+		if v.Classes != nil {
+			css += computeCss(v.Classes, k)
+		}
+	}
+	return css
+}
-func RegisterComponent(f interface{}, args ...string) {
+func RegisterComponent(f interface{}, classes M, args ...string) {
 	name := strings.ToLower(getFunctionName(f))
 	assertName("component", name)
 	compMap[name] = ComponentFunc{
-		Func: f,
+		Func:    f,
-		Args: args,
+		Args:    args,
+		Classes: classes,
 	}
 }
@@ -212,7 +224,11 @@ func convert(ref string, i interface{}) interface{} {
 }
 func getRefValue(c *Context, ref string) interface{} {
+	if ref == "true" {
+		return true
+	} else if ref == "false" {
+		return false
-	if f, ok := funcMap[ref]; ok {
+	} else if f, ok := funcMap[ref]; ok {
 		return f.(func() string)()
 	} else {
 		parts := strings.Split(strings.ReplaceAll(ref, "!", ""), ".")
@@ -343,8 +359,8 @@ func populate(c *Context, n *html.Node) {
 					}
 				}
 			} else if at.Val != "" && strings.Contains(at.Val, "{") {
-				if at.Key == "class" {
+				if at.Key == "class" || at.Key == "src" {
-					classes := ""
+					classes := []string{}
 					kvstrings := strings.Split(strings.TrimSpace(removeBrackets(at.Val)), ",")
 					for _, kv := range kvstrings {
 						kvarray := strings.Split(kv, ":")
@@ -352,13 +368,13 @@ func populate(c *Context, n *html.Node) {
 						v := strings.TrimSpace(kvarray[1])
 						varValue := getRefValue(c, v)
 						if varValue.(bool) {
-							classes += k
+							classes = append(classes, k)
 						}
 					}
 					n.Attr[i] = html.Attribute{
 						Namespace: at.Namespace,
 						Key:       at.Key,
-						Val:       classes,
+						Val:       strings.Join(classes, " "),
 					}
 				} else {
 					n.Attr[i] = html.Attribute{

gsx/twx.go CHANGED Viewed

@@ -238,77 +238,96 @@ var sizes = KeyValues{
 		"left":   "left",
 		"bottom": "bottom",
 		"right":  "right",
-		"minh":   "min-height",
+		"min-h":  "min-height",
-		"minw":   "min-width",
+		"min-w":  "min-width",
-		"maxh":   "max-height",
+		"max-h":  "max-height",
-		"maxw":   "max-width",
+		"max-w":  "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%",
+		"auto":       "auto",
+		"min":        "min-content",
+		"max":        "max-content",
+		"fit":        "fit-content",
+		"0":          "0px",
+		"0.5":        "0.125rem",
+		"1":          "0.25rem",
+		"1.5":        "0.375rem",
+		"2":          "0.5rem",
+		"2.5":        "0.625rem",
+		"3":          "0.75rem",
+		"3.5":        "0.875rem",
+		"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",
+		"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%",
+		"none":       "none",
+		"xs":         "20rem",
+		"sm":         "24rem",
+		"md":         "28rem",
+		"lg":         "32rem",
+		"xl":         "36rem",
+		"2xl":        "42rem",
+		"3xl":        "48rem",
+		"4xl":        "56rem",
+		"5xl":        "64rem",
+		"6xl":        "72rem",
+		"7xl":        "80rem",
+		"prose":      "65ch",
+		"screen-sm":  "640px",
+		"screen-md":  "768px",
+		"screen-lg":  "1024px",
+		"screen-xl":  "1280px",
+		"screen-2xl": "1536px",
 	},
 }
@@ -443,6 +462,27 @@ var twClassLookup = MS{
 	"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);",
+	"invisible":           "visibility: hidden;",
+	"opacity-0":           "opacity: 0;",
+	"opacity-5":           "opacity: 0.05;",
+	"opacity-10":          "opacity: 0.1;",
+	"opacity-20":          "opacity: 0.2;",
+	"opacity-25":          "opacity: 0.25;",
+	"opacity-30":          "opacity: 0.3;",
+	"opacity-40":          "opacity: 0.4;",
+	"opacity-50":          "opacity: 0.5;",
+	"opacity-60":          "opacity: 0.6;",
+	"opacity-70":          "opacity: 0.7;",
+	"opacity-75":          "opacity: 0.75;",
+	"opacity-80":          "opacity: 0.8;",
+	"opacity-90":          "opacity: 0.9;",
+	"opacity-95":          "opacity: 0.95;",
+	"opacity-100":         "opacity: 1;",
+	"list-none":           "list-style-type: none;",
+	"list-disc":           "list-style-type: disc;",
+	"list-decimal":        "list-style-type: decimal;",
+	"min-h-screen":        "height: 100vh;",
+	"min-w-screen":        "width: 100vw;",
 }
 func init() {
@@ -474,6 +514,50 @@ func mapApply(obj KeyValues) {
 	}
 }
+func getClassName(parent, k string) string {
+	if parent != "" {
+		if k == "container" {
+			return "." + parent
+		} else {
+			return "." + parent + " ." + k
+		}
+	}
+	return "." + k
+}
+func computeCss(classMap M, parent string) string {
+	p := "\n"
+	for k, v := range classMap {
+		switch it := v.(type) {
+		case string:
+			p += getClassName(parent, k)
+			p += " {\n"
+			classes := strings.Split(it, " ")
+			for _, c := range classes {
+				if s, ok := twClassLookup[c]; ok {
+					p += "  " + s + "\n"
+				}
+			}
+			p += "}\n"
+			for _, c := range classes {
+				if strings.Contains(c, ":") {
+					arr := strings.Split(c, ":")
+					if arr[0] == "placeholder" {
+						p += "\n" + getClassName(parent, k) + "::placeholder" + " {\n"
+						if s, ok := twClassLookup[arr[1]]; ok {
+							p += "  " + s + "\n"
+						}
+						p += "}\n"
+					}
+				}
+			}
+		case M:
+			p += computeCss(it, k)
+		}
+	}
+	return p
+}
 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'; }
@@ -521,32 +605,6 @@ pre, code, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco,
 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)); }`
+*, ::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 {
+form { display: flex; }
-		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

@@ -6,7 +6,6 @@ import (
 	"embed"
 	"encoding/json"
 	"fmt"
-	"net"
 	"net/http"
 	"net/url"
 	"os"
@@ -29,6 +28,7 @@ import (
 	"github.com/rs/zerolog"
 	"github.com/rs/zerolog/log"
 	"github.com/rs/zerolog/pkgerrors"
+	"github.com/segmentio/go-camelcase"
 	"xojoc.pw/useragent"
 )
@@ -201,20 +201,25 @@ func PerformRequest(route string, h interface{}, c *gsx.Context, w http.Response
 func LogMiddleware(next http.Handler) http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		url := r.URL.Path
+		if r.URL.RawQuery != "" {
+			url += "?" + r.URL.RawQuery
+		}
+		// ip, _, _ := net.SplitHostPort(r.RemoteAddr)
+		// if len(ip) > 0 && ip[0] == '[' {
+		// 	ip = ip[1 : len(ip)-1]
+		// }
+		ua := useragent.Parse(r.UserAgent()).Name
 		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)
+				log.Error().Msgf("%s 599 %s %s", r.Method, ua, url)
 				RespondError(w, 599, errors.Errorf(fmt.Sprintf("%+v", err)))
 			}
 		}()
 		m := httpsnoop.CaptureMetrics(next, w, r)
-		ip, _, _ := net.SplitHostPort(r.RemoteAddr)
-		if len(ip) > 0 && ip[0] == '[' {
-			ip = ip[1 : len(ip)-1]
-		}
 		log.Info().Msgf("%s %d %.2fkb %s %s %s", r.Method, m.Code, float64(m.Written)/1024.0, m.Duration.Round(time.Millisecond).String(),
-			useragent.Parse(r.UserAgent()).Name,
-			r.URL.Path,
+			ua,
+			url,
 		)
 	})
 }
@@ -254,8 +259,8 @@ func StaticRoute(router *mux.Router, path string, fs embed.FS) {
 	router.PathPrefix(path).Methods("GET").Handler(http.StripPrefix(path, http.FileServer(http.FS(fs))))
 }
-func StylesRoute(router *mux.Router, path string) {
+func PageStylesRoute(router *mux.Router, route string) {
-	router.Path(path).Methods("GET").HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+	router.Path(route).Methods("GET").HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 		err := r.ParseForm()
 		if err != nil {
 			RespondError(w, 400, err)
@@ -264,26 +269,33 @@ func StylesRoute(router *mux.Router, path string) {
 		key := r.Form.Get("key")
 		w.Header().Set("Content-Type", "text/css")
 		w.WriteHeader(200)
-		w.Write([]byte(gsx.GetStyles(key)))
+		w.Write([]byte(gsx.GetPageStyles(key)))
 	})
 }
-func Handle(router *mux.Router, method, route string, h interface{}, meta, styles gsx.M) {
+func ComponentStylesRoute(router *mux.Router, route string) {
+	router.Path(route).Methods("GET").HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-	key := getSum(route, func() [16]byte {
+		w.Header().Set("Content-Type", "text/css")
+		w.WriteHeader(200)
-		return md5.Sum([]byte(route))
+		w.Write([]byte(gsx.GetComponentStyles()))
 	})
+}
+func Handle(router *mux.Router, method, route string, h interface{}, meta, styles gsx.M) {
+	key := camelcase.Camelcase(route)
 	gsx.SetClasses(key, styles)
 	router.HandleFunc(route, func(w http.ResponseWriter, r *http.Request) {
 		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("stylesheet", GetPageStylesUrl(key), "", "")
+		c.Link("stylesheet", GetComponentsStylesUrl(), "", "")
 		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, c, w, r)
-	}).Methods(method, "OPTIONS")
+	}).Methods(method)
 }
 func GetUrl(ctx context.Context) *url.URL {
@@ -316,9 +328,16 @@ func GetAssetUrl(fs embed.FS, path string) string {
 	return fmt.Sprintf("/assets/%s?hash=%s", path, sum)
 }
-func GetStylesUrl(k string) string {
+func GetPageStylesUrl(k string) string {
 	sum := getSum("styles.css", func() [16]byte {
-		return md5.Sum([]byte(gsx.GetStyles(k)))
+		return md5.Sum([]byte(gsx.GetPageStyles(k)))
 	})
 	return fmt.Sprintf("/styles.css?key=%s&hash=%s", k, sum)
 }
+func GetComponentsStylesUrl() string {
+	sum := getSum("components.css", func() [16]byte {
+		return md5.Sum([]byte(gsx.GetComponentStyles()))
+	})
+	return fmt.Sprintf("/components.css?hash=%s", sum)
+}

~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.