feat: Enhance Astro configuration with new SiteTitle component, update project title, and add new documentation on security infrastructure. Upgrade dependencies and introduce CNAME for custom domain.

Author: Jibbscript

astro.config.mjs

@@ -2,22 +2,21 @@
 import { defineConfig } from 'astro/config';
 import starlight from '@astrojs/starlight';
 import starlightBlog from 'starlight-blog';
+import starlightThemeFlexoki from 'starlight-theme-flexoki';
 
 // https://astro.build/config
 export default defineConfig({
 	integrations: [
 		starlight({
-			title: 'JibbScript',
+			title: 'Yarp.Cloud',
 			plugins: [
+				starlightThemeFlexoki(),
 				starlightBlog(),
 			],
-			// Add logo
-			logo: {
-				src: './src/assets/yarpdotcloudpokemonlogo.svg',
-			  },
+			// Logo now handled by custom SiteTitle component
 			social: [
-				{ icon: 'github', label: 'GitHub', href: 'https://github.com/jibbscript' },
-				{ icon: 'linkedin', label: 'LinkedIn', href: 'https://linkedin.com/in/gibran.iqbal' },
+				{ icon: 'github', label: 'GitHub', href: 'https://www.github.com/jibbscript' },
+				{ icon: 'linkedin', label: 'LinkedIn', href: 'https://www.linkedin.com/in/gibran-iqbal/' },
 				{ icon: 'email', label: 'Email', href: 'mailto:giqbal@gibraniq.com' },
 			],
 			sidebar: [
@@ -27,11 +26,14 @@ export default defineConfig({
 						// Each item here is one entry in the navigation menu.
 						{ label: 'Rangency', slug: 'reflections/rangency' },
 						{ label: 'FedRAMP Data Mesh Reference Architecture', slug: 'fedramp/fedramp-datamesh' },
-						{ label: 'Security Infrastructure MVP Collection', slug: 'security/security-infrastructure-mvp-collection/security-infra-mvp-product-req-docs' },
+						{ label: 'Security Infrastructure MVP Collection', slug: 'security/security-infrastructure-mvp-collection/infra-security-projects' },
 					],
 				},
 			],
 
+			components: {
+				SiteTitle: './src/components/SiteTitle.astro',
+			},
 		}),
 	],
 	site: 'https://www.yarp.cloud',

package-lock.json

@@ -11,9 +11,10 @@
   },
   "dependencies": {
     "@astrojs/starlight": "^0.34.3",
-    "astro": "^5.8.0",
+    "astro": "^5.9.2",
     "better-sqlite3": "^11.9.1",
     "sharp": "^0.32.5",
-    "starlight-blog": "^0.21.0"
+    "starlight-blog": "^0.21.0",
+    "starlight-theme-flexoki": "^0.1.0"
   }
 }

package.json

@@ -0,0 +1 @@
+yarp.cloud

public/CNAME

@@ -0,0 +1,48 @@
+---
+import { Image } from "astro:assets";
+import config from "virtual:starlight/user-config";
+import logo from "../assets/yarpdotcloudpokemonlogo.svg";
+
+const { locale } = Astro.props;
+// Get the site title from config, handling localization
+const siteTitle =
+  typeof config.title === "string"
+    ? config.title
+    : config.title?.[locale] || config.title?.["en"] || "YarpDotCloud";
+---
+
+<a href={import.meta.env.BASE_URL} class="site-title">
+  <Image
+    src={logo}
+    alt="YarpDotCloud Logo"
+    width={93}
+    height={93}
+    loading="eager"
+    decoding="async"
+    class="logo"
+  />
+</a>
+
+<style>
+  .site-title {
+    align-items: center;
+    color: inherit;
+    display: flex;
+    font-size: var(--sl-text-h4);
+    font-weight: 600;
+    gap: 0.5rem;
+    text-decoration: none;
+  }
+
+  .logo {
+    flex-shrink: 0;
+    max-height: 100%;
+    object-fit: contain;
+  }
+
+  @media (min-width: 50rem) {
+    .site-title {
+      font-size: var(--sl-text-h3);
+    }
+  }
+</style>

src/components/SiteTitle.astro

@@ -0,0 +1,11 @@
+---
+title: Example Guide
+description: A guide in my new Starlight docs site.
+---
+
+Guides lead a user through a specific task they want to accomplish, often with a sequence of steps.
+Writing a good guide requires thinking about what your users are trying to do.
+
+## Further reading
+
+- Read [about how-to guides](https://diataxis.fr/how-to-guides/) in the Diátaxis framework