Skip to content

Commit

Permalink
opti
Browse files Browse the repository at this point in the history
  • Loading branch information
martrapp committed Dec 30, 2024
1 parent 3721e84 commit 5389d10
Show file tree
Hide file tree
Showing 6 changed files with 30 additions and 8 deletions.
2 changes: 1 addition & 1 deletion astro.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import type { Badge } from 'node_modules/@astrojs/starlight/schemas/badge';
// https://astro.build/config
export default defineConfig({
image: { remotePatterns: [{ protocol: "https" }] },
devToolbar: { enabled: false },
devToolbar: { enabled: true },
site: 'https://vtbag.dev',
compressHTML: false,
redirects: {
Expand Down
17 changes: 13 additions & 4 deletions src/content/docs/tools/turn-signal.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,18 @@ The Turn-Signal scripts are designed for use with cross-document view transition

import { Card } from "@astrojs/starlight/components";
import { CardGrid } from "@astrojs/starlight/components";
import { Image } from 'astro:assets';
import viewer from "@/assets/viewer-demo.png"
import fishpond from "@/assets/pond.png"
import forced from "@/assets/ft.png"
import dark_signal from "@/pages/demo-explainer/_TurnSignalDemo-dark.png"
import light_signal from "@/pages/demo-explainer/_TurnSignalDemo-light.png"

<CardGrid>
<Card title="Turn-Signal Demo">
<div id="signal">[<span class="light:sl-hidden">![Turn Signal Demo](@/pages/demo-explainer/_TurnSignalDemo-dark.png)</span><span class="dark:sl-hidden">![Turn Signal Demo](@/pages/demo-explainer/_TurnSignalDemo-light.png)</span>](/signal-demo/bag/)</div>

<span id="signal"><a href="/signal-demo/bag/" data-vtbag-link-types="same/open"><span class="light:sl-hidden"><Image src={dark_signal} alt="signal" data-zoom-off/></span><span class="dark:sl-hidden"><Image src={light_signal} alt="signal" data-zoom-off/></span></a></span>

Try the [Turn-Signal Demo](/signal-demo/bag/) to see the _directions script_ in action. Click on the icons to navigate the pages. Then use your browser's back button to return.

Notice how the slide animation changes direction based on the order of the pages.
Expand All @@ -63,7 +71,7 @@ Notice how the slide animation changes direction based on the order of the pages

<Card title="Image Viewer Demo">

<div id="viewer">[![Image Viewer Demo](@/assets/viewer-demo.png)](/viewer-demo/)</div>
<div id="viewer"><a href="/viewer-demo/" data-vtbag-link-types="same/open"><Image src={viewer} alt="viewer" data-zoom-off/></a></div>

The [Image Viewer Demo](/viewer-demo/) showcases various animations for the same page: sliding from right or left, resizing, and changing its aspect ratio.

Expand All @@ -72,7 +80,7 @@ Thanks to the _link-types_ script, you can control which animation to use by add
</Card>

<Card title="Fish Pond Demo">
<div id="fishpond">[![Fishpond Demo](@/assets/pond.png)](/link-demo/)</div>
<div id="fishpond"><a href="/link-demo/" data-vtbag-link-types="same / open"><Image src={fishpond} alt="fishpond" data-zoom-off/></a></div>

Looking for a more dramatic example of how to control view transition types with your links?

Expand All @@ -84,7 +92,8 @@ Explore the pond to learn more about how the demo was implemented.

<Card title="Forced Traversal">

<div id="forced">[![forced navigatiom](@/assets/ft.png)](https://events-3bg.pages.dev/signal-demo/forcedTraversal/blog/)</div>
<div id="forced"><a href="https://events-3bg.pages.dev/signal-demo/forcedTraversal/blog/" data-vtbag-link-types="same / open"><Image src={forced} alt="forced transition" data-zoom-off/></a></div>


To see the _forced traversal_ script in action alongside the _directions script_, head over to the [Vtbot Demo](https://events-3bg.pages.dev/signal-demo/forcedTraversal/blog/)! No matter how many times you click the tabs in the header, your browser history will always have just three or less entries.

Expand Down
4 changes: 4 additions & 0 deletions src/pages/link-demo/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -100,4 +100,8 @@ import WaveText from "./_WaveText.astro";
font-size: 2rem;
}
}

:active-view-transition-type(open)::view-transition-group(*) {
animation-duration: 1s;
}
</style>
2 changes: 1 addition & 1 deletion src/pages/signal-demo/_Layout.astro
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const images = [bag, chamber, crossing, signal, shaft];
<header style="display:flex">
<div style="width: 30vw"><h2>Turn-Signal Demo</h2></div>
<div
style="view-transition-name: signal; width: calc(100% - 100px); display:flex; overflow: auto; align-items:center"
style="view-transition-name: signal; width: fit-content; display:flex; overflow: auto; align-items:center"
>
{
pages.map((page, idx) => (
Expand Down
5 changes: 5 additions & 0 deletions src/pages/signal-demo/bag.astro
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,8 @@ import bag from "../../assets/cards/bag.png";
<Layout title="The Bag of Tricks">
<a href="/vtbag/"><Image src={bag} alt="The Bafg of Tricks" /></a>
</Layout>
<style is:global>
:active-view-transition-type(open)::view-transition-group(*) {
animation-duration: 1s;
}
</style>
8 changes: 6 additions & 2 deletions src/pages/viewer-demo/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,14 @@ import i3 from "./_200_3.webp";
fine grained control over <b>browser-native cross-document</b> view
transitions. Click the left image!
</p>
<div style="view-transition-name: viewer;">
<span style="view-transition-name: viewer;width: fit-content">
<a href="/viewer-demo/1/"
><Image src={i1} alt="Image 1" width="300" height="200" /></a
><a href="/viewer-demo/2/">
<Image src={i2} alt="Image 2" width="300" height="200" /></a
><a href="/viewer-demo/3/">
<Image src={i3} alt="Image 3" width="300" height="200" /></a>
</div><p>
</span><p>
[Return to the <a href="/tools/turn-signal/#link-types"
>turn-signal page</a
>]
Expand Down Expand Up @@ -55,4 +55,8 @@ import i3 from "./_200_3.webp";
a:nth-of-type(3) img {
view-transition-name: img3;
}
:active-view-transition-type(open)::view-transition-group(*) {
animation-duration: 1s;
}

</style>

0 comments on commit 5389d10

Please sign in to comment.