Fix Astro Island margins in Markdown

docs/astro.config.mjs

@@ -3,6 +3,8 @@ import { defineConfig } from 'astro/config';
 import starlight from '@astrojs/starlight';
 import starlightLinksValidator from 'starlight-links-validator';
 import markdocGrammar from './grammars/markdoc.tmLanguage.json';
+// TODO(HiDeoo) Remove
+import preact from '@astrojs/preact';
 
 export const locales = {
 	root: { label: 'English', lang: 'en' },
@@ -34,6 +36,8 @@ export default defineConfig({
 	site,
 	trailingSlash: 'always',
 	integrations: [
+		// TODO(HiDeoo) Remove
+		preact(),
 		starlight({
 			title: 'Starlight',
 			logo: {

docs/package.json

@@ -17,11 +17,13 @@
   },
   "dependencies": {
     "@astro-community/astro-embed-youtube": "^0.5.6",
+    "@astrojs/preact": "^4.1.0",
     "@astrojs/starlight": "workspace:*",
     "@lunariajs/core": "^0.1.1",
     "@types/culori": "^2.1.1",
     "astro": "^5.6.1",
     "culori": "^4.0.1",
+    "preact": "^10.26.9",
     "sharp": "^0.34.2"
   },
   "devDependencies": {

docs/src/components/Debug.tsx

@@ -0,0 +1,28 @@
+import type { ComponentChildren } from 'preact';
+
+export function IslandBlock() {
+	return <p>This is an Astro Island block.</p>;
+}
+
+export function IslandInline() {
+	return <a href="#">Island inline link</a>;
+}
+
+export function IslandBlocks() {
+	return (
+		<>
+			<p>This is an Astro Island block.</p>
+			<p>And another block</p>
+		</>
+	);
+}
+
+export function IslandSlot(props: { children: ComponentChildren }) {
+	return (
+		<>
+			<p>This is an Astro Island block START.</p>
+			{props.children}
+			<p>This is an Astro Island block END.</p>
+		</>
+	);
+}

docs/src/content/docs/getting-started.mdx

@@ -3,6 +3,44 @@ title: Getting Started
 description: Learn how to start building your next documentation site with Starlight by Astro.
 ---
 
+{/* TODO(HiDeoo)  Remove this debug section */}
+
+## Debug
+
+import {
+	IslandBlock,
+	IslandInline,
+	IslandBlocks,
+	IslandSlot,
+} from '../../components/Debug';
+
+This is a debug section.
+
+<IslandBlock client:idle />
+
+And this is an <IslandInline client:idle />.
+
+<IslandBlock client:idle />
+<IslandBlock client:idle />
+
+And multiple blocks:
+
+<IslandBlocks client:idle />
+
+Wrapped (not broken):
+
+<div>
+	<IslandBlock client:idle />
+</div>
+
+With slot:
+
+<IslandSlot client:idle>
+	<p>This is the slot content.</p>
+</IslandSlot>
+
+{/* TODO(HiDeoo)  End of debug section */}
+
 import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 Starlight is a full-featured documentation theme built on top of the [Astro](https://astro.build) framework.

docs/tsconfig.json

@@ -4,6 +4,8 @@
     "baseUrl": ".",
     "paths": {
       "~/*": ["src/*"]
-    }
+    },
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
   }
 }

packages/starlight/style/markdown.css

@@ -5,6 +5,23 @@
 		margin-top: 1rem;
 	}
 
+	/* TODO(HiDeoo) Remove these debug rules */
+	astro-island > :first-child {
+		border: 1px dashed var(--sl-color-red);
+	}
+	[data-theme='light'] astro-island > :first-child {
+		border-color: var(--sl-color-red-high);
+	}
+
+	.sl-markdown-content
+		:not(a, strong, em, del, span, input, code, br)
+		+ :is(astro-island, astro-slot)
+		> :not(a, strong, em, del, span, input, code, br, :where(.not-content *)):first-child {
+		margin-top: 1rem;
+		/* TODO(HiDeoo) Remove this debug rule */
+		background-color: var(--sl-color-green-low);
+	}
+
 	/* Headings after non-headings have more spacing. */
 	.sl-markdown-content
 		:not(h1, h2, h3, h4, h5, h6)