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

Compare commits

base: AverageMarcus:036e9fa4a1048c6d8bf8d8cc4b4b7dd56225fbf9
Branches Tags
AverageMarcus:master
...
compare: AverageMarcus:master
Branches Tags
AverageMarcus:master

8 Commits
036e9fa4a1 ... master

Author SHA1 Message Date
Marcus Noble
7334e247d2 Update page's preview image 
Signed-off-by: Marcus Noble <github@marcusnoble.co.uk>
 2024-12-03 07:58:42 +00:00
Marcus Noble
6872a9357f Removed Twitter and added Bluesky and Fedi handles 
Signed-off-by: Marcus Noble <github@marcusnoble.co.uk>
 2024-12-03 07:23:14 +00:00
Marcus Noble
b6ecdc0b64 Added missing import 2022-01-20 11:39:37 +00:00
Marcus Noble
04ca37fe14 Ensure query params are fully decoded 
LinkedIn linkes to send double-encoded query params
 2022-01-20 11:26:38 +00:00
Marcus Noble
a3274f8df1 Fixed image overlap 2021-09-05 20:39:08 +01:00
Marcus Noble
e392e7ba8b Increased cache time 2021-06-20 11:58:07 +01:00
Marcus Noble
22e1d72e01 Reuse single instance of chrome 2021-06-20 11:55:51 +01:00
Marcus Noble
48599bac5f Increase timeout 2021-05-11 18:54:20 +01:00
4 changed files with 77 additions and 22 deletions
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

12
index.html
View File

@@ -13,7 +13,7 @@
<meta property="og:url" content="https://opengraph.cluster.fun">
<meta property="og:description" content="Dynamically generate OpenGraph social share images">
<meta property="og:type" content="website">
<meta property="og:image" content="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">
<meta property="og:image" content="https://opengraph.cluster.fun/opengraph/?siteTitle=Marcus%20Noble&title=OpenGraph-Image-Gen&tags=opengraph%2Cgolang%2Ctshare%2Csocial&image=https%3A%2F%2Fmarcusnoble.co.uk%2Fimages%2Fmarcus.jpg&fediverse=marcus@k8s.social&github=AverageMarcus&website=www.MarcusNoble.co.uk">
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@Marcus_Noble_" />
@@ -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}`;
}

44
main.go
View File

@@ -5,6 +5,7 @@ import (
"encoding/base64"
"encoding/json"
"fmt"
"net/url"
"os"
"strings"
"text/template"
@@ -23,14 +24,17 @@ import (
var content embed.FS
var chrome *svg2png.Chrome
func main() {
chrome = svg2png.NewChrome().SetHeight(600).SetWith(1200).SetTimeout(10 * time.Second)
ch := cache.New(24*time.Hour, 48*time.Hour)
app := fiber.New()
app.Use(compress.New())
app.Use(cors.New())
app.Use(logger.New())
ch := cache.New(6*time.Hour, 24*time.Hour)
app.Get("/", func(c *fiber.Ctx) error {
c.Type("html", "UTF8")
body, _ := content.ReadFile("index.html")
@@ -39,15 +43,17 @@ func main() {
app.Get("/opengraph", func(c *fiber.Ctx) error {
vars := map[string]string{
"siteTitle": c.Query("siteTitle", ""),
"title": c.Query("title", ""),
"tags": c.Query("tags", ""),
"image": c.Query("image", ""),
"twitter": c.Query("twitter", ""),
"github": c.Query("github", ""),
"website": c.Query("website", ""),
"bgColor": c.Query("bgColor", c.Query("bgColour", "#fff")),
"fgColor": c.Query("fgColor", c.Query("fgColour", "#2B414D")),
"siteTitle": ensureDecoded(c.Query("siteTitle", "")),
"title": ensureDecoded(c.Query("title", "")),
"tags": ensureDecoded(c.Query("tags", "")),
"image": ensureDecoded(c.Query("image", "")),
"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"))),
}
key := generateKey(vars)
@@ -60,7 +66,7 @@ func main() {
fmt.Println(err)
return c.SendStatus(500)
}
ch.Set(key, png, 0)
ch.Set(key, png, cache.DefaultExpiration)
}
c.Type("png")
@@ -91,7 +97,6 @@ func generateImage(vars map[string]string) ([]byte, error) {
imageFile, err := os.CreateTemp(os.TempDir(), "img-*.png")
chrome := svg2png.NewChrome().SetHeight(600).SetWith(1200)
if err := chrome.Screenshoot(fmt.Sprintf("file://%s", file.Name()), imageFile.Name()); err != nil {
return nil, err
}
@@ -99,3 +104,16 @@ func generateImage(vars map[string]string) ([]byte, error) {
return os.ReadFile(imageFile.Name())
}
// Some sites (LinkedIn) encode the already encoded URL so we need to double-decode to be sure
func ensureDecoded(str string) string {
decoded, err := url.QueryUnescape(str)
if err != nil {
return str
}
return decoded
}
func stripAt(str string) string {
return strings.TrimPrefix(str, "@")
}

37
svg.tmpl
View File

@@ -45,7 +45,7 @@
top: 100px;
left: 50px;
height: 300px;
width: 800px;
width: 780px;
font-size: 80px;
font-weight: 900;
line-height: 75px;
@@ -64,12 +64,14 @@
left: 50px;
font-size: 40px;
font-weight: 900;
width: 780px;
}
#profilePic {
position: fixed;
top: 50px;
right: 50px;
border-radius: 50px;
width: 300px;
}
.tags {
@@ -159,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