En cours de développement

internal/components/components.go

@@ -52,6 +52,7 @@ type Model interface {
 type Router interface {
 	Handler() http.Handler
 	Get(path string, handler http.Handler)
+	ServeFiles(path string, root http.FileSystem)
 	GetJSON(path string, handler jsonapi.Handler)
 	PostJSON(path string, handler jsonapi.Handler)
 }

internal/gui/gui.go

@@ -1,6 +1,6 @@
 /*
 ------------------------------------------------------------------------------------------------------------------------
-####### gui ####### Copyright (c) 2021 mls-361 #########g############################################ MIT License #######
+####### gui ####### Copyright (c) 2021 mls-361 ##################################################### MIT License #######
 ------------------------------------------------------------------------------------------------------------------------
 */
 
@@ -29,6 +29,8 @@ func Build(ccs *components.Components) {
 	router.Get("/", http.HandlerFunc(func(w http.ResponseWriter, _ *http.Request) {
 		_ = gui.Home().Render(w)
 	}))
+
+	router.ServeFiles("/static/*filepath", http.Dir("static"))
 }
 
 /*

internal/gui/home.go

@@ -12,10 +12,29 @@ import (
 )
 
 func (gui *gui) Home() g.Node {
-	return gui.page(
+	return page(
 		"home",
-		P(
-			g.Text("Hello"),
+		"workflows",
+		Div(
+			Class("dashboard"),
+			Div(
+				Class("total panel"),
+				P(
+					Class("value"),
+					g.Text("57"),
+				),
+				P(
+					g.Text("total"),
+				),
+			),
+			Div(
+				Class("failed panel"),
+				g.Text("failed"),
+			),
+			Div(
+				Class("running panel"),
+				g.Text("running"),
+			),
 		),
 	)
 }

internal/gui/layout.go

@@ -8,22 +8,35 @@ package gui
 
 import (
 	g "github.com/maragudk/gomponents"
-	c "github.com/maragudk/gomponents/components"
 	. "github.com/maragudk/gomponents/html"
 )
 
-func (gui *gui) page(title string, content g.Node) g.Node {
-	return c.HTML5(
-		c.HTML5Props{
-			Title:    title,
-			Language: "en",
-			Head: []g.Node{
-				Link(Rel("stylesheet"), Href("https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"), Type("text/css")),
-			},
-			Body: []g.Node{
-				content,
-			},
-		},
+func container(nodes ...g.Node) g.Node {
+	return Div(
+		Class("container"),
+		g.Group(nodes),
+	)
+}
+
+func page(title, class string, content g.Node) g.Node {
+	return Doctype(
+		HTML(
+			Lang("en"),
+			Head(
+				Meta(Charset("utf-8")),
+				Meta(Name("viewport"), Content("width=device-width, initial-scale=1")),
+				TitleEl(g.Text(title)),
+				Link(Rel("stylesheet"), Href("/static/css/app.css"), Type("text/css")),
+			),
+			Body(
+				container(
+					Main(
+						Class(class),
+						content,
+					),
+				),
+			),
+		),
 	)
 }
 

internal/router/router.go

@@ -64,6 +64,11 @@ func (cr *router) Get(path string, handler http.Handler) {
 	cr.mux.Handler(http.MethodGet, path, handler)
 }
 
+// ServeFiles AFAIRE.
+func (cr *router) ServeFiles(path string, root http.FileSystem) {
+	cr.mux.ServeFiles(path, root)
+}
+
 func (cr *router) handleJSON(method string, path string, handler jsonapi.Handler) {
 	cr.mux.Handle(
 		method,

static/css/app.css

@@ -0,0 +1,68 @@
+/*
+------------------------------------------------------------------------------------------------------------------------
+####### css ####### Copyright (c) 2021 mls-361 ##################################################### MIT License #######
+------------------------------------------------------------------------------------------------------------------------
+*/
+
+@charset "utf-8";
+
+@import url("normalize.css");
+@import url("variables.css");
+
+html, body {
+    color: var(--color);
+    background-color: var(--bg-color);
+}
+
+.container {
+    max-width: 80rem;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+
+main {
+    margin-top: 2rem;
+}
+
+.dashboard {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.panel {
+    margin: 5px;
+    min-width: 21rem;
+    min-height: 20rem;
+    text-align: center;
+    font-size: 1.5rem;
+    color: black;
+}
+
+.panel > p {
+}
+
+.total {
+    background-color: #0277bd;
+}
+
+.failed {
+    background-color: #f24c4c;
+}
+
+.running {
+    background-color: #28c2d1;
+}
+
+p.value {
+    font-size: 4rem;
+    font-weight: bold;
+}
+
+/*
+######################################################################################################## @(°_°)@ #######
+*/
+

static/css/normalize.css

@@ -0,0 +1,10 @@
+/**
+ * Minified by jsDelivr using clean-css v4.2.3.
+ * Original file: /npm/modern-normalize@1.1.0/modern-normalize.css
+ *
+ * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
+ */
+/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
+*,::after,::before{box-sizing:border-box}html{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{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]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{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:-.25em}sup{top:-.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}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-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}
+/*# sourceMappingURL=/sm/b8ae781793ee4eb86edef3f2a2ac43a5575d063ed8cd287d7553f9f1b2776616.map */
+

static/css/variables.css

@@ -0,0 +1,15 @@
+/*
+------------------------------------------------------------------------------------------------------------------------
+####### css ####### Copyright (c) 2021 mls-361 ##################################################### MIT License #######
+------------------------------------------------------------------------------------------------------------------------
+*/
+
+:root {
+    --color: #ffffff;
+    --bg-color: #1b2b34;
+}
+
+/*
+######################################################################################################## @(°_°)@ #######
+*/
+