diff --git a/.changeset/dull-mice-live.md b/.changeset/dull-mice-live.md new file mode 100644 index 00000000000..e7940c7a268 --- /dev/null +++ b/.changeset/dull-mice-live.md @@ -0,0 +1,7 @@ +--- +'@astrojs/starlight': minor +--- + +Updates `astro-expressive-code` dependency to the latest version (0.39). + +This includes an update to the latest Shiki version (1.26.1), providing access to all current Shiki themes and syntax highlighting languages. It also adds the config options `shiki.engine`, `shiki.bundledLangs`, `shiki.langAlias` and `removeUnusedThemes`. See the [Expressive Code release notes](https://expressive-code.com/releases/#0390) for full details. diff --git a/.changeset/sweet-gorillas-refuse.md b/.changeset/sweet-gorillas-refuse.md new file mode 100644 index 00000000000..804ac6bb7e9 --- /dev/null +++ b/.changeset/sweet-gorillas-refuse.md @@ -0,0 +1,5 @@ +--- +"@astrojs/starlight": minor +--- + +Adds a print stylesheet to improve the appearance of Starlight docs pages when printed diff --git a/.changeset/tender-tools-kick.md b/.changeset/tender-tools-kick.md new file mode 100644 index 00000000000..645c0ac4c73 --- /dev/null +++ b/.changeset/tender-tools-kick.md @@ -0,0 +1,5 @@ +--- +'@astrojs/starlight': patch +--- + +Fixes a documentation link in the JSDoc comment for the `StarlightExpressiveCodeOptions` type \ No newline at end of file diff --git a/.changeset/warm-coins-refuse.md b/.changeset/warm-coins-refuse.md new file mode 100644 index 00000000000..6949b4ddb2f --- /dev/null +++ b/.changeset/warm-coins-refuse.md @@ -0,0 +1,5 @@ +--- +'@astrojs/starlight': patch +--- + +Fixes colour contrast correction in code blocks diff --git a/docs/src/components/sidebar-preview.astro b/docs/src/components/sidebar-preview.astro index b7761defa40..d983ad5d82e 100644 --- a/docs/src/components/sidebar-preview.astro +++ b/docs/src/components/sidebar-preview.astro @@ -54,6 +54,7 @@ function makeEntries(items: SidebarConfig): SidebarEntry[] { background-color: var(--sl-color-bg-sidebar); border: 1px solid var(--sl-color-gray-5); padding: 1rem var(--sl-sidebar-pad-x); - max-width: var(--sl-sidebar-width); + /* Matches `var(--sl-sidebar-width)`, but hardcoded to avoid being overridden when printing the page. */ + max-width: 18.75rem; } diff --git a/docs/src/content/docs/fr/resources/community-content.mdx b/docs/src/content/docs/fr/resources/community-content.mdx index d994f2a7032..3196599ce35 100644 --- a/docs/src/content/docs/fr/resources/community-content.mdx +++ b/docs/src/content/docs/fr/resources/community-content.mdx @@ -30,6 +30,21 @@ Voici une collection de publications et d'articles pour en apprendre plus sur St title="Comparaison des générateurs de sites de documentation : VuePress contre Starlight" description="Comment les deux frameworks se comparent-ils ?" /> + + + ## Recettes et guides diff --git a/docs/src/content/docs/fr/resources/plugins.mdx b/docs/src/content/docs/fr/resources/plugins.mdx index 73bfafb048a..405f6d79632 100644 --- a/docs/src/content/docs/fr/resources/plugins.mdx +++ b/docs/src/content/docs/fr/resources/plugins.mdx @@ -135,6 +135,11 @@ Un thème est un module d'extension Starlight qui modifie l'apparence visuelle d title="catppuccin-starlight" description="Thème apaisant aux couleurs pastel pour Starlight" /> + ## Outils et intégrations communautaires diff --git a/docs/src/content/docs/guides/authoring-content.mdx b/docs/src/content/docs/guides/authoring-content.mdx index 68f37472eb3..f59d59fdb25 100644 --- a/docs/src/content/docs/guides/authoring-content.mdx +++ b/docs/src/content/docs/guides/authoring-content.mdx @@ -220,13 +220,13 @@ var fun = function lang(l) { ### Expressive Code features -Starlight uses [Expressive Code](https://github.com/expressive-code/expressive-code/tree/main/packages/astro-expressive-code) to extend formatting possibilities for code blocks. +Starlight uses [Expressive Code](https://expressive-code.com/) to extend formatting possibilities for code blocks. Expressive Code’s text markers and window frames plugins are enabled by default. Code block rendering can be configured using Starlight’s [`expressiveCode` configuration option](/reference/configuration/#expressivecode). #### Text markers -You can highlight specific lines or parts of your code blocks using [Expressive Code text markers](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#usage-in-markdown--mdx-documents) on the opening line of your code block. +You can highlight specific lines or parts of your code blocks using [Expressive Code text markers](https://expressive-code.com/key-features/text-markers/) on the opening line of your code block. Use curly braces (`{ }`) to highlight entire lines, and quotation marks to highlight strings of text. There are three highlighting styles: neutral for calling attention to code, green for indicating inserted code, and red for indicating deleted code. @@ -234,10 +234,10 @@ Both text and entire lines can be marked using the default marker, or in combina Expressive Code provides several options for customizing the visual appearance of your code samples. Many of these can be combined, for highly illustrative code samples. -Please explore the [Expressive Code documentation](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md) for the extensive options available. +Please explore the [Expressive Code documentation](https://expressive-code.com/key-features/text-markers/#configuration) for the extensive options available. Some of the most common examples are shown below: -- [Mark entire lines & line ranges using the `{ }` marker](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#marking-entire-lines--line-ranges): +- [Mark entire lines & line ranges using the `{ }` marker](https://expressive-code.com/key-features/text-markers/#marking-full-lines--line-ranges): ```js {2-3} function demo() { @@ -255,7 +255,7 @@ Some of the most common examples are shown below: ``` ```` -- [Mark selections of text using the `" "` marker or regular expressions](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#marking-individual-text-inside-lines): +- [Mark selections of text using the `" "` marker or regular expressions](https://expressive-code.com/key-features/text-markers/#marking-individual-text-inside-lines): ```js "Individual terms" /Even.*supported/ // Individual terms can be highlighted, too @@ -273,7 +273,7 @@ Some of the most common examples are shown below: ``` ```` -- [Mark text or lines as inserted or deleted with `ins` or `del`](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#selecting-marker-types-mark-ins-del): +- [Mark text or lines as inserted or deleted with `ins` or `del`](https://expressive-code.com/key-features/text-markers/#selecting-inline-marker-types-mark-ins-del): ```js "return true;" ins="inserted" del="deleted" function demo() { @@ -293,7 +293,7 @@ Some of the most common examples are shown below: ``` ```` -- [Combine syntax highlighting with `diff`-like syntax](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#combining-syntax-highlighting-with-diff-like-syntax): +- [Combine syntax highlighting with `diff`-like syntax](https://expressive-code.com/key-features/text-markers/#combining-syntax-highlighting-with-diff-like-syntax): ```diff lang="js" function thisIsJavaScript() { @@ -323,7 +323,7 @@ Other languages display inside a code editor-style frame if they include a title A code block’s optional title can be set either with a `title="..."` attribute following the code block's opening backticks and language identifier, or with a file name comment in the first lines of the code. -- [Add a file name tab with a comment](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-frames/README.md#adding-titles-open-file-tab-or-terminal-window-title) +- [Add a file name tab with a comment](https://expressive-code.com/key-features/frames/#code-editor-frames) ```js // my-test-file.js @@ -337,7 +337,7 @@ A code block’s optional title can be set either with a `title="..."` attribute ``` ```` -- [Add a title to a Terminal window](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-frames/README.md#adding-titles-open-file-tab-or-terminal-window-title) +- [Add a title to a Terminal window](https://expressive-code.com/key-features/frames/#terminal-frames) ```bash title="Installing dependencies…" npm install @@ -349,7 +349,7 @@ A code block’s optional title can be set either with a `title="..."` attribute ``` ```` -- [Disable window frames with `frame="none"`](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-frames/README.md#overriding-frame-types) +- [Disable window frames with `frame="none"`](https://expressive-code.com/key-features/frames/#overriding-frame-types) ```bash frame="none" echo "This is not rendered as a terminal despite using the bash language" diff --git a/docs/src/content/docs/guides/i18n.mdx b/docs/src/content/docs/guides/i18n.mdx index 8533c53f97a..6014e568f4c 100644 --- a/docs/src/content/docs/guides/i18n.mdx +++ b/docs/src/content/docs/guides/i18n.mdx @@ -221,7 +221,7 @@ You can provide translations for additional languages you support — or overrid - Starlight’s code blocks are powered by the [Expressive Code](https://github.com/expressive-code/expressive-code) library. + Starlight’s code blocks are powered by the [Expressive Code](https://expressive-code.com/) library. You can set translations for its UI strings in the same JSON file using `expressiveCode` keys: ```json diff --git a/docs/src/content/docs/ko/resources/community-content.mdx b/docs/src/content/docs/ko/resources/community-content.mdx index 0809dbb2683..8432a1d87d4 100644 --- a/docs/src/content/docs/ko/resources/community-content.mdx +++ b/docs/src/content/docs/ko/resources/community-content.mdx @@ -30,11 +30,26 @@ import { CardGrid, LinkCard } from '@astrojs/starlight/components'; title="문서 사이트 빌더 비교: VuePress vs Starlight" description="이 두 프레임워크는 어떻게 비교되나요?" /> + + + -## 레시피 및 안내서 +## 레시피 및 가이드 -레시피는 일반적으로 특정 작업의 실제 예시를 완료하는 과정을 독자에게 안내하는 짧고 집중적인 방법 안내서입니다. 레시피는 단계별 지침에 따라 Starlight 프로젝트에 새로운 기능이나 동작을 추가할 수 있는 좋은 방법입니다! 다른 안내서에서는 이미지 사용이나 MDX 작업 등 콘텐츠 영역과 관련된 개념을 설명할 수도 있습니다. +레시피는 일반적으로 특정 작업의 실제 예시를 완료하는 과정을 독자에게 안내하는 짧고 집중적인 가이드입니다. 레시피는 단계별 지침에 따라 Starlight 프로젝트에 새로운 기능이나 동작을 추가할 수 있는 좋은 방법입니다! 다른 가이드에서는 이미지 사용이나 MDX 작업 등 콘텐츠 영역과 관련된 개념을 설명할 수도 있습니다. Starlight 사용자들이 관리하는 커뮤니티 제작 콘텐츠를 살펴보세요. @@ -42,27 +57,27 @@ Starlight 사용자들이 관리하는 커뮤니티 제작 콘텐츠를 살펴 + ## 커뮤니티 도구 및 통합 diff --git a/docs/src/content/docs/reference/configuration.mdx b/docs/src/content/docs/reference/configuration.mdx index ea5da995435..28132f34ba7 100644 --- a/docs/src/content/docs/reference/configuration.mdx +++ b/docs/src/content/docs/reference/configuration.mdx @@ -384,10 +384,10 @@ starlight({ **type:** `StarlightExpressiveCodeOptions | boolean` **default:** `true` -Starlight uses [Expressive Code](https://github.com/expressive-code/expressive-code/tree/main/packages/astro-expressive-code) to render code blocks and add support for highlighting parts of code examples, adding filenames to code blocks, and more. +Starlight uses [Expressive Code](https://expressive-code.com) to render code blocks and add support for highlighting parts of code examples, adding filenames to code blocks, and more. See the [“Code blocks” guide](/guides/authoring-content/#code-blocks) to learn how to use Expressive Code syntax in your Markdown and MDX content. -You can use any of the standard [Expressive Code configuration options](https://github.com/expressive-code/expressive-code/blob/main/packages/astro-expressive-code/README.md#configuration) as well as some Starlight-specific properties, by setting them in Starlight’s `expressiveCode` option. +You can use any of the standard [Expressive Code configuration options](https://expressive-code.com/reference/configuration/) as well as some Starlight-specific properties, by setting them in Starlight’s `expressiveCode` option. For example, set Expressive Code’s `styleOverrides` option to override the default CSS. This enables customizations like giving your code blocks rounded corners: ```js ins={2-4} @@ -414,7 +414,7 @@ In addition to the standard Expressive Code options, you can also set the follow **default:** `['starlight-dark', 'starlight-light']` Set the themes used to style code blocks. -See the [Expressive Code `themes` documentation](https://github.com/expressive-code/expressive-code/blob/main/packages/astro-expressive-code/README.md#themes) for details of the supported theme formats. +See the [Expressive Code `themes` documentation](https://expressive-code.com/guides/themes/) for details of the supported theme formats. Starlight uses the dark and light variants of Sarah Drasner’s [Night Owl theme](https://github.com/sdras/night-owl-vscode-theme) by default. diff --git a/docs/src/content/docs/resources/community-content.mdx b/docs/src/content/docs/resources/community-content.mdx index b908a1e6701..42e37370d73 100644 --- a/docs/src/content/docs/resources/community-content.mdx +++ b/docs/src/content/docs/resources/community-content.mdx @@ -30,6 +30,21 @@ Here is a collection of posts and articles to learn more about Starlight and oth title="Comparing docs site builders: VuePress vs Starlight" description="How do these two frameworks measure up?" /> + + + ## Recipes and Guides diff --git a/docs/src/content/docs/resources/plugins.mdx b/docs/src/content/docs/resources/plugins.mdx index ef10656b272..5e2ba9e3919 100644 --- a/docs/src/content/docs/resources/plugins.mdx +++ b/docs/src/content/docs/resources/plugins.mdx @@ -135,6 +135,11 @@ A theme is a Starlight plugin that changes the visual appearance of a site with title="catppuccin-starlight" description="Soothing pastel theme for Starlight" /> + ## Community tools and integrations diff --git a/package.json b/package.json index cbb717a2fb7..06ad3495ba0 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,10 @@ }, { "name": "/_astro/*.css", - "path": "examples/basics/dist/_astro/*.css", + "path": [ + "examples/basics/dist/_astro/*.css", + "!examples/basics/dist/_astro/print.*.css" + ], "limit": "14.5 kB", "gzip": true } diff --git a/packages/starlight/components/EditLink.astro b/packages/starlight/components/EditLink.astro index 711d3999ba6..2e7542f8c5a 100644 --- a/packages/starlight/components/EditLink.astro +++ b/packages/starlight/components/EditLink.astro @@ -7,7 +7,7 @@ const { editUrl } = Astro.props; { editUrl && ( - + {Astro.locals.t('page.editLink')} diff --git a/packages/starlight/components/Header.astro b/packages/starlight/components/Header.astro index 47fb43fb16a..804b79806d2 100644 --- a/packages/starlight/components/Header.astro +++ b/packages/starlight/components/Header.astro @@ -19,10 +19,10 @@ const shouldRenderSearch =
-
+
{shouldRenderSearch && }
-
+
diff --git a/packages/starlight/components/MobileMenuToggle.astro b/packages/starlight/components/MobileMenuToggle.astro index 56d36e4b757..f66789f1d70 100644 --- a/packages/starlight/components/MobileMenuToggle.astro +++ b/packages/starlight/components/MobileMenuToggle.astro @@ -3,7 +3,7 @@ import type { Props } from '../props'; import Icon from '../user-components/Icon.astro'; --- - +