Removed Twitter and added Bluesky and Fedi handles

Signed-off-by: Marcus Noble <github@marcusnoble.co.uk>

README.md

@@ -7,15 +7,15 @@ Available at https://opengraph.cluster.fun/
 ## Example
 
 ```html
-<img src="https://opengraph.cluster.fun/opengraph/?siteTitle=Marcus%20Noble&title=OpenGraph-Image-Gen&tags=opengraph%2Cgolang%2Ctwitter%2Cshare%2Csocial&image=https%3A%2F%2Fmarcusnoble.co.uk%2Fimages%2Fmarcus.jpg&twitter=Marcus_Noble_&github=AverageMarcus&website=www.MarcusNoble.co.uk&bgColor=%23ffffff&fgColor=%23263943" />
+<img src="https://opengraph.cluster.fun/opengraph/?siteTitle=Example&title=Heading&tags=example%2Csample%2Cfoo%2Cbar&image=https%3A%2F%2Fmarcusnoble.co.uk%2Fimages%2Fmarcus.jpg&bluesky=%40averagemarcus.bsky.social&fediverse=%40marcus%40k8s.social&github=AverageMarcus&website=www.MarcusNoble.co.uk&bgColor=%23ffffff&fgColor=%23263943" />
 ```
 
-![Preview Image](https://opengraph.cluster.fun/opengraph/?siteTitle=Marcus%20Noble&title=OpenGraph-Image-Gen&tags=opengraph%2Cgolang%2Ctwitter%2Cshare%2Csocial&image=https%3A%2F%2Fmarcusnoble.co.uk%2Fimages%2Fmarcus.jpg&twitter=Marcus_Noble_&github=AverageMarcus&website=www.MarcusNoble.co.uk&bgColor=%23ffffff&fgColor=%23263943)
+![Preview Image](https://opengraph.cluster.fun/opengraph/?siteTitle=Example&title=Heading&tags=example%2Csample%2Cfoo%2Cbar&image=https%3A%2F%2Fmarcusnoble.co.uk%2Fimages%2Fmarcus.jpg&bluesky=%40averagemarcus.bsky.social&fediverse=%40marcus%40k8s.social&github=AverageMarcus&website=www.MarcusNoble.co.uk&bgColor=%23ffffff&fgColor=%23263943)
 
 ## Features
 
 * Dynamically generate a PNG image for use as an OpenGraph share image
-* Ideally sized for Twitter previews
+* Ideally sized for social card previews
 * All text elements configurable
 * Configurable colours
 * All text fields optional

index.html

@@ -60,7 +60,8 @@
           <label>Heading: <input id="title" type="text" value="Heading" /></label>
           <label>Tags: <input id="tags" type="text" value="example,sample,foo,bar" /></label>
           <label>Image: <input id="image" type="text" value="https://marcusnoble.co.uk/images/marcus.jpg" /></label>
-          <label>Twitter Handle: <input id="twitter" type="text" value="Marcus_Noble_" /></label>
+          <label>Bluesky Handle: <input id="bluesky" type="text" value="@averagemarcus.bsky.social" /></label>
+          <label>Fediverse Handle: <input id="fediverse" type="text" value="@marcus@k8s.social" /></label>
           <label>GitHub Username: <input id="github" type="text" value="AverageMarcus" /></label>
           <label>Website: <input id="website" type="text" value="www.MarcusNoble.co.uk" /></label>
           <br />
@@ -77,7 +78,7 @@
 
         <label>
           URL:
-          <input type="text" id="imageURL" readonly />
+          <input type="text" id="imageURL" />
         </label>
       </form>
     </div>
@@ -120,13 +121,14 @@
       let title = encodeURIComponent(document.getElementById('title').value);
       let tags = encodeURIComponent(document.getElementById('tags').value);
       let image = encodeURIComponent(document.getElementById('image').value);
-      let twitter = encodeURIComponent(document.getElementById('twitter').value);
+      let bluesky = encodeURIComponent(document.getElementById('bluesky').value);
+      let fediverse = encodeURIComponent(document.getElementById('fediverse').value);
       let github = encodeURIComponent(document.getElementById('github').value);
       let website = encodeURIComponent(document.getElementById('website').value);
       let bgColor = encodeURIComponent(document.getElementById('bgColor').value);
       let fgColor = encodeURIComponent(document.getElementById('fgColor').value);
 
-      let url = `/opengraph/?siteTitle=${siteTitle}&title=${title}&tags=${tags}&image=${image}&twitter=${twitter}&github=${github}&website=${website}&bgColor=${bgColor}&fgColor=${fgColor}`;
+      let url = `/opengraph/?siteTitle=${siteTitle}&title=${title}&tags=${tags}&image=${image}&bluesky=${bluesky}&fediverse=${fediverse}&github=${github}&website=${website}&bgColor=${bgColor}&fgColor=${fgColor}`;
       document.getElementById('exampleImage').src = url;
       document.getElementById('imageURL').value = `https://opengraph.cluster.fun${url}`;
     }

main.go

@@ -5,11 +5,11 @@ import (
 	"encoding/base64"
 	"encoding/json"
 	"fmt"
+	"net/url"
 	"os"
 	"strings"
 	"text/template"
 	"time"
-	"net/url"
 
 	"github.com/canhlinh/svg2png"
 	"github.com/patrickmn/go-cache"
@@ -47,8 +47,10 @@ func main() {
 			"title":     ensureDecoded(c.Query("title", "")),
 			"tags":      ensureDecoded(c.Query("tags", "")),
 			"image":     ensureDecoded(c.Query("image", "")),
-			"twitter":   ensureDecoded(c.Query("twitter", "")),
+			"twitter":   stripAt(ensureDecoded(c.Query("twitter", ""))),
-			"github":    ensureDecoded(c.Query("github", "")),
+			"bluesky":   stripAt(ensureDecoded(c.Query("bluesky", ""))),
+			"fediverse": stripAt(ensureDecoded(c.Query("fediverse", ""))),
+			"github":    stripAt(ensureDecoded(c.Query("github", ""))),
 			"website":   ensureDecoded(c.Query("website", "")),
 			"bgColor":   ensureDecoded(c.Query("bgColor", c.Query("bgColour", "#fff"))),
 			"fgColor":   ensureDecoded(c.Query("fgColor", c.Query("fgColour", "#2B414D"))),
@@ -109,5 +111,9 @@ func ensureDecoded(str string) string {
 	if err != nil {
 		return str
 	}
-	return decoded	
+	return decoded
-}
+}
+
+func stripAt(str string) string {
+	return strings.TrimPrefix(str, "@")
+}

svg.tmpl

@@ -161,6 +161,39 @@
             <span>@{{ . }}</span>
           {{ end }}
 
+          {{ with .bluesky}}
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" height="25px" width="25px">
+                <path d="m0 0H512V512H0" fill="#fff"/>
+                <path d="M159 126c-28-22-74-38-74 14 0 11 6 88 9 101 13 43 57 54 97 48-69 11-87 50-49 89 72 75 104-18 112-42l2-5 2 5c8 24 40 117 112 42 38-39 20-78-49-89 40 6 84-5 97-48 3-13 9-90 9-101 0-52-46-36-74-14-39 29-82 89-97 121-15-32-58-92-97-121Z" />
+            </svg>
+            <span>@{{ . }}</span>
+          {{ end }}
+
+          {{ with .fediverse}}
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="25px" width="25px">
+              <g stroke-width="25">
+                <path stroke="#000" d="m106 179 31 197" />
+                <path stroke="#000" d="m137 375 201 32" />
+                <path stroke="#000" d="m423 229-90 178" />
+                <path stroke="#000" d="m282 88 141 141" />
+                <path stroke="#000" d="m105 179 178-90" />
+              </g>
+              <path fill="#000" d="m276 125h25l12 70-26-4m31 39-26-4 23 146h25" />
+              <path fill="#000" d="m164 347v28l136-69-4-26m36 10-4-26 67-34v28" />
+              <path fill="#000" d="m125 180v35l97 98 23-12m2 37 23-12 45 45v35" />
+              <path fill="#000" d="m254 118h28l-72 141-19-19m3 51-19-19-39 77h28" />
+              <path fill="#000" d="m137 171v25l66 11 12-23m24 29 12-24 140 23v25" />
+              <g stroke-width="3.5" stroke="#000">
+                <circle cx="106" cy="179" r="39" fill="#000" />
+                <circle cx="333" cy="406" r="39" fill="#000" />
+                <circle cx="137" cy="375" r="39" fill="#000" />
+                <circle cx="283" cy="88.5" r="39" fill="#000" />
+                <circle cx="423" cy="230" r="39" fill="#000" />
+              </g>
+            </svg>
+            <span>@{{ . }}</span>
+          {{ end }}
+
           {{ with .github }}
             <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 291.32 291.32" height="25px" width="25px">
               <path d="M145.66,0C65.219,0,0,65.219,0,145.66c0,80.45,65.219,145.66,145.66,145.66