https://github.com/daun/astro-swup-playground

Playground for testing and prototyping swup features
https://github.com/daun/astro-swup-playground

astro playground swup

Last synced: 4 months ago
JSON representation

Playground for testing and prototyping swup features

• Host: GitHub
• URL: https://github.com/daun/astro-swup-playground
• Owner: daun
• Created: 2023-07-25T23:16:26.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-07-19T14:06:37.000Z (7 months ago)
• Last Synced: 2024-07-19T17:40:39.327Z (7 months ago)
• Topics: astro, playground, swup
• Language: Astro
• Homepage:
• Size: 9.11 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Astro Swup Playground

Playground for testing and prototyping [swup](https://swup.js.org) features and plugins.

![Swup Playground Screenshot](./assets/screenshot.png)

## Testing 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](https://docs.npmjs.com/cli/v8/commands/npm-link) or

[yalc](https://github.com/wclr/yalc/) and import as usual from the package.

```sh

cp ./preload-plugin/dist/index.module.js ./astro-swup-playground/src/packages/preload-plugin.js

```

```js

import SwupPreloadPlugin from '../packages/preload-plugin';

```

## Testing the @swup/astro integration

This project has the official swup integration installed, but disabled. To test the integration:

1. In `Layout.astro`, comment the router script ``

2. In `astro.config.mjs`, uncomment the swup integration import and initilisation

## Commands

| 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                     |