clarify astro:before-swap example [i18nIgnore]

[sharqawycs]

Description (required)

closes #12253

Uses the correct localStorage.getItem().
Simplifies the astro:before-swap example in view-transitions to make it clearer and focused on the swap only.
Removes is:inline and extra helper functions so readers can see the minimal working example.

Old example:

<script is:inline>
  function setDarkMode(document) {
    let theme = localStorage.darkMode ? "dark" : "light";
    document.documentElement.dataset.theme = theme;
  }

  setDarkMode(document);

  document.addEventListener("astro:before-swap", (event) => {
    // Pass the incoming document to set the theme on it
    setDarkMode(event.newDocument);
  });
</script>

Updated example:

<script>
  document.addEventListener("astro:before-swap", (event) => {
    event.newDocument.documentElement.dataset.theme = localStorage.getItem("darkMode") ? "dark" : "light";
  });
</script>

discord: @sharqawycs

[netlify]

✅ Deploy Preview for astro-docs-2 ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	cbf1ba8
🔍 Latest deploy log	https://app.netlify.com/projects/astro-docs-2/deploys/68b85958fb07a3000713cb24
😎 Deploy Preview	https://deploy-preview-12254--astro-docs-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[astrobot-houston]

Lunaria Status Overview

🌑 This pull request will not trigger status changes.

Learn more

Lunaria automatically ignores changes on specific PRs by adding a ignored keyword in its title. Found: i18nIgnore.

You can change this by either removing the keyword above from the PR's title, or modifying the ignoreKeywords property in your Lunaria configuration file.

Tracked Files

Note

The notes below indicate what would happen if the pull request is merged when triggering status changes. Since a ignored keyword was found in the PR's title, the status changes indicated below won't be applied.

File	Note
en/guides/view-transitions.mdx	Source changed, localizations will be marked as outdated.
es/guides/view-transitions.mdx	Localization changed, will be marked as complete.
fr/guides/view-transitions.mdx	Localization changed, will be marked as complete.
ja/guides/view-transitions.mdx	Localization changed, will be marked as complete.
ko/guides/view-transitions.mdx	Localization changed, will be marked as complete.
ru/guides/view-transitions.mdx	Localization changed, will be marked as complete.
zh-cn/guides/view-transitions.mdx	Localization changed, will be marked as complete.

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.

[astrobot-houston]

Hello! Thank you for opening your first PR to Astro’s Docs! 🎉

Here’s what will happen next:

1. Our GitHub bots will run to check your changes.
   If they spot any broken links you will see some error messages on this PR.
   Don’t hesitate to ask any questions if you’re not sure what these mean!

2. In a few minutes, you’ll be able to see a preview of your changes on Netlify 🥳.

3. One or more of our maintainers will take a look and may ask you to make changes.
   We try to be responsive, but don’t worry if this takes a few days.

[sharqawycs]

@martrapp
could you review it please

[sharqawycs]

oh my bad, I should have update it in all languages

[sharqawycs]

Synced the change across all languages where it was used, and noticed this page isn’t available in Arabic. I’ll contribute by helping with the Arabic translation.

[yanthomasdev]

Added i18nIgnore to the PR title, this way when the PR is merged it doesn't mess with the current status of translations.

[martrapp]

Added i18nIgnore to the PR title, this way when the PR is merged it doesn't mess with the current status of translations.

Thank you @yanthomasdev! I had no idea how to handle multi-language PRs 😌

[martrapp]

@yanthomasdev, Lunaria flagged 6 languages in its comment above.
Is there a reason why ru and pt-br did not show up?

[martrapp]

Thank you for this PR, @sharqawycs!
I think your new example code is much better. I just wanted to suggest adding a line break to improve readability:

<script>
  document.addEventListener("astro:before-swap", (event) => {
    event.newDocument.documentElement.dataset.theme = 
      localStorage.getItem("darkMode") ? "dark" : "light";
  });
</script>

[sharqawycs]

Thanks for your guidance again, @martrapp, a line break would be helpful and more accessible.
I just fixed it.

[yanthomasdev]

Is there a reason why ru and pt-br did not show up?

@martrapp yes, the Lunaria action only shows changed files, so that's expected.

[martrapp]

Thanks for your guidance again, @martrapp, a line break would be helpful and more accessible. I just fixed it.

Great, @sharqawycs!

Do you want to change the ru and pt-br versions too, or should i copy your change?

[sharqawycs]

Great, @sharqawycs!

Do you want to change the ru and pt-br versions too, or should i copy your change?

I just have changed the pt-br version while ru is missing the astro:before-swap section entirely.
@martrapp

[martrapp]

Yes, but I thought it has the same code under after:swap?

[sharqawycs]

Yes, but I thought it has the same code under after:swap?

I searched the file and have not find the targeted block of code. If you could find it, you can modify it
@martrapp

[martrapp]

😄 you already changed and included the ru version. Could you please also add the pt-br file?

[martrapp]

Ah, my bad, I all messed up!

[martrapp]

Sorry for the confusion. so the ru version is fine and the pt-br version was in bad shape before and there is nothing to fix there regarding this PR.

Again, thank you very much, @sharqawycs, for helping to improve the docs!
Are you on Astro's Discord?

[sharqawycs]

Ah, my bad, I all messed up!

No worries, languages names are quite confusing

[sharqawycs]

Sorry for the confusion. so the ru version is fine and the pt-br version was in bad shape before and there is nothing to fix there regarding this PR.

Again, thank you very much, @sharqawycs, for helping to improve the docs! Are you on Astro's Discord?

Yes I am there, my username is sharqawycs

[martrapp]

Looks good to me!
Thanks a lot!