astro/examples
Matthew Phillips 6a12fcecb0
Initial View Transition Support (#7511)
* Basic support

* Add the fade transition

* Move CSS into a separate file

* Add transition name

* View Transitions changeset

* Replace the boolean transition with 'morph'

* Update to use `transition:animate`

* Use head propagation

* Move CSS into a separate file

* Add builtin animations and namespaced module

* Misquote

* Remove unused code

* Add automatic prefetching to the View Transitions router

* Use a data attribute for back nav animations

* Use [data-astro-transition]

* Add view transitions to examples

* Wait on the HTML response before calling startViewTransition

* Updated stuff

* Update the compiler

* Fix

* Fallback support

* Properly do fallback

* Simplify the selectors

* Put viewTransitions support behind a flag

* Upgrade the compiler

* Remove unused import

* Add tests

* Use an explicit import instead of types

* Fix case where the click comes from within nested content

* Fix linting

* Add a test for the back button

* Prevent glitch in fallback

* Do not combine selectors

* Fallback to MPA nav if there is an issue fetching

* Fallback swap if there are no animations

* Update packages/astro/src/@types/astro.ts

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* Update packages/astro/components/ViewTransitions.astro

Co-authored-by: Emanuele Stoppa <my.burning@gmail.com>

* Update packages/astro/components/ViewTransitions.astro

Co-authored-by: Emanuele Stoppa <my.burning@gmail.com>

* Update the changeset

* PR review changes

* Update more based on review comments.

* Update the updateDOM default

* Pass in transitions options to the compiler

* Update broken tests

* Update .changeset/silly-garlics-live.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* Update .changeset/silly-garlics-live.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* Update .changeset/silly-garlics-live.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* Update .changeset/silly-garlics-live.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* h2 -> h4

* Upgrade to stable compiler

* Remove exp redirects from sitemap

* Remove usage from examples

* Remove example updates

---------

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
Co-authored-by: Emanuele Stoppa <my.burning@gmail.com>
2023-07-19 15:18:41 -04:00
..
basics Initial View Transition Support (#7511) 2023-07-19 15:18:41 -04:00
blog [ci] release (#7699) 2023-07-19 09:32:32 +02:00
component [ci] release (#7699) 2023-07-19 09:32:32 +02:00
deno [ci] release (#7699) 2023-07-19 09:32:32 +02:00
framework-alpine [ci] release (#7699) 2023-07-19 09:32:32 +02:00
framework-lit [ci] release (#7699) 2023-07-19 09:32:32 +02:00
framework-multiple [ci] release (#7699) 2023-07-19 09:32:32 +02:00
framework-preact [ci] release (#7699) 2023-07-19 09:32:32 +02:00
framework-react [ci] release (#7699) 2023-07-19 09:32:32 +02:00
framework-solid [ci] release (#7699) 2023-07-19 09:32:32 +02:00
framework-svelte [ci] release (#7699) 2023-07-19 09:32:32 +02:00
framework-vue [ci] release (#7699) 2023-07-19 09:32:32 +02:00
hackernews [ci] release (#7699) 2023-07-19 09:32:32 +02:00
integration [ci] release (#7699) 2023-07-19 09:32:32 +02:00
middleware [ci] release (#7699) 2023-07-19 09:32:32 +02:00
minimal [ci] release (#7699) 2023-07-19 09:32:32 +02:00
non-html-pages [ci] release (#7699) 2023-07-19 09:32:32 +02:00
portfolio Initial View Transition Support (#7511) 2023-07-19 15:18:41 -04:00
ssr [ci] release (#7699) 2023-07-19 09:32:32 +02:00
with-markdoc [ci] release (#7699) 2023-07-19 09:32:32 +02:00
with-markdown-plugins [ci] release (#7699) 2023-07-19 09:32:32 +02:00
with-markdown-shiki [ci] release (#7699) 2023-07-19 09:32:32 +02:00
with-mdx [ci] release (#7699) 2023-07-19 09:32:32 +02:00
with-nanostores [ci] release (#7699) 2023-07-19 09:32:32 +02:00
with-tailwindcss [ci] release (#7699) 2023-07-19 09:32:32 +02:00
with-vite-plugin-pwa [ci] release (#7699) 2023-07-19 09:32:32 +02:00
with-vitest [ci] release (#7699) 2023-07-19 09:32:32 +02:00
README.md .md only: npm init astro --> npm create astro (#4760) 2022-09-16 12:40:06 -05:00

Astro Examples Library

The easiest way to check out one of these examples on your machine is by running this command in an empty directory:

npm create astro@latest -- --template [EXAMPLE_NAME]

Community Examples

Visit awesome-astro for a full list of community examples. You can use npm create astro@latest to check out any community examples:

npm create astro@latest -- --template [GITHUB_USER]/[REPO_NAME]

Paths to examples nested inside of a repo are also supported:

npm create astro@latest -- --template [GITHUB_USER]/[REPO_NAME]/path/to/example