From 7377b6819085660b0196a4e5fc0979e99a039e66 Mon Sep 17 00:00:00 2001 From: Adam Page Date: Wed, 30 Sep 2026 19:28:38 -0500 Subject: [PATCH] docs: adopt shared mobile navigation and compact terminals --- astro-site/package-lock.json | 8 ++-- astro-site/package.json | 2 +- astro-site/tests/mobile-sections.spec.ts | 60 ++++++++++++++++++++++++ astro-site/tests/site.spec.ts | 21 ++------- 4 files changed, 69 insertions(+), 22 deletions(-) create mode 100644 astro-site/tests/mobile-sections.spec.ts diff --git a/astro-site/package-lock.json b/astro-site/package-lock.json index 36ad547..c901a42 100644 --- a/astro-site/package-lock.json +++ b/astro-site/package-lock.json @@ -8,7 +8,7 @@ "name": "sleepkit-site", "version": "0.0.0", "dependencies": { - "@ambiqai/helia-ui": "https://codeload.github.com/AmbiqAI/helia-ui/tar.gz/369221597433fcb4f790525ea6b691305f569f45", + "@ambiqai/helia-ui": "https://codeload.github.com/AmbiqAI/helia-ui/tar.gz/a62e8d45505dd3bbcdf1c4a03dfd1ec863322ecf", "@astrojs/markdown-remark": "^7.3.1", "@astrojs/react": "7.0.0", "@astrojs/starlight": "^0.41.5", @@ -35,9 +35,9 @@ } }, "node_modules/@ambiqai/helia-ui": { - "version": "0.1.0-alpha.20", - "resolved": "https://codeload.github.com/AmbiqAI/helia-ui/tar.gz/369221597433fcb4f790525ea6b691305f569f45", - "integrity": "sha512-xQiaPNGyN5wo0+MkJNBHHvF+mMwF3iwnIV0TtoTMa2nxr0n0EVflWB4q9hHtAW2WBVp/E1dF8j5C/NXKa20wzw==", + "version": "0.1.0-alpha.22", + "resolved": "https://codeload.github.com/AmbiqAI/helia-ui/tar.gz/a62e8d45505dd3bbcdf1c4a03dfd1ec863322ecf", + "integrity": "sha512-xd8Bc86JSkJDrY7r6HhMJ5OBPvT+XVWOYLVQNiFg40rsJdPDMXuiqOV3dlQaoilThm9EG3JDS4oCBY6YjK1uwQ==", "license": "BSD-3-Clause", "dependencies": { "@fontsource-variable/roboto": "5.3.0", diff --git a/astro-site/package.json b/astro-site/package.json index 3182737..1400e45 100644 --- a/astro-site/package.json +++ b/astro-site/package.json @@ -21,7 +21,7 @@ "test": "playwright test" }, "dependencies": { - "@ambiqai/helia-ui": "https://codeload.github.com/AmbiqAI/helia-ui/tar.gz/369221597433fcb4f790525ea6b691305f569f45", + "@ambiqai/helia-ui": "https://codeload.github.com/AmbiqAI/helia-ui/tar.gz/a62e8d45505dd3bbcdf1c4a03dfd1ec863322ecf", "@astrojs/markdown-remark": "^7.3.1", "@astrojs/react": "7.0.0", "@astrojs/starlight": "^0.41.5", diff --git a/astro-site/tests/mobile-sections.spec.ts b/astro-site/tests/mobile-sections.spec.ts new file mode 100644 index 0000000..7f19d3e --- /dev/null +++ b/astro-site/tests/mobile-sections.spec.ts @@ -0,0 +1,60 @@ +import { test, expect } from '@playwright/test'; + +const base = '/sleepkit'; +for (const width of [390, 835]) { + for (const colorScheme of ['light', 'dark'] as const) { + test(`section dropdown scopes navigation at ${width} in ${colorScheme}`, async ({ page }) => { + await page.setViewportSize({ width, height: 844 }); + await page.emulateMedia({ colorScheme }); + await page.goto(`${base}/guides/`); + const dropdown = page.locator('[data-helia-section-dropdown]'); + const summary = dropdown.locator('summary'); + await expect(summary).toContainText('User guide'); + await summary.focus(); + await page.keyboard.press('Enter'); + await expect(dropdown).toHaveAttribute('open', ''); + await page.keyboard.press('Escape'); + await expect(dropdown).not.toHaveAttribute('open', ''); + await expect(summary).toBeFocused(); + const menu = page.getByRole('button', { name: 'Open navigation', exact: true }); + const sidebar = page.locator('#starlight__sidebar'); + await menu.click(); + await expect(sidebar.locator('[data-helia-sidebar-heading]')).toHaveText('User guide'); + const guideLinks = await sidebar.locator('a').evaluateAll(links => links.map(link => link.getAttribute('href'))); + await menu.click(); + await summary.click(); + await page.getByRole('navigation', { name: 'Choose section' }).getByRole('link', { name: 'Getting started', exact: true }).click(); + await expect(summary).toContainText('Getting started'); + await menu.click(); + await expect(sidebar.locator('[data-helia-sidebar-heading]')).toHaveText('Getting started'); + const startLinks = await sidebar.locator('a').evaluateAll(links => links.map(link => link.getAttribute('href'))); + expect(startLinks.length).toBeGreaterThan(0); + expect(startLinks).not.toEqual(guideLinks); + expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true); + await page.screenshot({ path: `/tmp/sleepkit-rollout-${width}-${colorScheme}.png` }); + }); + } +} + +test('desktop retains direct section navigation', async ({ page }) => { + await page.setViewportSize({ width: 1440, height: 900 }); + await page.goto(`${base}/`); + await expect(page.locator('[data-helia-section-dropdown]')).toBeHidden(); + await expect(page.getByRole('navigation', { name: 'Primary', exact: true }).getByRole('link', { name: 'Getting started', exact: true })).toBeVisible(); +}); + +for (const colorScheme of ['light', 'dark'] as const) { + test(`tabbed terminals keep commands and copy controls in ${colorScheme}`, async ({ page }) => { + await page.setViewportSize({ width: 835, height: 890 }); + await page.emulateMedia({ colorScheme }); + await page.goto(`${base}/`); + const terminal = page.locator('[role="tabpanel"] .frame.is-terminal:visible').first(); + await expect(terminal).toBeVisible(); + await expect(terminal.locator('.header')).toBeHidden(); + await expect(terminal.locator('pre')).not.toHaveText(''); + await terminal.hover(); + await expect(terminal.getByRole('button', { name: 'Copy to clipboard' })).toBeVisible(); + await terminal.scrollIntoViewIfNeeded(); + await page.screenshot({ path: `/tmp/sleepkit-rollout-terminal-${colorScheme}.png` }); + }); +} diff --git a/astro-site/tests/site.spec.ts b/astro-site/tests/site.spec.ts index 7dc31d3..4663490 100644 --- a/astro-site/tests/site.spec.ts +++ b/astro-site/tests/site.spec.ts @@ -74,23 +74,10 @@ test("mobile navigation has a single Home link and task-specific staging guides" }) => { await page.setViewportSize({ width: 835, height: 890 }); await page.goto(""); - await page - .getByRole("button", { name: "Open navigation", exact: true }) - .click(); - await expect( - page - .locator('nav[aria-label="Main"] summary') - .filter({ hasText: /^Home$/ }), - ).toHaveCount(0); - await expect( - page - .locator('nav[aria-label="Main"]') - .getByRole("link", { name: "Home", exact: true }), - ).toHaveCount(1); - await page - .locator('nav[aria-label="Main"] summary') - .filter({ hasText: /^Tasks$/ }) - .click(); + await page.locator('[data-helia-section-dropdown] summary').click(); + await page.getByRole('navigation', { name: 'Choose section' }).getByRole('link', { name: 'Tasks', exact: true }).click(); + await page.getByRole('button', { name: 'Open navigation', exact: true }).click(); + await expect(page.locator('[data-helia-sidebar-heading]')).toHaveText('Tasks'); await page .getByRole("link", { name: "Saved-feature baseline", exact: true }) .click();