Skip to content

Commit 58b6127

Browse files
TaureTaure
authored
feat: add dedicated og-image for social previews (#35)
Replace logo-head.png with purpose-built 1280x640 og-image for Twitter/Facebook/LinkedIn previews. Includes template scripts used to regenerate the banner and OG image.
1 parent c87ecd9 commit 58b6127

5 files changed

Lines changed: 111 additions & 2 deletions

File tree

‎priv/static/assets/img/banner-social.png‎

990 KB
Loading

‎priv/static/assets/img/og-image.png‎

360 KB
Loading

‎scripts/banner-template.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<style>
6+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');
7+
* { box-sizing: border-box; margin: 0; padding: 0; }
8+
html, body { width: 3000px; height: 1000px; overflow: hidden; }
9+
body {
10+
font-family: 'Inter', -apple-system, sans-serif;
11+
background: radial-gradient(circle at 50% 45%, #2a1e5c 0%, #1A1A2E 55%, #0e0e1a 100%);
12+
color: #E8E8E8;
13+
display: flex;
14+
flex-direction: column;
15+
align-items: center;
16+
justify-content: center;
17+
position: relative;
18+
}
19+
.glow {
20+
position: absolute;
21+
top: 50%;
22+
left: 50%;
23+
transform: translate(-50%, -50%);
24+
width: 1600px;
25+
height: 900px;
26+
background: radial-gradient(ellipse, rgba(108,92,231,0.32) 0%, rgba(108,92,231,0) 65%);
27+
filter: blur(30px);
28+
pointer-events: none;
29+
}
30+
.logo {
31+
height: 440px;
32+
width: auto;
33+
z-index: 1;
34+
filter: drop-shadow(0 28px 56px rgba(0,0,0,0.45));
35+
margin-bottom: 80px;
36+
}
37+
.tagline {
38+
font-size: 62px;
39+
font-weight: 600;
40+
color: #E8E8E8;
41+
line-height: 1.2;
42+
letter-spacing: -0.01em;
43+
text-align: center;
44+
z-index: 1;
45+
white-space: nowrap;
46+
}
47+
</style>
48+
</head>
49+
<body>
50+
<div class="glow"></div>
51+
<img class="logo" src="file:///home/dnwid/ai/work/asobi/docs/media/logo-dark.png" alt="">
52+
<div class="tagline">Open-source multiplayer backend for indie games.</div>
53+
</body>
54+
</html>

‎scripts/og-template.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<style>
6+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');
7+
* { box-sizing: border-box; margin: 0; padding: 0; }
8+
html, body { width: 1280px; height: 640px; overflow: hidden; }
9+
body {
10+
font-family: 'Inter', -apple-system, sans-serif;
11+
background: radial-gradient(circle at 50% 35%, #2a1e5c 0%, #1A1A2E 60%, #0e0e1a 100%);
12+
color: #E8E8E8;
13+
display: flex;
14+
flex-direction: column;
15+
align-items: center;
16+
justify-content: center;
17+
position: relative;
18+
padding: 60px;
19+
}
20+
.glow {
21+
position: absolute;
22+
top: 40%;
23+
left: 50%;
24+
transform: translate(-50%, -50%);
25+
width: 800px;
26+
height: 600px;
27+
background: radial-gradient(ellipse, rgba(108,92,231,0.3) 0%, rgba(108,92,231,0) 65%);
28+
filter: blur(20px);
29+
pointer-events: none;
30+
}
31+
.logo {
32+
height: 280px;
33+
width: auto;
34+
z-index: 1;
35+
filter: drop-shadow(0 20px 40px rgba(0,0,0,0.4));
36+
margin-bottom: 64px;
37+
}
38+
.tagline {
39+
font-size: 42px;
40+
font-weight: 600;
41+
color: #E8E8E8;
42+
line-height: 1.2;
43+
letter-spacing: -0.01em;
44+
text-align: center;
45+
z-index: 1;
46+
white-space: nowrap;
47+
}
48+
</style>
49+
</head>
50+
<body>
51+
<div class="glow"></div>
52+
<img class="logo" src="file:///home/dnwid/ai/work/asobi/docs/media/logo-dark.png" alt="">
53+
<div class="tagline">Open-source multiplayer backend for indie games.</div>
54+
</body>
55+
</html>

‎src/views/asobi_site_layout.erl‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,9 @@ render(Bindings) ->
5252
{content, ~"Open-source multiplayer game backend built on Erlang/OTP."}
5353
],
5454
[]},
55-
{meta, [{property, ~"og:image"}, {content, ~"/assets/img/logo-head.png"}], []},
55+
{meta, [{property, ~"og:image"}, {content, ~"/assets/img/og-image.png"}], []},
5656
{meta, [{name, ~"twitter:card"}, {content, ~"summary_large_image"}], []},
57-
{meta, [{name, ~"twitter:image"}, {content, ~"/assets/img/logo-head.png"}], []},
57+
{meta, [{name, ~"twitter:image"}, {content, ~"/assets/img/og-image.png"}], []},
5858
%% Plausible Analytics (Estonia-based, data hosted in EU, no cookies).
5959
%% Per-site script ID encodes the domain; no `data-domain` attribute.
6060
{script,

0 commit comments

Comments
 (0)