@astrojs/starlight 0.0.12 → 0.0.14

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @astrojs/starlight
 
+## 0.0.14
+
+### Patch Changes
+
+- [#95](https://github.com/withastro/starlight/pull/95) [`de24b54`](https://github.com/withastro/starlight/commit/de24b54971577912979a3fb67570f4c95efe27a6) Thanks [@delucis](https://github.com/delucis)! - Support translations in sidebar config
+
+- [#97](https://github.com/withastro/starlight/pull/97) [`2d51762`](https://github.com/withastro/starlight/commit/2d517623fb8670d4e7f2656eacff0d5beb27d95a) Thanks [@morinokami](https://github.com/morinokami)! - Add Japanese language support
+
+## 0.0.13
+
+### Patch Changes
+
+- [`8688778`](https://github.com/withastro/starlight/commit/86887786d158e4cdb9e4bd021b2232eb6dba284c) Thanks [@delucis](https://github.com/delucis)! - Fix small CSS compatibility issue
+
+- [#93](https://github.com/withastro/starlight/pull/93) [`c6d7960`](https://github.com/withastro/starlight/commit/c6d7960c8673886eb2b17843e78a897133c05fe2) Thanks [@delucis](https://github.com/delucis)! - Fix default locale routing bug when not using root locale
+
+- [`d8a171b`](https://github.com/withastro/starlight/commit/d8a171b6b45c73151485fe8f08630fb6a1cc12a6) Thanks [@delucis](https://github.com/delucis)! - Fix autogenerated sidebar bug with index routes in subdirectories
+
+- [`d8b9f32`](https://github.com/withastro/starlight/commit/d8b9f3260daaceed8a31eedcc44bd00733f96254) Thanks [@delucis](https://github.com/delucis)! - Fix false positive in sidebar autogeneration logic
+
+- [#92](https://github.com/withastro/starlight/pull/92) [`02821d2`](https://github.com/withastro/starlight/commit/02821d2c8a58c485697cb8f0770c6ba63e709b2a) Thanks [@delucis](https://github.com/delucis)! - Update Pagefind to latest v1 alpha
+
+- [`51fe914`](https://github.com/withastro/starlight/commit/51fe91468fea125ec33cb6d6b1b66f147302fdc0) Thanks [@delucis](https://github.com/delucis)! - Guarantee route and autogenerated sidebar sort order
+
+- [`116c4f5`](https://github.com/withastro/starlight/commit/116c4f5eb0ddf4dddbd10005bc72a7e6cb880a67) Thanks [@delucis](https://github.com/delucis)! - Fix minor dev layout bug in Search modal for RTL languages
+
 ## 0.0.12
 
 ### Patch Changes

package/components/PrevNextLinks.astro

@@ -52,7 +52,7 @@ const t = useTranslations(locale);
   a {
     display: flex;
     align-items: center;
-    justify-content: start;
+    justify-content: flex-start;
     gap: 0.5rem;
     width: 100%;
     flex-basis: calc(50% - 0.5rem);

package/components/Search.astro

@@ -34,7 +34,7 @@ const t = useTranslations(Astro.props.locale);
       </button>
       {
         import.meta.env.DEV ? (
-          <div style="margin: auto; text-align: center;">
+          <div style="margin: auto; text-align: center;" dir="ltr">
             <p>Search is only available in production builds.</p>
             <p>Try building and previewing the site to test it out locally.</p>
           </div>
@@ -63,7 +63,11 @@ const t = useTranslations(Astro.props.locale);
 
       /** Close the modal if a user clicks outside of the modal. */
       const onWindowClick = (event: MouseEvent) => {
-        if (document.body.contains(event.target as Node) && !dialogFrame.contains(event.target as Node)) closeModal();
+        if (
+          document.body.contains(event.target as Node) &&
+          !dialogFrame.contains(event.target as Node)
+        )
+          closeModal();
       };
 
       const openModal = (event?: MouseEvent) => {

package/components/ThemeProvider.astro

@@ -2,14 +2,6 @@
 import Icon from './Icon.astro';
 ---
 
-<script>
-  declare global {
-    var StarlightThemeProvider: {
-      updatePickers(theme?: string): void;
-    };
-  }
-</script>
-
 {/* This is intentionally inlined to avoid FOUC. */}
 <script is:inline>
   window.StarlightThemeProvider = (() => {

package/global.d.ts

@@ -0,0 +1,5 @@
+declare global {
+  var StarlightThemeProvider: {
+    updatePickers(theme?: string): void;
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/starlight",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "Build beautiful, high-performance documentation websites with Astro",
   "keywords": [
     "docs",
@@ -36,12 +36,12 @@
   "dependencies": {
     "@astrojs/mdx": "^0.19.1",
     "@astrojs/sitemap": "^1.3.1",
-    "@pagefind/default-ui": "^0.12.0",
+    "@pagefind/default-ui": "^1.0.0-alpha.5",
     "@types/mdast": "^3.0.11",
     "bcp-47": "^2.1.0",
     "execa": "^7.1.1",
     "hastscript": "^7.2.0",
-    "pagefind": "^0.12.0",
+    "pagefind": "^1.0.0-alpha.5",
     "rehype": "^12.0.1",
     "remark-directive": "^2.0.1",
     "unified": "^10.1.2",

package/translations/index.ts

@@ -2,9 +2,10 @@ import { i18nSchema } from '../schemas/i18n';
 import en from './en.json';
 import es from './es.json';
 import de from './de.json';
+import ja from './ja.json';
 
 const parse = i18nSchema().required().strict().parse;
 
 export default Object.fromEntries(
-  Object.entries({ en, es, de }).map(([key, dict]) => [key, parse(dict)])
+  Object.entries({ en, es, de, ja }).map(([key, dict]) => [key, parse(dict)])
 );

package/translations/ja.json

@@ -0,0 +1,20 @@
+{
+  "skipLink.label": "コンテンツにスキップ",
+  "search.label": "検索",
+  "search.shortcutLabel": "（/を押して検索）",
+  "search.cancelLabel": "キャンセル",
+  "themeSelect.accessibleLabel": "テーマの選択",
+  "themeSelect.dark": "ダーク",
+  "themeSelect.light": "ライト",
+  "themeSelect.auto": "自動",
+  "languageSelect.accessibleLabel": "言語の選択",
+  "menuButton.accessibleLabel": "メニュー",
+  "sidebarNav.accessibleLabel": "メイン",
+  "tableOfContents.onThisPage": "目次",
+  "tableOfContents.overview": "概要",
+  "i18n.untranslatedContent": "このコンテンツはまだ日本語訳がありません。",
+  "page.editLink": "ページを編集",
+  "page.lastUpdated": "最終更新日:",
+  "page.previousLink": "前へ",
+  "page.nextLink": "次へ"
+}

package/utils/i18n.ts

@@ -0,0 +1,16 @@
+/**
+ * Get the string for the passed language from a dictionary object.
+ *
+ * TODO: Make this clever. Currently a simple key look-up, but should use
+ * BCP-47 mapping so that e.g. `en-US` returns `en` strings, and use the
+ * site’s default locale as a last resort.
+ *
+ * @example
+ * pickLang({ en: 'Hello', fr: 'Bonjour' }, 'en'); // => 'Hello'
+ */
+export function pickLang<T extends Record<string, string>>(
+  dictionary: T,
+  lang: keyof T
+): string | undefined {
+  return dictionary[lang];
+}

package/utils/navigation.ts

@@ -1,8 +1,9 @@
 import { basename, dirname } from 'node:path';
 import config from 'virtual:starlight/user-config';
 import { withBase } from './base';
+import { pickLang } from './i18n';
 import { Route, getLocaleRoutes, routes } from './routing';
-import { slugToPathname } from './slugs';
+import { localeToLang, slugToPathname } from './slugs';
 import type {
   AutoSidebarGroup,
   SidebarItem,
@@ -48,7 +49,7 @@ function configItemToEntry(
   } else {
     return {
       type: 'group',
-      label: item.label,
+      label: pickLang(item.translations, localeToLang(locale)) || item.label,
       entries: item.items.map((i) =>
         configItemToEntry(i, currentPathname, locale, routes)
       ),
@@ -65,11 +66,17 @@ function groupFromAutogenerateConfig(
 ): Group {
   const { directory } = item.autogenerate;
   const localeDir = locale ? locale + '/' + directory : directory;
-  const dirDocs = routes.filter((doc) => doc.slug.startsWith(localeDir));
+  const dirDocs = routes.filter(
+    (doc) =>
+      // Match against `foo.md` or `foo/index.md`.
+      doc.slug === localeDir ||
+      // Match against `foo/anything/else.md`.
+      doc.slug.startsWith(localeDir + '/')
+  );
   const tree = treeify(dirDocs, localeDir);
   return {
     type: 'group',
-    label: item.label,
+    label: pickLang(item.translations, localeToLang(locale)) || item.label,
     entries: sidebarFromDir(tree, currentPathname, locale),
   };
 }
@@ -96,7 +103,8 @@ function linkFromConfig(
     // Inject current locale into link.
     if (locale) href = '/' + locale + href;
   }
-  return makeLink(href, item.label, currentPathname);
+  const label = pickLang(item.translations, localeToLang(locale)) || item.label;
+  return makeLink(href, label, currentPathname);
 }
 
 /** Create a link entry. */
@@ -108,6 +116,8 @@ function makeLink(href: string, label: string, currentPathname: string): Link {
 
 /** Get the segments leading to a page. */
 function getBreadcrumbs(slug: string, baseDir: string): string[] {
+  // Index slugs will match `baseDir` and don’t include breadcrumbs.
+  if (slug === baseDir) return [];
   // Ensure base directory ends in a trailing slash.
   if (!baseDir.endsWith('/')) baseDir += '/';
   // Strip base directory from slug if present.

package/utils/routing.ts

@@ -76,7 +76,10 @@ function getRoutes(): Route[] {
     }
   }
 
-  return routes;
+  // Sort alphabetically by page slug to guarantee order regardless of platform.
+  return routes.sort((a, b) =>
+    a.slug < b.slug ? -1 : a.slug > b.slug ? 1 : 0
+  );
 }
 export const routes = getRoutes();
 

package/utils/slugs.ts

@@ -82,6 +82,7 @@ export function localizedSlug(
   const slugLocale = slugToLocale(slug);
   if (slugLocale === locale) return slug;
   locale = locale || '';
+  if (slugLocale === slug) return locale;
   if (slugLocale) {
     return slug
       .replace(slugLocale + '/', locale ? locale + '/' : '')

package/utils/user-config.ts

@@ -27,17 +27,20 @@ const LocaleSchema = z.object({
     ),
 });
 
-const SidebarLinkItemSchema = z.object({
+const SidebarBaseSchema = z.object({
   /** The visible label for this item in the sidebar. */
   label: z.string(),
+  /** Translations of the `label` for each supported language. */
+  translations: z.record(z.string()).default({}),
+});
+
+const SidebarLinkItemSchema = SidebarBaseSchema.extend({
   /** The link to this item’s content. Can be a relative link to local files or the full URL of an external page. */
   link: z.string(),
 });
 export type SidebarLinkItem = z.infer<typeof SidebarLinkItemSchema>;
 
-const AutoSidebarGroupSchema = z.object({
-  /** The visible label for this item in the sidebar. */
-  label: z.string(),
+const AutoSidebarGroupSchema = SidebarBaseSchema.extend({
   /** Enable autogenerating a sidebar category from a specific docs directory. */
   autogenerate: z.object({
     /** The directory to generate sidebar items for. */
@@ -49,20 +52,29 @@ const AutoSidebarGroupSchema = z.object({
 });
 export type AutoSidebarGroup = z.infer<typeof AutoSidebarGroupSchema>;
 
-type ManualSidebarGroup = {
-  /** The visible label for this item in the sidebar. */
-  label: string;
+type ManualSidebarGroupInput = z.input<typeof SidebarBaseSchema> & {
   /** Array of links and subcategories to display in this category. */
   items: Array<
-    | SidebarLinkItem
-    | z.infer<typeof AutoSidebarGroupSchema>
-    | ManualSidebarGroup
+    | z.input<typeof SidebarLinkItemSchema>
+    | z.input<typeof AutoSidebarGroupSchema>
+    | ManualSidebarGroupInput
   >;
 };
 
-const ManualSidebarGroupSchema: z.ZodType<ManualSidebarGroup> = z.object({
-  /** The visible label for this item in the sidebar. */
-  label: z.string(),
+type ManualSidebarGroupOutput = z.output<typeof SidebarBaseSchema> & {
+  /** Array of links and subcategories to display in this category. */
+  items: Array<
+    | z.output<typeof SidebarLinkItemSchema>
+    | z.output<typeof AutoSidebarGroupSchema>
+    | ManualSidebarGroupOutput
+  >;
+};
+
+const ManualSidebarGroupSchema: z.ZodType<
+  ManualSidebarGroupOutput,
+  z.ZodTypeDef,
+  ManualSidebarGroupInput
+> = SidebarBaseSchema.extend({
   /** Array of links and subcategories to display in this category. */
   items: z.lazy(() =>
     z
@@ -83,7 +95,11 @@ const SidebarItemSchema = z.union([
 export type SidebarItem = z.infer<typeof SidebarItemSchema>;
 
 const SidebarGroupSchema: z.ZodType<
-  ManualSidebarGroup | z.infer<typeof AutoSidebarGroupSchema>
+  | z.output<typeof ManualSidebarGroupSchema>
+  | z.output<typeof AutoSidebarGroupSchema>,
+  z.ZodTypeDef,
+  | z.input<typeof ManualSidebarGroupSchema>
+  | z.input<typeof AutoSidebarGroupSchema>
 > = z.union([ManualSidebarGroupSchema, AutoSidebarGroupSchema]);
 
 const UserConfigSchema = z.object({