feat(style): custom color for card

data.go

@@ -1,9 +1,16 @@
 package main
 
+import (
+	"html/template"
+	"log/slog"
+	"strconv"
+)
+
 type Data struct {
 	Image           string           `json:"image"`
 	Description     string           `json:"description"`
 	Person          *Person          `json:"person"`
+	BackgroundColor *BackgroundColor `json:"background_color"`
 }
 
 type Person struct {
@@ -11,3 +18,28 @@ type Person struct {
 	Pronouns string `json:"pronouns"`
 	Image    string `json:"image"`
 }
+
+type BackgroundColor struct {
+	Type   string `json:"type"`
+	Angle  uint   `json:"angle"`
+	Colors []struct {
+		Color    string `json:"color"`
+		Position uint   `json:"position"`
+	} `json:"colors"`
+}
+
+func (d *Data) GetBackground() template.CSS {
+	bg := d.BackgroundColor
+	css := "background: " + bg.Type + "-gradient("
+	slog.Info(css)
+	if bg.Type == "linear" {
+		css += strconv.Itoa(int(bg.Angle)) + "deg,"
+	}
+	slog.Info(css)
+	for _, c := range bg.Colors {
+		css += c.Color + " " + strconv.Itoa(int(c.Position)) + "%,"
+		slog.Info(css)
+	}
+	slog.Info(css[:len(css)-1] + ");")
+	return template.CSS(css[:len(css)-1] + ");")
+}

example.json

@@ -5,5 +5,23 @@
     "name": "Anhgelus Morhtuuzh",
     "pronouns": "he/his - some basic things though",
     "image": "pfp.webp"
+  },
+  "background_color": {
+    "type": "linear",
+    "angle": 243,
+    "colors": [
+      {
+        "color": "#020024",
+        "position": 0
+      },
+      {
+        "color": "#090979",
+        "position": 40
+      },
+      {
+        "color": "#00d4ff",
+        "position": 100
+      }
+    ]
   }
 }

templates/page/index.gohtml

@@ -1,5 +1,5 @@
 {{define "body"}}
-    <main>
+    <main style="{{ .GetBackground }}">
         <div class="presentation">
             <figure>
                 <img src="{{ getStaticPath .Person.Image }}" alt="{{ .Person.Name }}'s image">