Playground for testing and prototyping swup features and plugins.
- Swup is initialised in
src/modules/router.ts. - Transition styles are defined in
src/styles/transitions.css - Feature checks are defined in
src/pages
For simple tests, copy the dist module file of swup or any plugin into the packages folder and
import it instead of the official package. For more realistic tests, use
npm link or
yalc and import as usual from the package.
cp ./preload-plugin/dist/index.module.js ./astro-swup-playground/src/packages/preload-plugin.jsimport SwupPreloadPlugin from '../packages/preload-plugin';This project has the official swup integration installed, but disabled. To test the integration:
- In
Layout.astro, comment the router script<script src="/src/modules/router"></script> - In
astro.config.mjs, uncomment the swup integration import and initilisation
| Command | Action |
|---|---|
npm install |
Installs dependencies |
npm run dev |
Starts local dev server at localhost:3000 |
npm run build |
Build your production site to ./dist/ |
npm run preview |
Preview your build locally, before deploying |
npm run astro ... |
Run CLI commands like astro add, astro check |
npm run astro -- --help |
Get help using the Astro CLI |