Skip to content

Commit 864e250

Browse files
neural-loopneural-loop
committed
feat: og-images: Replace wkhtmltoimage with Puppeteer
This commit replaces the wkhtmltoimage-based OG image generation with a new implementation using Puppeteer. This provides better rendering consistency and removes the dependency on a system-level binary. The old templates and scripts were removed and replaced with a single new template and script.
1 parent 532714f commit 864e250

File tree

9 files changed

+1082
-307
lines changed

9 files changed

+1082
-307
lines changed

‎.github/workflows/main.yml

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,6 @@ jobs:
3333
&& sudo tar -C /usr/local -xzf ${{ runner.temp }}/go.tar.gz \
3434
&& sudo ln -s /usr/local/go/bin/go /usr/local/bin/go
3535
36-
- name: Install wkhtmltopdf
37-
run: |
38-
sudo apt update
39-
sudo apt install wkhtmltopdf imagemagick -y
4036
4137
- name: Checkout
4238
uses: actions/checkout@v4.2.2

‎assets/og-template/base-template.html

Lines changed: 0 additions & 111 deletions
This file was deleted.

‎assets/og-template/template.html

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>OG Image</title>
6+
<link
7+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
8+
rel="stylesheet"
9+
/>
10+
<style>
11+
body {
12+
margin: 0;
13+
padding: 0;
14+
font-family: "Inter", Arial, sans-serif;
15+
}
16+
.canvas {
17+
position: relative;
18+
width: 1200px;
19+
height: 630px;
20+
background-color: #f9fafb;
21+
overflow: hidden;
22+
display: flex;
23+
align-items: center;
24+
justify-content: center;
25+
}
26+
.background {
27+
position: absolute;
28+
z-index: 1;
29+
opacity: 0.25;
30+
bottom: -35px;
31+
left: 380px;
32+
width: 900px;
33+
height: auto;
34+
transform: rotate(-15deg);
35+
}
36+
.content-wrapper {
37+
position: relative;
38+
z-index: 2;
39+
width: 1100px;
40+
height: 570px;
41+
display: flex;
42+
flex-direction: column;
43+
justify-content: space-between;
44+
}
45+
.header {
46+
display: flex;
47+
align-items: center;
48+
}
49+
.logo {
50+
height: 90px;
51+
width: auto;
52+
margin-right: 30px;
53+
}
54+
.logo-text {
55+
font-size: 56px;
56+
font-weight: 700;
57+
color: #1f2937;
58+
}
59+
.main-text {
60+
}
61+
.title {
62+
font-size: 64px;
63+
font-weight: 700;
64+
line-height: 1.2;
65+
color: #1f2937;
66+
margin: 0 0 20px 0;
67+
display: -webkit-box;
68+
-webkit-line-clamp: 3;
69+
-webkit-box-orient: vertical;
70+
overflow: hidden;
71+
}
72+
.description {
73+
font-size: 36px;
74+
line-height: 1.4;
75+
color: #4b5563;
76+
margin: 0;
77+
display: -webkit-box;
78+
-webkit-line-clamp: 3;
79+
-webkit-box-orient: vertical;
80+
overflow: hidden;
81+
text-shadow: 0 0 10px white, 0 0 15px white, 0 0 20px white;
82+
}
83+
.footer {
84+
font-size: 35px;
85+
font-weight: 500;
86+
color: #667eea;
87+
text-align: left;
88+
}
89+
</style>
90+
</head>
91+
<body>
92+
<div class="canvas">
93+
<img src="BACKGROUND_URL" class="background" alt="" />
94+
<div class="content-wrapper">
95+
<div class="header">
96+
<img src="LOGO_SRC" alt="Logo" class="logo" />
97+
<div class="logo-text">Open Neuromorphic</div>
98+
</div>
99+
<div class="main-text">
100+
<h1 class="title">PAGE_TITLE</h1>
101+
<p class="description">PAGE_DESCRIPTION</p>
102+
</div>
103+
<div class="footer">open-neuromorphic.org</div>
104+
</div>
105+
</div>
106+
</body>
107+
</html>

‎assets/og-template/text-overlay-template.html

Lines changed: 0 additions & 76 deletions
This file was deleted.

0 commit comments

Comments
 (0)