From 8c52e6c4811e45e6137adbab0ffc3aed39a09d78 Mon Sep 17 00:00:00 2001
From: vincanger <70215737+vincanger@users.noreply.github.com>
Date: Wed, 6 Dec 2023 12:44:18 +0100
Subject: [PATCH] fix docs header and links

---
 docs/astro.config.mjs              | 10 ++--
 docs/constants.ts                  |  1 +
 docs/src/components/MyHeader.astro | 89 ++++++++++++++++++++++++++++++
 docs/src/virtual.d.ts              | 22 ++++++++
 4 files changed, 118 insertions(+), 4 deletions(-)
 create mode 100644 docs/constants.ts
 create mode 100644 docs/src/components/MyHeader.astro
 create mode 100644 docs/src/virtual.d.ts

diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
index 1c6593e..1b64ffd 100644
--- a/docs/astro.config.mjs
+++ b/docs/astro.config.mjs
@@ -1,13 +1,14 @@
 import { defineConfig } from 'astro/config';
 import starlight from '@astrojs/starlight';
 import starlightBlog from 'starlight-blog';
+import { BASE_URL } from './constants';
 
 // https://astro.build/config
 export default defineConfig({
-  site: 'https://opensaas.sh',
+  site: BASE_URL,
   integrations: [
     starlightBlog({
-      title: 'The Best Blog Ever',
+      title: 'Blog',
       authors: {
         vince: {
           name: 'Vince',
@@ -18,7 +19,7 @@ export default defineConfig({
       },
     }),
     starlight({
-      title: 'Open SaaS',
+      title: 'OpenSaaS.sh', 
       description: 'Open SaaS is a free, open-source, full-stack SaaS starter kit for React + NodeJS.',
       logo: {
         src: '/src/assets/logo.png',
@@ -28,9 +29,10 @@ export default defineConfig({
         baseUrl: 'https://github.com/wasp-lang/open-saas/edit/main',
       },
       components: {
+        SiteTitle: './src/components/MyHeader.astro',
         MarkdownContent: 'starlight-blog/overrides/MarkdownContent.astro',
         Sidebar: 'starlight-blog/overrides/Sidebar.astro',
-        ThemeSelect: 'starlight-blog/overrides/ThemeSelect.astro',
+        // ThemeSelect: 'starlight-blog/overrides/ThemeSelect.astro',
       },
       social: {
         github: 'https://github.com/wasp-lang/open-saas',
diff --git a/docs/constants.ts b/docs/constants.ts
new file mode 100644
index 0000000..f4a2adc
--- /dev/null
+++ b/docs/constants.ts
@@ -0,0 +1 @@
+export const BASE_URL = 'https://opensaas.sh'
\ No newline at end of file
diff --git a/docs/src/components/MyHeader.astro b/docs/src/components/MyHeader.astro
new file mode 100644
index 0000000..85caf4b
--- /dev/null
+++ b/docs/src/components/MyHeader.astro
@@ -0,0 +1,89 @@
+---
+import { logos } from 'virtual:starlight/user-images';
+import config from 'virtual:starlight/user-config';
+import blogConfig from 'virtual:starlight-blog-config'
+import type { Props } from '@astrojs/starlight/props';
+import { BASE_URL } from '../../constants';
+
+---
+<a href={BASE_URL} class="site-title 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}
+					/>
+				)}
+			</>
+		)
+	}
+	<span class:list={{ 'sr-only': config.logo?.replacesTitle }}>
+		{config.title}
+	</span>
+</a>
+<div>
+  <a href="/">Docs</a>
+</div>
+<div>
+  <a href="/blog">{blogConfig.title}</a>
+</div>
+
+<style>
+	.site-title {
+		justify-self: flex-start;
+		max-width: 100%;
+		overflow: hidden;
+		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;
+    padding-inline-end: 1rem;
+    border-inline-end: 1px solid var(--sl-color-gray-5);
+	}
+	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%;
+	}
+  div {
+    border-inline-end: 1px solid var(--sl-color-gray-5);
+    margin-left: 1rem;
+    align-self: center;
+    gap: 1rem;
+    height: 100%;
+    padding-inline-end: 1rem;
+  }
+
+  @media (min-width: 50rem) {
+    div {
+      align-items: center;
+      display: flex;
+    }
+  }
+  a {
+    color: var(--sl-color-text-accent);
+    font-weight: 600;
+    text-decoration: none;
+  }
+  a:hover {
+		opacity: 0.66;
+	}
+</style>
\ No newline at end of file
diff --git a/docs/src/virtual.d.ts b/docs/src/virtual.d.ts
new file mode 100644
index 0000000..1cacca4
--- /dev/null
+++ b/docs/src/virtual.d.ts
@@ -0,0 +1,22 @@
+declare module 'virtual:starlight-blog-config' {
+  const StarlightBlogConfig: import('./libs/config').StarlightBlogConfig;
+
+  export default StarlightBlogConfig;
+}
+declare module 'virtual:starlight/user-config' {
+  const Config: import('@astrojs/starlight/types').StarlightConfig;
+
+  export default Config;
+}
+declare module 'virtual:starlight/user-images' {
+  type ImageMetadata = import('astro').ImageMetadata;
+  export const logos: {
+    dark?: ImageMetadata;
+    light?: ImageMetadata;
+  };
+}
+declare module 'virtual:astro-config' {
+  const Config: import('@astrojs/types').Config;
+
+  export default Config;
+}
\ No newline at end of file