Skip to content

Commit

Permalink
logo + og
Browse files Browse the repository at this point in the history
  • Loading branch information
@0xrinegade
0xrinegade committed Dec 26, 2024
1 parent 0feb4c0 commit b1bb734
Show file tree
Hide file tree
Showing 9 changed files with 863 additions and 2 deletions.
168 changes: 168 additions & 0 deletions app/address/[address]/opengraph-image.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
import { ImageResponse } from '@vercel/og';
import { getAccountInfo } from '@/lib/solana';

export const runtime = 'edge';
export const alt = 'Account Details';
export const size = {
width: 1200,
height: 630,
};
export const contentType = 'image/png';

export default async function Image({ params }: { params: { address: string } }) {
try {
const account = await getAccountInfo(params.address);

const title = 'Account Overview';
const description = account
? `Balance: ${account.balance.toFixed(4)} SOL`
: 'Solana Account Explorer';

return new ImageResponse(
(
<div
style={{
height: '100%',
width: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#000',
backgroundImage: 'linear-gradient(45deg, #000 0%, #111 100%)',
}}
>
{/* Logo */}
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginBottom: '20px',
}}
>
<div
style={{
width: '80px',
height: '80px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: '50%',
background: 'linear-gradient(135deg, #00ffbd 0%, #00b386 100%)',
marginRight: '16px',
}}
>
<div
style={{
color: 'white',
fontSize: '40px',
fontWeight: 700,
}}
>
S
</div>
</div>
<div
style={{
fontSize: '48px',
fontWeight: 700,
background: 'linear-gradient(135deg, #00ffbd 0%, #00b386 100%)',
backgroundClip: 'text',
color: 'transparent',
}}
>
OPENSVM
</div>
</div>

{/* Content */}
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
marginTop: '20px',
padding: '0 48px',
}}
>
<div
style={{
fontSize: '32px',
fontWeight: 600,
color: 'white',
marginBottom: '10px',
textAlign: 'center',
}}
>
{title}
</div>
{account && (
<div
style={{
fontSize: '24px',
color: '#00ffbd',
marginBottom: '20px',
textAlign: 'center',
}}
>
{account.executable ? 'Program Account' : 'User Account'}
</div>
)}
<div
style={{
fontSize: '20px',
color: '#888',
textAlign: 'center',
maxWidth: '600px',
}}
>
{description}
</div>
{account && (
<div
style={{
fontSize: '16px',
color: '#666',
marginTop: '20px',
textAlign: 'center',
}}
>
{params.address.slice(0, 20)}...{params.address.slice(-20)}
</div>
)}
</div>

{/* Footer */}
<div
style={{
position: 'absolute',
bottom: '32px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<div
style={{
fontSize: '16px',
color: '#666',
}}
>
opensvm.com
</div>
</div>
</div>
),
{
width: 1200,
height: 630,
},
);
} catch (e: any) {
console.log(`${e.message}`);
return new Response(`Failed to generate the image`, {
status: 500,
});
}
}
150 changes: 150 additions & 0 deletions app/api/og/route.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
import { ImageResponse } from '@vercel/og';
import { NextRequest } from 'next/server';

export const runtime = 'edge';

export async function GET(req: NextRequest) {
try {
const { searchParams } = new URL(req.url);

// Dynamic params
const title = searchParams.get('title') || 'OPENSVM';
const description = searchParams.get('description') || 'Open Source Solana Virtual Machine Explorer';
const type = searchParams.get('type') || '';

return new ImageResponse(
(
<div
style={{
height: '100%',
width: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#000',
backgroundImage: 'linear-gradient(45deg, #000 0%, #111 100%)',
}}
>
{/* Logo */}
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginBottom: '20px',
}}
>
<div
style={{
width: '80px',
height: '80px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: '50%',
background: 'linear-gradient(135deg, #00ffbd 0%, #00b386 100%)',
marginRight: '16px',
}}
>
<div
style={{
color: 'white',
fontSize: '40px',
fontWeight: 700,
}}
>
S
</div>
</div>
<div
style={{
fontSize: '48px',
fontWeight: 700,
background: 'linear-gradient(135deg, #00ffbd 0%, #00b386 100%)',
backgroundClip: 'text',
color: 'transparent',
}}
>
OPENSVM
</div>
</div>

{/* Content */}
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
marginTop: '20px',
padding: '0 48px',
}}
>
<div
style={{
fontSize: '32px',
fontWeight: 600,
color: 'white',
marginBottom: '10px',
textAlign: 'center',
}}
>
{title}
</div>
{type && (
<div
style={{
fontSize: '24px',
color: '#00ffbd',
marginBottom: '20px',
textAlign: 'center',
}}
>
{type}
</div>
)}
<div
style={{
fontSize: '20px',
color: '#888',
textAlign: 'center',
maxWidth: '600px',
}}
>
{description}
</div>
</div>

{/* Footer */}
<div
style={{
position: 'absolute',
bottom: '32px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<div
style={{
fontSize: '16px',
color: '#666',
}}
>
opensvm.com
</div>
</div>
</div>
),
{
width: 1200,
height: 630,
},
);
} catch (e: any) {
console.log(`${e.message}`);
return new Response(`Failed to generate the image`, {
status: 500,
});
}
}
28 changes: 26 additions & 2 deletions app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,32 @@ import "./globals.css";
const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
title: "OPENSVM - Solana Block Explorer",
description: "Open Source Solana Block Explorer",
title: "OPENSVM",
description: "Open Source Solana Virtual Machine Explorer",
icons: {
icon: [
{ url: "/favicon.svg", type: "image/svg+xml" },
],
},
metadataBase: new URL("https://opensvm.com"),
openGraph: {
title: "OPENSVM",
description: "Open Source Solana Virtual Machine Explorer",
images: [
{
url: '/api/og',
width: 1200,
height: 630,
alt: 'OPENSVM - Open Source Solana Virtual Machine Explorer',
},
],
},
twitter: {
card: "summary_large_image",
title: "OPENSVM",
description: "Open Source Solana Virtual Machine Explorer",
images: ['/api/og'],
},
};

export default function RootLayout({
Expand Down
Loading

0 comments on commit b1bb734

Please sign in to comment.