From d3aefb0ddc0c9494a2f01cd38de26de02ef508cc Mon Sep 17 00:00:00 2001 From: totto2727 Date: Thu, 28 Nov 2024 01:31:27 +0900 Subject: [PATCH 1/4] feat: add Simple Layout without default styles and components --- packages/starlight/components/Layout.astro | 25 ++++ packages/starlight/components/Page.astro | 141 ++++++++---------- .../components/StarlightHeadlessPage.astro | 13 ++ packages/starlight/package.json | 8 + 4 files changed, 108 insertions(+), 79 deletions(-) create mode 100644 packages/starlight/components/Layout.astro create mode 100644 packages/starlight/components/StarlightHeadlessPage.astro diff --git a/packages/starlight/components/Layout.astro b/packages/starlight/components/Layout.astro new file mode 100644 index 00000000000..758e7cb3f37 --- /dev/null +++ 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'; +--- + + + + + + + + + diff --git a/packages/starlight/components/Page.astro b/packages/starlight/components/Page.astro index 0ab90d1bacb..7ab479c53b9 100644 --- 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; --- - - - - - - - - - -
- {Astro.props.hasSidebar && } - - - -
- {/* TODO: Revisit how this logic flows. */} - - { - Astro.props.entry.data.hero ? ( + } + + + +
+ {Astro.props.hasSidebar && } + + + +
+ {/* TODO: Revisit how this logic flows. */} + + { + Astro.props.entry.data.hero ? ( + + + + + +
+ + ) : ( + <> + + + {Astro.props.entry.data.draft && } + {Astro.props.isFallback && } + -
- ) : ( - <> - - - {Astro.props.entry.data.draft && } - {Astro.props.isFallback && } - - - - - -
- - - ) - } -
- - - - + + ) + } +
+ + + diff --git a/packages/starlight/components/StarlightHeadlessPage.astro b/packages/starlight/components/StarlightHeadlessPage.astro new file mode 100644 index 00000000000..dbea1902ada --- /dev/null +++ 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; +--- + + + + diff --git a/packages/starlight/package.json b/packages/starlight/package.json index 7ef3027aa98..dfd70c0cde0 100644 --- 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" From 3bcc8eabe937b6559478c41da024a3269a7a6575 Mon Sep 17 00:00:00 2001 From: totto2727 Date: Thu, 28 Nov 2024 01:45:42 +0900 Subject: [PATCH 2/4] docs: add guides of simple layout --- docs/src/content/docs/guides/pages.mdx | 33 ++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/docs/src/content/docs/guides/pages.mdx b/docs/src/content/docs/guides/pages.mdx index 663bea68a1f..f51ece8d053 100644 --- 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'; ``` +### 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 `` 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'; +--- + + +

This is a custom page with a custom component:

+ + +``` + +If you need to set up everything from scratch, you can set up the `html` tag yourself. + +```astro + + + + + My custom page + + +

This is a custom page with a custom component:

+ + + +``` + #### Props The `` component accepts the following props. From 14fecb08c41b0dbdffd340d4f7fc668bb4e94a11 Mon Sep 17 00:00:00 2001 From: totto2727 Date: Thu, 28 Nov 2024 01:46:47 +0900 Subject: [PATCH 3/4] i18n(ja): guides of simple layout in `pages.mdx` --- docs/src/content/docs/ja/guides/pages.mdx | 33 +++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/docs/src/content/docs/ja/guides/pages.mdx b/docs/src/content/docs/ja/guides/pages.mdx index 242cf723f66..aded44879e9 100644 --- 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'; ``` +### カスタムページでStarlightの最低限のレイアウトのみ使用する + +カスタムページでStarlightのデザインを利用したくない場合は、``コンポーネントでラップします。これは、コンテンツを動的に生成したいものの、Starlightのデザインを使用したくない場合に役立ちます。`head`タグとユーザーCSSのみ継承し、それ以外のスタイルとレイアウトは一切継承しません。 + +```astro +--- +// src/pages/custom-page/example.astro +import SimpleStarlightPage from '@astrojs/starlight/components/SimpleStarlightPage.astro'; +import CustomComponent from './CustomComponent.astro'; +--- + + +

これはカスタムコンポーネントを用いたカスタムページです:

+ + +``` + +全てを1から設定する必要がある場合は、独自に`html`タグから設定してください。 + +```astro + + + + + 私のカスタムページ + + +

これはカスタムコンポーネントを用いたカスタムページです:

+ + + +``` + #### Props ``コンポーネントは以下のpropsを受け付けます。 From c004dc01a5dd5ca6b4b85be5a15fafe21eadb274 Mon Sep 17 00:00:00 2001 From: totto2727 Date: Thu, 28 Nov 2024 01:40:56 +0900 Subject: [PATCH 4/4] chore: add changeset --- .changeset/real-adults-lie.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 .changeset/real-adults-lie.md diff --git a/.changeset/real-adults-lie.md b/.changeset/real-adults-lie.md new file mode 100644 index 00000000000..751b573bac8 --- /dev/null +++ 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`