diff --git a/landing/src/components/Header.astro b/landing/src/components/Header.astro index 666e339eb..9653e480c 100644 --- a/landing/src/components/Header.astro +++ b/landing/src/components/Header.astro @@ -72,9 +72,18 @@ const { isHome } = Astro.props; alt={SITE_TITLE} /> -

- Guide your users through a tour of your app -

+ { + isHome ? ( +

+ Shepherd.js — + Guide your users through a tour of your app +

+ ) : ( +

+ Guide your users through a tour of your app +

+ ) + } { isHome && ( diff --git a/landing/src/pages/index.astro b/landing/src/pages/index.astro index 9117855e0..ce5864681 100644 --- a/landing/src/pages/index.astro +++ b/landing/src/pages/index.astro @@ -38,6 +38,13 @@ Astro.response.headers.set(
+

+ Shepherd is an open-source JavaScript library for building guided product + tours, user onboarding, and feature announcements. Attach accessible, + customizable steps to any element in your app — in React, Ember, Angular, + Vue.js, or plain JavaScript. +

+

01. How to Include diff --git a/landing/test/homepage-content.e2e.test.ts b/landing/test/homepage-content.e2e.test.ts new file mode 100644 index 000000000..1343a5102 --- /dev/null +++ b/landing/test/homepage-content.e2e.test.ts @@ -0,0 +1,28 @@ +import { describe, expect, it } from 'vitest'; + +import { visibleText } from './helpers'; +import { TEST_BASE_URL } from './setup/dev-server'; + +describe('homepage content without JavaScript', () => { + it('serves HTML with an H1 naming the brand', async () => { + const response = await fetch(`${TEST_BASE_URL}/`, { + headers: { Accept: 'text/html' } + }); + const html = await response.text(); + + expect(response.status).toBe(200); + expect(html).toMatch(/]/); + + const h1 = html.match(/]*>([\s\S]*?)<\/h1>/); + expect(visibleText(h1![1]!)).toContain('Shepherd'); + }); + + it('has 500+ chars of visible text in the raw HTML', async () => { + const response = await fetch(`${TEST_BASE_URL}/`, { + headers: { Accept: 'text/html' } + }); + const html = await response.text(); + + expect(visibleText(html).length).toBeGreaterThan(500); + }); +});