[Website] Improve sharing cards

website-next/.storybook/main.ts

@@ -4,6 +4,7 @@ const config: StorybookConfig = {
   stories: [
     "../src/design-system/**/*.stories.@(ts|tsx|mdx)",
     "../src/components/**/*.stories.@(ts|tsx|mdx)",
+    "../src/og/**/*.stories.@(ts|tsx|mdx)",
   ],
   framework: {
     name: "@storybook/nextjs-vite",

website-next/.storybook/preview-head.html

@@ -0,0 +1,9 @@
+<!-- Share cards reference the "Inter" and "Josefin Sans" families by name (they
+     are loaded from font files when rendered by Satori), so make them available
+     to the browser-rendered Storybook previews. -->
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Josefin+Sans:wght@600;700&display=swap"
+  rel="stylesheet"
+/>

website-next/app/(content)/help/opengraph-image.tsx

@@ -0,0 +1,14 @@
+import * as page from "./page";
+import {
+  createPageShareCardImage,
+  shareCardContentType,
+  shareCardSize,
+} from "@/src/og/pageShareCardImage";
+
+export const dynamic = "force-static";
+
+export const alt = "ChilliCream GraphQL Platform";
+export const size = shareCardSize;
+export const contentType = shareCardContentType;
+
+export default createPageShareCardImage(page);

website-next/app/(content)/legal/acceptable-use-policy/opengraph-image.tsx

@@ -0,0 +1,14 @@
+import * as page from "./page";
+import {
+  createPageShareCardImage,
+  shareCardContentType,
+  shareCardSize,
+} from "@/src/og/pageShareCardImage";
+
+export const dynamic = "force-static";
+
+export const alt = "ChilliCream GraphQL Platform";
+export const size = shareCardSize;
+export const contentType = shareCardContentType;
+
+export default createPageShareCardImage(page);

website-next/app/(content)/legal/cookie-policy/opengraph-image.tsx

@@ -0,0 +1,14 @@
+import * as page from "./page";
+import {
+  createPageShareCardImage,
+  shareCardContentType,
+  shareCardSize,
+} from "@/src/og/pageShareCardImage";
+
+export const dynamic = "force-static";
+
+export const alt = "ChilliCream GraphQL Platform";
+export const size = shareCardSize;
+export const contentType = shareCardContentType;
+
+export default createPageShareCardImage(page);

website-next/app/(content)/legal/privacy-policy/opengraph-image.tsx

@@ -0,0 +1,14 @@
+import * as page from "./page";
+import {
+  createPageShareCardImage,
+  shareCardContentType,
+  shareCardSize,
+} from "@/src/og/pageShareCardImage";
+
+export const dynamic = "force-static";
+
+export const alt = "ChilliCream GraphQL Platform";
+export const size = shareCardSize;
+export const contentType = shareCardContentType;
+
+export default createPageShareCardImage(page);

website-next/app/(content)/legal/terms-of-service/opengraph-image.tsx

@@ -0,0 +1,14 @@
+import * as page from "./page";
+import {
+  createPageShareCardImage,
+  shareCardContentType,
+  shareCardSize,
+} from "@/src/og/pageShareCardImage";
+
+export const dynamic = "force-static";
+
+export const alt = "ChilliCream GraphQL Platform";
+export const size = shareCardSize;
+export const contentType = shareCardContentType;
+
+export default createPageShareCardImage(page);

website-next/app/(content)/licensing/chillicream-license/opengraph-image.tsx

@@ -0,0 +1,14 @@
+import * as page from "./page";
+import {
+  createPageShareCardImage,
+  shareCardContentType,
+  shareCardSize,
+} from "@/src/og/pageShareCardImage";
+
+export const dynamic = "force-static";
+
+export const alt = "ChilliCream GraphQL Platform";
+export const size = shareCardSize;
+export const contentType = shareCardContentType;
+
+export default createPageShareCardImage(page);

website-next/app/(content)/platform/analytics/opengraph-image.tsx

@@ -0,0 +1,14 @@
+import * as page from "./page";
+import {
+  createPageShareCardImage,
+  shareCardContentType,
+  shareCardSize,
+} from "@/src/og/pageShareCardImage";
+
+export const dynamic = "force-static";
+
+export const alt = "ChilliCream GraphQL Platform";
+export const size = shareCardSize;
+export const contentType = shareCardContentType;
+
+export default createPageShareCardImage(page);

website-next/app/(content)/platform/continuous-integration/opengraph-image.tsx

@@ -0,0 +1,14 @@
+import * as page from "./page";
+import {
+  createPageShareCardImage,
+  shareCardContentType,
+  shareCardSize,
+} from "@/src/og/pageShareCardImage";
+
+export const dynamic = "force-static";
+
+export const alt = "ChilliCream GraphQL Platform";
+export const size = shareCardSize;
+export const contentType = shareCardContentType;
+
+export default createPageShareCardImage(page);

website-next/app/(content)/platform/ecosystem/opengraph-image.tsx

@@ -0,0 +1,14 @@
+import * as page from "./page";
+import {
+  createPageShareCardImage,
+  shareCardContentType,
+  shareCardSize,
+} from "@/src/og/pageShareCardImage";
+
+export const dynamic = "force-static";
+
+export const alt = "ChilliCream GraphQL Platform";
+export const size = shareCardSize;
+export const contentType = shareCardContentType;
+
+export default createPageShareCardImage(page);

website-next/app/(content)/platform/opengraph-image.tsx

@@ -0,0 +1,14 @@
+import * as page from "./page";
+import {
+  createPageShareCardImage,
+  shareCardContentType,
+  shareCardSize,
+} from "@/src/og/pageShareCardImage";
+
+export const dynamic = "force-static";
+
+export const alt = "ChilliCream GraphQL Platform";
+export const size = shareCardSize;
+export const contentType = shareCardContentType;
+
+export default createPageShareCardImage(page);

website-next/app/(content)/pricing/opengraph-image.tsx

@@ -0,0 +1,14 @@
+import * as page from "./page";
+import {
+  createPageShareCardImage,
+  shareCardContentType,
+  shareCardSize,
+} from "@/src/og/pageShareCardImage";
+
+export const dynamic = "force-static";
+
+export const alt = "ChilliCream GraphQL Platform";
+export const size = shareCardSize;
+export const contentType = shareCardContentType;
+
+export default createPageShareCardImage(page);

website-next/app/(content)/products/hotchocolate/opengraph-image.tsx

@@ -0,0 +1,14 @@
+import * as page from "./page";
+import {
+  createPageShareCardImage,
+  shareCardContentType,
+  shareCardSize,
+} from "@/src/og/pageShareCardImage";
+
+export const dynamic = "force-static";
+
+export const alt = "ChilliCream GraphQL Platform";
+export const size = shareCardSize;
+export const contentType = shareCardContentType;
+
+export default createPageShareCardImage(page);

website-next/app/(content)/products/nitro/opengraph-image.tsx

@@ -0,0 +1,14 @@
+import * as page from "./page";
+import {
+  createPageShareCardImage,
+  shareCardContentType,
+  shareCardSize,
+} from "@/src/og/pageShareCardImage";
+
+export const dynamic = "force-static";
+
+export const alt = "ChilliCream GraphQL Platform";
+export const size = shareCardSize;
+export const contentType = shareCardContentType;
+
+export default createPageShareCardImage(page);

website-next/app/(content)/products/strawberryshake/opengraph-image.tsx

@@ -0,0 +1,14 @@
+import * as page from "./page";
+import {
+  createPageShareCardImage,
+  shareCardContentType,
+  shareCardSize,
+} from "@/src/og/pageShareCardImage";
+
+export const dynamic = "force-static";
+
+export const alt = "ChilliCream GraphQL Platform";
+export const size = shareCardSize;
+export const contentType = shareCardContentType;
+
+export default createPageShareCardImage(page);

website-next/app/(content)/resources/opengraph-image.tsx

@@ -0,0 +1,14 @@
+import * as page from "./page";
+import {
+  createPageShareCardImage,
+  shareCardContentType,
+  shareCardSize,
+} from "@/src/og/pageShareCardImage";
+
+export const dynamic = "force-static";
+
+export const alt = "ChilliCream GraphQL Platform";
+export const size = shareCardSize;
+export const contentType = shareCardContentType;
+
+export default createPageShareCardImage(page);

website-next/app/(content)/services/advisory/opengraph-image.tsx

@@ -0,0 +1,14 @@
+import * as page from "./page";
+import {
+  createPageShareCardImage,
+  shareCardContentType,
+  shareCardSize,
+} from "@/src/og/pageShareCardImage";
+
+export const dynamic = "force-static";
+
+export const alt = "ChilliCream GraphQL Platform";
+export const size = shareCardSize;
+export const contentType = shareCardContentType;
+
+export default createPageShareCardImage(page);

website-next/app/(content)/services/opengraph-image.tsx

@@ -0,0 +1,14 @@
+import * as page from "./page";
+import {
+  createPageShareCardImage,
+  shareCardContentType,
+  shareCardSize,
+} from "@/src/og/pageShareCardImage";
+
+export const dynamic = "force-static";
+
+export const alt = "ChilliCream GraphQL Platform";
+export const size = shareCardSize;
+export const contentType = shareCardContentType;
+
+export default createPageShareCardImage(page);

website-next/app/(content)/services/support/contact/opengraph-image.tsx

@@ -0,0 +1,14 @@
+import * as page from "./page";
+import {
+  createPageShareCardImage,
+  shareCardContentType,
+  shareCardSize,
+} from "@/src/og/pageShareCardImage";
+
+export const dynamic = "force-static";
+
+export const alt = "ChilliCream GraphQL Platform";
+export const size = shareCardSize;
+export const contentType = shareCardContentType;
+
+export default createPageShareCardImage(page);

website-next/app/(content)/services/support/opengraph-image.tsx

@@ -0,0 +1,14 @@
+import * as page from "./page";
+import {
+  createPageShareCardImage,
+  shareCardContentType,
+  shareCardSize,
+} from "@/src/og/pageShareCardImage";
+
+export const dynamic = "force-static";
+
+export const alt = "ChilliCream GraphQL Platform";
+export const size = shareCardSize;
+export const contentType = shareCardContentType;
+
+export default createPageShareCardImage(page);

website-next/app/(content)/services/support/thank-you/opengraph-image.tsx

@@ -0,0 +1,14 @@
+import * as page from "./page";
+import {
+  createPageShareCardImage,
+  shareCardContentType,
+  shareCardSize,
+} from "@/src/og/pageShareCardImage";
+
+export const dynamic = "force-static";
+
+export const alt = "ChilliCream GraphQL Platform";
+export const size = shareCardSize;
+export const contentType = shareCardContentType;
+
+export default createPageShareCardImage(page);

website-next/app/(content)/services/training/opengraph-image.tsx

@@ -0,0 +1,14 @@
+import * as page from "./page";
+import {
+  createPageShareCardImage,
+  shareCardContentType,
+  shareCardSize,
+} from "@/src/og/pageShareCardImage";
+
+export const dynamic = "force-static";
+
+export const alt = "ChilliCream GraphQL Platform";
+export const size = shareCardSize;
+export const contentType = shareCardContentType;
+
+export default createPageShareCardImage(page);

website-next/app/docs-og/[id]/opengraph-image.tsx

@@ -9,10 +9,8 @@ import {
   resolveFile,
 } from "@/src/helpers/docsParams";
 import { readFrontmatter } from "@/src/helpers/readFrontmatter";
-import { loadInterFonts } from "@/src/og/fonts";
-import { ShareCard } from "@/src/og/ShareCard";
-
-// TODO: Proper styling and layout of share cards
+import { DocsShareCard } from "@/src/og/DocsShareCard";
+import { loadShareCardFonts } from "@/src/og/fonts";
 
 export const dynamicParams = false;
 
@@ -46,10 +44,14 @@ export default async function Image({ params }: { params: Promise<Params> }) {
   const eyebrow = product?.title ?? "ChilliCream";
   const title = frontmatter?.title ?? product?.title ?? "ChilliCream";
 
-  const fonts = await loadInterFonts();
+  const fonts = await loadShareCardFonts();
 
   return new ImageResponse(
-    <ShareCard badge={eyebrow} eyebrow={eyebrow} title={title} />,
+    <DocsShareCard
+      eyebrow={eyebrow}
+      title={title}
+      productSlug={product?.slug}
+    />,
     {
       ...size,
       fonts,