Add "More from Etherpad" ecosystem section to homepage

[JohnMcLear]

What

etherpad.org currently links to the core editor, the blog, the wiki and the plugin directory — but nowhere does it point visitors at the other official projects the Foundation maintains. People don't discover etherpad-desktop, etherpad-cli, pad and friends because the site never mentions them.

This adds a "More from Etherpad" section to the homepage: a responsive card grid of the Foundation's user-facing companion apps, clients and tools.

Where

• New section sits between Download and Contribute (scroll-point id="ecosystem").
• New "Apps & Tools" entry in the desktop nav (Header.tsx) and the mobile drawer (MobileDrawer.tsx).
• The intro copy links back to the existing /plugins page so the two stay distinct.

What's featured

Curated, user-facing projects (plugins keep their own /plugins page and are intentionally excluded):

Project	Links to
Plugins	/plugins (internal)
Desktop & Mobile App	ether/etherpad-desktop
Command-line Client	ether/etherpad-cli
pad — Terminal Editor	ether/pad
Printing Press	printingpress.dev
Socket.IO Proxy	ether/etherpad-proxy
Scale Calculator	scale.etherpad.org
ueberDB	ether/ueberDB
Home Assistant Add-on	ether/home-assistant-addon-etherpad

The card list is a single data array in EtherpadEcosystem.tsx, so adding/removing entries later is a one-line change.

How it looks

Cards are a 1 / 2 / 3-column Tailwind grid reusing the existing section styling, with hover elevation and full light/dark support.

Light:

Dark:

Verification

• next build (with type-checking) passes.
• Rendered the exported static dist in Chromium and verified the section renders correctly, the "Apps & Tools" nav entry works, and both light and dark themes look right.

🤖 Generated with Claude Code

[qodo-code-review]

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

[qodo-free-for-open-source-projects]

Review Summary by Qodo

Add "More from Etherpad" ecosystem section to homepage

✨ Enhancement

Walkthroughs

Description

• Add "More from Etherpad" ecosystem section showcasing official companion projects
• Display curated apps, clients and tools in responsive card grid between Download and Contribute
• Add "Apps & Tools" navigation entry to desktop header and mobile drawer
• Link ecosystem section to existing /plugins page to keep plugins distinct

Diagram

flowchart LR
  A["Homepage Layout"] -->|"Add Section"| B["EtherpadEcosystem Component"]
  B -->|"Display Projects"| C["Responsive Card Grid"]
  C -->|"1/2/3 Columns"| D["Project Cards"]
  A -->|"Update Navigation"| E["Header & MobileDrawer"]
  E -->|"Add Link"| F["Apps & Tools Entry"]
  F -->|"Navigate To"| B

Loading

File Changes

1. src/Constants.ts ⚙️ Configuration changes +5/-0

Add Etherpad organization GitHub URL constant

• Add ETHERPAD_ORG constant pointing to GitHub organization base URL
• Include comment explaining that plugins are intentionally excluded from ecosystem

src/Constants.ts

---

2. app/page.tsx ✨ Enhancement +3/-0

Integrate ecosystem section into homepage layout

• Import new EtherpadEcosystem component
• Add scroll-point anchor with id "ecosystem"
• Insert EtherpadEcosystem component between DownloadLatestVersion and Contribute sections

app/page.tsx

---

3. src/pagesToDisplay/EtherpadEcosystem.tsx ✨ Enhancement +102/-0

Create ecosystem section component with project cards

• Create new component displaying curated ecosystem projects in card grid
• Define PROJECTS array with 7 official companion projects (desktop app, CLI, proxy, load-tester,
 ueberDB, web components, Home Assistant add-on)
• Implement responsive 1/2/3-column Tailwind grid with hover effects and dark theme support
• Include intro text linking to /plugins page to distinguish from plugin directory

src/pagesToDisplay/EtherpadEcosystem.tsx

---

View more (3)

4. src/components/Header.tsx ✨ Enhancement +0/-0

Add Apps & Tools navigation link to header

• Import faCubes icon from FontAwesome
• Add "Apps & Tools" navigation link that scrolls to ecosystem section
• Position new link between "Download" and "Contribute" in desktop navigation

src/components/Header.tsx

---

5. src/components/MobileDrawer.tsx ✨ Enhancement +5/-1

Add Apps & Tools entry to mobile navigation drawer

• Import faCubes icon from FontAwesome
• Add "Apps & Tools" menu entry with icon to mobile drawer
• Position entry between "Download" and "Contribute" sections
• Link navigates to ecosystem scroll-point

src/components/MobileDrawer.tsx

---

6. src/pagesToDisplay/Header.tsx Additional files +1/-0

...

src/pagesToDisplay/Header.tsx

---

[qodo-free-for-open-source-projects]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0) 🎨 UX issues (0) 🔗 Cross-repo conflicts (0)

1. Non-link nav item ✓ Resolved 🐞 Bug ≡ Correctness

Description

The new “Apps & Tools” navigation item is an <a> without an href (click-only), so it is not reliably
keyboard-focusable and cannot be used as a normal link (open in new tab/copy link), breaking
navigation semantics. This is introduced in both the desktop header and mobile drawer for the new
ecosystem section.

Code

src/pagesToDisplay/Header.tsx[41]

Evidence

The new nav entry is added as an ` with only an onClick handler (no href`) in the header, and
similarly in the mobile drawer, meaning it does not behave as a standard link and is not reliably
keyboard navigable.

src/pagesToDisplay/Header.tsx[37-45]
src/components/MobileDrawer.tsx[45-48]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The new “Apps & Tools” nav item is implemented as a click-only `<a>` (no `href`), and in the mobile drawer it’s also nested under a clickable `<div>`. Anchors without `href` are not proper links and are not reliably reachable/usable via keyboard and assistive tech.
## Issue Context
`navigateToElement()` already performs scrolling and `router.push('/#...')`. You can keep this behavior while restoring correct semantics by adding an `href` (and preventing default on click), or by switching to a `<button>`.
## Fix Focus Areas
- src/pagesToDisplay/Header.tsx[16-46]
- src/components/MobileDrawer.tsx[14-60]
## Suggested approach
- Prefer a real link target for these items: `href="/#ecosystem"`.
- Option A (keep scroll helper):
- Add `href="/#ecosystem"` to the `<a>`.
- Change `onClick` to `(e) => { e.preventDefault(); navigateToElement('ecosystem'); }`.
- Option B (button semantics):
- Replace the `<a>` with `<button type="button">` and apply the same classes.
- In MobileDrawer, avoid clickable `<div>` wrappers; make the interactive element the button/link itself.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. Internal link bypasses Next ✓ Resolved 🐞 Bug ➹ Performance

Description

The new Ecosystem intro links to the internal /plugins route using a raw ``, which triggers a full
document navigation instead of Next.js client-side routing. This is inconsistent with other internal
navigation that uses next/link and adds unnecessary reload overhead.

Code

src/pagesToDisplay/EtherpadEcosystem.tsx[78]

Evidence

The new component uses a plain anchor for /plugins, while /plugins is an internal Next.js route
in this codebase and other internal links already use next/link.

src/pagesToDisplay/EtherpadEcosystem.tsx[75-80]
app/plugins/page.tsx[18-26]
src/pagesToDisplay/Header.tsx[31-42]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`EtherpadEcosystem` links to the internal `/plugins` route with a plain `<a href="/plugins">`, which bypasses Next.js client-side navigation.
## Issue Context
The repo has an `app/plugins/page.tsx` route, so this is an internal page and should generally be linked with `next/link` for client-side transitions.
## Fix Focus Areas
- src/pagesToDisplay/EtherpadEcosystem.tsx[69-80]
## Suggested approach
- Import `Link` from `next/link` in `EtherpadEcosystem.tsx`.
- Replace:
- `<a className="underline" href="/plugins">plugin directory</a>`
with:
- `<Link className="underline" href="/plugins">plugin directory</Link>`
- (Optional) Ensure styling remains the same (className can stay on `Link`).

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

[JohnMcLear]

Thanks @qodo — both findings actioned in c839880:

🐞 Bug 1 — Non-link nav item (correctness/a11y): The new "Apps & Tools" entry in both the desktop header and the mobile drawer now has a real href="/#ecosystem", and the scroll behaviour lives in the anchor's own onClick (e.preventDefault(); navigateToElement('ecosystem')). It's now keyboard-focusable, activates on Enter, and supports open-in-new-tab / copy-link. Verified in Chromium: the link is reachable via Tab and pressing Enter scrolls to the section (scrollY 0 → 4421).

(Note: the pre-existing nav items — Download, Contribute, Links, Contact — share the old click-only pattern. I've fixed the item this PR introduces and left the others untouched to keep the diff scoped; happy to follow up with a nav-wide a11y pass in a separate PR if wanted.)

🐞 Bug 2 — Internal link bypasses Next (performance): The /plugins link in the ecosystem intro now uses next/link (<Link href="/plugins">) for client-side routing, matching the rest of the internal navigation.