new og:images

astro.config.ts

@@ -114,9 +114,20 @@ function sidebar() {
     label: 'CSS Tips & Tricks',
     items: [
       { label: 'Where to place the CSS', link: "/tips/css/" },
-      { label: "Flickering during morph animations?", link: "tips/over-exposure/" },
-      { label: "Avoid Pointer Flickering", link: "tips/pointer/" },
-      { label: "Pseudo-smooth-scrolling?", link: "tips/pseudo-smooth-scrolling/" }
+      { label: "Flickering during morph animations?", link: "/tips/over-exposure/" },
+      { label: "Avoid Pointer Flickering", link: "/tips/pointer/" },
+      { label: "Pseudo-smooth-scrolling?", link: "/tips/pseudo-smooth-scrolling/" }
+    ]
+  },{
+    label: 'All Demos',
+    items: [
+      { label: 'Inspection Chamber in Action', link: "/inspection-chamber-demo/first-page/" },
+      { label: 'State Loss on Navigation', link: "/crossing/plain/1/" },
+      { label: "Preserved State", link: "/crossing/vanilla/1/" },
+      { label: "Preserved State (exp.)", link: "/crossing/over-the-top/1/" },
+      { label: "Turn Signal Directions", link: "/signal-demo/bag/" },
+      { label: "Pseudo-Smooth-Scrolling", link: "/shaft-demo/1/" },
+      { label: "Instant scrolling with Cam-Shaft", link: "/shaft-demo2/1/" }
     ]
   }];
 }

src/content/docs/basics/api.mdx

@@ -8,7 +8,7 @@ head:
       content: "/api-og.png"
 ---
 
-The View Transition API is a rather new API. Eventually, this site will hold more background  information about the API.
+The View Transition API is a rather new API. Eventually, this site will hold more background information about the API.
 
 I made a start with …
 * … information about the [structure of the pseudo-elements](/basics/pseudos/) of the API

src/content/docs/basics/default-animations.mdx

@@ -1,6 +1,11 @@
 ---
 title: Default View Transition Animations
 description: Mastering the fundamentals is key to creating seamless animations with the View Transition API. Here’s a quick guide to get you started.
+head:
+  - tag: meta
+    attrs:
+      property: "og:image"
+      content: "/anim-og.png"
 ---
 
 If you do not specify custom animations, the View Transition API automatically assigns two types of animations to the pseudo-elements:

src/content/docs/basics/examples.mdx

@@ -1,6 +1,11 @@
 ---
 title: View Transition Examples
 description: Basic examples on how to use the View Transition API for same-document and cross-document view transitions.
+head:
+  - tag: meta
+    attrs:
+      property: "og:image"
+      content: "/examples-og.png"
 ---
 
 import DemoLink from "src/components/DemoLink.astro";

src/content/docs/basics/pseudos.mdx

@@ -1,6 +1,11 @@
 ---
 title: "Pseudo-Elements of the View Transition API"
 description: "What are those pseudo-elements of the View Transition API and how can I style and animate them?"
+head:
+  - tag: meta
+    attrs:
+      property: "og:image"
+      content: "/pseudos-og.png"
 ---
 
 What are those pseudo-elements of the View Transition API and how can I style and animate them?
@@ -276,7 +281,7 @@ When examining the `::view-transition-groups` in order, the elements at the star
 
 Before the view transition starts, the pseudo elements are rendered on top of the current page. For cross-document view transitions, this might start in the middle of the page load process.  But there are [techniques to delay the start of the view transition](#delaying-cross-document-transitions).
 
-The first pseudo-element that is rendered for a view transition is `::view-transition`. It has the size of the viewport and is full transparent by default.  It works like a glass pane that prevents the user from interacting with elements below it.
+The first pseudo-element that is rendered for a view transition is `::view-transition`. It has the size of the viewport and is full transparent by default.  It works like a glass pane that prevents the user from interacting with elements below it (as long as you don't set     `pointer-events: none;` on it).
 
 The transition groups are rendered in the order they appear as children of the `::view-transition` pseudo-element. Groups at the beginning of the list are rendered first, with later groups painted on top.
 

src/content/docs/basics/styling.mdx

@@ -1,6 +1,11 @@
 ---
 title: Styling View Transitions
-description: Styling view transitions with :active-view-transition-type and view-transition-class
+description: Styling view transitions including :active-view-transition-type and view-transition-class
+head:
+  - tag: meta
+    attrs:
+      property: "og:image"
+      content: "/styling-og.png"
 ---
 
 import { Steps } from "@astrojs/starlight/components";
@@ -45,7 +50,7 @@ The opposite problem to view transition names not being unique is that elements
 The browser automatically assigns the view transition name `root` to the `:root` element, i.e. the top-level `<html>` element for an HTML document. If you prefer another name, you can override it. If you do not want the `<html>` element to participate in the view transition with own pseudo-elements, you explicitly have to remove the `root` name by [overriding it with `none`](/basics/pseudos/#opt-out).
 
 #### Dynamic Names
-Of course view transition names do not need to be static. You can assign them conditionally, e.g. inside a media query or with a selector that checks for a special CSS class further up the DOM. Another interesting way for conditional assignment of view transition names is to let the m [depend on view transition types](/basics/styling/#conditional-view-transitions).
+Of course view transition names do not need to be static. You can assign them conditionally, e.g. inside a media query or with a selector that checks for a special CSS class further up the DOM. Another interesting way for conditional assignment of view transition names is to let them [depend on view transition types](/basics/styling/#conditional-view-transitions).
 
 Because they are animatable CSS properties, view transition names can even be changed using other animations. So if you like you could automatically change a name over time or depending on the scroll position with scroll-driven animations.
 

src/content/docs/basics/test-page.mdx

@@ -1,6 +1,11 @@
 ---
 title: "Test Your Browser's View Transition Capabilities"
 description: Check what part of the View Transition API is supported by your browser
+head:
+  - tag: meta
+    attrs:
+      property: "og:image"
+      content: "/test-page-og.png"
 ---
 
 This page shows whether your current browser has native support for view transitions.

src/content/docs/tips/css.mdx

@@ -1,5 +1,11 @@
 ---
 title: Where to Place CSS for Cross-Document View Transitions?
+description: Your CSS rules are ignored by the View Transition API? Maybe you put them in the wrong place.
+head:
+  - tag: meta
+    attrs:
+      property: "og:image"
+      content: "/css-og.png"
 ---
 
 You're aware that enabling cross-document view transitions is as simple as adding the view transition at-rule to your pages.
@@ -14,7 +20,7 @@ You also know that both pages, the old one and the new one, must opt in by inclu
 However, when you start adding more CSS to introduce additional view-transition names or customize the animations, you might wonder: Do I need this CSS on both pages?
 
 ## View Transition Names
-View transition names are tied to the DOM, whether they're set directly on elements or added via CSS rules. You must define the names for the old images on the old page and for the new images on the new page. This does not need to be static. You can use view transition types to add or remove view transition names via CSS, see the [Turn-Signal example](/tools/turn-signal/#direction-based-control-over-transitions).
+View transition names are tied to the DOM, whether they're set directly on elements or added via CSS rules. You must define the names for the old images on the old page and for the new images on the new page. This does not need to be static. You can use view transition types to add or remove view transition names via CSS, see the [Turn-Signal example](/tools/turn-signal/#switching-transition-names).
 
 The last chance to set these names on the old page using JavaScript is during the pageswap event, which occurs right before the screenshots for the old images are taken and navigation leaves the page.
 
@@ -33,4 +39,4 @@ If you're accustomed to building with components, it might not always be clear w
 I'm still exploring paths and alternatives but this would be my current recommendations:
 1. For complex pages, ensuring the uniqueness of view transition names might be easier if you assign them dynamically using JavaScript.
 2. Placing your view transition animation definitions in a global CSS file can be effective. This way, both the old and new pages share the same definitions, eliminating the need to worry about where to place them.
-3. Utilizing [view transition classes and types](/basics/styling/#selecting-pseudo-elements-with-classes) can help decouple usage from definitions, making your code more flexible."
+3. Utilizing [view transition classes and types](/basics/styling/#-with-classes) can help decouple usage from definitions, making your code more flexible."

src/content/docs/tips/over-exposure.mdx

@@ -1,6 +1,11 @@
 ---
 title: Flickering during Morph Animations?
 description: Why custom fade animations for view transitions might flash.
+head:
+  - tag: meta
+    attrs:
+      property: "og:image"
+      content: "/over-exposures-og.png"
 ---
 
 Defining custom fade animations for view transitions is not as straightforward as it might initially seem. Typical issues, where the combined old an new image appears brighter or darker as expected during view transitions can be caused by a [wrong `mix-blend-mode`](#set-the-correct-mix-blend-mode) or by [reverting an asymmetric timing function](#avoid-reverse-with-asymmetric-timings).

src/content/docs/tips/pointer.mdx

@@ -1,5 +1,11 @@
 ---
 title: Pointer Flickering
+description: Your cursor can be a tricky shape-shifter during view transitions. Here’s how to keep it in line.
+head:
+  - tag: meta
+    attrs:
+      property: "og:image"
+      content: "/pointer-og.png"
 ---
 When I was asked how to avoid changing pointers on view transition navigation, I was first puzzled: I have to admit, I never really considered that effect before. But once you notice it, it's hard to unsee — and it definitely becomes a bit irritating every time you encounter it.
 

src/content/docs/tips/pseudo-smooth-scrolling.mdx

@@ -1,6 +1,11 @@
 ---
 title: "Pseudo-Smooth-Scrolling"
 description: "Instant scrolling on a page with view transition might lead to an unexpected smooth-scrolling effect. "
+head:
+  - tag: meta
+    attrs:
+      property: "og:image"
+      content: "/pseudo-smooth-scrolling-og.png"
 ---
 
 Pseudo-smooth-scrolling is an effect that looks like smooth-scrolling, but in fact is the result of the browser’s default morph animation. It happens when a navigation involves instant scrolling and tall transitions groups.

src/content/docs/tools/cam-shaft.mdx

@@ -18,7 +18,7 @@ Bump your view transition images into position to avoid that unexpected pseudo-s
 The Cam-Shaft is about an issue we already resolved for Astro's ViewTransitions (see [here](https://events-3bg.pages.dev/jotter/starlight/inner-workings/transitions/#the-pseudo-scrolling-main-area) and [here](https://events-3bg.pages.dev/library/PageOffset/)), but it still requires support for browser-native cross-document view transitions.
 
 </Logo>
-<CTA>[Jump Scroll!](/shaft-demo2/1/)</CTA>
+<CTA>[Instant Scrolling!](/shaft-demo2/1/)</CTA>
 
 ## PREREQUISITE
 

src/content/docs/tools/turn-signal.mdx

@@ -97,7 +97,7 @@ If you want to tell the script about the order of the pages on your site, use th
 ```
 Here the first CSS selector selects the home page and the second all pages from the global site navigation. This selector will fit for all Starlight sites.
 
-For a detailed description of `data-selector` and on how to instruct Turn-Style to set different types or even set attributes on the root element, see the [config options](/config/options/) below.
+For a detailed description of `data-selector` and on how to instruct Turn-Style to set different types or even set attributes on the root element, see the [config options](/tools/turn-signal/#config-options) below.
 
 Let's see how you can use these view transition types to style different animations dependent on the direction of the navigation or even switch transition groups on and off.
 

src/content/docs/vtbag.mdx

@@ -12,7 +12,7 @@ import crossing from "../../assets/crossing.png";
 import signal from "../../assets/signal.png"
 import shaft from "../../assets/shaft.png"
 
-@vtbag is a comprehensive suite of tools, tips, and tricks to make your experience with the View Transition API smoother and more efficient. [Check how well your current browser supports the view transition API.](/basics/testpage/)
+@vtbag is a comprehensive suite of tools, tips, and tricks to make your experience with the View Transition API smoother and more efficient. [Check how well your current browser supports the view transition API.](/basics/test-page/)
 
 ### Tools
 The site already got some interesting tools to offer: