Move the use-case index onto Learn so the pilot stories stay reachable, and make share images resolve on the host that serves the page.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.container.tsx

@@ -20,6 +20,10 @@ const ContentThumbnailTemplateContainer = memo<ContentThumbnailTemplateProps>(
     className = "",
     variant: variantProp = "vertical",
     sizing: sizingProp = "fluid",
+    href,
+    showByline = true,
+    showLeadingImage = true,
+    leadingImageAlt,
   }) => {
     const variant = variantProp;
     const sizing = sizingProp;
@@ -70,6 +74,10 @@ const ContentThumbnailTemplateContainer = memo<ContentThumbnailTemplateProps>(
         sizing={sizing}
         backgroundImage={backgroundImage}
         backgroundImageSmd={backgroundImageSmd}
+        href={href ?? `/blog/${post.slug}`}
+        showByline={showByline}
+        showLeadingImage={showLeadingImage}
+        leadingImageAlt={leadingImageAlt}
       />
     );
   },

app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.types.ts

@@ -20,6 +20,14 @@ export interface ContentThumbnailTemplateProps {
    */
   sizing?: ContentThumbnailTemplateSizingValue;
   slugOrder?: string[];
+  /** Overrides the default `/blog/[slug]` destination. */
+  href?: string;
+  /** Author and date. Learn hides these until byline dates are approved. */
+  showByline?: boolean;
+  /** Tag mark above the title. Decorative on catalog cards. */
+  showLeadingImage?: boolean;
+  /** Alt for the tag mark. Empty when the mark repeats the title. */
+  leadingImageAlt?: string;
 }
 
 export interface ContentThumbnailTemplateViewProps {
@@ -30,4 +38,8 @@ export interface ContentThumbnailTemplateViewProps {
   backgroundImage: string;
   /** Wide-viewport image source for variant="responsive" (≥smd). */
   backgroundImageSmd?: string;
+  href: string;
+  showByline: boolean;
+  showLeadingImage: boolean;
+  leadingImageAlt?: string;
 }

app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.view.tsx

@@ -10,15 +10,16 @@ function ContentThumbnailTemplateView({
   sizing,
   backgroundImage,
   backgroundImageSmd,
+  href,
+  showByline,
+  showLeadingImage,
+  leadingImageAlt,
 }: ContentThumbnailTemplateViewProps) {
   if (variant === "responsive") {
     // Single card; <picture> swaps the orientation-specific image at smd
     // (530px), aspect-ratio and content positioning switch via Tailwind.
     return (
-      <Link
-        href={`/blog/${post.slug}`}
-        className={`group block w-full ${className}`}
-      >
+      <Link href={href} className={`group block w-full ${className}`}>
         <div className="relative aspect-[320/225.5] w-full overflow-hidden smd:aspect-[260/390]">
           <div className="absolute inset-0 z-0">
             <picture>
@@ -37,7 +38,13 @@ function ContentThumbnailTemplateView({
             </picture>
           </div>
           <div className="absolute left-[4.375%] top-[6.099%] z-20 w-[71.875%] max-h-[48%] overflow-hidden smd:left-[6.923%] smd:top-[4.615%] smd:w-[76.923%]">
-            <ContentContainer post={post} size="xs" />
+            <ContentContainer
+              post={post}
+              size="xs"
+              showByline={showByline}
+              showLeadingImage={showLeadingImage}
+              leadingImageAlt={leadingImageAlt}
+            />
           </div>
         </div>
       </Link>
@@ -47,10 +54,7 @@ function ContentThumbnailTemplateView({
   if (variant === "vertical") {
     if (sizing === "fixed") {
       return (
-        <Link
-          href={`/blog/${post.slug}`}
-          className={`group block ${className}`}
-        >
+        <Link href={href} className={`group block ${className}`}>
           <div className="relative h-[390px] w-[260px] overflow-hidden">
             <div className="absolute inset-0 z-0">
               {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -61,7 +65,14 @@ function ContentThumbnailTemplateView({
               />
             </div>
             <div className="absolute left-[18px] top-[18px] z-20 w-[200px]">
-              <ContentContainer post={post} width="200px" size="xs" />
+              <ContentContainer
+                post={post}
+                width="200px"
+                size="xs"
+                showByline={showByline}
+                showLeadingImage={showLeadingImage}
+                leadingImageAlt={leadingImageAlt}
+              />
             </div>
           </div>
         </Link>
@@ -69,10 +80,7 @@ function ContentThumbnailTemplateView({
     }
 
     return (
-      <Link
-        href={`/blog/${post.slug}`}
-        className={`group block w-full ${className}`}
-      >
+      <Link href={href} className={`group block w-full ${className}`}>
         <div className="relative aspect-[260/390] w-full overflow-hidden">
           <div className="absolute inset-0 z-0">
             {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -83,7 +91,13 @@ function ContentThumbnailTemplateView({
             />
           </div>
           <div className="absolute left-[6.923%] top-[4.615%] z-20 w-[76.923%] max-h-[48%] overflow-hidden">
-            <ContentContainer post={post} size="xs" />
+            <ContentContainer
+              post={post}
+              size="xs"
+              showByline={showByline}
+              showLeadingImage={showLeadingImage}
+              leadingImageAlt={leadingImageAlt}
+            />
           </div>
         </div>
       </Link>
@@ -92,7 +106,7 @@ function ContentThumbnailTemplateView({
 
   if (sizing === "fixed") {
     return (
-      <Link href={`/blog/${post.slug}`} className={`group block ${className}`}>
+      <Link href={href} className={`group block ${className}`}>
         <div className="relative h-[225.5px] w-[320px] overflow-hidden">
           <div className="absolute inset-0 z-0">
             {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -103,7 +117,14 @@ function ContentThumbnailTemplateView({
             />
           </div>
           <div className="absolute left-[14px] top-[13.75px] z-20 w-[230px]">
-            <ContentContainer post={post} width="230px" size="xs" />
+            <ContentContainer
+              post={post}
+              width="230px"
+              size="xs"
+              showByline={showByline}
+              showLeadingImage={showLeadingImage}
+              leadingImageAlt={leadingImageAlt}
+            />
           </div>
         </div>
       </Link>
@@ -111,10 +132,7 @@ function ContentThumbnailTemplateView({
   }
 
   return (
-    <Link
-      href={`/blog/${post.slug}`}
-      className={`group block w-full ${className}`}
-    >
+    <Link href={href} className={`group block w-full ${className}`}>
       <div className="relative aspect-[320/225.5] w-full overflow-hidden">
         <div className="absolute inset-0 z-0">
           {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -125,7 +143,13 @@ function ContentThumbnailTemplateView({
           />
         </div>
         <div className="absolute left-[4.375%] top-[6.099%] z-20 w-[71.875%] max-h-[48%] overflow-hidden">
-          <ContentContainer post={post} size="xs" />
+          <ContentContainer
+            post={post}
+            size="xs"
+            showByline={showByline}
+            showLeadingImage={showLeadingImage}
+            leadingImageAlt={leadingImageAlt}
+          />
         </div>
       </div>
     </Link>