@astrojs/starlight 0.24.3 → 0.24.5

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @astrojs/starlight
 
+## 0.24.5
+
+### Patch Changes
+
+- [#2062](https://github.com/withastro/starlight/pull/2062) [`5ac0ac6`](https://github.com/withastro/starlight/commit/5ac0ac6614e3c45d810a1594a2009d3febfa2793) Thanks [@evadecker](https://github.com/evadecker)! - Increase theme and language select inline padding
+
+- [#2056](https://github.com/withastro/starlight/pull/2056) [`87e9ad0`](https://github.com/withastro/starlight/commit/87e9ad029c9730fca8df66e35828b57cd0872a61) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Fixes an issue preventing remark plugins injected by Starlight plugins to handle Markdown text and leaf directives.
+
+- [#2063](https://github.com/withastro/starlight/pull/2063) [`3ee1a94`](https://github.com/withastro/starlight/commit/3ee1a9404db25f5776a3c1ecd248614f64db46ae) Thanks [@delucis](https://github.com/delucis)! - Translate `fileTree.directory` and `aside.*` UI string into Norwegian (Bokmål).
+
+- [#2054](https://github.com/withastro/starlight/pull/2054) [`dbfd3ee`](https://github.com/withastro/starlight/commit/dbfd3eeccacb5f5b77d75213dac3b30dc0be6deb) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Fixes an issue when using the `<StarlightPage>` component in a custom page with a user-defined `srcDir` configuration.
+
+## 0.24.4
+
+### Patch Changes
+
+- [#2038](https://github.com/withastro/starlight/pull/2038) [`87f3f92`](https://github.com/withastro/starlight/commit/87f3f925be6f9897b71b09a3041ec6d54be483b2) Thanks [@dragomano](https://github.com/dragomano)! - Updates Russian UI translations
+
+- [#2043](https://github.com/withastro/starlight/pull/2043) [`53f4cd4`](https://github.com/withastro/starlight/commit/53f4cd443cf31b6135ff16eb74b5f26ee93ee2d5) Thanks [@playmr365](https://github.com/playmr365)! - Updates Czech UI translations
+
+- [#2041](https://github.com/withastro/starlight/pull/2041) [`8af5a60`](https://github.com/withastro/starlight/commit/8af5a60ab14f4dae7f5a5e4ee535ae927273368b) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Fixes `<Steps>` numbering bug caused by Chrome v126 CSS counter rewrite
+
 ## 0.24.3
 
 ### Patch Changes

package/__e2e__/collection-config.test.ts

@@ -0,0 +1,12 @@
+import { expect, testFactory } from './test-utils';
+
+const test = await testFactory('./fixtures/custom-src-dir/');
+
+test('builds a custom page using the `<StarlightPage>` component and a custom `srcDir`', async ({
+	page,
+	starlight,
+}) => {
+	await starlight.goto('/custom');
+
+	await expect(page.getByText('Hello')).toBeVisible();
+});

package/__e2e__/fixtures/custom-src-dir/astro.config.mjs

@@ -0,0 +1,11 @@
+import starlight from '@astrojs/starlight';
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+	srcDir: './www',
+	integrations: [
+		starlight({
+			title: 'Custom src directory',
+		}),
+	],
+});

package/__e2e__/fixtures/custom-src-dir/node_modules/.bin/astro

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/starlight/starlight/node_modules/.pnpm/astro@4.10.2_@types+node@18.16.19_typescript@5.4.5/node_modules/astro/node_modules:/home/runner/work/starlight/starlight/node_modules/.pnpm/astro@4.10.2_@types+node@18.16.19_typescript@5.4.5/node_modules:/home/runner/work/starlight/starlight/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/starlight/starlight/node_modules/.pnpm/astro@4.10.2_@types+node@18.16.19_typescript@5.4.5/node_modules/astro/node_modules:/home/runner/work/starlight/starlight/node_modules/.pnpm/astro@4.10.2_@types+node@18.16.19_typescript@5.4.5/node_modules:/home/runner/work/starlight/starlight/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../astro/astro.js" "$@"
+else
+  exec node  "$basedir/../astro/astro.js" "$@"
+fi

package/__e2e__/fixtures/custom-src-dir/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@e2e/custom-src-dir",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/starlight": "workspace:*",
+    "astro": "^4.10.2"
+  }
+}

package/__e2e__/fixtures/custom-src-dir/www/content/config.ts

@@ -0,0 +1,6 @@
+import { defineCollection } from 'astro:content';
+import { docsSchema } from '@astrojs/starlight/schema';
+
+export const collections = {
+	docs: defineCollection({ schema: docsSchema() }),
+};

package/__e2e__/fixtures/custom-src-dir/www/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />

package/__e2e__/fixtures/custom-src-dir/www/pages/custom.astro

@@ -0,0 +1,7 @@
+---
+import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
+---
+
+<StarlightPage frontmatter={{ title: 'A custom page' }}>
+	<p>Hello</p>
+</StarlightPage>

package/components/Select.astro

@@ -31,6 +31,7 @@ interface Props {
 	label {
 		--sl-label-icon-size: 0.875rem;
 		--sl-caret-size: 1.25rem;
+		--sl-inline-padding: 0.5rem;
 		position: relative;
 		display: flex;
 		align-items: center;
@@ -62,8 +63,10 @@ interface Props {
 	select {
 		border: 0;
 		padding-block: 0.625rem;
-		padding-inline: calc(var(--sl-label-icon-size) + 0.25rem) calc(var(--sl-caret-size) + 0.25rem);
-		width: var(--sl-select-width);
+		padding-inline: calc(var(--sl-label-icon-size) + var(--sl-inline-padding) + 0.25rem)
+			calc(var(--sl-caret-size) + var(--sl-inline-padding) + 0.25rem);
+		margin-inline: calc(var(--sl-inline-padding) * -1);
+		width: calc(var(--sl-select-width) + var(--sl-inline-padding) * 2);
 		background-color: transparent;
 		text-overflow: ellipsis;
 		color: inherit;

package/index.ts

@@ -3,7 +3,7 @@ import type { AstroIntegration } from 'astro';
 import { spawn } from 'node:child_process';
 import { dirname, relative } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { starlightAsides } from './integrations/asides';
+import { starlightAsides, starlightDirectivesRestorationIntegration } from './integrations/asides';
 import { starlightExpressiveCode } from './integrations/expressive-code/index';
 import { starlightSitemap } from './integrations/sitemap';
 import { vitePluginStarlightUserConfig } from './integrations/virtual-user-config';
@@ -73,6 +73,10 @@ export default function StarlightIntegration({
 				if (!allIntegrations.find(({ name }) => name === '@astrojs/mdx')) {
 					integrations.push(mdx({ optimize: true }));
 				}
+				// Add Starlight directives restoration integration at the end of the list so that remark
+				// plugins injected by Starlight plugins through Astro integrations can handle text and
+				// leaf directives before they are transformed back to their original form.
+				integrations.push(starlightDirectivesRestorationIntegration());
 
 				// Add integrations immediately after Starlight in the config array.
 				// e.g. if a user has `integrations: [starlight(), tailwind()]`, then the order will be

package/integrations/asides.ts

@@ -1,6 +1,6 @@
 /// <reference types="mdast-util-directive" />
 
-import type { AstroConfig, AstroUserConfig } from 'astro';
+import type { AstroConfig, AstroIntegration, AstroUserConfig } from 'astro';
 import { h as _h, s as _s, type Properties } from 'hastscript';
 import type { Node, Paragraph as P, Parent, Root } from 'mdast';
 import {
@@ -146,7 +146,6 @@ function remarkAsides(options: AsidesOptions): Plugin<[], Root> {
 				return;
 			}
 			if (node.type === 'textDirective' || node.type === 'leafDirective') {
-				transformUnhandledDirective(node, index, parent);
 				return;
 			}
 			const variant = node.name;
@@ -210,3 +209,43 @@ type RemarkPlugins = NonNullable<NonNullable<AstroUserConfig['markdown']>['remar
 export function starlightAsides(options: AsidesOptions): RemarkPlugins {
 	return [remarkDirective, remarkAsides(options)];
 }
+
+export function remarkDirectivesRestoration() {
+	return function transformer(tree: Root) {
+		visit(tree, (node, index, parent) => {
+			if (
+				index !== undefined &&
+				parent &&
+				(node.type === 'textDirective' || node.type === 'leafDirective')
+			) {
+				transformUnhandledDirective(node, index, parent);
+				return;
+			}
+		});
+	};
+}
+
+/**
+ * Directives not handled by Starlight are transformed back to their original form to avoid
+ * breaking user content.
+ * To allow remark plugins injected by Starlight plugins through Astro integrations to handle
+ * such directives, we need to restore unhandled text and leaf directives back to their original
+ * form only after all these other plugins have run.
+ * To do so, we run a remark plugin restoring these directives back to their original form from
+ * another Astro integration that runs after all the ones that may have been injected by Starlight
+ * plugins.
+ */
+export function starlightDirectivesRestorationIntegration(): AstroIntegration {
+	return {
+		name: 'starlight-directives-restoration',
+		hooks: {
+			'astro:config:setup': ({ updateConfig }) => {
+				updateConfig({
+					markdown: {
+						remarkPlugins: [remarkDirectivesRestoration],
+					},
+				});
+			},
+		},
+	};
+}

package/integrations/virtual-user-config.ts

@@ -50,7 +50,7 @@ export function vitePluginStarlightUserConfig(
 			: 'export const logos = {};',
 		'virtual:starlight/collection-config': `let userCollections;
 			try {
-				userCollections = (await import('/src/content/config.ts')).collections;
+				userCollections = (await import('${new URL('./content/config.ts', srcDir).pathname}')).collections;
 			} catch {}
 			export const collections = userCollections;`,
 		...virtualComponentModules,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/starlight",
-  "version": "0.24.3",
+  "version": "0.24.5",
   "description": "Build beautiful, high-performance documentation websites with Astro",
   "keywords": [
     "docs",

package/playwright.config.ts

@@ -12,4 +12,5 @@ export default defineConfig({
 		},
 	],
 	testMatch: '__e2e__/*.test.ts',
+	workers: 1,
 });

package/translations/cs.json

@@ -25,5 +25,18 @@
   "aside.caution": "Upozornění",
   "aside.danger": "Nebezpečí",
   "fileTree.directory": "Adresář",
-  "builtWithStarlight.label": "Postavené s Starlight"
+  "builtWithStarlight.label": "Postavené s Starlight",
+  "expressiveCode.copyButtonCopied": "Zkopírováno!",
+  "expressiveCode.copyButtonTooltip": "Kopíruj do schránky",
+  "expressiveCode.terminalWindowFallbackTitle": "Terminál",
+  "pagefind.clear_search": "Vyčistit",
+  "pagefind.load_more": "Načíst další výsledky",
+  "pagefind.search_label": "Vyhledat stránku",
+  "pagefind.filters_label": "Filtry",
+  "pagefind.zero_results": "Žádný výsledek pro: [SEARCH_TERM]",
+  "pagefind.many_results": "počet výsledků: [COUNT] pro: [SEARCH_TERM]",
+  "pagefind.one_result": "[COUNT] výsledek pro: [SEARCH_TERM]",
+  "pagefind.alt_search": "Žádné výsledky pro [SEARCH_TERM]. Namísto toho zobrazuji výsledky pro: [DIFFERENT_TERM]",
+  "pagefind.search_suggestion": "Žádný výsledek pro [SEARCH_TERM]. Zkus nějaké z těchto hledání:",
+  "pagefind.searching": "Hledám [SEARCH_TERM]..."
 }

package/translations/nb.json

@@ -20,10 +20,10 @@
   "page.nextLink": "Neste",
   "page.draft": "This content is a draft and will not be included in production builds.",
   "404.text": "Siden ble ikke funnet. Sjekk URL-en eller prøv å bruke søkefeltet.",
-  "aside.note": "Note",
-  "aside.tip": "Tip",
-  "aside.caution": "Caution",
-  "aside.danger": "Danger",
-  "fileTree.directory": "Directory",
+  "aside.note": "Merknad",
+  "aside.tip": "Tips",
+  "aside.caution": "Advarsel",
+  "aside.danger": "Fare",
+  "fileTree.directory": "Mappe",
   "builtWithStarlight.label": "Laget med Starlight"
 }

package/translations/ru.json

@@ -28,5 +28,5 @@
   "expressiveCode.copyButtonCopied": "Скопировано!",
   "expressiveCode.copyButtonTooltip": "Копировать",
   "expressiveCode.terminalWindowFallbackTitle": "Окно терминала",
-  "builtWithStarlight.label": "Built with Starlight"
+  "builtWithStarlight.label": "Сделано с помощью Starlight"
 }

package/user-components/Steps.astro

@@ -13,10 +13,12 @@ const { html } = processSteps(content);
 		--bullet-margin: 0.375rem;
 
 		list-style: none;
+		counter-reset: steps-counter var(--sl-steps-start, 0);
 		padding-inline-start: 0;
 	}
 
 	.sl-steps > li {
+		counter-increment: steps-counter;
 		position: relative;
 		padding-inline-start: calc(var(--bullet-size) + 1rem);
 		/* HACK: Keeps any `margin-bottom` inside the `<li>`’s padding box to avoid gaps in the hairline border. */
@@ -31,7 +33,7 @@ const { html } = processSteps(content);
 
 	/* Custom list marker element. */
 	.sl-steps > li::before {
-		content: counter(list-item);
+		content: counter(steps-counter);
 		position: absolute;
 		top: 0;
 		inset-inline-start: 0;

package/user-components/rehype-steps.ts

@@ -44,6 +44,14 @@ const stepsProcessor = rehype()
 			} else {
 				rootElement.properties.className.push('sl-steps');
 			}
+
+			// Add the `start` attribute as a CSS custom property so we can use it as the starting index
+			// of the steps custom counter.
+			if (typeof rootElement.properties.start === 'number') {
+				const styles = [`--sl-steps-start: ${rootElement.properties.start - 1}`];
+				if (rootElement.properties.style) styles.push(String(rootElement.properties.style));
+				rootElement.properties.style = styles.join(';');
+			}
 		};
 	});