Skip to content

Commit 4c272f1

Browse files
CylopCylop
authored
Add visible homepage project support links (#4)
* feat: add homepage project support links * test: update homepage adoption link assertion
1 parent 913dad8 commit 4c272f1

4 files changed

Lines changed: 106 additions & 30 deletions

File tree

‎test/browser/adoption.spec.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,9 @@ test('homepage directs JSON experiments to playground and exposes legal and comm
3030
await page.goto('/')
3131
await expect(page.getByLabel('JSON input', { exact: true })).toHaveCount(0)
3232
await expect(
33-
page.getByRole('link', { name: '★ Star React Data Inspector on GitHub ↗' }),
33+
page
34+
.getByRole('region', { name: 'Useful in your project?', exact: true })
35+
.getByRole('link', { name: 'Star on GitHub', exact: true }),
3436
).toHaveAttribute(
3537
'href',
3638
'https://github.com/NIPE-Solutions/react-data-inspector',

‎test/browser/website.spec.ts‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,65 @@
11
import { test, expect } from '@playwright/test'
22
import AxeBuilder from '@axe-core/playwright'
33

4+
for (const width of [1280, 390, 320]) {
5+
test(`homepage support links remain usable at ${width}px`, async ({
6+
page,
7+
browserName,
8+
}) => {
9+
await page.setViewportSize({ width, height: 900 })
10+
await page.goto('/')
11+
const support = page.getByRole('region', {
12+
name: 'Useful in your project?',
13+
})
14+
await expect(support).toBeVisible()
15+
expect(
16+
await support.evaluate((node) => node.previousElementSibling?.id),
17+
).toBe('in-products')
18+
const star = support.getByRole('link', {
19+
name: 'Star on GitHub',
20+
exact: true,
21+
})
22+
const explore = support.getByRole('link', {
23+
name: 'Explore NIPE Open Source',
24+
exact: true,
25+
})
26+
await expect(star).toHaveAttribute(
27+
'href',
28+
'https://github.com/NIPE-Solutions/react-data-inspector',
29+
)
30+
await expect(explore).toHaveAttribute(
31+
'href',
32+
'https://opensource.nipesolutions.com',
33+
)
34+
for (const link of [star, explore]) {
35+
const bounds = await link.boundingBox()
36+
expect(bounds!.height).toBeGreaterThanOrEqual(44)
37+
expect(bounds!.width).toBeGreaterThanOrEqual(44)
38+
expect(bounds!.x).toBeGreaterThanOrEqual(0)
39+
expect(bounds!.x + bounds!.width).toBeLessThanOrEqual(width)
40+
expect(await link.evaluate((node) => node.tagName)).toBe('A')
41+
}
42+
await star.focus()
43+
// macOS Safari navigates native links with Option+Tab.
44+
const tab =
45+
browserName === 'webkit' && process.platform === 'darwin'
46+
? 'Alt+Tab'
47+
: 'Tab'
48+
await page.keyboard.press(tab)
49+
await expect(explore).toBeFocused()
50+
await page.keyboard.press(`Shift+${tab}`)
51+
await expect(star).toBeFocused()
52+
expect(
53+
await star.evaluate((node) => getComputedStyle(node).outlineStyle),
54+
).not.toBe('none')
55+
if (process.env.CTA_SCREENSHOT_DIR) {
56+
await support.screenshot({
57+
path: `${process.env.CTA_SCREENSHOT_DIR}/${test.info().project.name}-${width}.png`,
58+
})
59+
}
60+
})
61+
}
62+
463
test('homepage proofs use actual values and safe inspection', async ({
564
page,
665
}) => {
@@ -95,6 +154,9 @@ test('static pages hydrate without errors and documentation links work', async (
95154
]) {
96155
await page.goto(route)
97156
await expect(page.getByRole('heading', { level: 1 })).toBeVisible()
157+
await expect(
158+
page.getByRole('region', { name: 'Useful in your project?' }),
159+
).toHaveCount(route === '/' ? 1 : 0)
98160
if (route === '/')
99161
await page.getByRole('button', { name: 'Classic', exact: true }).click()
100162
}

‎website/App.tsx‎

Lines changed: 30 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,36 @@ export function App() {
7676
<CustomizationWorkshop />
7777
<Ownership />
7878
<Products />
79+
<section
80+
className="section community"
81+
aria-labelledby="support-heading"
82+
>
83+
<h2 id="support-heading">Useful in your project?</h2>
84+
<div>
85+
<p>
86+
If React Data Inspector helps you make sense of your data, a
87+
GitHub star helps other developers discover it. Explore more tools
88+
from NIPE Open Source for your next project.
89+
</p>
90+
<div className="support-links">
91+
<a
92+
className="primary"
93+
href="https://github.com/NIPE-Solutions/react-data-inspector"
94+
>
95+
Star on GitHub
96+
</a>
97+
<a href="https://opensource.nipesolutions.com">
98+
Explore NIPE Open Source
99+
</a>
100+
</div>
101+
<p className="annotation">
102+
Have a real-world edge case?{' '}
103+
<a href="https://github.com/NIPE-Solutions/react-data-inspector/issues">
104+
Bring it to the issue tracker.
105+
</a>
106+
</p>
107+
</div>
108+
</section>
79109
<aside className="keyboard-proof" aria-label="Accessibility evidence">
80110
<h2>Keep your keyboard.</h2>
81111
<p>
@@ -88,31 +118,6 @@ export function App() {
88118
</p>
89119
<a href="/accessibility">Keyboard model and audit status →</a>
90120
</aside>
91-
<section className="section community">
92-
<h2>
93-
Like where this is going?
94-
<br />
95-
Help it grow.
96-
</h2>
97-
<div>
98-
<p>
99-
React Data Inspector is free, open source, and we're only getting
100-
started. Give it a star and help more developers find it.
101-
</p>
102-
<a
103-
className="star-link"
104-
href="https://github.com/NIPE-Solutions/react-data-inspector"
105-
>
106-
★ Star React Data Inspector on GitHub ↗
107-
</a>
108-
<p className="annotation">
109-
Have a real-world edge case?{' '}
110-
<a href="https://github.com/NIPE-Solutions/react-data-inspector/issues">
111-
Bring it to the issue tracker.
112-
</a>
113-
</p>
114-
</div>
115-
</section>
116121
<section className="section onward" id="docs">
117122
<h2>
118123
A focused primitive.

‎website/story.css‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -820,10 +820,17 @@ html {
820820
.community p {
821821
max-width: 60ch;
822822
}
823-
.star-link {
824-
display: inline-block;
825-
font-weight: 600;
826-
margin-block: 12px;
823+
.support-links {
824+
display: flex;
825+
flex-wrap: wrap;
826+
align-items: center;
827+
gap: 12px 24px;
828+
}
829+
.support-links a {
830+
display: inline-flex;
831+
align-items: center;
832+
min-height: 44px;
833+
padding: 10px 18px;
827834
}
828835
.doc-article > p,
829836
.doc-article > ul,

0 commit comments

Comments
 (0)