Implement landing page cards (#105)

withastro · Jun 3, 2023 · 55fec5d · 55fec5d
1 parent 446dade
commit 55fec5d
Show file tree

Hide file tree

Showing 15 changed files with 275 additions and 63 deletions.
diff --git a/.changeset/rich-lizards-switch.md b/.changeset/rich-lizards-switch.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/starlight": patch
+---
+
+Add `<Card>` and `<CardGrid>` components for landing pages and other uses
diff --git a/docs/package.json b/docs/package.json
@@ -27,7 +27,7 @@
     {
       "name": "/index.html",
       "path": "dist/index.html",
-      "limit": "13 kB"
+      "limit": "14 kB"
     },
     {
       "name": "/_astro/*.js",
@@ -37,7 +37,7 @@
     {
       "name": "/_astro/*.css",
       "path": "dist/_astro/*.css",
-      "limit": "11 kB"
+      "limit": "10 kB"
     }
   ]
 }
diff --git a/docs/src/assets/landing.css b/docs/src/assets/landing.css
@@ -10,7 +10,9 @@
 [data-has-hero] .page {
   background: linear-gradient(215deg, var(--overlay-blurple), transparent 40%),
     radial-gradient(var(--overlay-blurple), transparent 40%) no-repeat -60vw -40vh /
-      105vw 200vh;
+      105vw 200vh,
+    radial-gradient(var(--overlay-blurple), transparent 65%) no-repeat 50%
+      calc(100% + 20rem) / 60rem 30rem;
 }
 
 [data-has-hero] header {

diff --git a/docs/src/components/about-astro.astro b/docs/src/components/about-astro.astro
@@ -0,0 +1,48 @@
+---
+interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<article class="flex" aria-labelledby="about-astro-heading">
+  <small id="about-astro-heading">
+    {title}
+    <span class="sr-only">Astro</span>
+  </small>
+  <svg
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 301 79"
+    fill="var(--sl-color-white)"
+  >
+    <path
+      d="M20.8 66.8c-3.6-3.2-4.6-10-3.1-15 2.5 3.2 6.1 4.2 9.8 4.7 5.7.9 11.3.6 16.5-2l1.9-1.1a9 9 0 0 1 .4 4.3 12 12 0 0 1-5 8.5l-3.6 2.4c-3.6 2.4-4.6 5.3-3.2 9.4l.1.5c-1.8-.8-3.2-2-4.2-3.6-1-1.7-1.6-3.5-1.6-5.5 0-1 0-2-.2-3-.3-2.3-1.4-3.3-3.4-3.4a4 4 0 0 0-4.3 3.3l-.1.5ZM.5 51s10.5-5 21-5l8-24.6c.3-1.2 1.2-2 2.2-2 1 0 1.8.8 2.1 2l8 24.5c12.5 0 21 5.1 21 5.1L45 2.4C44.4.9 43.6 0 42.4 0H21c-1.2 0-2 1-2.6 2.4L.5 51Zm111-7c0 4.3-5.4 6.8-12.8 6.8-4.9 0-6.6-1.2-6.6-3.7 0-2.6 2.1-3.9 7-3.9 4.3 0 8 .1 12.4.6v.2Zm0-5.4a56 56 0 0 0-11.4-1c-14 0-20.5 3.4-20.5 11 0 8 4.5 11 14.9 11 8.8 0 14.7-2.2 17-7.6h.3l-.2 3.6c0 2.8.5 3 2.8 3h10.9c-.6-1.6-1-6.3-1-10.4l.2-12c0-9.1-5.4-14.8-22.4-14.8a83 83 0 0 0-21.7 3C81 27 82 32 82.3 35.2c5.3-2.5 13-3.6 18.8-3.6 8.2 0 10.4 1.9 10.4 5.6v1.5Zm29.8 7.9c-1.5.2-3.5.2-5.5.2-2.2 0-4.2-.1-5.6-.3V48c0 7.5 4.9 11.8 22 11.8 16.3 0 21.6-4.3 21.6-11.8 0-7.2-3.5-10.8-19-11.5-11.9-.6-13-1.9-13-3.4 0-1.7 1.6-2.6 9.6-2.6 8.3 0 10.6 1.1 10.6 3.5v.6a120.9 120.9 0 0 1 11 0l.1-1.4c0-8.8-7.3-11.7-21.5-11.7-15.9 0-21.3 4-21.3 11.5 0 6.8 4.3 11 19.6 11.7 11.3.4 12.5 1.6 12.5 3.4 0 1.8-1.8 2.7-9.7 2.7-9 0-11.4-1.3-11.4-3.9v-.3ZM193.2 15c-4.3 4-12 8-16.3 9v8.5l4 .1-.1 12.8c0 8 4.2 14 17.2 14 5.5 0 9.1-.7 13.7-1.6-.5-3-1-7.4-1.2-10.8-2.7.9-6.1 1.3-10 1.3-5.2 0-7.3-1.4-7.3-5.5v-10l17.5.2c0-3 0-7.6.2-10.6-5.7.2-12.1.2-17.4.2l.1-7.6h-.4Zm35.3 15.8.1-8.4h-11.8a752.4 752.4 0 0 1 0 36.2h13.5c-.2-3.5-.3-9.6-.3-14.7 0-8.1 3.3-10.5 10.8-10.5 3.5 0 6 .5 8.2 1.2 0-3 .6-9 1-11.6-2.3-.6-4.7-1-7.7-1-6.5-.1-11.2 2.5-13.4 8.8h-.4Zm59 9.5c0 6.5-4.7 9.6-12.1 9.6-7.4 0-12.1-2.9-12.1-9.6 0-6.7 4.8-9.2 12-9.2 7.4 0 12.2 2.7 12.2 9.2Zm12.3-.3c0-13-10.1-18.8-24.4-18.8-14.4 0-24.2 5.8-24.2 18.8s9.1 20 24.1 20c15.1 0 24.5-7 24.5-19.9Z"
+    >
+    </path>
+  </svg>
+  <slot />
+</article>
+
+<style>
+  article {
+    max-width: 40rem;
+    margin-inline: auto;
+    padding-block: 5rem;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 0.5rem;
+  }
+  article > :global(*) {
+    margin-top: 0 !important;
+    max-width: 50ch;
+  }
+  small {
+    color: var(--sl-color-gray-3);
+  }
+  svg {
+    width: 15rem;
+  }
+</style>
diff --git a/docs/src/content/docs/de/index.mdx b/docs/src/content/docs/de/index.mdx
@@ -17,23 +17,31 @@ hero:
       link: https://github.com/withastro/starlight
 ---
 
-:::caution[Laufende Arbeiten]
-Starlight befindet sich in einem frühen Entwicklungsstadium, also rechne mit Fehlern und Änderungen, während wir es weiterentwickeln.
-Wenn du etwas findest, das nicht funktioniert, [öffne bitte ein Issue auf GitHub](https://github.com/withastro/starlight/issues/new/choose) oder gib uns auf [Discord](https://astro.build/chat) Bescheid.
-:::
+import { CardGrid, Card } from '@astrojs/starlight/components';
+import AboutAstro from '../../../components/about-astro.astro';
 
-## Was ist im Lieferumfang enthalten?
+<CardGrid stagger>
+  <Card title="Dokumentation, die begeistert" icon="open-book">
+    Site-Navigation, Suche, Internationalisierung, SEO, leicht lesbare
+    Typografie, Code-Hervorhebung, Dunkelmodus und mehr.
+  </Card>
+  <Card title="Angetrieben durch Astro" icon="rocket">
+    Nutze die volle Kraft und Leistung von Astro. Erweitere Starlight mit deinen
+    bevorzugten Astro-Integrationen.
+  </Card>
+  <Card title="Markdown, Markdoc und MDX" icon="document">
+    Bringe deine bevorzugte Dokumentenformat mit. Starlight behält alles im Auge
+    mit integrierte Frontmatter-Validierung.
+  </Card>
+  <Card title="Bringe deine eigenen Komponenten mit" icon="puzzle">
+    Starlight wird als Framework-unabhängige, vollständige Dokumentationslösung
+    geliefert. Erweitere mit React, Vue, Svelte, Solid und mehr.
+  </Card>
+</CardGrid>
 
-Starlight enthält alle notwendige Funktionen, um eine Dokumentationsseite schnell zum Laufen zu bringen:
+<AboutAstro title="Präsentiert von">
+Astro ist ein Web-Framework, das eine Komplettlösung zur Erstellung schneller Websites darstellt. Rufe deine Inhalte von überall ab und stelle sie überall bereit, alles unterstützt durch deine bevorzugten UI-Komponenten und Bibliotheken.
 
-- Unterstützung von Markdown und MDX
-- Leicht zu lesende typografische Stile
-- Syntaxhervorhebung für Code-Beispiele
-- Einfach zu konfigurierende Navigationsmenüs
-- Eingebaute Suchfunktion
-- [Internationalisierungsfunktionen](/de/guides/i18n)
-- Barrierfreie Seitenaufbau
-- Unterstützung von [Komponenten im Inhalt](/de/guides/components) mit MDX
-- Unterstützung für benutzerdefinierte Stile
-- Schnelle und [umweltfreundliche](/de/environmental-impact) Architektur
-- Kompatibilität mit dem [Astro-Ökosystem](https://astro.build/integrations)
+[Erfahre mehr über Astro](https://astro.build/)
+
+</AboutAstro>
diff --git a/docs/src/content/docs/guides/components.mdx b/docs/src/content/docs/guides/components.mdx
@@ -58,3 +58,52 @@ The code above generates the following tabs on the page:
   <TabItem label="Stars">Sirius, Vega, Betelgeuse</TabItem>
   <TabItem label="Moons">Io, Europa, Ganymede</TabItem>
 </Tabs>
+
+### Cards
+
+import { Card, CardGrid } from '@astrojs/starlight/components';
+
+You can display content in a box matching Starlight’s styles using the `<Card>` component.
+Wrap multiple cards in the `<CardGrid>` component to display cards side-by-side when there’s enough space.
+
+A `<Card>` should have a `title` and can optionally include an `icon` attribute set to the name of [one of Starlight’s built-in icons](https://github.com/withastro/starlight/blob/main/packages/starlight/components/Icons.ts).
+
+```mdx
+import { Card, CardGrid } from '@astrojs/starlight/components';
+
+<Card title="Check this out">Interesting content you want to highlight.</Card>
+
+<CardGrid>
+  <Card title="Stars" icon="star">
+    Sirius, Vega, Betelgeuse
+  </Card>
+  <Card title="Moons" icon="moon">
+    Io, Europa, Ganymede
+  </Card>
+</CardGrid>
+```
+
+The code above generates the following on the page:
+
+<Card title="Check this out">Interesting content you want to highlight.</Card>
+
+<CardGrid>
+  <Card title="Stars" icon="star">
+    Sirius, Vega, Betelgeuse
+  </Card>
+  <Card title="Moons" icon="moon">
+    Io, Europa, Ganymede
+  </Card>
+</CardGrid>
+
+:::tip
+Use a card grid on your home page to display your project’s key features.
+Add the `stagger` attribute to shift the second column of cards vertically and add visual interest:
+
+```astro
+<CardGrid stagger>
+  <!-- cards -->
+</CardGrid>
+```
+
+:::
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
@@ -17,23 +17,32 @@ hero:
       link: https://github.com/withastro/starlight
 ---
 
-:::caution[Work in progress]
-Starlight is in early development so expect bugs and changes as we develop it.
-If you find something that’s not working, [open an issue on GitHub](https://github.com/withastro/starlight/issues/new/choose) or let us know on [Discord](https://astro.build/chat).
-:::
+import { CardGrid, Card } from '@astrojs/starlight/components';
+import AboutAstro from '../../components/about-astro.astro';
 
-## What’s in the box?
+<CardGrid stagger>
+  <Card title="Documentation that delights" icon="open-book">
+    Includes: Site navigation, search, i18n, SEO, easy-to-read typography, code
+    highlighting, dark mode and more.
+  </Card>
+  <Card title="Powered by Astro" icon="rocket">
+    Leverage the full power and performance of Astro. Extend Starlight with your
+    favorite Astro integrations and libraries.
+  </Card>
+  <Card title="Markdown, Markdoc, and MDX" icon="document">
+    Bring your favorite markup language. Starlight gives you built-in
+    frontmatter validation with TypeScript type-safety.
+  </Card>
+  <Card title="Bring your own UI components" icon="puzzle">
+    Starlight ships as a framework-agnostic, complete docs solution. Extend with
+    React, Vue, Svelte, Solid, and more.
+  </Card>
+</CardGrid>
 
-Starlight includes all the features you need to get a documentation site up and running quickly:
+<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.
 
-- Markdown and MDX support
-- Easy-to-read typographic styles
-- Syntax highlighting for code blocks
-- Simple-to-configure navigation menus
-- Built-in site search
-- [Internationalization features](/guides/i18n)
-- Accessible site structure
-- [Component in content](/guides/components) support with MDX
-- Support for custom styles
-- Fast and [eco-friendly](/environmental-impact) architecture
-- Compatibility with the [Astro ecosystem](https://astro.build/integrations)
+[Learn about Astro](https://astro.build/)
+
+</AboutAstro>
diff --git a/packages/starlight/components.ts b/packages/starlight/components.ts
@@ -1,2 +1,4 @@
+export { default as Card } from './user-components/Card.astro';
+export { default as CardGrid } from './user-components/CardGrid.astro';
 export { default as Tabs } from './user-components/Tabs.astro';
 export { default as TabItem } from './user-components/TabItem.astro';
diff --git a/packages/starlight/components/CallToAction.astro b/packages/starlight/components/CallToAction.astro
@@ -25,7 +25,7 @@ const { link, variant, icon } = Astro.props;
     gap: 0.5em;
     align-items: center;
     border-radius: 999rem;
-    padding: 0.75rem 1.125rem;
+    padding: 0.5rem 1.125rem;
     color: var(--sl-color-white);
     line-height: 1.1875;
     text-decoration: none;

diff --git a/packages/starlight/components/Hero.astro b/packages/starlight/components/Hero.astro
@@ -52,6 +52,7 @@ const {
     display: grid;
     align-items: center;
     gap: 1rem;
+    padding-bottom: 1rem;
   }
 
   .hero > img,