@astrojs/starlight 0.5.6 → 0.6.0

package/components/Header.astro

@@ -6,67 +6,63 @@ import SocialIcons from './SocialIcons.astro';
 import ThemeSelect from './ThemeSelect.astro';
 
 interface Props {
-  locale: string | undefined;
+	locale: string | undefined;
 }
 
 const { locale } = Astro.props;
 ---
 
 <div class="header flex">
-  <SiteTitle {locale} />
-  <Search {locale} />
-  <div class="hidden md:flex right-group">
-    <SocialIcons />
-    <ThemeSelect {locale} />
-    <LanguageSelect {locale} />
-  </div>
+	<SiteTitle {locale} />
+	<Search {locale} />
+	<div class="hidden md:flex right-group">
+		<SocialIcons />
+		<ThemeSelect {locale} />
+		<LanguageSelect {locale} />
+	</div>
 </div>
 
 <style>
-  .header {
-    gap: var(--sl-nav-gap);
-    justify-content: space-between;
-    align-items: center;
-    height: 100%;
-  }
+	.header {
+		gap: var(--sl-nav-gap);
+		justify-content: space-between;
+		align-items: center;
+		height: 100%;
+	}
 
-  .right-group {
-    gap: 1rem;
-    align-items: center;
-  }
+	.right-group {
+		gap: 1rem;
+		align-items: center;
+	}
 
-  @media (min-width: 50rem) {
-    :global(:root[data-has-sidebar]) {
-      --__sidebar-pad: calc(2 * var(--sl-nav-pad-x));
-    }
-    :global(:root:not([data-has-toc])) {
-      --__toc-width: 0rem;
-    }
-    .header {
-      --__sidebar-width: max(
-        0rem,
-        var(--sl-content-inline-start, 0rem) - var(--sl-nav-pad-x)
-      );
-      --__main-column-fr: calc(
-        (
-            100% + var(--__sidebar-pad, 0rem) -
-              var(--__toc-width, var(--sl-sidebar-width)) -
-              (2 * var(--__toc-width, var(--sl-nav-pad-x))) -
-              var(--sl-content-inline-start, 0rem) - var(--sl-content-width)
-          ) / 2
-      );
-      display: grid;
-      grid-template-columns:
+	@media (min-width: 50rem) {
+		:global(:root[data-has-sidebar]) {
+			--__sidebar-pad: calc(2 * var(--sl-nav-pad-x));
+		}
+		:global(:root:not([data-has-toc])) {
+			--__toc-width: 0rem;
+		}
+		.header {
+			--__sidebar-width: max(0rem, var(--sl-content-inline-start, 0rem) - var(--sl-nav-pad-x));
+			--__main-column-fr: calc(
+				(
+						100% + var(--__sidebar-pad, 0rem) - var(--__toc-width, var(--sl-sidebar-width)) -
+							(2 * var(--__toc-width, var(--sl-nav-pad-x))) - var(--sl-content-inline-start, 0rem) -
+							var(--sl-content-width)
+					) / 2
+			);
+			display: grid;
+			grid-template-columns:
         /* 1 (site title): runs up until the main content column’s left edge or the width of the title, whichever is the largest  */
-        minmax(calc(
-            var(--__sidebar-width) +
-              max(0rem, var(--__main-column-fr) - var(--sl-nav-gap))
-          ), auto)
-        /* 2 (search box): all free space that is available. */
-        1fr
-        /* 3 (right items): use the space that these need. */
-        auto;
-      align-content: center;
-    }
-  }
+				minmax(
+					calc(var(--__sidebar-width) + max(0rem, var(--__main-column-fr) - var(--sl-nav-gap))),
+					auto
+				)
+				/* 2 (search box): all free space that is available. */
+				1fr
+				/* 3 (right items): use the space that these need. */
+				auto;
+			align-content: center;
+		}
+	}
 </style>

package/components/Hero.astro

@@ -4,136 +4,123 @@ import { Image } from 'astro:assets';
 import CallToAction from './CallToAction.astro';
 
 interface Props {
-  fallbackTitle: string;
-  hero: NonNullable<CollectionEntry<'docs'>['data']['hero']>;
+	fallbackTitle: string;
+	hero: NonNullable<CollectionEntry<'docs'>['data']['hero']>;
 }
 
-const {
-  title = Astro.props.fallbackTitle,
-  tagline,
-  image,
-  actions,
-} = Astro.props.hero;
+const { title = Astro.props.fallbackTitle, tagline, image, actions } = Astro.props.hero;
 
 const imageAttrs = {
-  loading: 'eager' as const,
-  decoding: 'async' as const,
-  width: 400,
-  height: 400,
-  alt: image?.alt,
+	loading: 'eager' as const,
+	decoding: 'async' as const,
+	width: 400,
+	height: 400,
+	alt: image?.alt,
 };
 ---
 
 <div class="hero">
-  {
-    image?.file ? (
-      image.file.format === 'svg' ? (
-        <img src={image.file.src} {...imageAttrs} />
-      ) : (
-        <Image src={image.file} {...imageAttrs} />
-      )
-    ) : (
-      image?.html && <div class="hero-html flex" set:html={image.html} />
-    )
-  }
-  <div class="flex stack">
-    <div class="flex copy">
-      <h1 id="_top" data-page-title set:html={title} />
-      {tagline && <div class="tagline" set:html={tagline} />}
-    </div>
-    {
-      actions.length > 0 && (
-        <div class="flex actions">
-          {actions.map(({ text, ...attrs }) => (
-            <CallToAction {...attrs} set:html={text} />
-          ))}
-        </div>
-      )
-    }
-  </div>
+	{
+		image?.file ? (
+			image.file.format === 'svg' ? (
+				<img src={image.file.src} {...imageAttrs} />
+			) : (
+				<Image src={image.file} {...imageAttrs} />
+			)
+		) : (
+			image?.html && <div class="hero-html flex" set:html={image.html} />
+		)
+	}
+	<div class="flex stack">
+		<div class="flex copy">
+			<h1 id="_top" data-page-title set:html={title} />
+			{tagline && <div class="tagline" set:html={tagline} />}
+		</div>
+		{
+			actions.length > 0 && (
+				<div class="flex actions">
+					{actions.map(({ text, ...attrs }) => (
+						<CallToAction {...attrs} set:html={text} />
+					))}
+				</div>
+			)
+		}
+	</div>
 </div>
 
 <style>
-  .hero {
-    display: grid;
-    align-items: center;
-    gap: 1rem;
-    padding-bottom: 1rem;
-  }
-
-  .hero > img,
-  .hero > .hero-html {
-    object-fit: contain;
-    width: min(70%, 20rem);
-    height: auto;
-    margin-inline: auto;
-  }
-
-  .stack {
-    flex-direction: column;
-    gap: clamp(1.5rem, calc(1.5rem + 1vw), 2rem);
-    text-align: center;
-  }
-
-  .copy {
-    flex-direction: column;
-    gap: 1rem;
-    align-items: center;
-  }
-
-  .copy > * {
-    max-width: 50ch;
-  }
-
-  h1 {
-    font-size: clamp(
-      var(--sl-text-3xl),
-      calc(0.25rem + 5vw),
-      var(--sl-text-6xl)
-    );
-    line-height: var(--sl-line-height-headings);
-    font-weight: 600;
-    color: var(--sl-color-white);
-  }
-
-  .tagline {
-    font-size: clamp(
-      var(--sl-text-base),
-      calc(0.0625rem + 2vw),
-      var(--sl-text-xl)
-    );
-    color: var(--sl-color-gray-2);
-  }
-
-  .actions {
-    gap: 1rem 2rem;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-
-  @media (min-width: 50rem) {
-    .hero {
-      grid-template-columns: 7fr 4fr;
-      gap: 3%;
-      padding-block: clamp(2.5rem, calc(1rem + 10vmin), 10rem);
-    }
-
-    .hero > img,
-    .hero > .hero-html {
-      order: 2;
-      width: min(100%, 25rem);
-    }
-
-    .stack {
-      text-align: start;
-    }
-
-    .copy {
-      align-items: flex-start;
-    }
-
-    .actions {
-      justify-content: flex-start;
-    }
-  }
+	.hero {
+		display: grid;
+		align-items: center;
+		gap: 1rem;
+		padding-bottom: 1rem;
+	}
+
+	.hero > img,
+	.hero > .hero-html {
+		object-fit: contain;
+		width: min(70%, 20rem);
+		height: auto;
+		margin-inline: auto;
+	}
+
+	.stack {
+		flex-direction: column;
+		gap: clamp(1.5rem, calc(1.5rem + 1vw), 2rem);
+		text-align: center;
+	}
+
+	.copy {
+		flex-direction: column;
+		gap: 1rem;
+		align-items: center;
+	}
+
+	.copy > * {
+		max-width: 50ch;
+	}
+
+	h1 {
+		font-size: clamp(var(--sl-text-3xl), calc(0.25rem + 5vw), var(--sl-text-6xl));
+		line-height: var(--sl-line-height-headings);
+		font-weight: 600;
+		color: var(--sl-color-white);
+	}
+
+	.tagline {
+		font-size: clamp(var(--sl-text-base), calc(0.0625rem + 2vw), var(--sl-text-xl));
+		color: var(--sl-color-gray-2);
+	}
+
+	.actions {
+		gap: 1rem 2rem;
+		flex-wrap: wrap;
+		justify-content: center;
+	}
+
+	@media (min-width: 50rem) {
+		.hero {
+			grid-template-columns: 7fr 4fr;
+			gap: 3%;
+			padding-block: clamp(2.5rem, calc(1rem + 10vmin), 10rem);
+		}
+
+		.hero > img,
+		.hero > .hero-html {
+			order: 2;
+			width: min(100%, 25rem);
+		}
+
+		.stack {
+			text-align: start;
+		}
+
+		.copy {
+			align-items: flex-start;
+		}
+
+		.actions {
+			justify-content: flex-start;
+		}
+	}
 </style>