infrastructure/plunk
2
0
Fork 0
Code Pull Requests Activity

ui: enhance Open Graph image dimensions and styling for improved social sharing

Browse Source
This commit is contained in:
Dries Augustyns
2026-05-04 18:14:55 +02:00
parent 0f00ca1b8c
commit 1b09ec1e13
2 changed files with 31 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+12 -3
View File
@@ -1,4 +1,4 @@
![card.png](/assets/card.png)
![card.png](https://www.useplunk.com/api/og?title=Open-Source%0AEmail%20Platform&description=%240.001+per+email.+No+contact+limits.+Free+to+self-host.)
<h1 align="center">Plunk</h1>
@@ -15,6 +15,8 @@
<a href="https://github.com/useplunk/plunk/network/members"><img src="https://img.shields.io/github/forks/useplunk/plunk" alt="Forks"/></a>
<a href="https://github.com/useplunk/plunk/pkgs/container/plunk"><img src="https://img.shields.io/badge/docker-available-blue?logo=docker" alt="Docker"/></a>
<a href="https://github.com/sponsors/driaug"><img src="https://img.shields.io/badge/sponsor-❤-ff69b4" alt="Sponsor"/></a>
<a href="https://docs.useplunk.com"><img src="https://img.shields.io/badge/docs-docs.useplunk.com-black" alt="Documentation"/></a>
<a href="https://useplunk.com/discord"><img src="https://img.shields.io/badge/discord-join-5865F2?logo=discord&logoColor=white" alt="Discord"/></a>
</p>
## Introduction
@@ -27,9 +29,11 @@ like [SendGrid](https://sendgrid.com/), [Resend](https://resend.com) or [Mailgun
## Features
- **Transactional Emails**: Send emails straight from your API with template support and variable substitution
- **Campaigns**: Send newsletters and product updates to large audiences with segmentation
- **SMTP**: Use Plunk as an SMTP relay to send emails from any existing tool or framework
- **Campaigns**: Send newsletters and product updates to large audiences
- **Workflows**: Create advanced automations with triggers, delays, and conditional logic
- **Contact Management**: Organize contacts with custom fields and dynamic segmentation
- **Segments**: Organize contacts with dynamic filtering and target the right audience
- **Contact Management**: Manage contacts with custom fields and full activity history
- **Analytics**: Track opens, clicks, bounces, and engagement metrics in real-time
- **Custom Domains**: Verify and send from your own domains with DKIM/SPF support
@@ -46,6 +50,11 @@ You can pull the latest image from [Github](https://github.com/useplunk/plunk/pk
A complete guide on how to deploy Plunk can be found in
the [documentation](https://docs.useplunk.com/self-hosting/introduction).
## Community
- **Documentation**: [docs.useplunk.com](https://docs.useplunk.com)
- **Discord**: [useplunk.com/discord](https://useplunk.com/discord)
## Contributing
You are welcome to contribute to Plunk. You can find a guide on how to contribute in [CONTRIBUTING.md](CONTRIBUTING.md).
apps/landing/src/pages/api/og.tsx
+19 -18
View File
@@ -17,18 +17,18 @@ export default function handler(req: NextRequest) {
const fontData = getBricolageFont();
const titleLength = title.length;
const fontSize = titleLength < 35 ? 72 : titleLength < 55 ? 60 : titleLength < 75 ? 50 : 42;
const fontSize = titleLength < 35 ? 144 : titleLength < 55 ? 120 : titleLength < 75 ? 100 : 84;
return new ImageResponse(
(
<div
style={{
width: '1200px',
height: '630px',
width: '2400px',
height: '1260px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
padding: '64px 72px',
padding: '128px 144px',
backgroundColor: '#ffffff',
fontFamily: '"Bricolage Grotesque"',
position: 'relative',
@@ -39,26 +39,26 @@ export default function handler(req: NextRequest) {
<div
style={{
position: 'absolute',
bottom: '-60px',
right: '-30px',
bottom: '-120px',
right: '-60px',
opacity: 0.035,
display: 'flex',
}}
>
<svg width="480" height="480" viewBox="0 0 1080 1080" fill="none">
<svg width="960" height="960" viewBox="0 0 1080 1080" fill="none">
<path d={PLUNK_P_PATH} fill="#000000" />
</svg>
</div>
{/* Top row: logo + URL */}
<div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
<div style={{display: 'flex', alignItems: 'center', gap: '10px'}}>
<svg width="30" height="30" viewBox="0 0 1080 1080" fill="none">
<div style={{display: 'flex', alignItems: 'center', gap: '20px'}}>
<svg width="60" height="60" viewBox="0 0 1080 1080" fill="none">
<path d={PLUNK_P_PATH} fill="#171717" />
</svg>
<span
style={{
fontSize: '22px',
fontSize: '44px',
fontWeight: 800,
color: '#171717',
letterSpacing: '-0.03em',
@@ -67,22 +67,22 @@ export default function handler(req: NextRequest) {
Plunk
</span>
</div>
<span style={{fontSize: '15px', color: '#a3a3a3', letterSpacing: '0.01em'}}>
<span style={{fontSize: '30px', color: '#a3a3a3', letterSpacing: '0.01em'}}>
useplunk.com
</span>
</div>
{/* Main content */}
<div style={{display: 'flex', flexDirection: 'column', gap: '18px', maxWidth: '920px'}}>
<div style={{display: 'flex', flexDirection: 'column', gap: '36px', maxWidth: '1840px'}}>
{tag ? (
<div
style={{
display: 'flex',
alignItems: 'center',
padding: '6px 14px',
padding: '12px 28px',
backgroundColor: '#f4f4f5',
borderRadius: '6px',
fontSize: '15px',
borderRadius: '12px',
fontSize: '30px',
color: '#52525b',
fontWeight: 600,
width: 'fit-content',
@@ -99,6 +99,7 @@ export default function handler(req: NextRequest) {
color: '#0a0a0a',
lineHeight: 1.08,
letterSpacing: '-0.04em',
whiteSpace: 'pre-wrap',
}}
>
{title}
@@ -106,7 +107,7 @@ export default function handler(req: NextRequest) {
{description ? (
<div
style={{
fontSize: '22px',
fontSize: '44px',
color: '#737373',
lineHeight: 1.5,
fontWeight: 400,
@@ -123,8 +124,8 @@ export default function handler(req: NextRequest) {
</div>
),
{
width: 1200,
height: 630,
width: 2400,
height: 1260,
fonts: [
{
name: 'Bricolage Grotesque',