mirror of synced 2025-12-19 18:14:56 -05:00

Files

devin-ai-integration[bot] bb7b7bdba7 docs: Convert home page to React component with improved layout (#68101 )

## What

Converts the Airbyte documentation home page from a static markdown page
to a dynamic React-based page with improved visual design and
navigation. Moves "Why Airbyte?" content from home page to platform
page.

Requested by ian.alton@airbyte.io in session:
https://app.devin.ai/sessions/6441f0af52ff4f0bb03a55c3fd4252c9

## How

**Architecture Change:**
- Disabled the default Docusaurus docs plugin at root route (`docs:
false`)
- Enabled pages plugin to support standalone React pages
- Deleted `/docs/home/readme.md` and `sidebar.js`
- Created new React component at `/docusaurus/src/pages/index.js`

**New Home Page Features:**
1. **Hero Section**: Purple background (adapts to dark mode) with title,
description, and Arcade demo embed
2. **Navigation Grid**: 6 cards with custom SVG icons:
   - Platform → `/platform/`
   - Connectors → `/integrations/`
   - Release Notes → `/release_notes/`
   - AI Agents → `/ai-agents/`
   - Developers → `/platform/api-documentation`
   - Community and Support → `/platform/community/getting-support`
3. Fully responsive design (3 columns → 2 columns → 1 column)
4. Fast hover transitions (0.2s ease-out)
5. Empty page title to use site-level title (avoids "Airbyte
Documentation | Airbyte Docs" duplication)

**Content Migration:**
- Moved "Why Airbyte?" section with badges from home page to
`/docs/platform/readme.md`

## Review guide

**Critical files (routing change):**
1. `docusaurus/docusaurus.config.js` - Verify the docs plugin disable
and pages plugin enable
2. `docusaurus/src/pages/index.js` - New home page React component,
check all navigation links

**Styling:**
3. `docusaurus/src/pages/index.module.css` - Check CSS variables are
defined:
   - `--color-grey-40`
   - `--color-blue-30`
   - `--ifm-color-primary-lightest`
   - Responsive breakpoints at 996px and 640px

**Content:**
4. `docs/platform/readme.md` - Verify "Why Airbyte?" section placement
makes sense here
5. Deleted files (`docs/home/readme.md`, `sidebar.js`) - Confirm no
other references exist

**Testing checklist:**
- [x] Navigate to `/` and verify new home page renders
- [x] Test all 6 navigation card links
- [x] Toggle dark/light mode
- [x] Test responsive design at tablet (996px) and mobile (640px)
breakpoints
- [x] Verify Arcade embed loads correctly
- [x] Check `/platform/` page has "Why Airbyte?" section
- [x] Verify page title doesn't show duplicate "Airbyte Documentation"

**Accessibility concerns:**
- SVG icons lack aria-labels - should be addressed in follow-up

## User Impact

Users will see a modernized home page with:
- Prominent hero section with purple Airbyte branding
- Clear navigation cards with icons and descriptions  
- Improved mobile experience
- Faster hover interactions

**Potential negative impacts:**
- "Why Airbyte?" content moved from home to platform page - users
expecting it on home page won't find it there
- Old bookmarks to `/docs/home` may break (though likely redirected by
Docusaurus)
- Page title behavior changed (empty title uses site title)

## Can this PR be safely reverted and rolled back?

- [x] YES 💚

This is a pure UI change with no backend or data modifications. The old
markdown file can be restored from git history. All navigation links
point to existing routes.

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: ian.alton@airbyte.io <ian.alton@airbyte.io>

2025-10-15 16:48:42 -07:00