@astrojs/starlight 0.17.1 → 0.17.3

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @astrojs/starlight
 
+## 0.17.3
+
+### Patch Changes
+
+- [#1461](https://github.com/withastro/starlight/pull/1461) [`2e17880`](https://github.com/withastro/starlight/commit/2e17880957d1aae2a84c77500afa9b66e5292a6a) Thanks [@liruifengv](https://github.com/liruifengv)! - Improves the table of contents title translation in Simplified Chinese
+
+- [#1462](https://github.com/withastro/starlight/pull/1462) [`4741ccc`](https://github.com/withastro/starlight/commit/4741cccc8adbef500bcaf95416a1c61a90761c06) Thanks [@delucis](https://github.com/delucis)! - Fixes overflow of very long site titles on narrow viewports
+
+- [#1459](https://github.com/withastro/starlight/pull/1459) [`9a8e0ec`](https://github.com/withastro/starlight/commit/9a8e0ec59cba0e088512ea9b6d17224085f3a178) Thanks [@delucis](https://github.com/delucis)! - Fixes a bug where table of contents highlighting could break given very specific combinations of content and viewport size
+
+- [#1458](https://github.com/withastro/starlight/pull/1458) [`8c88642`](https://github.com/withastro/starlight/commit/8c88642875e8344396074a780e28fb0860b249f8) Thanks [@delucis](https://github.com/delucis)! - Silences i18n content collection warnings for projects without custom translations.
+
+## 0.17.2
+
+### Patch Changes
+
+- [#1442](https://github.com/withastro/starlight/pull/1442) [`1a642e4`](https://github.com/withastro/starlight/commit/1a642e4d74ee4c30e85bce37b41888b1eae0544a) Thanks [@delucis](https://github.com/delucis)! - Fixes URLs in language picker for sites with `build.format: 'file'`
+
+- [#1440](https://github.com/withastro/starlight/pull/1440) [`2ea1e88`](https://github.com/withastro/starlight/commit/2ea1e883186660b48f0ea8c4da7fead5fb74e313) Thanks [@hippotastic](https://github.com/hippotastic)! - Adds JS support to the `@astrojs/starlight/expressive-code` export to allow importing from non-TS environments.
+
 ## 0.17.1
 
 ### Patch Changes

package/components/Header.astro

@@ -16,7 +16,7 @@ const shouldRenderSearch =
 ---
 
 <div class="header sl-flex">
-	<div class="sl-flex">
+	<div class="title-wrapper sl-flex">
 		<SiteTitle {...Astro.props} />
 	</div>
 	<div class="sl-flex">
@@ -39,6 +39,11 @@ const shouldRenderSearch =
 		height: 100%;
 	}
 
+	.title-wrapper {
+		/* Prevent long titles overflowing and covering the search and menu buttons on narrow viewports. */
+		overflow: hidden;
+	}
+
 	.right-group,
 	.social-icons {
 		gap: 1rem;

package/components/SiteTitle.astro

@@ -38,9 +38,6 @@ const href = formatPath(Astro.props.locale || '/');
 
 <style>
 	.site-title {
-		justify-self: flex-start;
-		max-width: 100%;
-		overflow: hidden;
 		align-items: center;
 		gap: var(--sl-nav-gap);
 		font-size: var(--sl-text-h4);

package/components/TableOfContents/starlight-toc.ts

@@ -95,8 +95,8 @@ export class StarlightTOC extends HTMLElement {
 		const mobileTocHeight = this.querySelector('summary')?.getBoundingClientRect().height || 0;
 		/** Start intersections at nav height + 2rem padding. */
 		const top = navBarHeight + mobileTocHeight + 32;
-		/** End intersections 1.5rem later. */
-		const bottom = top + 24;
+		/** End intersections `53px` later. This is slightly more than the maximum `margin-top` in Markdown content. */
+		const bottom = top + 53;
 		const height = document.documentElement.clientHeight;
 		return `-${top}px 0% ${bottom - height}px`;
 	}

package/expressive-code.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @file This file provides the types for Starlight's `@astrojs/starlight/expressive-code` export.
+ */
+
+export * from 'astro-expressive-code';
+
+import type { StarlightExpressiveCodeOptions } from './integrations/expressive-code';
+
+export type { StarlightExpressiveCodeOptions };
+
+/**
+ * A utility function that helps you define an Expressive Code configuration object. It is meant
+ * to be used inside the optional config file `ec.config.mjs` located in the root directory
+ * of your Starlight project, and its return value to be exported as the default export.
+ *
+ * Expressive Code will automatically detect this file and use the exported configuration object
+ * to override its own default settings.
+ *
+ * Using this function is recommended, but not required. It just passes through the given object,
+ * but it also provides type information for your editor's auto-completion and type checking.
+ *
+ * @example
+ * ```js
+ * // ec.config.mjs
+ * import { defineEcConfig } from '@astrojs/starlight/expressive-code'
+ *
+ * export default defineEcConfig({
+ *   themes: ['starlight-dark', 'github-light'],
+ *   styleOverrides: {
+ *     borderRadius: '0.5rem',
+ *   },
+ * })
+ * ```
+ */
+export function defineEcConfig(
+	config: StarlightExpressiveCodeOptions
+): StarlightExpressiveCodeOptions;

package/expressive-code.mjs

@@ -0,0 +1,21 @@
+/**
+ * @file This file is exported by Starlight as `@astrojs/starlight/expressive-code`.
+ *
+ * It is required by the `<Code>` component to access the same configuration preprocessor
+ * function as the one used by the integration.
+ *
+ * It also provides access to all of the Expressive Code classes and functions without having
+ * to install `astro-expressive-code` as an additional dependency into a user's project
+ * (and thereby risiking version conflicts).
+ *
+ * Note: This file is intentionally not a TypeScript module to allow access to all exported
+ * functionality even if TypeScript is not available, e.g. from the `ec.config.mjs` file
+ * that does not get processed by Vite.
+ */
+
+export * from 'astro-expressive-code';
+
+// @ts-ignore - Types are provided by the separate `expressive-code.d.ts` file
+export function defineEcConfig(config) {
+	return config;
+}

package/integrations/expressive-code/index.ts

@@ -179,8 +179,7 @@ export const starlightExpressiveCode = ({
 				}),
 				preprocessComponentConfig: `
 					import starlightConfig from 'virtual:starlight/user-config'
-					import { useTranslations } from '@astrojs/starlight/internal'
-					import { getStarlightEcConfigPreprocessor } from '@astrojs/starlight/expressive-code'
+					import { useTranslations, getStarlightEcConfigPreprocessor } from '@astrojs/starlight/internal'
 
 					export default getStarlightEcConfigPreprocessor({ starlightConfig, useTranslations })
 				`,

package/internal.ts

@@ -1 +1,6 @@
+/**
+ * @file This file contains utility functions imported by the `<Code>` component.
+ */
+
 export { useTranslations } from './utils/translations';
+export { getStarlightEcConfigPreprocessor } from './integrations/expressive-code';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/starlight",
-  "version": "0.17.1",
+  "version": "0.17.3",
   "description": "Build beautiful, high-performance documentation websites with Astro",
   "keywords": [
     "docs",
@@ -154,7 +154,10 @@
     "./props": "./props.ts",
     "./schema": "./schema.ts",
     "./types": "./types.ts",
-    "./expressive-code": "./integrations/expressive-code/exports.ts",
+    "./expressive-code": {
+      "types": "./expressive-code.d.ts",
+      "default": "./expressive-code.mjs"
+    },
     "./index.astro": "./index.astro",
     "./404.astro": "./404.astro",
     "./style/markdown.css": "./style/markdown.css"
@@ -165,9 +168,9 @@
   "devDependencies": {
     "@astrojs/markdown-remark": "^4.0.1",
     "@types/node": "^18.16.19",
-    "@vitest/coverage-v8": "^0.33.0",
+    "@vitest/coverage-v8": "^1.2.2",
     "astro": "^4.2.1",
-    "vitest": "^0.33.0"
+    "vitest": "^1.2.2"
   },
   "dependencies": {
     "@astrojs/mdx": "^2.0.4",

package/translations/zh-CN.json

@@ -11,7 +11,7 @@
   "languageSelect.accessibleLabel": "选择语言",
   "menuButton.accessibleLabel": "菜单",
   "sidebarNav.accessibleLabel": "主要",
-  "tableOfContents.onThisPage": "本页",
+  "tableOfContents.onThisPage": "本页内容",
   "tableOfContents.overview": "概述",
   "i18n.untranslatedContent": "此内容尚不支持你的语言。",
   "page.editLink": "编辑此页",

package/utils/localizedUrl.ts

@@ -17,14 +17,26 @@ export function localizedUrl(url: URL, locale: string | undefined): URL {
 	// Temporarily remove base to simplify
 	if (hasBase) url.pathname = url.pathname.replace(base, '');
 	const [_leadingSlash, baseSegment] = url.pathname.split('/');
-	if (baseSegment && baseSegment in config.locales) {
+	// Strip .html extension to handle file output builds where URL might be e.g. `/en.html`
+	const htmlExt = '.html';
+	const isRootHtml = baseSegment?.endsWith(htmlExt);
+	const baseSlug = isRootHtml ? baseSegment?.slice(0, -1 * htmlExt.length) : baseSegment;
+	if (baseSlug && baseSlug in config.locales) {
 		// We’re in a localized route, substitute the new locale (or strip for root lang).
-		url.pathname = locale
-			? url.pathname.replace(baseSegment, locale)
-			: url.pathname.replace('/' + baseSegment, '');
+		if (locale) {
+			url.pathname = url.pathname.replace(baseSlug, locale);
+		} else if (isRootHtml) {
+			url.pathname = '/index.html';
+		} else {
+			url.pathname = url.pathname.replace('/' + baseSlug, '');
+		}
 	} else if (locale) {
 		// We’re in the root language. Inject the new locale if we have one.
-		url.pathname = '/' + locale + url.pathname;
+		if (baseSegment === 'index.html') {
+			url.pathname = '/' + locale + '.html';
+		} else {
+			url.pathname = '/' + locale + url.pathname;
+		}
 	}
 	// Restore base
 	if (hasBase) url.pathname = base + url.pathname;

package/utils/translations.ts

@@ -3,16 +3,23 @@ import config from 'virtual:starlight/user-config';
 import type { i18nSchemaOutput } from '../schemas/i18n';
 import { createTranslationSystem } from './createTranslationSystem';
 
-/** All translation data from the i18n collection, keyed by `id`, which matches locale. */
-let userTranslations: Record<string, i18nSchemaOutput> = {};
-try {
-	// Load the user’s i18n collection and ignore the error if it doesn’t exist.
-	userTranslations = Object.fromEntries(
-		// @ts-ignore — may be an error in projects without an i18n collection
-
-		(await getCollection('i18n')).map(({ id, data }) => [id, data] as const)
-	);
-} catch {}
+/** Get all translation data from the i18n collection, keyed by `id`, which matches locale. */
+async function loadTranslations() {
+	let userTranslations: Record<string, i18nSchemaOutput> = {};
+	// Briefly override `console.warn()` to silence logging when a project has no i18n collection.
+	const warn = console.warn;
+	console.warn = () => {};
+	try {
+		// Load the user’s i18n collection and ignore the error if it doesn’t exist.
+		userTranslations = Object.fromEntries(
+			// @ts-ignore — may be an error in projects without an i18n collection
+			(await getCollection('i18n')).map(({ id, data }) => [id, data] as const)
+		);
+	} catch {}
+	// Restore the original warn implementation.
+	console.warn = warn;
+	return userTranslations;
+}
 
 /**
  * Generate a utility function that returns UI strings for the given `locale`.
@@ -21,4 +28,4 @@ try {
  * const t = useTranslations('en');
  * const label = t('search.label'); // => 'Search'
  */
-export const useTranslations = createTranslationSystem(userTranslations, config);
+export const useTranslations = createTranslationSystem(await loadTranslations(), config);

package/integrations/expressive-code/exports.ts

@@ -1,70 +0,0 @@
-/**
- * @file This file is exported by Starlight as `@astrojs/starlight/expressive-code`
- * and can be used in your site's configuration to customize Expressive Code.
- *
- * It provides access to all of the Expressive Code classes and functions without having
- * to install `astro-expressive-code` as an additional dependency into your project
- * (and thereby risiking version conflicts).
- *
- * For example, you can use this to load custom themes from a JSONC file (JSON with comments)
- * that would otherwise be difficult to import, and pass them to the `themes` option:
- *
- * @example
- * ```js
- * // astro.config.mjs
- * import fs from 'node:fs';
- * import { defineConfig } from 'astro/config';
- * import starlight from '@astrojs/starlight';
- * import { ExpressiveCodeTheme } from '@astrojs/starlight/expressive-code';
- *
- * const jsoncString = fs.readFileSync(new URL(`./my-theme.jsonc`, import.meta.url), 'utf-8');
- * const myTheme = ExpressiveCodeTheme.fromJSONString(jsoncString);
- *
- * export default defineConfig({
- *   integrations: [
- *     starlight({
- *       title: 'My Starlight site',
- *       expressiveCode: {
- *         themes: [myTheme],
- *       },
- *     }),
- *   ],
- * });
- * ```
- */
-
-export * from 'astro-expressive-code';
-
-import type { StarlightExpressiveCodeOptions } from './index';
-
-export type { StarlightExpressiveCodeOptions };
-
-/**
- * A utility function that helps you define an Expressive Code configuration object. It is meant
- * to be used inside the optional config file `ec.config.mjs` located in the root directory
- * of your Starlight project, and its return value to be exported as the default export.
- *
- * Expressive Code will automatically detect this file and use the exported configuration object
- * to override its own default settings.
- *
- * Using this function is recommended, but not required. It just passes through the given object,
- * but it also provides type information for your editor's auto-completion and type checking.
- *
- * @example
- * ```js
- * // ec.config.mjs
- * import { defineEcConfig } from '@astrojs/starlight/expressive-code'
- *
- * export default defineEcConfig({
- *   themes: ['starlight-dark', 'github-light'],
- *   styleOverrides: {
- *     borderRadius: '0.5rem',
- *   },
- * })
- * ```
- */
-export function defineEcConfig(config: StarlightExpressiveCodeOptions) {
-	return config;
-}
-
-export { getStarlightEcConfigPreprocessor } from './index';