feat: add social cards for pricing research

Author: guanchen.lin

src/app/[locale]/guides/[slug]/opengraph-image.tsx

@@ -0,0 +1,43 @@
+import { ImageResponse } from 'next/og';
+import { ogTemplate, OG_SIZE, OG_CONTENT_TYPE } from '@/lib/og-template';
+import { isPricingGuideSlug, PRICING_GUIDES } from '@/lib/pricing-guides';
+import { decodeSlugParam } from '@/lib/route-params';
+
+export const alt = 'AI API Pricing Guide - aiplans.dev';
+export const size = OG_SIZE;
+export const contentType = OG_CONTENT_TYPE;
+
+export default async function Image({
+  params,
+}: {
+  params: Promise<{ locale: string; slug: string }>;
+}) {
+  const { locale, slug: rawSlug } = await params;
+  const slug = decodeSlugParam(rawSlug);
+  const isZh = locale === 'zh';
+  const guide = isPricingGuideSlug(slug) ? PRICING_GUIDES[slug] : null;
+
+  return new ImageResponse(
+    ogTemplate({
+      kicker: isZh ? 'API 价格指南' : 'API Pricing Guide',
+      title: guide?.title[isZh ? 'zh' : 'en'] ?? slug,
+      subtitle: guide?.description[isZh ? 'zh' : 'en']
+        ?? (isZh ? '模型、渠道与 token 成本对比' : 'Models, channels, and token cost comparisons'),
+      stats: isZh
+        ? [
+            { label: '数据', value: '持续更新' },
+            { label: '价格来源', value: '可核验' },
+            { label: '成本示例', value: '可复算' },
+          ]
+        : [
+            { label: 'Data', value: 'Live' },
+            { label: 'Sources', value: 'Auditable' },
+            { label: 'Examples', value: 'Reproducible' },
+          ],
+      accent: '#0f766e',
+      locale: isZh ? 'zh' : 'en',
+    }),
+    size,
+  );
+}
+

src/app/[locale]/reports/api-price-index/opengraph-image.tsx

@@ -0,0 +1,59 @@
+import { ImageResponse } from 'next/og';
+import { getPriceIndexSnapshot } from '@/lib/api-price-index';
+import { ogTemplate, OG_SIZE, OG_CONTENT_TYPE } from '@/lib/og-template';
+
+export const alt = 'AI API Price Index - aiplans.dev';
+export const size = OG_SIZE;
+export const contentType = OG_CONTENT_TYPE;
+export const revalidate = 21600;
+
+export default async function Image({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const isZh = locale === 'zh';
+  const snapshot = await getPriceIndexSnapshot().catch((error: unknown) => {
+    console.error('Failed to load API price index stats for Open Graph image', error);
+    return null;
+  });
+
+  const stats = snapshot
+    ? (isZh
+        ? [
+            { label: '定价模型', value: snapshot.modelCount.toLocaleString('zh-CN') },
+            { label: '可用渠道', value: snapshot.channelCount.toLocaleString('zh-CN') },
+            { label: '供应商', value: snapshot.providerCount.toLocaleString('zh-CN') },
+          ]
+        : [
+            { label: 'Priced models', value: snapshot.modelCount.toLocaleString('en-US') },
+            { label: 'Channels', value: snapshot.channelCount.toLocaleString('en-US') },
+            { label: 'Providers', value: snapshot.providerCount.toLocaleString('en-US') },
+          ])
+    : (isZh
+        ? [
+            { label: '价格数据', value: '持续更新' },
+            { label: '供应渠道', value: '多渠道' },
+            { label: '价格来源', value: '可核验' },
+          ]
+        : [
+            { label: 'Price data', value: 'Live' },
+            { label: 'Coverage', value: 'Multi-channel' },
+            { label: 'Sources', value: 'Auditable' },
+          ]);
+
+  return new ImageResponse(
+    ogTemplate({
+      kicker: isZh ? '市场数据报告' : 'Market Data Report',
+      title: isZh ? 'AI API 价格指数' : 'AI API Price Index',
+      subtitle: isZh
+        ? '跨官方、云平台和聚合渠道对比当前 token 价格'
+        : 'Current token prices across direct, cloud, and aggregator channels',
+      stats,
+      accent: '#0f766e',
+      locale: isZh ? 'zh' : 'en',
+    }),
+    size,
+  );
+}