chore: update

e2e/fixtures/hide-nav-bar/doc/index.mdx

@@ -0,0 +1,8 @@
+---
+pageType: custom
+---
+
+<div id="pageA">contentA</div>
+
+<div id="pageB">A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF A LOT OF CONTENT A LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF A LOT OF CONTENT A LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENT</div>
+<div id="pageC">contentC</div>

e2e/fixtures/hide-nav-bar/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@rspress-fixture/rspress-nav-with-hash",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "rspress dev",
+    "build": "rspress build",
+    "preview": "rspress preview"
+  },
+  "dependencies": {
+    "rspress": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.17"
+  }
+}

e2e/fixtures/hide-nav-bar/rspress-hide-auto.config.ts

@@ -0,0 +1,29 @@
+import * as path from 'node:path';
+import { defineConfig } from 'rspress/config';
+
+export default defineConfig({
+  root: path.join(__dirname, 'doc'),
+  route: {
+    cleanUrls: true,
+  },
+  themeConfig: {
+    hideNavbar: 'auto',
+    nav: [
+      {
+        text: 'PageA',
+        link: '#pageA',
+        position: 'right',
+      },
+      {
+        text: 'PageB',
+        link: '#pageB',
+        position: 'right',
+      },
+      {
+        text: 'PageC',
+        link: '#pageC',
+        position: 'right',
+      },
+    ],
+  },
+});

e2e/fixtures/hide-nav-bar/rspress.config.ts

@@ -0,0 +1,29 @@
+import * as path from 'node:path';
+import { defineConfig } from 'rspress/config';
+
+export default defineConfig({
+  root: path.join(__dirname, 'doc'),
+  route: {
+    cleanUrls: true,
+  },
+  themeConfig: {
+    hideNavbar: 'never',
+    nav: [
+      {
+        text: 'PageA',
+        link: '#pageA',
+        position: 'right',
+      },
+      {
+        text: 'PageB',
+        link: '#pageB',
+        position: 'right',
+      },
+      {
+        text: 'PageC',
+        link: '#pageC',
+        position: 'right',
+      },
+    ],
+  },
+});

e2e/fixtures/hide-nav-bar/tsconfig.json

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

e2e/tests/hide-nav-bar.test.ts

@@ -0,0 +1,80 @@
+import { expect, test } from '@playwright/test';
+import path from 'node:path';
+import { getPort, killProcess, runDevCommand } from '../utils/runCommands';
+
+const fixtureDir = path.resolve(__dirname, '../fixtures');
+
+test.describe('basic test', async () => {
+  let appPort;
+  let app;
+  async function launchApp(configFile: string) {
+    const appDir = path.join(fixtureDir, 'hide-nav-bar');
+    appPort = await getPort();
+    app = await runDevCommand(appDir, appPort, configFile);
+  }
+
+  test.afterAll(async () => {
+    if (app) {
+      await killProcess(app);
+    }
+  });
+
+  test('Navigate with an hash as link', async ({ page }) => {
+    await launchApp('./rspress.config.ts');
+    await page.goto(`http://localhost:${appPort}/`);
+
+    await page.locator('.rspress-nav-menu a').first().click();
+    expect(page.url()).toContain('index#pageA');
+
+    await page.locator('.rspress-nav-menu a').nth(1).click();
+    expect(page.url()).toContain('index#pageB');
+  });
+
+  test('Close the hamburger menu when clicking on an item in mobile view', async ({
+    page,
+  }) => {
+    await launchApp('./rspress.config.ts');
+    await page.setViewportSize({ width: 375, height: 812 });
+
+    await page.goto(`http://localhost:${appPort}/`);
+
+    await page.locator('.rspress-mobile-hamburger').click();
+    await expect(page.locator('.rspress-nav-screen')).toBeVisible();
+
+    await page.getByRole('link', { name: 'PageC' }).click();
+    await expect(page.locator('.rspress-nav-screen')).not.toBeVisible();
+  });
+
+  test('Navbar should be visible on mobile when we scroll down with hideNavbar to never', async ({
+    page,
+  }) => {
+    await launchApp('./rspress.config.ts');
+    await page.setViewportSize({ width: 375, height: 812 });
+
+    await page.goto(`http://localhost:${appPort}/`);
+
+    await page.evaluate(() => {
+      window.scrollBy(0, 800);
+    });
+
+    // Allow to check if the rspress-nav is in the viewport
+    // toBeVisible() doesn't work here because it check the visibility and the display property
+    const isInViewport = await page.evaluate(sel => {
+      const element = document.querySelector(sel);
+
+      if (!element) return false;
+
+      const rect = element.getBoundingClientRect();
+      return (
+        rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <=
+          (window.innerHeight || document.documentElement.clientHeight) &&
+        rect.right <=
+          (window.innerWidth || document.documentElement.clientWidth)
+      );
+    }, '.rspress-nav');
+
+    expect(isInViewport).toBeTruthy();
+  });
+});

e2e/tests/nav-link-item-with-hash.test.ts

@@ -42,36 +42,4 @@ test.describe('basic test', async () => {
     await page.getByRole('link', { name: 'PageC' }).click();
     await expect(page.locator('.rspress-nav-screen')).not.toBeVisible();
   });
-
-  test('Navbar should be visible on mobile when we scroll down with hideNavbar to never', async ({
-    page,
-  }) => {
-    await page.setViewportSize({ width: 375, height: 812 });
-
-    await page.goto(`http://localhost:${appPort}/`);
-
-    await page.evaluate(() => {
-      window.scrollBy(0, 800);
-    });
-
-    // Allow to check if the rspress-nav is in the viewport
-    // toBeVisible() doesn't work here because it check the visibility and the display property
-    const isInViewport = await page.evaluate(sel => {
-      const element = document.querySelector(sel);
-
-      if (!element) return false;
-
-      const rect = element.getBoundingClientRect();
-      return (
-        rect.top >= 0 &&
-        rect.left >= 0 &&
-        rect.bottom <=
-          (window.innerHeight || document.documentElement.clientHeight) &&
-        rect.right <=
-          (window.innerWidth || document.documentElement.clientWidth)
-      );
-    }, '.rspress-nav');
-
-    expect(isInViewport).toBeTruthy();
-  });
 });

e2e/utils/runCommands.ts

@@ -9,18 +9,19 @@ export interface CommandOptions {
   env: Record<string, string>;
 }
 
-export type Command = 'dev' | 'build' | 'preview';
+export type Command = 'dev' | `dev -- -c ${string}` | 'build' | 'preview';
 
 export function sleep(ms: number) {
   return new Promise(resolve => setTimeout(resolve, ms));
 }
 
-export async function runCommand(
+export async function runNpmScript(
   commandName: Command,
   options: CommandOptions,
 ) {
+  const command = commandName.split(' ')[0];
   return new Promise((resolve, reject) => {
-    const instance = spawn('npm', ['run', commandName], {
+    const instance = spawn('npm', ['run', ...commandName.split(' ')], {
       cwd: options.appDir,
       env: {
         TEST: '1',
@@ -45,7 +46,7 @@ export async function runCommand(
         build: /Pages rendered/,
       };
 
-      if (bootupMarkers[commandName].test(message)) {
+      if (bootupMarkers[command].test(message)) {
         if (!didResolve) {
           didResolve = true;
           resolve(instance);
@@ -80,8 +81,12 @@ export async function runCommand(
   });
 }
 
-export async function runDevCommand(appDir: string, port: number) {
-  return runCommand('dev', {
+export async function runDevCommand(
+  appDir: string,
+  port: number,
+  configFile?: string,
+) {
+  return runNpmScript(configFile ? `dev -- -c ${configFile}` : 'dev', {
     appDir,
     env: {
       PORT: port.toString(),
@@ -90,14 +95,14 @@ export async function runDevCommand(appDir: string, port: number) {
 }
 
 export async function runBuildCommand(appDir: string) {
-  return runCommand('build', {
+  return runNpmScript('build', {
     appDir,
     env: {},
   });
 }
 
 export async function runPreviewCommand(appDir: string, port: number) {
-  return runCommand('preview', {
+  return runNpmScript('preview', {
     appDir,
     env: {
       PORT: port.toString(),

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

@@ -128,6 +128,9 @@ export function Nav(props: NavProps) {
 
   const computeNavPosition = () => {
     // On doc page we have the menu bar that is already sticky
+    if (!isMobile) {
+      return 'sticky';
+    }
     if (siteData.themeConfig.hideNavbar === 'never' && page.pageType !== 'doc')
       return 'sticky';