add html page w/ list of podcasts

2026-02-13 17:04:32 +03:00
parent 76b550d628
commit e4c22dbe47
2 changed files with 134 additions and 6 deletions
--- a/main.go
+++ b/main.go
@@ -1,9 +1,11 @@
 package main

 import (
+	"embed"
 	"encoding/json"
 	"encoding/xml"
 	"fmt"
+	"html/template"
 	"io"
 	"log"
 	"net/http"
@@ -223,7 +225,14 @@ func deletePodcastById(db *sqlx.DB, podcastId int64) error {
 	return nil
 }

+var (
+	//go:embed views
+	viewsFS embed.FS
+)
+
 func main() {
+	tmpl := template.Must(template.ParseFS(viewsFS, "**/*.html"))
+
 	podcastsDirPath := os.Getenv("PODCASTS_DIRPATH")

 	dbPath := os.Getenv("DB_PATH")
@@ -324,6 +333,20 @@ func main() {

 	mux := http.NewServeMux()

+	mux.HandleFunc("GET /", func(w http.ResponseWriter, r *http.Request) {
+		podcasts, err := getPodcasts(db)
+		if err != nil {
+			http.Error(w, err.Error(), 500)
+			return
+		}
+
+		tmpl.ExecuteTemplate(w, "index.html", struct {
+			Podcasts []*Podcast
+		}{
+			Podcasts: podcasts,
+		})
+	})
+
 	mux.HandleFunc("GET /podcasts", func(w http.ResponseWriter, r *http.Request) {
 		podcasts, err := getPodcasts(db)
 		if err != nil {
@@ -338,10 +361,17 @@ func main() {
 		var body struct {
 			Feed string `json:"feed"`
 		}
+
+		isFormData := r.Header.Get("Content-Type") == "application/x-www-form-urlencoded"
+
+		if isFormData {
+			body.Feed = r.FormValue("feed")
+		} else {
 			if err := json.NewDecoder(r.Body).Decode(&body); err != nil {
 				http.Error(w, err.Error(), 500)
 				return
 			}
+		}

 		if body.Feed == "" {
 			http.Error(w, "invalid request, rss feed url is required", 400)
@@ -363,9 +393,13 @@ func main() {
 			log.Printf("failed to create directory for podcast %s: %v\n", feed.Channel.Title, err)
 		}

+		if isFormData {
+			http.Redirect(w, r, "/", http.StatusFound)
+		} else {
 			sendJSON(w, struct {
 				Ok bool `json:"ok"`
 			}{true}, 201)
+		}
 	})

 	mux.HandleFunc("GET /podcasts/{id}/episodes", func(w http.ResponseWriter, r *http.Request) {
--- a/views/index.html
+++ b/views/index.html
@@ -0,0 +1,94 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>podcaster</title>
+
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      body {
+        max-width: 1440px;
+        width: 100%;
+        margin: 0 auto;
+        padding: 8px;
+      }
+
+      .podcast-form {
+        margin-top: 12px;
+        display: flex;
+        gap: 4px;
+      }
+
+      .podcast-form__input {
+        width: 100%;
+      }
+
+      .podcast-form__btn {
+        white-space: nowrap;
+      }
+
+      .podcasts {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, 250px);
+        gap: 12px;
+        margin-top: 20px;
+      }
+
+      .podcast {
+        display: block;
+      }
+
+      .podcast__cover {
+        width: 100%;
+        aspect-ratio: 1/1;
+      }
+
+      @media screen and (max-width: 1024px) {
+        .podcast-form {
+          flex-wrap: wrap;
+        }
+
+        .podcast-form__btn {
+          width: 100%;
+        }
+      }
+
+      @media screen and (max-width: 528px) {
+        .podcasts {
+          grid-template-columns: 1fr;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <h1>podcaster</h1>
+
+    <form method="POST" action="/podcasts" class="podcast-form">
+      <input
+        type="text"
+        inputmode="url"
+        placeholder="rss feed"
+        name="feed"
+        class="podcast-form__input"
+      />
+      <button type="submit" class="podcast-form__btn">Add podcast</button>
+    </form>
+
+    <div class="podcasts">
+      {{range .Podcasts}}
+      <a href="/podcasts/{{.ID}}" class="podcast">
+        <img src="{{.Image}}" alt="" class="podcast__cover" />
+        <span>{{.Name}}</span>
+      </a>
+      {{end}}
+    </div>
+  </body>
+</html>