Merge branch 'main' into add-toc

README.md

@@ -609,6 +609,8 @@ Configure the compressor in `astro.config.mjs` file:
 });
 ```
 
+- [Bag of Tricks for Astro's View Tran­si­tions](https://github.com/martrapp/astro-vtbot#readme): is a collection of extensions and support aimed at enhancing Astro's view transitions. Whether you're looking to add flair to your website or streamline user experience, this toolkit offers various techniques to elevate your projects. In the template, it was used to add View Transitions to a Starlight docs.
+
 ### Flexibility with Integrations
 
 The great thing about Astro is its rich ecosystem of integrations, allowing you to tailor project functionalities to your exact needs. Feel free to explore [Astro integrations page](https://astro.build/integrations/) and add additional capabilities as you see fit.

astro.config.mjs

@@ -79,21 +79,16 @@ export default defineConfig({
       favicon: "/favicon.ico",
       components: {
         SiteTitle: "./src/components/ui/starlight/SiteTitle.astro",
+        Head: "./src/components/ui/starlight/Head.astro",
       },
       head: [
         {
           tag: "meta",
-          attrs: {
-            property: "og:image",
-            content: "https://screwfast.uk" + "/social.png",
-          },
+          attrs: { property: "og:image", content: "https://screwfast.uk" + "/social.webp" },
         },
         {
           tag: "meta",
-          attrs: {
-            property: "twitter:image",
-            content: "https://screwfast.uk" + "/social.png",
-          },
+          attrs: { property: "twitter:image", content: "https://screwfast.uk" + "/social.webp" },
         },
       ],
     }),

package-lock.json

@@ -25,6 +25,7 @@
       },
       "devDependencies": {
         "@tailwindcss/forms": "^0.5.7",
+        "astro-vtbot": "^1.7.1",
         "prettier": "^3.2.5",
         "prettier-plugin-astro": "^0.13.0",
         "prettier-plugin-tailwindcss": "^0.5.13",
@@ -3149,6 +3150,16 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/astro-vtbot": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/astro-vtbot/-/astro-vtbot-1.7.1.tgz",
+      "integrity": "sha512-LTOs5d5Y1A7I/19RDeZKfur/oRsAD9Rlf9fp5pvidlp8kHbagWcI96EiDewNyK+j9gdROu9mw46WExOj1BQ4dg==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/martrapp"
+      }
+    },
     "node_modules/astro/node_modules/@astrojs/markdown-remark": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/@astrojs/markdown-remark/-/markdown-remark-4.3.2.tgz",

package.json

@@ -28,6 +28,7 @@
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.7",
+    "astro-vtbot": "^1.7.1",
     "prettier": "^3.2.5",
     "prettier-plugin-astro": "^0.13.0",
     "prettier-plugin-tailwindcss": "^0.5.13",

src/components/ui/starlight/Head.astro

@@ -0,0 +1,26 @@
+---
+import StarlightHead from "@astrojs/starlight/components/Head.astro";
+import {
+  default as VtbotStarlight,
+  type Props,
+} from "astro-vtbot/components/starlight/Base.astro";
+
+// https://docs.astro.build/en/guides/view-transitions/#fallback-control
+Astro.props.viewTransitionsFallback = "animate";
+---
+
+<VtbotStarlight {...Astro.props}>
+  <StarlightHead {...Astro.props} />
+</VtbotStarlight>
+
+<style is:global>
+  /* Slow down Chrome's default animation */
+  ::view-transition-group(root) {
+    animation-duration: 250ms;
+  }
+
+  /* Do not slide over the sidebars */
+  ::view-transition-group(*) {
+    overflow: hidden;
+  }
+</style>