Skip to content

Commit 04f6574

Browse files
explodingcameraexplodingcamera
committed
ci: fix ci, add social graph image generator
Signed-off-by: Henry <mail@henrygressmann.de>
1 parent a6ab070 commit 04f6574

5 files changed

Lines changed: 160 additions & 0 deletions

File tree

‎.cargo/config.toml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
[build]
2+
warnings = "allow"
23

34
[alias]
45
dev = "run -- dev"

‎data/images/liwan-social-preview.png‎

522 KB
Loading

‎scripts/screenshot/package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
"name": "screenshot",
33
"module": "index.ts",
44
"type": "module",
5+
"scripts": {
6+
"preview": "bun run preview.ts",
7+
"screenshots": "bun run index.ts"
8+
},
59
"devDependencies": {
610
"@types/bun": "latest",
711
"capture-website": "^5.1.0"

‎scripts/screenshot/preview.html‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>liwan.dev social preview</title>
7+
<style>
8+
@font-face {
9+
font-family: "Google Sans Variable";
10+
font-style: normal;
11+
font-display: swap;
12+
font-weight: 400 700;
13+
src: url("https://cdn.jsdelivr.net/fontsource/fonts/google-sans:vf@5.3.1/latin-wght-normal.woff2")
14+
format("woff2-variations");
15+
}
16+
17+
* {
18+
box-sizing: border-box;
19+
}
20+
21+
html,
22+
body {
23+
width: 1280px;
24+
height: 640px;
25+
margin: 0;
26+
overflow: hidden;
27+
}
28+
29+
body {
30+
background: #080b10;
31+
color: #f7f8fb;
32+
font-family: "Google Sans Variable", Arial, sans-serif;
33+
}
34+
35+
.preview {
36+
position: relative;
37+
width: 100%;
38+
height: 100%;
39+
isolation: isolate;
40+
}
41+
42+
.collage {
43+
position: absolute;
44+
top: -260px;
45+
left: -35px;
46+
display: flex;
47+
gap: 0;
48+
transform: rotate(5deg);
49+
}
50+
51+
.dashboard {
52+
width: 675px;
53+
flex: none;
54+
}
55+
56+
.dashboard img {
57+
width: 100%;
58+
display: block;
59+
}
60+
61+
.dashboard-one {
62+
transform: translateY(260px);
63+
}
64+
65+
.dashboard-two {
66+
transform: translateY(-180px);
67+
}
68+
69+
.shade {
70+
position: absolute;
71+
inset: 0;
72+
z-index: 1;
73+
background:
74+
radial-gradient(
75+
circle at center,
76+
rgba(9, 13, 20, 0.16) 0 28%,
77+
rgba(7, 10, 15, 0.32) 72%
78+
),
79+
linear-gradient(rgba(8, 11, 16, 0.04), rgba(8, 11, 16, 0.14));
80+
}
81+
82+
.content {
83+
position: absolute;
84+
inset: 0;
85+
z-index: 2;
86+
display: flex;
87+
flex-direction: column;
88+
align-items: center;
89+
justify-content: center;
90+
padding-bottom: 4px;
91+
text-align: center;
92+
text-shadow: 0 3px 24px rgba(0, 0, 0, 0.72);
93+
}
94+
95+
.brand {
96+
display: flex;
97+
align-items: center;
98+
gap: 22px;
99+
margin-bottom: 58px;
100+
font-size: 76px;
101+
font-weight: 500;
102+
letter-spacing: -3.6px;
103+
line-height: 1;
104+
}
105+
106+
.mark {
107+
width: 76px;
108+
height: 76px;
109+
filter: invert(1);
110+
}
111+
112+
h1 {
113+
max-width: 1040px;
114+
margin: 0;
115+
font-size: 74px;
116+
font-weight: 400;
117+
letter-spacing: -3.2px;
118+
line-height: 1.08;
119+
}
120+
</style>
121+
</head>
122+
<body>
123+
<main class="preview">
124+
<div class="collage">
125+
<div class="dashboard dashboard-one">
126+
<img src="../../data/images/liwan-desktop-full-dark.png" alt="" />
127+
</div>
128+
<div class="dashboard dashboard-two">
129+
<img src="../../data/images/liwan-desktop-full-dark.png" alt="" />
130+
</div>
131+
</div>
132+
<div class="shade"></div>
133+
<section class="content">
134+
<div class="brand">
135+
<img class="mark" src="../../web/public/favicon.svg" alt="" />
136+
<span>liwan.dev</span>
137+
</div>
138+
<h1>Self-hosted, privacy-first<br />web analytics</h1>
139+
</section>
140+
</main>
141+
</body>
142+
</html>

‎scripts/screenshot/preview.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { join } from "node:path";
2+
import captureWebsite from "capture-website";
3+
4+
const previewUrl = new URL("./preview.html", import.meta.url).href;
5+
const outputPath = join(__dirname, "../../data/images/liwan-social-preview.png");
6+
7+
await captureWebsite.file(previewUrl, outputPath, {
8+
overwrite: true,
9+
width: 1280,
10+
height: 640,
11+
scaleFactor: 1,
12+
delay: 1,
13+
});

0 commit comments

Comments
 (0)