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.
appview/config/config.go
appview/config/config.go
This file has not been changed.
appview/issues/issues.go
appview/issues/issues.go
This file has not been changed.
appview/issues/opengraph.go
appview/issues/opengraph.go
This file has not been changed.
appview/ogcard/.gitignore
appview/ogcard/.gitignore
This file has not been changed.
appview/ogcard/card.go
appview/ogcard/card.go
This file has not been changed.
appview/ogcard/client.go
appview/ogcard/client.go
This file has not been changed.
appview/ogcard/package.json
appview/ogcard/package.json
This file has not been changed.
appview/ogcard/src/__tests__/assets/avatar.jpg
appview/ogcard/src/__tests__/assets/avatar.jpg
Failed to calculate interdiff for this file.
+41
-24
appview/ogcard/src/__tests__/fixtures.ts
+41
-24
appview/ogcard/src/__tests__/fixtures.ts
···
1
-
import type { RepositoryCardData, IssueCardData, PullRequestCardData } from "../validation";
1
+
import type {
2
+
RepositoryCardData,
3
+
IssueCardData,
4
+
PullRequestCardData,
5
+
} from "../validation";
2
6
3
-
const LONG_TITLE = "Fix critical memory leak in WebSocket connection handler that causes server crashes under high load conditions in production environments";
7
+
const LONG_TITLE =
8
+
"fix critical memory leak in WebSocket connection handler that causes server crashes under high load conditions in production environments";
4
9
5
10
export const createRepoData = (avatarUrl: string): RepositoryCardData => ({
6
11
type: "repository",
7
-
repoName: "lexicons",
8
-
ownerHandle: "standard.site",
9
-
stars: 34,
10
-
pulls: 3,
11
-
issues: 8,
12
+
repoName: "core",
13
+
ownerHandle: "tangled.org",
14
+
stars: 746,
15
+
pulls: 82,
16
+
issues: 176,
12
17
updatedAt: "updated 2 hours ago",
13
18
avatarUrl,
14
19
languages: [
15
-
{ color: "#3178c6", percentage: 65 },
16
-
{ color: "#f1e05a", percentage: 20 },
17
-
{ color: "#e34c26", percentage: 10 },
18
-
{ color: "#cccccc", percentage: 3 },
19
-
{ color: "#cccccc", percentage: 2 },
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 },
20
25
],
21
26
});
22
27
23
-
export const createIssueData = (avatarUrl: string, overrides?: Partial<IssueCardData>): IssueCardData => ({
28
+
export const createIssueData = (
29
+
avatarUrl: string,
30
+
overrides?: Partial<IssueCardData>,
31
+
): IssueCardData => ({
24
32
type: "issue",
25
-
repoName: "lexicons",
26
-
ownerHandle: "standard.site",
33
+
repoName: "core",
34
+
ownerHandle: "tangled.org",
27
35
avatarUrl,
28
-
title: "blobContent field in addition to textContent",
36
+
title: "feature request: sync fork button",
29
37
issueNumber: 8,
30
38
status: "open",
31
39
labels: [
32
-
{ name: "bug", color: "#d73a4a" },
40
+
{ name: "feature", color: "#4639d6" },
33
41
{ name: "help-wanted", color: "#008672" },
34
42
{ name: "enhancement", color: "#0052cc" },
35
43
],
···
39
47
...overrides,
40
48
});
41
49
42
-
export const createPullRequestData = (avatarUrl: string, overrides?: Partial<PullRequestCardData>): PullRequestCardData => ({
50
+
export const createPullRequestData = (
51
+
avatarUrl: string,
52
+
overrides?: Partial<PullRequestCardData>,
53
+
): PullRequestCardData => ({
43
54
type: "pullRequest",
44
-
repoName: "lexicons",
45
-
ownerHandle: "standard.site",
55
+
repoName: "core",
56
+
ownerHandle: "tangled.org",
46
57
avatarUrl,
47
-
title: "Add author lexicon",
58
+
title: "add author description to README.md",
48
59
pullRequestNumber: 1,
49
60
status: "open",
50
61
filesChanged: 2,
···
57
68
...overrides,
58
69
});
59
70
60
-
export const createLongTitleIssueData = (avatarUrl: string, overrides?: Partial<IssueCardData>): IssueCardData => ({
71
+
export const createLongTitleIssueData = (
72
+
avatarUrl: string,
73
+
overrides?: Partial<IssueCardData>,
74
+
): IssueCardData => ({
61
75
...createIssueData(avatarUrl),
62
76
title: LONG_TITLE,
63
77
...overrides,
64
78
});
65
79
66
-
export const createLongTitlePullRequestData = (avatarUrl: string, overrides?: Partial<PullRequestCardData>): PullRequestCardData => ({
80
+
export const createLongTitlePullRequestData = (
81
+
avatarUrl: string,
82
+
overrides?: Partial<PullRequestCardData>,
83
+
): PullRequestCardData => ({
67
84
...createPullRequestData(avatarUrl),
68
85
title: LONG_TITLE,
69
86
...overrides,
70
-
});
87
+
});
appview/ogcard/src/__tests__/render.test.ts
appview/ogcard/src/__tests__/render.test.ts
This file has not been changed.
appview/ogcard/src/components/cards/issue.tsx
appview/ogcard/src/components/cards/issue.tsx
This file has not been changed.
appview/ogcard/src/components/cards/pull-request.tsx
appview/ogcard/src/components/cards/pull-request.tsx
This file has not been changed.
appview/ogcard/src/components/cards/repository.tsx
appview/ogcard/src/components/cards/repository.tsx
This file has not been changed.
appview/ogcard/src/icons/lucide.tsx
appview/ogcard/src/icons/lucide.tsx
This file has not been changed.
appview/ogcard/src/index.tsx
appview/ogcard/src/index.tsx
This file has not been changed.
appview/ogcard/src/lib/fonts.ts
appview/ogcard/src/lib/fonts.ts
This file has not been changed.
appview/ogcard/src/lib/render.ts
appview/ogcard/src/lib/render.ts
This file has not been changed.
appview/ogcard/src/validation.ts
appview/ogcard/src/validation.ts
This file has not been changed.
appview/ogcard/tsconfig.json
appview/ogcard/tsconfig.json
This file has not been changed.
appview/ogcard/wrangler.jsonc
appview/ogcard/wrangler.jsonc
This file has not been changed.
appview/pulls/opengraph.go
appview/pulls/opengraph.go
This file has not been changed.
appview/pulls/pulls.go
appview/pulls/pulls.go
This file has not been changed.
appview/repo/opengraph.go
appview/repo/opengraph.go
This file has not been changed.
appview/repo/repo.go
appview/repo/repo.go
This file has not been changed.
avatar/src/index.js
avatar/src/index.js
This file has not been changed.
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?