Skip to content

site: add Open Graph/Twitter social preview tags + 1200x630 og-image #61

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
astra-intelligence wants to merge 1 commit into
base: master
Choose a base branch
from
Open

site: add Open Graph/Twitter social preview tags + 1200x630 og-image #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 17 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,23 @@
-->
<html>
<head>
<title>WebGL Samples</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>WebGL Samples</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="A place to host and work on WebGL sample applications — 3D graphics demos that run in your browser." />
<meta name="keywords" content="WebGL, 3D, graphics, samples, demos, browser, GPU" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="WebGL Samples" />
<meta property="og:title" content="WebGL Samples" />
<meta property="og:description" content="A place to host and work on WebGL sample applications — 3D graphics demos that run in your browser." />
<meta property="og:url" content="https://webglsamples.org/" />
<meta property="og:image" content="https://webglsamples.org/og-image.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="WebGL Samples" />
<meta name="twitter:description" content="A place to host and work on WebGL sample applications — 3D graphics demos that run in your browser." />
<meta name="twitter:image" content="https://webglsamples.org/og-image.png" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.min.js"></script>
Expand Down
Binary file added og-image.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
93 changes: 93 additions & 0 deletions tools/make-og-image.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
#!/usr/bin/env python3
"""Generate a 1200x630 OG image for WebGL Samples (webglsamples.org).

Pillow-only, reproducible. Draws a dark 3D wireframe-cube card using the
site's brand palette (#0090c5 blue, #ff4486 pink) on a dark ground.
"""
import os
from PIL import Image, ImageDraw, ImageFont

W, H = 1200, 630
BG_TOP = (15, 18, 32)
BG_BOT = (26, 31, 51)
BLUE = (0, 144, 197)
PINK = (255, 68, 134)
WHITE = (245, 247, 250)
GREY = (150, 158, 180)

FONT_DIR = os.environ.get("FONT_DIR", "/usr/share/fonts/truetype/dejavu")


def font(size, bold=False):
name = "DejaVuSans-Bold.ttf" if bold else "DejaVuSans.ttf"
p = os.path.join(FONT_DIR, name)
if not os.path.exists(p):
# fallback to Liberation
p = os.path.join(FONT_DIR, "LiberationSans-Bold.ttf" if bold else "LiberationSans-Regular.ttf")
return ImageFont.truetype(p, size)


def lerp(a, b, t):
return tuple(int(a[i] + (b[i] - a[i]) * t) for i in range(3))


def draw_cube(d, cx, cy, size, color, width=3):
"""Isometric wireframe cube centered at (cx, cy)."""
s = size
# 8 vertices of an isometric cube
v = [
(cx - s, cy - s * 0.5), # 0 front-left-top
(cx + s, cy - s * 0.5), # 1 front-right-top
(cx + s, cy + s * 0.5), # 2 front-right-bottom
(cx - s, cy + s * 0.5), # 3 front-left-bottom
(cx, cy - s * 1.5), # 4 back-top
(cx, cy - s * 0.5), # 5 back-bottom
]
edges = [
(0, 1), (1, 2), (2, 3), (3, 0), # front face
(0, 4), (1, 4), (2, 5), (3, 5), # to back
(4, 5), # back edge
]
for a, b in edges:
d.line([v[a], v[b]], fill=color, width=width)


def main():
img = Image.new("RGB", (W, H))
d = ImageDraw.Draw(img)
# vertical gradient
for y in range(H):
t = y / H
d.line([(0, y), (W, y)], fill=lerp(BG_TOP, BG_BOT, t))

# subtle grid dots
for gx in range(0, W, 40):
for gy in range(0, H, 40):
d.ellipse([gx - 1, gy - 1, gx + 1, gy + 1], fill=(40, 46, 70))

# 3D wireframe cubes (WebGL motif)
draw_cube(d, 900, 300, 150, BLUE, width=4)
draw_cube(d, 1020, 420, 90, PINK, width=3)
draw_cube(d, 780, 430, 60, (70, 90, 130), width=2)

# Title
f_title = font(88, bold=True)
d.text((70, 120), "WebGL", fill=WHITE, font=f_title)
d.text((70, 220), "Samples", fill=BLUE, font=f_title)

# Tagline
f_tag = font(34)
d.text((72, 360), "A place to host and work on", fill=GREY, font=f_tag)
d.text((72, 404), "WebGL sample applications", fill=GREY, font=f_tag)

# Domain
f_dom = font(30, bold=True)
d.text((72, 520), "webglsamples.org", fill=PINK, font=f_dom)

out = os.environ.get("OUT", "og-image.png")
img.save(out)
print("wrote", out, img.size)


if __name__ == "__main__":
main()