@astrojs/starlight 0.0.7 → 0.0.8

package/404.astro

@@ -17,6 +17,7 @@ import ThemeProvider from './components/ThemeProvider.astro';
 
 // Important that this is the last import so it can override built-in styles.
 import 'virtual:starlight/user-css';
+import { withBase } from './utils/base';
 
 const { lang = 'en', dir = 'ltr', locale } = config.defaultLocale || {};
 ---
@@ -37,7 +38,7 @@ const { lang = 'en', dir = 'ltr', locale } = config.defaultLocale || {};
           <p>Houston, we have a problem.</p>
           <p>
             We couldn’t find that link. Check the address or <a
-              href={import.meta.env.BASE_URL}>head back home</a
+              href={withBase('/')}>head back home</a
             >.
           </p>
         </MarkdownContent>

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @astrojs/starlight
 
+## 0.0.8
+
+### Patch Changes
+
+- [#62](https://github.com/withastro/starlight/pull/62) [`a91191e`](https://github.com/withastro/starlight/commit/a91191e8308ffa746a3eadeea61e39412f32f926) Thanks [@delucis](https://github.com/delucis)! - Make `base` support consistent, including when `trailingSlash: 'never'` is set.
+
+- [#61](https://github.com/withastro/starlight/pull/61) [`608f34c`](https://github.com/withastro/starlight/commit/608f34cbbe485c39730f33828971397f9c8a3534) Thanks [@liruifengv](https://github.com/liruifengv)! - Fix toc headingsObserver rootMargin
+
+- [#66](https://github.com/withastro/starlight/pull/66) [`9ca67d8`](https://github.com/withastro/starlight/commit/9ca67d8984f76c22e5411d7352aa8e0bd4514f42) Thanks [@Yan-Thomas](https://github.com/Yan-Thomas)! - Make site title width fit the content
+
+- [#64](https://github.com/withastro/starlight/pull/64) [`4460e55`](https://github.com/withastro/starlight/commit/4460e55de210fd9a23a762fe76f5c32297d68d76) Thanks [@delucis](https://github.com/delucis)! - Fix table of contents intersection observer for all possible viewport sizes.
+
+- [#67](https://github.com/withastro/starlight/pull/67) [`38c2c1f`](https://github.com/withastro/starlight/commit/38c2c1f1ed25d6efe6ab2637ca2d9fbcdafcd240) Thanks [@TheOtterlord](https://github.com/TheOtterlord)! - Fix background color on select component
+
+- [#57](https://github.com/withastro/starlight/pull/57) [`5b6cccb`](https://github.com/withastro/starlight/commit/5b6cccb7f9ee5810c75fbbb45496e2a1d022f7dd) Thanks [@BryceRussell](https://github.com/BryceRussell)! - Update site title link to include locale
+
 ## 0.0.7
 
 ### Patch Changes

package/components/HeadSEO.astro

@@ -4,6 +4,7 @@ import config from 'virtual:starlight/user-config';
 import type { HeadConfigSchema } from '../schemas/head';
 import { createHead } from '../utils/head';
 import { localizedUrl } from '../utils/localizedUrl';
+import { withBase } from '../utils/base';
 
 interface Props {
   data: CollectionEntry<'docs'>['data'];
@@ -32,7 +33,7 @@ const headDefaults: z.input<ReturnType<typeof HeadConfigSchema>> = [
     tag: 'link',
     attrs: {
       rel: 'shortcut icon',
-      href: import.meta.env.BASE_URL + 'favicon.svg',
+      href: withBase('/favicon.svg'),
       type: 'image/svg+xml',
     },
   },
@@ -80,7 +81,7 @@ if (Astro.site) {
     tag: 'link',
     attrs: {
       rel: 'sitemap',
-      href: import.meta.env.BASE_URL + 'sitemap-index.xml',
+      href: withBase('/sitemap-index.xml'),
     },
   });
 }

package/components/Header.astro

@@ -8,15 +8,17 @@ import ThemeSelect from './ThemeSelect.astro';
 interface Props {
   locale: string | undefined;
 }
+
+const { locale } = Astro.props
 ---
 
 <div class="header">
-  <SiteTitle />
+  <SiteTitle {locale} />
   <Search />
   <div class="hidden md:flex right-group">
     <SocialIcons />
     <ThemeSelect />
-    <LanguageSelect locale={Astro.props.locale} />
+    <LanguageSelect {locale}/>
   </div>
 </div>
 

package/components/Select.astro

@@ -72,6 +72,10 @@ interface Props {
     appearance: none;
   }
 
+  option {
+    background-color: var(--sl-color-bg-nav);
+  }
+
   @media (min-width: 50rem) {
     select {
       font-size: var(--sl-text-sm);

package/components/SiteTitle.astro

@@ -1,6 +1,11 @@
 ---
 import { logos } from 'virtual:starlight/user-images';
 import config from 'virtual:starlight/user-config';
+import { withBase } from '../utils/base';
+
+interface Props {
+  locale: string | undefined;
+}
 
 if (config.logo) {
   let err: string | undefined;
@@ -17,9 +22,11 @@ if (config.logo) {
   }
   if (err) throw new Error(err);
 }
+
+const href = withBase(Astro.props.locale || '/');
 ---
 
-<a href={import.meta.env.BASE_URL} class="site-title flex">
+<a {href} class="site-title flex">
   {
     config.logo && logos.dark && (
       <>
@@ -50,6 +57,7 @@ if (config.logo) {
 
 <style>
   .site-title {
+    justify-self: flex-start;
     align-items: center;
     gap: var(--sl-nav-gap);
     font-size: var(--sl-text-h4);

package/components/TableOfContents/MobileTableOfContents.astro

@@ -121,7 +121,7 @@ const toc = generateToC(Astro.props.headings, config.tableOfContents);
     }
 
     constructor() {
-      super();
+      super({ smallViewport: true });
       const details = this.querySelector('details');
       if (!details) return;
       const closeToC = () => {

package/components/TableOfContents/starlight-toc.ts

@@ -12,7 +12,7 @@ export class StarlightTOC extends HTMLElement {
     this._current = link;
   }
 
-  constructor() {
+  constructor({ smallViewport = false } = {}) {
     super();
 
     /** All the links in the table of contents. */
@@ -68,17 +68,35 @@ export class StarlightTOC extends HTMLElement {
       }
     };
 
-    const headingsObserver = new IntersectionObserver(setCurrent, {
-      rootMargin: '5% 0% -85%',
-    });
-
     // Observe elements with an `id` (most likely headings) and their siblings.
     // Also observe direct children of `.content` to include elements before
     // the first heading.
     const toObserve = document.querySelectorAll(
       'main [id], main [id] ~ *, main .content > *'
     );
-    toObserve.forEach((h) => headingsObserver.observe(h));
+    /** Start intersections at nav height + 2rem padding. */
+    const top = (smallViewport ? 104 : 64) + 32;
+    /** End intersections 1.5rem later. */
+    const bottom = top + 24;
+
+    let observer: IntersectionObserver | undefined;
+    function observe() {
+      if (observer) observer.disconnect();
+      const height = document.documentElement.clientHeight;
+      const rootMargin = `-${top}px 0% ${bottom - height}px`;
+      observer = new IntersectionObserver(setCurrent, { rootMargin });
+      toObserve.forEach((h) => observer!.observe(h));
+    }
+    observe();
+
+    const onIdle = window.requestIdleCallback || ((cb) => setTimeout(cb, 1));
+    let timeout: NodeJS.Timeout;
+    window.addEventListener('resize', () => {
+      // Disable intersection observer while window is resizing.
+      if (observer) observer.disconnect();
+      clearTimeout(timeout);
+      timeout = setTimeout(() => onIdle(observe), 200);
+    });
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/starlight",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Build beautiful, high-performance documentation websites with Astro",
   "keywords": [
     "docs",

package/utils/base.ts

@@ -0,0 +1,14 @@
+const base = stripTrailingSlash(import.meta.env.BASE_URL);
+
+/** Get the a root-relative URL path with the site’s `base` prefixed. */
+export function withBase(path: string) {
+  path = stripLeadingSlash(stripTrailingSlash(path));
+  return path ? base + '/' + path + '/' : base + '/';
+}
+
+function stripLeadingSlash(path: string) {
+  return path.replace(/^\//, '');
+}
+function stripTrailingSlash(path: string) {
+  return path.replace(/\/$/, '');
+}

package/utils/navigation.ts

@@ -1,7 +1,8 @@
 import { basename, dirname } from 'node:path';
 import config from 'virtual:starlight/user-config';
-import { slugToPathname } from './slugs';
+import { withBase } from './base';
 import { Route, getLocaleRoutes, routes } from './routing';
+import { slugToPathname } from './slugs';
 import type {
   AutoSidebarGroup,
   SidebarItem,
@@ -100,12 +101,7 @@ function linkFromConfig(
 
 /** Create a link entry. */
 function makeLink(href: string, label: string, currentPathname: string): Link {
-  if (!isAbsolute(href)) {
-    href = ensureLeadingAndTrailingSlashes(href);
-    /** Base URL with trailing `/` stripped. */
-    const base = import.meta.env.BASE_URL.replace(/\/$/, '');
-    if (base) href = base + href;
-  }
+  if (!isAbsolute(href)) href = withBase(href);
   const isCurrent = href === currentPathname;
   return { type: 'link', label, href, isCurrent };
 }