tangled.org
the previous Go-based opengraph rendering made it difficult to handle dynamic content and was cumbersome to update when redesigning images. this moves rendering to a typescript/satori service on cloudflare workers, making design changes easier while offloading image processing from the main application.
+1635
-1481
Diff
round #2
+5
appview/config/config.go
+5
appview/config/config.go
···
135
135
UpdateInterval time.Duration `env:"UPDATE_INTERVAL, default=1h"`
136
136
}
137
137
138
+
type OgcardConfig struct {
139
+
Host string `env:"HOST, default=https://og.tangled.org"`
140
+
}
141
+
138
142
func (cfg RedisConfig) ToURL() string {
139
143
u := &url.URL{
140
144
Scheme: "redis",
···
166
170
Label LabelConfig `env:",prefix=TANGLED_LABEL_"`
167
171
Bluesky BlueskyConfig `env:",prefix=TANGLED_BLUESKY_"`
168
172
Sites SitesConfig `env:",prefix=TANGLED_SITES_"`
173
+
Ogcard OgcardConfig `env:",prefix=TANGLED_OGCARD_"`
169
174
}
170
175
171
176
func LoadConfig(ctx context.Context) (*Config, error) {
+3
appview/issues/issues.go
+3
appview/issues/issues.go
···
23
23
"tangled.org/core/appview/models"
24
24
"tangled.org/core/appview/notify"
25
25
"tangled.org/core/appview/oauth"
26
+
"tangled.org/core/appview/ogcard"
26
27
"tangled.org/core/appview/pages"
27
28
"tangled.org/core/appview/pages/repoinfo"
28
29
"tangled.org/core/appview/pagination"
···
48
49
logger *slog.Logger
49
50
validator *validator.Validator
50
51
indexer *issues_indexer.Indexer
52
+
ogcardClient *ogcard.Client
51
53
}
52
54
53
55
func New(
···
77
79
logger: logger,
78
80
validator: validator,
79
81
indexer: indexer,
82
+
ogcardClient: ogcard.NewClient(config.Ogcard.Host),
80
83
}
81
84
}
82
85
+35
-229
appview/issues/opengraph.go
+35
-229
appview/issues/opengraph.go
···
1
1
package issues
2
2
3
3
import (
4
-
"bytes"
5
4
"context"
6
-
"fmt"
7
-
"image"
8
-
"image/color"
9
-
"image/png"
10
5
"log"
11
6
"net/http"
7
+
"time"
12
8
13
9
"tangled.org/core/appview/models"
14
10
"tangled.org/core/appview/ogcard"
15
11
)
16
12
17
-
func (rp *Issues) drawIssueSummaryCard(issue *models.Issue, repo *models.Repo, commentCount int, ownerHandle string) (*ogcard.Card, error) {
18
-
width, height := ogcard.DefaultSize()
19
-
mainCard, err := ogcard.NewCard(width, height)
20
-
if err != nil {
21
-
return nil, err
22
-
}
23
-
24
-
// Split: content area (75%) and status/stats area (25%)
25
-
contentCard, statsArea := mainCard.Split(false, 75)
26
-
27
-
// Add padding to content
28
-
contentCard.SetMargin(50)
29
-
30
-
// Split content horizontally: main content (80%) and avatar area (20%)
31
-
mainContent, avatarArea := contentCard.Split(true, 80)
32
-
33
-
// Add margin to main content like repo card
34
-
mainContent.SetMargin(10)
35
-
36
-
// Use full main content area for repo name and title
37
-
bounds := mainContent.Img.Bounds()
38
-
startX := bounds.Min.X + mainContent.Margin
39
-
startY := bounds.Min.Y + mainContent.Margin
40
-
41
-
// Draw full repository name at top (owner/repo format)
42
-
var repoOwner string
43
-
owner, err := rp.idResolver.ResolveIdent(context.Background(), repo.Did)
44
-
if err != nil {
45
-
repoOwner = repo.Did
46
-
} else {
47
-
repoOwner = "@" + owner.Handle.String()
48
-
}
49
-
50
-
fullRepoName := repoOwner + " / " + repo.Name
51
-
if len(fullRepoName) > 60 {
52
-
fullRepoName = fullRepoName[:60] + "…"
53
-
}
54
-
55
-
grayColor := color.RGBA{88, 96, 105, 255}
56
-
err = mainContent.DrawTextAt(fullRepoName, startX, startY, grayColor, 36, ogcard.Top, ogcard.Left)
57
-
if err != nil {
58
-
return nil, err
59
-
}
60
-
61
-
// Draw issue title below repo name with wrapping
62
-
titleY := startY + 60
63
-
titleX := startX
64
-
65
-
// Truncate title if too long
66
-
issueTitle := issue.Title
67
-
maxTitleLength := 80
68
-
if len(issueTitle) > maxTitleLength {
69
-
issueTitle = issueTitle[:maxTitleLength] + "…"
70
-
}
71
-
72
-
// Create a temporary card for the title area to enable wrapping
73
-
titleBounds := mainContent.Img.Bounds()
74
-
titleWidth := titleBounds.Dx() - (startX - titleBounds.Min.X) - 20 // Leave some margin
75
-
titleHeight := titleBounds.Dy() - (titleY - titleBounds.Min.Y) - 100 // Leave space for issue ID
76
-
77
-
titleRect := image.Rect(titleX, titleY, titleX+titleWidth, titleY+titleHeight)
78
-
titleCard := &ogcard.Card{
79
-
Img: mainContent.Img.SubImage(titleRect).(*image.RGBA),
80
-
Font: mainContent.Font,
81
-
Margin: 0,
82
-
}
83
-
84
-
// Draw wrapped title
85
-
lines, err := titleCard.DrawText(issueTitle, color.Black, 54, ogcard.Top, ogcard.Left)
86
-
if err != nil {
87
-
return nil, err
88
-
}
89
-
90
-
// Calculate where title ends (number of lines * line height)
91
-
lineHeight := 60 // Approximate line height for 54pt font
92
-
titleEndY := titleY + (len(lines) * lineHeight) + 10
93
-
94
-
// Draw issue ID in gray below the title
95
-
issueIdText := fmt.Sprintf("#%d", issue.IssueId)
96
-
err = mainContent.DrawTextAt(issueIdText, startX, titleEndY, grayColor, 54, ogcard.Top, ogcard.Left)
97
-
if err != nil {
98
-
return nil, err
99
-
}
100
-
101
-
// Get issue author handle (needed for avatar and metadata)
102
-
var authorHandle string
103
-
author, err := rp.idResolver.ResolveIdent(context.Background(), issue.Did)
104
-
if err != nil {
105
-
authorHandle = issue.Did
106
-
} else {
107
-
authorHandle = "@" + author.Handle.String()
108
-
}
109
-
110
-
// Draw avatar circle on the right side
111
-
avatarBounds := avatarArea.Img.Bounds()
112
-
avatarSize := min(avatarBounds.Dx(), avatarBounds.Dy()) - 20 // Leave some margin
113
-
if avatarSize > 220 {
114
-
avatarSize = 220
115
-
}
116
-
avatarX := avatarBounds.Min.X + (avatarBounds.Dx() / 2) - (avatarSize / 2)
117
-
avatarY := avatarBounds.Min.Y + 20
118
-
119
-
// Get avatar URL for issue author
120
-
avatarURL := rp.pages.AvatarUrl(authorHandle, "256")
121
-
err = avatarArea.DrawCircularExternalImage(avatarURL, avatarX, avatarY, avatarSize)
122
-
if err != nil {
123
-
log.Printf("failed to draw avatar (non-fatal): %v", err)
124
-
}
125
-
126
-
// Split stats area: left side for status/comments (80%), right side for dolly (20%)
127
-
statusArea, dollyArea := statsArea.Split(true, 80)
128
-
129
-
// Draw status and comment count in status/comments area
130
-
statsBounds := statusArea.Img.Bounds()
131
-
statsX := statsBounds.Min.X + 60 // left padding
132
-
statsY := statsBounds.Min.Y
133
-
134
-
iconColor := color.RGBA{88, 96, 105, 255}
135
-
iconSize := 36
136
-
textSize := 36.0
137
-
labelSize := 28.0
138
-
iconBaselineOffset := int(textSize) / 2
139
-
140
-
// Draw status (open/closed) with colored icon and text
141
-
var statusIcon string
142
-
var statusText string
143
-
var statusColor color.RGBA
144
-
145
-
if issue.Open {
146
-
statusIcon = "circle-dot"
147
-
statusText = "open"
148
-
statusColor = color.RGBA{34, 139, 34, 255} // green
149
-
} else {
150
-
statusIcon = "ban"
151
-
statusText = "closed"
152
-
statusColor = color.RGBA{52, 58, 64, 255} // dark gray
153
-
}
154
-
155
-
statusTextWidth := statusArea.TextWidth(statusText, textSize)
156
-
badgePadding := 12
157
-
badgeHeight := int(textSize) + (badgePadding * 2)
158
-
badgeWidth := iconSize + badgePadding + statusTextWidth + (badgePadding * 2)
159
-
cornerRadius := 8
160
-
badgeX := 60
161
-
badgeY := 0
162
-
163
-
statusArea.DrawRoundedRect(badgeX, badgeY, badgeWidth, badgeHeight, cornerRadius, statusColor)
164
-
165
-
whiteColor := color.RGBA{255, 255, 255, 255}
166
-
iconX := statsX + badgePadding
167
-
iconY := statsY + (badgeHeight-iconSize)/2
168
-
err = statusArea.DrawLucideIcon(statusIcon, iconX, iconY, iconSize, whiteColor)
169
-
if err != nil {
170
-
log.Printf("failed to draw status icon: %v", err)
171
-
}
172
-
173
-
textX := statsX + badgePadding + iconSize + badgePadding
174
-
textY := statsY + (badgeHeight-int(textSize))/2 - 5
175
-
err = statusArea.DrawTextAt(statusText, textX, textY, whiteColor, textSize, ogcard.Top, ogcard.Left)
176
-
if err != nil {
177
-
log.Printf("failed to draw status text: %v", err)
178
-
}
179
-
180
-
currentX := statsX + badgeWidth + 50
181
-
182
-
// Draw comment count
183
-
err = statusArea.DrawLucideIcon("message-square", currentX, iconY, iconSize, iconColor)
184
-
if err != nil {
185
-
log.Printf("failed to draw comment icon: %v", err)
186
-
}
187
-
188
-
currentX += iconSize + 15
189
-
commentText := fmt.Sprintf("%d comments", commentCount)
190
-
if commentCount == 1 {
191
-
commentText = "1 comment"
192
-
}
193
-
err = statusArea.DrawTextAt(commentText, currentX, textY, iconColor, textSize, ogcard.Top, ogcard.Left)
194
-
if err != nil {
195
-
log.Printf("failed to draw comment text: %v", err)
196
-
}
197
-
198
-
// Draw dolly logo on the right side
199
-
dollyBounds := dollyArea.Img.Bounds()
200
-
dollySize := 90
201
-
dollyX := dollyBounds.Min.X + (dollyBounds.Dx() / 2) - (dollySize / 2)
202
-
dollyY := statsY + iconBaselineOffset - dollySize/2 + 25
203
-
dollyColor := color.RGBA{180, 180, 180, 255} // light gray
204
-
err = dollyArea.DrawDolly(dollyX, dollyY, dollySize, dollyColor)
205
-
if err != nil {
206
-
log.Printf("dolly not available (this is ok): %v", err)
207
-
}
208
-
209
-
// Draw "opened by @author" and date at the bottom with more spacing
210
-
labelY := statsY + iconSize + 30
211
-
212
-
// Format the opened date
213
-
openedDate := issue.Created.Format("Jan 2, 2006")
214
-
metaText := fmt.Sprintf("opened by %s · %s", authorHandle, openedDate)
215
-
216
-
err = statusArea.DrawTextAt(metaText, statsX, labelY, iconColor, labelSize, ogcard.Top, ogcard.Left)
217
-
if err != nil {
218
-
log.Printf("failed to draw metadata: %v", err)
219
-
}
220
-
221
-
return mainCard, nil
222
-
}
223
-
224
13
func (rp *Issues) IssueOpenGraphSummary(w http.ResponseWriter, r *http.Request) {
225
14
f, err := rp.repoResolver.Resolve(r)
226
15
if err != nil {
···
235
24
return
236
25
}
237
26
238
-
// Get comment count
239
-
commentCount := len(issue.Comments)
240
-
241
-
// Get owner handle for avatar
242
27
var ownerHandle string
243
-
owner, err := rp.idResolver.ResolveIdent(r.Context(), f.Did)
28
+
owner, err := rp.idResolver.ResolveIdent(context.Background(), f.Did)
244
29
if err != nil {
245
30
ownerHandle = f.Did
246
31
} else {
247
32
ownerHandle = "@" + owner.Handle.String()
248
33
}
249
34
250
-
card, err := rp.drawIssueSummaryCard(issue, f, commentCount, ownerHandle)
35
+
var authorHandle string
36
+
author, err := rp.idResolver.ResolveIdent(context.Background(), issue.Did)
251
37
if err != nil {
252
-
log.Println("failed to draw issue summary card", err)
253
-
http.Error(w, "failed to draw issue summary card", http.StatusInternalServerError)
254
-
return
38
+
authorHandle = issue.Did
39
+
} else {
40
+
authorHandle = "@" + author.Handle.String()
255
41
}
256
42
257
-
var imageBuffer bytes.Buffer
258
-
err = png.Encode(&imageBuffer, card.Img)
43
+
avatarUrl := rp.pages.AvatarUrl(authorHandle, "256")
44
+
45
+
status := "closed"
46
+
if issue.Open {
47
+
status = "open"
48
+
}
49
+
50
+
commentCount := len(issue.Comments)
51
+
52
+
payload := ogcard.IssueCardPayload{
53
+
Type: "issue",
54
+
RepoName: f.Name,
55
+
OwnerHandle: ownerHandle,
56
+
AvatarUrl: avatarUrl,
57
+
Title: issue.Title,
58
+
IssueNumber: issue.IssueId,
59
+
Status: status,
60
+
Labels: []ogcard.LabelData{},
61
+
CommentCount: commentCount,
62
+
ReactionCount: 0,
63
+
CreatedAt: issue.Created.Format(time.RFC3339),
64
+
}
65
+
66
+
imageBytes, err := rp.ogcardClient.RenderIssueCard(r.Context(), payload)
259
67
if err != nil {
260
-
log.Println("failed to encode issue summary card", err)
261
-
http.Error(w, "failed to encode issue summary card", http.StatusInternalServerError)
68
+
log.Println("failed to render issue card", err)
69
+
http.Error(w, "failed to render issue card", http.StatusInternalServerError)
262
70
return
263
71
}
264
-
265
-
imageBytes := imageBuffer.Bytes()
266
72
267
73
w.Header().Set("Content-Type", "image/png")
268
-
w.Header().Set("Cache-Control", "public, max-age=3600") // 1 hour
74
+
w.Header().Set("Cache-Control", "public, max-age=3600")
269
75
w.WriteHeader(http.StatusOK)
270
76
_, err = w.Write(imageBytes)
271
77
if err != nil {
272
-
log.Println("failed to write issue summary card", err)
78
+
log.Println("failed to write issue card", err)
273
79
return
274
80
}
275
81
}
+5
appview/ogcard/.gitignore
+5
appview/ogcard/.gitignore
-640
appview/ogcard/card.go
-640
appview/ogcard/card.go
···
1
-
// Copyright 2024 The Forgejo Authors. All rights reserved.
2
-
// Copyright 2025 The Tangled Authors -- repurposed for Tangled use.
3
-
// SPDX-License-Identifier: MIT
4
-
5
-
package ogcard
6
-
7
-
import (
8
-
"bytes"
9
-
"fmt"
10
-
"html/template"
11
-
"image"
12
-
"image/color"
13
-
"io"
14
-
"log"
15
-
"math"
16
-
"net/http"
17
-
"strings"
18
-
"sync"
19
-
"time"
20
-
21
-
"github.com/goki/freetype"
22
-
"github.com/goki/freetype/truetype"
23
-
"github.com/srwiley/oksvg"
24
-
"github.com/srwiley/rasterx"
25
-
"golang.org/x/image/draw"
26
-
"golang.org/x/image/font"
27
-
"tangled.org/core/appview/pages"
28
-
29
-
_ "golang.org/x/image/webp" // for processing webp images
30
-
)
31
-
32
-
type Card struct {
33
-
Img *image.RGBA
34
-
Font *truetype.Font
35
-
Margin int
36
-
Width int
37
-
Height int
38
-
}
39
-
40
-
var fontCache = sync.OnceValues(func() (*truetype.Font, error) {
41
-
interVar, err := pages.Files.ReadFile("static/fonts/InterVariable.ttf")
42
-
if err != nil {
43
-
return nil, err
44
-
}
45
-
return truetype.Parse(interVar)
46
-
})
47
-
48
-
// DefaultSize returns the default size for a card
49
-
func DefaultSize() (int, int) {
50
-
return 1200, 630
51
-
}
52
-
53
-
// NewCard creates a new card with the given dimensions in pixels
54
-
func NewCard(width, height int) (*Card, error) {
55
-
img := image.NewRGBA(image.Rect(0, 0, width, height))
56
-
draw.Draw(img, img.Bounds(), image.NewUniform(color.White), image.Point{}, draw.Src)
57
-
58
-
font, err := fontCache()
59
-
if err != nil {
60
-
return nil, err
61
-
}
62
-
63
-
return &Card{
64
-
Img: img,
65
-
Font: font,
66
-
Margin: 0,
67
-
Width: width,
68
-
Height: height,
69
-
}, nil
70
-
}
71
-
72
-
// Split splits the card horizontally or vertically by a given percentage; the first card returned has the percentage
73
-
// size, and the second card has the remainder. Both cards draw to a subsection of the same image buffer.
74
-
func (c *Card) Split(vertical bool, percentage int) (*Card, *Card) {
75
-
bounds := c.Img.Bounds()
76
-
bounds = image.Rect(bounds.Min.X+c.Margin, bounds.Min.Y+c.Margin, bounds.Max.X-c.Margin, bounds.Max.Y-c.Margin)
77
-
if vertical {
78
-
mid := (bounds.Dx() * percentage / 100) + bounds.Min.X
79
-
subleft := c.Img.SubImage(image.Rect(bounds.Min.X, bounds.Min.Y, mid, bounds.Max.Y)).(*image.RGBA)
80
-
subright := c.Img.SubImage(image.Rect(mid, bounds.Min.Y, bounds.Max.X, bounds.Max.Y)).(*image.RGBA)
81
-
return &Card{Img: subleft, Font: c.Font, Width: subleft.Bounds().Dx(), Height: subleft.Bounds().Dy()},
82
-
&Card{Img: subright, Font: c.Font, Width: subright.Bounds().Dx(), Height: subright.Bounds().Dy()}
83
-
}
84
-
mid := (bounds.Dy() * percentage / 100) + bounds.Min.Y
85
-
subtop := c.Img.SubImage(image.Rect(bounds.Min.X, bounds.Min.Y, bounds.Max.X, mid)).(*image.RGBA)
86
-
subbottom := c.Img.SubImage(image.Rect(bounds.Min.X, mid, bounds.Max.X, bounds.Max.Y)).(*image.RGBA)
87
-
return &Card{Img: subtop, Font: c.Font, Width: subtop.Bounds().Dx(), Height: subtop.Bounds().Dy()},
88
-
&Card{Img: subbottom, Font: c.Font, Width: subbottom.Bounds().Dx(), Height: subbottom.Bounds().Dy()}
89
-
}
90
-
91
-
// SetMargin sets the margins for the card
92
-
func (c *Card) SetMargin(margin int) {
93
-
c.Margin = margin
94
-
}
95
-
96
-
type (
97
-
VAlign int64
98
-
HAlign int64
99
-
)
100
-
101
-
const (
102
-
Top VAlign = iota
103
-
Middle
104
-
Bottom
105
-
)
106
-
107
-
const (
108
-
Left HAlign = iota
109
-
Center
110
-
Right
111
-
)
112
-
113
-
// DrawText draws text within the card, respecting margins and alignment
114
-
func (c *Card) DrawText(text string, textColor color.Color, sizePt float64, valign VAlign, halign HAlign) ([]string, error) {
115
-
ft := freetype.NewContext()
116
-
ft.SetDPI(72)
117
-
ft.SetFont(c.Font)
118
-
ft.SetFontSize(sizePt)
119
-
ft.SetClip(c.Img.Bounds())
120
-
ft.SetDst(c.Img)
121
-
ft.SetSrc(image.NewUniform(textColor))
122
-
123
-
face := truetype.NewFace(c.Font, &truetype.Options{Size: sizePt, DPI: 72})
124
-
fontHeight := ft.PointToFixed(sizePt).Ceil()
125
-
126
-
bounds := c.Img.Bounds()
127
-
bounds = image.Rect(bounds.Min.X+c.Margin, bounds.Min.Y+c.Margin, bounds.Max.X-c.Margin, bounds.Max.Y-c.Margin)
128
-
boxWidth, boxHeight := bounds.Size().X, bounds.Size().Y
129
-
// draw.Draw(c.Img, bounds, image.NewUniform(color.Gray{128}), image.Point{}, draw.Src) // Debug draw box
130
-
131
-
// Try to apply wrapping to this text; we'll find the most text that will fit into one line, record that line, move
132
-
// on. We precalculate each line before drawing so that we can support valign="middle" correctly which requires
133
-
// knowing the total height, which is related to how many lines we'll have.
134
-
lines := make([]string, 0)
135
-
textWords := strings.Split(text, " ")
136
-
currentLine := ""
137
-
heightTotal := 0
138
-
139
-
for {
140
-
if len(textWords) == 0 {
141
-
// Ran out of words.
142
-
if currentLine != "" {
143
-
heightTotal += fontHeight
144
-
lines = append(lines, currentLine)
145
-
}
146
-
break
147
-
}
148
-
149
-
nextWord := textWords[0]
150
-
proposedLine := currentLine
151
-
if proposedLine != "" {
152
-
proposedLine += " "
153
-
}
154
-
proposedLine += nextWord
155
-
156
-
proposedLineWidth := font.MeasureString(face, proposedLine)
157
-
if proposedLineWidth.Ceil() > boxWidth {
158
-
// no, proposed line is too big; we'll use the last "currentLine"
159
-
heightTotal += fontHeight
160
-
if currentLine != "" {
161
-
lines = append(lines, currentLine)
162
-
currentLine = ""
163
-
// leave nextWord in textWords and keep going
164
-
} else {
165
-
// just nextWord by itself doesn't fit on a line; well, we can't skip it, but we'll consume it
166
-
// regardless as a line by itself. It will be clipped by the drawing routine.
167
-
lines = append(lines, nextWord)
168
-
textWords = textWords[1:]
169
-
}
170
-
} else {
171
-
// yes, it will fit
172
-
currentLine = proposedLine
173
-
textWords = textWords[1:]
174
-
}
175
-
}
176
-
177
-
textY := 0
178
-
switch valign {
179
-
case Top:
180
-
textY = fontHeight
181
-
case Bottom:
182
-
textY = boxHeight - heightTotal + fontHeight
183
-
case Middle:
184
-
textY = ((boxHeight - heightTotal) / 2) + fontHeight
185
-
}
186
-
187
-
for _, line := range lines {
188
-
lineWidth := font.MeasureString(face, line)
189
-
190
-
textX := 0
191
-
switch halign {
192
-
case Left:
193
-
textX = 0
194
-
case Right:
195
-
textX = boxWidth - lineWidth.Ceil()
196
-
case Center:
197
-
textX = (boxWidth - lineWidth.Ceil()) / 2
198
-
}
199
-
200
-
pt := freetype.Pt(bounds.Min.X+textX, bounds.Min.Y+textY)
201
-
_, err := ft.DrawString(line, pt)
202
-
if err != nil {
203
-
return nil, err
204
-
}
205
-
206
-
textY += fontHeight
207
-
}
208
-
209
-
return lines, nil
210
-
}
211
-
212
-
// DrawTextAt draws text at a specific position with the given alignment
213
-
func (c *Card) DrawTextAt(text string, x, y int, textColor color.Color, sizePt float64, valign VAlign, halign HAlign) error {
214
-
_, err := c.DrawTextAtWithWidth(text, x, y, textColor, sizePt, valign, halign)
215
-
return err
216
-
}
217
-
218
-
// DrawTextAtWithWidth draws text at a specific position and returns the text width
219
-
func (c *Card) DrawTextAtWithWidth(text string, x, y int, textColor color.Color, sizePt float64, valign VAlign, halign HAlign) (int, error) {
220
-
ft := freetype.NewContext()
221
-
ft.SetDPI(72)
222
-
ft.SetFont(c.Font)
223
-
ft.SetFontSize(sizePt)
224
-
ft.SetClip(c.Img.Bounds())
225
-
ft.SetDst(c.Img)
226
-
ft.SetSrc(image.NewUniform(textColor))
227
-
228
-
face := truetype.NewFace(c.Font, &truetype.Options{Size: sizePt, DPI: 72})
229
-
fontHeight := ft.PointToFixed(sizePt).Ceil()
230
-
lineWidth := font.MeasureString(face, text)
231
-
textWidth := lineWidth.Ceil()
232
-
233
-
// Adjust position based on alignment
234
-
adjustedX := x
235
-
adjustedY := y
236
-
237
-
switch halign {
238
-
case Left:
239
-
// x is already at the left position
240
-
case Right:
241
-
adjustedX = x - textWidth
242
-
case Center:
243
-
adjustedX = x - textWidth/2
244
-
}
245
-
246
-
switch valign {
247
-
case Top:
248
-
adjustedY = y + fontHeight
249
-
case Bottom:
250
-
adjustedY = y
251
-
case Middle:
252
-
adjustedY = y + fontHeight/2
253
-
}
254
-
255
-
pt := freetype.Pt(adjustedX, adjustedY)
256
-
_, err := ft.DrawString(text, pt)
257
-
return textWidth, err
258
-
}
259
-
260
-
func (c *Card) FontHeight(sizePt float64) int {
261
-
ft := freetype.NewContext()
262
-
ft.SetDPI(72)
263
-
ft.SetFont(c.Font)
264
-
ft.SetFontSize(sizePt)
265
-
return ft.PointToFixed(sizePt).Ceil()
266
-
}
267
-
268
-
func (c *Card) TextWidth(text string, sizePt float64) int {
269
-
face := truetype.NewFace(c.Font, &truetype.Options{Size: sizePt, DPI: 72})
270
-
lineWidth := font.MeasureString(face, text)
271
-
textWidth := lineWidth.Ceil()
272
-
return textWidth
273
-
}
274
-
275
-
// DrawBoldText draws bold text by rendering multiple times with slight offsets
276
-
func (c *Card) DrawBoldText(text string, x, y int, textColor color.Color, sizePt float64, valign VAlign, halign HAlign) (int, error) {
277
-
// Draw the text multiple times with slight offsets to create bold effect
278
-
offsets := []struct{ dx, dy int }{
279
-
{0, 0}, // original
280
-
{1, 0}, // right
281
-
{0, 1}, // down
282
-
{1, 1}, // diagonal
283
-
}
284
-
285
-
var width int
286
-
for _, offset := range offsets {
287
-
w, err := c.DrawTextAtWithWidth(text, x+offset.dx, y+offset.dy, textColor, sizePt, valign, halign)
288
-
if err != nil {
289
-
return 0, err
290
-
}
291
-
if width == 0 {
292
-
width = w
293
-
}
294
-
}
295
-
return width, nil
296
-
}
297
-
298
-
func BuildSVGIconFromData(svgData []byte, iconColor color.Color) (*oksvg.SvgIcon, error) {
299
-
// Convert color to hex string for SVG
300
-
rgba, isRGBA := iconColor.(color.RGBA)
301
-
if !isRGBA {
302
-
r, g, b, a := iconColor.RGBA()
303
-
rgba = color.RGBA{uint8(r >> 8), uint8(g >> 8), uint8(b >> 8), uint8(a >> 8)}
304
-
}
305
-
colorHex := fmt.Sprintf("#%02x%02x%02x", rgba.R, rgba.G, rgba.B)
306
-
307
-
// Replace currentColor with our desired color in the SVG
308
-
svgString := string(svgData)
309
-
svgString = strings.ReplaceAll(svgString, "currentColor", colorHex)
310
-
311
-
// Make the stroke thicker
312
-
svgString = strings.ReplaceAll(svgString, `stroke-width="2"`, `stroke-width="3"`)
313
-
314
-
// Parse SVG
315
-
icon, err := oksvg.ReadIconStream(strings.NewReader(svgString))
316
-
if err != nil {
317
-
return nil, fmt.Errorf("failed to parse SVG: %w", err)
318
-
}
319
-
320
-
return icon, nil
321
-
}
322
-
323
-
func BuildSVGIconFromPath(svgPath string, iconColor color.Color) (*oksvg.SvgIcon, error) {
324
-
svgData, err := pages.Files.ReadFile(svgPath)
325
-
if err != nil {
326
-
return nil, fmt.Errorf("failed to read SVG file %s: %w", svgPath, err)
327
-
}
328
-
329
-
icon, err := BuildSVGIconFromData(svgData, iconColor)
330
-
if err != nil {
331
-
return nil, fmt.Errorf("failed to build SVG icon %s: %w", svgPath, err)
332
-
}
333
-
334
-
return icon, nil
335
-
}
336
-
337
-
func BuildLucideIcon(name string, iconColor color.Color) (*oksvg.SvgIcon, error) {
338
-
return BuildSVGIconFromPath(fmt.Sprintf("static/icons/%s.svg", name), iconColor)
339
-
}
340
-
341
-
func (c *Card) DrawLucideIcon(name string, x, y, size int, iconColor color.Color) error {
342
-
icon, err := BuildSVGIconFromPath(fmt.Sprintf("static/icons/%s.svg", name), iconColor)
343
-
if err != nil {
344
-
return err
345
-
}
346
-
347
-
c.DrawSVGIcon(icon, x, y, size)
348
-
349
-
return nil
350
-
}
351
-
352
-
func (c *Card) DrawDolly(x, y, size int, iconColor color.Color) error {
353
-
tpl, err := template.New("dolly").
354
-
ParseFS(pages.Files, "templates/fragments/dolly/logo.html")
355
-
if err != nil {
356
-
return fmt.Errorf("failed to read dolly template: %w", err)
357
-
}
358
-
359
-
var svgData bytes.Buffer
360
-
if err = tpl.ExecuteTemplate(&svgData, "fragments/dolly/logo", nil); err != nil {
361
-
return fmt.Errorf("failed to execute dolly template: %w", err)
362
-
}
363
-
364
-
icon, err := BuildSVGIconFromData(svgData.Bytes(), iconColor)
365
-
if err != nil {
366
-
return err
367
-
}
368
-
369
-
c.DrawSVGIcon(icon, x, y, size)
370
-
371
-
return nil
372
-
}
373
-
374
-
// DrawSVGIcon draws an SVG icon from the embedded files at the specified position
375
-
func (c *Card) DrawSVGIcon(icon *oksvg.SvgIcon, x, y, size int) {
376
-
// Set the icon size
377
-
w, h := float64(size), float64(size)
378
-
icon.SetTarget(0, 0, w, h)
379
-
380
-
// Create a temporary RGBA image for the icon
381
-
iconImg := image.NewRGBA(image.Rect(0, 0, size, size))
382
-
383
-
// Create scanner and rasterizer
384
-
scanner := rasterx.NewScannerGV(size, size, iconImg, iconImg.Bounds())
385
-
raster := rasterx.NewDasher(size, size, scanner)
386
-
387
-
// Draw the icon
388
-
icon.Draw(raster, 1.0)
389
-
390
-
// Draw the icon onto the card at the specified position
391
-
bounds := c.Img.Bounds()
392
-
destRect := image.Rect(x, y, x+size, y+size)
393
-
394
-
// Make sure we don't draw outside the card bounds
395
-
if destRect.Max.X > bounds.Max.X {
396
-
destRect.Max.X = bounds.Max.X
397
-
}
398
-
if destRect.Max.Y > bounds.Max.Y {
399
-
destRect.Max.Y = bounds.Max.Y
400
-
}
401
-
402
-
draw.Draw(c.Img, destRect, iconImg, image.Point{}, draw.Over)
403
-
}
404
-
405
-
// DrawImage fills the card with an image, scaled to maintain the original aspect ratio and centered with respect to the non-filled dimension
406
-
func (c *Card) DrawImage(img image.Image) {
407
-
bounds := c.Img.Bounds()
408
-
targetRect := image.Rect(bounds.Min.X+c.Margin, bounds.Min.Y+c.Margin, bounds.Max.X-c.Margin, bounds.Max.Y-c.Margin)
409
-
srcBounds := img.Bounds()
410
-
srcAspect := float64(srcBounds.Dx()) / float64(srcBounds.Dy())
411
-
targetAspect := float64(targetRect.Dx()) / float64(targetRect.Dy())
412
-
413
-
var scale float64
414
-
if srcAspect > targetAspect {
415
-
// Image is wider than target, scale by width
416
-
scale = float64(targetRect.Dx()) / float64(srcBounds.Dx())
417
-
} else {
418
-
// Image is taller or equal, scale by height
419
-
scale = float64(targetRect.Dy()) / float64(srcBounds.Dy())
420
-
}
421
-
422
-
newWidth := int(math.Round(float64(srcBounds.Dx()) * scale))
423
-
newHeight := int(math.Round(float64(srcBounds.Dy()) * scale))
424
-
425
-
// Center the image within the target rectangle
426
-
offsetX := (targetRect.Dx() - newWidth) / 2
427
-
offsetY := (targetRect.Dy() - newHeight) / 2
428
-
429
-
scaledRect := image.Rect(targetRect.Min.X+offsetX, targetRect.Min.Y+offsetY, targetRect.Min.X+offsetX+newWidth, targetRect.Min.Y+offsetY+newHeight)
430
-
draw.CatmullRom.Scale(c.Img, scaledRect, img, srcBounds, draw.Over, nil)
431
-
}
432
-
433
-
func fallbackImage() image.Image {
434
-
// can't usage image.Uniform(color.White) because it's infinitely sized causing a panic in the scaler in DrawImage
435
-
img := image.NewRGBA(image.Rect(0, 0, 1, 1))
436
-
img.Set(0, 0, color.White)
437
-
return img
438
-
}
439
-
440
-
// As defensively as possible, attempt to load an image from a presumed external and untrusted URL
441
-
func (c *Card) fetchExternalImage(url string) (image.Image, bool) {
442
-
// Use a short timeout; in the event of any failure we'll be logging and returning a placeholder, but we don't want
443
-
// this rendering process to be slowed down
444
-
client := &http.Client{
445
-
Timeout: 1 * time.Second, // 1 second timeout
446
-
}
447
-
448
-
resp, err := client.Get(url)
449
-
if err != nil {
450
-
log.Printf("error when fetching external image from %s: %v", url, err)
451
-
return nil, false
452
-
}
453
-
defer resp.Body.Close()
454
-
455
-
if resp.StatusCode != http.StatusOK {
456
-
log.Printf("non-OK error code when fetching external image from %s: %s", url, resp.Status)
457
-
return nil, false
458
-
}
459
-
460
-
contentType := resp.Header.Get("Content-Type")
461
-
462
-
body := resp.Body
463
-
bodyBytes, err := io.ReadAll(body)
464
-
if err != nil {
465
-
log.Printf("error when fetching external image from %s: %v", url, err)
466
-
return nil, false
467
-
}
468
-
469
-
// Handle SVG separately
470
-
if contentType == "image/svg+xml" || strings.HasSuffix(url, ".svg") {
471
-
return convertSVGToPNG(bodyBytes)
472
-
}
473
-
474
-
// Support content types are in-sync with the allowed custom avatar file types
475
-
if contentType != "image/png" && contentType != "image/jpeg" && contentType != "image/gif" && contentType != "image/webp" {
476
-
log.Printf("fetching external image returned unsupported Content-Type which was ignored: %s", contentType)
477
-
return nil, false
478
-
}
479
-
480
-
bodyBuffer := bytes.NewReader(bodyBytes)
481
-
_, imgType, err := image.DecodeConfig(bodyBuffer)
482
-
if err != nil {
483
-
log.Printf("error when decoding external image from %s: %v", url, err)
484
-
return nil, false
485
-
}
486
-
487
-
// Verify that we have a match between actual data understood in the image body and the reported Content-Type
488
-
if (contentType == "image/png" && imgType != "png") ||
489
-
(contentType == "image/jpeg" && imgType != "jpeg") ||
490
-
(contentType == "image/gif" && imgType != "gif") ||
491
-
(contentType == "image/webp" && imgType != "webp") {
492
-
log.Printf("while fetching external image, mismatched image body (%s) and Content-Type (%s)", imgType, contentType)
493
-
return nil, false
494
-
}
495
-
496
-
_, err = bodyBuffer.Seek(0, io.SeekStart) // reset for actual decode
497
-
if err != nil {
498
-
log.Printf("error w/ bodyBuffer.Seek")
499
-
return nil, false
500
-
}
501
-
img, _, err := image.Decode(bodyBuffer)
502
-
if err != nil {
503
-
log.Printf("error when decoding external image from %s: %v", url, err)
504
-
return nil, false
505
-
}
506
-
507
-
return img, true
508
-
}
509
-
510
-
// convertSVGToPNG converts SVG data to a PNG image
511
-
func convertSVGToPNG(svgData []byte) (image.Image, bool) {
512
-
// Parse the SVG
513
-
icon, err := oksvg.ReadIconStream(bytes.NewReader(svgData))
514
-
if err != nil {
515
-
log.Printf("error parsing SVG: %v", err)
516
-
return nil, false
517
-
}
518
-
519
-
// Set a reasonable size for the rasterized image
520
-
width := 256
521
-
height := 256
522
-
icon.SetTarget(0, 0, float64(width), float64(height))
523
-
524
-
// Create an image to draw on
525
-
rgba := image.NewRGBA(image.Rect(0, 0, width, height))
526
-
527
-
// Fill with white background
528
-
draw.Draw(rgba, rgba.Bounds(), &image.Uniform{color.White}, image.Point{}, draw.Src)
529
-
530
-
// Create a scanner and rasterize the SVG
531
-
scanner := rasterx.NewScannerGV(width, height, rgba, rgba.Bounds())
532
-
raster := rasterx.NewDasher(width, height, scanner)
533
-
534
-
icon.Draw(raster, 1.0)
535
-
536
-
return rgba, true
537
-
}
538
-
539
-
func (c *Card) DrawExternalImage(url string) {
540
-
image, ok := c.fetchExternalImage(url)
541
-
if !ok {
542
-
image = fallbackImage()
543
-
}
544
-
c.DrawImage(image)
545
-
}
546
-
547
-
// DrawCircularExternalImage draws an external image as a circle at the specified position
548
-
func (c *Card) DrawCircularExternalImage(url string, x, y, size int) error {
549
-
img, ok := c.fetchExternalImage(url)
550
-
if !ok {
551
-
img = fallbackImage()
552
-
}
553
-
554
-
// Create a circular mask
555
-
circle := image.NewRGBA(image.Rect(0, 0, size, size))
556
-
center := size / 2
557
-
radius := float64(size / 2)
558
-
559
-
// Scale the source image to fit the circle
560
-
srcBounds := img.Bounds()
561
-
scaledImg := image.NewRGBA(image.Rect(0, 0, size, size))
562
-
draw.CatmullRom.Scale(scaledImg, scaledImg.Bounds(), img, srcBounds, draw.Src, nil)
563
-
564
-
// Draw the image with circular clipping
565
-
for cy := range size {
566
-
for cx := range size {
567
-
// Calculate distance from center
568
-
dx := float64(cx - center)
569
-
dy := float64(cy - center)
570
-
distance := math.Sqrt(dx*dx + dy*dy)
571
-
572
-
// Only draw pixels within the circle
573
-
if distance <= radius {
574
-
circle.Set(cx, cy, scaledImg.At(cx, cy))
575
-
}
576
-
}
577
-
}
578
-
579
-
// Draw the circle onto the card
580
-
bounds := c.Img.Bounds()
581
-
destRect := image.Rect(x, y, x+size, y+size)
582
-
583
-
// Make sure we don't draw outside the card bounds
584
-
if destRect.Max.X > bounds.Max.X {
585
-
destRect.Max.X = bounds.Max.X
586
-
}
587
-
if destRect.Max.Y > bounds.Max.Y {
588
-
destRect.Max.Y = bounds.Max.Y
589
-
}
590
-
591
-
draw.Draw(c.Img, destRect, circle, image.Point{}, draw.Over)
592
-
593
-
return nil
594
-
}
595
-
596
-
// DrawRect draws a rect with the given color
597
-
func (c *Card) DrawRect(startX, startY, endX, endY int, color color.Color) {
598
-
draw.Draw(c.Img, image.Rect(startX, startY, endX, endY), &image.Uniform{color}, image.Point{}, draw.Src)
599
-
}
600
-
601
-
// drawRoundedRect draws a filled rounded rectangle on the given card
602
-
func (card *Card) DrawRoundedRect(x, y, width, height, cornerRadius int, fillColor color.RGBA) {
603
-
cardBounds := card.Img.Bounds()
604
-
for py := y; py < y+height; py++ {
605
-
for px := x; px < x+width; px++ {
606
-
// calculate distance from corners
607
-
dx := 0
608
-
dy := 0
609
-
610
-
// check which corner region we're in
611
-
if px < x+cornerRadius && py < y+cornerRadius {
612
-
// top-left corner
613
-
dx = x + cornerRadius - px
614
-
dy = y + cornerRadius - py
615
-
} else if px >= x+width-cornerRadius && py < y+cornerRadius {
616
-
// top-right corner
617
-
dx = px - (x + width - cornerRadius - 1)
618
-
dy = y + cornerRadius - py
619
-
} else if px < x+cornerRadius && py >= y+height-cornerRadius {
620
-
// bottom-left corner
621
-
dx = x + cornerRadius - px
622
-
dy = py - (y + height - cornerRadius - 1)
623
-
} else if px >= x+width-cornerRadius && py >= y+height-cornerRadius {
624
-
// Bottom-right corner
625
-
dx = px - (x + width - cornerRadius - 1)
626
-
dy = py - (y + height - cornerRadius - 1)
627
-
}
628
-
629
-
// if we're in a corner, check if we're within the radius
630
-
inCorner := (dx > 0 || dy > 0)
631
-
withinRadius := dx*dx+dy*dy <= cornerRadius*cornerRadius
632
-
633
-
// draw pixel if not in corner, or in corner and within radius
634
-
// check bounds relative to the card's image bounds
635
-
if (!inCorner || withinRadius) && px >= 0 && px < cardBounds.Dx() && py >= 0 && py < cardBounds.Dy() {
636
-
card.Img.Set(px+cardBounds.Min.X, py+cardBounds.Min.Y, fillColor)
637
-
}
638
-
}
639
-
}
640
-
}
+117
appview/ogcard/client.go
+117
appview/ogcard/client.go
···
1
+
package ogcard
2
+
3
+
import (
4
+
"bytes"
5
+
"context"
6
+
"encoding/json"
7
+
"fmt"
8
+
"io"
9
+
"net/http"
10
+
"time"
11
+
)
12
+
13
+
type Client struct {
14
+
host string
15
+
client *http.Client
16
+
}
17
+
18
+
func NewClient(host string) *Client {
19
+
return &Client{
20
+
host: host,
21
+
client: &http.Client{
22
+
Timeout: 10 * time.Second,
23
+
},
24
+
}
25
+
}
26
+
27
+
type LabelData struct {
28
+
Name string `json:"name"`
29
+
Color string `json:"color"`
30
+
}
31
+
32
+
type LanguageData struct {
33
+
Color string `json:"color"`
34
+
Percentage float32 `json:"percentage"`
35
+
}
36
+
37
+
type RepositoryCardPayload struct {
38
+
Type string `json:"type"`
39
+
RepoName string `json:"repoName"`
40
+
OwnerHandle string `json:"ownerHandle"`
41
+
Stars int `json:"stars"`
42
+
Pulls int `json:"pulls"`
43
+
Issues int `json:"issues"`
44
+
UpdatedAt string `json:"updatedAt"`
45
+
AvatarUrl string `json:"avatarUrl"`
46
+
Languages []LanguageData `json:"languages"`
47
+
}
48
+
49
+
type IssueCardPayload struct {
50
+
Type string `json:"type"`
51
+
RepoName string `json:"repoName"`
52
+
OwnerHandle string `json:"ownerHandle"`
53
+
AvatarUrl string `json:"avatarUrl"`
54
+
Title string `json:"title"`
55
+
IssueNumber int `json:"issueNumber"`
56
+
Status string `json:"status"`
57
+
Labels []LabelData `json:"labels"`
58
+
CommentCount int `json:"commentCount"`
59
+
ReactionCount int `json:"reactionCount"`
60
+
CreatedAt string `json:"createdAt"`
61
+
}
62
+
63
+
type PullRequestCardPayload struct {
64
+
Type string `json:"type"`
65
+
RepoName string `json:"repoName"`
66
+
OwnerHandle string `json:"ownerHandle"`
67
+
AvatarUrl string `json:"avatarUrl"`
68
+
Title string `json:"title"`
69
+
PullRequestNumber int `json:"pullRequestNumber"`
70
+
Status string `json:"status"`
71
+
FilesChanged int `json:"filesChanged"`
72
+
Additions int `json:"additions"`
73
+
Deletions int `json:"deletions"`
74
+
Rounds int `json:"rounds"`
75
+
CommentCount int `json:"commentCount"`
76
+
ReactionCount int `json:"reactionCount"`
77
+
CreatedAt string `json:"createdAt"`
78
+
}
79
+
80
+
func (c *Client) doRequest(ctx context.Context, path string, payload any) ([]byte, error) {
81
+
body, err := json.Marshal(payload)
82
+
if err != nil {
83
+
return nil, fmt.Errorf("marshal payload: %w", err)
84
+
}
85
+
86
+
url := fmt.Sprintf("%s/%s", c.host, path)
87
+
req, err := http.NewRequestWithContext(ctx, "POST", url, bytes.NewReader(body))
88
+
if err != nil {
89
+
return nil, fmt.Errorf("create request: %w", err)
90
+
}
91
+
req.Header.Set("Content-Type", "application/json")
92
+
93
+
resp, err := c.client.Do(req)
94
+
if err != nil {
95
+
return nil, fmt.Errorf("do request: %w", err)
96
+
}
97
+
defer resp.Body.Close()
98
+
99
+
if resp.StatusCode != http.StatusOK {
100
+
respBody, _ := io.ReadAll(resp.Body)
101
+
return nil, fmt.Errorf("unexpected status: %d, body: %s", resp.StatusCode, string(respBody))
102
+
}
103
+
104
+
return io.ReadAll(resp.Body)
105
+
}
106
+
107
+
func (c *Client) RenderRepositoryCard(ctx context.Context, payload RepositoryCardPayload) ([]byte, error) {
108
+
return c.doRequest(ctx, "repository", payload)
109
+
}
110
+
111
+
func (c *Client) RenderIssueCard(ctx context.Context, payload IssueCardPayload) ([]byte, error) {
112
+
return c.doRequest(ctx, "issue", payload)
113
+
}
114
+
115
+
func (c *Client) RenderPullRequestCard(ctx context.Context, payload PullRequestCardPayload) ([]byte, error) {
116
+
return c.doRequest(ctx, "pullRequest", payload)
117
+
}
+28
appview/ogcard/package.json
+28
appview/ogcard/package.json
···
1
+
{
2
+
"name": "@tangled/ogcard-worker",
3
+
"version": "1.0.0",
4
+
"private": true,
5
+
"type": "module",
6
+
"scripts": {
7
+
"dev": "wrangler dev",
8
+
"deploy": "wrangler deploy",
9
+
"typecheck": "tsc --noEmit",
10
+
"test": "bun test",
11
+
"test:fonts": "tsx scripts/test-fonts.ts"
12
+
},
13
+
"dependencies": {
14
+
"@resvg/resvg-js": "^2.6.2",
15
+
"@resvg/resvg-wasm": "^2.6.2",
16
+
"lucide-static": "^0.577.0",
17
+
"preact": "^10.29.0",
18
+
"satori": "^0.25.0",
19
+
"zod": "^4.3.6"
20
+
},
21
+
"devDependencies": {
22
+
"@cloudflare/workers-types": "^4.20260317.1",
23
+
"@types/node": "^25.5.0",
24
+
"tsx": "^4.21.0",
25
+
"typescript": "^5.9.3",
26
+
"wrangler": "^4.75.0"
27
+
}
28
+
}
appview/ogcard/src/__tests__/assets/avatar.jpg
appview/ogcard/src/__tests__/assets/avatar.jpg
This is a binary file and will not be displayed.
+87
appview/ogcard/src/__tests__/fixtures.ts
+87
appview/ogcard/src/__tests__/fixtures.ts
···
1
+
import type {
2
+
RepositoryCardData,
3
+
IssueCardData,
4
+
PullRequestCardData,
5
+
} from "../validation";
6
+
7
+
const LONG_TITLE =
8
+
"fix critical memory leak in WebSocket connection handler that causes server crashes under high load conditions in production environments";
9
+
10
+
export const createRepoData = (avatarUrl: string): RepositoryCardData => ({
11
+
type: "repository",
12
+
repoName: "core",
13
+
ownerHandle: "tangled.org",
14
+
stars: 746,
15
+
pulls: 82,
16
+
issues: 176,
17
+
updatedAt: "updated 2 hours ago",
18
+
avatarUrl,
19
+
languages: [
20
+
{ color: "#00ADD8", percentage: 65 },
21
+
{ color: "#e34c26", percentage: 20 },
22
+
{ color: "#7e7eff", percentage: 10 },
23
+
{ color: "#663399", percentage: 3 },
24
+
{ color: "#f1e05a", percentage: 2 },
25
+
],
26
+
});
27
+
28
+
export const createIssueData = (
29
+
avatarUrl: string,
30
+
overrides?: Partial<IssueCardData>,
31
+
): IssueCardData => ({
32
+
type: "issue",
33
+
repoName: "core",
34
+
ownerHandle: "tangled.org",
35
+
avatarUrl,
36
+
title: "feature request: sync fork button",
37
+
issueNumber: 8,
38
+
status: "open",
39
+
labels: [
40
+
{ name: "feature", color: "#4639d6" },
41
+
{ name: "help-wanted", color: "#008672" },
42
+
{ name: "enhancement", color: "#0052cc" },
43
+
],
44
+
commentCount: 12,
45
+
reactionCount: 5,
46
+
createdAt: "29 jan 2026",
47
+
...overrides,
48
+
});
49
+
50
+
export const createPullRequestData = (
51
+
avatarUrl: string,
52
+
overrides?: Partial<PullRequestCardData>,
53
+
): PullRequestCardData => ({
54
+
type: "pullRequest",
55
+
repoName: "core",
56
+
ownerHandle: "tangled.org",
57
+
avatarUrl,
58
+
title: "add author description to README.md",
59
+
pullRequestNumber: 1,
60
+
status: "open",
61
+
filesChanged: 2,
62
+
additions: 116,
63
+
deletions: 59,
64
+
rounds: 3,
65
+
commentCount: 12,
66
+
reactionCount: 31,
67
+
createdAt: "29 jan 2026",
68
+
...overrides,
69
+
});
70
+
71
+
export const createLongTitleIssueData = (
72
+
avatarUrl: string,
73
+
overrides?: Partial<IssueCardData>,
74
+
): IssueCardData => ({
75
+
...createIssueData(avatarUrl),
76
+
title: LONG_TITLE,
77
+
...overrides,
78
+
});
79
+
80
+
export const createLongTitlePullRequestData = (
81
+
avatarUrl: string,
82
+
overrides?: Partial<PullRequestCardData>,
83
+
): PullRequestCardData => ({
84
+
...createPullRequestData(avatarUrl),
85
+
title: LONG_TITLE,
86
+
...overrides,
87
+
});
+135
appview/ogcard/src/__tests__/render.test.ts
+135
appview/ogcard/src/__tests__/render.test.ts
···
1
+
import { test, describe, beforeAll } from "bun:test";
2
+
import { writeFileSync, mkdirSync, readFileSync } from "fs";
3
+
import { join } from "path";
4
+
import { h } from "preact";
5
+
import { renderCard } from "../lib/render";
6
+
import { RepositoryCard } from "../components/cards/repository";
7
+
import { IssueCard } from "../components/cards/issue";
8
+
import { PullRequestCard } from "../components/cards/pull-request";
9
+
import {
10
+
repositoryCardSchema,
11
+
issueCardSchema,
12
+
pullRequestCardSchema,
13
+
} from "../validation";
14
+
import {
15
+
createRepoData,
16
+
createIssueData,
17
+
createPullRequestData,
18
+
createLongTitleIssueData,
19
+
createLongTitlePullRequestData,
20
+
} from "./fixtures";
21
+
22
+
const outputDir = join(process.cwd(), "output");
23
+
let avatarDataUri: string;
24
+
25
+
const loadAvatar = (): string => {
26
+
const avatarPath = join(
27
+
process.cwd(),
28
+
"src",
29
+
"__tests__",
30
+
"assets",
31
+
"avatar.jpg",
32
+
);
33
+
const avatarBase64 = readFileSync(avatarPath).toString("base64");
34
+
return `data:image/jpeg;base64,${avatarBase64}`;
35
+
};
36
+
37
+
beforeAll(() => {
38
+
mkdirSync(outputDir, { recursive: true });
39
+
avatarDataUri = loadAvatar();
40
+
});
41
+
42
+
const savePng = (filename: string, buffer: Buffer) => {
43
+
writeFileSync(join(outputDir, filename), buffer);
44
+
};
45
+
46
+
const renderAndSave = async <T>(
47
+
component: ReturnType<typeof h<T>>,
48
+
filename: string,
49
+
) => {
50
+
const { png } = await renderCard(component as any);
51
+
savePng(filename, png);
52
+
};
53
+
54
+
describe("repository card", () => {
55
+
test("renders open repository card", async () => {
56
+
const data = createRepoData(avatarDataUri);
57
+
const validated = repositoryCardSchema.parse(data);
58
+
await renderAndSave(h(RepositoryCard, validated), "repository-card.png");
59
+
});
60
+
});
61
+
62
+
describe("issue cards", () => {
63
+
test("renders open issue", async () => {
64
+
const data = createIssueData(avatarDataUri);
65
+
const validated = issueCardSchema.parse(data);
66
+
await renderAndSave(h(IssueCard, validated), "issue-card.png");
67
+
});
68
+
69
+
test("renders closed issue", async () => {
70
+
const data = createIssueData(avatarDataUri, {
71
+
issueNumber: 5,
72
+
status: "closed",
73
+
labels: [{ name: "wontfix", color: "#6a737d" }],
74
+
reactionCount: 2,
75
+
});
76
+
const validated = issueCardSchema.parse(data);
77
+
await renderAndSave(h(IssueCard, validated), "issue-card-closed.png");
78
+
});
79
+
80
+
test("renders issue with long title", async () => {
81
+
const data = createLongTitleIssueData(avatarDataUri, {
82
+
issueNumber: 42,
83
+
});
84
+
const validated = issueCardSchema.parse(data);
85
+
await renderAndSave(h(IssueCard, validated), "issue-card-long-title.png");
86
+
});
87
+
});
88
+
89
+
describe("pull request cards", () => {
90
+
test("renders open pull request", async () => {
91
+
const data = createPullRequestData(avatarDataUri);
92
+
const validated = pullRequestCardSchema.parse(data);
93
+
await renderAndSave(h(PullRequestCard, validated), "pull-request-card.png");
94
+
});
95
+
96
+
test("renders merged pull request", async () => {
97
+
const data = createPullRequestData(avatarDataUri, {
98
+
pullRequestNumber: 2,
99
+
status: "merged",
100
+
title: "Implement OAuth2 authentication flow",
101
+
filesChanged: 5,
102
+
additions: 342,
103
+
deletions: 28,
104
+
});
105
+
const validated = pullRequestCardSchema.parse(data);
106
+
await renderAndSave(
107
+
h(PullRequestCard, validated),
108
+
"pull-request-card-merged.png",
109
+
);
110
+
});
111
+
112
+
test("renders closed pull request", async () => {
113
+
const data = createPullRequestData(avatarDataUri, {
114
+
pullRequestNumber: 3,
115
+
status: "closed",
116
+
title: "WIP: Experimental feature",
117
+
});
118
+
const validated = pullRequestCardSchema.parse(data);
119
+
await renderAndSave(
120
+
h(PullRequestCard, validated),
121
+
"pull-request-card-closed.png",
122
+
);
123
+
});
124
+
125
+
test("renders pull request with long title", async () => {
126
+
const data = createLongTitlePullRequestData(avatarDataUri, {
127
+
pullRequestNumber: 42,
128
+
});
129
+
const validated = pullRequestCardSchema.parse(data);
130
+
await renderAndSave(
131
+
h(PullRequestCard, validated),
132
+
"pull-request-card-long-title.png",
133
+
);
134
+
});
135
+
});
+54
appview/ogcard/src/components/cards/issue.tsx
+54
appview/ogcard/src/components/cards/issue.tsx
···
1
+
import { Card, Row, Col } from "../shared/layout";
2
+
import { TangledLogo } from "../shared/logo";
3
+
import { IssueStatusBadge } from "../shared/status-badge";
4
+
import { CardHeader } from "../shared/card-header";
5
+
import { LabelList } from "../shared/label-pill";
6
+
import { FooterStats } from "../shared/footer-stats";
7
+
import type { IssueCardData } from "../../validation";
8
+
9
+
export function IssueCard(data: IssueCardData) {
10
+
return (
11
+
<Card style={{ justifyContent: "space-between" }}>
12
+
<Col style={{ gap: 48 }}>
13
+
<Col style={{ gap: 32 }}>
14
+
<Row style={{ justifyContent: "space-between" }}>
15
+
<CardHeader
16
+
avatarUrl={data.avatarUrl}
17
+
ownerHandle={data.ownerHandle}
18
+
repoName={data.repoName}
19
+
/>
20
+
<IssueStatusBadge status={data.status} />
21
+
</Row>
22
+
23
+
<div
24
+
style={{
25
+
fontFamily: "Inter",
26
+
fontSize: 64,
27
+
fontWeight: 600,
28
+
color: "#000000",
29
+
display: "block",
30
+
lineClamp: `2 "... #${data.issueNumber}"`,
31
+
}}>
32
+
{data.title}
33
+
</div>
34
+
</Col>
35
+
36
+
<LabelList labels={data.labels} />
37
+
</Col>
38
+
39
+
<div
40
+
style={{
41
+
display: "flex",
42
+
alignItems: "flex-end",
43
+
justifyContent: "space-between",
44
+
}}>
45
+
<FooterStats
46
+
createdAt={data.createdAt}
47
+
reactionCount={data.reactionCount}
48
+
commentCount={data.commentCount}
49
+
/>
50
+
<TangledLogo />
51
+
</div>
52
+
</Card>
53
+
);
54
+
}
+162
appview/ogcard/src/components/cards/pull-request.tsx
+162
appview/ogcard/src/components/cards/pull-request.tsx
···
1
+
import { Card, Row, Col } from "../shared/layout";
2
+
import { TangledLogo } from "../shared/logo";
3
+
import { StatusBadge } from "../shared/status-badge";
4
+
import { CardHeader } from "../shared/card-header";
5
+
import { FooterStats } from "../shared/footer-stats";
6
+
import { FileDiff, RefreshCw } from "../../icons/lucide";
7
+
import { COLORS } from "../shared/constants";
8
+
import type { PullRequestCardData } from "../../validation";
9
+
10
+
interface FilesChangedPillProps {
11
+
filesChanged: number;
12
+
additions: number;
13
+
deletions: number;
14
+
}
15
+
16
+
function FilesChangedPill({
17
+
filesChanged,
18
+
additions,
19
+
deletions,
20
+
}: FilesChangedPillProps) {
21
+
return (
22
+
<Row
23
+
style={{
24
+
overflow: "hidden",
25
+
borderRadius: 18,
26
+
backgroundColor: "#fff",
27
+
border: `4px solid ${COLORS.label.border}`,
28
+
}}>
29
+
<Row
30
+
style={{
31
+
gap: 16,
32
+
padding: "16px 28px",
33
+
}}>
34
+
<FileDiff size={34} color="#202020" />
35
+
<span
36
+
style={{
37
+
fontFamily: "Inter",
38
+
fontSize: 36,
39
+
color: "#202020",
40
+
fontWeight: 400,
41
+
}}>
42
+
{filesChanged} files
43
+
</span>
44
+
</Row>
45
+
<Row style={{ gap: 0 }}>
46
+
<Row
47
+
style={{
48
+
padding: "16px 10px 16px 11px",
49
+
backgroundColor: COLORS.diff.additions.bg,
50
+
}}>
51
+
<span
52
+
style={{
53
+
fontFamily: "Inter",
54
+
fontSize: 36,
55
+
color: COLORS.diff.additions.text,
56
+
fontWeight: 500,
57
+
}}>
58
+
+{additions}
59
+
</span>
60
+
</Row>
61
+
<Row
62
+
style={{
63
+
padding: "16px 16px 16px 11px",
64
+
backgroundColor: COLORS.diff.deletions.bg,
65
+
}}>
66
+
<span
67
+
style={{
68
+
fontFamily: "Inter",
69
+
fontSize: 36,
70
+
color: COLORS.diff.deletions.text,
71
+
fontWeight: 500,
72
+
}}>
73
+
-{deletions}
74
+
</span>
75
+
</Row>
76
+
</Row>
77
+
</Row>
78
+
);
79
+
}
80
+
81
+
interface MetricPillProps {
82
+
value: number;
83
+
label: string;
84
+
}
85
+
86
+
function RoundsPill({ value, label }: MetricPillProps) {
87
+
return (
88
+
<Row
89
+
style={{
90
+
gap: 16,
91
+
padding: "16px 28px",
92
+
borderRadius: 18,
93
+
backgroundColor: "#fff",
94
+
border: `4px solid ${COLORS.label.border}`,
95
+
}}>
96
+
<RefreshCw size={36} color="#202020" />
97
+
<span
98
+
style={{
99
+
fontFamily: "Inter",
100
+
fontSize: 36,
101
+
color: "#202020",
102
+
fontWeight: 400,
103
+
}}>
104
+
{value} {label}
105
+
</span>
106
+
</Row>
107
+
);
108
+
}
109
+
110
+
export function PullRequestCard(data: PullRequestCardData) {
111
+
return (
112
+
<Card style={{ justifyContent: "space-between" }}>
113
+
<Col style={{ gap: 48 }}>
114
+
<Col style={{ gap: 32 }}>
115
+
<Row style={{ justifyContent: "space-between" }}>
116
+
<CardHeader
117
+
avatarUrl={data.avatarUrl}
118
+
ownerHandle={data.ownerHandle}
119
+
repoName={data.repoName}
120
+
/>
121
+
<StatusBadge status={data.status} />
122
+
</Row>
123
+
124
+
<span
125
+
style={{
126
+
fontFamily: "Inter",
127
+
fontSize: 64,
128
+
fontWeight: 600,
129
+
color: "#000000",
130
+
display: "block",
131
+
lineClamp: `2 "... #${data.pullRequestNumber}"`,
132
+
}}>
133
+
{data.title}
134
+
</span>
135
+
</Col>
136
+
137
+
<Row style={{ gap: 16 }}>
138
+
<FilesChangedPill
139
+
filesChanged={data.filesChanged}
140
+
additions={data.additions}
141
+
deletions={data.deletions}
142
+
/>
143
+
<RoundsPill value={data.rounds} label="rounds" />
144
+
</Row>
145
+
</Col>
146
+
147
+
<div
148
+
style={{
149
+
display: "flex",
150
+
alignItems: "flex-end",
151
+
justifyContent: "space-between",
152
+
}}>
153
+
<FooterStats
154
+
createdAt={data.createdAt}
155
+
reactionCount={data.reactionCount}
156
+
commentCount={data.commentCount}
157
+
/>
158
+
<TangledLogo />
159
+
</div>
160
+
</Card>
161
+
);
162
+
}
+61
appview/ogcard/src/components/cards/repository.tsx
+61
appview/ogcard/src/components/cards/repository.tsx
···
1
+
import { Card, Row, Col } from "../shared/layout";
2
+
import { Avatar } from "../shared/avatar";
3
+
import { LanguageCircles } from "../shared/language-circles";
4
+
import { Metrics } from "../shared/metrics";
5
+
import { TangledLogo } from "../shared/logo";
6
+
import type { RepositoryCardData } from "../../validation";
7
+
8
+
export function RepositoryCard(data: RepositoryCardData) {
9
+
return (
10
+
<Card>
11
+
<LanguageCircles languages={data.languages} />
12
+
13
+
<Col style={{ gap: 64 }}>
14
+
<Col style={{ gap: 24 }}>
15
+
<span
16
+
style={{
17
+
fontFamily: "Inter",
18
+
fontSize: 144,
19
+
fontWeight: 600,
20
+
color: "#000000",
21
+
}}>
22
+
{data.repoName}
23
+
</span>
24
+
25
+
<Row style={{ gap: 16 }}>
26
+
<Avatar src={data.avatarUrl} size={64} />
27
+
<span
28
+
style={{
29
+
fontFamily: "Inter",
30
+
fontSize: 48,
31
+
fontWeight: 500,
32
+
color: "#000000",
33
+
}}>
34
+
{data.ownerHandle}
35
+
</span>
36
+
</Row>
37
+
</Col>
38
+
39
+
<Metrics stars={data.stars} pulls={data.pulls} issues={data.issues} />
40
+
</Col>
41
+
42
+
<Row
43
+
style={{
44
+
alignItems: "flex-end",
45
+
justifyContent: "space-between",
46
+
flexGrow: 1,
47
+
}}>
48
+
<div
49
+
style={{
50
+
fontFamily: "Inter",
51
+
fontSize: 32,
52
+
color: "#7D7D7D",
53
+
}}>
54
+
{data.updatedAt}
55
+
</div>
56
+
57
+
<TangledLogo />
58
+
</Row>
59
+
</Card>
60
+
);
61
+
}
+50
appview/ogcard/src/icons/lucide.tsx
+50
appview/ogcard/src/icons/lucide.tsx
···
1
+
import { h } from "preact";
2
+
import iconNodes from "lucide-static/icon-nodes.json";
3
+
4
+
interface IconProps {
5
+
size?: number;
6
+
color?: string;
7
+
strokeWidth?: number;
8
+
}
9
+
10
+
type IconNodeEntry = [string, Record<string, string | number>];
11
+
12
+
function createIcon(name: string) {
13
+
const nodes = (iconNodes as unknown as Record<string, IconNodeEntry[]>)[name];
14
+
if (!nodes) throw new Error(`Icon "${name}" not found`);
15
+
16
+
return function Icon({ size = 24, color = "currentColor", strokeWidth = 2 }: IconProps = {}) {
17
+
return h(
18
+
"svg",
19
+
{
20
+
xmlns: "http://www.w3.org/2000/svg",
21
+
width: size,
22
+
height: size,
23
+
viewBox: "0 0 24 24",
24
+
fill: "none",
25
+
stroke: color,
26
+
strokeWidth,
27
+
strokeLinecap: "round" as const,
28
+
strokeLinejoin: "round" as const,
29
+
},
30
+
nodes.map(([tag, attrs], i) => h(tag, { key: i, ...attrs })),
31
+
);
32
+
};
33
+
}
34
+
35
+
export const Star = createIcon("star");
36
+
export const GitPullRequest = createIcon("git-pull-request");
37
+
export const GitPullRequestClosed = createIcon("git-pull-request-closed");
38
+
export const GitMerge = createIcon("git-merge");
39
+
export const CircleDot = createIcon("circle-dot");
40
+
export const Calendar = createIcon("calendar");
41
+
export const MessageSquare = createIcon("message-square");
42
+
export const MessageSquareCode = createIcon("message-square-code");
43
+
export const ThumbsUp = createIcon("thumbs-up");
44
+
export const ThumbsDown = createIcon("thumbs-down");
45
+
export const Ban = createIcon("ban");
46
+
export const SmilePlus = createIcon("smile-plus");
47
+
export const FileDiff = createIcon("file-diff");
48
+
export const RefreshCw = createIcon("refresh-cw");
49
+
50
+
export type LucideIcon = typeof Star;
+92
appview/ogcard/src/index.tsx
+92
appview/ogcard/src/index.tsx
···
1
+
import { cardPayloadSchema } from "./validation";
2
+
import { renderCard } from "./lib/render";
3
+
import { RepositoryCard } from "./components/cards/repository";
4
+
import { IssueCard } from "./components/cards/issue";
5
+
import { PullRequestCard } from "./components/cards/pull-request";
6
+
import { z } from "zod";
7
+
8
+
declare global {
9
+
interface CacheStorage {
10
+
default: Cache;
11
+
}
12
+
}
13
+
14
+
interface Env {
15
+
ENVIRONMENT: string;
16
+
}
17
+
18
+
export default {
19
+
async fetch(request: Request, env: Env): Promise<Response> {
20
+
if (request.method !== "POST") {
21
+
return new Response("Method not allowed", { status: 405 });
22
+
}
23
+
24
+
const url = new URL(request.url);
25
+
const cardType = url.pathname.split("/").pop();
26
+
27
+
try {
28
+
const body = await request.json();
29
+
const payload = cardPayloadSchema.parse(body);
30
+
31
+
let component;
32
+
switch (payload.type) {
33
+
case "repository":
34
+
component = <RepositoryCard {...payload} />;
35
+
break;
36
+
case "issue":
37
+
component = <IssueCard {...payload} />;
38
+
break;
39
+
case "pullRequest":
40
+
component = <PullRequestCard {...payload} />;
41
+
break;
42
+
default:
43
+
return new Response("Unknown card type", { status: 400 });
44
+
}
45
+
46
+
const cacheKeyUrl = new URL(request.url);
47
+
cacheKeyUrl.searchParams.set("payload", JSON.stringify(payload));
48
+
const cacheKey = new Request(cacheKeyUrl.toString(), { method: "GET" });
49
+
const cache = caches.default;
50
+
const cached = await cache.match(cacheKey);
51
+
52
+
if (cached) {
53
+
return cached;
54
+
}
55
+
56
+
const { png: pngBuffer } = await renderCard(component);
57
+
58
+
const response = new Response(pngBuffer as any, {
59
+
headers: {
60
+
"Content-Type": "image/png",
61
+
"Cache-Control": "public, max-age=3600",
62
+
},
63
+
});
64
+
65
+
await cache.put(cacheKey, response.clone());
66
+
67
+
return response;
68
+
} catch (error) {
69
+
if (error instanceof z.ZodError) {
70
+
return new Response(
71
+
JSON.stringify({ errors: (error as z.ZodError).issues }),
72
+
{
73
+
status: 400,
74
+
headers: { "Content-Type": "application/json" },
75
+
},
76
+
);
77
+
}
78
+
79
+
console.error("Error generating card:", error);
80
+
const errorMessage = error instanceof Error ? error.message : String(error);
81
+
const errorStack = error instanceof Error ? error.stack : "";
82
+
console.error("Error stack:", errorStack);
83
+
return new Response(JSON.stringify({
84
+
error: errorMessage,
85
+
stack: errorStack
86
+
}), {
87
+
status: 500,
88
+
headers: { "Content-Type": "application/json" }
89
+
});
90
+
}
91
+
},
92
+
};
+35
appview/ogcard/src/lib/fonts.ts
+35
appview/ogcard/src/lib/fonts.ts
···
1
+
export interface FontData {
2
+
name: string;
3
+
data: ArrayBuffer;
4
+
weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
5
+
style: "normal" | "italic";
6
+
}
7
+
8
+
const FONT_URLS = {
9
+
regular:
10
+
"https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-400-normal.woff",
11
+
medium:
12
+
"https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-500-normal.woff",
13
+
semiBold:
14
+
"https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-600-normal.woff",
15
+
};
16
+
17
+
export async function loadFonts(): Promise<FontData[]> {
18
+
const [regular, medium, semiBold] = await Promise.all([
19
+
fetchFont(FONT_URLS.regular),
20
+
fetchFont(FONT_URLS.medium),
21
+
fetchFont(FONT_URLS.semiBold),
22
+
]);
23
+
24
+
return [
25
+
{ name: "Inter", data: regular, weight: 400, style: "normal" },
26
+
{ name: "Inter", data: medium, weight: 500, style: "normal" },
27
+
{ name: "Inter", data: semiBold, weight: 600, style: "normal" },
28
+
];
29
+
}
30
+
31
+
async function fetchFont(url: string): Promise<ArrayBuffer> {
32
+
const response = await fetch(url);
33
+
if (!response.ok) throw new Error(`Failed to load font: ${url}`);
34
+
return response.arrayBuffer();
35
+
}
+72
appview/ogcard/src/lib/render.ts
+72
appview/ogcard/src/lib/render.ts
···
1
+
import satori, { init } from "satori/standalone";
2
+
import { loadFonts } from "./fonts";
3
+
import type { VNode } from "preact";
4
+
5
+
const isCloudflareWorkers = typeof caches !== "undefined" && "default" in caches;
6
+
7
+
let satoriInitialized = false;
8
+
let resvgInitialized = false;
9
+
10
+
let Resvg: any;
11
+
let initWasm: any;
12
+
let wasmModule: any;
13
+
14
+
async function initSatori() {
15
+
if (satoriInitialized) return;
16
+
17
+
const yogaWasm = await fetch("https://unpkg.com/satori@0.25.0/yoga.wasm");
18
+
const wasmBuffer = await yogaWasm.arrayBuffer();
19
+
await init(wasmBuffer);
20
+
21
+
satoriInitialized = true;
22
+
}
23
+
24
+
async function initResvg() {
25
+
if (resvgInitialized) return;
26
+
27
+
if (isCloudflareWorkers) {
28
+
const resvgWasm = await import("@resvg/resvg-wasm");
29
+
Resvg = resvgWasm.Resvg;
30
+
initWasm = resvgWasm.initWasm;
31
+
32
+
// @ts-ignore
33
+
wasmModule = (await import("@resvg/resvg-wasm/index_bg.wasm?module")).default;
34
+
35
+
await initWasm(wasmModule);
36
+
} else {
37
+
const resvgJs = await import("@resvg/resvg-js");
38
+
Resvg = resvgJs.Resvg;
39
+
}
40
+
41
+
resvgInitialized = true;
42
+
}
43
+
44
+
export interface RenderResult {
45
+
svg: string;
46
+
png: Uint8Array;
47
+
}
48
+
49
+
export async function renderCard(component: VNode): Promise<RenderResult> {
50
+
await initSatori();
51
+
await initResvg();
52
+
53
+
const fonts = await loadFonts();
54
+
55
+
const svg = await satori(component as any, {
56
+
width: 1200,
57
+
height: 630,
58
+
fonts,
59
+
embedFont: true,
60
+
});
61
+
62
+
const resvg = new Resvg(svg, {
63
+
fitTo: { mode: "width", value: 1200 },
64
+
});
65
+
66
+
const pngData = resvg.render();
67
+
68
+
return {
69
+
svg,
70
+
png: pngData.asPng(),
71
+
};
72
+
}
+67
appview/ogcard/src/validation.ts
+67
appview/ogcard/src/validation.ts
···
1
+
import { z } from "zod";
2
+
3
+
const hexColor = /^#[0-9A-Fa-f]{6}$/;
4
+
5
+
const languageSchema = z.object({
6
+
color: z.string().regex(hexColor),
7
+
percentage: z.number().min(0).max(100),
8
+
});
9
+
10
+
export const repositoryCardSchema = z.object({
11
+
type: z.literal("repository"),
12
+
repoName: z.string().min(1).max(100),
13
+
ownerHandle: z.string().min(1).max(100),
14
+
stars: z.number().int().min(0).max(1000000),
15
+
pulls: z.number().int().min(0).max(100000),
16
+
issues: z.number().int().min(0).max(100000),
17
+
updatedAt: z.string().max(100),
18
+
avatarUrl: z.string().url(),
19
+
languages: z.array(languageSchema).max(5),
20
+
});
21
+
22
+
export const issueCardSchema = z.object({
23
+
type: z.literal("issue"),
24
+
repoName: z.string().min(1).max(100),
25
+
ownerHandle: z.string().min(1).max(100),
26
+
avatarUrl: z.string().url(),
27
+
title: z.string().min(1).max(500),
28
+
issueNumber: z.number().int().positive(),
29
+
status: z.enum(["open", "closed"]),
30
+
labels: z.array(z.object({
31
+
name: z.string().max(50),
32
+
color: z.string().regex(hexColor),
33
+
})).max(10),
34
+
commentCount: z.number().int().min(0),
35
+
reactionCount: z.number().int().min(0),
36
+
createdAt: z.string(),
37
+
});
38
+
39
+
export const pullRequestCardSchema = z.object({
40
+
type: z.literal("pullRequest"),
41
+
repoName: z.string().min(1).max(100),
42
+
ownerHandle: z.string().min(1).max(100),
43
+
avatarUrl: z.string().url(),
44
+
title: z.string().min(1).max(500),
45
+
pullRequestNumber: z.number().int().positive(),
46
+
status: z.enum(["open", "closed", "merged"]),
47
+
filesChanged: z.number().int().min(0),
48
+
additions: z.number().int().min(0),
49
+
deletions: z.number().int().min(0),
50
+
rounds: z.number().int().min(1),
51
+
// reviews: z.number().int().min(0), // TODO: implement review tracking
52
+
commentCount: z.number().int().min(0),
53
+
reactionCount: z.number().int().min(0),
54
+
createdAt: z.string(),
55
+
});
56
+
57
+
export const cardPayloadSchema = z.discriminatedUnion("type", [
58
+
repositoryCardSchema,
59
+
issueCardSchema,
60
+
pullRequestCardSchema,
61
+
]);
62
+
63
+
export type Language = z.infer<typeof languageSchema>;
64
+
export type RepositoryCardData = z.infer<typeof repositoryCardSchema>;
65
+
export type IssueCardData = z.infer<typeof issueCardSchema>;
66
+
export type PullRequestCardData = z.infer<typeof pullRequestCardSchema>;
67
+
export type CardPayload = z.infer<typeof cardPayloadSchema>;
+19
appview/ogcard/tsconfig.json
+19
appview/ogcard/tsconfig.json
···
1
+
{
2
+
"compilerOptions": {
3
+
"target": "ES2022",
4
+
"module": "ES2022",
5
+
"lib": ["ES2022"],
6
+
"moduleResolution": "bundler",
7
+
"types": ["@cloudflare/workers-types", "node"],
8
+
"jsx": "react-jsx",
9
+
"jsxImportSource": "preact",
10
+
"strict": true,
11
+
"esModuleInterop": true,
12
+
"skipLibCheck": true,
13
+
"forceConsistentCasingInFileNames": true,
14
+
"resolveJsonModule": true,
15
+
"noEmit": true
16
+
},
17
+
"include": ["src/**/*"],
18
+
"exclude": ["node_modules"]
19
+
}
+17
appview/ogcard/wrangler.jsonc
+17
appview/ogcard/wrangler.jsonc
···
1
+
{
2
+
"name": "tangled-ogcard-worker",
3
+
"main": "src/index.tsx",
4
+
"compatibility_date": "2026-03-07",
5
+
"compatibility_flags": ["nodejs_compat"],
6
+
"account_id": "<YOUR_ACCOUNT_ID>",
7
+
"workers_dev": true,
8
+
"routes": [
9
+
{
10
+
"pattern": "og.tangled.org/*",
11
+
"zone_name": "tangled.org",
12
+
},
13
+
],
14
+
"vars": {
15
+
"ENVIRONMENT": "production",
16
+
},
17
+
}
+52
-268
appview/pulls/opengraph.go
+52
-268
appview/pulls/opengraph.go
···
1
1
package pulls
2
2
3
3
import (
4
-
"bytes"
5
4
"context"
6
-
"fmt"
7
-
"image"
8
-
"image/color"
9
-
"image/png"
10
5
"log"
11
6
"net/http"
7
+
"time"
12
8
13
9
"tangled.org/core/appview/models"
14
10
"tangled.org/core/appview/ogcard"
15
11
"tangled.org/core/patchutil"
16
-
"tangled.org/core/types"
17
12
)
18
13
19
-
func (s *Pulls) drawPullSummaryCard(pull *models.Pull, repo *models.Repo, diffStats types.DiffFileStat, filesChanged int) (*ogcard.Card, error) {
20
-
width, height := ogcard.DefaultSize()
21
-
mainCard, err := ogcard.NewCard(width, height)
22
-
if err != nil {
23
-
return nil, err
24
-
}
25
-
26
-
// Split: content area (75%) and status/stats area (25%)
27
-
contentCard, statsArea := mainCard.Split(false, 75)
28
-
29
-
// Add padding to content
30
-
contentCard.SetMargin(50)
31
-
32
-
// Split content horizontally: main content (80%) and avatar area (20%)
33
-
mainContent, avatarArea := contentCard.Split(true, 80)
34
-
35
-
// Add margin to main content
36
-
mainContent.SetMargin(10)
37
-
38
-
// Use full main content area for repo name and title
39
-
bounds := mainContent.Img.Bounds()
40
-
startX := bounds.Min.X + mainContent.Margin
41
-
startY := bounds.Min.Y + mainContent.Margin
42
-
43
-
// Draw full repository name at top (owner/repo format)
44
-
var repoOwner string
45
-
owner, err := s.idResolver.ResolveIdent(context.Background(), repo.Did)
46
-
if err != nil {
47
-
repoOwner = repo.Did
48
-
} else {
49
-
repoOwner = "@" + owner.Handle.String()
50
-
}
51
-
52
-
fullRepoName := repoOwner + " / " + repo.Name
53
-
if len(fullRepoName) > 60 {
54
-
fullRepoName = fullRepoName[:60] + "…"
55
-
}
56
-
57
-
grayColor := color.RGBA{88, 96, 105, 255}
58
-
err = mainContent.DrawTextAt(fullRepoName, startX, startY, grayColor, 36, ogcard.Top, ogcard.Left)
14
+
func (s *Pulls) PullOpenGraphSummary(w http.ResponseWriter, r *http.Request) {
15
+
f, err := s.repoResolver.Resolve(r)
59
16
if err != nil {
60
-
return nil, err
61
-
}
62
-
63
-
// Draw pull request title below repo name with wrapping
64
-
titleY := startY + 60
65
-
titleX := startX
66
-
67
-
// Truncate title if too long
68
-
pullTitle := pull.Title
69
-
maxTitleLength := 80
70
-
if len(pullTitle) > maxTitleLength {
71
-
pullTitle = pullTitle[:maxTitleLength] + "…"
72
-
}
73
-
74
-
// Create a temporary card for the title area to enable wrapping
75
-
titleBounds := mainContent.Img.Bounds()
76
-
titleWidth := titleBounds.Dx() - (startX - titleBounds.Min.X) - 20 // Leave some margin
77
-
titleHeight := titleBounds.Dy() - (titleY - titleBounds.Min.Y) - 100 // Leave space for pull ID
78
-
79
-
titleRect := image.Rect(titleX, titleY, titleX+titleWidth, titleY+titleHeight)
80
-
titleCard := &ogcard.Card{
81
-
Img: mainContent.Img.SubImage(titleRect).(*image.RGBA),
82
-
Font: mainContent.Font,
83
-
Margin: 0,
17
+
log.Println("failed to get repo and knot", err)
18
+
return
84
19
}
85
20
86
-
// Draw wrapped title
87
-
lines, err := titleCard.DrawText(pullTitle, color.Black, 54, ogcard.Top, ogcard.Left)
88
-
if err != nil {
89
-
return nil, err
21
+
pull, ok := r.Context().Value("pull").(*models.Pull)
22
+
if !ok {
23
+
log.Println("pull not found in context")
24
+
http.Error(w, "pull not found", http.StatusNotFound)
25
+
return
90
26
}
91
27
92
-
// Calculate where title ends (number of lines * line height)
93
-
lineHeight := 60 // Approximate line height for 54pt font
94
-
titleEndY := titleY + (len(lines) * lineHeight) + 10
95
-
96
-
// Draw pull ID in gray below the title
97
-
pullIdText := fmt.Sprintf("#%d", pull.PullId)
98
-
err = mainContent.DrawTextAt(pullIdText, startX, titleEndY, grayColor, 54, ogcard.Top, ogcard.Left)
28
+
var ownerHandle string
29
+
owner, err := s.idResolver.ResolveIdent(context.Background(), f.Did)
99
30
if err != nil {
100
-
return nil, err
31
+
ownerHandle = f.Did
32
+
} else {
33
+
ownerHandle = "@" + owner.Handle.String()
101
34
}
102
35
103
-
// Get pull author handle (needed for avatar and metadata)
104
36
var authorHandle string
105
37
author, err := s.idResolver.ResolveIdent(context.Background(), pull.OwnerDid)
106
38
if err != nil {
···
109
41
authorHandle = "@" + author.Handle.String()
110
42
}
111
43
112
-
// Draw avatar circle on the right side
113
-
avatarBounds := avatarArea.Img.Bounds()
114
-
avatarSize := min(avatarBounds.Dx(), avatarBounds.Dy()) - 20 // Leave some margin
115
-
if avatarSize > 220 {
116
-
avatarSize = 220
117
-
}
118
-
avatarX := avatarBounds.Min.X + (avatarBounds.Dx() / 2) - (avatarSize / 2)
119
-
avatarY := avatarBounds.Min.Y + 20
120
-
121
-
// Get avatar URL for pull author
122
-
avatarURL := s.pages.AvatarUrl(authorHandle, "256")
123
-
err = avatarArea.DrawCircularExternalImage(avatarURL, avatarX, avatarY, avatarSize)
124
-
if err != nil {
125
-
log.Printf("failed to draw avatar (non-fatal): %v", err)
126
-
}
127
-
128
-
// Split stats area: left side for status/stats (80%), right side for dolly (20%)
129
-
statusArea, dollyArea := statsArea.Split(true, 80)
130
-
131
-
// Draw status and stats
132
-
statsBounds := statusArea.Img.Bounds()
133
-
statsX := statsBounds.Min.X + 60 // left padding
134
-
statsY := statsBounds.Min.Y
135
-
136
-
iconColor := color.RGBA{88, 96, 105, 255}
137
-
iconSize := 36
138
-
textSize := 36.0
139
-
labelSize := 28.0
140
-
iconBaselineOffset := int(textSize) / 2
141
-
142
-
// Draw status (open/merged/closed) with colored icon and text
143
-
var statusIcon string
144
-
var statusText string
145
-
var statusColor color.RGBA
44
+
avatarUrl := s.pages.AvatarUrl(authorHandle, "256")
146
45
46
+
var status string
147
47
if pull.State.IsOpen() {
148
-
statusIcon = "git-pull-request"
149
-
statusText = "open"
150
-
statusColor = color.RGBA{34, 139, 34, 255} // green
48
+
status = "open"
151
49
} else if pull.State.IsMerged() {
152
-
statusIcon = "git-merge"
153
-
statusText = "merged"
154
-
statusColor = color.RGBA{138, 43, 226, 255} // purple
50
+
status = "merged"
155
51
} else {
156
-
statusIcon = "git-pull-request-closed"
157
-
statusText = "closed"
158
-
statusColor = color.RGBA{52, 58, 64, 255} // dark gray
159
-
}
160
-
161
-
statusTextWidth := statusArea.TextWidth(statusText, textSize)
162
-
badgePadding := 12
163
-
badgeHeight := int(textSize) + (badgePadding * 2)
164
-
badgeWidth := iconSize + badgePadding + statusTextWidth + (badgePadding * 2)
165
-
cornerRadius := 8
166
-
badgeX := 60
167
-
badgeY := 0
168
-
169
-
statusArea.DrawRoundedRect(badgeX, badgeY, badgeWidth, badgeHeight, cornerRadius, statusColor)
170
-
171
-
whiteColor := color.RGBA{255, 255, 255, 255}
172
-
iconX := statsX + badgePadding
173
-
iconY := statsY + (badgeHeight-iconSize)/2
174
-
err = statusArea.DrawLucideIcon(statusIcon, iconX, iconY, iconSize, whiteColor)
175
-
if err != nil {
176
-
log.Printf("failed to draw status icon: %v", err)
177
-
}
178
-
179
-
textX := statsX + badgePadding + iconSize + badgePadding
180
-
textY := statsY + (badgeHeight-int(textSize))/2 - 5
181
-
err = statusArea.DrawTextAt(statusText, textX, textY, whiteColor, textSize, ogcard.Top, ogcard.Left)
182
-
if err != nil {
183
-
log.Printf("failed to draw status text: %v", err)
184
-
}
185
-
186
-
currentX := statsX + badgeWidth + 50
187
-
188
-
// Draw comment count
189
-
err = statusArea.DrawLucideIcon("message-square", currentX, iconY, iconSize, iconColor)
190
-
if err != nil {
191
-
log.Printf("failed to draw comment icon: %v", err)
192
-
}
193
-
194
-
currentX += iconSize + 15
195
-
commentCount := pull.TotalComments()
196
-
commentText := fmt.Sprintf("%d comments", commentCount)
197
-
if commentCount == 1 {
198
-
commentText = "1 comment"
199
-
}
200
-
err = statusArea.DrawTextAt(commentText, currentX, textY, iconColor, textSize, ogcard.Top, ogcard.Left)
201
-
if err != nil {
202
-
log.Printf("failed to draw comment text: %v", err)
203
-
}
204
-
205
-
commentTextWidth := len(commentText) * 20
206
-
currentX += commentTextWidth + 40
207
-
208
-
// Draw files changed
209
-
err = statusArea.DrawLucideIcon("file-diff", currentX, iconY, iconSize, iconColor)
210
-
if err != nil {
211
-
log.Printf("failed to draw file diff icon: %v", err)
212
-
}
213
-
214
-
currentX += iconSize + 15
215
-
filesText := fmt.Sprintf("%d files", filesChanged)
216
-
if filesChanged == 1 {
217
-
filesText = "1 file"
218
-
}
219
-
err = statusArea.DrawTextAt(filesText, currentX, textY, iconColor, textSize, ogcard.Top, ogcard.Left)
220
-
if err != nil {
221
-
log.Printf("failed to draw files text: %v", err)
222
-
}
223
-
224
-
filesTextWidth := len(filesText) * 20
225
-
currentX += filesTextWidth
226
-
227
-
// Draw additions (green +)
228
-
greenColor := color.RGBA{34, 139, 34, 255}
229
-
additionsText := fmt.Sprintf("+%d", diffStats.Insertions)
230
-
err = statusArea.DrawTextAt(additionsText, currentX, textY, greenColor, textSize, ogcard.Top, ogcard.Left)
231
-
if err != nil {
232
-
log.Printf("failed to draw additions text: %v", err)
233
-
}
234
-
235
-
additionsTextWidth := len(additionsText) * 20
236
-
currentX += additionsTextWidth + 30
237
-
238
-
// Draw deletions (red -) right next to additions
239
-
redColor := color.RGBA{220, 20, 60, 255}
240
-
deletionsText := fmt.Sprintf("-%d", diffStats.Deletions)
241
-
err = statusArea.DrawTextAt(deletionsText, currentX, textY, redColor, textSize, ogcard.Top, ogcard.Left)
242
-
if err != nil {
243
-
log.Printf("failed to draw deletions text: %v", err)
244
-
}
245
-
246
-
// Draw dolly logo on the right side
247
-
dollyBounds := dollyArea.Img.Bounds()
248
-
dollySize := 90
249
-
dollyX := dollyBounds.Min.X + (dollyBounds.Dx() / 2) - (dollySize / 2)
250
-
dollyY := statsY + iconBaselineOffset - dollySize/2 + 25
251
-
dollyColor := color.RGBA{180, 180, 180, 255} // light gray
252
-
err = dollyArea.DrawDolly(dollyX, dollyY, dollySize, dollyColor)
253
-
if err != nil {
254
-
log.Printf("dolly silhouette not available (this is ok): %v", err)
255
-
}
256
-
257
-
// Draw "opened by @author" and date at the bottom with more spacing
258
-
labelY := statsY + iconSize + 30
259
-
260
-
// Format the opened date
261
-
openedDate := pull.Created.Format("Jan 2, 2006")
262
-
metaText := fmt.Sprintf("opened by %s · %s", authorHandle, openedDate)
263
-
264
-
err = statusArea.DrawTextAt(metaText, statsX, labelY, iconColor, labelSize, ogcard.Top, ogcard.Left)
265
-
if err != nil {
266
-
log.Printf("failed to draw metadata: %v", err)
267
-
}
268
-
269
-
return mainCard, nil
270
-
}
271
-
272
-
func (s *Pulls) PullOpenGraphSummary(w http.ResponseWriter, r *http.Request) {
273
-
f, err := s.repoResolver.Resolve(r)
274
-
if err != nil {
275
-
log.Println("failed to get repo and knot", err)
276
-
return
52
+
status = "closed"
277
53
}
278
54
279
-
pull, ok := r.Context().Value("pull").(*models.Pull)
280
-
if !ok {
281
-
log.Println("pull not found in context")
282
-
http.Error(w, "pull not found", http.StatusNotFound)
283
-
return
284
-
}
55
+
var filesChanged int
56
+
var additions int64
57
+
var deletions int64
285
58
286
-
// Calculate diff stats from latest submission using patchutil
287
-
var diffStats types.DiffFileStat
288
-
filesChanged := 0
289
59
if len(pull.Submissions) > 0 {
290
60
latestSubmission := pull.LatestSubmission()
291
61
niceDiff := patchutil.AsNiceDiff(latestSubmission.Patch, pull.TargetBranch)
292
-
diffStats.Insertions = int64(niceDiff.Stat.Insertions)
293
-
diffStats.Deletions = int64(niceDiff.Stat.Deletions)
294
62
filesChanged = niceDiff.Stat.FilesChanged
63
+
additions = int64(niceDiff.Stat.Insertions)
64
+
deletions = int64(niceDiff.Stat.Deletions)
295
65
}
296
66
297
-
card, err := s.drawPullSummaryCard(pull, f, diffStats, filesChanged)
298
-
if err != nil {
299
-
log.Println("failed to draw pull summary card", err)
300
-
http.Error(w, "failed to draw pull summary card", http.StatusInternalServerError)
301
-
return
67
+
commentCount := pull.TotalComments()
68
+
69
+
rounds := len(pull.Submissions)
70
+
if rounds == 0 {
71
+
rounds = 1
302
72
}
303
73
304
-
var imageBuffer bytes.Buffer
305
-
err = png.Encode(&imageBuffer, card.Img)
74
+
payload := ogcard.PullRequestCardPayload{
75
+
Type: "pullRequest",
76
+
RepoName: f.Name,
77
+
OwnerHandle: ownerHandle,
78
+
AvatarUrl: avatarUrl,
79
+
Title: pull.Title,
80
+
PullRequestNumber: pull.PullId,
81
+
Status: status,
82
+
FilesChanged: filesChanged,
83
+
Additions: int(additions),
84
+
Deletions: int(deletions),
85
+
Rounds: rounds,
86
+
CommentCount: commentCount,
87
+
ReactionCount: 0,
88
+
CreatedAt: pull.Created.Format(time.RFC3339),
89
+
}
90
+
91
+
imageBytes, err := s.ogcardClient.RenderPullRequestCard(r.Context(), payload)
306
92
if err != nil {
307
-
log.Println("failed to encode pull summary card", err)
308
-
http.Error(w, "failed to encode pull summary card", http.StatusInternalServerError)
93
+
log.Println("failed to render pull request card", err)
94
+
http.Error(w, "failed to render pull request card", http.StatusInternalServerError)
309
95
return
310
96
}
311
97
312
-
imageBytes := imageBuffer.Bytes()
313
-
314
98
w.Header().Set("Content-Type", "image/png")
315
-
w.Header().Set("Cache-Control", "public, max-age=3600") // 1 hour
99
+
w.Header().Set("Cache-Control", "public, max-age=3600")
316
100
w.WriteHeader(http.StatusOK)
317
101
_, err = w.Write(imageBytes)
318
102
if err != nil {
319
-
log.Println("failed to write pull summary card", err)
103
+
log.Println("failed to write pull request card", err)
320
104
return
321
105
}
322
106
}
+3
appview/pulls/pulls.go
+3
appview/pulls/pulls.go
···
26
26
"tangled.org/core/appview/models"
27
27
"tangled.org/core/appview/notify"
28
28
"tangled.org/core/appview/oauth"
29
+
"tangled.org/core/appview/ogcard"
29
30
"tangled.org/core/appview/pages"
30
31
"tangled.org/core/appview/pages/markup"
31
32
"tangled.org/core/appview/pages/repoinfo"
···
65
66
logger *slog.Logger
66
67
validator *validator.Validator
67
68
indexer *pulls_indexer.Indexer
69
+
ogcardClient *ogcard.Client
68
70
}
69
71
70
72
func New(
···
94
96
logger: logger,
95
97
validator: validator,
96
98
indexer: indexer,
99
+
ogcardClient: ogcard.NewClient(config.Ogcard.Host),
97
100
}
98
101
}
99
102
+36
-327
appview/repo/opengraph.go
+36
-327
appview/repo/opengraph.go
···
1
1
package repo
2
2
3
3
import (
4
-
"bytes"
5
4
"context"
6
-
"encoding/hex"
7
-
"fmt"
8
-
"image/color"
9
-
"image/png"
10
5
"log"
11
6
"net/http"
12
7
"sort"
13
-
"strings"
8
+
"time"
14
9
15
10
"github.com/go-enry/go-enry/v2"
16
11
"tangled.org/core/appview/db"
17
-
"tangled.org/core/appview/models"
18
12
"tangled.org/core/appview/ogcard"
19
13
"tangled.org/core/orm"
20
14
"tangled.org/core/types"
21
15
)
22
16
23
-
func (rp *Repo) drawRepoSummaryCard(repo *models.Repo, languageStats []types.RepoLanguageDetails) (*ogcard.Card, error) {
24
-
width, height := ogcard.DefaultSize()
25
-
mainCard, err := ogcard.NewCard(width, height)
17
+
func (rp *Repo) Opengraph(w http.ResponseWriter, r *http.Request) {
18
+
f, err := rp.repoResolver.Resolve(r)
26
19
if err != nil {
27
-
return nil, err
20
+
log.Println("failed to get repo and knot", err)
21
+
return
28
22
}
29
23
30
-
// Split: content area (75%) and language bar + icons (25%)
31
-
contentCard, bottomArea := mainCard.Split(false, 75)
32
-
33
-
// Add padding to content
34
-
contentCard.SetMargin(50)
35
-
36
-
// Split content horizontally: main content (80%) and avatar area (20%)
37
-
mainContent, avatarArea := contentCard.Split(true, 80)
38
-
39
-
// Use main content area for both repo name and description to allow dynamic wrapping.
40
-
mainContent.SetMargin(10)
41
-
42
24
var ownerHandle string
43
-
owner, err := rp.idResolver.ResolveIdent(context.Background(), repo.Did)
25
+
owner, err := rp.idResolver.ResolveIdent(context.Background(), f.Did)
44
26
if err != nil {
45
-
ownerHandle = repo.Did
27
+
ownerHandle = f.Did
46
28
} else {
47
29
ownerHandle = "@" + owner.Handle.String()
48
30
}
49
31
50
-
bounds := mainContent.Img.Bounds()
51
-
startX := bounds.Min.X + mainContent.Margin
52
-
startY := bounds.Min.Y + mainContent.Margin
53
-
currentX := startX
54
-
currentY := startY
55
-
lineHeight := 64 // Font size 54 + padding
56
-
textColor := color.RGBA{88, 96, 105, 255}
57
-
58
-
// Draw owner handle
59
-
ownerWidth, err := mainContent.DrawTextAtWithWidth(ownerHandle, currentX, currentY, textColor, 54, ogcard.Top, ogcard.Left)
60
-
if err != nil {
61
-
return nil, err
62
-
}
63
-
currentX += ownerWidth
64
-
65
-
// Draw separator
66
-
sepWidth, err := mainContent.DrawTextAtWithWidth(" / ", currentX, currentY, textColor, 54, ogcard.Top, ogcard.Left)
67
-
if err != nil {
68
-
return nil, err
69
-
}
70
-
currentX += sepWidth
71
-
72
-
words := strings.Fields(repo.Name)
73
-
spaceWidth, _ := mainContent.DrawTextAtWithWidth(" ", -1000, -1000, color.Black, 54, ogcard.Top, ogcard.Left)
74
-
if spaceWidth == 0 {
75
-
spaceWidth = 15
76
-
}
77
-
78
-
for _, word := range words {
79
-
// estimate bold width by measuring regular width and adding a multiplier
80
-
regularWidth, _ := mainContent.DrawTextAtWithWidth(word, -1000, -1000, color.Black, 54, ogcard.Top, ogcard.Left)
81
-
estimatedBoldWidth := int(float64(regularWidth) * 1.15) // Heuristic for bold text
82
-
83
-
if currentX+estimatedBoldWidth > (bounds.Max.X - mainContent.Margin) {
84
-
currentX = startX
85
-
currentY += lineHeight
86
-
}
87
-
88
-
_, err := mainContent.DrawBoldText(word, currentX, currentY, color.Black, 54, ogcard.Top, ogcard.Left)
89
-
if err != nil {
90
-
return nil, err
91
-
}
92
-
currentX += estimatedBoldWidth + spaceWidth
93
-
}
94
-
95
-
// update Y position for the description
96
-
currentY += lineHeight
97
-
98
-
// draw description
99
-
if currentY < bounds.Max.Y-mainContent.Margin {
100
-
totalHeight := float64(bounds.Dy())
101
-
repoNameHeight := float64(currentY - bounds.Min.Y)
102
-
103
-
if totalHeight > 0 && repoNameHeight < totalHeight {
104
-
repoNamePercent := (repoNameHeight / totalHeight) * 100
105
-
if repoNamePercent < 95 { // Ensure there's space left for description
106
-
_, descriptionCard := mainContent.Split(false, int(repoNamePercent))
107
-
descriptionCard.SetMargin(8)
108
-
109
-
description := repo.Description
110
-
if len(description) > 70 {
111
-
description = description[:70] + "…"
112
-
}
113
-
114
-
_, err = descriptionCard.DrawText(description, color.RGBA{88, 96, 105, 255}, 36, ogcard.Top, ogcard.Left)
115
-
if err != nil {
116
-
log.Printf("failed to draw description: %v", err)
117
-
}
118
-
}
119
-
}
120
-
}
121
-
122
-
// Draw avatar circle on the right side
123
-
avatarBounds := avatarArea.Img.Bounds()
124
-
avatarSize := min(avatarBounds.Dx(), avatarBounds.Dy()) - 20 // Leave some margin
125
-
if avatarSize > 220 {
126
-
avatarSize = 220
127
-
}
128
-
avatarX := avatarBounds.Min.X + (avatarBounds.Dx() / 2) - (avatarSize / 2)
129
-
avatarY := avatarBounds.Min.Y + 20
130
-
131
-
// Get avatar URL and draw it
132
-
avatarURL := rp.pages.AvatarUrl(ownerHandle, "256")
133
-
err = avatarArea.DrawCircularExternalImage(avatarURL, avatarX, avatarY, avatarSize)
134
-
if err != nil {
135
-
log.Printf("failed to draw avatar (non-fatal): %v", err)
136
-
}
137
-
138
-
// Split bottom area: icons area (65%) and language bar (35%)
139
-
iconsArea, languageBarCard := bottomArea.Split(false, 75)
140
-
141
-
// Split icons area: left side for stats (80%), right side for dolly (20%)
142
-
statsArea, dollyArea := iconsArea.Split(true, 80)
32
+
avatarUrl := rp.pages.AvatarUrl(ownerHandle, "256")
143
33
144
-
// Draw stats with icons in the stats area
145
-
starsText := repo.RepoStats.StarCount
146
-
issuesText := repo.RepoStats.IssueCount.Open
147
-
pullRequestsText := repo.RepoStats.PullCount.Open
148
-
149
-
iconColor := color.RGBA{88, 96, 105, 255}
150
-
iconSize := 36
151
-
textSize := 36.0
152
-
153
-
// Position stats in the middle of the stats area
154
-
statsBounds := statsArea.Img.Bounds()
155
-
statsX := statsBounds.Min.X + 60 // left padding
156
-
statsY := statsBounds.Min.Y
157
-
currentX = statsX
158
-
labelSize := 22.0
159
-
// Draw star icon, count, and label
160
-
// Align icon baseline with text baseline
161
-
iconBaselineOffset := int(textSize) / 2
162
-
err = statsArea.DrawLucideIcon("star", currentX, statsY+iconBaselineOffset-iconSize/2+5, iconSize, iconColor)
163
-
if err != nil {
164
-
log.Printf("failed to draw star icon: %v", err)
165
-
}
166
-
starIconX := currentX
167
-
currentX += iconSize + 15
168
-
169
-
starText := fmt.Sprintf("%d", starsText)
170
-
err = statsArea.DrawTextAt(starText, currentX, statsY+iconBaselineOffset, iconColor, textSize, ogcard.Middle, ogcard.Left)
171
-
if err != nil {
172
-
log.Printf("failed to draw star text: %v", err)
173
-
}
174
-
starTextWidth := len(starText) * 20
175
-
starGroupWidth := iconSize + 15 + starTextWidth
176
-
177
-
// Draw "stars" label below and centered under the icon+text group
178
-
labelY := statsY + iconSize + 15
179
-
labelX := starIconX + starGroupWidth/2
180
-
err = iconsArea.DrawTextAt("stars", labelX, labelY, iconColor, labelSize, ogcard.Top, ogcard.Center)
181
-
if err != nil {
182
-
log.Printf("failed to draw stars label: %v", err)
183
-
}
184
-
185
-
currentX += starTextWidth + 50
186
-
187
-
// Draw issues icon, count, and label
188
-
issueStartX := currentX
189
-
err = statsArea.DrawLucideIcon("circle-dot", currentX, statsY+iconBaselineOffset-iconSize/2+5, iconSize, iconColor)
190
-
if err != nil {
191
-
log.Printf("failed to draw circle-dot icon: %v", err)
192
-
}
193
-
currentX += iconSize + 15
194
-
195
-
issueText := fmt.Sprintf("%d", issuesText)
196
-
err = statsArea.DrawTextAt(issueText, currentX, statsY+iconBaselineOffset, iconColor, textSize, ogcard.Middle, ogcard.Left)
197
-
if err != nil {
198
-
log.Printf("failed to draw issue text: %v", err)
199
-
}
200
-
issueTextWidth := len(issueText) * 20
201
-
issueGroupWidth := iconSize + 15 + issueTextWidth
202
-
203
-
// Draw "issues" label below and centered under the icon+text group
204
-
labelX = issueStartX + issueGroupWidth/2
205
-
err = iconsArea.DrawTextAt("issues", labelX, labelY, iconColor, labelSize, ogcard.Top, ogcard.Center)
206
-
if err != nil {
207
-
log.Printf("failed to draw issues label: %v", err)
208
-
}
209
-
210
-
currentX += issueTextWidth + 50
211
-
212
-
// Draw pull request icon, count, and label
213
-
prStartX := currentX
214
-
err = statsArea.DrawLucideIcon("git-pull-request", currentX, statsY+iconBaselineOffset-iconSize/2+5, iconSize, iconColor)
215
-
if err != nil {
216
-
log.Printf("failed to draw git-pull-request icon: %v", err)
217
-
}
218
-
currentX += iconSize + 15
219
-
220
-
prText := fmt.Sprintf("%d", pullRequestsText)
221
-
err = statsArea.DrawTextAt(prText, currentX, statsY+iconBaselineOffset, iconColor, textSize, ogcard.Middle, ogcard.Left)
222
-
if err != nil {
223
-
log.Printf("failed to draw PR text: %v", err)
224
-
}
225
-
prTextWidth := len(prText) * 20
226
-
prGroupWidth := iconSize + 15 + prTextWidth
227
-
228
-
// Draw "pulls" label below and centered under the icon+text group
229
-
labelX = prStartX + prGroupWidth/2
230
-
err = iconsArea.DrawTextAt("pulls", labelX, labelY, iconColor, labelSize, ogcard.Top, ogcard.Center)
231
-
if err != nil {
232
-
log.Printf("failed to draw pulls label: %v", err)
233
-
}
234
-
235
-
dollyBounds := dollyArea.Img.Bounds()
236
-
dollySize := 90
237
-
dollyX := dollyBounds.Min.X + (dollyBounds.Dx() / 2) - (dollySize / 2)
238
-
dollyY := statsY + iconBaselineOffset - dollySize/2 + 25
239
-
dollyColor := color.RGBA{180, 180, 180, 255} // light gray
240
-
err = dollyArea.DrawDolly(dollyX, dollyY, dollySize, dollyColor)
241
-
if err != nil {
242
-
log.Printf("dolly silhouette not available (this is ok): %v", err)
243
-
}
244
-
245
-
// Draw language bar at bottom
246
-
err = drawLanguagesCard(languageBarCard, languageStats)
247
-
if err != nil {
248
-
log.Printf("failed to draw language bar: %v", err)
249
-
return nil, err
250
-
}
251
-
252
-
return mainCard, nil
253
-
}
254
-
255
-
// hexToColor converts a hex color to a go color
256
-
func hexToColor(colorStr string) (*color.RGBA, error) {
257
-
colorStr = strings.TrimLeft(colorStr, "#")
258
-
259
-
b, err := hex.DecodeString(colorStr)
260
-
if err != nil {
261
-
return nil, err
262
-
}
263
-
264
-
if len(b) < 3 {
265
-
return nil, fmt.Errorf("expected at least 3 bytes from DecodeString, got %d", len(b))
266
-
}
267
-
268
-
clr := color.RGBA{b[0], b[1], b[2], 255}
269
-
270
-
return &clr, nil
271
-
}
272
-
273
-
func drawLanguagesCard(card *ogcard.Card, languageStats []types.RepoLanguageDetails) error {
274
-
bounds := card.Img.Bounds()
275
-
cardWidth := bounds.Dx()
276
-
277
-
if len(languageStats) == 0 {
278
-
// Draw a light gray bar if no languages detected
279
-
card.DrawRect(bounds.Min.X, bounds.Min.Y, bounds.Max.X, bounds.Max.Y, color.RGBA{225, 228, 232, 255})
280
-
return nil
281
-
}
282
-
283
-
// Limit to top 5 languages for the visual bar
284
-
displayLanguages := languageStats
285
-
if len(displayLanguages) > 5 {
286
-
displayLanguages = displayLanguages[:5]
287
-
}
288
-
289
-
currentX := bounds.Min.X
290
-
291
-
for _, lang := range displayLanguages {
292
-
var langColor *color.RGBA
293
-
var err error
294
-
295
-
if lang.Color != "" {
296
-
langColor, err = hexToColor(lang.Color)
297
-
if err != nil {
298
-
// Fallback to a default color
299
-
langColor = &color.RGBA{149, 157, 165, 255}
300
-
}
301
-
} else {
302
-
// Default color if no color specified
303
-
langColor = &color.RGBA{149, 157, 165, 255}
304
-
}
305
-
306
-
langWidth := float32(cardWidth) * (lang.Percentage / 100)
307
-
card.DrawRect(currentX, bounds.Min.Y, currentX+int(langWidth), bounds.Max.Y, langColor)
308
-
currentX += int(langWidth)
309
-
}
310
-
311
-
// Fill remaining space with the last color (if any gap due to rounding)
312
-
if currentX < bounds.Max.X && len(displayLanguages) > 0 {
313
-
lastLang := displayLanguages[len(displayLanguages)-1]
314
-
var lastColor *color.RGBA
315
-
var err error
316
-
317
-
if lastLang.Color != "" {
318
-
lastColor, err = hexToColor(lastLang.Color)
319
-
if err != nil {
320
-
lastColor = &color.RGBA{149, 157, 165, 255}
321
-
}
322
-
} else {
323
-
lastColor = &color.RGBA{149, 157, 165, 255}
324
-
}
325
-
card.DrawRect(currentX, bounds.Min.Y, bounds.Max.X, bounds.Max.Y, lastColor)
326
-
}
327
-
328
-
return nil
329
-
}
330
-
331
-
func (rp *Repo) Opengraph(w http.ResponseWriter, r *http.Request) {
332
-
f, err := rp.repoResolver.Resolve(r)
333
-
if err != nil {
334
-
log.Println("failed to get repo and knot", err)
335
-
return
336
-
}
337
-
338
-
// Get language stats directly from database
339
34
var languageStats []types.RepoLanguageDetails
340
35
langs, err := db.GetRepoLanguages(
341
36
rp.db,
···
344
39
)
345
40
if err != nil {
346
41
log.Printf("failed to get language stats from db: %v", err)
347
-
// non-fatal, continue without language stats
348
42
} else if len(langs) > 0 {
349
43
var total int64
350
44
for _, l := range langs {
···
375
69
})
376
70
}
377
71
378
-
card, err := rp.drawRepoSummaryCard(f, languageStats)
379
-
if err != nil {
380
-
log.Println("failed to draw repo summary card", err)
381
-
http.Error(w, "failed to draw repo summary card", http.StatusInternalServerError)
382
-
return
72
+
var ogLanguages []ogcard.LanguageData
73
+
for _, lang := range languageStats {
74
+
if len(ogLanguages) >= 5 {
75
+
break
76
+
}
77
+
ogLanguages = append(ogLanguages, ogcard.LanguageData{
78
+
Color: lang.Color,
79
+
Percentage: lang.Percentage,
80
+
})
81
+
}
82
+
83
+
updatedAt := f.Created
84
+
85
+
payload := ogcard.RepositoryCardPayload{
86
+
Type: "repository",
87
+
RepoName: f.Name,
88
+
OwnerHandle: ownerHandle,
89
+
Stars: f.RepoStats.StarCount,
90
+
Pulls: f.RepoStats.PullCount.Open,
91
+
Issues: f.RepoStats.IssueCount.Open,
92
+
UpdatedAt: updatedAt.Format(time.RFC3339),
93
+
AvatarUrl: avatarUrl,
94
+
Languages: ogLanguages,
383
95
}
384
96
385
-
var imageBuffer bytes.Buffer
386
-
err = png.Encode(&imageBuffer, card.Img)
97
+
imageBytes, err := rp.ogcardClient.RenderRepositoryCard(r.Context(), payload)
387
98
if err != nil {
388
-
log.Println("failed to encode repo summary card", err)
389
-
http.Error(w, "failed to encode repo summary card", http.StatusInternalServerError)
99
+
log.Println("failed to render repository card", err)
100
+
http.Error(w, "failed to render repository card", http.StatusInternalServerError)
390
101
return
391
102
}
392
103
393
-
imageBytes := imageBuffer.Bytes()
394
-
395
104
w.Header().Set("Content-Type", "image/png")
396
-
w.Header().Set("Cache-Control", "public, max-age=3600") // 1 hour
105
+
w.Header().Set("Cache-Control", "public, max-age=3600")
397
106
w.WriteHeader(http.StatusOK)
398
107
_, err = w.Write(imageBytes)
399
108
if err != nil {
400
-
log.Println("failed to write repo summary card", err)
109
+
log.Println("failed to write repository card", err)
401
110
return
402
111
}
403
112
}
+3
appview/repo/repo.go
+3
appview/repo/repo.go
···
20
20
"tangled.org/core/appview/models"
21
21
"tangled.org/core/appview/notify"
22
22
"tangled.org/core/appview/oauth"
23
+
"tangled.org/core/appview/ogcard"
23
24
"tangled.org/core/appview/pages"
24
25
"tangled.org/core/appview/reporesolver"
25
26
"tangled.org/core/appview/validator"
···
53
54
serviceAuth *serviceauth.ServiceAuth
54
55
validator *validator.Validator
55
56
cfClient *cloudflare.Client
57
+
ogcardClient *ogcard.Client
56
58
}
57
59
58
60
func New(
···
82
84
logger: logger,
83
85
validator: validator,
84
86
cfClient: cfClient,
87
+
ogcardClient: ogcard.NewClient(config.Ogcard.Host),
85
88
}
86
89
}
87
90
+20
-17
avatar/src/index.js
+20
-17
avatar/src/index.js
···
150
150
151
151
const size = searchParams.get("size");
152
152
const resizeToTiny = size === "tiny";
153
+
const format = searchParams.get("format") || "webp";
154
+
const validFormats = ["webp", "jpeg", "png"];
155
+
const outputFormat = validFormats.includes(format) ? format : "webp";
156
+
157
+
const contentTypes = {
158
+
webp: "image/webp",
159
+
jpeg: "image/jpeg",
160
+
png: "image/png",
161
+
};
153
162
154
163
const cache = caches.default;
155
164
let cacheKey = request.url;
···
242
251
243
252
// Fetch and optionally resize the avatar
244
253
let avatarResponse;
245
-
if (resizeToTiny) {
246
-
avatarResponse = await fetch(avatarUrl, {
247
-
// cf: {
248
-
// image: {
249
-
// width: 32,
250
-
// height: 32,
251
-
// fit: "cover",
252
-
// format: "webp",
253
-
// },
254
-
// },
255
-
});
256
-
} else {
257
-
avatarResponse = await fetch(avatarUrl);
258
-
}
254
+
const cfOptions = outputFormat !== "webp" || resizeToTiny ? {
255
+
cf: {
256
+
image: {
257
+
format: outputFormat,
258
+
...(resizeToTiny ? { width: 32, height: 32, fit: "cover" } : {}),
259
+
},
260
+
},
261
+
}: {};
262
+
263
+
avatarResponse = await fetch(avatarUrl, cfOptions);
259
264
260
265
if (!avatarResponse.ok) {
261
266
return new Response(`failed to fetch avatar for ${actor}.`, {
···
264
269
}
265
270
266
271
const avatarData = await avatarResponse.arrayBuffer();
267
-
const contentType =
268
-
avatarResponse.headers.get("content-type") || "image/jpeg";
269
272
270
273
response = new Response(avatarData, {
271
274
headers: {
272
-
"Content-Type": contentType,
275
+
"Content-Type": contentTypes[outputFormat],
273
276
"Cache-Control": "public, max-age=43200",
274
277
},
275
278
});
History
5 rounds
20 comments
expand 5 comments
i definitely see 42 changed files with +2214/-1481 on here! (you may be viewing an earlier round perhaps?)!
commit message is perfect, i do have some minor code change comments, but i am happy to handle that outside of this PR.
ah yes you're right, i didn't realize i was still on an earlier round! great, lmk if you need anything else :)
Not really related to this PR, but somehow Bun's lockfile is not collapsed by default. Maybe a bug in go-enry?
yup it is a known issue in enry!
pull request successfully merged
23 commits
expand
collapse
refactor: move og card rendering to external worker service
replace local go-based card rendering with calls to an external
ogcard worker (cloudflare workers). this offloads image processing
and simplifies the main application code.
changes:
- remove local ogcard rendering code from appview/ogcard/card.go
- add ogcard client package for external worker communication
- update issues opengraph handler to use new client
- add format parameter support to avatar service (webp/jpeg/png)
- add OgcardConfig for worker host configuration
update packages to their latest version
wire up opengraph handlers to use ogcard HTTP client
Replace local Go image rendering with HTTP calls to the remote TypeScript ogcard service. Add OgcardConfig for service URL configuration and extend the client to support repository, issue, and pull request card rendering.
appview/ogcard: improve fixtures.ts mock text
appview/ogcard: remove comment from logo.tsx
appview/ogcard: add knip dependency
knip helps find unused files, dependencies and exports in ts/js
projects. https://knip.dev/
appview/ogcard: commit bun.lock
appview/ogcard/components: add more font constants and use them
appview/ogcard/icons: remove unused exports
appview/ogcard: remove unused export from validation.ts
appview/ogcard: simplify wrangler.jsonc
appview/ogcard: fix language circles not being draw properly
appview/ogcard: show comments and reaction count only when larger than 0
appview/ogcard: switch repo card "updated at" to "created at"
appview/ogcard: replace remnant s with s
appview/ogcard: fix type issues
appview/ogcard: add TypeScript declaration for wasm module imports
appview/ogcard: pin satori to exact version to ensure wasm compatibility
appview/ogcard: add global_navigator compatibility flag for cf workers
appview/ogcard: load satori wasm module directly instead of from cdn
appview/ogcard: switch to wasm resvg and bundled fonts for cf Workers
appview/ogcard: extract satori/resvg runtime into separate package
appview/ogcard: format code with prettier
expand 0 comments
5 commits
expand
collapse
refactor: move og card rendering to external worker service
replace local go-based card rendering with calls to an external
ogcard worker (cloudflare workers). this offloads image processing
and simplifies the main application code.
changes:
- remove local ogcard rendering code from appview/ogcard/card.go
- add ogcard client package for external worker communication
- update issues opengraph handler to use new client
- add format parameter support to avatar service (webp/jpeg/png)
- add OgcardConfig for worker host configuration
update packages to their latest version
wire up opengraph handlers to use ogcard HTTP client
Replace local Go image rendering with HTTP calls to the remote TypeScript ogcard service. Add OgcardConfig for service URL configuration and extend the client to support repository, issue, and pull request card rendering.
appview/ogcard: improve fixtures.ts mock text
appview/ogcard: remove comment from logo.tsx
expand 11 comments
appview/ogcard/src/index.tsx:85
I think that if we 500 out, we should not show the stack to the public, just as a security measure
appview/ogcard/wrangler.jsonc:6 is this subbed out at runtime?
appview/ogcard/.gitignore:2 bun huh? :P I think it would be nice to commit the lockfile in fact
appview/ogcard/src/components/shared/constants.ts:20-26 is this going to be used somewhere?
appview/ogcard/src/components/shared/language-circles.tsx:9 Another unused constant, or maybe ctrl+f on this PR page doesn't catch the full picture
appview/ogcard/src/components/shared/footer-stats.tsx:19 would be cool if we did conditional rendering here for the 0 reactions case so that people don't get sad that their repo has 0 reactions advertised so blatantly heh
appview/repo/opengraph.go:83 we don't have an updatedAt on git repos, do we...
appview/repo/opengraph.go:92 doesn't this just render the actual timestamp itself?
appview/ogcard/src/lib/render.ts:17 I'm not super familiar with cf workers but fetching inside a worker doesn't seem super nice. could we inline it? I also noticed that package.json has this at ^0.25.0 which would make a mismatch pretty quickly
appview/ogcard/src/lib/fonts.ts:19-21 more inlining opportunities
my only comment: can we squash the to 1 (and rebase on latest master perhaps)?
would be ripe if you could update the new commit to adhere to the commit guidelines, it would also need DCO.
don't pay attention to #3... it was uh... nothing feel free to take a look at the latest squashed commit, let me know your thoughts!
3 commits
expand
collapse
refactor: move og card rendering to external worker service
replace local go-based card rendering with calls to an external
ogcard worker (cloudflare workers). this offloads image processing
and simplifies the main application code.
changes:
- remove local ogcard rendering code from appview/ogcard/card.go
- add ogcard client package for external worker communication
- update issues opengraph handler to use new client
- add format parameter support to avatar service (webp/jpeg/png)
- add OgcardConfig for worker host configuration
update packages to their latest version
wire up opengraph handlers to use ogcard HTTP client
Replace local Go image rendering with HTTP calls to the remote TypeScript ogcard service. Add OgcardConfig for service URL configuration and extend the client to support repository, issue, and pull request card rendering.
expand 2 comments
appview/ogcard/src/components/shared/logo.tsx:1
nit: this has been customized already, yes? :P
good catch 😸
3 commits
expand
collapse
refactor: move og card rendering to external worker service
replace local go-based card rendering with calls to an external
ogcard worker (cloudflare workers). this offloads image processing
and simplifies the main application code.
changes:
- remove local ogcard rendering code from appview/ogcard/card.go
- add ogcard client package for external worker communication
- update issues opengraph handler to use new client
- add format parameter support to avatar service (webp/jpeg/png)
- add OgcardConfig for worker host configuration
update packages to their latest version
wire up opengraph handlers to use ogcard HTTP client
Replace local Go image rendering with HTTP calls to the remote TypeScript ogcard service. Add OgcardConfig for service URL configuration and extend the client to support repository, issue, and pull request card rendering.
for some reason the amount of files changed here (36) is lower than the amount of files changed on my fork (42).. any ideas?
0927d254it seems like this pr doesn't have the exact same content as my commit?