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/ContentContainer/ContentContainer.container.tsx

@@ -22,10 +22,12 @@ const ContentContainerContainer = memo<ContentContainerProps>(
     leadingImageSrc,
     leadingImageAlt,
     showLeadingImage: showLeadingImageProp = true,
+    showByline: showBylineProp = true,
   }) => {
     const size = sizeProp;
     const tone = toneProp;
     const showLeadingImage = showLeadingImageProp;
+    const showByline = showBylineProp;
     const width =
       widthProp ?? (size === "useCase" ? "100%" : "200px");
     const onLight = tone === "onLight";
@@ -119,6 +121,7 @@ const ContentContainerContainer = memo<ContentContainerProps>(
         iconImage={iconImage}
         iconAlt={iconAlt}
         showLeadingImage={showLeadingImage}
+        showByline={showByline}
         containerClasses={containerClasses}
         contentGapClasses={contentGapClasses}
         textGapClasses={textGapClasses}

app/components/content/ContentContainer/ContentContainer.types.ts

@@ -22,6 +22,8 @@ export interface ContentContainerProps {
   leadingImageAlt?: string;
   /** When false, omits the icon row above the title. Default true. */
   showLeadingImage?: boolean;
+  /** When false, omits author and date. Default true. */
+  showByline?: boolean;
 }
 
 export interface ContentContainerViewProps {
@@ -32,6 +34,7 @@ export interface ContentContainerViewProps {
   iconImage: string;
   iconAlt: string;
   showLeadingImage: boolean;
+  showByline: boolean;
   containerClasses: string;
   contentGapClasses: string;
   textGapClasses: string;

app/components/content/ContentContainer/ContentContainer.view.tsx

@@ -8,6 +8,7 @@ function ContentContainerView({
   iconImage,
   iconAlt,
   showLeadingImage,
+  showByline,
   containerClasses,
   contentGapClasses,
   textGapClasses,
@@ -18,10 +19,7 @@ function ContentContainerView({
   formattedDate,
 }: ContentContainerViewProps) {
   return (
-    <div
-      className={containerClasses}
-      style={size === "xs" ? {} : { width }}
-    >
+    <div className={containerClasses} style={size === "xs" ? {} : { width }}>
       {/* Content Container - gap between icon and text */}
       <div className={contentGapClasses}>
         {showLeadingImage ? (
@@ -45,13 +43,12 @@ function ContentContainerView({
         </div>
       </div>
 
-      <div className="flex min-w-0 items-end gap-[var(--space-200)]">
-        {/* Author Name */}
-        <span className={authorClasses}>{post.frontmatter.author}</span>
-
-        {/* Date */}
-        <span className={dateClasses}>{formattedDate}</span>
-      </div>
+      {showByline ? (
+        <div className="flex min-w-0 items-end gap-[var(--space-200)]">
+          <span className={authorClasses}>{post.frontmatter.author}</span>
+          <span className={dateClasses}>{formattedDate}</span>
+        </div>
+      ) : null}
     </div>
   );
 }