feat: Support srcset and sizes for homepage image

.changeset/lazy-cars-tan.md

@@ -0,0 +1,6 @@
+---
+"@rspress/theme-default": patch
+"@rspress/shared": patch
+---
+
+Support `srcset` and `sizes` for homepage image

e2e/fixtures/page-type-home/doc/index.md

@@ -0,0 +1,25 @@
+---
+pageType: home
+hero:
+  name: E2E case title
+  text: E2E case subTitle
+  tagline: E2E case tagline
+  actions:
+  - text: Action 1
+    link: /action-1
+  - text: Action 2
+    link: /action-2
+    theme: brand
+  - text: External
+    link: https://example.com/
+    theme: alt
+  image:
+    src: /brand.png
+    alt: E2E case brand image
+    srcset:
+      - /brand.png
+      - /[email protected] 2x
+    sizes:
+      - '((min-width: 50em) and (max-width: 60em)) 50em'
+      - "(max-width: 30em) 20em"
+---

e2e/fixtures/page-type-home/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@rspress-fixture/page-type-home",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "rspress dev",
+    "build": "rspress build",
+    "preview": "rspress preview"
+  },
+  "dependencies": {
+    "rspress": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/node": "^14"
+  }
+}

e2e/fixtures/page-type-home/rspress.config.ts

@@ -0,0 +1,6 @@
+import * as path from 'path';
+import { defineConfig } from 'rspress/config';
+
+export default defineConfig({
+  root: path.join(__dirname, 'doc'),
+});

e2e/fixtures/page-type-home/tsconfig.json

@@ -0,0 +1 @@
+{}

e2e/tests/page-type-home.test.ts

@@ -0,0 +1,45 @@
+import path from 'path';
+import { expect, test } from '@playwright/test';
+import { getPort, killProcess, runDevCommand } from '../utils/runCommands';
+
+const appDir = path.resolve(__dirname, '../fixtures/page-type-home');
+
+test.describe('home pageType', async () => {
+  let appPort: number;
+  let app: unknown;
+  test.beforeAll(async () => {
+    appPort = await getPort();
+    app = await runDevCommand(appDir, appPort);
+  });
+
+  test.afterAll(async () => {
+    if (app) {
+      await killProcess(app);
+    }
+  });
+
+  test('Hero', async ({ page }) => {
+    await page.goto(`http://localhost:${appPort}`);
+    await expect(page.locator('h1').textContent()).resolves.toBe(
+      'E2E case title',
+    );
+    await expect(
+      page.locator('.rspress-home-hero-text').textContent(),
+    ).resolves.toBe('E2E case subTitle');
+    await expect(
+      page.locator('.rspress-home-hero-tagline').textContent(),
+    ).resolves.toBe('E2E case tagline');
+
+    const img = page.locator('.rspress-home-hero-image img');
+    await expect(img.getAttribute('src')).resolves.toBe('/brand.png');
+    await expect(img.getAttribute('alt')).resolves.toBe('E2E case brand image');
+    await expect(img.getAttribute('srcset')).resolves.toBe(
+      '/brand.png, /[email protected] 2x',
+    );
+    await expect(img.getAttribute('sizes')).resolves.toBe(
+      '((min-width: 50em) and (max-width: 60em)) 50em, (max-width: 30em) 20em',
+    );
+
+    // todo: add tests for hero actions
+  });
+});

packages/document/docs/en/api/config/config-frontmatter.mdx

@@ -57,6 +57,8 @@ export interface Hero {
   image?: {
     src: string;
     alt: string;
+    srcset?: string | string[];
+    sizes?: string | string[];
   };
   actions: {
     text: string;

packages/document/docs/zh/api/config/config-frontmatter.mdx

@@ -57,6 +57,8 @@ export interface Hero {
   image?: {
     src: string;
     alt: string;
+    srcset?: string | string[];
+    sizes?: string | string[];
   };
   actions: {
     text: string;

packages/shared/src/types/index.ts

@@ -1,11 +1,11 @@
-import type { RsbuildPlugin, RsbuildConfig } from '@rsbuild/core';
-import type { PluggableList } from 'unified';
+import type { RsbuildConfig, RsbuildPlugin } from '@rsbuild/core';
 import type { ZoomOptions } from 'medium-zoom';
+import type { PluggableList } from 'unified';
+import type { AdditionalPage, RspressPlugin } from './Plugin';
 import type {
   Config as DefaultThemeConfig,
   NormalizedConfig as NormalizedDefaultThemeConfig,
 } from './defaultTheme';
-import type { RspressPlugin, AdditionalPage } from './Plugin';
 
 export type { DefaultThemeConfig, NormalizedDefaultThemeConfig };
 export * from './defaultTheme';
@@ -231,6 +231,8 @@ export interface Hero {
   image?: {
     src: string;
     alt: string;
+    sizes?: string | string[];
+    srcset?: string | string[];
   };
   actions: {
     text: string;

packages/theme-default/src/components/HomeHero/index.tsx

@@ -1,13 +1,13 @@
-import { FrontMatterMeta } from '@rspress/shared';
 import {
   normalizeHrefInRuntime as normalizeHref,
   normalizeImagePath,
 } from '@rspress/runtime';
+import { FrontMatterMeta } from '@rspress/shared';
 import { Button } from '@theme';
 import { renderHtmlOrText } from '../../logic';
 import styles from './index.module.scss';
 
-const DEFAULT_HERO = {
+const DEFAULT_HERO: FrontMatterMeta['hero'] = {
   name: 'modern',
   text: 'modern ssg',
   tagline: 'modern ssg',
@@ -78,6 +78,8 @@ export function HomeHero({ frontmatter }: { frontmatter: FrontMatterMeta }) {
             <img
               src={normalizeImagePath(hero.image?.src)}
               alt={hero.image?.alt}
+              srcSet={normalizeSrcsetAndSizes(hero.image?.srcset)}
+              sizes={normalizeSrcsetAndSizes(hero.image?.sizes)}
               width={375}
               height={375}
             />
@@ -87,3 +89,10 @@ export function HomeHero({ frontmatter }: { frontmatter: FrontMatterMeta }) {
     </div>
   );
 }
+
+function normalizeSrcsetAndSizes(
+  field: undefined | string | string[],
+): string | undefined {
+  const r = (Array.isArray(field) ? field : [field]).filter(Boolean).join(', ');
+  return r || undefined;
+}