Add sidebarLink frontmatter property for custom sidebar links (#56238)

Author: heiskr

content/copilot/tutorials/copilot-chat-cookbook/index.md

@@ -10,6 +10,9 @@ versions:
 topics:
   - Copilot
 layout: category-landing
+sidebarLink:
+  text: All prompts
+  href: /copilot/copilot-chat-cookbook
 spotlight:
   - article: /testing-code/generate-unit-tests
     image: /assets/images/copilot-landing/generating_unit_tests.png

src/article-api/middleware/article-body.ts

@@ -1,7 +1,7 @@
 import type { Response } from 'express'
 
 import { Context } from '@/types'
-import { ExtendedRequestWithPageInfo } from '../types'
+import { ExtendedRequestWithPageInfo } from '@/article-api/types'
 import contextualize from '@/frame/middleware/context/context'
 
 export async function getArticleBody(req: ExtendedRequestWithPageInfo) {

src/content-linter/tests/unit/frontmatter-schema.js

@@ -48,4 +48,52 @@ describe(frontmatterSchema.names.join(' - '), () => {
     expect(errors[0].lineNumber).toBe(1)
     expect(errors[0].errorRange).toEqual(null)
   })
+
+  test('sidebarLink with valid object properties passes', async () => {
+    const markdown = [
+      '---',
+      'title: Title',
+      'versions:',
+      "  fpt: '*'",
+      'sidebarLink:',
+      '  text: "All prompts"',
+      '  href: "/copilot/copilot-chat-cookbook"',
+      '---',
+    ].join('\n')
+    const result = await runRule(frontmatterSchema, { strings: { markdown }, ...fmOptions })
+    const errors = result.markdown
+    expect(errors.length).toBe(0)
+  })
+
+  test('sidebarLink with missing text property fails', async () => {
+    const markdown = [
+      '---',
+      'title: Title',
+      'versions:',
+      "  fpt: '*'",
+      'sidebarLink:',
+      '  href: "/copilot/copilot-chat-cookbook"',
+      '---',
+    ].join('\n')
+    const result = await runRule(frontmatterSchema, { strings: { markdown }, ...fmOptions })
+    const errors = result.markdown
+    expect(errors.length).toBe(1)
+    expect(errors[0].lineNumber).toBe(5)
+  })
+
+  test('sidebarLink with missing href property fails', async () => {
+    const markdown = [
+      '---',
+      'title: Title',
+      'versions:',
+      "  fpt: '*'",
+      'sidebarLink:',
+      '  text: "All prompts"',
+      '---',
+    ].join('\n')
+    const result = await runRule(frontmatterSchema, { strings: { markdown }, ...fmOptions })
+    const errors = result.markdown
+    expect(errors.length).toBe(1)
+    expect(errors[0].lineNumber).toBe(5)
+  })
 })

src/fixtures/fixtures/content/get-started/index.md

@@ -19,6 +19,7 @@ featuredLinks:
 children:
   - /start-your-journey
   - /foo
+  - /sidebar-test
   - /video-transcripts
   - /minitocs
   - /liquid
@@ -31,5 +32,5 @@ communityRedirect:
   name: Provide HubGit Feedback
   href: 'https://hubgit.com/orgs/community/discussions/categories/get-started'
 product_video: 'https://www.yourube.com/abc123'
-product_video_transcript: '/get-started/video-transcripts/transcript--my-awesome-video'
+product_video_transcript: '/video-transcripts/transcript--my-awesome-video'
 ---

src/fixtures/fixtures/content/get-started/sidebar-test/index.md

@@ -0,0 +1,15 @@
+---
+title: Sidebar Test Page
+intro: 'Test page for sidebar custom link functionality'
+versions:
+  fpt: '*'
+  ghes: '*'
+  ghec: '*'
+sidebarLink:
+  text: All sidebar test items
+  href: /get-started/sidebar-test
+children:
+  - /test-child
+---
+
+This is a test page for the sidebar custom link functionality.

src/fixtures/fixtures/content/get-started/sidebar-test/test-child.md

@@ -0,0 +1,10 @@
+---
+title: Test Child Page
+intro: 'Child page for testing sidebar functionality'
+versions:
+  fpt: '*'
+  ghes: '*'
+  ghec: '*'
+---
+
+This is a test child page under the sidebar test section.

src/fixtures/fixtures/content/index.md

@@ -32,6 +32,7 @@ children:
   - actions
   - rest
   - webhooks
+  - video-transcripts
   # - account-and-profile
   # - authentication
   # - repositories

src/fixtures/fixtures/content/video-transcripts/index.md

@@ -0,0 +1,12 @@
+---
+title: Video transcripts
+intro: 'Collection of video transcripts for accessibility and reference.'
+versions:
+  fpt: '*'
+  ghes: '*'
+  ghec: '*'
+children:
+  - /transcript--my-awesome-video
+---
+
+This section contains transcripts for videos used throughout the documentation.

src/fixtures/fixtures/content/video-transcripts/transcript--my-awesome-video.md

@@ -0,0 +1,10 @@
+---
+title: Transcript - My awesome video
+product_video: 'https://www.yourube.com/abc123'
+versions:
+  fpt: '*'
+  ghes: '*'
+  ghec: '*'
+---
+
+This is a transcript

src/fixtures/tests/playwright-rendering.spec.ts

@@ -324,6 +324,19 @@ test('navigate with side bar into article inside a subcategory inside a category
   await expect(page).toHaveURL(/actions\/category\/subcategory\/article/)
 })
 
+test('sidebar custom link functionality works', async ({ page }) => {
+  // Test that sidebar functionality is not broken by custom links feature
+  await page.goto('/get-started')
+
+  await expect(page).toHaveTitle(/Getting started with HubGit/)
+
+  // Verify that regular sidebar navigation still works by clicking on known sections
+  await page.getByTestId('product-sidebar').getByText('Start your journey').click()
+  await page.getByTestId('product-sidebar').getByText('Hello World').click()
+  await expect(page).toHaveURL(/\/en\/get-started\/start-your-journey\/hello-world/)
+  await expect(page).toHaveTitle(/Hello World - GitHub Docs/)
+})
+
 test.describe('hover cards', () => {
   test('hover over link', async ({ page }) => {
     await page.goto('/pages/quickstart')