From 7bf0f20cdc8403e79220c4b8c5d3e42fb0d1672b Mon Sep 17 00:00:00 2001 From: Chris Swithinbank Date: Tue, 29 Aug 2023 08:58:37 +0200 Subject: Add announcement banner feature (#564) Co-authored-by: Lorenzo Lewis --- docs/public/ph-houston.svg | 87 ++++++++++++++++++++++++++ docs/src/assets/landing.css | 60 ++++++++++++++++++ docs/src/content/docs/index.mdx | 9 +++ docs/src/content/docs/reference/frontmatter.md | 19 ++++++ packages/starlight/components/Banner.astro | 23 +++++++ packages/starlight/layout/Page.astro | 2 + packages/starlight/schema.ts | 8 +++ packages/starlight/style/props.css | 2 + 8 files changed, 210 insertions(+) create mode 100644 docs/public/ph-houston.svg create mode 100644 packages/starlight/components/Banner.astro diff --git a/docs/public/ph-houston.svg b/docs/public/ph-houston.svg new file mode 100644 index 00000000..1e673352 --- /dev/null +++ b/docs/public/ph-houston.svg @@ -0,0 +1,87 @@ + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/src/assets/landing.css b/docs/src/assets/landing.css index 88f6c635..ef753eca 100644 --- a/docs/src/assets/landing.css +++ b/docs/src/assets/landing.css @@ -25,3 +25,63 @@ [data-has-hero] .hero > img { filter: drop-shadow(0 0 3rem var(--overlay-blurple)); } + +/* Product Hunt launch banner — can be removed on 30 August 2023. */ +[data-has-hero] .sl-banner { + --sl-color-banner-bg: #d73f37; + --sl-color-banner-text: #fff; + border-block: 1px solid #fff8; + padding-block: 0; + overflow: hidden; +} + +[data-has-hero] .sl-banner a { + text-decoration: 1px underline; + text-underline-offset: 0.1em; +} + +.ph-banner { + display: flex; + align-items: center; + gap: 1rem; + font-size: clamp(1rem, calc(0.75rem + 1vw), 1.65rem); +} +.ph-houston { + padding-block: 0.25rem; +} +.ph-text { + display: flex; + flex-direction: column; + gap: 0.25rem 1rem; + text-align: start; + padding-block: var(--sl-nav-pad-y); +} +.ph-text strong { + font-weight: 600; +} + +@media (min-width: 23em) { + .ph-banner { + justify-content: center; + } + + .ph-houston img { + vertical-align: middle; + } +} + +@media (min-width: 40em) { + .ph-banner { + gap: 3.5rem; + } + .ph-houston { + padding: 0; + } + .ph-houston img { + scale: 1.75; + } + .ph-text { + flex-direction: row; + flex-wrap: wrap; + } +} diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx index fb323681..6545ca7a 100644 --- a/docs/src/content/docs/index.mdx +++ b/docs/src/content/docs/index.mdx @@ -2,6 +2,15 @@ title: Starlight 🌟 Build documentation sites with Astro description: Starlight helps you build beautiful, high-performance documentation websites with Astro. template: splash +banner: + content: | + + + + Welcome Product Hunters 👋 + We are live right now! + + hero: title: Make your docs shine with Starlight tagline: Everything you need to build a stellar documentation website. Fast, accessible, and easy-to-use. diff --git a/docs/src/content/docs/reference/frontmatter.md b/docs/src/content/docs/reference/frontmatter.md index 2259e5ec..e8229958 100644 --- a/docs/src/content/docs/reference/frontmatter.md +++ b/docs/src/content/docs/reference/frontmatter.md @@ -134,6 +134,25 @@ interface HeroConfig { } ``` +### `banner` + +**type:** `{ content: string }` + +Displays an announcement banner at the top of this page. + +The `content` value can include HTML for links or other content. +For example, this page displays a banner including a link to `example.com`. + +```md +--- +title: Page with a banner +banner: + content: | + We just launched something cool! + Check it out +--- +``` + ### `lastUpdated` **type:** `Date | boolean` diff --git a/packages/starlight/components/Banner.astro b/packages/starlight/components/Banner.astro new file mode 100644 index 00000000..769d2c45 --- /dev/null +++ b/packages/starlight/components/Banner.astro @@ -0,0 +1,23 @@ +--- +interface Props { + content: string; +} +--- + +