From 5cac9eb7828300f99c4c0b798a58ac6fa3ef7493 Mon Sep 17 00:00:00 2001
From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com>
Date: Tue, 2 Apr 2024 03:58:26 +0400
Subject: [PATCH] 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                       |  5 +++--
 package-lock.json                      | 11 +++++++++++
 package.json                           |  1 +
 src/components/ui/starlight/Head.astro | 26 ++++++++++++++++++++++++++
 4 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ui/starlight/Head.astro

diff --git a/astro.config.mjs b/astro.config.mjs
index 61dc4ed..33dd862 100644
--- a/astro.config.mjs
+++ b/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" },
         },
       ],
     }),
diff --git a/package-lock.json b/package-lock.json
index 8f46db6..f7d85ff 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 008a86c..5ef326c 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/ui/starlight/Head.astro b/src/components/ui/starlight/Head.astro
new file mode 100644
index 0000000..5ce9c40
--- /dev/null
+++ b/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>