parent:
0b7d19817bdc2e2cffa5cdbfa01404c45d6a6046
nmyk <nick@nmyk.io>
2023-01-09T11:13:47-05:00
reorganize frontend a bit
diff --git a/cmd/frontend/main.go b/cmd/frontend/main.go
index 944a19b6d8fd3e0abc28649fc5f375d8c33a4717..1543b536bce42df01ae9a53984c6686bde6caf60 100644
--- a/cmd/frontend/main.go
+++ b/cmd/frontend/main.go
@@ -1,6 +1,7 @@
package main
import (
+ "embed"
"html/template"
"log"
"net/http"
@@ -11,11 +12,8 @@ "github.com/google/uuid"
"github.com/ianschenck/envflag"
)
-//go:embed templates/tmpchat-index.gohtml
-var tmpchatIndex string
-
-//go:embed templates/tmpchat-channel.gohtml
-var tmpchatChannel string
+//go:embed templates
+var content embed.FS
func getTemplate(raw string, funcMap template.FuncMap) *template.Template {
return template.Must(template.New("").Funcs(funcMap).Parse(raw))
@@ -30,14 +28,19 @@ channelName := r.URL.Path[1:] // Omit leading slash in path
var tmpl *template.Template
fm := template.FuncMap{
"safeURL": func(u string) template.URL { return template.URL(u) },
+ "safeCSS": func(s string) template.CSS { return template.CSS(s) },
}
+ var pg []byte
if channelName == "" {
- tmpl = getTemplate(tmpchatIndex, fm)
+ pg, _ = content.ReadFile("templates/tmpchat-index.gohtml")
} else {
- tmpl = getTemplate(tmpchatChannel, fm)
+ pg, _ = content.ReadFile("templates/tmpchat-channel.gohtml")
}
+ style, _ := content.ReadFile("templates/style.css")
+ tmpl = getTemplate(string(pg), fm)
userID := uuid.New().String()
d := tmpchatPageData{
+ string(style),
channelName,
userID,
h.signalingURL,
@@ -46,6 +49,7 @@ _ = tmpl.Execute(w, d)
}
type tmpchatPageData struct {
+ Style string
ChannelName string
UserID string
SignalingURL string
diff --git a/cmd/frontend/templates/style.css b/cmd/frontend/templates/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..86863e6b05ce5f16f21a7e3e9f1528657f073595
--- /dev/null
+++ b/cmd/frontend/templates/style.css
@@ -0,0 +1,102 @@
+input, textarea, button, submit, .chatcontainer {
+ background: none;
+ border: 1px solid var(--black);
+ border-radius: 4px;
+ height: 27px;
+}
+
+input[type="button"] {
+ padding: 2px;
+}
+
+input[type="submit"] {
+ margin: auto;
+ width: 50px;
+}
+
+.chatui {
+ display: table;
+ text-align: left;
+ margin-left: auto;
+ margin-right: auto;
+ padding-left: 20px;
+ padding-right: 20px;
+ min-width: 440px;
+ max-width: 440px;
+}
+
+.chatcontainer {
+ height: 400px;
+ max-width: 440px;
+ min-width: 360px;
+ padding: 20px;
+ display: table-cell;
+ vertical-align: bottom;
+}
+
+.messagelog {
+ max-height: 400px;
+ overflow: auto;
+}
+
+#namechange {
+ width: 80%;
+ float: left;
+ max-height: 46px;
+ overflow: scroll;
+}
+
+.myname {
+ float: right;
+ font-weight: bold;
+ text-align: right;
+ padding-left: 8px;
+}
+
+.theirname {
+ float: left;
+ font-weight: bold;
+ text-align: left;
+ padding-right: 8px;
+}
+
+.mymessage pre {
+ text-align: right;
+ overflow: hidden;
+ color: var(--alt-text-color);
+ margin-bottom: 10px;
+}
+
+.theirmessage pre {
+ text-align: left;
+ overflow: hidden;
+ color: var(--alt-text-color);
+ margin-bottom: 10px;
+}
+
+.systemmessage {
+ text-align: center;
+ font-weight: bold;
+ margin-bottom: 10px;
+}
+
+input[type="nametext"] {
+ padding-left: 5px;
+}
+
+textarea#messagetext {
+ padding-left: 10px;
+ width: 100%;
+ resize: vertical;
+}
+
+.messagetextcontainer {
+ width: calc(100% - 56px);
+ float: left;
+}
+
+a[type="home"], a[type="home"]:hover {
+ color: var(--black);
+ font-weight: bold;
+ text-decoration: none;
+}
\ No newline at end of file
diff --git a/cmd/frontend/templates/tmpchat-channel.gohtml b/cmd/frontend/templates/tmpchat-channel.gohtml
index a213b6247027688687ca077e8fe57c892744c38d..a49f18375c9a014a2c0adc9f61f8a8ade217365c 100644
--- a/cmd/frontend/templates/tmpchat-channel.gohtml
+++ b/cmd/frontend/templates/tmpchat-channel.gohtml
@@ -2,8 +2,12 @@ <html>
<!-- Questions? Comments? Concerns? Let us know what you think: 1-800-TMP-CHAT@nmyk.io -->
<head>
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
- <link href="https://cdn.nmyk.io/assets/style.css" rel="stylesheet">
- <link href="https://cdn.nmyk.io/assets/favicon.ico" rel="icon">
+ <link href="https://nmyk.io/favicon.ico" rel="icon">
+ <link href="https://nmyk.io/style.css" rel="stylesheet">
+ <style>
+ {{.Style|safeCSS}}
+ </style>
+ <link href="style.css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=500">
<meta name="description"
diff --git a/cmd/frontend/templates/tmpchat-index.gohtml b/cmd/frontend/templates/tmpchat-index.gohtml
index c2b084b2679f31522fc4806fe6b925b4e12be990..fd94f2bf4c7044b956c38779c91be426bcca32d4 100644
--- a/cmd/frontend/templates/tmpchat-index.gohtml
+++ b/cmd/frontend/templates/tmpchat-index.gohtml
@@ -3,8 +3,11 @@ <html lang="en">
<!-- How's my driving? 1-800-TMP-CHAT@nmyk.io -->
<head>
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
- <link href="https://cdn.nmyk.io/assets/style.css" rel="stylesheet">
- <link href="https://cdn.nmyk.io/assets/favicon.ico" rel="icon">
+ <link href="https://nmyk.io/favicon.ico" rel="icon">
+ <link href="https://nmyk.io/style.css" rel="stylesheet">
+ <style>
+ {{.Style|safeCSS}}
+ </style>
<meta charset="UTF-8">
<meta name="viewport" content="width=500">
<meta name="description"