Update custom header implementation (#35)

astro.config.mjs

@@ -1,13 +1,10 @@
 import { defineConfig } from "astro/config";
 import starlight from "@astrojs/starlight";
 
-import overrideIntegration from "./src/overrideIntegration.mjs";
-
 // https://astro.build/config
 export default defineConfig({
   site: "https://paymentpointers.org",
   integrations: [
-    overrideIntegration(),
     starlight({
       title: "Payment Pointers",
       description:
@@ -16,6 +13,9 @@ export default defineConfig({
         "./node_modules/@interledger/docs-design-system/src/styles/green-theme.css",
         "./node_modules/@interledger/docs-design-system/src/styles/ilf-docs.css",
       ],
+      components: {
+        Header: "./src/components/Header.astro",
+      },
       social: {
         github: "https://github.com/interledger/paymentpointers.org",
       },
@@ -30,9 +30,6 @@ export default defineConfig({
       ],
     }),
   ],
-
-  // Process images with sharp: https://docs.astro.build/en/guides/assets/#using-sharp
-  image: { service: { entrypoint: "astro/assets/services/sharp" } },
   server: {
     port: 1102,
   },

package.json

@@ -8,8 +8,8 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/starlight": "^0.10.4",
-    "@interledger/docs-design-system": "^0.0.13",
+    "@astrojs/starlight": "^0.11.0",
+    "@interledger/docs-design-system": "^0.0.14",
     "astro": "latest",
     "sharp": "^0.32.6"
   }

src/overrides/Header.astro → src/components/Header.astro

@@ -1,18 +1,17 @@
 ---
+import type { Props } from '@astrojs/starlight/props';
+import SiteTitle from "@astrojs/starlight/components/SiteTitle.astro";
 import Search from "@astrojs/starlight/components/Search.astro";
 import ThemeSelect from "@astrojs/starlight/components/ThemeSelect.astro";
-import SiteTitle from '@astrojs/starlight/components/SiteTitle.astro';
-import SocialIcons from '@astrojs/starlight/components/SocialIcons.astro';
-
-const { locale } = Astro.props;
+import SocialIcons from "@astrojs/starlight/components/SocialIcons.astro";
 ---
 <div class="header sl-flex">
-  <SiteTitle {locale} />
+  <SiteTitle {...Astro.props} />
   <div class="secondary-wrap">
-    <Search {locale} />
-    <div class="sl-hidden selects md:sl-flex">
-      <SocialIcons />
-      <ThemeSelect {locale} />
+    <Search {...Astro.props} />
+    <SocialIcons {...Astro.props} />
+    <div class="sl-hidden md:sl-flex">
+      <ThemeSelect {...Astro.props} />
     </div>
   </div>
 </div>
@@ -36,11 +35,6 @@ const { locale } = Astro.props;
     gap: var(--sl-nav-gap);
   }
 
-  .selects {
-    gap: var(--sl-nav-gap);
-    align-items: center;
-  }
-
   .site-logo {
     display: flex;
     align-items: center;