docs: adapt landing page

muety · Mar 4, 2022 · 50f0815 · 50f0815
1 parent e6f633e
commit 50f0815
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 23 deletions.
diff --git a/config/config.go b/config/config.go
@@ -39,6 +39,7 @@ const (
 var cfg *BotConfig
 
 type BotConfig struct {
+	Env          string
 	Token        string
 	Mode         string
 	BaseUrl      string
@@ -105,6 +106,7 @@ func readBlacklist(path string) []string {
 
 func Get() *BotConfig {
 	if cfg == nil {
+		envPtr := flag.String("env", "production", "Environment to run in (dev or production)")
 		tokenPtr := flag.String("token", "", "Your Telegram Bot Token from Botfather")
 		modePtr := flag.String("mode", "poll", "Update mode ('poll' for development, 'webhook' for production)")
 		baseUrlPtr := flag.String("baseUrl", "", "A relative URL different from '/', required to run the bot on a subpath. E.g. to run bot under 'https://exmaple.org/wh2tg' set baseUrl to '/wh2tg'")
@@ -134,6 +136,7 @@ func Get() *BotConfig {
 		}
 
 		cfg = &BotConfig{
+			Env:          *envPtr,
 			Token:        *tokenPtr,
 			Mode:         *modePtr,
 			BaseUrl:      *baseUrlPtr + "/",

diff --git a/handlers/index.go b/handlers/index.go
@@ -15,12 +15,18 @@ type indexData struct {
 }
 
 func NewIndexHandler() *IndexHandler {
-	return &IndexHandler{
-		Tpl:    template.Must(template.ParseFiles("views/index.tpl.html")),
-		Config: config.Get(),
-	}
+	h := &IndexHandler{Config: config.Get()}
+	h.loadTemplates()
+	return h
 }
 
 func (h *IndexHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
+	if h.Config.Env == "dev" {
+		h.loadTemplates()
+	}
 	h.Tpl.Execute(w, indexData{Config: h.Config})
 }
+
+func (h *IndexHandler) loadTemplates() {
+	h.Tpl = template.Must(template.ParseFiles("views/index.tpl.html"))
+}
diff --git a/views/index.tpl.html b/views/index.tpl.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>Telepush</title>
+    <link rel="icon" href="static/favicon.png">
     <base href="{{ .Config.BaseUrl }}">
     <style>
         html {
@@ -15,8 +16,10 @@
             flex-direction: column;
             justify-content: center;
             align-items: center;
-            width: calc(100% - 40px);
+            max-width: 550px;
             height: 100%;
+            margin-left: auto;
+            margin-right: auto;
         }
 
         footer {
@@ -28,6 +31,11 @@
             font-size: 12px;
         }
 
+        p {
+            line-height: 22px;
+            text-align: center;
+        }
+
         .my-1 {
             margin: 10px 0;
         }
@@ -42,26 +50,68 @@
             padding: 5px 10px;
             border-radius: 3px;
         }
+
+        .code-small {
+            padding: 3px 6px;
+            font-size: 0.8rem;
+        }
+
+        hr {
+            width: 100%;
+            border: 0;
+            border-top: 1px solid #aaa;
+        }
+
+        .sans {
+            font-family: sans-serif;
+            font-size: 0.9rem;
+        }
     </style>
 </head>
 <body>
-    <h1 class="my-2">telepush</h1>
-    <img src="static/logo.svg" class="my-2" height="200px"/>
-    <div class="my-1">
-        <span>Bot:</span>
-        <a href="https://t.me/MiddleManBot" class="code">@MiddleManBot</a>
-    </div>
-    <div class="my-1">
-        <span>API Entrypoint:</span>
-        <a href="api" class="code">/api</a>
-    </div>
-    <div class="my-1">
-        <span>GitHub:</span>
-        <a href="https://github.com/muety/telepush" class="code">muety/telepush</a>
-    </div>
-
-    <footer>
-        Version: {{ .Config.Version }}
-    </footer>
+<img src="static/logo.svg" class="my-1" height="200px"/>
+<h1 class="my-1">telepush</h1>
+<p>Send Telegram push notifications easily via HTTP</p>
+
+<div style="height: 28px"></div>
+
+<h2 class="my-1">Usage</h2>
+<p style="margin-bottom: 0"><strong>Step 1:</strong> <span>Get a token</span></p>
+<p>
+    <span>Start a chat with <a href="https://t.me/MiddleManBot" target="_blank">TelepushBot</a> (or your own bot) and type <span class="code code-small">/start</span> to obtain a recipient token.</span>
+</p>
+<p style="margin-bottom: 0"><strong>Step 2: </strong> <span>Send your message</span></p>
+
+<p class="code code-small" style="width: 100%; text-align: left; padding: 8px 20px;">
+    curl -XPOST \<br>
+    &nbsp;&nbsp;&nbsp;-d '{ "text": "Hello there" }' \<br>
+    &nbsp;&nbsp;&nbsp;<span class="base-url"></span>api/messages
+</p>
+
+<div style="height: 42px"></div>
+<hr>
+<div style="height: 42px"></div>
+
+<div class="my-1">
+    <span>Bot:</span>
+    <a href="https://t.me/MiddleManBot" class="code">@MiddleManBot</a>
+</div>
+<div class="my-1">
+    <span>API Entrypoint:</span>
+    <a href="api" class="code">/api</a>
+</div>
+<div class="my-1">
+    <span>Code & Docs:</span>
+    <a href="https://github.com/muety/telepush" class="code">muety/telepush</a>
+</div>
+
+<footer>
+    Version: {{ .Config.Version }}
+</footer>
+
+<script type="text/javascript">
+    const url = window.location.href
+    document.querySelectorAll('.base-url').forEach(e => e.innerHTML = url)
+</script>
 </body>
 </html>
diff --git a/views/static/favicon.png b/views/static/favicon.png