feat(Testimonials): add testimonials to website (#1104)

Co-authored-by: Genteure <Genteure@users.noreply.github.com>
Co-authored-by: Reuben Tier <TheOtterlord@users.noreply.github.com>
Co-authored-by: Atharva Pise <atharvapise19@gmail.com>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com>
Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
Co-authored-by: Kevin Zuniga Cuellar <46791833+kevinzunigacuellar@users.noreply.github.com>
Co-authored-by: Vitor Ayres <61759797+vasfvitor@users.noreply.github.com>
Co-authored-by: Mark Peck <2244813+doodlemarks@users.noreply.github.com>

docs/src/components/testimonial-grid.astro

@@ -0,0 +1,39 @@
+---
+interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<div class="testimonial-wrapper not-content">
+	<h2 class="testimonial-grid-title">{title}</h2>
+	<ul class="testimonial-grid">
+		<slot />
+	</ul>
+</div>
+
+<style>
+	.testimonial-wrapper {
+		margin-block: 7rem 2.5rem !important;
+		font-size: clamp(var(--sl-text-sm), calc(0.5rem + 1vw), var(--sl-text-body));
+	}
+	.testimonial-grid-title {
+		text-align: center;
+		font-size: var(--sl-text-h3);
+		font-weight: 600;
+		color: var(--sl-color-white);
+		line-height: var(--sl-line-height-headings);
+	}
+	.testimonial-grid {
+		margin-top: 2.5rem;
+		display: grid;
+		gap: 5em;
+		padding-inline-start: 0;
+	}
+	@media (min-width: 50rem) {
+		.testimonial-grid {
+			grid-template-columns: 1fr 1fr;
+		}
+	}
+</style>

docs/src/components/testimonial.astro

@@ -0,0 +1,90 @@
+---
+import type { ImageMetadata } from 'astro';
+import { Image } from 'astro:assets';
+
+interface Props {
+	handle: string;
+	name: string;
+	cite: string;
+}
+
+const { name, handle, cite } = Astro.props;
+
+const avatars = import.meta.glob<{ default: ImageMetadata }>('../assets/testimonials/*.jpg');
+const avatar = avatars[`../assets/testimonials/${handle}.jpg`];
+if (!avatar) {
+	throw new Error(`Could not resolve testimonial avatar for @${handle}`);
+}
+const src = (await avatar()).default;
+---
+
+<li class="testimonial">
+	<blockquote class="quote" cite={cite}>
+		<slot />
+	</blockquote>
+	<div class="footer">
+		<Image class="avatar" height="96" width="96" {src} alt="" />
+		<div>
+			<p class="name">{name}</p>
+			<a href={cite} class="handle">@{handle}</a>
+		</div>
+	</div>
+</li>
+
+<style>
+	.testimonial {
+		display: flex;
+		flex-direction: column;
+		gap: 1.5em;
+	}
+	@media (min-width: 50rem) {
+		.testimonial {
+			gap: 2em;
+		}
+	}
+	.quote {
+		position: relative;
+		padding-inline-start: 1.5em;
+	}
+	.quote::before {
+		position: absolute;
+		content: '';
+		inset-block: 0.5em;
+		inset-inline-start: 0;
+		border-inline-start: 1px solid var(--sl-color-text-accent);
+	}
+	.quote > :global(* + *) {
+		margin-top: 0.75em;
+	}
+
+	.footer {
+		display: flex;
+		gap: 1rem;
+		align-items: center;
+	}
+	.avatar {
+		--outline-color: rgba(255, 255, 255, 0.33);
+		outline: 1px solid var(--outline-color);
+		outline-offset: -1px;
+		border-radius: 99rem;
+		width: 4em;
+		height: 4em;
+	}
+	:global([data-theme='light']) .avatar {
+		--outline-color: rgba(23, 25, 30, 0.33);
+	}
+
+	.name {
+		font-weight: 600;
+		font-size: var(--sl-text-h4);
+		color: var(--sl-color-white);
+		line-height: var(--sl-line-height-headings);
+	}
+	.handle {
+		text-underline-offset: 4px;
+		color: var(--sl-color-text-accent);
+	}
+	.handle:hover {
+		color: var(--sl-color-white);
+	}
+</style>

docs/src/content/docs/index.mdx

@@ -24,6 +24,8 @@ hero:
 
 import { CardGrid, Card } from '@astrojs/starlight/components';
 import AboutAstro from '~/components/about-astro.astro';
+import TestimonialGrid from '~/components/testimonial-grid.astro';
+import Testimonial from '~/components/testimonial.astro';
 
 <CardGrid stagger>
 	<Card title="Documentation that delights" icon="open-book">
@@ -44,6 +46,113 @@ import AboutAstro from '~/components/about-astro.astro';
 	</Card>
 </CardGrid>
 
+<TestimonialGrid title="What people are saying">
+  <Testimonial
+    name="Rachel"
+    handle="rachelnabors"
+    cite="https://twitter.com/astrodotbuild/status/1724934718745915558"
+  >
+    The Astro team have EVOLVED how docs can be done and you can get it all out of the box with their Starlight project.
+  </Testimonial>
+  <Testimonial
+    name="Flavio"
+    handle="flaviocopes"
+    cite="https://twitter.com/flaviocopes/status/1738237658717905108"
+  >
+    Astro’s official starter kit Starlight is a truly incredible tool for building a documentation website
+  </Testimonial>
+  <Testimonial
+    name="Tomek"
+    handle="sulco"
+    cite="https://twitter.com/sulco/status/1735610348730802342"
+  >
+    Starlight is our go-to example of a great DX: the speed, convenience, and
+    attention to details is inspiring. It takes care of the tech and the looks,
+    so you can focus on your content 👏
+
+    StackBlitz team absolutely loves it!
+  </Testimonial>
+  <Testimonial
+    name="Roberto"
+    handle="RmeetsH"
+    cite="https://twitter.com/RmeetsH/status/1735783992018760090"
+  >
+    Starlight has been a game-changer for me, allowing me to focus on content creation.
+
+    Its intuitive design not only streamlines my workflow but also reduces onboarding time for open-source developers.
+
+  </Testimonial>
+  <Testimonial
+    name="Joel"
+    handle="jhooks"
+    cite="https://twitter.com/jhooks/status/1727405160547418405"
+  >
+    Spent some more time with Starlight for the Course Builder docs and it’s been great so far. Lots of nice touches and can focus on writing in Markdown and not fiddling with the site.
+  </Testimonial>
+  <Testimonial
+    name="Rick"
+    handle="rick_viscomi"
+    cite="https://twitter.com/rick_viscomi/status/1665867447910510593"
+  >
+    Started playing with Starlight. Gotta say I’m very impressed with the performance out of the box.
+
+    💯💯💯💯
+
+  </Testimonial>
+  <Testimonial
+    name="Nicolas"
+    handle="beaussan"
+    cite="https://twitter.com/beaussan/status/1735625189583466893"
+  >
+    Starlight is the best way to get started with documentation, between the
+    power and speed of Astro, and the tooling from Starlight, it’s a match in
+    heaven.
+
+    It has been my go to for a while now, and I keep on loving it!
+
+  </Testimonial>
+  <Testimonial
+    name="Sylwia"
+    handle="SylwiaVargas"
+    cite="https://x.com/SylwiaVargas/status/1726556825741578286"
+  >
+    I used Starlight in my last job and loved it. Great components, intuitive
+    design, and super-responsive community (whenever anyone needed something,
+    they’d ship it soonish or tell you a workaround). Very pleasant experience.
+  </Testimonial>
+  <Testimonial
+    name="Lou Cyx"
+    handle="loucyx"
+    cite="https://elk.zone/m.webtoo.ls/@loucyx@mastodon.social/111587380021362284"
+  >
+    The docs on my monorepo site look better than ever thanks to Starlight. It’s extremely easy to use without losing all the power of Astro. Thank you for working on it!
+  </Testimonial>
+  <Testimonial
+    name="BowTiedWebReaper"
+    handle="BowTiedWebReapr"
+    cite="https://twitter.com/BowTiedWebReapr/status/1735633399501697517"
+  >
+    Starlight is my go-to tool for documentation. It made it super easy to add docs to my existing Astro product website, vs needing a subdomain to use with another tool.
+  </Testimonial>
+  <Testimonial
+    name="Jeff"
+    handle="J_Everhart383"
+    cite="https://twitter.com/J_Everhart383/status/1691900590048292908"
+  >
+    I’ve been rebuilding the WPEngine Atlas Platform docs. Trust me when I say Starlight has everything you need to make an A+ docs platform&nbsp;🙌
+  </Testimonial>
+  <Testimonial
+    name="Chloe"
+    handle="solelychloe"
+    cite="https://twitter.com/solelychloe/status/1695115277602628082"
+  >
+    Give Starlight a try!
+
+    I use it for a few of my sites and it’s great.
+
+  </Testimonial>
+</TestimonialGrid>
+
 <AboutAstro title="Brought to you by">
 Astro is the all-in-one web framework designed for speed.
 Pull your content from anywhere and deploy everywhere, all powered by your favorite UI components and libraries.