Add visible homepage project support links

test/browser/adoption.spec.ts

@@ -30,7 +30,9 @@ test('homepage directs JSON experiments to playground and exposes legal and comm
   await page.goto('/')
   await expect(page.getByLabel('JSON input', { exact: true })).toHaveCount(0)
   await expect(
-    page.getByRole('link', { name: '★ Star React Data Inspector on GitHub ↗' }),
+    page
+      .getByRole('region', { name: 'Useful in your project?', exact: true })
+      .getByRole('link', { name: 'Star on GitHub', exact: true }),
   ).toHaveAttribute(
     'href',
     'https://github.com/NIPE-Solutions/react-data-inspector',

test/browser/website.spec.ts

@@ -1,6 +1,65 @@
 import { test, expect } from '@playwright/test'
 import AxeBuilder from '@axe-core/playwright'
 
+for (const width of [1280, 390, 320]) {
+  test(`homepage support links remain usable at ${width}px`, async ({
+    page,
+    browserName,
+  }) => {
+    await page.setViewportSize({ width, height: 900 })
+    await page.goto('/')
+    const support = page.getByRole('region', {
+      name: 'Useful in your project?',
+    })
+    await expect(support).toBeVisible()
+    expect(
+      await support.evaluate((node) => node.previousElementSibling?.id),
+    ).toBe('in-products')
+    const star = support.getByRole('link', {
+      name: 'Star on GitHub',
+      exact: true,
+    })
+    const explore = support.getByRole('link', {
+      name: 'Explore NIPE Open Source',
+      exact: true,
+    })
+    await expect(star).toHaveAttribute(
+      'href',
+      'https://github.com/NIPE-Solutions/react-data-inspector',
+    )
+    await expect(explore).toHaveAttribute(
+      'href',
+      'https://opensource.nipesolutions.com',
+    )
+    for (const link of [star, explore]) {
+      const bounds = await link.boundingBox()
+      expect(bounds!.height).toBeGreaterThanOrEqual(44)
+      expect(bounds!.width).toBeGreaterThanOrEqual(44)
+      expect(bounds!.x).toBeGreaterThanOrEqual(0)
+      expect(bounds!.x + bounds!.width).toBeLessThanOrEqual(width)
+      expect(await link.evaluate((node) => node.tagName)).toBe('A')
+    }
+    await star.focus()
+    // macOS Safari navigates native links with Option+Tab.
+    const tab =
+      browserName === 'webkit' && process.platform === 'darwin'
+        ? 'Alt+Tab'
+        : 'Tab'
+    await page.keyboard.press(tab)
+    await expect(explore).toBeFocused()
+    await page.keyboard.press(`Shift+${tab}`)
+    await expect(star).toBeFocused()
+    expect(
+      await star.evaluate((node) => getComputedStyle(node).outlineStyle),
+    ).not.toBe('none')
+    if (process.env.CTA_SCREENSHOT_DIR) {
+      await support.screenshot({
+        path: `${process.env.CTA_SCREENSHOT_DIR}/${test.info().project.name}-${width}.png`,
+      })
+    }
+  })
+}
+
 test('homepage proofs use actual values and safe inspection', async ({
   page,
 }) => {
@@ -95,6 +154,9 @@ test('static pages hydrate without errors and documentation links work', async (
   ]) {
     await page.goto(route)
     await expect(page.getByRole('heading', { level: 1 })).toBeVisible()
+    await expect(
+      page.getByRole('region', { name: 'Useful in your project?' }),
+    ).toHaveCount(route === '/' ? 1 : 0)
     if (route === '/')
       await page.getByRole('button', { name: 'Classic', exact: true }).click()
   }

website/App.tsx

@@ -76,6 +76,36 @@ export function App() {
         <CustomizationWorkshop />
         <Ownership />
         <Products />
+        <section
+          className="section community"
+          aria-labelledby="support-heading"
+        >
+          <h2 id="support-heading">Useful in your project?</h2>
+          <div>
+            <p>
+              If React Data Inspector helps you make sense of your data, a
+              GitHub star helps other developers discover it. Explore more tools
+              from NIPE Open Source for your next project.
+            </p>
+            <div className="support-links">
+              <a
+                className="primary"
+                href="https://github.com/NIPE-Solutions/react-data-inspector"
+              >
+                Star on GitHub
+              </a>
+              <a href="https://opensource.nipesolutions.com">
+                Explore NIPE Open Source
+              </a>
+            </div>
+            <p className="annotation">
+              Have a real-world edge case?{' '}
+              <a href="https://github.com/NIPE-Solutions/react-data-inspector/issues">
+                Bring it to the issue tracker.
+              </a>
+            </p>
+          </div>
+        </section>
         <aside className="keyboard-proof" aria-label="Accessibility evidence">
           <h2>Keep your keyboard.</h2>
           <p>
@@ -88,31 +118,6 @@ export function App() {
           </p>
           <a href="/accessibility">Keyboard model and audit status →</a>
         </aside>
-        <section className="section community">
-          <h2>
-            Like where this is going?
-            <br />
-            Help it grow.
-          </h2>
-          <div>
-            <p>
-              React Data Inspector is free, open source, and we're only getting
-              started. Give it a star and help more developers find it.
-            </p>
-            <a
-              className="star-link"
-              href="https://github.com/NIPE-Solutions/react-data-inspector"
-            >
-              ★ Star React Data Inspector on GitHub ↗
-            </a>
-            <p className="annotation">
-              Have a real-world edge case?{' '}
-              <a href="https://github.com/NIPE-Solutions/react-data-inspector/issues">
-                Bring it to the issue tracker.
-              </a>
-            </p>
-          </div>
-        </section>
         <section className="section onward" id="docs">
           <h2>
             A focused primitive.

website/story.css

@@ -820,10 +820,17 @@ html {
 .community p {
   max-width: 60ch;
 }
-.star-link {
-  display: inline-block;
-  font-weight: 600;
-  margin-block: 12px;
+.support-links {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px 24px;
+}
+.support-links a {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  padding: 10px 18px;
 }
 .doc-article > p,
 .doc-article > ul,