Fix broken og:image and twitter:image for 𝕏 (#55353)

Co-authored-by: Ashish Keshan <[email protected]>
Co-authored-by: Kevin Heis <[email protected]>

Author: 3 people

src/frame/components/DefaultLayout.tsx

@@ -30,6 +30,7 @@ export const DefaultLayout = (props: Props) => {
     fullUrl,
     status,
   } = mainContext
+  const xHost = mainContext.xHost
   const page = mainContext.page!
   const { t } = useTranslation(['meta', 'scroll_button'])
   const router = useRouter()
@@ -60,7 +61,7 @@ export const DefaultLayout = (props: Props) => {
   const metaDescription = page.introPlainText ? page.introPlainText : t('default_description')
 
   const SOCIAL_CATEGORIES = new Set(['code-security', 'actions', 'issues', 'copilot'])
-  const SOCIAL_CARD_IMG_BASE_URL = '/assets/cb-345/images/social-cards'
+  const SOCIAL_CARD_IMG_BASE_URL = `${xHost}/assets/cb-345/images/social-cards`
 
   function getCategoryImageUrl(category: string): string {
     return `${SOCIAL_CARD_IMG_BASE_URL}/${category}.png`

src/frame/components/context/MainContext.tsx

@@ -86,6 +86,7 @@ type EnterpriseServerReleases = {
 }
 
 export type MainContextT = {
+  allVersions: Record<string, VersionItem>
   breadcrumbs: {
     product: BreadcrumbT
     category?: BreadcrumbT
@@ -96,21 +97,21 @@ export type MainContextT = {
     name: string
     href: string
   }
+  currentCategory?: string
+  currentPathWithoutLanguage: string
   currentProduct?: ProductT
   currentProductName: string
+  currentProductTree?: ProductTreeNode | null
   currentLayoutName?: string
-  isHomepageVersion: boolean
+  currentVersion?: string
   data: DataT
-  error: string
-  currentCategory?: string
-  relativePath?: string
   enterpriseServerReleases: EnterpriseServerReleases
-  currentPathWithoutLanguage: string
-  allVersions: Record<string, VersionItem>
-  currentVersion?: string
-  currentProductTree?: ProductTreeNode | null
-  sidebarTree?: ProductTreeNode | null
+  enterpriseServerVersions: Array<string>
+  error: string
   featureFlags: FeatureFlags
+  fullUrl: string
+  isHomepageVersion: boolean
+  nonEnterpriseDefaultVersion: string
   page: {
     documentType: string
     type?: string
@@ -122,13 +123,10 @@ export type MainContextT = {
     noEarlyAccessBanner: boolean
     applicableVersions: string[]
   } | null
-
-  enterpriseServerVersions: Array<string>
-
-  nonEnterpriseDefaultVersion: string
-
+  relativePath?: string
+  sidebarTree?: ProductTreeNode | null
   status: number
-  fullUrl: string
+  xHost?: string
 }
 
 // Write down the namespaces from `data/ui.yml` that are used on all pages,
@@ -231,58 +229,53 @@ export const getMainContext = async (req: any, res: any): Promise<MainContextT>
   const currentProductName: string = req.context.currentProductName || ''
 
   const props: MainContextT = {
+    allVersions: minimalAllVersions(req.context.allVersions),
     breadcrumbs: req.context.breadcrumbs || {},
     communityRedirect: req.context.page?.communityRedirect || {},
+    currentCategory: req.context.currentCategory || '',
+    currentLayoutName: req.context.currentLayoutName || null,
+    currentPathWithoutLanguage: req.context.currentPathWithoutLanguage,
     currentProduct,
     currentProductName,
-    isHomepageVersion: req.context.page?.documentType === 'homepage',
-    error: req.context.error ? req.context.error.toString() : '',
+    // This is a slimmed down version of `req.context.currentProductTree`
+    // that only has the minimal titles stuff needed for sidebars and
+    // any page that is hidden is omitted.
+    // However, it's not needed on most pages. For example, on article pages,
+    // you don't need it. It's similar to the minimal product tree but,
+    // has the full length titles and not just the short titles.
+    currentProductTree:
+      (includeFullProductTree && req.context.currentProductTreeTitlesExcludeHidden) || null,
+    currentVersion: req.context.currentVersion,
     data: {
       ui,
-
       reusables,
-
       variables: {
         release_candidate: {
           version: releaseCandidateVersion,
         },
       },
     },
-    currentCategory: req.context.currentCategory || '',
-    currentPathWithoutLanguage: req.context.currentPathWithoutLanguage,
-    page: pageInfo,
     enterpriseServerReleases: pick(req.context.enterpriseServerReleases, [
       'isOldestReleaseDeprecated',
       'oldestSupported',
       'nextDeprecationDate',
       'supported',
     ]),
     enterpriseServerVersions: req.context.enterpriseServerVersions,
-    allVersions: minimalAllVersions(req.context.allVersions),
-    currentVersion: req.context.currentVersion,
-    // This is a slimmed down version of `req.context.currentProductTree`
-    // that only has the minimal titles stuff needed for sidebars and
-    // any page that is hidden is omitted.
-    // However, it's not needed on most pages. For example, on article pages,
-    // you don't need it. It's similar to the minimal product tree but,
-    // has the full length titles and not just the short titles.
-    currentProductTree:
-      (includeFullProductTree && req.context.currentProductTreeTitlesExcludeHidden) || null,
+    error: req.context.error ? req.context.error.toString() : '',
+    featureFlags: {},
+    fullUrl: req.protocol + '://' + req.hostname + req.originalUrl, // does not include port for localhost
+    isHomepageVersion: req.context.page?.documentType === 'homepage',
+    nonEnterpriseDefaultVersion: req.context.nonEnterpriseDefaultVersion,
+    page: pageInfo,
+    relativePath: req.context.page?.relativePath || null,
     // The minimal product tree is needed on all pages that depend on
     // the product sidebar or the rest sidebar.
     sidebarTree: (includeSidebarTree && req.context.sidebarTree) || null,
-    featureFlags: {},
-    nonEnterpriseDefaultVersion: req.context.nonEnterpriseDefaultVersion,
     status: res.statusCode,
-    fullUrl: req.protocol + '://' + req.hostname + req.originalUrl, // does not include port for localhost
+    xHost: req.get('x-host') || '',
   }
 
-  if (req.context.currentLayoutName) {
-    props.currentLayoutName = req.context.currentLayoutName
-  }
-  if (req.context.page?.relativePath) {
-    props.relativePath = req.context.page.relativePath
-  }
   return props
 }