@astrojs/starlight 0.4.1 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @astrojs/starlight
 
+## 0.5.0
+
+### Minor Changes
+
+- [#313](https://github.com/withastro/starlight/pull/313) [`dc42569`](https://github.com/withastro/starlight/commit/dc42569bddfae2c48ea60c0dd5cc70643a129a68) Thanks [@delucis](https://github.com/delucis)! - Add a `not-content` CSS class that allows users to opt out of Starlight’s default content styling
+
+- [#297](https://github.com/withastro/starlight/pull/297) [`fb15a9b`](https://github.com/withastro/starlight/commit/fb15a9b65252ac5fa32304096fbdb49ecdd6009b) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Improve `<Tabs>` component keyboard interactions
+
+- [#303](https://github.com/withastro/starlight/pull/303) [`69b7d4c`](https://github.com/withastro/starlight/commit/69b7d4c23761a45dc2b9ea75c6c9c904a885ba5d) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Add new global `pagination` option defaulting to `true` to define whether or not the previous and next page links are shown in the footer. A page can override this setting or the link text and/or URL using the new `prev` and `next` frontmatter fields.
+
+### Patch Changes
+
+- [#318](https://github.com/withastro/starlight/pull/318) [`5db3e6e`](https://github.com/withastro/starlight/commit/5db3e6ea2e5cb7d9552fc54567811358851fb533) Thanks [@delucis](https://github.com/delucis)! - Support relative paths in Starlight config for `customCSS` and `logo` paths
+
+## 0.4.2
+
+### Patch Changes
+
+- [#308](https://github.com/withastro/starlight/pull/308) [`c3aa4c6`](https://github.com/withastro/starlight/commit/c3aa4c6aa18f7f6859ad1c0acc28f0da59a84760) Thanks [@delucis](https://github.com/delucis)! - Fix use of default monospace font stack
+
+- [#286](https://github.com/withastro/starlight/pull/286) [`a2aedfc`](https://github.com/withastro/starlight/commit/a2aedfc7f9555b44f5f33aad7f4a98b207a11b47) Thanks [@mzaien](https://github.com/mzaien)! - Add Arabic UI translations
+
 ## 0.4.1
 
 ### Patch Changes

package/components/Footer.astro

@@ -14,7 +14,10 @@ interface Props extends LocaleData {
 }
 
 const { entry, dir, lang, locale, sidebar } = Astro.props;
-const prevNextLinks = getPrevNextLinks(sidebar);
+const prevNextLinks = getPrevNextLinks(sidebar, config.pagination, {
+  prev: entry.data.prev,
+  next: entry.data.next
+});
 ---
 
 <footer>

package/components/MarkdownContent.astro

@@ -2,112 +2,133 @@
 
 <style>
   .content
-    :global(
+    > :global(
       :not(a, strong, em, del, span, input)
-        + :not(a, strong, em, del, span, input)
+        + :not(a, strong, em, del, span, input, :where(.not-content *))
     ) {
     margin-top: 1.5rem;
   }
 
   /* Headings after non-headings have more spacing. */
-  .content :global(:not(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6)) {
+  .content
+    :global(
+      :not(h1, h2, h3, h4, h5, h6)
+        + :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *))
+    ) {
     margin-top: 2.5rem;
   }
 
-  .content :global(li + li),
-  .content :global(dt + dt),
-  .content :global(dt + dd),
-  .content :global(dd + dd) {
+  .content :global(li + li:not(:where(.not-content *))),
+  .content :global(dt + dt:not(:where(.not-content *))),
+  .content :global(dt + dd:not(:where(.not-content *))),
+  .content :global(dd + dd:not(:where(.not-content *))) {
     margin-top: 0.25rem;
   }
 
   .content
     :global(
-      li > :last-child:not(li, ul, ol):not(a, strong, em, del, span, input)
+      li
+        > :last-child:not(li, ul, ol):not(
+          a,
+          strong,
+          em,
+          del,
+          span,
+          input,
+          :where(.not-content *)
+        )
     ) {
     margin-bottom: 1.25rem;
   }
 
-  .content :global(dt) {
+  .content :global(dt:not(:where(.not-content *))) {
     font-weight: 700;
   }
-  .content :global(dd) {
+  .content :global(dd:not(:where(.not-content *))) {
     padding-inline-start: 1rem;
   }
 
-  .content :global(:is(h1, h2, h3, h4, h5, h6)) {
+  .content :global(:is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *))) {
     color: var(--sl-color-white);
     line-height: var(--sl-line-height-headings);
     font-weight: 600;
   }
 
-  .content :global(:is(img, picture, video, canvas, svg, iframe)) {
+  .content
+    :global(
+      :is(img, picture, video, canvas, svg, iframe):not(:where(.not-content *))
+    ) {
     display: block;
     max-width: 100%;
     height: auto;
   }
 
-  .content :global(h1) {
+  .content :global(h1:not(:where(.not-content *))) {
     font-size: var(--sl-text-h1);
   }
-  .content :global(h2) {
+  .content :global(h2:not(:where(.not-content *))) {
     font-size: var(--sl-text-h2);
   }
-  .content :global(h3) {
+  .content :global(h3:not(:where(.not-content *))) {
     font-size: var(--sl-text-h3);
   }
-  .content :global(h4) {
+  .content :global(h4:not(:where(.not-content *))) {
     font-size: var(--sl-text-h4);
   }
-  .content :global(h5) {
+  .content :global(h5:not(:where(.not-content *))) {
     font-size: var(--sl-text-h5);
   }
-  .content :global(h6) {
+  .content :global(h6:not(:where(.not-content *))) {
     font-size: var(--sl-text-h6);
   }
 
-  .content :global(a) {
+  .content :global(a:not(:where(.not-content *))) {
     color: var(--sl-color-text-accent);
   }
-  .content :global(a:hover) {
+  .content :global(a:hover:not(:where(.not-content *))) {
     color: var(--sl-color-white);
   }
 
-  .content :global(code) {
+  .content :global(code:not(:where(.not-content *))) {
     background-color: var(--sl-color-bg-inline-code);
     margin-block: -0.125rem;
     padding: 0.125rem 0.375rem;
+    font-size: var(--sl-text-code-sm);
+  }
+  .content :global(:is(h1, h2, h3, h4, h5, h6) code) {
+    font-size: inherit;
   }
 
-  .content :global(pre) {
+  .content :global(pre:not(:where(.not-content *))) {
     border: 1px solid var(--sl-color-gray-5);
     padding: 0.75rem 1rem;
     font-size: var(--sl-text-code);
   }
 
-  .content :global(pre code) {
+  .content :global(pre code:not(:where(.not-content *))) {
     all: unset;
+    font-family: var(--__sl-font-mono);
   }
 
-  .content :global(blockquote) {
+  .content :global(blockquote:not(:where(.not-content *))) {
     border-inline-start: 1px solid var(--sl-color-gray-5);
     padding-inline-start: 1rem;
   }
 
-  .content :global(table) {
+  .content :global(table:not(:where(.not-content *))) {
     display: block;
     overflow: auto;
     border-collapse: collapse;
   }
-  .content :global(tr:nth-child(2n)) {
+  .content :global(tr:nth-child(2n):not(:where(.not-content *))) {
     background-color: var(--sl-color-gray-7, var(--sl-color-gray-6));
   }
-  .content :global(:is(th, td)) {
+  .content :global(:is(th, td):not(:where(.not-content *))) {
     border: 1px solid var(--sl-color-hairline);
     padding: 0.375rem 0.8125rem;
   }
 
-  .content :global(hr) {
+  .content :global(hr:not(:where(.not-content *))) {
     border: 0;
     border-bottom: 1px solid var(--sl-color-hairline);
   }

package/index.ts

@@ -6,7 +6,7 @@ import type {
   ViteUserConfig,
 } from 'astro';
 import { spawn } from 'node:child_process';
-import { dirname, relative } from 'node:path';
+import { dirname, relative, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { starlightAsides } from './integrations/asides';
 import { starlightSitemap } from './integrations/sitemap';
@@ -88,18 +88,20 @@ function vitePluginStarlightUserConfig(
   opts: StarlightConfig,
   { root }: AstroConfig
 ): NonNullable<ViteUserConfig['plugins']>[number] {
+  const resolveRelativeId = (id: string) =>
+    id.startsWith('.') ? resolve(fileURLToPath(root), id) : id;
   const modules = {
     'virtual:starlight/user-config': `export default ${JSON.stringify(opts)}`,
     'virtual:starlight/project-context': `export default ${JSON.stringify({
       root,
     })}`,
     'virtual:starlight/user-css': opts.customCss
-      .map((id) => `import "${id}";`)
+      .map((id) => `import "${resolveRelativeId(id)}";`)
       .join(''),
     'virtual:starlight/user-images': opts.logo
       ? 'src' in opts.logo
-        ? `import src from "${opts.logo.src}"; export const logos = { dark: src, light: src };`
-        : `import dark from "${opts.logo.dark}"; import light from "${opts.logo.light}"; export const logos = { dark, light };`
+        ? `import src from "${resolveRelativeId(opts.logo.src)}"; export const logos = { dark: src, light: src };`
+        : `import dark from "${resolveRelativeId(opts.logo.dark)}"; import light from "${resolveRelativeId(opts.logo.light)}"; export const logos = { dark, light };`
       : 'export const logos = {};',
   };
   const resolutionMap = Object.fromEntries(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/starlight",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Build beautiful, high-performance documentation websites with Astro",
   "keywords": [
     "docs",
@@ -31,7 +31,7 @@
   },
   "devDependencies": {
     "@types/node": "^18.15.11",
-    "astro": "^2.7.3"
+    "astro": "2.7.0"
   },
   "dependencies": {
     "@astrojs/mdx": "^0.19.7",
@@ -40,6 +40,7 @@
     "@types/mdast": "^3.0.11",
     "bcp-47": "^2.1.0",
     "execa": "^7.1.1",
+    "hast-util-select": "^5.0.5",
     "hastscript": "^7.2.0",
     "pagefind": "^1.0.0-alpha.5",
     "rehype": "^12.0.1",

package/schema.ts

@@ -1,5 +1,6 @@
 import { z } from 'astro/zod';
 import { HeadConfigSchema } from './schemas/head';
+import { PrevNextLinkConfigSchema } from './schemas/prevNextLink';
 import { TableOfContentsSchema } from './schemas/tableOfContents';
 import { Icons } from './components/Icons';
 export { i18nSchema } from './schemas/i18n';
@@ -119,5 +120,16 @@ export function docsSchema() {
        * Overrides the `lastUpdated` global config or the date generated from the Git history.
        */
       lastUpdated: z.union([z.date(), z.boolean()]).optional(),
+
+      /**
+       * The previous navigation link configuration.
+       * Overrides the `pagination` global config or the link text and/or URL.
+       */
+      prev: PrevNextLinkConfigSchema(),
+      /**
+       * The next navigation link configuration.
+       * Overrides the `pagination` global config or the link text and/or URL.
+       */
+      next: PrevNextLinkConfigSchema(),
     });
 }

package/schemas/prevNextLink.ts

@@ -0,0 +1,20 @@
+import { z } from 'astro/zod';
+
+export const PrevNextLinkConfigSchema = () =>
+  z
+    .union([
+      z.boolean(),
+      z.string(),
+      z
+        .object({
+          /** The navigation link URL. */
+          link: z.string().optional(),
+          /** The navigation link text. */
+          label: z.string().optional(),
+        })
+        .strict(),
+    ])
+    .optional();
+
+export type PrevNextLinkUserConfig = z.input<ReturnType<typeof PrevNextLinkConfigSchema>>;
+export type PrevNextLinkConfig = z.output<ReturnType<typeof PrevNextLinkConfigSchema>>;

package/style/props.css

@@ -89,8 +89,8 @@
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --sl-font-system-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
     'Liberation Mono', 'Courier New', monospace;
-  --__sb-font: var(--sl-font, ''), var(--sl-font-system);
-  --__sb-font-mono: var(--sl-font-mono, ''), var(--sl-font-system-mono);
+  --__sl-font: var(--sl-font, ''), var(--sl-font-system);
+  --__sl-font-mono: var(--sl-font-mono, ''), var(--sl-font-system-mono);
 
   /** Key layout values */
   --sl-nav-height: 3.5rem;

package/style/reset.css

@@ -18,7 +18,7 @@ html[data-theme='light'] {
 }
 
 body {
-  font-family: var(--__sb-font);
+  font-family: var(--__sl-font);
   line-height: var(--sl-line-height);
   -webkit-font-smoothing: antialiased;
   color: var(--sl-color-text);
@@ -41,3 +41,7 @@ h5,
 h6 {
   overflow-wrap: break-word;
 }
+
+code {
+  font-family: var(--__sl-font-mono);
+}

package/translations/ar.json

@@ -0,0 +1,22 @@
+{
+  "skipLink.label": "الذهاب للمحتوى",
+  "search.label": "البحث",
+  "search.shortcutLabel": "(إضغط / للبحث)",
+  "search.cancelLabel": "إلغاء",
+  "search.devWarning": "البحث متوفر فقط في نسخ الاطلاق. \n جرب بناء المشروع ومعاينته على جهازك",
+  "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": "التالي",
+  "404.text": "الصفحة غير موجودة. تأكد من الرابط أو ابحث بإستعمال شريط البحث."
+}

package/translations/index.ts

@@ -10,11 +10,12 @@ import it from './it.json';
 import nl from './nl.json';
 import da from './da.json';
 import tr from './tr.json';
+import ar from './ar.json';
 
 const { parse } = builtinI18nSchema();
 
 export default Object.fromEntries(
-  Object.entries({ cs, en, es, de, ja, pt, fr, it, nl, da, tr }).map(([key, dict]) => [
+  Object.entries({ cs, en, es, de, ja, pt, fr, it, nl, da, tr, ar }).map(([key, dict]) => [
     key,
     parse(dict),
   ])

package/user-components/Tabs.astro

@@ -8,7 +8,7 @@ const { html, panels } = processPanels(panelHtml);
 <starlight-tabs>
   {
     panels && (
-      <div class="tablist-wrapper">
+      <div class="tablist-wrapper not-content">
         <ul role="tablist">
           {panels.map(({ label, panelId, tabId }, idx) => (
             <li role="presentation" class="tab">
@@ -46,9 +46,6 @@ const { html, panels } = processPanels(panelHtml);
     padding: 0;
   }
 
-  [role='tablist'] .tab + .tab {
-    margin-top: 0;
-  }
   .tab {
     margin-bottom: -2px;
   }
@@ -101,23 +98,20 @@ const { html, panels } = processPanels(panelHtml);
           const index = this.tabs.indexOf(e.currentTarget as any);
           // Work out which key the user is pressing and
           // Calculate the new tab's index where appropriate
-          const dir =
+          const nextIndex =
             e.key === 'ArrowLeft'
               ? index - 1
               : e.key === 'ArrowRight'
               ? index + 1
-              : e.key === 'ArrowDown'
-              ? 'down'
+              : e.key === 'Home'
+              ? 0
+              : e.key === 'End'
+              ? this.tabs.length - 1
               : null;
-          if (dir === null) return;
-          // If the down key is pressed, move focus to the open panel,
-          // otherwise switch to the adjacent tab
-          if (dir === 'down') {
-            e.preventDefault();
-            this.panels[i]?.focus();
-          } else if (this.tabs[dir]) {
+          if (nextIndex === null) return;
+          if (this.tabs[nextIndex]) {
             e.preventDefault();
-            this.switchTab(this.tabs[dir], dir);
+            this.switchTab(this.tabs[nextIndex], nextIndex);
           }
         });
       });

package/user-components/rehype-tabs.ts

@@ -1,3 +1,4 @@
+import { select } from 'hast-util-select';
 import { rehype } from 'rehype';
 import { CONTINUE, SKIP, visit } from 'unist-util-visit';
 
@@ -15,6 +16,26 @@ declare module 'vfile' {
 
 export const TabItemTagname = 'starlight-tab-item';
 
+// https://github.com/adobe/react-spectrum/blob/99ca82e87ba2d7fdd54f5b49326fd242320b4b51/packages/%40react-aria/focus/src/FocusScope.tsx#L256-L275
+const focusableElementSelectors = [
+  'input:not([disabled]):not([type=hidden])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  'button:not([disabled])',
+  'a[href]',
+  'area[href]',
+  'summary',
+  'iframe',
+  'object',
+  'embed',
+  'audio[controls]',
+  'video[controls]',
+  '[contenteditable]',
+  '[tabindex]:not([disabled])',
+]
+  .map((selector) => `${selector}:not([hidden]):not([tabindex="-1"])`)
+  .join(',');
+
 let count = 0;
 const getIDs = () => {
   const id = count++;
@@ -51,7 +72,14 @@ const tabsProcessor = rehype()
         node.properties.id = ids.panelId;
         node.properties['aria-labelledby'] = ids.tabId;
         node.properties.role = 'tabpanel';
-        node.properties.tabindex = -1;
+
+        const focusableChild = select(focusableElementSelectors, node);
+        // If the panel does not contain any focusable elements, include it in
+        // the tab sequence of the page.
+        if (!focusableChild) {
+          node.properties.tabindex = 0;
+        }
+        
         // Hide all panels except the first
         // TODO: make initially visible tab configurable
         if (isFirst) {

package/utils/navigation.ts

@@ -9,6 +9,7 @@ import type {
   SidebarItem,
   SidebarLinkItem,
 } from './user-config';
+import type { PrevNextLinkConfig } from '../schemas/prevNextLink';
 
 export interface Link {
   type: 'link';
@@ -234,17 +235,63 @@ export function flattenSidebar(sidebar: SidebarEntry[]): Link[] {
   );
 }
 
-/** Get previous/next pages in the sidebar if there are any. */
-export function getPrevNextLinks(sidebar: SidebarEntry[]): {
+/** Get previous/next pages in the sidebar or the ones from the frontmatter if any. */
+export function getPrevNextLinks(
+  sidebar: SidebarEntry[],
+  paginationEnabled: boolean,
+  config: {
+    prev?: PrevNextLinkConfig;
+    next?: PrevNextLinkConfig;
+  }
+): {
   prev: Link | undefined;
   next: Link | undefined;
 } {
   const entries = flattenSidebar(sidebar);
   const currentIndex = entries.findIndex((entry) => entry.isCurrent);
-  const prev = entries[currentIndex - 1];
-  const next = currentIndex > -1 ? entries[currentIndex + 1] : undefined;
+  const prev = applyPrevNextLinkConfig(
+    entries[currentIndex - 1],
+    paginationEnabled,
+    config.prev
+  );
+  const next = applyPrevNextLinkConfig(
+    currentIndex > -1 ? entries[currentIndex + 1] : undefined,
+    paginationEnabled,
+    config.next
+  );
   return { prev, next };
 }
 
+/** Apply a prev/next link config to a navigation link. */
+function applyPrevNextLinkConfig(
+  link: Link | undefined,
+  paginationEnabled: boolean,
+  config: PrevNextLinkConfig | undefined
+): Link | undefined {
+  // Explicitly remove the link.
+  if (config === false) return undefined;
+  // Use the generated link if any.
+  else if (config === true) return link;
+  // If a link exists, update its label if needed.
+  else if (typeof config === 'string' && link) {
+    return { ...link, label: config };
+  } else if (typeof config === 'object') {
+    if (link) {
+      // If a link exists, update both its label and href if needed.
+      return {
+        ...link,
+        label: config.label ?? link.label,
+        href: config.link ?? link.href,
+      }
+    } else if (config.link && config.label) {
+      // If there is no link and the frontmatter contains both a URL and a label,
+      // create a new link.
+      return makeLink(config.link, config.label, config.link);
+    }
+  }
+  // Otherwise, if the global config is enabled, return the generated link if any.
+  return paginationEnabled ? link : undefined;
+}
+
 /** Remove the extension from a path. */
 const stripExtension = (path: string) => path.replace(/\.\w+$/, '');

package/utils/user-config.ts

@@ -252,6 +252,14 @@ const UserConfigSchema = z.object({
     .default(false)
     .describe(
       'Define if the last update date should be visible in the page footer.'
+  ),
+  
+  /** Define if the previous and next page links should be visible in the page footer. */
+  pagination: z
+    .boolean()
+    .default(true)
+    .describe(
+      'Define if the previous and next page links should be visible in the page footer.'
     ),
 });