Format astro files in examples

[MarcusOtter]

Changes

This PR runs the prettier-plugin-astro on the example projects to close #3855.

I did this by first installing the plugin in the repo, then running npx prettier --write ./examples/**/*.astro, then reverting the setup commit (since we do not want to add it yet, as discussed in the issue).

Testing

I have not had time to test all the examples, would very much appreciate if someone could help me with that! It should only be a formatting change but maybe we'll find some edgecase where it breaks behavior? EDIT: I guess the CI should take care of testing that anyways.

Docs

No docs change needed

[changeset-bot]

⚠️ No Changeset found

Latest commit: ab3c302

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[Princesseuh]

This is unrelated to the formatting changes, but isn't this file supposed to use the imported components? 😅

[MarcusOtter]

Good catch! Maybe it should be another PR?

[Princesseuh]

This looks good! Just three things:

• HTML quotes got transformed to single quotes, which is valid as in that it works in Astro, but is not recommended. Caused by 🐛 BUG: 0.1.0-next.4 changes HTML attribute quotes depending on singleQuote option in Prettier prettier-plugin-astro#174
• Slots should be self-closing but are not due to 💡 RFC: slots should be self-closing prettier-plugin-astro#228
• A style tag was moved inside the body due this compiler issue 🐛 BUG: [AST] style tag is moved inside the body tag compiler#318

What I suggest we do is:

• Rerun it on the examples with singleQuotes set to false, just so we get proper quotes at least
• Close slots manually
• Move the style tag manually

That way we can at least get this PR merged without needing to fix all the issues (that we'll definitely fix in the future, of course!). If you don't have time to do it, don't hesitate to tell me and I'll take over this, very happy to help on this!

[Princesseuh]

Looks good to me, there was a few changes I wasn't sure of inside the portfolio example but testing locally, there seems to be no issues! Once this is merged, another PR adding the commit to this file will be needed

[MarcusOtter]

Thanks again! I was going to go above and beyond to use ' for inside code fences, I even made this beautiful regex for it to replace them all at once, but VSCode didn't support variable length lookbehinds 😢

If anyone is interested in doing it manually, this regex works in VSCode to select all codefences with double quotes in them: ---(.|\n)*"+(.|\n)*---, and this is the regex that would only select the double quotes, but wasn't supported in VSCode: (?<=---(.|\n)*)"+(?=(.|\n)*---)

Regextester	VSCode

(and yes, I did spend more time trying to automate it than it would've taken to do it manually)