From 5efdf5e457d531e50779ab969511a9b1bb1f9f10 Mon Sep 17 00:00:00 2001 From: Martin Trapp <94928215+martrapp@users.noreply.github.com> Date: Wed, 25 Sep 2024 12:24:05 +0200 Subject: [PATCH] Signal (#194) * new: turn-signal * renaming and restructuring * updates * merge * bumps * update --- .changeset/beige-chairs-shake.md | 5 + README.md | 5 +- components/TurnSignal.astro | 29 ++ components/TurnSignal.d.ts | 1 + package-lock.json | 308 ++++++++++++++++++---- package.json | 11 +- test/fixture/src/pages/signal/_nav.astro | 5 + test/fixture/src/pages/signal/one.astro | 32 +++ test/fixture/src/pages/signal/three.astro | 1 + test/fixture/src/pages/signal/two.astro | 1 + test/vt-bot.spec.ts | 22 ++ 11 files changed, 356 insertions(+), 64 deletions(-) create mode 100644 .changeset/beige-chairs-shake.md create mode 100644 components/TurnSignal.astro create mode 100644 components/TurnSignal.d.ts create mode 100644 test/fixture/src/pages/signal/_nav.astro create mode 100644 test/fixture/src/pages/signal/one.astro create mode 120000 test/fixture/src/pages/signal/three.astro create mode 120000 test/fixture/src/pages/signal/two.astro diff --git a/.changeset/beige-chairs-shake.md b/.changeset/beige-chairs-shake.md new file mode 100644 index 0000000..d1be291 --- /dev/null +++ b/.changeset/beige-chairs-shake.md @@ -0,0 +1,5 @@ +--- +'astro-vtbot': minor +--- + +Introducing a new tool for your transition from `` to `@view-transitions {navigation: auto}`: The `` component enables seamless integration of forward and backward animations from `transition:animate` in cross-document transitions. Sync the direction of your animations with browser history navigation, or even with the page order of your site, if you prefer! diff --git a/README.md b/README.md index c05afb5..bf5b31c 100644 --- a/README.md +++ b/README.md @@ -15,10 +15,9 @@ A current deployment of tech demos and the documentation can be found at https:/ ## !!! NEW TRICKS ✨ IN THE BAG 👜 !!! +New component for cross-document view transitions: The `` enables Astro's forward/backward animations provided by `transition:animate` to work with native cross-document `@view-transition{}`. Slide right and left as you traverse the browser's history! Optionally you can configure the component with a total order of your site's pages, allowing it to automatically detect the transition direction. -Bug fix for the Linter and an update of the InspectionChamber! - -For details, see the [CHANGELOG of the Bag](https://github.com/martrapp/astro-vtbot/blob/main/CHANGELOG.md) and of the [CHANGELOG of the InstructionChamber](https://github.com/vtbag/inspection-chamber/blob/main/CHANGELOG.md) +For details, see the [CHANGELOG of the Bag](https://github.com/martrapp/astro-vtbot/blob/main/CHANGELOG.md) and of the [CHANGELOG of the InstructionChamber](https://github.com/vtbag/inspection-chamber/blob/main/CHANGELOG.md) for minor improvements regarding the Chamber. ## Recently Learned Tricks ## diff --git a/components/TurnSignal.astro b/components/TurnSignal.astro new file mode 100644 index 0000000..2c7fc42 --- /dev/null +++ b/components/TurnSignal.astro @@ -0,0 +1,29 @@ +--- +import signalURL from '@vtbag/turn-signal?url'; +import forcedTraversalURL from '@vtbag/turn-signal/forced-traversal?url'; +export interface Props { + selector?: string; + forcedTraversal?: boolean; + directionTypes?: string; + directionAttribute?: string; +} + +const { + selector, + forcedTraversal, + directionTypes = '', + directionAttribute = 'data-astro-transition, back, forward, forward', +} = Astro.props; +--- + +{forcedTraversal && + + {Astro.url.pathname} + + +

{Astro.url.pathname}

+