fix landing page carousel links (#58128)

Author: rsese

src/frame/middleware/resolve-recommended.ts

@@ -2,6 +2,7 @@ import type { ExtendedRequest, ResolvedArticle } from '@/types'
 import type { Response, NextFunction } from 'express'
 import findPage from '@/frame/lib/find-page'
 import { renderContent } from '@/content-render/index'
+import Permalink from '@/frame/lib/permalink'
 
 import { createLogger } from '@/observability/logger/index'
 
@@ -83,12 +84,11 @@ function tryResolveArticlePath(
 }
 
 /**
- * Get the href for a page from its permalinks
+ * Get the path for a page (without language/version)
  */
-function getPageHref(page: any, currentLanguage: string = 'en'): string {
-  if (page.permalinks?.length > 0) {
-    const permalink = page.permalinks.find((p: any) => p.languageCode === currentLanguage)
-    return permalink ? permalink.href : page.permalinks[0].href
+function getPageHref(page: any): string {
+  if (page.relativePath) {
+    return Permalink.relativePathToSuffix(page.relativePath)
   }
   return '' // fallback
 }
@@ -126,15 +126,14 @@ async function resolveRecommended(
       return next()
     }
 
-    const currentLanguage = req.context?.currentLanguage || 'en'
     const resolved: ResolvedArticle[] = []
 
     for (const rawPath of articlePaths) {
       try {
         const foundPage = tryResolveArticlePath(rawPath, page?.relativePath, req)
 
         if (foundPage) {
-          const href = getPageHref(foundPage, currentLanguage)
+          const href = getPageHref(foundPage)
           const category = foundPage.relativePath
             ? foundPage.relativePath.split('/').slice(0, -1).filter(Boolean)
             : []

src/frame/tests/resolve-recommended.test.ts

@@ -120,7 +120,7 @@ describe('resolveRecommended middleware', () => {
       {
         title: 'Test Article',
         intro: '<p>Test intro</p>',
-        href: '/en/copilot/tutorials/article',
+        href: '/copilot/tutorials/article',
         category: ['copilot', 'tutorials'],
       },
     ])
@@ -195,7 +195,7 @@ describe('resolveRecommended middleware', () => {
       {
         title: 'Valid Article',
         intro: '<p>Valid intro</p>',
-        href: '/en/test/valid',
+        href: '/test/valid',
         category: ['test'],
       },
     ])
@@ -256,10 +256,64 @@ describe('resolveRecommended middleware', () => {
       {
         title: 'Relative Article',
         intro: '<p>Relative intro</p>',
-        href: '/en/copilot/relative-article',
+        href: '/copilot/relative-article', // Updated to clean path
         category: ['copilot'],
       },
     ])
     expect(mockNext).toHaveBeenCalled()
   })
+
+  test('returns paths without language or version prefixes', async () => {
+    const testPage: Partial<import('@/types').Page> = {
+      mtime: Date.now(),
+      title: 'Tutorial Page',
+      rawTitle: 'Tutorial Page',
+      intro: 'Tutorial intro',
+      rawIntro: 'Tutorial intro',
+      relativePath: 'copilot/tutorials/tutorial-page/index.md',
+      fullPath: '/full/path/copilot/tutorials/tutorial-page/index.md',
+      languageCode: 'en',
+      documentType: 'article',
+      markdown: 'Tutorial content',
+      versions: {},
+      applicableVersions: ['free-pro-team@latest'],
+      permalinks: [
+        {
+          languageCode: 'en',
+          pageVersion: 'free-pro-team@latest',
+          title: 'Tutorial Page',
+          href: '/en/copilot/tutorials/tutorial-page',
+          hrefWithoutLanguage: '/copilot/tutorials/tutorial-page',
+        },
+      ],
+      renderProp: vi.fn().mockResolvedValue('rendered'),
+      renderTitle: vi.fn().mockResolvedValue('Tutorial Page'),
+      render: vi.fn().mockResolvedValue('rendered content'),
+      buildRedirects: vi.fn().mockReturnValue({}),
+    }
+
+    mockFindPage.mockReturnValue(testPage as any)
+
+    const req = createMockRequest({ rawRecommended: ['/copilot/tutorials/tutorial-page'] })
+
+    await resolveRecommended(req, mockRes, mockNext)
+
+    expect(mockFindPage).toHaveBeenCalledWith(
+      '/en/copilot/tutorials/tutorial-page',
+      req.context!.pages,
+      req.context!.redirects,
+    )
+
+    // Verify that the href is a clean path without language/version, that gets
+    // added on the React side.
+    expect((req.context!.page as any).recommended).toEqual([
+      {
+        title: 'Tutorial Page',
+        intro: '<p>Tutorial intro</p>',
+        href: '/copilot/tutorials/tutorial-page',
+        category: ['copilot', 'tutorials', 'tutorial-page'],
+      },
+    ])
+    expect(mockNext).toHaveBeenCalled()
+  })
 })

src/landings/components/shared/LandingCarousel.tsx

@@ -1,8 +1,10 @@
 import { useState, useEffect, useRef } from 'react'
+import { useRouter } from 'next/router'
 import { ChevronLeftIcon, ChevronRightIcon } from '@primer/octicons-react'
 import cx from 'classnames'
 import type { ResolvedArticle } from '@/types'
 import { useTranslation } from '@/languages/components/useTranslation'
+import { useVersion } from '@/versions/components/useVersion'
 import styles from './LandingCarousel.module.scss'
 
 type LandingCarouselProps = {
@@ -42,6 +44,8 @@ export const LandingCarousel = ({ heading = '', recommended }: LandingCarouselPr
   const [isAnimating, setIsAnimating] = useState(false)
   const itemsPerView = useResponsiveItemsPerView()
   const { t } = useTranslation('product_landing')
+  const router = useRouter()
+  const { currentVersion } = useVersion()
   const headingText = heading || t('carousel.recommended')
   // Ref to store timeout IDs for cleanup
   const animationTimeoutRef = useRef<NodeJS.Timeout | null>(null)
@@ -145,7 +149,7 @@ export const LandingCarousel = ({ heading = '', recommended }: LandingCarouselPr
         {visibleItems.map((article: ResolvedArticle, index) => (
           <a
             key={startIndex + index}
-            href={article.href}
+            href={`/${router.locale}/${currentVersion}${article.href}`}
             className={cx(styles.articleCard, 'border', 'border-default', 'rounded-2')}
           >
             <h3 className={styles.articleTitle}>