32 | ```
33 |
34 | ## Handling swup hooks
35 |
36 | To register handlers for swup's hooks inside your Alpine components, you need to
37 | prepend `swup` to all hook names. You can access swup's visit object using the
38 | `detail` property on Alpine's `$event` magic. For example, hooking into `page:view`
39 | would look like this:
40 |
41 | ```html
42 |
7 |
8 | {% if (eleventyNavigation) and (eleventyNavigation.key) %}
9 | {% set children = collections.all | eleventyNavigation(eleventyNavigation.key) %}
10 | {% if children | length %}
11 |
86 |
--------------------------------------------------------------------------------
/src/docs/other/minimal-reproduction.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Minimal Reproductions
4 | eleventyNavigation: false
5 | description: Please include a Minimal Reproduction
6 | permalink: /other/minimal-reproductions/
7 | ---
8 |
9 | # How to Create a Minimal Reproduction
10 |
11 | The swup maintainers may ask you to create a "minimal reproduction" or "reduced test case" when
12 | asking for help or reporting an issue. **Issues without a reproduction may be temporarily closed.** Here's why:
13 |
14 | ## Why you should create a minimal reproduction
15 |
16 | Providing a minimal reproduction means **everyone puts in a fair amount of effort**.
17 |
18 | By creating a minimal reproduction, you enable us to:
19 |
20 | - Fix your bug faster
21 | - Work on your feature request faster
22 | - Confirm the cause of the behavior
23 |
24 | ## What is a minimal reproduction?
25 |
26 | A minimal reproduction is a **simplified version of your code to demonstrate a problem**. It should use
27 | the smallest amount of code and configuration needed to clearly show the problem. All features and
28 | dependencies not related to the issue should be removed.
29 |
30 | A minimal reproduction is the best way to help people that want to help *you*.
31 |
32 | ## How to create a minimal reproduction
33 |
34 | 1. Create a new project. See below for suggested services for hosting it.
35 | 2. Install swup and any plugins needed to demonstrate the problem.
36 | 3. Add the code needed to recreate the error you’re seeing.
37 | 4. Strip away unrelated code to focus solely on the issue.
38 | 5. Confirm that the error can be consistently reproduced with your provided code.
39 | 6. Publish the project and provide a link to it when creating an issue.
40 |
41 | ## Where to host a minimal reproduction
42 |
43 | You can use one of the many available online IDEs to create a reproduction, e.g.
44 | [CodeSandbox](https://codesandbox.io/p/sandbox/swup-4-minimal-reproduction-template-n6kgnp),
45 | [Replit](https://replit.com/@swupjs/Swup-Test-Case-Template), or
46 | [StackBlitz](https://stackblitz.com/). The important part is that it's easily accessible to
47 | maintainers and doesn't require manual setup.
48 |
49 | ## Even better, submit a test case or a solution!
50 |
51 | As Rich Harris [points out](https://gist.github.com/Rich-Harris/88c5fc2ac6dc941b22e7996af05d70ff#better-still-file-a-test-case-or-a-fix), maintainers appreciate it when you **contribute test cases and solutions through pull requests**. Straightforward fixes (that meet the project's code standards and pass the CI) are highly valued.
52 |
53 | ## ”But it's too much work to create a minimal reproduction“ 🥵
54 |
55 | **It’s almost impossible to fix a bug without first being able to reliably reproduce it**. That's why we prioritize working on issues with a minimal reproduction, as they allow us to spend our time more efficiently.
56 |
57 | ## “But I already described everything in the issue” 😒
58 |
59 | We appreciate you describing the issue in detail! However, **a minimal reproduction will make sure
60 | that your description matches the actual behavior**, by removing everything but the necessary code.
61 |
--------------------------------------------------------------------------------
/src/docs/api/markup.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Markup
4 | eleventyNavigation:
5 | key: Markup
6 | parent: API
7 | order: 6
8 | description: Influence swup behavior with DOM attributes
9 | permalink: /api/markup/
10 | ---
11 |
12 | # Markup
13 |
14 | Control swup's behavior using specific DOM attributes on links and other elements.
15 |
16 | ## Ignore links
17 |
18 | Swup can be disabled on a per-link basis by annotating a link with `data-no-swup`.
19 |
20 | ```html
21 | Ignored
22 | ```
23 |
24 | Add the attribute to a common container to ignore all links within.
25 |
26 | ```html
27 |
28 | Ignored
29 | Ignored
30 |
31 | ```
32 |
33 | ## Set a custom animation
34 |
35 | Set a custom animation for a specific link by adding a `data-swup-animation` attribute.
36 |
37 | ```html
38 |
39 | ```
40 |
41 | This will add a `.to-{animation}` class on the HTML element during the visit you can
42 | use to specify custom transition styles:
43 |
44 | ```html
45 |
46 | ```
47 |
48 | ```css
49 | html.is-changing .transition-page {
50 | /* normal transition styles */
51 | }
52 | html.is-changing.to-slide .transition-page {
53 | /* slide transition styles */
54 | }
55 | ```
56 |
57 | Add the attribute to a common container to set an animation for all links within. Animations defined
58 | on a link take precedence over animations defined on a parent.
59 |
60 | ```html
61 |
62 | Slide
63 | Slide
64 | Fade
65 |
66 | ```
67 |
68 | ## Persist element state
69 |
70 | Some elements need to keep their state between page loads, e.g. autoplaying videos, animations or
71 | countdowns. Swup will transfer an element to the next page — preserving its content, data and
72 | event listeners — if it has a `data-swup-persist` attribute and a matching element is found on the
73 | next page. Elements are matched using the unique value of the persist attribute.
74 |
75 | ```html
76 |
26 | 
4 |