+ javascript page + styling

astro.config.ts

@@ -128,6 +128,8 @@ function sidebar() {
       { label: 'Structure of Pseudo-Elements', link: "/basics/pseudos/" },
       { label: 'Mechanics of Default Animations', link: "/basics/default-animations/" },
       { label: 'Styling View Transitions', link: "/basics/styling/" },
+      { label: 'JavaScript API', link: "/basics/javascript/" },
+
       { label: "Playing Hide & Seek", link: "/basics/hide-and-seek/" }
     ]
   }, {

src/content/docs/basics/javascript.mdx

@@ -0,0 +1,29 @@
+---
+title: View Transition JavaScript API
+description: How to interact with view transitions from JavaScript
+---
+
+Browser-native cross-document view transitions can be implemented entirely in CSS without JavaScript. However, JavaScript becomes essential for advanced functionality, such as
+- starting same-page view transitions with `startViewTransition()`,
+- programmatically modifying CSS properties like `view-transition-name`,
+- setting view transition types,
+- or running code when transitions start or finish.
+
+
+## Same-Document View Transitions
+For a detailed guide on the API and the processing of same-document view transitions, refer to the[vtbot site](https://events-3bg.pages.dev/jotter/api/details/).
+
+## Cross-Document View Transitions
+
+Cross-document view transitions work similarly to same-document ones but are triggered by navigation. Two key events enable JavaScript interaction: `pageswap`, dispatched just before leaving the old page, and pagereveal, dispatched before the new page renders.
+
+Both events include a `viewTransition` property, which holds a `ViewTransition` object if the transition is part of a cross-document view transition. For `pagereveal`, when `viewTransition` is defined, its `updateCallbackDone` promise is immediately settled.
+
+The events allow you to manipulate the DOM or CSS properties right before snapshots are taken or the new page's live images are captured. In particular, they allow for [setting view transition types](/basics/styling/#-with-types) for the current view transition.
+
+In a `pageswap` listener, you can define view transition types by adding them to `event.viewTransition.types`, which are then only applied to the old page. The types can be used to [control via CSS](/tools/turn-signal/#switching-transition-names) what view transition names are defined on the old page. You can also directly modify view transition names in the listener as snapshots for the `::view-transition-old` pseudo elements are not taken taken before this event is dispatched.
+
+Similarly, `pagereveal` listeners allow you to tweak view transition names and types for the new page. Again, live images for the `::view-transition-new` pseudo-elements are being captured after the event.
+
+
+The `pageswap` event also provides a `NavigationActivation` object via its `activation` property, offering details about the current page (`from`) and next page (`entry`). While the `pagereveal` event does not include this property, in browsers supporting the Navigation API, you can use `navigation.activation` to access information about the previous page (`from`) and current page (`entry`).

src/styles/custom.css

@@ -312,13 +312,17 @@ details {
   overflow: clip;
 }
 details::details-content {
-  transition: transform 0.2s, opacity 0.2s, block-size 0.2s, content-visibility .2s allow-discrete;
+  transition:
+    transform 0.2s,
+    opacity 0.2s,
+    block-size 0.2s,
+    content-visibility 0.2s allow-discrete;
   transition-timing-function: ease-in;
   block-size: 0;
   opacity: 0;
-  transform: translateX(-30px)
+  transform: translateX(-30px);
 }
-details[open]::details-content{
+details[open]::details-content {
   transition-timing-function: ease-out;
   block-size: auto;
   opacity: 1;
@@ -329,8 +333,29 @@ details[open]::details-content{
   scrollbar-gutter: stable;
 }
 
-a[aria-current="page"] {
+li :has(> a[aria-current="page"]) {
+  display: inline-block;
+}
+li a[aria-current="page"] {
+  background-color: transparent;
+  border-radius: 0;
   view-transition-name: current-page;
+  &:hover {
+    border-radius: 0;
+    background-color: transparent;
+  }
+  border-bottom: 1pt solid var(--sl-color-accent);
+  &:after {
+    content: "🌟";
+    margin-left: 0.5em;
+    position: absolute;
+    view-transition-name: current-page-star;
+  }
+}
+::view-transition-old(current-page),
+::view-transition-new(current-page) {
+  height: auto;
+  width: auto;
 }
 
 ::view-transition-image-pair(current-page) {
@@ -341,4 +366,4 @@ a[aria-current="page"] {
   50% {
     transform: translateX(-30%);
   }
-}
+}