feat: add contributors and badge to doc pages (#170)

docs/astro.config.mjs

@@ -26,6 +26,10 @@ export default defineConfig({
 					autogenerate: { directory: 'utilities' },
 				},
 			],
+			components: {
+				PageTitle: './src/components/PageTitle.astro',
+				MarkdownContent: './src/components/Content.astro',
+			},
 		}),
 	],
 });

docs/src/components/Content.astro

@@ -0,0 +1,19 @@
+---
+import Default from '@astrojs/starlight/components/MarkdownContent.astro';
+import type { Props } from '@astrojs/starlight/props';
+
+const {contributor} = Astro.props.entry.data;
+
+---
+
+{ contributor && <p class="contributor">Created by {contributor}</p> }
+
+<Default {...Astro.props}><slot /></Default>
+
+<style>
+    .contributor {
+        margin-top: -1rem;
+        font-size: var(--sl-text-xs);
+        color: var(--sl-color-gray-3);
+    }
+</style>

docs/src/components/PageTitle.astro

@@ -0,0 +1,37 @@
+---
+import Default from '@astrojs/starlight/components/PageTitle.astro';
+import type { Props } from '@astrojs/starlight/props';
+
+const badge = Astro.props.entry.data.badge;
+---
+
+<div class="page-title-content">
+    <Default {...Astro.props}><slot /></Default>
+    {badge && <div class="chip">{badge}</div> }
+</div>
+
+<style>
+    .page-title-content {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    @media (max-width: 1010px) {
+        .page-title-content {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+    } 
+
+    .chip {
+        border-width: 1px;
+        border-style: solid;
+        border-radius: 6px;
+        padding: 2px 8px;
+        color: var(--sl-color-text);
+        width: fit-content;
+        height: fit-content;
+        margin-top: 1rem;
+    }
+</style>

docs/src/content/config.ts

@@ -1,7 +1,13 @@
 import { docsSchema, i18nSchema } from '@astrojs/starlight/schema';
-import { defineCollection } from 'astro:content';
+import { defineCollection, z } from 'astro:content';
 
 export const collections = {
-	docs: defineCollection({ schema: docsSchema() }),
+	docs: defineCollection({
+		schema: (ctx) =>
+			docsSchema()(ctx).extend({
+				badge: z.enum(['stable', 'unstable', 'experimental']).optional(),
+				contributor: z.string().optional(),
+			}),
+	}),
 	i18n: defineCollection({ type: 'data', schema: i18nSchema() }),
 };

docs/src/content/docs/utilities/Operators/filter-array.md

@@ -1,6 +1,8 @@
 ---
 title: filterArray
 description: An RxJS operator to simplify the process of filtering arrays within an Observable stream.
+badge: stable
+contributor: Thomas Laforge
 ---
 
 ## Import

docs/src/content/docs/utilities/Operators/filter-nil.md

@@ -1,6 +1,8 @@
 ---
 title: filterNil
 description: An RxJS operator designed to filter out `undefined` and `null` values from an Observable stream, returning a strongly-typed value.
+badge: stable
+contributor: Thomas Laforge
 ---
 
 ## Import

docs/src/content/docs/utilities/Operators/map-array.md

@@ -1,6 +1,8 @@
 ---
 title: mapArray
 description: An RxJS operator designed to apply a map function to an array within an Observable stream, simplifying array transformations.
+badge: stable
+contributor: Thomas Laforge
 ---
 
 ## Import