update for link-types

vtbag · Dec 11, 2024 · 3d9a4a8 · 3d9a4a8
1 parent aaf3f80
commit 3d9a4a8
Show file tree

Hide file tree

Showing 67 changed files with 2,127 additions and 590 deletions.
diff --git a/astro.config.ts b/astro.config.ts
@@ -15,6 +15,7 @@ import type { Badge } from 'node_modules/@astrojs/starlight/schemas/badge';
 
 // https://astro.build/config
 export default defineConfig({
+  image: {remotePatterns: [{ protocol: "https" }]},
   devToolbar: { enabled: true },
   experimental: { directRenderScript: true },
   site: 'https://vtbag.dev',
@@ -24,6 +25,12 @@ export default defineConfig({
   },
   prefetch: false,
   markdown: {
+    shikiConfig: {
+      themes: {
+        light: 'github-light',
+        dark: 'github-dark',
+      },
+    },
     rehypePlugins: [rehypeSlug, [rehypeAutolinkHeadings, {
       behavior: "wrap"
     }], [rehypeExternalLinks, {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,14 +10,14 @@
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/starlight": "^0.29.2",
+    "@astrojs/starlight": "^0.29.3",
     "@inox-tools/portal-gun": "^0.1.1",
-    "@playwright/test": "^1.49.0",
-    "@types/node": "^22.10.1",
+    "@playwright/test": "^1.49.1",
+    "@types/node": "^22.10.2",
     "@vtbag/cam-shaft": "^1.0.1",
     "@vtbag/element-crossing": "^1.0.3",
     "@vtbag/inspection-chamber": "^1.0.18",
-    "@vtbag/turn-signal": "^1.1.0",
+    "@vtbag/turn-signal": "^1.2.0",
     "@vtbag/utensil-drawer": "^0.0.2",
     "astro": "^4.16.17",
     "astro-d2": "^0.6.0",

diff --git a/public/fishpond-og.png b/public/fishpond-og.png
diff --git a/public/viewer-demo-og.png b/public/viewer-demo-og.png
diff --git a/src/components/NHead.astro b/src/components/NHead.astro
@@ -131,3 +131,10 @@ import "./vtbag-bar.css";
     view-transition-name: mobile-starlight-toc-nav;
   }
 </style>
+<script>
+  addEventListener(
+    "popstate",
+    (e) => e.hasUAVisualTransition && location.reload()
+  );
+</script>
+
diff --git a/src/content/docs/basics/step-by-step.mdx b/src/content/docs/basics/step-by-step.mdx
@@ -0,0 +1,7 @@
+---
+title: "Master Cross-Document View Transitions"
+description: Learn how to enhance a multi-page site with smooth view transitions in this step-by-step tutorial.
+---
+
+Learn how to enhance a multi-page site with smooth view transitions in this step-by-step tutorial.
+
diff --git a/src/content/docs/tips/debug.mdx b/src/content/docs/tips/debug.mdx
@@ -0,0 +1,4 @@
+---
+title: How to Debug View Transitions
+descriptions:
+---
diff --git a/src/content/docs/tips/distorted-text.mdx b/src/content/docs/tips/distorted-text.mdx
@@ -0,0 +1,4 @@
+---
+title: Avoid Distorted Text during View Transitions
+description: Especially text with background and borders tends to get distorted during view transition. Here are some tips to avoid that.
+---
diff --git a/src/content/docs/tools/turn-signal.mdx b/src/content/docs/tools/turn-signal.mdx
@@ -27,7 +27,7 @@ The Turn-Signal is a lightweight script for purely progressive enhancement of cr
 The Turn-Signal is designed for use with cross-document view transitions. It depends on the Navigation API and make the assumption that all browsers that support level 2 of the View Transition API also support the Navigation API.
 :::
 
-## Demo
+## Demos
 
 import { Card } from "@astrojs/starlight/components";
 
@@ -38,6 +38,7 @@ import { Card } from "@astrojs/starlight/components";
 Check out the [Turn-Signal Demo](/signal-demo/bag/) to see the Turn-Signal in action. Click the link to move to the next page, then use your browser's back button to return. Notice how the slide animation changes direction based on your navigation.
   </Card>
 
+Want to control the type of animations with your links? Here are a [fancy fishpond demo](/link-demo/) and a more down to earth [image viewer demo](/viewer-demo/). Both demonstrate the use of the [link-types](#link-types) script!
 
 
 ## Installation
@@ -82,9 +83,39 @@ import forcedTraversal from "@vtbag/turn-signal/forced-traversal?url"
 ```
 There are no configuration options and the `forced-traversal` script does not take any parameters.
 
+<a name="link-types"/>
+
+### Control Animation Type per Link!
+
+There is a third script in the turn-signal box!
+Install the `link-types` script and you can annotate every `<a>` element with view transition types!
+Use this script in the same way as the main script by inserting it inside the `<head>`.
+```jsx
+import linkTypes from "@vtbag/turn-signal/link-types?url"
+...
+  <script src={linkTypes} />
+</head>
+```
+
+The script finds anchor elements with a `data-vtbag-link-types` attribute and uses the identifiers to set up view transition types for that navigation.  The value can be a space separated list of identifiers. Even better, you can have two of those lists separated by a slash (/). If specified, the second list is used for backward history navigation.
+
+You can use the types in your CSS to select different animations and other CSS properties:
+
+```css
+:active-view-transition-type(shift-right) {
+  &::view-transition-old(main) {
+    animation: 200ms both slide-out-to-left;
+  }
+  &::view-transition-old(main) {
+    animation: 200ms both slide-in-from-right;
+  }
+}
+```
+That way you can have different animations for the same page depending on the specific user action.
+
 ## Configuration and Usage
 
-`@vtbag/turn-signal` main script accepts several config options. Those are specified as `data-*` attributes on the `<script>` element. They are all optional.
+The `@vtbag/turn-signal` main script accepts several config options. Those are specified as `data-*` attributes on the `<script>` element. They are all optional.
 
 If used without any explicit parameters, the Turn-Signal
 * sets the `backward` view transition type if it detects backwards history traversals.

diff --git a/src/layouts/DemoLayout.astro b/src/layouts/DemoLayout.astro
@@ -1,35 +1,27 @@
 ---
+import Layout from "@/layouts/Layout.astro";
 import DemoNavigation from "@/components/DemoNavigation.astro";
 export interface Props {
   title: string;
+  description: string;
+  image:string;
   backlink: string;
   prev: string;
   next: string;
 }
 
-const { title, backlink, prev, next } = Astro.props;
-const script =
-  'const _=document.documentElement;_.dataset.theme=_.style.colorScheme=localStorage.getItem("starlight-theme")||(window.matchMedia("(prefers-color-scheme: dark)").matches? "dark":"light")';
+const { title, description, image, backlink, prev, next } = Astro.props;
 ---
 
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>{title}</title>
-    <link rel="canonical" href={Astro.url.href} />
-    <slot name="early-head" />
-    <link href="/demo-explainer/styles.css" rel="stylesheet" />
-    <script is:inline set:html={script} />
-    <script is:inline src="/chamber.js/"></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" href="/bag3.png" type="image/png" />
-    <slot name="late-head" />
-  </head>
-  <body>
+<Layout {title} {description} {image}>
+    <slot name="early-head" slot="head"/>
+    <link href="/demo-explainer/styles.css" rel="stylesheet" slot="head2"/>
+    <script is:inline src="/chamber.js/" slot="head2"></script>
+    <slot name="late-head" slot="head2"/>
+
     <h1>{title}</h1>
     <DemoNavigation {prev} {backlink} {next} />
     <slot />
     <div id="vtbag-spacer" style="min-height:100vh"></div>
     <DemoNavigation {prev} {backlink} {next} />
-  </body>
-</html>
+</Layout>
diff --git a/src/layouts/ExplainerLayout.astro b/src/layouts/ExplainerLayout.astro
@@ -1,13 +1,11 @@
 ---
 import LeaveDemoLink from "../components/LeaveDemoLink.astro";
+import Layout from "@/layouts/Layout.astro";
 
 export const partial = true;
 const {title = "How does it work?"} = Astro.props.frontmatter;
 ---
-<head>
-  <link rel="canonical" href={Astro.url.href.replace("-explainer","")} />
-</head>
-<body>
+<Layout {title} description="" image="" canonical={Astro.url.href.replace("-explainer","")} />
   <h2 id="how"><a href="#how">{title}</a></h2>
   <p>
     <i
@@ -26,7 +24,7 @@ const {title = "How does it work?"} = Astro.props.frontmatter;
   </p>
   <hr />
   <section><slot /></section>
-</body>
+</Layout>
 <style>
   p {
     font-size: 0.8rem;