feat: add link back to homepage from documentation

astro.config.mjs

@@ -17,7 +17,7 @@ export default defineConfig({
   locales,
   integrations: [
     starlight({
-      title: "AstroNvim Docs",
+      title: "AstroNvim Documentation",
       description: "The documentation website for AstroNvim.",
       favicon: "/astronvim.svg",
       head: [
@@ -115,6 +115,9 @@ export default defineConfig({
       logo: {
         src: "./src/assets/astronvim.svg",
       },
+      components: {
+        SiteTitle: "./src/components/SiteTitle.astro",
+      },
       plugins: [
         starlightDocSearch({
           appId: "JXZNTZ86UN",

src/components/SiteTitle.astro

@@ -0,0 +1,57 @@
+---
+import { logos } from "virtual:starlight/user-images";
+import config from "virtual:starlight/user-config";
+import type { Props } from "@astrojs/starlight/props";
+
+const href = "/";
+---
+
+<span class="site-title sl-flex">
+  <a href="https://astronvim.com" class="sl-flex">
+    {
+      config.logo && logos.dark && (
+        <>
+          <img
+            class:list={{ "light:sl-hidden": !("src" in config.logo) }}
+            alt={config.logo.alt}
+            src={logos.dark.src}
+            width={logos.dark.width}
+            height={logos.dark.height}
+          />
+          {/* Show light alternate if a user configure both light and dark logos. */}
+          {!("src" in config.logo) && (
+            <img
+              class="dark:sl-hidden"
+              alt={config.logo.alt}
+              src={logos.light?.src}
+              width={logos.light?.width}
+              height={logos.light?.height}
+            />
+          )}
+        </>
+      )
+    }
+  </a>
+  <span class:list={{ "sr-only": config.logo?.replacesTitle }}>
+    <a {href} class="site-title">{config.title}</a>
+  </span>
+</span>
+
+<style>
+  .site-title {
+    align-items: center;
+    gap: var(--sl-nav-gap);
+    font-size: var(--sl-text-h4);
+    font-weight: 600;
+    color: var(--sl-color-text-accent);
+    text-decoration: none;
+    white-space: nowrap;
+  }
+  img {
+    height: calc(var(--sl-nav-height) - 2 * var(--sl-nav-pad-y));
+    width: auto;
+    max-width: 100%;
+    object-fit: contain;
+    object-position: 0 50%;
+  }
+</style>