Add synced tabs persistence by HiDeoo · Pull Request #2087 · withastro/starlight

HiDeoo · 2024-07-04T12:56:14Z

Closes #1851 and follow-up to #953.

This PR adds persistence to the synced tabs feature by relying on localStorage to store the synced tabs state.

This pull request is still a draft for 2 reasons:

There seems to be a flash of invalid tab that can randomly happen once in a while in development mode. I'd like to investigate this further and see if we can avoid it.
I want to play a bit more with the feature as most of the time so far has been spent on when/how to include the script to restore the synced tabs rather than actually using the feature.

changeset-bot · 2024-07-04T12:56:17Z

🦋 Changeset detected

Latest commit: ed1b3bf

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

astrobot-houston · 2024-07-04T12:56:50Z

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	guides/components.mdx	Source changed, localizations will be marked as outdated.
en	guides/customization.mdx	Source changed, localizations will be marked as outdated.
en	guides/site-search.mdx	Source changed, localizations will be marked as outdated.
en	manual-setup.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.

HiDeoo · 2024-08-05T13:20:12Z

Undrafting this PR as I would like to get more eyes on it and have some people play with the changes, maybe during a T&D session or something similar.

The flash of invalid tabs that I mentioned is randomly present but only during dev like I mentioned and I'm not sure there is a reliable way to remove it. In production tho, I've never seen it but that's why I would like to have more people test it.

There is also probably room for improvements in the inline script but that could be done later on when we confirm that the current approach is working as expected.

netlify · 2024-08-06T11:10:29Z

✅ Deploy Preview for astro-starlight ready!

Name	Link
🔨 Latest commit	`ed1b3bf`
🔍 Latest deploy log	https://app.netlify.com/sites/astro-starlight/deploys/66bf1e6b6c3ed000082f7939
😎 Deploy Preview	https://deploy-preview-2087--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: 92 (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.

delucis

Getting an early review in before we go through this on T&D on Thursday. Working great in the deploy preview for me @HiDeoo!

packages/starlight/user-components/Tabs.astro

.changeset/silver-houses-lick.md

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

…erText`

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

delucis

LGTM from an initial review! Look forward to seeing how testing goes tomorrow.

packages/starlight/user-components/Tabs.astro

HiDeoo · 2024-08-13T12:55:22Z

Based on the feedback during the T&D exploration, I've updated the PR:

We're now using a global symbol to keep track in Astro.locals if the restore script has been rendered or not. The goal is to avoid potential clash with user-defined variables in Astro.locals (even if unlikely).
I tried quite a few scenarios (embedded components, delayed components, etc.) to see if we could hit any issue with the restore script. So far, everything seems to work as expected no matter the scenario.

delucis

LGTM! Left two nits, but don’t have any “real” comments left!

delucis · 2024-08-13T14:30:55Z

packages/starlight/user-components/Tabs.astro

+				tabs?.[0]?.setAttribute('aria-selected', 'false');
+				tabs?.[0]?.setAttribute('tabindex', '-1');


Nit, but I think tabs will always be set here given it is declared as [...query]:

Suggested change

tabs?.[0]?.setAttribute('aria-selected', 'false');

tabs?.[0]?.setAttribute('tabindex', '-1');

tabs[0]?.setAttribute('aria-selected', 'false');

tabs[0]?.setAttribute('tabindex', '-1');

packages/starlight/user-components/Tabs.astro

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

Co-authored-by: Chris Swithinbank <357379+delucis@users.noreply.github.com> Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

HiDeoo added 4 commits July 4, 2024 14:29

feat: add synced tabs persistence

48060cb

docs: update synced tabs documentation

b80ffa2

docs: add missing tabs syncKey

1d05e72

chore: add changeset

545e497

This comment was marked as outdated.

Sign in to view

github-actions bot added 📚 docs Documentation website changes 🌟 core Changes to Starlight’s main package labels Jul 4, 2024

vercel bot deployed to Preview – starlight July 4, 2024 12:57 View deployment

HiDeoo marked this pull request as ready for review August 5, 2024 13:19

Merge branch 'main' into hd-synced-tabs-persistence

fb86b21

delucis added the 🌟 minor Change that triggers a minor release label Aug 6, 2024

delucis reviewed Aug 6, 2024

View reviewed changes

HiDeoo and others added 5 commits August 7, 2024 16:02

refactor: use textContent to get the label of a tab instead of `inn…

5091da4

…erText`

refactor: store synced tabs state per sync key

91d1411

fix: comment typo

e11ae69

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

docs: tweak changelog

9d273e1

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

docs: remove local storage reference

7a655dd

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

delucis reviewed Aug 7, 2024

View reviewed changes

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

HiDeoo added 2 commits August 7, 2024 17:39

refactor: move persistence logic with sync logic

33501a0

refactor: use global symbol to track restore script rendering

eb66ef6

delucis approved these changes Aug 13, 2024

View reviewed changes

HiDeoo and others added 2 commits August 14, 2024 10:36

fix: remove unnecessary optional chaining

df3d45d

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

style: un-indent restore script

0e67245

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

delucis mentioned this pull request Aug 14, 2024

Experimental minified inline scripts #2213

Closed

Merge branch 'main' into hd-synced-tabs-persistence

ed1b3bf

delucis merged commit caa84ea into withastro:main Aug 16, 2024

astrobot-houston mentioned this pull request Aug 16, 2024

[ci] release #2217

Merged

HiDeoo mentioned this pull request Aug 16, 2024

i18n(fr): add missing syncKey to various pages #2218

Merged

This was referenced Aug 17, 2024

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

Merged

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

Merged

i18n(ko-KR): update site-search.mdx #2228

Merged

i18n(ko-KR): update manual-setup.mdx #2230

Merged

HiDeoo mentioned this pull request Aug 17, 2024

i18n(fr): update guides/components #2232

Merged

zhoushengdao mentioned this pull request Aug 18, 2024

i18n(zh-cn): Add synced tabs persistence #2236

Merged

liruifengv mentioned this pull request Aug 19, 2024

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

Merged

HiDeoo mentioned this pull request Aug 19, 2024

Components documentation improvements #2121

Merged

7 tasks

This was referenced Oct 29, 2024

i18n(ja): Update manual-setup.mdx #2531

Merged

i18n(ja): Update customization.mdx #2560

Merged

i18n(ja): Update site-search.mdx #2577

Merged

Yoxnear pushed a commit to Yoxnear/starlight-custom that referenced this pull request Jul 23, 2025

Add synced tabs persistence (withastro#2087)

244774b

Co-authored-by: Chris Swithinbank <357379+delucis@users.noreply.github.com> Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

		tabs?.[0]?.setAttribute('aria-selected', 'false');
		tabs?.[0]?.setAttribute('tabindex', '-1');

Uh oh!

Conversation

HiDeoo commented Jul 4, 2024

Uh oh!

changeset-bot bot commented Jul 4, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

This comment was marked as outdated.

astrobot-houston commented Jul 4, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Lunaria Status Overview

Tracked Files

Uh oh!

HiDeoo commented Aug 5, 2024

Uh oh!

netlify bot commented Aug 6, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for astro-starlight ready!

Uh oh!

delucis left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

delucis left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

HiDeoo commented Aug 13, 2024

Uh oh!

delucis left a comment

Choose a reason for hiding this comment

Uh oh!

delucis Aug 13, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot bot commented Jul 4, 2024 •

edited

Loading

astrobot-houston commented Jul 4, 2024 •

edited

Loading

netlify bot commented Aug 6, 2024 •

edited

Loading