From 55fec5d7e15da0e7365cee196d091bf5d15129c9 Mon Sep 17 00:00:00 2001 From: Chris Swithinbank Date: Sat, 3 Jun 2023 03:06:54 +0200 Subject: Implement landing page cards (#105) --- .changeset/rich-lizards-switch.md | 5 ++ docs/package.json | 4 +- docs/src/assets/landing.css | 4 +- docs/src/components/about-astro.astro | 48 ++++++++++++++++ docs/src/content/docs/de/index.mdx | 42 ++++++++------ docs/src/content/docs/guides/components.mdx | 49 ++++++++++++++++ docs/src/content/docs/index.mdx | 43 ++++++++------ packages/starlight/components.ts | 2 + packages/starlight/components/CallToAction.astro | 2 +- packages/starlight/components/Hero.astro | 1 + packages/starlight/components/Icons.ts | 6 ++ packages/starlight/index.ts | 2 +- packages/starlight/style/props.css | 26 +-------- packages/starlight/user-components/Card.astro | 69 +++++++++++++++++++++++ packages/starlight/user-components/CardGrid.astro | 35 ++++++++++++ 15 files changed, 275 insertions(+), 63 deletions(-) create mode 100644 .changeset/rich-lizards-switch.md create mode 100644 docs/src/components/about-astro.astro create mode 100644 packages/starlight/user-components/Card.astro create mode 100644 packages/starlight/user-components/CardGrid.astro diff --git a/.changeset/rich-lizards-switch.md b/.changeset/rich-lizards-switch.md new file mode 100644 index 00000000..8d507afc --- /dev/null +++ b/.changeset/rich-lizards-switch.md @@ -0,0 +1,5 @@ +--- +"@astrojs/starlight": patch +--- + +Add `` and `` components for landing pages and other uses diff --git a/docs/package.json b/docs/package.json index a5b8663c..1dda8d92 100644 --- 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 index 0c118063..e4242e41 100644 --- 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 new file mode 100644 index 00000000..fb1815a1 --- /dev/null +++ b/docs/src/components/about-astro.astro @@ -0,0 +1,48 @@ +--- +interface Props { + title: string; +} + +const { title } = Astro.props; +--- + +
+ + {title} + Astro + + + +
+ + diff --git a/docs/src/content/docs/de/index.mdx b/docs/src/content/docs/de/index.mdx index 9c1fea1e..9a4e05f6 100644 --- 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? + + + Site-Navigation, Suche, Internationalisierung, SEO, leicht lesbare + Typografie, Code-Hervorhebung, Dunkelmodus und mehr. + + + Nutze die volle Kraft und Leistung von Astro. Erweitere Starlight mit deinen + bevorzugten Astro-Integrationen. + + + Bringe deine bevorzugte Dokumentenformat mit. Starlight behält alles im Auge + mit integrierte Frontmatter-Validierung. + + + Starlight wird als Framework-unabhängige, vollständige Dokumentationslösung + geliefert. Erweitere mit React, Vue, Svelte, Solid und mehr. + + -Starlight enthält alle notwendige Funktionen, um eine Dokumentationsseite schnell zum Laufen zu bringen: + +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/) + + diff --git a/docs/src/content/docs/guides/components.mdx b/docs/src/content/docs/guides/components.mdx index fd13d091..c991664f 100644 --- 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: Sirius, Vega, Betelgeuse Io, Europa, Ganymede + +### Cards + +import { Card, CardGrid } from '@astrojs/starlight/components'; + +You can display content in a box matching Starlight’s styles using the `` component. +Wrap multiple cards in the `` component to display cards side-by-side when there’s enough space. + +A `` 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'; + +Interesting content you want to highlight. + + + + Sirius, Vega, Betelgeuse + + + Io, Europa, Ganymede + + +``` + +The code above generates the following on the page: + +Interesting content you want to highlight. + + + + Sirius, Vega, Betelgeuse + + + Io, Europa, Ganymede + + + +:::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 + + + +``` + +::: diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx index 6fd00133..62aac68f 100644 --- 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? + + + Includes: Site navigation, search, i18n, SEO, easy-to-read typography, code + highlighting, dark mode and more. + + + Leverage the full power and performance of Astro. Extend Starlight with your + favorite Astro integrations and libraries. + + + Bring your favorite markup language. Starlight gives you built-in + frontmatter validation with TypeScript type-safety. + + + Starlight ships as a framework-agnostic, complete docs solution. Extend with + React, Vue, Svelte, Solid, and more. + + -Starlight includes all the features you need to get a documentation site up and running quickly: + +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/) + + diff --git a/packages/starlight/components.ts b/packages/starlight/components.ts index 1e25b6cc..610e5086 100644 --- 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 index 977516ca..a297e989 100644 --- 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 index 36335b42..942eabd8 100644 --- 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, diff --git a/packages/starlight/components/Icons.ts b/packages/starlight/components/Icons.ts index 3c5a0e22..d5ea2315 100644 --- a/packages/starlight/components/Icons.ts +++ b/packages/starlight/components/Icons.ts @@ -14,6 +14,9 @@ export const Icons = { '', pencil: '', + pen: '', + document: + '', external: '', moon: '', @@ -40,6 +43,9 @@ export const Icons = { '', rocket: '', + star: '', + puzzle: + '', 'list-format': '', github: diff --git a/packages/starlight/index.ts b/packages/starlight/index.ts index c110f9cd..9e73bc1c 100644 --- a/packages/starlight/index.ts +++ b/packages/starlight/index.ts @@ -55,7 +55,7 @@ export default function StarlightIntegration( ? {} : { theme: 'css-variables' }, }, - experimental: { assets: true }, + experimental: { assets: true, inlineStylesheets: 'auto' }, }; updateConfig(newConfig); }, diff --git a/packages/starlight/style/props.css b/packages/starlight/style/props.css index aa0b45c6..07553de2 100644 --- a/packages/starlight/style/props.css +++ b/packages/starlight/style/props.css @@ -17,7 +17,7 @@ --sl-hue-green: 101; --sl-color-green-low: hsl(var(--sl-hue-green), 39%, 22%); --sl-color-green: hsl(var(--sl-hue-green), 82%, 63%); - --sl-color-green-high: hsl(var(--sl-hue-green), 82%, 87%); + --sl-color-green-high: hsl(var(--sl-hue-green), 82%, 80%); --sl-hue-blue: 234; --sl-color-blue-low: hsl(var(--sl-hue-blue), 54%, 20%); --sl-color-blue: hsl(var(--sl-hue-blue), 100%, 60%); @@ -58,28 +58,6 @@ 0px 16px 6px hsla(0, 0%, 0%, 0.1), 0px 9px 5px hsla(223, 13%, 10%, 0.33), 0px 4px 4px hsla(0, 0%, 0%, 0.75), 0px 4px 2px hsla(0, 0%, 0%, 0.25); - /* Gradients (unchanged across dark & light modes) */ - --sl-gradient-blue-purple: linear-gradient( - to bottom, - hsl(234, 100%, 59.8%) 0%, - hsl(281, 82.1%, 62.7%) 100% - ); - --sl-gradient-red-pink: linear-gradient( - to bottom, - hsl(0, 67.9%, 52.4%) 0%, - hsl(295, 100%, 62.7%) 100% - ); - --sl-gradient-orange-yellow: linear-gradient( - to bottom, - hsl(54, 93.5%, 57.6%) 0%, - hsl(14, 100%, 66.5%) 100% - ); - --sl-gradient-blue-green: linear-gradient( - to bottom, - hsl(165, 86.6%, 62%) 0%, - hsl(227, 58.4%, 44.3%) 100% - ); - /* Text size and line height */ --sl-text-xs: 0.8125rem; /* 13px */ --sl-text-sm: 0.875rem; /* 14px */ @@ -151,7 +129,7 @@ --sl-color-orange: hsl(var(--sl-hue-orange), 90%, 60%); --sl-color-orange-low: hsl(var(--sl-hue-orange), 90%, 88%); --sl-color-green-high: hsl(var(--sl-hue-green), 80%, 22%); - --sl-color-green: hsl(var(--sl-hue-green), 90%, 60%); + --sl-color-green: hsl(var(--sl-hue-green), 90%, 46%); --sl-color-green-low: hsl(var(--sl-hue-green), 85%, 90%); --sl-color-blue-high: hsl(var(--sl-hue-blue), 80%, 30%); --sl-color-blue: hsl(var(--sl-hue-blue), 90%, 60%); diff --git a/packages/starlight/user-components/Card.astro b/packages/starlight/user-components/Card.astro new file mode 100644 index 00000000..98f611c2 --- /dev/null +++ b/packages/starlight/user-components/Card.astro @@ -0,0 +1,69 @@ +--- +import Icon from '../components/Icon.astro'; +import type { Icons } from '../components/Icons'; + +interface Props { + icon?: keyof typeof Icons; + title: string; +} + +const { icon, title } = Astro.props; +--- + +
+

+ {icon && } + +

+
+
+ + diff --git a/packages/starlight/user-components/CardGrid.astro b/packages/starlight/user-components/CardGrid.astro new file mode 100644 index 00000000..52a354c3 --- /dev/null +++ b/packages/starlight/user-components/CardGrid.astro @@ -0,0 +1,35 @@ +--- +interface Props { + stagger?: boolean; +} + +const { stagger = false } = Astro.props; +--- + +
+ + -- cgit