Skip to content

Commit 980cf0e

Browse files
julianengeljulianengel
committed
Add OG Image Tester as new tool
- Add OG Image Tester (ogimagetester.com) as project 06 - Create dedicated project page with features and CTA
1 parent 62df4ff commit 980cf0e

File tree

2 files changed

+248
-0
lines changed

2 files changed

+248
-0
lines changed

‎src/pages/index.astro‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,14 @@ const projects = [
4949
href: '/projects/launchpage',
5050
externalHref: 'https://launchpage.xyz?ref=simplebytes',
5151
subProjects: []
52+
},
53+
{
54+
number: '06',
55+
name: 'OG Image Tester',
56+
description: 'Test and preview Open Graph images for social media sharing.',
57+
href: '/projects/og-image-tester',
58+
externalHref: 'https://ogimagetester.com?ref=simplebytes',
59+
subProjects: []
5260
}
5361
];
5462
---

‎src/pages/projects/og-image-tester.astro‎

Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
---
2+
import BaseLayout from '../../layouts/BaseLayout.astro';
3+
4+
const features = [
5+
{ icon: '🔍', title: 'Live Preview', description: 'See exactly how your links will appear on social platforms.' },
6+
{ icon: '📱', title: 'Multi-Platform', description: 'Preview for Twitter, Facebook, LinkedIn, and more.' },
7+
{ icon: '⚡', title: 'Instant Results', description: 'Get real-time feedback on your Open Graph tags.' },
8+
{ icon: '🛠️', title: 'Debug Mode', description: 'Identify missing or malformed meta tags quickly.' },
9+
{ icon: '📋', title: 'Copy & Share', description: 'Easily share preview results with your team.' },
10+
{ icon: '🆓', title: 'Free to Use', description: 'No signup required. Just paste your URL and test.' }
11+
];
12+
---
13+
14+
<BaseLayout
15+
title="OG Image Tester - Simple Bytes"
16+
description="Test and preview Open Graph images for social media sharing. See exactly how your links will appear on Twitter, Facebook, LinkedIn, and more."
17+
>
18+
<a href="/" class="back-link">← Back to all projects</a>
19+
20+
<section class="hero">
21+
<h1>OG Image Tester</h1>
22+
<p class="tagline">Test and preview Open Graph images for social media sharing. See exactly how your links will appear before you share them.</p>
23+
<div class="hero-badges">
24+
<span class="badge badge--free">Free</span>
25+
</div>
26+
<div class="hero-links">
27+
<a href="https://ogimagetester.com?ref=simplebytes" target="_blank" rel="noopener" class="btn btn--primary">
28+
Try OG Image Tester →
29+
</a>
30+
</div>
31+
</section>
32+
33+
<section class="features-section">
34+
<h2 class="section-title">Features</h2>
35+
<div class="features-grid">
36+
{features.map((feature) => (
37+
<div class="feature-item">
38+
<span class="feature-icon">{feature.icon}</span>
39+
<h3 class="feature-title">{feature.title}</h3>
40+
<p class="feature-description">{feature.description}</p>
41+
</div>
42+
))}
43+
</div>
44+
</section>
45+
46+
<section class="why-section">
47+
<h2 class="section-title">Why Test OG Images?</h2>
48+
<div class="why-content">
49+
<p>Open Graph images are crucial for social media engagement. When someone shares your link, the preview image and text can make the difference between a click and a scroll-past.</p>
50+
<p>OG Image Tester helps you ensure your content looks perfect across all platforms before you hit publish.</p>
51+
</div>
52+
</section>
53+
54+
<section class="cta-section">
55+
<div class="cta-content">
56+
<span class="cta-icon">🖼️</span>
57+
<h2>Perfect Your Social Previews</h2>
58+
<p>Don't let broken or missing Open Graph images hurt your content's reach. Test your URLs instantly and for free.</p>
59+
<div class="cta-links">
60+
<a href="https://ogimagetester.com?ref=simplebytes" target="_blank" rel="noopener" class="btn btn--primary">
61+
Start Testing →
62+
</a>
63+
</div>
64+
</div>
65+
</section>
66+
</BaseLayout>
67+
68+
<style>
69+
.back-link {
70+
display: inline-flex;
71+
align-items: center;
72+
gap: 0.5rem;
73+
font-size: 0.875rem;
74+
color: var(--text-secondary);
75+
text-decoration: none;
76+
margin-bottom: 2rem;
77+
transition: color 0.2s;
78+
}
79+
80+
.back-link:hover {
81+
color: var(--text-primary);
82+
}
83+
84+
.hero {
85+
margin-bottom: 4rem;
86+
}
87+
88+
h1 {
89+
font-size: clamp(2.5rem, 6vw, 3.5rem);
90+
font-weight: 600;
91+
letter-spacing: -0.03em;
92+
margin-bottom: 1rem;
93+
}
94+
95+
.tagline {
96+
font-size: 1.25rem;
97+
color: var(--text-secondary);
98+
max-width: 600px;
99+
line-height: 1.6;
100+
margin-bottom: 1.5rem;
101+
}
102+
103+
.hero-badges {
104+
display: flex;
105+
gap: 0.5rem;
106+
margin-bottom: 1.5rem;
107+
flex-wrap: wrap;
108+
}
109+
110+
.badge {
111+
display: inline-block;
112+
font-size: 0.75rem;
113+
font-weight: 500;
114+
text-transform: uppercase;
115+
letter-spacing: 0.05em;
116+
padding: 0.375rem 0.75rem;
117+
border-radius: var(--radius-sm);
118+
}
119+
120+
.badge--free {
121+
background: rgba(34, 197, 94, 0.1);
122+
color: #16a34a;
123+
}
124+
125+
:global([data-theme="dark"]) .badge--free {
126+
background: rgba(34, 197, 94, 0.15);
127+
color: #4ade80;
128+
}
129+
130+
.hero-links {
131+
display: flex;
132+
flex-wrap: wrap;
133+
gap: 0.75rem;
134+
}
135+
136+
/* Features */
137+
.features-section {
138+
margin-bottom: 4rem;
139+
}
140+
141+
.features-grid {
142+
display: grid;
143+
grid-template-columns: repeat(3, 1fr);
144+
gap: 1.5rem;
145+
}
146+
147+
.feature-item {
148+
padding: 0.5rem 0;
149+
}
150+
151+
.feature-icon {
152+
font-size: 1.5rem;
153+
display: block;
154+
margin-bottom: 0.75rem;
155+
}
156+
157+
.feature-title {
158+
font-size: 1rem;
159+
font-weight: 600;
160+
margin-bottom: 0.375rem;
161+
}
162+
163+
.feature-description {
164+
font-size: 0.875rem;
165+
color: var(--text-secondary);
166+
line-height: 1.5;
167+
}
168+
169+
/* Why section */
170+
.why-section {
171+
margin-bottom: 4rem;
172+
}
173+
174+
.why-content {
175+
max-width: 600px;
176+
}
177+
178+
.why-content p {
179+
color: var(--text-secondary);
180+
line-height: 1.7;
181+
margin-bottom: 1rem;
182+
}
183+
184+
.why-content p:last-child {
185+
margin-bottom: 0;
186+
}
187+
188+
/* CTA section */
189+
.cta-section {
190+
background: var(--card-bg);
191+
border: 1px solid var(--border-color);
192+
border-radius: var(--radius-xl);
193+
padding: 2.5rem;
194+
margin-bottom: 2rem;
195+
}
196+
197+
.cta-content {
198+
max-width: 600px;
199+
}
200+
201+
.cta-icon {
202+
font-size: 2rem;
203+
display: block;
204+
margin-bottom: 1rem;
205+
}
206+
207+
.cta-content h2 {
208+
font-size: 1.5rem;
209+
font-weight: 600;
210+
margin-bottom: 1rem;
211+
}
212+
213+
.cta-content p {
214+
color: var(--text-secondary);
215+
line-height: 1.6;
216+
margin-bottom: 1rem;
217+
}
218+
219+
.cta-links {
220+
margin-top: 1.5rem;
221+
}
222+
223+
@media (max-width: 768px) {
224+
h1 {
225+
font-size: 2rem;
226+
}
227+
228+
.tagline {
229+
font-size: 1rem;
230+
}
231+
232+
.features-grid {
233+
grid-template-columns: 1fr;
234+
}
235+
236+
.cta-section {
237+
padding: 1.5rem;
238+
}
239+
}
240+
</style>

0 commit comments

Comments
 (0)