feat: offline js and css (#658)

2025-09-15 17:37:06 +02:00
parent f5c9e822a7
commit 700dbd2d63
12 changed files with 143 additions and 39 deletions
@@ -166,6 +166,8 @@ linters:
          disabled: true
        - name: enforce-switch-style
          disabled: true
+        - name: blank-imports
+          disabled: true
    staticcheck:
      checks:
       - 'all'
@@ -18,18 +18,10 @@ import (

 	"github.com/bakito/adguardhome-sync/internal/log"
 	"github.com/bakito/adguardhome-sync/internal/metrics"
+	"github.com/bakito/adguardhome-sync/internal/sync/static"
 	"github.com/bakito/adguardhome-sync/version"
 )

-var (
-	//go:embed index.html
-	index []byte
-	//go:embed favicon.ico
-	favicon []byte
-	//go:embed logo.svg
-	logo []byte
-)
-
 func (w *worker) handleSync(c *gin.Context) {
 	l.With("remote-addr", c.Request.RemoteAddr).Info("Starting sync from API")
 	w.sync()
@@ -72,14 +64,6 @@ func (w *worker) handleRoot(c *gin.Context) {
 	)
 }

-func (w *worker) handleFavicon(c *gin.Context) {
-	c.Data(http.StatusOK, "image/x-icon", favicon)
-}
-
-func (w *worker) handleLogo(c *gin.Context) {
-	c.Data(http.StatusOK, "image/svg+xml", logo)
-}
-
 func (w *worker) handleLogs(c *gin.Context) {
 	c.Data(http.StatusOK, "text/plain", []byte(strings.Join(log.Logs(), "")))
 }
@@ -137,8 +121,7 @@ func (w *worker) listenAndServe() {
 	group.GET("/api/v1/logs", w.handleLogs)
 	group.POST("/api/v1/clear-logs", w.handleClearLogs)
 	group.GET("/api/v1/status", w.handleStatus)
-	group.GET("/favicon.ico", w.handleFavicon)
-	group.GET("/logo.svg", w.handleLogo)
+	static.HandleResources(group, w.cfg.API.DarkMode)
 	group.GET("/", w.handleRoot)
 	if w.cfg.API.Metrics.Enabled {
 		group.GET("/metrics", metrics.Handler())
@@ -153,7 +136,7 @@ func (w *worker) listenAndServe() {
 		ReadHeaderTimeout: 1 * time.Second,
 	}

-	r.SetHTMLTemplate(template.Must(template.New("index.html").Parse(string(index))))
+	r.SetHTMLTemplate(template.Must(template.New("index.html").Parse(static.Index())))

 	go func() {
 		var err error
@@ -1,16 +1,8 @@
 <html lang="en">
 <head>
    <title>AdGuard Home sync</title>
-    <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js">
-    </script>
-    {{- if .DarkMode }}
-    <link rel="stylesheet" href="https://bootswatch.com/5/darkly/bootstrap.min.css"
-          crossorigin="anonymous">
-    {{- else }}
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
-          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
-          crossorigin="anonymous">
-    {{- end }}
+    <script type="text/javascript" src="lib/jquery.js"></script>
+    <link rel="stylesheet" href="lib/bootstrap.css">
    <script type="text/javascript">
        $(document).ready(function () {
            $("#showLogs").click(function () {
@@ -168,16 +160,10 @@
    </div>
 </div>
 <!-- openssl dgst -sha384 -binary popper.min.js | openssl base64 -A  -->
-<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
-    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous">
-</script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
-    integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous">
-</script>
+<script src="lib/popper.js" ></script>
+<script src="lib/bootstrap.js" ></script>
 {{- if .Metrics }}
-<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"
-    integrity="sha384-vsrfeLOOY6KuIYKDlmVH5UiBmgIdB1oEf7p01YgWHuqmOHfZr374+odEv96n9tNC" crossorigin="anonymous">
-</script>
+<script src="lib/chart.js" ></script>
 <script>
    // Function to create minimal line charts
    function createChart(canvasId, data) {
@@ -0,0 +1,80 @@
+package static
+
+import (
+	_ "embed"
+	"net/http"
+
+	"github.com/gin-gonic/gin"
+)
+
+var (
+	//go:embed index.html
+	index string
+
+	//go:embed favicon.ico
+	favicon []byte
+
+	//go:embed logo.svg
+	logo []byte
+
+	//go:embed bootstrap.min-5.3.3.js
+	bootstrapJS []byte
+
+	// https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css
+	//go:embed bootstrap.min-5.3.3.css
+	bootstrapCSS []byte
+
+	// https://bootswatch.com/5/darkly/bootstrap.min.css
+	//go:embed bootstrap.min-darkly-5.3.css
+	bootstrapDarkCSS []byte
+
+	// https://code.jquery.com/jquery-3.7.1.min.js
+	//go:embed jquery-3.7.1.min.js
+	jquery []byte
+
+	// https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js
+	//go:embed popper.min-2.9.2.js
+	popper []byte
+
+	// https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js
+	//go:embed chart.umd.min-4.4.7.js
+	chart []byte
+)
+
+func handleFavicon(c *gin.Context) {
+	c.Data(http.StatusOK, "image/x-icon", favicon)
+}
+
+func handleLogo(c *gin.Context) {
+	c.Data(http.StatusOK, "image/svg+xml", logo)
+}
+
+func Index() string {
+	return index
+}
+
+func HandleResources(group gin.IRouter, dark bool) {
+	group.GET("/favicon.ico", handleFavicon)
+	group.GET("/logo.svg", handleLogo)
+	group.GET("/lib/jquery.js", handleJS(jquery))
+	group.GET("/lib/popper.js", handleJS(popper))
+	group.GET("/lib/chart.js", handleJS(chart))
+	group.GET("/lib/bootstrap.js", handleJS(bootstrapJS))
+	if dark {
+		group.GET("/lib/bootstrap.css", handleCSS(bootstrapDarkCSS))
+	} else {
+		group.GET("/lib/bootstrap.css", handleCSS(bootstrapCSS))
+	}
+}
+
+func handleJS(bytes []byte) gin.HandlerFunc {
+	return func(c *gin.Context) {
+		c.Data(http.StatusOK, "application/javascript", bytes)
+	}
+}
+
+func handleCSS(bytes []byte) gin.HandlerFunc {
+	return func(c *gin.Context) {
+		c.Data(http.StatusOK, "text/css", bytes)
+	}
+}