Add new Head component and update dependencies

A new Head component has been added and interactions with view transitions have been defined within it. The .webp format is now being used for social media metadata. Also, astro-vtbot has been added as a new dependency.

astro.config.mjs

@@ -79,15 +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.0",
         "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.0",
+      "resolved": "https://registry.npmjs.org/astro-vtbot/-/astro-vtbot-1.7.0.tgz",
+      "integrity": "sha512-AYjOVDVNsRuwfIAoxe4/0AQKgNVKLLqw8Rs9Olq8x0Oa4x3aVCAohsBO5zOpYf390x4uGmvI1+HFUtGkhCL2gw==",
+      "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.0",
     "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>