@astrojs/starlight 0.7.0 → 0.7.2

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @astrojs/starlight
 
+## 0.7.2
+
+### Patch Changes
+
+- [#506](https://github.com/withastro/starlight/pull/506) [`5e3133c`](https://github.com/withastro/starlight/commit/5e3133c42232b201b981cf4b3bc1c3dd56b09fa5) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Improve table of content current item highlight behavior
+
+- [#499](https://github.com/withastro/starlight/pull/499) [`fcff49e`](https://github.com/withastro/starlight/commit/fcff49ee4260ad68e80833712e161cbb978a2562) Thanks [@D3vil0p3r](https://github.com/D3vil0p3r)! - Add icons for Instagram
+
+- [#502](https://github.com/withastro/starlight/pull/502) [`3c87a16`](https://github.com/withastro/starlight/commit/3c87a16de3c867ad89294a0ea84d63eca2e74d7a) Thanks [@Mrahmani71](https://github.com/Mrahmani71)! - Add Farsi UI translations
+
+- [#496](https://github.com/withastro/starlight/pull/496) [`cd28392`](https://github.com/withastro/starlight/commit/cd28392ac73ac0ba1a441328fcd1d65d7d441366) Thanks [@lorenzolewis](https://github.com/lorenzolewis)! - Fix `lastUpdated` date position to be consistent
+
+- [#402](https://github.com/withastro/starlight/pull/402) [`d8669b8`](https://github.com/withastro/starlight/commit/d8669b869761ac15d1d611eda7dd94a62ce0fd7a) Thanks [@chopfitzroy](https://github.com/chopfitzroy)! - Fix content sometimes appearing above the mobile table of contents.
+
+## 0.7.1
+
+### Patch Changes
+
+- [#488](https://github.com/withastro/starlight/pull/488) [`da35556`](https://github.com/withastro/starlight/commit/da35556eb95f2d397dfce03cc4acfacb0dcf1e89) Thanks [@mayank99](https://github.com/mayank99)! - Improved accessibility of LinkCard by only including the title as part of the link text, and using a pseudo-element to keep the card clickable.
+
+- [#489](https://github.com/withastro/starlight/pull/489) [`35cd82e`](https://github.com/withastro/starlight/commit/35cd82e7f8622772a5155add99ad8baf61ae08a1) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Respect `hidden` sidebar frontmatter property when no sidebar configuration is provided
+
 ## 0.7.0
 
 ### Minor Changes

package/components/Footer.astro

@@ -48,4 +48,7 @@ const prevNextLinks = getPrevNextLinks(sidebar, config.pagination, {
 		font-size: var(--sl-text-sm);
 		color: var(--sl-color-gray-3);
 	}
+	.meta > :global(p:only-child) {
+		margin-inline-start: auto;
+	}
 </style>

package/components/Icons.ts

@@ -82,4 +82,6 @@ export const Icons = {
 		'<path d="M2.5 1 1 4.8v15.4h5.5V23h3.1l3-2.8H17l6-5.7V1H2.6ZM21 13.5l-3.4 3.3H12l-3 2.8v-2.8H4.5V3H21v10.5Zm-3.4-6.8v5.8h-2V6.7h2Zm-5.5 0v5.8h-2V6.7h2Z"/>',
 	microsoftTeams:
 		'<path d="M13.78 7.2a3.63 3.63 0 1 0-4.3-3.68h1.78a2.52 2.52 0 0 1 2.52 2.53V7.2zM7.34 18.8h3.92a2.52 2.52 0 0 0 2.52-2.52V8.37h4.17c.58.01 1.04.5 1.03 1.07v6.45a6.3 6.3 0 0 1-6.14 6.43 6.3 6.3 0 0 1-5.5-3.52zm16.1-14.06a2.51 2.51 0 1 1-5.02 0 2.51 2.51 0 0 1 5.02 0zm-3.36 14.24h-.17c.4-1 .59-2.05.57-3.11V9.46c0-.38-.07-.75-.23-1.09h2.69c.58 0 1.06.48 1.06 1.06v5.65a3.9 3.9 0 0 1-3.9 3.9h-.02z"/><path d="M1.02 5.02h10.24c.56 0 1.02.46 1.02 1.03v10.23a1.02 1.02 0 0 1-1.02 1.02H1.02A1.02 1.02 0 0 1 0 16.28V6.04c0-.56.46-1.02 1.02-1.02zm7.81 3.9V7.84H3.45v1.08h2.03v5.57h1.3V8.92h2.05z"/>',
+	instagram:
+		'<path d="M17.3 5.5a1.2 1.2 0 1 0 1.2 1.2 1.2 1.2 0 0 0-1.2-1.2ZM22 7.9a7.6 7.6 0 0 0-.4-2.5 5 5 0 0 0-1.2-1.7 4.7 4.7 0 0 0-1.8-1.2 7.3 7.3 0 0 0-2.4-.4L12 2H7.9a7.3 7.3 0 0 0-2.5.5 4.8 4.8 0 0 0-1.7 1.2 4.7 4.7 0 0 0-1.2 1.8 7.3 7.3 0 0 0-.4 2.4L2 12v4.1a7.3 7.3 0 0 0 .5 2.4 4.7 4.7 0 0 0 1.2 1.8 4.8 4.8 0 0 0 1.8 1.2 7.3 7.3 0 0 0 2.4.4l4.1.1h4.1a7.3 7.3 0 0 0 2.4-.5 4.7 4.7 0 0 0 1.8-1.2 4.8 4.8 0 0 0 1.2-1.7 7.6 7.6 0 0 0 .4-2.5L22 12V7.9ZM20.1 16a5.6 5.6 0 0 1-.3 1.9A3 3 0 0 1 19 19a3.2 3.2 0 0 1-1.1.8 5.6 5.6 0 0 1-1.9.3H8a5.7 5.7 0 0 1-1.9-.3A3.3 3.3 0 0 1 5 19a3 3 0 0 1-.7-1.1 5.5 5.5 0 0 1-.4-1.9l-.1-4V8a5.5 5.5 0 0 1 .4-1.9A3 3 0 0 1 5 5a3.1 3.1 0 0 1 1.1-.8A5.7 5.7 0 0 1 8 3.9l4-.1h4a5.6 5.6 0 0 1 1.9.4A3 3 0 0 1 19 5a3 3 0 0 1 .7 1.1A5.6 5.6 0 0 1 20 8l.1 4v4ZM12 6.9a5.1 5.1 0 1 0 5.1 5.1A5.1 5.1 0 0 0 12 6.9Zm0 8.4a3.3 3.3 0 1 1 3.3-3.3 3.3 3.3 0 0 1-3.3 3.3Z"/>',
 };

package/components/SocialIcons.astro

@@ -19,6 +19,7 @@ const labels: Record<Platform, string> = {
 	linkedin: 'LinkedIn',
 	twitch: 'Twitch',
 	microsoftTeams: 'Microsoft Teams',
+	instagram: 'Instagram',
 };
 
 const links = Object.entries(config.social || {}).filter(([, url]) => Boolean(url)) as [

package/components/TableOfContents/MobileTableOfContents.astro

@@ -35,6 +35,7 @@ const t = useTranslations(locale);
 <style>
 	nav {
 		position: fixed;
+		z-index: var(--sl-z-index-toc);
 		top: calc(var(--sl-nav-height) - 1px);
 		inset-inline: 0;
 		border-top: 1px solid var(--sl-color-gray-5);

package/components/TableOfContents/TableOfContentsList.astro

@@ -14,7 +14,7 @@ const { toc, isMobile = false, depth = 0 } = Astro.props;
 	{
 		toc.map((heading) => (
 			<li>
-				<a href={'#' + heading.slug} aria-current={heading.current && 'true'}>
+				<a href={'#' + heading.slug}>
 					<span>{heading.text}</span>
 				</a>
 				{heading.children.length > 0 && (

package/components/TableOfContents/generateToC.ts

@@ -2,7 +2,6 @@ import type { MarkdownHeading } from 'astro';
 
 export interface TocItem extends MarkdownHeading {
 	children: TocItem[];
-	current?: boolean;
 }
 
 function diveChildren(item: TocItem, depth: number): TocItem[] {
@@ -34,7 +33,7 @@ export function generateToC(
 
 	for (const heading of headings) {
 		if (toc.length === 0) {
-			toc.push({ ...heading, children: [], current: true });
+			toc.push({ ...heading, children: [] });
 		} else {
 			const lastItemInToc = toc.at(-1)!;
 			if (heading.depth < lastItemInToc.depth) {

package/layout/TwoColumnContent.astro

@@ -18,6 +18,10 @@ interface Props {
 </div>
 
 <style>
+	.main-pane {
+		isolation: isolate;
+	}
+
 	@media (min-width: 72rem) {
 		.right-sidebar-container {
 			order: 2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/starlight",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "Build beautiful, high-performance documentation websites with Astro",
   "keywords": [
     "docs",
@@ -33,7 +33,7 @@
   "devDependencies": {
     "@types/node": "^18.16.19",
     "@vitest/coverage-v8": "^0.33.0",
-    "astro": "^2.10.4",
+    "astro": "^2.10.5",
     "vitest": "^0.33.0"
   },
   "dependencies": {

package/style/props.css

@@ -104,6 +104,7 @@
 	--sl-outline-offset-inside: -0.1875rem;
 
 	/* Global z-index values */
+	--sl-z-index-toc: 4;
 	--sl-z-index-menu: 5;
 	--sl-z-index-navbar: 10;
 	--sl-z-index-skiplink: 20;

package/translations/fa.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": "صفحه یافت نشد. لطفاً URL را بررسی کنید یا از جستجو استفاده نمایید."
+}

package/translations/index.ts

@@ -5,6 +5,7 @@ import es from './es.json';
 import de from './de.json';
 import ja from './ja.json';
 import pt from './pt.json';
+import fa from './fa.json';
 import fr from './fr.json';
 import it from './it.json';
 import nl from './nl.json';
@@ -17,8 +18,7 @@ import zh from './zh.json';
 const { parse } = builtinI18nSchema();
 
 export default Object.fromEntries(
-	Object.entries({ cs, en, es, de, ja, pt, fr, it, nl, da, tr, ar, nb, zh }).map(([key, dict]) => [
-		key,
-		parse(dict),
-	])
+	Object.entries({ cs, en, es, de, ja, pt, fa, fr, it, nl, da, tr, ar, nb, zh }).map(
+		([key, dict]) => [key, parse(dict)]
+	)
 );

package/user-components/LinkCard.astro

@@ -11,25 +11,36 @@ const { title, description, ...attributes } = Astro.props;
 ---
 
 <div>
-	<a {...attributes}>
-		<span class="flex stack">
+	<span class="flex stack">
+		<a {...attributes}>
 			<span class="title" set:html={title} />
-			{description && <span class="description" set:html={description} />}
-		</span>
-		<Icon name="right-arrow" size="1.333em" class="icon rtl:flip" />
-	</a>
+		</a>
+		{description && <span class="description" set:html={description} />}
+	</span>
+	<Icon name="right-arrow" size="1.333em" class="icon rtl:flip" />
 </div>
 
 <style>
-	a {
+	div {
 		display: grid;
 		grid-template-columns: 1fr auto;
 		gap: 0.5rem;
 		border: 1px solid var(--sl-color-gray-5);
 		border-radius: 0.5rem;
 		padding: 1rem;
-		text-decoration: none;
 		box-shadow: var(--sl-shadow-sm);
+		position: relative;
+	}
+
+	a {
+		text-decoration: none;
+	}
+
+	/* a11y fix for https://github.com/withastro/starlight/issues/487 */
+	a::before {
+		content: '';
+		position: absolute;
+		inset: 0;
 	}
 
 	.stack {
@@ -54,12 +65,12 @@ const { title, description, ...attributes } = Astro.props;
 	}
 
 	/* Hover state */
-	a:hover {
+	div:hover {
 		background: var(--sl-color-gray-7, var(--sl-color-gray-6));
 		border-color: var(--sl-color-gray-2);
 	}
 
-	a:hover .icon {
+	div:hover .icon {
 		color: var(--sl-color-white);
 	}
 </style>

package/utils/navigation.ts

@@ -83,11 +83,9 @@ function groupFromAutogenerateConfig(
 	const dirDocs = routes.filter(
 		(doc) =>
 			// Match against `foo.md` or `foo/index.md`.
-			(stripExtension(doc.id) === localeDir ||
-				// Match against `foo/anything/else.md`.
-				doc.id.startsWith(localeDir + '/')) &&
-			// Remove any entries that should be hidden
-			!doc.entry.data.sidebar.hidden
+			stripExtension(doc.id) === localeDir ||
+			// Match against `foo/anything/else.md`.
+			doc.id.startsWith(localeDir + '/')
 	);
 	const tree = treeify(dirDocs, localeDir);
 	return {
@@ -145,20 +143,23 @@ function getBreadcrumbs(path: string, baseDir: string): string[] {
 /** Turn a flat array of routes into a tree structure. */
 function treeify(routes: Route[], baseDir: string): Dir {
 	const treeRoot: Dir = makeDir();
-	routes.forEach((doc) => {
-		const breadcrumbs = getBreadcrumbs(doc.id, baseDir);
+	routes
+		// Remove any entries that should be hidden
+		.filter((doc) => !doc.entry.data.sidebar.hidden)
+		.forEach((doc) => {
+			const breadcrumbs = getBreadcrumbs(doc.id, baseDir);
 
-		// Walk down the route’s path to generate the tree.
-		let currentDir = treeRoot;
-		breadcrumbs.forEach((dir) => {
-			// Create new folder if needed.
-			if (typeof currentDir[dir] === 'undefined') currentDir[dir] = makeDir();
-			// Go into the subdirectory.
-			currentDir = currentDir[dir] as Dir;
+			// Walk down the route’s path to generate the tree.
+			let currentDir = treeRoot;
+			breadcrumbs.forEach((dir) => {
+				// Create new folder if needed.
+				if (typeof currentDir[dir] === 'undefined') currentDir[dir] = makeDir();
+				// Go into the subdirectory.
+				currentDir = currentDir[dir] as Dir;
+			});
+			// We’ve walked through the path. Register the route in this directory.
+			currentDir[basename(doc.slug)] = doc;
 		});
-		// We’ve walked through the path. Register the route in this directory.
-		currentDir[basename(doc.slug)] = doc;
-	});
 	return treeRoot;
 }
 

package/utils/user-config.ts

@@ -147,6 +147,7 @@ const UserConfigSchema = z.object({
 				'linkedin',
 				'twitch',
 				'microsoftTeams',
+				'instagram',
 			]),
 			// Link to the respective social profile for this site
 			z.string().url()