starlight-versions 0.5.6 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # starlight-versions
 
+## 0.6.0
+
+### Minor Changes
+
+- [#50](https://github.com/HiDeoo/starlight-versions/pull/50) [`983229b`](https://github.com/HiDeoo/starlight-versions/commit/983229b1d907f5bba1e774df40545db21cbb4206) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Adds support for translating the plugin's UI strings.
+
 ## 0.5.6
 
 ### Patch Changes

package/components/VersionBanner.astro

@@ -13,10 +13,16 @@ const pageVersion = getVersionFromSlug(starlightVersionsConfig, starlightConfig,
 {
   pageVersion && template === 'splash' && (
     <div>
-      This content is for {pageVersion.label ?? `the ${pageVersion.slug} version`}. Switch to the
-      {/* prettier-ignore */}
-      <a href={getVersionURL(starlightVersionsConfig, starlightConfig, Astro.url, undefined).pathname}>latest version</a>
-      for up-to-date documentation.
+      {pageVersion.label ? (
+        <Fragment set:html={Astro.locals.t('starlightVersions.outdated.label', { label: pageVersion.label })} />
+      ) : (
+        <Fragment set:html={Astro.locals.t('starlightVersions.outdated.slug', { slug: pageVersion.slug })} />
+      )}{' '}
+      <Fragment
+        set:html={Astro.locals.t('starlightVersions.link.latest', {
+          link: getVersionURL(starlightVersionsConfig, starlightConfig, Astro.url, undefined).pathname,
+        })}
+      />
     </div>
   )
 }
@@ -32,7 +38,7 @@ const pageVersion = getVersionFromSlug(starlightVersionsConfig, starlightConfig,
     text-wrap: balance;
   }
 
-  div a {
+  div :global(a) {
     color: var(--sl-color-orange-high);
   }
 </style>

package/components/VersionNotice.astro

@@ -13,10 +13,16 @@ const pageVersion = getVersionFromSlug(starlightVersionsConfig, starlightConfig,
     <p>
       <Icon name="seti:clock" size="1em" color="var(--sl-color-orange-high)" />
       <span>
-        This content is for {pageVersion.label ?? `the ${pageVersion.slug} version`}. Switch to the
-        {/* prettier-ignore */}
-        <a href={getVersionURL(starlightVersionsConfig, starlightConfig, Astro.url, undefined).pathname}>latest version</a>
-        for up-to-date documentation.
+        {pageVersion.label ? (
+          <Fragment set:html={Astro.locals.t('starlightVersions.outdated.label', { label: pageVersion.label })} />
+        ) : (
+          <Fragment set:html={Astro.locals.t('starlightVersions.outdated.slug', { slug: pageVersion.slug })} />
+        )}{' '}
+        <Fragment
+          set:html={Astro.locals.t('starlightVersions.link.latest', {
+            link: getVersionURL(starlightVersionsConfig, starlightConfig, Astro.url, undefined).pathname,
+          })}
+        />
       </span>
     </p>
   )
@@ -37,7 +43,7 @@ const pageVersion = getVersionFromSlug(starlightVersionsConfig, starlightConfig,
     line-height: var(--sl-line-height-headings);
   }
 
-  p a {
+  p :global(a) {
     color: var(--sl-color-orange-high);
   }
 

package/components/VersionSearch.astro

@@ -35,7 +35,7 @@ if (project.trailingSlash === 'never') dataAttributes['data-strip-trailing-slash
 ---
 
 <site-search class={Astro.props['class']} {...dataAttributes}>
-  <button data-open-modal disabled>
+  <button data-open-modal disabled aria-label={Astro.locals.t('search.label')} aria-keyshortcuts="Control+K">
     <Icon name="magnifier" />
     <span class="sl-hidden md:sl-block" aria-hidden="true">{Astro.locals.t('search.label')}</span>
     <kbd class="sl-hidden md:sl-flex" style="display: none;">
@@ -60,10 +60,22 @@ if (project.trailingSlash === 'never') dataAttributes['data-strip-trailing-slash
                 <div class="starlight-versions-pagefind-notice">
                   <Icon name="seti:clock" size="1em" color="var(--sl-color-orange-high)" />
                   <span>
-                    Search limited to {pageVersion.label ?? `the ${pageVersion.slug} version`}. Switch to the
-                    {/* prettier-ignore */}
-                    <a href={getVersionURL(starlightVersionsConfig, starlightConfig, Astro.url, undefined).pathname}>latest version</a>
-                    for up-to-date results.
+                    {pageVersion.label ? (
+                      <Fragment
+                        set:html={Astro.locals.t('starlightVersions.search.outdated.label', {
+                          label: pageVersion.label,
+                        })}
+                      />
+                    ) : (
+                      <Fragment
+                        set:html={Astro.locals.t('starlightVersions.search.outdated.slug', { slug: pageVersion.slug })}
+                      />
+                    )}{' '}
+                    <Fragment
+                      set:html={Astro.locals.t('starlightVersions.search.link.latest', {
+                        link: getVersionURL(starlightVersionsConfig, starlightConfig, Astro.url, undefined).pathname,
+                      })}
+                    />
                   </span>
                 </div>
               )}
@@ -97,6 +109,8 @@ if (project.trailingSlash === 'never') dataAttributes['data-strip-trailing-slash
 </script>
 
 <script>
+  import { pagefindUserConfig } from 'virtual:starlight/pagefind-config'
+
   class SiteSearch extends HTMLElement {
     constructor() {
       super()
@@ -163,6 +177,7 @@ if (project.trailingSlash === 'never') dataAttributes['data-strip-trailing-slash
           // @ts-expect-error — Missing types for @pagefind/default-ui package.
           const { PagefindUI } = await import('@pagefind/default-ui')
           const search = new PagefindUI({
+            ...pagefindUserConfig,
             element: '#starlight__search',
             baseUrl: import.meta.env.BASE_URL,
             bundlePath: `${import.meta.env.BASE_URL.replace(/\/$/, '')}/pagefind/`,
@@ -282,12 +297,13 @@ if (project.trailingSlash === 'never') dataAttributes['data-strip-trailing-slash
   }
 
   #starlight__search {
-    --pagefind-ui-primary: var(--sl-color-accent-light);
+    --pagefind-ui-primary: var(--sl-color-text);
     --pagefind-ui-text: var(--sl-color-gray-2);
     --pagefind-ui-font: var(--__sl-font);
     --pagefind-ui-background: var(--sl-color-black);
     --pagefind-ui-border: var(--sl-color-gray-5);
     --pagefind-ui-border-width: 1px;
+    --pagefind-ui-tag: var(--sl-color-gray-5);
     --sl-search-cancel-space: 5rem;
 
     display: flex;
@@ -499,6 +515,16 @@ if (project.trailingSlash === 'never') dataAttributes['data-strip-trailing-slash
     font-weight: 600;
   }
 
+  #starlight__search .pagefind-ui__filter-value::before {
+    border-color: var(--sl-color-text-invert);
+  }
+
+  #starlight__search .pagefind-ui__result-tags {
+    background-color: var(--sl-color-black);
+    margin-top: 0;
+    padding: var(--sl-search-result-nested-pad-block) var(--sl-search-result-pad-inline-end);
+  }
+
   #starlight__search .pagefind-ui__filter-panel {
     display: none;
   }

package/components/VersionSelect.astro

@@ -12,7 +12,7 @@ const pageVersion = getVersionFromSlug(starlightVersionsConfig, starlightConfig,
 
 <starlight-version-select>
   <label>
-    <span class="sr-only">Select version</span>
+    <span class="sr-only">{Astro.locals.t('starlightVersions.select.accessibleLabel')}</span>
     <Icon name="seti:clock" class="icon label-icon" />
     <select value={pageVersion?.label ?? 'current'} autocomplete="off">
       <option

package/index.ts

@@ -4,6 +4,7 @@ import { StarlightVersionsConfigSchema, type StarlightVersionsUserConfig } from
 import { overrideComponents, throwPluginError } from './libs/plugin'
 import { ensureNewVersion, getVersionedSidebar } from './libs/versions'
 import { vitePluginStarlightVersions } from './libs/vite'
+import { Translations } from './translations'
 
 export type { StarlightVersionsConfig, StarlightVersionsUserConfig } from './libs/config'
 
@@ -21,6 +22,9 @@ export default function starlightVersionsPlugin(userConfig: StarlightVersionsUse
   return {
     name: 'starlight-versions-plugin',
     hooks: {
+      'i18n:setup'({ injectTranslations }) {
+        injectTranslations(Translations)
+      },
       async 'config:setup'({
         addIntegration,
         addRouteMiddleware,

package/locals.d.ts

@@ -0,0 +1,9 @@
+declare namespace App {
+  type StarlightLocals = import('@astrojs/starlight').StarlightLocals
+  interface Locals extends StarlightLocals {}
+}
+
+declare namespace StarlightApp {
+  type Translations = typeof import('./translations').Translations.en
+  interface I18n extends Translations {}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "starlight-versions",
-  "version": "0.5.6",
+  "version": "0.6.0",
   "license": "MIT",
   "description": "Starlight plugin to version documentation pages.",
   "author": "HiDeoo <github@hideoo.dev> (https://hideoo.dev)",

package/translations.ts

@@ -0,0 +1,11 @@
+export const Translations = {
+  en: {
+    'starlightVersions.link.latest': 'Switch to the <a href={{link}}>latest version</a> for up-to-date documentation.',
+    'starlightVersions.outdated.label': 'This content is for {{label}}.',
+    'starlightVersions.outdated.slug': 'This content is for the {{slug}} version.',
+    'starlightVersions.search.link.latest': 'Switch to the <a href={{link}}>latest version</a> for up-to-date results.',
+    'starlightVersions.search.outdated.label': 'Search limited to {{label}}.',
+    'starlightVersions.search.outdated.slug': 'Search limited to the {{slug}} version.',
+    'starlightVersions.select.accessibleLabel': 'Select version',
+  },
+}

package/virtual.d.ts

@@ -21,3 +21,9 @@ declare module 'virtual:starlight/project-context' {
   }
   export default ProjectContext
 }
+
+declare module 'virtual:starlight/pagefind-config' {
+  export const pagefindUserConfig: Partial<
+    Extract<import('@astrojs/starlight/types').StarlightConfig['pagefind'], object>
+  >
+}