[Docs Site] Remove trailing whitespace from Type component (#20275)

* [Docs Site] Remove trailing whitespace from Type component

* remove unused import

Author: KianNH

src/components/Type.astro

@@ -1,6 +1,7 @@
 ---
 import { z } from "astro:schema";
 import { Badge } from "@astrojs/starlight/components";
+import { componentToString } from "~/util/container";
 
 type Props = z.infer<typeof props>;
 
@@ -11,15 +12,17 @@ const props = z
 	.strict();
 
 const { text } = props.parse(Astro.props);
----
 
-<Badge
-	text={text}
-	style={{
+const html = await componentToString(Badge, {
+	text,
+	style: {
 		color: "var(--sl-text-white)",
 		backgroundColor: "var(--sl-color-gray-6)",
 		borderColor: "var(--sl-color-gray-3)",
 		fontSize: "0.7rem",
 		fontWeight: "bold",
-	}}
-/>
+	},
+});
+---
+
+<Fragment set:html={html.trim()} />

src/util/container.ts

@@ -2,6 +2,7 @@ import { experimental_AstroContainer } from "astro/container";
 import { getContainerRenderer } from "@astrojs/mdx";
 import { loadRenderers } from "astro:container";
 import { render, type CollectionEntry } from "astro:content";
+import type { AstroComponentFactory } from "astro/runtime/server/index.js";
 
 export async function entryToString(
 	entry: CollectionEntry<"docs" | "changelog">,
@@ -25,3 +26,19 @@ export async function entryToString(
 
 	return html;
 }
+
+export async function componentToString(
+	component: AstroComponentFactory,
+	props: any,
+) {
+	const renderers = await loadRenderers([getContainerRenderer()]);
+	const container = await experimental_AstroContainer.create({
+		renderers,
+	});
+
+	const html = await container.renderToString(component, {
+		props,
+	});
+
+	return html;
+}