zzstoatzz.io
interactive intro to open social
at-me.zzstoatzz.io
feat: add open graph and twitter card meta tags for link previews
- add og:title, og:description, og:image, og:url meta tags
- add twitter:card, twitter:title, twitter:description, twitter:image meta tags
- create og-image.png (1200x630) with @me branding and aesthetic
- matches app's dark gradient background with orbital design
- improves social media sharing experience
+33
-2
src/templates.rs
+33
-2
src/templates.rs
···
4
4
<html>
5
5
<head>
6
6
<meta charset="UTF-8">
7
-
<title>@me - login</title>
7
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+
<title>@me - explore your atproto identity</title>
8
9
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
10
+
11
+
<!-- Open Graph / Facebook -->
12
+
<meta property="og:type" content="website">
13
+
<meta property="og:url" content="https://at-me.fly.dev/">
14
+
<meta property="og:title" content="@me - explore your atproto identity">
15
+
<meta property="og:description" content="visualize your decentralized identity and see what apps have stored data in your personal data server">
16
+
<meta property="og:image" content="https://at-me.fly.dev/static/og-image.png">
17
+
18
+
<!-- Twitter -->
19
+
<meta property="twitter:card" content="summary_large_image">
20
+
<meta property="twitter:url" content="https://at-me.fly.dev/">
21
+
<meta property="twitter:title" content="@me - explore your atproto identity">
22
+
<meta property="twitter:description" content="visualize your decentralized identity and see what apps have stored data in your personal data server">
23
+
<meta property="twitter:image" content="https://at-me.fly.dev/static/og-image.png">
24
+
9
25
<style>
10
26
* { margin: 0; padding: 0; box-sizing: border-box; }
11
27
···
207
223
<head>
208
224
<meta charset="UTF-8">
209
225
<meta name="viewport" content="width=device-width, initial-scale=1.0">
210
-
<title>@me</title>
226
+
<title>@me - explore your atproto identity</title>
211
227
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
228
+
229
+
<!-- Open Graph / Facebook -->
230
+
<meta property="og:type" content="website">
231
+
<meta property="og:url" content="https://at-me.fly.dev/">
232
+
<meta property="og:title" content="@me - explore your atproto identity">
233
+
<meta property="og:description" content="visualize your decentralized identity and see what apps have stored data in your personal data server">
234
+
<meta property="og:image" content="https://at-me.fly.dev/static/og-image.png">
235
+
236
+
<!-- Twitter -->
237
+
<meta property="twitter:card" content="summary_large_image">
238
+
<meta property="twitter:url" content="https://at-me.fly.dev/">
239
+
<meta property="twitter:title" content="@me - explore your atproto identity">
240
+
<meta property="twitter:description" content="visualize your decentralized identity and see what apps have stored data in your personal data server">
241
+
<meta property="twitter:image" content="https://at-me.fly.dev/static/og-image.png">
242
+
212
243
<style>
213
244
* {{ margin: 0; padding: 0; box-sizing: border-box; }}
214
245
static/og-image.png
static/og-image.png
This is a binary file and will not be displayed.
+31
static/og-image.svg
+31
static/og-image.svg
···
1
+
<svg width="1200" height="630" viewBox="0 0 1200 630" xmlns="http://www.w3.org/2000/svg">
2
+
<!-- Background gradient -->
3
+
<defs>
4
+
<radialGradient id="bg" cx="50%" cy="50%">
5
+
<stop offset="0%" style="stop-color:#0a0a0f;stop-opacity:1" />
6
+
<stop offset="100%" style="stop-color:#000000;stop-opacity:1" />
7
+
</radialGradient>
8
+
</defs>
9
+
10
+
<!-- Background -->
11
+
<rect width="1200" height="630" fill="url(#bg)"/>
12
+
13
+
<!-- Orbital rings -->
14
+
<circle cx="600" cy="315" r="180" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/>
15
+
<circle cx="600" cy="315" r="240" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/>
16
+
17
+
<!-- Center circle -->
18
+
<circle cx="600" cy="315" r="120" fill="rgba(20,20,25,0.8)" stroke="rgba(255,255,255,0.3)" stroke-width="2"/>
19
+
20
+
<!-- @ symbol -->
21
+
<text x="600" y="350" font-family="ui-monospace, 'SF Mono', Monaco, monospace" font-size="120" fill="#e5e5e5" text-anchor="middle" font-weight="300">@</text>
22
+
23
+
<!-- Title -->
24
+
<text x="600" y="480" font-family="ui-monospace, 'SF Mono', Monaco, monospace" font-size="32" fill="#e5e5e5" text-anchor="middle" font-weight="300" letter-spacing="0.05em">explore your atproto identity</text>
25
+
26
+
<!-- Small decorative circles representing apps -->
27
+
<circle cx="720" cy="260" r="20" fill="rgba(40,40,50,0.6)" stroke="rgba(255,255,255,0.2)" stroke-width="1"/>
28
+
<circle cx="480" cy="290" r="18" fill="rgba(40,40,50,0.6)" stroke="rgba(255,255,255,0.2)" stroke-width="1"/>
29
+
<circle cx="680" cy="390" r="22" fill="rgba(40,40,50,0.6)" stroke="rgba(255,255,255,0.2)" stroke-width="1"/>
30
+
<circle cx="520" cy="350" r="16" fill="rgba(40,40,50,0.6)" stroke="rgba(255,255,255,0.2)" stroke-width="1"/>
31
+
</svg>
