feat(link): custom links

data.go

@@ -2,7 +2,6 @@ package main
 
 import (
 	"html/template"
-	"log/slog"
 	"strconv"
 )
 
@@ -11,6 +10,7 @@ type Data struct {
 	Description     string           `json:"description"`
 	Person          *Person          `json:"person"`
 	BackgroundColor *BackgroundColor `json:"background_color"`
+	Links           []*Link          `json:"links"`
 }
 
 type Person struct {
@@ -28,18 +28,24 @@ type BackgroundColor struct {
 	} `json:"colors"`
 }
 
+type Link struct {
+	Link    string `json:"link"`
+	Content string `json:"content"`
+	Color   string `json:"color"`
+}
+
 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] + ");")
 }
+
+func (l *Link) GetBackground() template.CSS {
+	return template.CSS("background: " + l.Color)
+}

example.json

@@ -23,5 +23,22 @@
         "position": 100
       }
     ]
+  },
+  "links": [
+    {
+      "link": "https://discord.gg/minecraft",
+      "content": "Minecraft's Discord",
+      "color": "#800080FF"
+    },
+    {
+      "link": "https://github.com/anhgelus",
+      "content": "GitHub",
+      "color": "#800080FF"
+    },
+    {
+      "link": "https://youtube.com/@anhgelus",
+      "content": "YouTube",
+      "color": "#800080FF"
     }
+  ]
 }

scss/main.scss

@@ -70,10 +70,11 @@ h2 {
   width: 100%;
   gap: 1rem;
   & .link {
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     background: purple;
     width: 33%;
-    padding: 1em;
     border-radius: 16px;
   }
   & a {
@@ -81,5 +82,7 @@ h2 {
     color: black;
     text-decoration: none;
     text-align: center;
+    padding: 1em;
+    width: 100%;
   }
 }

templates/page/index.gohtml

@@ -11,9 +11,9 @@
         </div>
         <p class="description">{{ .Description }}</p>
         <div class="links">
-            <div class="link"><a href="">Link 1</a></div>
+            {{ range $link := .Links }}
-            <div class="link"><a href="">Link 2</a></div>
+            <div class="link" style="{{ $link.GetBackground }}"><a href="{{ $link.Link }}">{{ $link.Content }}</a></div>
-            <div class="link"><a href="">Link 3</a></div>
+            {{end}}
         </div>
     </main>
 {{end}}