withastro · totto2727 · Nov 27, 2024 · Nov 27, 2024 · Nov 27, 2024 · Nov 27, 2024
diff --git a/.changeset/real-adults-lie.md b/.changeset/real-adults-lie.md
@@ -0,0 +1,8 @@
+---
+'@astrojs/starlight': minor
+---
+
+Add SimpleStarlightPage
+
+- refactor: extract part of `Page.astro` to `Layout.astro`
+- feat: add `SimpleStarlightPage.astro`
diff --git a/docs/src/content/docs/guides/pages.mdx b/docs/src/content/docs/guides/pages.mdx
@@ -89,6 +89,39 @@ import CustomComponent from './CustomComponent.astro';
 </StarlightPage>
 ```
 
+### Using Starlight’s minimum layout in custom pages
+
+If you want to use Starlight’s design but don’t need the full layout, wrap your page content with the `<SimpleStarlightPage />` component. This will inherit only the `head` tag and user CSS, without any other styles or layout.
+
+```astro
+---
+// src/pages/custom-page/example.astro
+import SimpleStarlightPage from '@astrojs/starlight/components/SimpleStarlightPage.astro';
+import CustomComponent from './CustomComponent.astro';
+---
+
+<SimpleStarlightPage frontmatter={{ title: 'My custom page' }}>
+	<p>This is a custom page with a custom component:</p>
+	<CustomComponent />
+</SimpleStarlightPage>
+```
+
+If you need to set up everything from scratch, you can set up the `html` tag yourself.
+
+```astro
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>My custom page</title>
+	</head>
+	<body>
+		<p>This is a custom page with a custom component:</p>
+		<CustomComponent />
+	</body>
+</html>
+```
+
 #### Props
 
 The `<StarlightPage />` component accepts the following props.

diff --git a/docs/src/content/docs/ja/guides/pages.mdx b/docs/src/content/docs/ja/guides/pages.mdx
@@ -82,6 +82,39 @@ import CustomComponent from './CustomComponent.astro';
 </StarlightPage>
 ```
 
+### カスタムページでStarlightの最低限のレイアウトのみ使用する
+
+カスタムページでStarlightのデザインを利用したくない場合は、`<SimpleStarlightPage />`コンポーネントでラップします。これは、コンテンツを動的に生成したいものの、Starlightのデザインを使用したくない場合に役立ちます。`head`タグとユーザーCSSのみ継承し、それ以外のスタイルとレイアウトは一切継承しません。
+
+```astro
+---
+// src/pages/custom-page/example.astro
+import SimpleStarlightPage from '@astrojs/starlight/components/SimpleStarlightPage.astro';
+import CustomComponent from './CustomComponent.astro';
+---
+
+<SimpleStarlightPage frontmatter={{ title: '私のカスタムページ' }}>
+	<p>これはカスタムコンポーネントを用いたカスタムページです:</p>
+	<CustomComponent />
+</SimpleStarlightPage>
+```
+
+全てを1から設定する必要がある場合は、独自に`html`タグから設定してください。
+
+```astro
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>私のカスタムページ</title>
+	</head>
+	<body>
+		<p>これはカスタムコンポーネントを用いたカスタムページです:</p>
+		<CustomComponent />
+	</body>
+</html>
+```
+
 #### Props
 
 `<StarlightPage />`コンポーネントは以下のpropsを受け付けます。

diff --git a/packages/starlight/components/Layout.astro b/packages/starlight/components/Layout.astro
@@ -0,0 +1,25 @@
+---
+import type { Props } from '../props';
+
+import Head from 'virtual:starlight/components/Head';
+import ThemeProvider from 'virtual:starlight/components/ThemeProvider';
+
+// Important that this is the last import so it can override built-in styles.
+import 'virtual:starlight/user-css';
+---
+
+<html
+	lang={Astro.props.lang}
+	dir={Astro.props.dir}
+	data-has-toc={Boolean(Astro.props.toc)}
+	data-has-sidebar={Astro.props.hasSidebar}
+	data-has-hero={Boolean(Astro.props.entry.data.hero)}
+	data-theme="dark"
+>
+	<head>
+		<Head {...Astro.props} />
+		<slot name="head" />
+		<ThemeProvider {...Astro.props} />
+	</head>
+	<body><slot /></body>
+</html>
diff --git a/packages/starlight/components/Page.astro b/packages/starlight/components/Page.astro
@@ -13,7 +13,6 @@ import ContentPanel from 'virtual:starlight/components/ContentPanel';
 import FallbackContentNotice from 'virtual:starlight/components/FallbackContentNotice';
 import DraftContentNotice from 'virtual:starlight/components/DraftContentNotice';
 import Footer from 'virtual:starlight/components/Footer';
-import Head from 'virtual:starlight/components/Head';
 import Header from 'virtual:starlight/components/Header';
 import Hero from 'virtual:starlight/components/Hero';
 import MarkdownContent from 'virtual:starlight/components/MarkdownContent';
@@ -22,101 +21,85 @@ import PageSidebar from 'virtual:starlight/components/PageSidebar';
 import PageTitle from 'virtual:starlight/components/PageTitle';
 import Sidebar from 'virtual:starlight/components/Sidebar';
 import SkipLink from 'virtual:starlight/components/SkipLink';
-import ThemeProvider from 'virtual:starlight/components/ThemeProvider';
 import TwoColumnContent from 'virtual:starlight/components/TwoColumnContent';
+import Layout from './Layout.astro';
 
 // Remark component CSS (needs to override `MarkdownContent.astro`)
 import '../style/asides.css';
 
-// Important that this is the last import so it can override built-in styles.
-import 'virtual:starlight/user-css';
-
 const pagefindEnabled =
 	Astro.props.entry.slug !== '404' &&
 	!Astro.props.entry.slug.endsWith('/404') &&
 	Astro.props.entry.data.pagefind !== false;
 ---
 
-<html
-	lang={Astro.props.lang}
-	dir={Astro.props.dir}
-	data-has-toc={Boolean(Astro.props.toc)}
-	data-has-sidebar={Astro.props.hasSidebar}
-	data-has-hero={Boolean(Astro.props.entry.data.hero)}
-	data-theme="dark"
->
-	<head>
-		<Head {...Astro.props} />
-		<style>
-			html:not([data-has-toc]) {
-				--sl-mobile-toc-height: 0rem;
-			}
-			html:not([data-has-sidebar]) {
-				--sl-content-width: 67.5rem;
+<Layout {...Astro.props}>
+	<style slot="head">
+		html:not([data-has-toc]) {
+			--sl-mobile-toc-height: 0rem;
+		}
+		html:not([data-has-sidebar]) {
+			--sl-content-width: 67.5rem;
+		}
+		/* Add scroll padding to ensure anchor headings aren't obscured by nav */
+		html {
+			/* Additional padding is needed to account for the mobile TOC */
+			scroll-padding-top: calc(1.5rem + var(--sl-nav-height) + var(--sl-mobile-toc-height));
+		}
+		main {
+			padding-bottom: 3vh;
+		}
+		@media (min-width: 50em) {
+			[data-has-sidebar] {
-			[data-has-sidebar] {
+			:global(:root[data-has-sidebar]) {
-			[data-has-sidebar] {
+			:global(:root[data-has-sidebar]) {
+				--sl-content-inline-start: var(--sl-sidebar-width);
 			}
-			/* Add scroll padding to ensure anchor headings aren't obscured by nav */
+		}
+		@media (min-width: 72em) {
 			html {
-				/* Additional padding is needed to account for the mobile TOC */
-				scroll-padding-top: calc(1.5rem + var(--sl-nav-height) + var(--sl-mobile-toc-height));
-			}
-			main {
-				padding-bottom: 3vh;
-			}
-			@media (min-width: 50em) {
-				[data-has-sidebar] {
-					--sl-content-inline-start: var(--sl-sidebar-width);
-				}
+				scroll-padding-top: calc(1.5rem + var(--sl-nav-height));
 			}
-			@media (min-width: 72em) {
-				html {
-					scroll-padding-top: calc(1.5rem + var(--sl-nav-height));
-				}
-			}
-		</style>
-		<ThemeProvider {...Astro.props} />
-	</head>
-	<body>
-		<SkipLink {...Astro.props} />
-		<PageFrame {...Astro.props}>
-			<Header slot="header" {...Astro.props} />
-			{Astro.props.hasSidebar && <Sidebar slot="sidebar" {...Astro.props} />}
-			<script src="./SidebarPersistState"></script>
-			<TwoColumnContent {...Astro.props}>
-				<PageSidebar slot="right-sidebar" {...Astro.props} />
-				<main
-					data-pagefind-body={pagefindEnabled}
-					lang={Astro.props.entryMeta.lang}
-					dir={Astro.props.entryMeta.dir}
-				>
-					{/* TODO: Revisit how this logic flows. */}
-					<Banner {...Astro.props} />
-					{
-						Astro.props.entry.data.hero ? (
+		}
+	</style>
+	<SkipLink {...Astro.props} />
+	<PageFrame {...Astro.props}>
+		<Header slot="header" {...Astro.props} />
+		{Astro.props.hasSidebar && <Sidebar slot="sidebar" {...Astro.props} />}
+		<script src="./SidebarPersistState"></script>
+		<TwoColumnContent {...Astro.props}>
+			<PageSidebar slot="right-sidebar" {...Astro.props} />
+			<main
+				data-pagefind-body={pagefindEnabled}
+				lang={Astro.props.entryMeta.lang}
+				dir={Astro.props.entryMeta.dir}
+			>
+				{/* TODO: Revisit how this logic flows. */}
+				<Banner {...Astro.props} />
+				{
+					Astro.props.entry.data.hero ? (
+						<ContentPanel {...Astro.props}>
+							<Hero {...Astro.props} />
+							<MarkdownContent {...Astro.props}>
+								<slot />
+							</MarkdownContent>
+							<Footer {...Astro.props} />
+						</ContentPanel>
+					) : (
+						<>
+							<ContentPanel {...Astro.props}>
+								<PageTitle {...Astro.props} />
+								{Astro.props.entry.data.draft && <DraftContentNotice {...Astro.props} />}
+								{Astro.props.isFallback && <FallbackContentNotice {...Astro.props} />}
+							</ContentPanel>
 							<ContentPanel {...Astro.props}>
-								<Hero {...Astro.props} />
 								<MarkdownContent {...Astro.props}>
 									<slot />
 								</MarkdownContent>
 								<Footer {...Astro.props} />
 							</ContentPanel>
-						) : (
-							<>
-								<ContentPanel {...Astro.props}>
-									<PageTitle {...Astro.props} />
-									{Astro.props.entry.data.draft && <DraftContentNotice {...Astro.props} />}
-									{Astro.props.isFallback && <FallbackContentNotice {...Astro.props} />}
-								</ContentPanel>
-								<ContentPanel {...Astro.props}>
-									<MarkdownContent {...Astro.props}>
-										<slot />
-									</MarkdownContent>
-									<Footer {...Astro.props} />
-								</ContentPanel>
-							</>
-						)
-					}
-				</main>
-			</TwoColumnContent>
-		</PageFrame>
-	</body>
-</html>
+						</>
+					)
+				}
+			</main>
+		</TwoColumnContent>
+	</PageFrame>
+</Layout>
diff --git a/packages/starlight/components/StarlightHeadlessPage.astro b/packages/starlight/components/StarlightHeadlessPage.astro
@@ -0,0 +1,13 @@
+---
+import {
+	generateStarlightPageRouteData,
+	type StarlightPageProps as Props,
+} from '../utils/starlight-page';
+import Layout from './Layout.astro';
+
+export type StarlightPageProps = Props;
+---
+
+<Layout {...await generateStarlightPageRouteData({ props: Astro.props, url: Astro.url })}>
+	<slot />
+</Layout>
diff --git a/packages/starlight/package.json b/packages/starlight/package.json
@@ -100,10 +100,18 @@
       "types": "./components/DraftContentNotice.astro.tsx",
       "import": "./components/DraftContentNotice.astro"
     },
+    "./components/Layout.astro": {
+      "types": "./components/Layout.astro.tsx",
+      "import": "./components/Layout.astro"
+    },
     "./components/Page.astro": {
       "types": "./components/Page.astro.tsx",
       "import": "./components/Page.astro"
     },
+    "./components/SimpleStarlightPage.astro": {
+      "types": "./components/SimpleStarlightPage.astro.tsx",
+      "import": "./components/SimpleStarlightPage.astro"
+    },
     "./components/StarlightPage.astro": {
       "types": "./components/StarlightPage.astro.tsx",
       "import": "./components/StarlightPage.astro"