Switch the main page to HTMX

Author: paskal

.github/workflows/ci.yml

@@ -14,7 +14,7 @@ jobs:
       - name: set up go
         uses: actions/setup-go@v5
         with:
-          go-version: "1.21"
+          go-version: "1.22"
         id: go
 
       - name: launch mongodb

backend/.golangci.yml

@@ -4,10 +4,10 @@ run:
 linters:
   enable:
     - bodyclose
+    - copyloopvar
     - dogsled
     - dupl
     - errcheck
-    - exportloopref
     - gochecknoinits
     - goconst
     - gocritic

backend/main.go

@@ -20,7 +20,7 @@ var revision string
 var opts struct {
 	Address     string            `long:"address" env:"UKEEPER_ADDRESS" default:"" description:"listening address"`
 	Port        int               `long:"port" env:"UKEEPER_PORT" default:"8080" description:"port"`
-	FrontendDir string            `long:"frontend_dir" env:"FRONTEND_DIR" default:"/srv/web" description:"directory with frontend files"`
+	FrontendDir string            `long:"frontend_dir" env:"FRONTEND_DIR" default:"/srv/web" description:"directory with frontend templates and static/ directory for static assets"`
 	Credentials map[string]string `long:"creds" env:"CREDS" description:"credentials for protected calls (POST, DELETE /rules)"`
 	Token       string            `long:"token" env:"UKEEPER_TOKEN" description:"token for /content/v1/parser endpoint auth"`
 	MongoURI    string            `short:"m" long:"mongo_uri" env:"MONGO_URI" required:"true" description:"MongoDB connection string"`

backend/main_test.go

@@ -24,7 +24,7 @@ func Test_Main(t *testing.T) {
 	os.Args = []string{"test", "--port=" + strconv.Itoa(port), "--dbg",
 		"--mongo_uri=mongodb://localhost:27017/",
 		"--mongo-db=test_ureadability",
-		"--frontend_dir=.",
+		"--frontend_dir=web",
 	}
 
 	done := make(chan struct{})

backend/rest/server.go

@@ -5,7 +5,10 @@ import (
 	"context"
 	"crypto/subtle"
 	"fmt"
+	"html/template"
 	"net/http"
+	"os"
+	"path/filepath"
 	"time"
 
 	"github.com/didip/tollbooth/v7"
@@ -28,6 +31,8 @@ type Server struct {
 	Version     string
 	Token       string
 	Credentials map[string]string
+
+	indexPage *template.Template
 }
 
 // JSON is a map alias, just for convenience
@@ -37,6 +42,9 @@ type JSON map[string]interface{}
 func (s *Server) Run(ctx context.Context, address string, port int, frontendDir string) {
 	log.Printf("[INFO] activate rest server on %s:%d", address, port)
 
+	_ = os.Mkdir(filepath.Join(frontendDir, "components"), 0o700)
+	t := template.Must(template.ParseGlob(filepath.Join(frontendDir, "components", "*.gohtml")))
+	s.indexPage = template.Must(template.Must(t.Clone()).ParseFiles(filepath.Join(frontendDir, "index.gohtml")))
 	httpServer := &http.Server{
 		Addr:              fmt.Sprintf("%s:%d", address, port),
 		Handler:           s.routes(frontendDir),
@@ -78,20 +86,39 @@ func (s *Server) routes(frontendDir string) chi.Router {
 		r.Group(func(protected chi.Router) {
 			protected.Use(basicAuth("ureadability", s.Credentials))
 			protected.Post("/rule", s.saveRule)
-			protected.Delete("/rule/{id}", s.deleteRule)
+			protected.Post("/toggle-rule/{id}", s.toggleRule)
 		})
 	})
 
-	fs, err := UM.NewFileServer("/", frontendDir, UM.FsOptSPA)
+	router.Get("/", s.handleIndex)
+
+	_ = os.Mkdir(filepath.Join(frontendDir, "static"), 0o700)
+	fs, err := UM.NewFileServer("/", filepath.Join(frontendDir, "static"), UM.FsOptSPA)
 	if err != nil {
-		log.Fatalf("unable to create, %v", err)
+		log.Fatalf("unable to create file server, %v", err)
 	}
 	router.Get("/*", func(w http.ResponseWriter, r *http.Request) {
 		fs.ServeHTTP(w, r)
 	})
 	return router
 }
 
+func (s *Server) handleIndex(w http.ResponseWriter, r *http.Request) {
+	rules := s.Readability.Rules.All(r.Context())
+	data := struct {
+		Title string
+		Rules []datastore.Rule
+	}{
+		Title: "Правила",
+		Rules: rules,
+	}
+	err := s.indexPage.ExecuteTemplate(w, "base.gohtml", data)
+	if err != nil {
+		log.Printf("[WARN] failed to render index template, %v", err)
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+	}
+}
+
 func (s *Server) extractArticle(w http.ResponseWriter, r *http.Request) {
 	artRequest := extractor.Response{}
 	if err := render.DecodeJSON(r.Body, &artRequest); err != nil {
@@ -132,14 +159,14 @@ func (s *Server) extractArticleEmulateReadability(w http.ResponseWriter, r *http
 		return
 	}
 
-	url := r.URL.Query().Get("url")
-	if url == "" {
+	extractURL := r.URL.Query().Get("url")
+	if extractURL == "" {
 		render.Status(r, http.StatusExpectationFailed)
 		render.JSON(w, r, JSON{"error": "no url passed"})
 		return
 	}
 
-	res, err := s.Readability.Extract(r.Context(), url)
+	res, err := s.Readability.Extract(r.Context(), extractURL)
 	if err != nil {
 		render.Status(r, http.StatusBadRequest)
 		render.JSON(w, r, JSON{"error": err.Error()})
@@ -207,16 +234,33 @@ func (s *Server) saveRule(w http.ResponseWriter, r *http.Request) {
 	render.JSON(w, r, &srule)
 }
 
-// deleteRule marks rule as disabled
-func (s *Server) deleteRule(w http.ResponseWriter, r *http.Request) {
+func (s *Server) toggleRule(w http.ResponseWriter, r *http.Request) {
 	id := getBid(chi.URLParam(r, "id"))
-	err := s.Readability.Rules.Disable(r.Context(), id)
+	rule, found := s.Readability.Rules.GetByID(r.Context(), id)
+	if !found {
+		log.Printf("[WARN] rule not found for id: %s", id.Hex())
+		http.Error(w, "Rule not found", http.StatusNotFound)
+		return
+	}
+
+	rule.Enabled = !rule.Enabled
+	var err error
+	if rule.Enabled {
+		_, err = s.Readability.Rules.Save(r.Context(), rule)
+	} else {
+		err = s.Readability.Rules.Disable(r.Context(), id)
+	}
+
 	if err != nil {
-		render.Status(r, http.StatusBadRequest)
-		render.JSON(w, r, JSON{"error": err.Error()})
+		log.Printf("[ERROR] failed to toggle rule: %v", err)
+		http.Error(w, err.Error(), http.StatusInternalServerError)
 		return
 	}
-	render.JSON(w, r, JSON{"disabled": id})
+
+	err = s.indexPage.ExecuteTemplate(w, "rule-row", rule)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+	}
 }
 
 // authFake just a dummy post request used for external check for protected resource

backend/rest/server_test.go

@@ -4,11 +4,13 @@ import (
 	"context"
 	"encoding/json"
 	"fmt"
+	"html/template"
 	"io"
 	"math/rand/v2"
 	"net/http"
 	"net/http/httptest"
 	"os"
+	"path/filepath"
 	"strings"
 	"testing"
 	"time"
@@ -29,7 +31,7 @@ func TestServer_FileServer(t *testing.T) {
 	}
 	testHTMLName := "test-ureadability.html"
 	dir := os.TempDir()
-	testHTMLFile := dir + "/" + testHTMLName
+	testHTMLFile := filepath.Join(dir, testHTMLName)
 	err := os.WriteFile(testHTMLFile, []byte("some html"), 0o700)
 	require.NoError(t, err)
 
@@ -40,10 +42,21 @@ func TestServer_FileServer(t *testing.T) {
 	ts := httptest.NewServer(srv.routes(dir))
 	defer ts.Close()
 
+	// no file served because it's outside of static dir
 	body, code := get(t, ts.URL+"/"+testHTMLName)
+	assert.Equal(t, http.StatusNotFound, code)
+	assert.Contains(t, body, "404 page not found")
+	ts.Close()
+
+	_ = os.Mkdir(filepath.Join(dir, "static"), 0o700)
+	require.NoError(t, os.Rename(testHTMLFile, filepath.Join(dir, "static", testHTMLName)))
+
+	ts = httptest.NewServer(srv.routes(dir))
+	body, code = get(t, ts.URL+"/"+testHTMLName)
 	assert.Equal(t, http.StatusOK, code)
 	assert.Equal(t, "some html", body)
-	_ = os.Remove(testHTMLFile)
+	require.NoError(t, os.Remove(filepath.Join(dir, "static", testHTMLName)))
+	require.NoError(t, os.Remove(filepath.Join(dir, "static")))
 }
 
 func TestServer_Shutdown(t *testing.T) {
@@ -60,7 +73,7 @@ func TestServer_Shutdown(t *testing.T) {
 	}()
 
 	st := time.Now()
-	srv.Run(ctx, "127.0.0.1", 0, ".")
+	srv.Run(ctx, "127.0.0.1", 0, "../web")
 	assert.True(t, time.Since(st).Seconds() < 1, "should take about 100ms")
 	<-done
 }
@@ -263,7 +276,7 @@ func TestServer_RuleHappyFlow(t *testing.T) {
 	assert.NotEmpty(t, b)
 
 	// disable the rule
-	r, err = del(t, ts.URL+"/api/rule/"+fmt.Sprintf(`%s`, rule.ID.Hex()))
+	r, err = post(t, ts.URL+"/api/toggle-rule/"+rule.ID.Hex(), "")
 	assert.NoError(t, err)
 	// read body for error message
 	body, err := io.ReadAll(r.Body)
@@ -357,6 +370,81 @@ func TestServer_FakeAuth(t *testing.T) {
 	assert.Equal(t, "{\"error\":\"not found\"}\n", b)
 }
 
+func TestServer_HandleIndex(t *testing.T) {
+	ts, _ := startupT(t)
+	defer ts.Close()
+	randomDomainName := randStringBytesRmndr(42) + ".com"
+
+	// Add a test rule
+	_, err := post(t, ts.URL+"/api/rule", fmt.Sprintf(`{"domain": "%s", "content": "test content"}`, randomDomainName))
+	require.NoError(t, err)
+
+	// Test index page
+	resp, err := http.Get(ts.URL + "/")
+	require.NoError(t, err)
+	defer resp.Body.Close()
+
+	body, err := io.ReadAll(resp.Body)
+	require.NoError(t, err)
+
+	assert.Equal(t, http.StatusOK, resp.StatusCode)
+	assert.Contains(t, string(body), randomDomainName)
+	assert.Contains(t, string(body), "test content")
+	assert.Contains(t, string(body), "Правила")
+}
+
+func TestServer_ToggleRule(t *testing.T) {
+	ts, _ := startupT(t)
+	defer ts.Close()
+	randomDomainName := randStringBytesRmndr(42) + ".com"
+
+	// Add a test rule
+	r, err := post(t, ts.URL+"/api/rule", fmt.Sprintf(`{"domain": "%s", "content": "test content"}`, randomDomainName))
+	require.NoError(t, err)
+	var rule datastore.Rule
+	err = json.NewDecoder(r.Body).Decode(&rule)
+	require.NoError(t, err)
+	assert.Equal(t, randomDomainName, rule.Domain)
+	assert.Equal(t, "test content", rule.Content)
+	assert.True(t, rule.Enabled)
+
+	// Toggle rule (disable)
+	r, err = post(t, ts.URL+"/api/toggle-rule/"+rule.ID.Hex(), "")
+	require.NoError(t, err)
+	assert.Equal(t, http.StatusOK, r.StatusCode)
+
+	body, err := io.ReadAll(r.Body)
+	require.NoError(t, err)
+	assert.NoError(t, r.Body.Close())
+	assert.Contains(t, string(body), `class="rules__row rules__row_disabled"`, string(body))
+
+	// Toggle rule again (enable)
+	r, err = post(t, ts.URL+"/api/toggle-rule/"+rule.ID.Hex(), "")
+	require.NoError(t, err)
+
+	assert.Equal(t, http.StatusOK, r.StatusCode)
+
+	body, err = io.ReadAll(r.Body)
+	require.NoError(t, err)
+	assert.NoError(t, r.Body.Close())
+	assert.NotContains(t, string(body), `class="rules__row rules__row_disabled"`)
+}
+
+func TestServer_ToggleRuleNotFound(t *testing.T) {
+	ts, _ := startupT(t)
+	defer ts.Close()
+
+	// Toggle rule (disable)
+	r, err := post(t, ts.URL+"/api/toggle-rule/non-existing", "")
+	require.NoError(t, err)
+	assert.Equal(t, http.StatusNotFound, r.StatusCode)
+
+	body, err := io.ReadAll(r.Body)
+	require.NoError(t, err)
+	assert.NoError(t, r.Body.Close())
+	assert.Contains(t, string(body), `Rule not found`, string(body))
+}
+
 func get(t *testing.T, url string) (response string, statusCode int) {
 	r, err := http.Get(url)
 	assert.NoError(t, err)
@@ -396,7 +484,11 @@ func startupT(t *testing.T) (*httptest.Server, *Server) {
 		Version:     "dev-test",
 	}
 
-	return httptest.NewServer(srv.routes(".")), &srv
+	webDir := "../web"
+	templates := template.Must(template.ParseGlob(filepath.Join(webDir, "components", "*.gohtml")))
+	srv.indexPage = template.Must(template.Must(templates.Clone()).ParseFiles(filepath.Join(webDir, "index.gohtml")))
+
+	return httptest.NewServer(srv.routes(webDir)), &srv
 }
 
 // thanks to https://stackoverflow.com/a/31832326/961092

backend/web/components/base.gohtml

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="ru">
+{{template "head" .}}
+<body class="page">
+<div class="header wrapper page__header">
+  <a href="/" class="header__title link">uReadability</a>
+</div>
+
+<div class="wrapper">
+{{block "content" .}}{{end}}
+</div>
+
+{{template "footer"}}
+
+</body>
+</html>

backend/web/components/footer.gohtml

@@ -0,0 +1,6 @@
+{{define "footer"}}
+  <div class="footer wrapper page__footer">
+    uReadability,
+    <script>document.write((new Date()).getFullYear().toString());</script>
+  </div>
+{{end}}

backend/web/components/head.gohtml

@@ -0,0 +1,10 @@
+{{define "head"}}
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{.Title}} — uReadability</title>
+    <link rel="shortcut icon" type="image/png" href="/favicon.png">
+    <link rel="stylesheet" href="/main.css">
+    <script src="/htmx.js"></script>
+  </head>
+{{end}}

backend/web/components/rule-row.gohtml

@@ -0,0 +1,14 @@
+{{define "rule-row"}}
+  <tr class="rules__row {{if not .Enabled}}rules__row_disabled{{end}}" data-id="{{.ID.Hex}}">
+    <td class="rules__domain-cell">
+      <a href="/edit?id={{.ID.Hex}}" class="link">{{if .Domain}}{{.Domain}}{{else}}unspecified{{end}}</a>
+    </td>
+    <td class="rules__content-cell">{{.Content}}</td>
+    <td class="rules__enabled-cell">
+      <input class="rules__enabled" type="checkbox" {{if .Enabled}}checked{{end}}
+             hx-post="/api/toggle-rule/{{.ID.Hex}}"
+             hx-swap="outerHTML"
+             hx-target="closest tr">
+    </td>
+  </tr>
+{{end}}