@ogpipe/next 0.1.0 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/package.json +1 -1
- package/templates/readme-hero.html +41 -0
package/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
**Pixel-perfect OG images for Next.js — full CSS, any font, any hosting platform.**
|
|
4
4
|
|
|
5
|
+
|
|
6
|
+
|
|
5
7
|
Drop-in replacement for `@vercel/og` that uses real Chromium rendering. No Satori CSS limitations, no font-loading boilerplate, works on any deployment target.
|
|
6
8
|
|
|
7
9
|
## Why?
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ogpipe/next",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "Pixel-perfect OG images for Next.js — full CSS, any font, any hosting platform",
|
|
5
5
|
"keywords": ["og-image", "open-graph", "next.js", "social-cards", "seo", "chromium"],
|
|
6
6
|
"license": "MIT",
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
|
|
5
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
6
|
+
<style>
|
|
7
|
+
body { margin: 0; font-family: 'Inter', sans-serif; }
|
|
8
|
+
</style>
|
|
9
|
+
</head>
|
|
10
|
+
<body class="w-[1200px] h-[630px] bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 flex flex-col justify-between p-16 relative overflow-hidden">
|
|
11
|
+
<!-- Subtle grid pattern overlay -->
|
|
12
|
+
<div class="absolute inset-0 opacity-[0.03]" style="background-image: url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2260%22 height=%2260%22><rect fill=%22none%22 width=%2260%22 height=%2260%22/><path d=%22M0 60L60 0%22 stroke=%22white%22 stroke-width=%220.5%22/></svg>');"></div>
|
|
13
|
+
|
|
14
|
+
<!-- Top: category badge -->
|
|
15
|
+
<div class="flex items-center gap-3 z-10">
|
|
16
|
+
<span class="px-3 py-1 bg-blue-500/20 border border-blue-400/30 rounded-full text-blue-300 text-sm font-medium tracking-wide uppercase">Engineering</span>
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
|
+
<!-- Center: title -->
|
|
20
|
+
<div class="z-10 flex-1 flex flex-col justify-center">
|
|
21
|
+
<h1 class="text-[58px] font-bold text-white leading-[1.15] tracking-tight">Building Scalable APIs<br/>with Next.js</h1>
|
|
22
|
+
<p class="text-xl text-slate-400 mt-5 max-w-[700px]">A practical guide to designing API routes that handle millions of requests without breaking a sweat.</p>
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
<!-- Bottom: author + site -->
|
|
26
|
+
<div class="flex items-center justify-between z-10">
|
|
27
|
+
<div class="flex items-center gap-3">
|
|
28
|
+
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-400 to-purple-500"></div>
|
|
29
|
+
<div>
|
|
30
|
+
<p class="text-white text-sm font-semibold">Sarah Chen</p>
|
|
31
|
+
<p class="text-slate-500 text-sm">sarahchen.dev</p>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
<p class="text-slate-600 text-sm font-medium">Rendered by OGPipe</p>
|
|
35
|
+
</div>
|
|
36
|
+
|
|
37
|
+
<!-- Decorative gradient blob -->
|
|
38
|
+
<div class="absolute -top-20 -right-20 w-[400px] h-[400px] bg-blue-500/10 rounded-full blur-3xl"></div>
|
|
39
|
+
<div class="absolute -bottom-32 -left-20 w-[300px] h-[300px] bg-purple-500/10 rounded-full blur-3xl"></div>
|
|
40
|
+
</body>
|
|
41
|
+
</html>
|