this repo has no description
feat(og): add developer-resources social preview
Made-with: Cursor
+161
-2
+6
-2
routes/_app.tsx
+6
-2
routes/_app.tsx
···
254
254
const effectsOn = url.pathname === "/";
255
255
const htmlClass = effectsOn ? "sky-effects" : "sky-static";
256
256
const bodyClass = effectsOn ? "sky-bg" : "sky-bg explore-no-effects";
257
-
const socialImagePath = url.pathname.startsWith("/explore")
257
+
const socialImagePath = url.pathname.startsWith("/developer-resources")
258
+
? "/og-developer.png"
259
+
: url.pathname.startsWith("/explore")
258
260
? "/og-explore.png"
259
261
: "/og-hero.png";
260
-
const socialImageAlt = url.pathname.startsWith("/explore")
262
+
const socialImageAlt = url.pathname.startsWith("/developer-resources")
263
+
? "Atmosphere developer resources: sign-in badges, project icons, and the registry API."
264
+
: url.pathname.startsWith("/explore")
261
265
? "Explore the Atmosphere registry: apps, profiles, reviews, and updates."
262
266
: t.meta.ogImageAlt;
263
267
return (
+6
scripts/generate-static-images.ts
+6
scripts/generate-static-images.ts
···
17
17
await writeFile(join(root, "static/og-explore.png"), exploreOgPng);
18
18
console.log("Wrote static/og-explore.png", exploreOgPng.length, "bytes");
19
19
20
+
const developerOgSvg = await readFile(join(root, "static/og-developer.svg"));
21
+
const developerOgPng = await sharp(developerOgSvg).png().resize(1200, 630)
22
+
.toBuffer();
23
+
await writeFile(join(root, "static/og-developer.png"), developerOgPng);
24
+
console.log("Wrote static/og-developer.png", developerOgPng.length, "bytes");
25
+
20
26
const unionSvg = await readFile(join(root, "static/union.svg"));
21
27
const bg = { r: 0, g: 0, b: 0, alpha: 0 };
22
28
const icon32 = await sharp(unionSvg).resize(32, 32, {
static/og-developer.png
static/og-developer.png
This is a binary file and will not be displayed.
+149
static/og-developer.svg
+149
static/og-developer.svg
···
1
+
<svg
2
+
xmlns="http://www.w3.org/2000/svg"
3
+
width="1200"
4
+
height="630"
5
+
viewBox="0 0 1200 630"
6
+
fill="none"
7
+
>
8
+
<defs>
9
+
<linearGradient
10
+
id="sky"
11
+
x1="600"
12
+
y1="0"
13
+
x2="600"
14
+
y2="630"
15
+
gradientUnits="userSpaceOnUse"
16
+
>
17
+
<stop stop-color="#e8f0fe" />
18
+
<stop offset="0.25" stop-color="#c9d8f5" />
19
+
<stop offset="0.5" stop-color="#a8c4f0" />
20
+
<stop offset="0.75" stop-color="#c0d4f5" />
21
+
<stop offset="1" stop-color="#ebe4f5" />
22
+
</linearGradient>
23
+
<radialGradient
24
+
id="sun"
25
+
cx="0"
26
+
cy="0"
27
+
r="1"
28
+
gradientUnits="userSpaceOnUse"
29
+
gradientTransform="translate(620 120) rotate(90) scale(520 340)"
30
+
>
31
+
<stop stop-color="#fff6d8" stop-opacity="0.95" />
32
+
<stop offset="0.35" stop-color="#ffe8b8" stop-opacity="0.55" />
33
+
<stop offset="0.7" stop-color="#ffd8a0" stop-opacity="0.18" />
34
+
<stop offset="1" stop-color="#ffd8a0" stop-opacity="0" />
35
+
</radialGradient>
36
+
<linearGradient
37
+
id="cloudStroke"
38
+
x1="0"
39
+
y1="0"
40
+
x2="0"
41
+
y2="1"
42
+
gradientUnits="objectBoundingBox"
43
+
>
44
+
<stop stop-color="#D0FCFF" />
45
+
<stop offset="0.78" stop-color="#E9FEFF" stop-opacity="0.55" />
46
+
<stop offset="1" stop-color="#E9FEFF" stop-opacity="0.42" />
47
+
</linearGradient>
48
+
<filter
49
+
id="cloudBlur"
50
+
x="-20%"
51
+
y="-20%"
52
+
width="140%"
53
+
height="140%"
54
+
color-interpolation-filters="sRGB"
55
+
>
56
+
<feGaussianBlur stdDeviation="12" result="b" />
57
+
<feMerge>
58
+
<feMergeNode in="b" />
59
+
<feMergeNode in="SourceGraphic" />
60
+
</feMerge>
61
+
</filter>
62
+
</defs>
63
+
<rect width="1200" height="630" fill="url(#sky)" />
64
+
<rect width="1200" height="630" fill="url(#sun)" />
65
+
66
+
<!-- Hero clouds (geometry from GlassClouds, scaled to frame) -->
67
+
<g opacity="0.92" filter="url(#cloudBlur)">
68
+
<g transform="translate(-80 -20) scale(0.42)">
69
+
<path
70
+
fill="#79CFFF"
71
+
fill-opacity="0.2"
72
+
stroke="url(#cloudStroke)"
73
+
stroke-width="4"
74
+
stroke-linejoin="round"
75
+
d="M430.377 323.959C431.455 323.986 432.536 324 433.621 324C495.134 324 545 279.795 545 225.266C545 172.442 498.203 129.307 439.355 126.661C424.209 88.0793 382.821 60.3905 334.137 60.3905C326.999 60.3905 320.017 60.9858 313.253 62.1233C296.847 25.72 256.703 0 209.782 0C148.269 0 98.4028 44.2046 98.4028 98.7337C98.4028 108.487 99.9982 117.911 102.97 126.81C45.3852 130.62 0 173.245 0 225.266C0 279.795 49.8661 324 111.379 324C113.192 324 114.994 323.962 116.786 323.886V324H430.377V323.959Z"
76
+
/>
77
+
</g>
78
+
<g transform="translate(720 40) scale(0.36)">
79
+
<path
80
+
fill="#79CFFF"
81
+
fill-opacity="0.16"
82
+
stroke="url(#cloudStroke)"
83
+
stroke-width="4"
84
+
stroke-linejoin="round"
85
+
d="M332 259.96C332.83 259.98 333.67 260 334.51 260C381.94 260 420 225.02 420 182.81C420 141.85 384.81 107.68 339.37 105.56C327.68 74.84 295.58 53 257.93 53C252.42 53 247.03 53.48 241.81 54.39C229.15 25.49 198.16 5 161.92 5C114.42 5 75.94 39.98 75.94 82.19C75.94 89.92 77.17 97.37 79.47 104.43C35.01 107.48 0 141.25 0 182.81C0 225.02 38.47 260 85.93 260C87.33 260 88.72 259.97 90.1 259.91V260H332V259.96Z"
86
+
/>
87
+
</g>
88
+
<g transform="translate(80 280) scale(0.48)">
89
+
<path
90
+
fill="#79CFFF"
91
+
fill-opacity="0.15"
92
+
stroke="url(#cloudStroke)"
93
+
stroke-width="4"
94
+
stroke-linejoin="round"
95
+
d="M490 369.95C491.23 369.98 492.47 370 493.71 370C563.73 370 620 319.6 620 257.3C620 197 564.63 147.7 500.67 144.68C483.44 100.58 436.3 68.93 380.85 68.93C372.72 68.93 364.78 69.61 357.08 70.9C338.4 29.33 292.67 0 238.87 0C168.85 0 112 50.41 112 112.71C112 123.83 113.82 134.58 117.2 144.73C51.65 149.08 0 197.73 0 257.3C0 319.6 56.78 370 126.79 370C128.85 370 130.9 369.96 132.94 369.87V370H490V369.95Z"
96
+
/>
97
+
</g>
98
+
<g transform="translate(780 320) scale(0.4)">
99
+
<path
100
+
fill="#79CFFF"
101
+
fill-opacity="0.18"
102
+
stroke="url(#cloudStroke)"
103
+
stroke-width="4"
104
+
stroke-linejoin="round"
105
+
d="M300 229.96C300.75 229.98 301.51 230 302.27 230C345.13 230 380 198.09 380 159.26C380 121.6 347.21 90.52 305.59 88.58C295.05 60.39 266.03 40 232.03 40C227.05 40 222.18 40.43 217.47 41.26C206.05 14.95 178.07 -3 145.37 -3C102.5 -3 67.63 28.91 67.63 68.75C67.63 75.84 68.74 82.68 70.81 89.15C30.65 91.95 0 122.89 0 160.26C0 198.89 34.73 230 77.59 230C78.85 230 80.11 229.97 81.36 229.92V230H300V229.96Z"
106
+
/>
107
+
</g>
108
+
<g transform="translate(420 420) scale(0.38)">
109
+
<path
110
+
fill="#79CFFF"
111
+
fill-opacity="0.17"
112
+
stroke="url(#cloudStroke)"
113
+
stroke-width="4"
114
+
stroke-linejoin="round"
115
+
d="M379 289.96C380 289.98 381.01 290 382.03 290C436.23 290 480 250.57 480 201.63C480 154.21 438.75 115.62 387.85 113.26C374.43 79.32 338 55 295.08 55C288.78 55 282.63 55.53 276.66 56.53C262.19 23.02 225.83 0 183.72 0C129.52 0 85.75 39.43 85.75 88.37C85.75 96.99 87.15 105.31 89.77 113.19C40.04 116.48 0 153.75 0 199.63C0 250.57 43.92 290 98.12 290C99.71 290 101.3 289.97 102.88 289.9V290H379V289.96Z"
116
+
/>
117
+
</g>
118
+
</g>
119
+
120
+
<text
121
+
x="600"
122
+
y="278"
123
+
text-anchor="middle"
124
+
fill="rgba(18,26,47,0.68)"
125
+
font-family="ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace"
126
+
font-size="22"
127
+
font-weight="600"
128
+
letter-spacing="0.42em"
129
+
>ATMOSPHERE ACCOUNT</text>
130
+
<text
131
+
x="600"
132
+
y="378"
133
+
text-anchor="middle"
134
+
fill="#0e1428"
135
+
font-family="ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace"
136
+
font-size="96"
137
+
font-weight="600"
138
+
letter-spacing="-0.03em"
139
+
>For developers.</text>
140
+
<text
141
+
x="600"
142
+
y="442"
143
+
text-anchor="middle"
144
+
fill="rgba(18,26,47,0.93)"
145
+
font-family="ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif"
146
+
font-size="26"
147
+
font-weight="400"
148
+
>Sign-in badges, project icons, and the registry API.</text>
149
+
</svg>
