feat(examples): New basics template #12472
Conversation
github-actions
bot
added
pkg: example
|
| @@ -4,5 +4,3 @@ | |||
| export { default as Code } from './Code.astro'; | |||
| // @ts-ignore | |||
| export { default as Debug } from './Debug.astro'; | |||
| // @ts-ignore | |||
| export { default as Welcome } from './Welcome.astro'; | |||
There was a problem hiding this comment.
It moved it back into the template for multiple reasons:
- You can't import from
astro:componentsa component that has styles defined the "Astro way", you cause styles to leak everywhere - Inside Astro, you could check out the code, but not modify it, which feels like pedagogically it was a downgrade
There was a problem hiding this comment.
FWIW (and perhaps you already know) for no1, I think is:inline can be used to avoid that, unless I miss something that requires processing the styles.
|
Beautiful! :) |
There was a problem hiding this comment.
Looks really pretty! Tested by opening this branch with StackBlitz in various browsers and testing it out.
Looked as expected in Safari and Firefox on macOS and in Firefox Android. Even on FF Android I didn’t see the issues I usually associate with heavy blurs (probably helped by the fact stuff doesn’t really have to scroll in this template).
On smaller screens (like my phone), the “What’s new in Astro 5.0” card can cover the CTA buttons, but I don’t know how much that matters (screenshot below). The buttons themselves look great on mobile now! 🙌
Changes
This updates the design of the basics template for Astro 5. It aims to provide a mix between the old basics and minimal templates, so that it's easy for someone to take the basics, remove a few things easily and get minimal.
Looks like this
Testing
Tested manually
Docs
N/A. Docs doesn't seem to describe this template as far as I can tell.