@astrojs/starlight 0.17.1 → 0.17.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @astrojs/starlight
 
+## 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/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.2",
   "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/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/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';