An entry for the streamplace vod showcase
feat(web): add OG meta tags and social image
- Add og:title, og:description, og:image meta tags
- Add Twitter card meta tags
- Create Navy-themed OG image with play button
- Update page title and description
- Add theme-color for browser UI
Note: og:image URL should be updated to absolute URL for production
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
+60
-1
+19
-1
apps/web/index.html
+19
-1
apps/web/index.html
···
4
4
<meta charset="UTF-8" />
5
5
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
6
6
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
-
<title>web</title>
7
+
8
+
<title>Streamhut - Video Streaming on AT Protocol</title>
9
+
<meta name="description" content="Decentralized video streaming powered by AT Protocol serverless bundles. Watch, discover, and explore content from creators on the ATmosphere." />
10
+
11
+
<!-- Open Graph -->
12
+
<meta property="og:type" content="website" />
13
+
<meta property="og:title" content="Streamhut" />
14
+
<meta property="og:description" content="Decentralized video streaming powered by AT Protocol serverless bundles." />
15
+
<meta property="og:image" content="/og-image.svg" />
16
+
<meta property="og:site_name" content="Streamhut" />
17
+
18
+
<!-- Twitter Card -->
19
+
<meta name="twitter:card" content="summary_large_image" />
20
+
<meta name="twitter:title" content="Streamhut" />
21
+
<meta name="twitter:description" content="Decentralized video streaming powered by AT Protocol serverless bundles." />
22
+
<meta name="twitter:image" content="/og-image.svg" />
23
+
24
+
<!-- Theme color for browser UI -->
25
+
<meta name="theme-color" content="#1a2332" />
8
26
</head>
9
27
<body>
10
28
<div id="root"></div>
+41
apps/web/public/og-image.svg
+41
apps/web/public/og-image.svg
···
1
+
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630">
2
+
<defs>
3
+
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
4
+
<stop offset="0%" style="stop-color:#1a2332"/>
5
+
<stop offset="100%" style="stop-color:#232f42"/>
6
+
</linearGradient>
7
+
<linearGradient id="accent" x1="0%" y1="0%" x2="100%" y2="0%">
8
+
<stop offset="0%" style="stop-color:#6b8cce"/>
9
+
<stop offset="100%" style="stop-color:#8fa3bd"/>
10
+
</linearGradient>
11
+
</defs>
12
+
13
+
<!-- Background -->
14
+
<rect width="1200" height="630" fill="url(#bg)"/>
15
+
16
+
<!-- Decorative elements -->
17
+
<circle cx="100" cy="530" r="200" fill="#2d3d54" opacity="0.3"/>
18
+
<circle cx="1100" cy="100" r="150" fill="#2d3d54" opacity="0.3"/>
19
+
20
+
<!-- Play button accent -->
21
+
<g transform="translate(540, 200)">
22
+
<circle cx="60" cy="60" r="60" fill="#2d3d54"/>
23
+
<polygon points="45,35 45,85 85,60" fill="#6b8cce"/>
24
+
</g>
25
+
26
+
<!-- Main title -->
27
+
<text x="600" y="380" text-anchor="middle" font-family="Georgia, serif" font-size="72" font-weight="400" fill="#e8eef5">
28
+
Streamhut
29
+
</text>
30
+
31
+
<!-- Tagline -->
32
+
<text x="600" y="440" text-anchor="middle" font-family="system-ui, sans-serif" font-size="24" fill="#8fa3bd">
33
+
Video streaming on AT Protocol
34
+
</text>
35
+
36
+
<!-- Bottom accent line -->
37
+
<rect x="450" y="480" width="300" height="3" rx="1.5" fill="url(#accent)"/>
38
+
39
+
<!-- Border -->
40
+
<rect x="0" y="0" width="1200" height="630" fill="none" stroke="#2d3d54" stroke-width="2"/>
41
+
</svg>
