gromer

#golang#htmx#ssr

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

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

d4e61a5 — pyros2097 2021-01-05T21:36:45+05:30 
improv ex
Files changed (11) hide show
  1. attributes.go +12 -0
  2. example/about.go +10 -6
  3. example/assets/config.css +9 -1
  4. example/assets/icon2.png +0 -0
  5. example/clock.go +6 -4
  6. example/components/header.go +21 -0
  7. example/container.go +7 -5
  8. example/index.go +17 -13
  9. example/main.go +12 -0
  10. example/makefile +5 -2
  11. html.go +6 -0
attributes.go CHANGED
@@ -67,6 +67,18 @@ func Y(v string) Attribute {
67
67
  return Attribute{"y", v}
68
68
  }
69
69
 
70
+ func Href(v string) Attribute {
71
+ return Attribute{"href", v}
72
+ }
73
+
74
+ func Target(v string) Attribute {
75
+ return Attribute{"target", v}
76
+ }
77
+
78
+ func Rel(v string) Attribute {
79
+ return Attribute{"rel", v}
80
+ }
81
+
70
82
  type CssAttribute struct {
71
83
  classes string
72
84
  }
example/about.go CHANGED
@@ -2,14 +2,18 @@ package main
2
2
 
3
3
  import (
4
4
  . "github.com/pyros2097/wapp"
5
+ . "github.com/pyros2097/wapp/example/components"
5
6
  )
6
7
 
7
8
  func About(c *RenderContext) UI {
8
- return Div(
9
+ return Col(
10
+ Header(c),
11
+ Row(Css("text-5xl text-gray-700"),
9
- HelmetTitle("wapp-example"),
12
+ HelmetTitle("wapp-example"),
10
- HelmetDescription("wapp is a framework"),
13
+ HelmetDescription("wapp is a framework"),
11
- HelmetAuthor("pyros2097"),
14
+ HelmetAuthor("pyros2097"),
12
- HelmetKeywords("wapp,wapp-example,golang,framework,frontend,ui,wasm,isomorphic"),
15
+ HelmetKeywords("wapp,wapp-example,golang,framework,frontend,ui,wasm,isomorphic"),
13
- Text("About Me"),
16
+ Text("About Me"),
17
+ ),
14
18
  )
15
19
  }
example/assets/config.css CHANGED
@@ -1,3 +1,11 @@
1
1
  @tailwind base;
2
2
  @tailwind components;
3
- @tailwind utilities;
3
+ @tailwind utilities;
4
+
5
+ .btn {
6
+ @apply bg-gray-300 text-gray-700 rounded hover:bg-gray-200 px-4 py-2 focus:outline-none m-20
7
+ }
8
+
9
+ .link {
10
+ @apply border-b-2 border-white hover:border-red-700 mr-4
11
+ }
example/assets/icon2.png ADDED
Binary file
example/clock.go CHANGED
@@ -4,6 +4,7 @@ import (
4
4
  "time"
5
5
 
6
6
  . "github.com/pyros2097/wapp"
7
+ . "github.com/pyros2097/wapp/example/components"
7
8
  )
8
9
 
9
10
  func Clock(c *RenderContext) UI {
@@ -26,9 +27,10 @@ func Clock(c *RenderContext) UI {
26
27
  return stopTimer
27
28
  })
28
29
 
30
+ return Col(Css("text-3xl text-gray-700"),
29
- return Col(
31
+ Header(c),
30
32
  Row(
31
- Div(Css("text-6xl"),
33
+ Div(Css("underline"),
32
34
  Text("Clock"),
33
35
  ),
34
36
  ),
@@ -38,10 +40,10 @@ func Clock(c *RenderContext) UI {
38
40
  ),
39
41
  ),
40
42
  Row(
41
- Div(Css("text-6xl m-20 cursor-pointer select-none"), OnClick(startTimer),
43
+ Button(Css("btn m-20"), OnClick(startTimer),
42
44
  Text("Start"),
43
45
  ),
44
- Div(Css("text-6xl m-20 cursor-pointer select-none"), OnClick(stopTimer),
46
+ Button(Css("btn m-20"), OnClick(stopTimer),
45
47
  Text("Stop"),
46
48
  ),
47
49
  ),
example/components/header.go ADDED
@@ -0,0 +1,21 @@
1
+ package components
2
+
3
+ import (
4
+ . "github.com/pyros2097/wapp"
5
+ )
6
+
7
+ func Header(c *RenderContext) UI {
8
+ return Row(Css("w-full mb-20 font-bold text-xl text-gray-700 p-4"),
9
+ Div(Css("text-blue-700"),
10
+ A(Href("https://wapp.pyros2097.dev"), Text("wapp.pyros2097.dev")),
11
+ ),
12
+ Div(Css("flex flex-row flex-1 justify-end items-end p-2"),
13
+ Div(Css("border-b-2 border-white text-lg text-blue-700 mr-4"), Text("Examples: ")),
14
+ Div(Css("link mr-4"), A(Href("/"), Text("Home"))),
15
+ Div(Css("link mr-4"), A(Href("/clock"), Text("Clock"))),
16
+ Div(Css("link mr-4"), A(Href("/about"), Text("About"))),
17
+ Div(Css("link mr-4"), A(Href("/container"), Text("Container"))),
18
+ Div(Css("link mr-4"), A(Href("/panic"), Text("Panic"))),
19
+ ),
20
+ )
21
+ }
example/container.go CHANGED
@@ -5,24 +5,25 @@ import (
5
5
 
6
6
  . "github.com/pyros2097/wapp"
7
7
  . "github.com/pyros2097/wapp/example/atoms"
8
+ . "github.com/pyros2097/wapp/example/components"
8
9
  )
9
10
 
10
11
  func AtomCounter(c *RenderContext, no string) UI {
11
12
  count := c.UseAtom(CountAtom)
12
- return Col(
13
+ return Col(Css("text-3xl text-gray-700"),
13
14
  Row(
14
- Row(Css("text-2xl"),
15
+ Row(Css("underline"),
15
16
  Text("Counter - "+no),
16
17
  ),
17
18
  ),
18
19
  Row(
19
- Row(Css("text-2xl m-20 cursor-pointer select-none"), OnClick(DecCount),
20
+ Button(Css("btn m-20"), OnClick(DecCount),
20
21
  Text("-"),
21
22
  ),
22
- Row(Css("text-2xl m-20"),
23
+ Row(Css("m-20"),
23
24
  Text(strconv.Itoa(count.(int))),
24
25
  ),
25
- Row(Css("text-2xl m-20 cursor-pointer select-none"), OnClick(IncCount),
26
+ Button(Css("btn m-20"), OnClick(IncCount),
26
27
  Text("+"),
27
28
  ),
28
29
  ),
@@ -31,6 +32,7 @@ func AtomCounter(c *RenderContext, no string) UI {
31
32
 
32
33
  func Container(c *RenderContext) UI {
33
34
  return Col(
35
+ Header(c),
34
36
  AtomCounter(c, "1"),
35
37
  AtomCounter(c, "2"),
36
38
  AtomCounter(c, "3"),
example/index.go CHANGED
@@ -4,6 +4,7 @@ import (
4
4
  "strconv"
5
5
 
6
6
  . "github.com/pyros2097/wapp"
7
+ . "github.com/pyros2097/wapp/example/components"
7
8
  )
8
9
 
9
10
  func Index(c *RenderContext) UI {
@@ -11,20 +12,23 @@ func Index(c *RenderContext) UI {
11
12
  inc := func() { setCount(count() + 1) }
12
13
  dec := func() { setCount(count() - 1) }
13
14
  return Col(
15
+ Header(c),
16
+ Col(Css("text-3xl text-gray-700"),
14
- Row(
17
+ Row(
15
- Row(Css("text-6xl"),
18
+ Row(Css("underline"),
16
- Text("Counter"),
19
+ Text("Counter"),
20
+ ),
17
21
  ),
22
+ Row(
23
+ Button(Css("btn m-20"), OnClick(dec),
24
+ Text("-"),
18
- ),
25
+ ),
19
- Row(
20
- Row(Css("text-6xl m-20 cursor-pointer select-none"), OnClick(dec),
21
- Text("-"),
26
+ Row(Css("m-20"),
27
+ Text(strconv.Itoa(count())),
22
- ),
28
+ ),
23
- Row(Css("text-6xl m-20"),
29
+ Button(Css("btn m-20"), OnClick(inc),
24
- Text(strconv.Itoa(count())),
30
+ Text("+"),
25
- ),
31
+ ),
26
- Row(Css("text-6xl m-20 cursor-pointer select-none"), OnClick(inc),
27
- Text("+"),
28
32
  ),
29
33
  ),
30
34
  )
example/main.go CHANGED
@@ -2,9 +2,21 @@ package main
2
2
 
3
3
  import (
4
4
  . "github.com/pyros2097/wapp"
5
+ . "github.com/pyros2097/wapp/example/components"
5
6
  )
6
7
 
7
8
  func main() {
9
+ AppRouter.Error = func(c *RenderContext, err error) UI {
10
+ return Col(Css("text-4xl text-gray-700"),
11
+ Header(c),
12
+ Row(
13
+ Text("Oops something went wrong"),
14
+ ),
15
+ Row(Css("mt-6"),
16
+ Text("Please check back again"),
17
+ ),
18
+ )
19
+ }
8
20
  Route("/panic", Panic)
9
21
  Route("/about", About)
10
22
  Route("/clock", Clock)
example/makefile CHANGED
@@ -13,9 +13,12 @@ deploy: export NODE_ENV=production
13
13
  deploy:
14
14
  npx tailwindcss-cli@latest build assets/config.css -o assets/styles.css
15
15
  go build -o main
16
- make wasm
17
16
  sam deploy
17
+ make wasm
18
- aws s3 sync ./assets s3://wapp.pyros2097.dev/assets --delete
18
+ aws s3 sync ./assets s3://wapp.pyros2097.dev/assets --delete --exclude main.wasm
19
+ brotli -Z -j assets/main.wasm
20
+ mv assets/main.wasm.br assets/main.wasm
21
+ aws s3 cp assets/main.wasm s3://wapp.pyros2097.dev/assets/main.wasm --content-encoding br --content-type application/wasm
19
22
  aws cloudfront create-invalidation --distribution-id E17XVZYYZ1JXEU --paths "/*"
20
23
 
21
24
  local:
html.go CHANGED
@@ -56,6 +56,12 @@ func Div(uis ...interface{}) *Element {
56
56
  return e
57
57
  }
58
58
 
59
+ func A(uis ...interface{}) *Element {
60
+ e := &Element{tag: "a"}
61
+ mergeAttributes(e, uis...)
62
+ return e
63
+ }
64
+
59
65
  func Input(uis ...interface{}) *Element {
60
66
  e := &Element{tag: "input"}
61
67
  mergeAttributes(e, uis...)