33 |
34 |
35 |
36 |
37 |
38 |
43 |
48 |
--------------------------------------------------------------------------------
/src/content.config.ts:
--------------------------------------------------------------------------------
1 | import { defineCollection, z } from 'astro:content';
2 | import { docsSchema } from '@astrojs/starlight/schema';
3 | import { docsLoader } from '@astrojs/starlight/loaders';
4 | import { blogSchema } from 'starlight-blog/schema';
5 |
6 | export const collections = {
7 | docs: defineCollection({
8 | loader: docsLoader(),
9 | schema: docsSchema({
10 | extend: (context) =>
11 | blogSchema(context).merge(z.object({ firstPublished: z.date().optional() })),
12 | }),
13 | }),
14 | };
15 |
--------------------------------------------------------------------------------
/src/content/docs/blog/demo-post.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Demo Blog Post
3 | date: 2023-07-24
4 | authors:
5 | - name: martrapp
6 | picture: https://avatars.githubusercontent.com/u/94928215?v=4
7 | url: https://martr.app
8 | - name: trueberryless
9 | picture: https://avatars.githubusercontent.com/u/99918022?v=4
10 | url: https://trueberryless.org/
11 | ---
12 |
13 | ## What is This Page About?
14 |
15 | This page features both, the `starlight-blog` and the `starlight-image-zoom` integrations. Both are on vthe friendly neighbor list of the [Bag's guide for Starlight](/jotter/starlight/guide/). So the purpose of this page is to early detect degression in the Bag's view transition support for Starlight.
16 |
17 | ## An Image to Zoom
18 |
19 | 
20 |
21 | ## Jotter
22 |
23 | A link [back to the Jotter](/jotter/).
24 |
25 | ## Thanks!
26 | Thank you very much, [@trueberryless](https://trueberryless.org), for pointing out the issue where the two packages override each other and for taking care of the solution!
27 |
--------------------------------------------------------------------------------
/src/content/docs/jotter/api/BasicVt.astro:
--------------------------------------------------------------------------------
1 |
2 |
This is the document before the view transition
3 |
And this is the document after the view transition
13 |
14 | These are generic components that **do not require specific themes**. There are also [Starlight specific components](/jotter/starlight/guide/) in The Bag.
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/content/docs/jotter/demos.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Tech-Demos
3 | description: astro-vtbot provides multiple tech demos to demonstrate the use of view transitions in Astro projects
4 | ---
5 | import BoT from "/src/components/BoT.astro"
6 | import DemosAndComponents from "/src/components/DemosAndComponents.astro"
7 |
8 | The shows various aspects of view transitions with small demos. Click the image to dive into the view transition demos.
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/src/content/docs/jotter/history.css:
--------------------------------------------------------------------------------
1 | .container {
2 | display: flex;
3 | flex-wrap: wrap;
4 | }
5 |
6 | .item {
7 | display: flex;
8 | flex-direction: column;
9 | justify-content: center;
10 | align-items: center;
11 | width: 100%;
12 | border-top: 1pt dashed #888;
13 | }
14 |
15 | @media screen and (min-width: 50rem) {
16 | .item {
17 | flex-direction: row;
18 | border-top: 0pt;
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/content/docs/jotter/snippets/css-tricks-pitfalls.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: CSS Tricks & Pitfalls
3 | description: Tips and Tricks on using view transitions in Astro
4 | ---
5 |
6 | ## Testing for View Transition Support in CSS
7 |
8 | You can test whether the user's browser has native support for view transition like this:
9 |
10 | ```css
11 | /* has native support for view transitions */
12 | @supports(view-transition-name: a) {
13 | ...
14 | }
15 | /* does not natively support view transitions */
16 | @supports not(view-transition-name: a) {
17 | ...
18 | }
19 | ```
20 |
21 | ## Ignored Style Rules
22 |
23 | Browsers that do not support view transitions may cough and choke when fed CSS for view transitions.
24 |
25 | While it is apparent that they do not support the `::view-transition-*` pseudo-elements, some other consequences are not so obvious.
26 |
27 | * Setting the `view-transition-name` CSS property is not harmful in browsers without support for view transitions. But the property is simply ignored, and you cannot access it in the DOM.
28 |
29 | * In JavaScript, you should not access `element.style.viewTransitionName` or similar accessors to view transition CSS properties if the browser does not support view transitions natively. This will likely throw errors.
30 |
31 |
32 | * Do not combine selectors with view transition properties with normal selectors in CSS rules. The browser will likely ignore the entire rule, including the part that does not contain a view transition. Here is an example:
33 |
34 | ```css title="pitfall.css" {2}
35 | ::view-transition-group(main),
36 | body main {
37 | ...
38 | }
39 | ```
40 | Although the highlighted section is correct, browsers may completely ignore the entire rule due to the unknown pseudo element selector.
41 |
42 |
--------------------------------------------------------------------------------
/src/content/docs/jotter/snippets/things-to-write-about.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Things to write about when I find the time to do so and there are no other more important things to do
3 | description: The bag-log of The Bag
4 | ---
5 | ## Other's have a Backlog, I've got a *👜 Baglog ✨* ;-)
6 |
7 | * Why does it not simply work when I add `transition-*` directives to an Astro component like in ``
8 |
9 | * How to combine CSS for view transitions with media queries
10 |
11 | * How to have a sticky video from the moment on when you first came across that page with the video
12 |
13 | * A Common abstraction across Astro's view transitions and Level 2 View Transition API?
14 |
15 | * How to order scripts plus ideas about a plugin system for view transitions
16 |
17 | * how to drag styles for persisted elements to the next page
18 |
19 | * how to optimize view transitions by clipping the images (is that possible?) and removing transitions that are off-viewport
20 |
21 | * how to make a decent loading screen that covers the target page on load and is than withdrawn (with or without view transitions)
22 |
23 | * timing behavior of view transitions (rendering does not start before the whole DOM is loaded and parsed)
24 |
25 | * how to synchronize JavaScript animations with view transitions
26 |
27 | * how to craft scripts and components that can be used with and without view transitions
28 |
29 | * What it is worth to know that `view-transition-name` is discretely animatable
30 |
31 | * Explain the stacking order of new and old images
32 |
33 | * how to have the view transition move **behind** some elements in the front?
34 |
35 | * how to set break points to investigate the pseudo elements
36 |
37 | * add that still missing sections on how web components can make your life easier when using view transitions
38 |
39 | * different order of components / eventListeners in DEV & PROD and how to fix that
40 |
41 | * Persisting elements as an alternative to script re-initialization, especially dynamically created ones e.g. chat apps
42 |
--------------------------------------------------------------------------------
/src/content/docs/jotter/starlight/inner-workings/splash1.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Splash1
3 | template: splash
4 | hero:
5 | title: 'Bag of Tricks'
6 | tagline: If it doesn't move, it's probably unmoved.
7 | image:
8 | alt: The Bag
9 | dark: /public/favicon.svg
10 | light: /public/bot1.png
11 | actions:
12 | - text: Back to the Jotter
13 | link: /jotter/starlight/inner-workings/
14 | icon: right-arrow
15 | variant: primary
16 | - text: Jump to another splash screen
17 | link: /jotter/starlight/inner-workings/splash2/
18 | icon: starlight
19 | ---
20 |
21 |
22 |
--------------------------------------------------------------------------------
/src/content/docs/jotter/starlight/inner-workings/splash2.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Splash2
3 | template: splash
4 | hero:
5 | title: 'The Bag of Tricks'
6 | tagline: If it doesn't move, it's probably unmoved.
7 | image:
8 | alt: The Fish!
9 | file: /src/assets/fi.png
10 | actions:
11 | - text: Back to the Jotter
12 | link: /jotter/starlight/inner-workings/
13 | icon: right-arrow
14 | variant: primary
15 | - text: Jump to another splash screen
16 | link: /jotter/starlight/inner-workings/splash1/
17 | icon: starlight
18 | ---
19 |
20 |
--------------------------------------------------------------------------------
/src/content/docs/jotter/toolbar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/martrapp/astro-vtbot-website/0fa7455675b068e055cad16347d9c98fb376deb3/src/content/docs/jotter/toolbar.png
--------------------------------------------------------------------------------
/src/css/light-dark.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --vtbot-global-accent: rgb(175, 104, 16);
3 | background: radial-gradient(circle, #d8e0e8 50%, #f0f8ff 100%);
4 | --vtbot-gradbg: linear-gradient(300deg, #fff8, #bdf8);
5 | --vtbot-background-color: whitesmoke;
6 | background-color: var(--vtbot-background-color);
7 | --vtbot-color: darkslategray;
8 | --vtbot-accent: darkblue;
9 | color: var(--vtbot-color);
10 | --vtbot-table-background-color: #ececec;
11 | }
12 | .dark {
13 | display: none;
14 | }
15 | .light {
16 | display: block;
17 | }
18 | @media (prefers-color-scheme: dark) {
19 | .light {
20 | display: none;
21 | }
22 | .dark {
23 | display: block;
24 | }
25 | :root {
26 | background: radial-gradient(circle, #123 50%, #000 100%);
27 | --vtbot-gradbg: linear-gradient(300deg, rgba(51, 47, 47, 0.8), #012c);
28 | --vtbot-background-color: #023;
29 | --vtbot-color: #abc;
30 | --vtbot-accent: #adf;
31 | --vtbot-table-background-color: rgb(37, 41, 45);
32 | }
33 |
34 | .shiki,
35 | .shiki span {
36 | color: var(--shiki-dark) !important;
37 | background-color: var(--shiki-dark-bg) !important;
38 | /* Optional, if you also want font styles */
39 | font-style: var(--shiki-dark-font-style) !important;
40 | font-weight: var(--shiki-dark-font-weight) !important;
41 | text-decoration: var(--shiki-dark-text-decoration) !important;
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/dom-view-transitions-level2.d.ts:
--------------------------------------------------------------------------------
1 | declare global {
2 | type UpdateCallback = undefined | (() => void | Promise);
3 | type StartViewTransitionParameter = { types?: string[] | Set; update?: UpdateCallback };
4 |
5 | interface Document {
6 | startViewTransition?(param?: StartViewTransitionParameter | UpdateCallback): ViewTransition;
7 | }
8 | interface PageSwapEvent extends Event {
9 | viewTransition?: ViewTransition;
10 | activation?: NavigationActivation;
11 | }
12 | interface PageRevealEvent extends Event {
13 | viewTransition?: ViewTransition;
14 | }
15 |
16 | interface WindowEventMap {
17 | pageswap: PageSwapEvent;
18 | pagereveal: PageRevealEvent;
19 | }
20 |
21 | interface NavigationActivation {
22 | entry: NavigationHistoryEntry;
23 | from: NavigationHistoryEntry;
24 | navigationType: NavigationTypeString;
25 | }
26 | interface AnimationEffect {
27 | target: HTMLElement;
28 | pseudoElement?: string;
29 | getKeyframes: () => Keyframe[];
30 | }
31 |
32 | interface ViewTransition {
33 | types?: Set;
34 | }
35 | interface Window {
36 | navigation?: Navigation;
37 | }
38 | interface Navigation {
39 | activation: NavigationActivation;
40 | }
41 | }
42 | export {};
43 |
--------------------------------------------------------------------------------
/src/env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 |
--------------------------------------------------------------------------------
/src/later/random.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Random Bits
3 | ---
4 |
5 | From time to time, I stumble across things that might be worth explaining in more detail here in the jotter. Before I forget them again, I at least post them here. Feel free to add any other topics you are interested in here.
6 |
7 | * `view-transition-name` is discretely animatable
8 |
9 | * Stacking order of elements
10 |
11 |
--------------------------------------------------------------------------------
/src/later/styling.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Styling
3 | ---
4 |
5 | This part of the Jotter gives an overview of how styling view transitions works in Astro.
6 |
7 | If you use the `transition:*` directives
8 |
9 |
--------------------------------------------------------------------------------
/src/later/vt-emu.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: How Astro emulates view transitions
3 | ---
4 |
--------------------------------------------------------------------------------
/src/layouts/CircleLayout.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import CircleAnimation from '../components/CircleAnimation.astro';
3 | import Layout from './Layout.astro';
4 |
5 | interface Props {
6 | background: string;
7 | }
8 | const { background } = Astro.props;
9 | ---
10 |
11 |
12 |
13 |
14 |
15 |
16 |
24 |
--------------------------------------------------------------------------------
/src/layouts/GalleryMdxLayout.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import Gallery from '../components/Gallery.astro';
3 | import AutoNameSelected from 'astro-vtbot/components/AutoNameSelected.astro';
4 | import NoScroll from 'astro-vtbot/components/NoScroll.astro';
5 | import MdxLayout from './MdxLayout.astro';
6 | ---
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/layouts/Layout.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import { ClientRouter } from 'astro:transitions';
3 | export interface Props {
4 | title: string;
5 | pageFindIgnore?: boolean;
6 | background?: string;
7 | }
8 |
9 | const { title, background = '', pageFindIgnore = false } = Astro.props;
10 | ---
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | {title + ' | Bag of Tricks'}
21 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/src/layouts/LibraryMdxLayout.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import MdxLayout from './MdxLayout.astro';
3 | const { frontmatter } = Astro.props;
4 | ---
5 |
6 |
7 |
13 |
14 |
15 |
24 |
--------------------------------------------------------------------------------
/src/layouts/PrefetchLayout.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import Layout from './Layout.astro';
3 | interface Props {
4 | background: string;
5 | title: string;
6 | }
7 | const { title, background } = Astro.props;
8 | ---
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/src/layouts/ProgressBarLayout.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import BrakePad from 'astro-vtbot/components/BrakePad.astro';
3 | import ProgressBar from 'astro-vtbot/components/ProgressBar.astro';
4 | import MdxLayout from './MdxLayout.astro';
5 | ---
6 |
7 |
8 | {
9 | /* This is the custom component.
10 | * It can be put into the or the of your page
11 | */
12 | }
13 |
14 |
15 | {/* To observe the effect it is necessary to simulate a 2000ms loading time */}
16 |
17 |
18 |
19 |
20 |
21 | {/* You can style the progress bar by defining the swup-progress-bar class */}
22 |
27 |
--------------------------------------------------------------------------------
/src/layouts/ScrollToTopLayout.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import MdxLayout from './MdxLayout.astro';
3 |
4 | interface Props {
5 | title: string;
6 | }
7 | const { title } = Astro.props;
8 | ---
9 |
10 |
11 |
12 |
13 |
14 |
27 |
36 |
--------------------------------------------------------------------------------
/src/layouts/iframes/vtscrollLayout.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import { ClientRouter, slide } from 'astro:transitions';
3 | import PageOffset from 'astro-vtbot/components/PageOffset.astro';
4 | export interface Props {
5 | theme: 'light' | 'dark';
6 | duration: string;
7 | opt: boolean |undefined
8 | }
9 |
10 | const { theme, duration, opt } = Astro.props;
11 | const none = duration.startsWith('0');
12 | ---
13 |
14 |
15 |
16 |
17 |
18 | {opt && }
19 |
20 |
21 |
Your browser doesn't support native view transitions. All three examples should look the same as Astro's simulation doesn't implement morph animations.
4 |
5 | The reusable components of the Bag of Tricks are published on [npm](https://www.npmjs.com/package/astro-vtbot). Install the node module in your astro project with **`npm install astro-vtbot`** or [install as an Astro integration!](/library/Installation/). The package is small because it only contains these reusable components, but not the examples and documentation pages. You can find the examples, documentation and technical demos on [github](https://www.github.com/martrapp/astro-vtbot). Furthermore, the Bag of Tricks is not a library that you load completely into the browser, but a collection of independent components. You can use/load just the ones you need.
6 |
7 |
23 |
--------------------------------------------------------------------------------
/src/mdx/demos.mdx:
--------------------------------------------------------------------------------
1 | import BoT from '/src/components/BoT.astro'
2 |
3 | The provides components that demonstrate Astro's View Transition API. Some of these are technical demos, some are useful tools, and some will evolve into reusable components that you can use in your own project to handle edge cases that go beyond Astro's standard features. The code of the Bag of Tricks is on [github:martrapp/astro-vtbot](https://github.com/martrapp/astro-vtbot)
4 |
5 |
--------------------------------------------------------------------------------
/src/mdx/hero-prefetch/overview.mdx:
--------------------------------------------------------------------------------
1 | ```javascript title="hero-prefetch.js"
2 | document.addEventListener('astro:before-preparation', e => {
3 |
4 | if (e.from.href.endsWith('/overview/')) {
5 | const originalLoader = event.loader;
6 | event.loader = async () => {
7 | await originalLoader();
8 | const img = new Image();
9 | img.src = event.newDocument.querySelector('img[class*="hero"]').src;
10 | await new Promise((resolve) => {
11 | img.onload = img.onerror = resolve
12 | });
13 | };
14 | }
15 | });
16 | ```
17 |
--------------------------------------------------------------------------------
/src/mdx/loading/one.mdx:
--------------------------------------------------------------------------------
1 |
2 | # Pocycli!
3 | ## Pocycli = Publish or contribute [your custom](/library/LoadingIndicator/#Pocycli) loading indicator!
4 |
5 | - ProgressBar based on swup's Progress Bar Plugin.
6 | Idea by [@kb](https://github.com/k16e-me)
7 | - An alternative styling for the same component
8 |
9 | There is still plenty of free space here. How about contributing your own idea?
10 | - [your-idea](/library/LoadingIndicator/#Pocycli) contributed by [https://github.com/<your-name>](https://github.com/)
11 |
--------------------------------------------------------------------------------
/src/mdx/loading/two.mdx:
--------------------------------------------------------------------------------
1 |
2 | ### Coding
3 |
4 | The loading indicator you see in the top right corner on this page is the default loading indicator of the 👜 Bag of Tricks ✨.
5 | It is automatically activated if you install astro-vtbot as an astro integration.
6 |
7 | The default icon that is displayed is the favicon of the current page.
8 | Of course, you can tweak the look & feel of the <LoadingIndicator/> component to your liking.
9 |
10 | If you want to know what happens behind the scenes, here is a rough sketch of the code that is used to display a loading indicator if you use the reusable `` component or the TypeScript pendant `loading-indicator.ts`:
11 |
12 | ```javascript title="loading-indicator.js"
13 | document.addEventListener(TRANSITION_PAGE_LOAD, doInit); // optional: dynamically setup the indicator
14 | document.addEventListener(TRANSITION_BEFORE_PREPARATION, doShow); // show the indicator
15 | document.addEventListener(TRANSITION_BEFORE_SWAP, doHide); // hide the indicator
16 | ```
17 |
--------------------------------------------------------------------------------
/src/mdx/morph/three.mdx:
--------------------------------------------------------------------------------
1 | ```astro title="Layout.astro"
2 | ...
3 |
29 | ```
30 |
--------------------------------------------------------------------------------
/src/mdx/no-reset/four.mdx:
--------------------------------------------------------------------------------
1 | ```javascript title="no-reset.js"
2 | document.addEventListener('astro:before-swap', ev => {
3 |
4 | const pathname=ev.from.pathname;
5 | if (pathname.endsWith('/no-reset/two/')
6 | || pathname.endsWith('/no-reset/three/')
7 | || pathname.endsWith('/no-reset/four/')
8 | ) {
9 | ev.swap = () => {
10 | ev.newDocument.querySelectorAll('[data-swap]').forEach(el => {
11 | document.querySelector(`[data-swap="${el.dataset.swap}"]`)?.replaceWith(el);
12 | });
13 | };
14 | }
15 | });
16 | ```
17 |
--------------------------------------------------------------------------------
/src/mdx/winter/one.mdx:
--------------------------------------------------------------------------------
1 | # Winter Demo
2 |
3 | This demo features multiple transition groups and a custom animation that plays after the navigation starts right before the transition.
4 |
5 | Chop down that tree or push the snowboarder!
6 |
--------------------------------------------------------------------------------
/src/pages/0.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import Gallery from '../components/Gallery.astro';
3 | ---
4 |
5 |
6 |
--------------------------------------------------------------------------------
/src/pages/animations/one.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | layout: ../../layouts/AnimationMdxLayout.astro
3 | title: Welcome to My Website
4 | ---
5 |
6 |
7 | # Welcome to My Website
8 |
9 | 
10 |
11 |
12 | This is the first page of a sample website. \
13 | For more information about the team, [click here](../two/).
14 |
15 |
16 |
17 | ## About Us
18 |
19 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.
20 |
21 |
22 | ## Our Services
23 |
24 | - Web Development
25 | - App Development
26 | - Digital Marketing
27 |
28 |
--------------------------------------------------------------------------------
/src/pages/animations/two.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | layout: ../../layouts/AnimationMdxLayout.astro
3 | title: Our Team
4 | ---
5 |
6 | # Our Team
7 |
8 | 
9 |
10 |
11 | Stay tuned for more updates about our team and services. If you have any questions, feel free to [click here](../one/).
12 |
13 | Welcome back to our website! Let's introduce you to our dedicated team.
14 |
15 |
16 | ## John Doe
17 |
18 | John is our lead web developer. He has over 10 years of experience in the field and specializes in JavaScript and Python.
19 |
20 | Jane is our app development expert. She has a knack for designing user-friendly interfaces and has a deep understanding of Swift and Kotlin.
21 |
22 | ## Mary Johnson
23 |
24 | Mary heads our digital marketing team. She has a proven track record of successful SEO and social media campaigns.
25 |
26 |
--------------------------------------------------------------------------------
/src/pages/carousel/four.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import CarouselLayout from 'src/layouts/CarouselLayout.astro';
3 | ---
4 |
5 |
11 |
12 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut sed praesentium alias quod tenetur?
13 | Reiciendis expedita rem repellat unde aperiam laborum quos fugiat ipsam et dignissimos.
14 | Repellendus aspernatur aliquam facilis?
15 |
13 | Mixing normal navigation links with links that call the history.back() and history.go() history functions.
16 |
17 | Accessing properties of the navigations source element to distinguish between navigations
18 | initiated by Previous and Next
19 |
20 | Deriving the direction of the view transition from comparing the current values of event.from and event.to
23 |
24 |
25 | Adding intermediate history states when selecting Previous on the first entry
26 |
27 |
28 | Setting the value of event.to to redirect ot a different page.
29 |
30 |
31 |
32 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum sint temporibus quo quaerat
33 | quam adipisci. Quibusdam, doloribus dolorem. Provident ut dolore, necessitatibus aut minus
34 | impedit. Neque corrupti sit doloremque maxime?
35 |
12 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate tempore soluta vel
13 | molestiae facilis deserunt possimus fugiat dignissimos dolorum earum saepe sed consectetur iusto
14 | voluptatibus omnis aspernatur, reprehenderit qui voluptate?
15 |
12 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus quia recusandae asperiores
13 | veritatis provident saepe expedita cum nostrum labore praesentium officia accusantium suscipit
14 | nam nihil hic, doloribus repudiandae porro neque!
15 |
17 | This demo shows different directions on the same page. Use the back navigation of the browser to
18 | go in the opposite direction and finally exit this demo back to the main page.
19 |
In the quiet whispers of the digital cosmos, Astro is a beloved tool, known and cherished by all who craft beauty from pixels. Yet, within its daily magic lies a well-kept secret known only to a select few: Astro is touted for its versatility…
8 |
…but what people really want to build with it are **image galleries**.
9 |
These visual treasures, woven with mystique and wonder, transform everyday moments into timeless tales, waiting to enchant those who discover them.
10 |
11 | [[Click me]](/image-gallery/)
12 |
13 |
14 |
15 | [[Click me]](/image-gallery/)
16 |
17 | This gallery uses the [`` component](/library/AutoNameSelected/) to give all images a unique `view-transition-name` that will also shows up on the next page.
18 |
19 | The names are assigned in random order. This forces the tiles to move to match their position on the next page. These movements are standard [morph transitions](/jotter/api/#morph--group-animations) which might not only slowly change position but also the size of the tiles.
20 |
--------------------------------------------------------------------------------
/src/pages/inspection-chamber-demo/_ChamberLayout.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import Layout from "../../layouts/Layout.astro";
3 | import InspectionChamber from "astro-vtbot/components/InspectionChamber.astro";
4 |
5 | export interface Props {
6 | title: string;
7 | }
8 | const { title } = Astro.props;
9 | ---
10 |
11 |
12 |
13 |
14 |
15 |
16 |
39 |
--------------------------------------------------------------------------------
/src/pages/inspection-chamber-demo/first-page.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import Layout from "./_ChamberLayout.astro";
3 | import chamber from "../../assets/chamber.png";
4 | import { Image } from 'astro:assets';
5 | ---
6 |
7 |
8 |
9 |
13 |
16 |
17 | Welcome to the Bag's Inspection Chamber
18 |
19 |
20 | With the push of a button, the inspection chamber activated, its
21 | interior lighting up to expose the inner workings of the page under
22 | examination, uncovering secrets invisible to the naked eye.
23 |
8 |
9 |
10 | The `` highlights the current entry of you navigation bar by adding the `active` class to the corresponding element.
11 |
12 | ## Contents
13 |
14 | ## Example Output
15 |
16 |
--------------------------------------------------------------------------------
/src/pages/loading/one.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import LoadingLayout from 'src/layouts/LoadingLayout.astro';
3 | import Content from 'src/mdx/loading/one.mdx';
4 | ---
5 |
6 |
7 |
8 | This is a page with some text and a link to another page. Thanks to the <BrakePad> component that next page will take really long to load. Therefore the default loading indicator of the 👜
11 | Bag of Tricks ✨ will appear.
12 |
13 |
14 | Go to page two
15 |
16 |
17 |
--------------------------------------------------------------------------------
/src/pages/loading/progress-bar/colorful1.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | layout: src/layouts/ColorfulLayout.astro
3 | title: Colorful Progress Bar 1
4 | ---
5 |
6 | # Colorful styled progress bar: PageOne
7 |
8 | This is a rather extreme example for how you can style the progress bar loading indicator.
9 | It does not only style the progress bar, but also animates links and the main content area.
10 |
11 | [Show Time](../colorful2/)
12 |
--------------------------------------------------------------------------------
/src/pages/loading/progress-bar/colorful2.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | layout: src/layouts/ColorfulLayout.astro
3 | title: Colorful Progress Bar 2
4 | ---
5 |
6 | # Colorful styled progress bar: Page Two
7 |
8 | The listing shows the structure of the layout that was used for this example:
9 |
10 | ```astro ColorfulLayout.astro
11 | ---
12 | import ProgressBar from 'astro-vtbot/components/ProgressBar.astro';
13 | import BrakePad from 'astro-vtbot/components/BrakePad.astro';
14 | import VtBotDebug from 'astro-vtbot/components/VtBotDebug.astro';
15 | import MdxLayout from './MdxLayout.astro';
16 | ---
17 |
18 |
19 |
20 | {/* Adding transition:name defines a transition group for the morph effect */}
21 |
22 |
23 |
24 |
25 |
26 |
48 | ```
49 |
--------------------------------------------------------------------------------
/src/pages/loading/progress-bar/one.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | layout: src/layouts/ProgressBarLayout.astro
3 | title: Progress Bar 1
4 | ---
5 |
6 | # Progress Bar: Page One
7 |
8 | [Go to page two](../two/)
9 |
10 | This page shows a custom progress bar based on an idea by [@kb](https://github.com/k16e-me). It utilizes the [swup progress bar plugin](https://swup.js.org/plugins/progress-plugin/). Click on the **link to page two** a above this section to see it in action.
11 |
12 | Install the 👜 Bag of Tricks ✨ in your astro project with **`npm install astro-vtbot`** or [install as an Astro integration!](/library/Installation/). Then use the `` like this:
13 | ```astro title="UseProgressBar.astro" {3,13,22,23,24}
14 | ---
15 | import BrakePad from 'astro-vtbot/components/BrakePad.astro';
16 | import ProgressBar from 'astro-vtbot/components/ProgressBar.astro';
17 | import MdxLayout from './MdxLayout.astro';
18 | ---
19 |
20 |
21 | {
22 | /* This is the custom component.
23 | * It can be put into the or the of your page
24 | */
25 | }
26 |
27 |
28 | {/* To observe the effect in DEV mode it is necessary to simulate 2000ms loading time */}
29 |
30 |
31 |
32 |
33 |
34 | {/* You can style the progress bar by defining the swup-progress-bar class */}
35 |
40 | ```
41 | The [`` component](/library/BrakePad/) shown in the listing above is optional. It helps you to see the progress bar even if you have a fast server and a fast connection: It simulates long loading times for DEV mode. `` does nothing when you build for production.
42 |
43 | As an alternative you could also throttle the connection speed using the browser's dev tools.
44 |
--------------------------------------------------------------------------------
/src/pages/loading/progress-bar/two.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | layout: src/layouts/ProgressBarLayout.astro
3 | title: Progress Bar 2
4 | ---
5 |
6 | # Progress Bar: Page Two
7 |
8 | This link takes you back to the previous page.
9 |
10 |
11 | This listing shows how the custom loading indicator uses swup and the `loading()` function offered by `loading-indicator.ts`.
12 |
13 | ```astro title="components/ProgressBar.astro"
14 | ---
15 | export interface Props {}
16 | ---
17 |
18 |
30 | ```
31 |
--------------------------------------------------------------------------------
/src/pages/loading/two.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import LoadingLayout from 'src/layouts/LoadingLayout.astro';
3 | import Content from 'src/mdx/loading/two.mdx';
4 | ---
5 |
6 |
7 | Go to page one
8 |
9 |
10 |
--------------------------------------------------------------------------------
/src/pages/morph/one.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import MorphLayout from 'src/layouts/MorphLayout.astro';
3 | const otherPage = '/morph/two/';
4 | ---
5 |
6 |
7 |
8 | The "Morph" transition only works with browsers that natively support view transition API.
10 |
11 |
12 | This page has several links to the next page. We want each link to morph into the heading of the target page. The morph effect changes an element in size, position
16 | and opacity to blend with an element with same transition name on the new page. Intuitively we would
17 | add transition:name="xyz" to all links and to the heading. But this would not work:
18 | View transition names must be unique on a page.
19 |
8 | One way to deal with it is to give the heading on the next page and the link that was clicked on this page the same fixed view transition name "xyz", and have no names on the
12 | other links. This can not be done in static HTML but it can be done with the help of an event listener.
13 |
14 |
15 |
16 | An alternative is to give each link its own view transition
17 | name and as soon as we know which link
18 | was clicked, we set exactly this name as the view transition name in the heading on the target page.
19 | This can also be done using an event listener. This second approach also has the advantage that it
20 | is easier to define a reversal. It would therefore also work with the browser's back button. However,
21 | the HTML file is more cluttered and the performance may be less good with a larger number of transition
22 | names.
23 |
15 | The approach taken here is much simpler but less automatic. There are three elements that
16 | differ between page two and page three: The heading, the link, and the main text at the
17 | bottom. Theses are marked with data-swap="unique-name". Then this demo indeed use
18 | the astro:before-swap event to define a new implementation for swap() that overwrites the marked elements in the current DOM with the corresponding elements from newDocument
20 | and leaves everything else as it is.
21 |
22 |
23 |
24 | Seen that the title of the browsers tab is still on page two? So we swapped those three marked
25 | elements in, but we didn't yet swap the HTML <head> with the title, yet :)
26 |
14 | This is a page that features an infinite animation and an iframe. Both sit in an element that
15 | is annotated with transition:persist="keep". So they will appear on the next
16 | page, and their state should be taken over.
17 |
18 | Enter some search term in the iframe. Wait for the circle to be on the left side of the
19 | screen. Now click the link at the top of the page to navigate to the next page and watch.
20 |
14 | Here is how that worked: Iframes and elements with animations reset their state as soon as
15 | they change their position in the DOM. The trick now is to leave them alone. You could do this
16 | with a version of swap that diffs the elements of old and new DOM and arranges new
17 | stuff carefully around the raw eggs without touching them.
18 |
14 | The animation re-started on the right side of the screen and the iframe has lost all its
15 | state. ☹
16 |
17 | While transition:persist generally works fine and can keep the state of almost all
18 | HTML elements, animation state and iframe state are its Achilles' heel.
19 |
20 |
21 |
22 | Let's try something else when transitioning to the next page: Again, enter a search term in
23 | the iframe, then wait for the circle being near the left edge of the screen, then hit the link
24 | to the next page. The iframe should keep its state now.
25 |
10 |
11 | *A link to the next page: [Let me step through the portal to page 2](/portal/two/)*
12 |
13 | This demo uses the `` component to intercept all navigation with a portal page. The navigation is automatically resumed when the content of the target page is available. This way it can be used to show a loading animation. On the transition from page A to B with the intermediate portal page C, there are two view transitions: One from A to C and one from C to B.
14 |
15 | > \+ Benefits are that the logic and animation for the loading state is only implemented once on one single page and can be reused for all transitions.
16 |
17 | > \- The most severe drawbacks of this technique are that you can not have morphing effects and persisted elements from A to B directly, but only via the generic C page.
18 |
19 |
20 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget ultricies ultricies, nunc nisl aliquam nunc, vitae aliqu et odio sit amet nisl.
21 |
22 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget ultricies ultricies, nunc nisl ultricies nunc, eget ultricies nisl nisl eget nisl. Nullam euismod, nisl eget ultricies ultricies, nunc nisl ultricies nunc, eget ultricies nisl nisl eget nisl. Nullam euismod, nisl eget ultricies ultricies, nunc nisl ultricies nunc, eget ultricies nisl nisl eget nisl. Nullam euismod, nisl eget ultricies ultricies, nunc nisl ultricies nunc, eget ultricies nisl nisl eget nisl. Nullam euismod, nisl eget ultricies ultricies, nunc nisl ultricies nunc, eget ultricies nisl nisl eget nisl.
23 |
24 |
9 |
10 | *A link to the previous page: [Let me step through the portal to page 1](/portal/one/)*
11 |
12 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget ultricies ultricies, nunc nisl ultricies nunc, eget ultricies nisl nisl eget nisl. Nullam euismod, nisl eget ultricies ultricies, nunc nisl ultricies nunc, eget ultricies nisl nisl eget nisl. Nullam euismod, nisl eget ultricies ultricies, nunc nisl ultricies nunc, eget ultricies nisl nisl eget nisl. Nullam euismod, nisl eget ultricies ultricies, nunc nisl ultricies nunc, eget ultricies nisl nisl eget nisl. Nullam euismod, nisl eget ultricies ultricies, nunc nisl ultricies nunc, eget ultricies nisl nisl eget nisl.
13 |
14 |
15 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget ultricies ultricies, nunc nisl aliquam nunc, vitae aliqu et odio sit amet nisl.
16 |
17 |
2 |
3 | Making every visit of a already known page a traversal through the browser's history is done with a simple modification of the [previous demo](/signal-demo/pageOrder/blog/):
4 |
5 | ```astro title="BaseHead.astro"
6 |
7 | ```
8 | Click a bit through the **Home**, **Blog**, and **About** links in the header and check that the browser history will stop growing once you saw them all.
9 |
10 | Ah, you are annoyed by the fact that clicking the current page slides it in from the right? We can fix that in the [next demo](/signal-demo/same/blog/) (or [return to the overview](/signal-demo/)).
11 |
12 |
13 |
--------------------------------------------------------------------------------
/src/pages/signal-demo/forcedTraversal/blog.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import BaseHead from './_BaseHead.astro';
3 | import Header from './_Header.astro';
4 | import Footer from '../_components/Footer.astro';
5 | import { SITE_TITLE, SITE_DESCRIPTION } from '../_consts';
6 | import Explainer from "./_explainer.md"
7 | ---
8 |
9 |
10 |
11 |
12 |
13 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
--------------------------------------------------------------------------------
/src/pages/signal-demo/forcedTraversal/index.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import BaseHead from './_BaseHead.astro';
3 | import Header from './_Header.astro';
4 | import Footer from '../_components/Footer.astro';
5 | import { SITE_DESCRIPTION } from '../_consts';
6 | ---
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
Click the [Blog] tab above for information about this demo
17 |
🧑🚀 Hello, Astronaut!
18 |
19 | Welcome to the official Astro blog starter template. This
20 | template serves as a lightweight, minimally-styled starting point for anyone looking to build
21 | a personal website, blog, or portfolio with Astro.
22 |
23 |
24 | This template comes with a few integrations already configured in your
25 | astro.config.mjs file. You can customize your setup with
26 | Astro Integrations to add tools like Tailwind,
27 | React, or Vue to your project.
28 |
29 |
Here are a few ideas on how to get started with the template:
30 |
31 |
Edit this page in src/pages/index.astro
32 |
Edit the site header items in src/components/Header.astro
33 |
Add your name to the footer in src/components/Footer.astro
34 |
Check out the included blog posts in src/content/blog/
35 |
Customize the blog post page layout in src/layouts/BlogPost.astro
Astro + Native Cross-Document View-Transitions → No Backward Animations
2 |
3 | This demo shows a first (incomplete) step to enable **native cross-document view transitions** on an Astro site. Other demos will improve the situation step by step. See the link at the bottom of the page or the [overview](/signal-demo/).
4 |
5 |
6 | These pages might look familiar to you, seasoned astronaut! It's because they are based on the blog template you can select when running `npm create astro`.
7 |
8 | What got changed?
9 | 1. Obviously, the demo content got replaced.
10 | 1. All `` tags include a `transition:animate="slide"` directive, generating Astro's default CSS for sliding view transition animations.
11 | 1. This demo **does not use the ``** component. To activate native cross-document view transitions, the following code was added to the end of `BaseHead.astro`.
12 |
13 | ```astro
14 |
19 | ```
20 | Click on the **Home**, **Blog**, or **About** links in the header of this page. You'll see the content slide in smoothly from the right, **even when using the browser's back button**. No matter what, Astro's default backward animation won't activate.
21 |
22 | Let's improve this in the [next demo](/signal-demo/multipleDirections/blog/) (or [return to the overview](/signal-demo/)).
23 |
--------------------------------------------------------------------------------
/src/pages/signal-demo/forwardOnly/blog.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import BaseHead from '../_components/BaseHead.astro';
3 | import Header from './_Header.astro';
4 | import Footer from '../_components/Footer.astro';
5 | import { SITE_TITLE, SITE_DESCRIPTION } from '../_consts';
6 | import Explainer from "./_explainer.md"
7 | ---
8 |
9 |
10 |
11 |
12 |
13 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
--------------------------------------------------------------------------------
/src/pages/signal-demo/forwardOnly/index.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import BaseHead from '../_components/BaseHead.astro';
3 | import Header from './_Header.astro';
4 | import Footer from '../_components/Footer.astro';
5 | import { SITE_DESCRIPTION } from '../_consts';
6 | ---
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
Click the [Blog] tab above for information about this demo
17 |
🧑🚀 Hello, Astronaut!
18 |
19 | Welcome to the official Astro blog starter template. This
20 | template serves as a lightweight, minimally-styled starting point for anyone looking to build
21 | a personal website, blog, or portfolio with Astro.
22 |
23 |
24 | This template comes with a few integrations already configured in your
25 | astro.config.mjs file. You can customize your setup with
26 | Astro Integrations to add tools like Tailwind,
27 | React, or Vue to your project.
28 |
29 |
Here are a few ideas on how to get started with the template:
30 |
31 |
Edit this page in src/pages/index.astro
32 |
Edit the site header items in src/components/Header.astro
33 |
Add your name to the footer in src/components/Footer.astro
34 |
Check out the included blog posts in src/content/blog/
35 |
Customize the blog post page layout in src/layouts/BlogPost.astro
Enabling Forward and Backward Animations with Native Cross-Document View Transitions
7 |
8 | |Demo|Content|
9 | |---|---|
10 | |[Forward Only](/signal-demo/forwardOnly/blog/)|If you simply replace `` with ``, the navigation will only trigger Astro's forward animation.|
11 | |[Back is Back](/signal-demo/multipleDirections/blog/)|Take back control: continue using forward _and_ backward animations of [`transition:animate`](https://docs.astro.build/en/guides/view-transitions/#built-in-animation-directives) or style your directional animations with view transition types!|
12 | |[Page Order](/signal-demo/pageOrder/blog/)|If your site has a concept of _previous_ and _next_ pages, you can derive the animation direction from the order of your pages.|
13 | |[Forced Traversals](/signal-demo/forcedTraversal/blog/)|If you click through a site, pages pile up in your history. How about automatically replacing forward navigation with history traversals for pages seen before?|
14 | |[Same Same!](/signal-demo/same/blog/)|Special styling for links that lead to the current page|
15 | |[Link Types](/signal-demo/link-types/blog/)|Set view transition types per link|
16 |
17 |
--------------------------------------------------------------------------------
/src/pages/signal-demo/link-types/_BlogPost.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import BaseHead from './_BaseHead.astro';
3 | import Header from './_Header.astro';
4 | import Footer from '../_components/Footer.astro';
5 | import FormattedDate from '../_components/FormattedDate.astro';
6 |
7 |
8 | const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
9 | ---
10 |
11 |
12 |
13 |
14 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
2 |
3 | This demo ony differs in two lines from [the previous one](/signal-demo/forwardOnly/blog/):
4 |
5 | ```astro title="BaseHead" ins={2,5}
6 | ---
7 | import TurnSignal from "astro-vtbot/components/TurnSignal.astro";
8 | ---
9 | ...
10 |
11 | ...
12 | ```
13 | Now clicking **Home** or **About** in the header above and then using the browsers back button slides in the page from the left.
14 |
15 | The `` generates the same `data-astro-transition="back"` values as Astro's `` component, but without the overhead of the client side router. With that information, the CSS generated by `transition:animate` can again work in both directions.
16 |
17 | The `` also generates view transition types that can be used with the `:active-view-transition-type()` pseudo-classes. For [more details](https://vtbag.pages.dev/tools/turn-signal/#configuration-and-usage) visit the @vtbag pages.
18 |
19 | On this page, all clicks on links in the header generate forward animations. Wouldn't it be nice to have **Home** to the left of **Blog** and **About** to the right?
20 |
21 | Let's do this in the [next demo](/signal-demo/pageOrder/blog/) (or [return to the overview](/signal-demo/)).
22 |
--------------------------------------------------------------------------------
/src/pages/signal-demo/multipleDirections/blog.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import BaseHead from './_BaseHead.astro';
3 | import Header from './_Header.astro';
4 | import Footer from '../_components/Footer.astro';
5 | import { SITE_TITLE, SITE_DESCRIPTION } from '../_consts';
6 | import Explainer from "./_explainer.md"
7 | ---
8 |
9 |
10 |
11 |
12 |
13 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
--------------------------------------------------------------------------------
/src/pages/signal-demo/multipleDirections/index.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import BaseHead from './_BaseHead.astro';
3 | import Header from './_Header.astro';
4 | import Footer from '../_components/Footer.astro';
5 | import { SITE_DESCRIPTION } from '../_consts';
6 | ---
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
Click the [Blog] tab above for information about this demo
17 |
🧑🚀 Hello, Astronaut!
18 |
19 | Welcome to the official Astro blog starter template. This
20 | template serves as a lightweight, minimally-styled starting point for anyone looking to build
21 | a personal website, blog, or portfolio with Astro.
22 |
23 |
24 | This template comes with a few integrations already configured in your
25 | astro.config.mjs file. You can customize your setup with
26 | Astro Integrations to add tools like Tailwind,
27 | React, or Vue to your project.
28 |
29 |
Here are a few ideas on how to get started with the template:
30 |
31 |
Edit this page in src/pages/index.astro
32 |
Edit the site header items in src/components/Header.astro
33 |
Add your name to the footer in src/components/Footer.astro
34 |
Check out the included blog posts in src/content/blog/
35 |
Customize the blog post page layout in src/layouts/BlogPost.astro
2 |
3 | To enable the `` to automatically derive directions from the order of your pages your have to specify your sequence of pages. This is done using a CSS selector that enumerates all your pages. Most often this can be done by selecting the anchors inside a navigation bar. In this example the selector does just that by adding a property to the [previous demo](/signal-demo/multipleDirections/blog/):
4 |
5 | ```astro title="BaseHead.astro"
6 |
7 | ```
8 | Here the `internal-links` class ensures that we only target Home, Blog, and About - and not the other links of the header. See also the [documentation of the properties](/library/TurnSignal/#properties).
9 |
10 | Using the selector, the header links are now ordered as: 1 = **Home**, 2 = **Blog**, 3 = **About**.
11 | Navigating to **Home** triggers a backward transition, while navigating to **About** triggers a forward transition. Going to **Blog** will display a backward transition if coming from **About**. Otherwise, it will show a forward transition.
12 |
13 | There are only three pages in this example, but as the user navigates, history entries will accumulate. Instead of just providing the visual impression of sliding left and right, how about replacing navigation to an already visited page with an equivalent history traversal? This way, the experience matches the visual cues.
14 |
15 | Let's do this in the [next demo](/signal-demo/forcedTraversal/blog/) (or [return to the overview](/signal-demo/)).
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/pages/signal-demo/pageOrder/blog.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import BaseHead from './_BaseHead.astro';
3 | import Header from './_Header.astro';
4 | import Footer from '../_components/Footer.astro';
5 | import { SITE_TITLE, SITE_DESCRIPTION } from '../_consts';
6 | import Explainer from "./_explainer.md"
7 | ---
8 |
9 |
10 |
11 |
12 |
13 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
--------------------------------------------------------------------------------
/src/pages/signal-demo/pageOrder/index.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import BaseHead from './_BaseHead.astro';
3 | import Header from './_Header.astro';
4 | import Footer from '../_components/Footer.astro';
5 | import { SITE_DESCRIPTION } from '../_consts';
6 | ---
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
Click the [Blog] tab above for information about this demo
17 |
🧑🚀 Hello, Astronaut!
18 |
19 | Welcome to the official Astro blog starter template. This
20 | template serves as a lightweight, minimally-styled starting point for anyone looking to build
21 | a personal website, blog, or portfolio with Astro.
22 |
23 |
24 | This template comes with a few integrations already configured in your
25 | astro.config.mjs file. You can customize your setup with
26 | Astro Integrations to add tools like Tailwind,
27 | React, or Vue to your project.
28 |
29 |
Here are a few ideas on how to get started with the template:
30 |
31 |
Edit this page in src/pages/index.astro
32 |
Edit the site header items in src/components/Header.astro
33 |
Add your name to the footer in src/components/Footer.astro
34 |
Check out the included blog posts in src/content/blog/
35 |
Customize the blog post page layout in src/layouts/BlogPost.astro
2 |
3 |
4 |
5 | The [previous demo](/signal-demo/forcedTraversal/blog/) and Astro's `transition:animate` in general only knows about _backward_ and _forward_, but the `` also understands the concept of neither backward nor forward.
6 |
7 |
8 | 1. To have a distinct animation for staying on the same page we need to [reconfigure the default](/library/TurnSignal/#properties) a bit:
9 | ```astro title="BaseHead.astro"
10 |
11 | ```
12 |
13 |
14 |
15 | 2. And of course we need some additional CSS for the animation
16 | ```css
17 | main {view-transition-class: main}
18 |
19 | [data-astro-transition='same']::view-transition-old(.main),
20 | [data-astro-transition='same']::view-transition-new(.main) {
21 | animation: 0.25s same;
22 | }
23 | @keyframes same {50% {transform: scale(0)}}
24 | ```
25 |
26 | Click the the **Blog** link in the header. Seen the difference?
27 |
28 | This example uses view-transition-class properties to address images of the `` elements of all three pages at once. See the the[@vtbag](https://vtbag.pages.dev/tools/turn-signal/#configuration-and-usage) pages for more examples and on how to use `:active-view-transition-type()` for sites that do not need the compatibility to `transition:animate`.
29 |
30 | The `` component yet has another trick to offer: Let's annotate [view transition types at single links](/signal-demo/link-types/blog/) (or [return to the overview](/signal-demo/)).
31 |
32 |
--------------------------------------------------------------------------------
/src/pages/signal-demo/same/blog.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import BaseHead from './_BaseHead.astro';
3 | import Header from './_Header.astro';
4 | import Footer from '../_components/Footer.astro';
5 | import { SITE_TITLE, SITE_DESCRIPTION } from '../_consts';
6 | import Explainer from "./_explainer.mdx"
7 | ---
8 |
9 |
10 |
11 |
12 |
13 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
--------------------------------------------------------------------------------
/src/pages/signal-demo/same/index.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import BaseHead from './_BaseHead.astro';
3 | import Header from './_Header.astro';
4 | import Footer from '../_components/Footer.astro';
5 | import { SITE_DESCRIPTION } from '../_consts';
6 | ---
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
Click the [Blog] tab above for information about this demo
17 |
🧑🚀 Hello, Astronaut!
18 |
19 | Welcome to the official Astro blog starter template. This
20 | template serves as a lightweight, minimally-styled starting point for anyone looking to build
21 | a personal website, blog, or portfolio with Astro.
22 |
23 |
24 | This template comes with a few integrations already configured in your
25 | astro.config.mjs file. You can customize your setup with
26 | Astro Integrations to add tools like Tailwind,
27 | React, or Vue to your project.
28 |
29 |
Here are a few ideas on how to get started with the template:
30 |
31 |
Edit this page in src/pages/index.astro
32 |
Edit the site header items in src/components/Header.astro
33 |
Add your name to the footer in src/components/Footer.astro
34 |
Check out the included blog posts in src/content/blog/
35 |
Customize the blog post page layout in src/layouts/BlogPost.astro
8 | 
13 |
--------------------------------------------------------------------------------
/src/components/VtDemo.astro:
--------------------------------------------------------------------------------
1 | ---
2 | export interface Props {
3 | path: string;
4 | height?: string;
5 | width?: string;
6 | }
7 | const { path, height="20rem", width="20rem" } = Astro.props;
8 | ---
9 |
10 | 
10 | 
10 |