feat(seo): add papi simulator logo and opengraph image

developerfred · developerfred · commit 1fcd800f3134 · 2025-06-13T13:03:56.000+01:00
diff --git a/public/favicon.svg b/public/favicon.svg
@@ -0,0 +1,13 @@
+<svg viewBox="0 0 130 100" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    .p-letter { fill: #1e293b; }
+    @media (prefers-color-scheme: dark) {
+      .p-letter { fill: #f8fafc; }
+    }
+  </style>
+  <g>
+    <path d="M 5 20 L 40 50 L 5 80 Z" fill="#E6007A"/>
+    <text class="p-letter" x="60" y="80" font-family="Inter, sans-serif" font-size="80" font-weight="800">P</text>
+    <circle cx="88" cy="50" r="10" fill="#E6007A" />
+  </g>
+</svg>
diff --git a/public/og-image-en.svg b/public/og-image-en.svg
@@ -0,0 +1,33 @@
+<svg width="1200" height="630" viewBox="0 0 1200 630" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <style>
+            .og-title { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 96px; font-weight: 800; fill: #f8fafc; }
+            .og-subtitle { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 40px; font-weight: 500; fill: #94a3b8; }
+            .og-brand { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 24px; font-weight: 600; fill: #94a3b8; }
+        </style>
+        <linearGradient id="og-background-en" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#1e293b;stop-opacity:1" />
+            <stop offset="100%" style="stop-color:#0f172a;stop-opacity:1" />
+        </linearGradient>
+    </defs>
+    <rect width="1200" height="630" fill="url(#og-background-en)" />
+    <g transform="translate(800, 200) scale(4)" opacity="0.1">
+        <path d="M 5 20 L 40 50 L 5 80 Z" fill="#E6007A"/>
+        <text x="60" y="80" font-family="Inter, sans-serif" font-size="80" font-weight="800" fill="#f8fafc">P</text>
+        <circle cx="88" cy="50" r="10" fill="#E6007A" />
+    </g>
+    <text x="80" y="340" class="og-title">Just Ship It.</text>
+    <text x="80" y="410" class="og-subtitle">The React Playground for Polkadot.</text>
+    <g transform="translate(80, 530) scale(0.6)">
+         <g>
+            <path d="M 5 20 L 40 50 L 5 80 Z" fill="#E6007A"/>
+            <text x="60" y="80" font-family="Inter, sans-serif" font-size="80" font-weight="800" fill="#f8fafc">P</text>
+            <circle cx="88" cy="50" r="10" fill="#E6007A" />
+        </g>
+        <g transform="translate(170, 0)">
+            <text x="0" y="55" font-family="Inter, sans-serif" font-size="40" font-weight="800" fill="#f8fafc">PAPI</text>
+            <text x="0" y="85" font-family="Inter, sans-serif" font-size="18" font-weight="500" fill="#94a3b8" letter-spacing="0.2em">SIMULATOR</text>
+        </g>
+    </g>
+    <text x="1120" y="575" text-anchor="end" class="og-brand">Built for Polkadot</text>
+</svg>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -21,8 +21,32 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-	title: "Polkadot API Playground",
-	description: "Polkadot API Playground by @codingsh",
+	metadataBase: new URL("https://papi-simulator.aipop.fun"),
+	title: "PAPI Simulator: Just Ship It.",
+	description: "The React Playground for Polkadot. Build, test, and launch dApps instantly with zero-config, community templates, and production-ready exports.",
+	icons: {
+		icon: '/favicon.svg',
+	},
+	openGraph: {
+		title: "PAPI Simulator: Just Ship It.",
+		description: "The React Playground for Polkadot.",
+		url: "https://papi-simulator.aipop.fun",
+		siteName: "PAPI Simulator",
+		images: [
+			{
+				url: "/og-image-en.svg", 
+				width: 1200,
+				height: 630,
+			},
+		],
+		type: "website",
+	},
+	twitter: {
+		card: "summary_large_image",
+		title: "PAPI Simulator: Just Ship It.",
+		description: "The React Playground for Polkadot.",
+		images: ["/og-image-en.svg"], 
+	},
 };
 
 export default function RootLayout({
@@ -31,7 +55,7 @@ export default function RootLayout({
 	children: React.ReactNode;
 }>) {
 	return (
-		<html lang="en">
+		<html lang="en">			
 			<body
 				className={`${geistSans.variable} ${geistMono.variable} antialiased`}
 			>
