Add support for synced tabs #640

HiDeoo · 2023-09-04T09:28:29Z

What kind of changes does this PR include?

Changes or translations of Starlight docs site content
Changes to Starlight code

Description

Closes ~~Synced tabs #462~~Synced tabs #953.

This pull request adds support for synced tabs.

demo.mp4

Entirely opt-in.
Relies on the syncKey property to enable syncing (can be renamed easily).
It does not use an external store like the docs theme editor but everything is colocated in the StarlightTabs web component (we would only have 1 use case for such a store right now so I feel it's easier to follow if everything is scoped to this component).

Regarding testing, now that withastro/astro#7979 has been merged, this PR introduces some E2E tests with an architecture a bit similar to the one in the Astro repo:

It uses the new programmatic API to start a dev server for a specific fixture.
We can use Playwright to interact with a page and assert that some tabs are synced, some are not, focus is behaving correctly, etc.

The approach is much more lightweight than the one in the Astro repo as we don't need at the moment so much features (edits, builds and preview, etc.). My idea was to make it as simple as possible to get started with E2E tests for what I needed in this PR and then, we can iterate on it depending on our needs. Maybe we will also want to add E2E tests for some other already existing features but I think it might be better to do it in a separate PR (or we could also only add tests for existing features when we get bug reports for them as regression tests).

I also edited the CONTRIBUTING.md file to add a section about E2E tests with an emphasis on the fact that they should only be used for parts that cannot be properly tested with unit tests (e.g. client code for user interactions).

Hope this is what you had in mind Chris when you mentioned the programmatic API in #462. Happy to discuss any part of this PR if needed.

changeset-bot · 2023-09-04T09:28:35Z

🦋 Changeset detected

Latest commit: 6f12a6b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@astrojs/starlight	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

netlify · 2023-09-04T09:28:36Z

✅ Deploy Preview for astro-starlight ready!

Name	Link
🔨 Latest commit	`c056462`
🔍 Latest deploy log	https://app.netlify.com/sites/astro-starlight/deploys/6515849748464e0007cfa4de
😎 Deploy Preview	https://deploy-preview-640--astro-starlight.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 100 (no change from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 100 (no change from production) PWA: - View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

* main: (440 commits) i18n(fr): update `getting-started.mdx` (withastro#1245) [ci] format docs(showcase): add csmos.space (withastro#1269) [ci] format docs: add SiteOne Crawler to showcase (withastro#1264) Fix formatting [ci] format docs(i18n): Add Indonesian translation for site search documentation (withastro#1250) i18n(es): fix typo (withastro#1246) i18n(ja): Update getting-started.mdx (withastro#1252) i18n(es): Update `getting-started.mdx` (withastro#1247) i18n(ko-KR): update `getting-started.mdx` (withastro#1248) Update upgrade instructions to show new `@astrojs/upgrade` (withastro#1241) [ci] format [ci] release (withastro#1240) i18n(ru): Fix typo in `i18n.untranslatedContent` (withastro#1243) Fix timezone-reliance in LastUpdated (withastro#1170) Prefetch links on hover by default (withastro#1242) Add support for Astro v4, drop support for Astro v3 (withastro#1238) Add Matrix social icon (withastro#1203) ...

vercel · 2023-12-13T18:38:47Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
starlight	✅ Ready (Inspect)	Visit Preview	Apr 30, 2024 3:19pm

* main: (419 commits) i18n(fr): Update `guides/i18n.mdx` with <Steps> (withastro#1652) i18n(es): update `site-search` (withastro#1666) i18n(fr): Update `resources/plugins.mdx` with LinkCard Zoom (withastro#1654) i18(zh-cn): Update i18n.mdx (withastro#1672) i18(zh-cn): Update customization.mdx (withastro#1671) [ci] format i18n(it): Update css-and-tailwind.mdx (withastro#1643) [ci] format i18n(it): Update customization.mdx (withastro#1642) [ci] format i18n(es): update `overriding-components` (withastro#1670) i18n(fr): Update `guides/customization.mdx` with <Steps> (withastro#1650) [ci] format i18n(es): update `css-and-tailwind` (withastro#1669) i18n(es): updates `customization` (withastro#1668) i18n(it): Update i18n.mdx (withastro#1645) i18n(es): update `i18n` (withastro#1667) i18n(it): Update site-search.mdx (withastro#1644) [ci] format i18n(fr): Update `guides/overriding-components.mdx` in MDX format and with <Steps> (withastro#1655) ...

packages/starlight/style/props.css

HiDeoo · 2024-03-26T10:57:02Z

Just updated the pull request and also added a new behavior to avoid scroll position changes when alternating between tabs which could happen for example when switching between tabs with different content height.

HiDeoo · 2024-04-15T13:17:09Z

Thanks for another great review, super appreciated 🙌

Everything noticed so far should be fixed now until further changes are requested.

docs/src/content/docs/guides/components.mdx

packages/starlight/user-components/Tabs.astro

* main: (21 commits) Update fa.json (withastro#1793) i18n(fr): update `resources/community-content.mdx` (withastro#1795) [ci] format i18n(ko-KR): update `community-content.mdx` (withastro#1794) [ci] format Adds Starlight in Next.js project video (withastro#1789) [ci] format i18n(ru): update translations (withastro#1783) i18n(id): Update getting-started.mdx (withastro#1778) Upgrade Lunaria and add Action (withastro#1768) [ci] format i18n(es): update `sidebar` (withastro#1767) i18n(pt-br): Update `getting-started.mdx` (withastro#1776) i18n(es): update `configuration` (withastro#1766) [ci] format Add TrueCharts to showcases (withastro#1773) i18n(zh-cn): Update `sidebar.mdx` (withastro#1761) i18n(ko-KR): update `sidebar.mdx` (withastro#1760) i18n(fr): update `guides/sidebar` (withastro#1758) test: fix Windows path separator test issues (withastro#1759) ...

Co-authored-by: Chris Swithinbank <357379+delucis@users.noreply.github.com> Co-authored-by: Sarah Rainsberger <5098874+sarah11918@users.noreply.github.com>

astrobot-houston · 2024-04-30T07:49:56Z

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

Locale	File	Note
en	getting-started.mdx	Source changed, localizations will be marked as outdated.
en	guides/components.mdx	Source changed, localizations will be marked as outdated.
en	guides/css-and-tailwind.mdx	Source changed, localizations will be marked as outdated.
en	guides/customization.mdx	Source changed, localizations will be marked as outdated.

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

delucis

Approving for release! Still working my way through our PR backlog, but this should be able to go out later today.

Thank you for the work on this @HiDeoo — probably taking the award for longest lived PR so far 😅

HiDeoo added 7 commits September 2, 2023 16:23

feat: synced tabs

42dd4cc

test: add e2e tests

8dad024

docs: add synced tabs documentation

695cd01

docs: use synced tabs in existing docs

79b6e98

docs: add e2e tests section to contributing guide

9bb696d

chore: add changeset

23b85c5

test: update unit test coverage excludes

a5d6f13

github-actions bot added 🚨 action Changes to GitHub Action workflows 📚 docs Documentation website changes 🌟 core Changes to Starlight’s main package labels Sep 4, 2023

This was referenced Sep 7, 2023

feat: add documentation for plugins tauri-apps/tauri-docs#1412

Merged

Roadmap to Documentation for Tauri 2.0 tauri-apps/tauri-docs#1344

Open

delucis and others added 3 commits September 28, 2023 15:50

Merge branch 'main' into hd-feat-tabs-sync

c056462

chore: update pr

d99b29c

vercel bot deployed to Preview December 13, 2023 18:40 View deployment

This was referenced Mar 18, 2024

New tip: send emails with astrolicious/astro-tips.dev#15

Open

Improve tab scroll on click withastro/docs#7531

Merged

HiDeoo added 6 commits March 25, 2024 09:52

chore: update pr

d1d44ed

fix: make tabs syncKey prop optional

f81a85e

feat: add tab scroll position lock

f430682

chore: update changeset

ea0ffcc

ci: update e2e tests workflow

a878d76

vercel bot deployed to Preview – starlight March 26, 2024 10:53 View deployment

HiDeoo commented Mar 26, 2024

View reviewed changes

packages/starlight/style/props.css Show resolved Hide resolved

test: use prod build for e2e tests

6a1a5e1

vercel bot deployed to Preview – starlight April 15, 2024 12:37 View deployment

docs: update testFactory() description in CONTRIBUTING.md

101e5d6

vercel bot deployed to Preview – starlight April 15, 2024 13:14 View deployment

sarah11918 reviewed Apr 15, 2024

View reviewed changes

docs/src/content/docs/guides/components.mdx Outdated Show resolved Hide resolved

HiDeoo mentioned this pull request Apr 18, 2024

right nav toc gives no visual indication its scrollable #1746

Open

1 task

favna suggested changes Apr 29, 2024

View reviewed changes

packages/starlight/user-components/Tabs.astro Show resolved Hide resolved

HiDeoo and others added 2 commits April 30, 2024 09:44

docs: update synced tabs description

41a3f3b

Co-authored-by: Chris Swithinbank <357379+delucis@users.noreply.github.com> Co-authored-by: Sarah Rainsberger <5098874+sarah11918@users.noreply.github.com>

vercel bot deployed to Preview – starlight April 30, 2024 07:51 View deployment

delucis approved these changes Apr 30, 2024

View reviewed changes

delucis added the 🌟 minor Change that triggers a minor release label Apr 30, 2024

Merge branch 'main' into hd-feat-tabs-sync

a1daf77

vercel bot deployed to Preview – starlight April 30, 2024 15:08 View deployment

Increase JS budget by 500 bytes

70cb28e

vercel bot deployed to Preview – starlight April 30, 2024 15:15 View deployment

Merge branch 'main' into hd-feat-tabs-sync

6f12a6b

vercel bot deployed to Preview – starlight April 30, 2024 15:19 View deployment

delucis merged commit 7dc503e into withastro:main Apr 30, 2024
11 checks passed

astrobot-houston mentioned this pull request Apr 30, 2024

[ci] release #1733

Merged

HiDeoo mentioned this pull request Apr 30, 2024

i18n(fr): update guides/components and add syncKey to various pages #1797

Merged

This was referenced May 1, 2024

i18n(ko-KR): update getting-started.mdx #1804

Merged

i18n(ko-KR): update components.mdx #1805

Merged

i18n(ko-KR): update css-and-tailwind.mdx #1806

Merged

i18n(ko-KR): update customization.mdx #1807

Merged

dreyfus92 mentioned this pull request May 1, 2024

i18n(es): update guides/components and add syncKey to various pages #1818

Merged

This was referenced May 7, 2024

i18n(zh-cn): Update docs about synced-tabs #1834

Merged

i18n(zh-cn): Update components.mdx #1836

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for synced tabs #640

Add support for synced tabs #640

HiDeoo commented Sep 4, 2023 •

edited

changeset-bot bot commented Sep 4, 2023 •

edited

netlify bot commented Sep 4, 2023 •

edited

vercel bot commented Dec 13, 2023 •

edited

HiDeoo commented Mar 26, 2024

HiDeoo commented Apr 15, 2024

astrobot-houston commented Apr 30, 2024 •

edited

delucis left a comment

Add support for synced tabs #640

Add support for synced tabs #640

Conversation

HiDeoo commented Sep 4, 2023 • edited

What kind of changes does this PR include?

Description

changeset-bot bot commented Sep 4, 2023 • edited

🦋 Changeset detected

netlify bot commented Sep 4, 2023 • edited

✅ Deploy Preview for astro-starlight ready!

vercel bot commented Dec 13, 2023 • edited

HiDeoo commented Mar 26, 2024

HiDeoo commented Apr 15, 2024

astrobot-houston commented Apr 30, 2024 • edited

Lunaria Status Overview

Tracked Files

delucis left a comment

Choose a reason for hiding this comment

HiDeoo commented Sep 4, 2023 •

edited

changeset-bot bot commented Sep 4, 2023 •

edited

netlify bot commented Sep 4, 2023 •

edited

vercel bot commented Dec 13, 2023 •

edited

astrobot-houston commented Apr 30, 2024 •

edited