AverageMarcus/opengraph-image-gen
1
0
Fork 0
Code Releases Activity

Removed Twitter and added Bluesky and Fedi handles

Browse Source 
Signed-off-by: Marcus Noble <github@marcusnoble.co.uk>
This commit is contained in:
Marcus Noble 2024-12-03 07:23:14 +00:00
parent b6ecdc0b64
commit 6872a9357f
Signed by: AverageMarcus
GPG Key ID: B8F2DB8A7AEBAF78
4 changed files with 53 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -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

10
index.html
View File

@ -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}`;
}

12
main.go
View File

@ -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", "")),
"github": ensureDecoded(c.Query("github", "")),
"twitter": stripAt(ensureDecoded(c.Query("twitter", ""))),
"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"))),
@ -111,3 +113,7 @@ func ensureDecoded(str string) string {
}
return decoded
}
func stripAt(str string) string {
return strings.TrimPrefix(str, "@")
}

33
svg.tmpl
View File

@ -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