[WEB-4259] New Homepage

[denissellu]

See WEB-4259 New simple design to match with the updated nav, including pulling the changelog

Summary by CodeRabbit

• New Features

  • Introduced a changelog feed section on the homepage displaying the latest updates.
  • Added a dedicated examples section with improved layout and visuals.
  • Platform and product information is now featured in a structured, interactive section.

• Refactor

  • Homepage layout restructured for clarity, with explicit sections for hero, platform/products, examples, and changelog.
  • Homepage content and data types streamlined for easier navigation and maintainability.
  • Sidebar layout options now allow independent control of left and right sidebars.

• Chores

  • Added support for sourcing changelog entries from an external RSS feed.
  • Updated dependencies to include RSS feed sourcing capability.

• Removed

  • Deprecated generic homepage card components and types in favor of new structured sections.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

This change implements a major redesign of the documentation homepage. It removes the previous generic, card-based section layout and introduces a new, more structured homepage composed of distinct sections: a hero header, a platform and products showcase, an examples section, and a dynamically populated changelog feed. The homepage content structure and associated types are refactored to support this new layout. Several obsolete components are deleted, and new components are added for the redesigned sections. Additionally, the changelog feed is sourced via a new RSS plugin, with supporting code and dependencies introduced for RSS feed integration. Sidebar layout options are also updated for greater granularity.

Changes

File(s)	Change Summary
src/components/Homepage/BodySection/BodySection.tsx, BodySectionDescription.tsx, Card/FeatureCard.tsx, Card/HeroCard.tsx, Card/Links.tsx, Card/SdkCard.tsx, Card/types.ts	Deleted all previous homepage section/card components and their types, removing the old card-based homepage structure.
src/components/Homepage/HomepageContent.tsx	Refactored the homepage content component to use new structured sections and dedicated subcomponents; updated prop signature and removed obsolete types.
src/components/Homepage/HeroSection.tsx, PlatformAndProducts.tsx, ExamplesSection.tsx, Changelog.tsx	Added new components for the hero header, platform/products, examples, and changelog sections.
src/data/content/homepage.ts, src/data/content/types.ts	Replaced the sections array with new structured objects for platform/products and examples; updated types accordingly.
src/pages/docs/index.tsx	Updated to pass the new homepageContent structure to the homepage content component.
gatsby-config.ts, package.json	Added gatsby-source-rss-feed plugin and dependency for RSS changelog integration.
data/createPages/index.ts, data/onCreatePage.ts, src/components/Layout/Layout.tsx	Refined sidebar layout options from a single sidebar flag to separate leftSidebar and rightSidebar booleans; updated type and usage accordingly.

Sequence Diagram(s)

sequenceDiagram
participant User
participant Homepage
participant PlatformAndProducts
participant ExamplesSection
participant ChangelogSection
participant GatsbyStaticQuery
User->>Homepage: Visit docs homepage
Homepage->>HeroSection: Render hero header
Homepage->>PlatformAndProducts: Render platform/products section
Homepage->>ExamplesSection: Render examples section
Homepage->>ChangelogSection: Render changelog feed
ChangelogSection->>GatsbyStaticQuery: Fetch latest changelog entries from RSS
GatsbyStaticQuery-->>ChangelogSection: Return changelog data
ChangelogSection->>Homepage: Render changelog entries

Loading

Assessment against linked issues

Objective (Issue)	Addressed	Explanation
Implement new simple docs homepage design with updated layout and changelog integration (WEB-4259)	✅
Remove old card-based homepage sections and replace with hero, platform/products, examples, and changelog sections (WEB-4259)	✅
Update homepage content structure and types to match new design (WEB-4259)	✅
Integrate changelog feed via RSS and display latest entries (WEB-4259)	✅

Suggested reviewers

• kennethkalmer
• m-hulbert

Poem

A new homepage springs up, so neat and so bright,
With heroes and products all shining in light.
Examples now sparkle, the changelog feeds through,
The old cards have hopped off—hello to the new!
With code and with carrots, this rabbit approves,
For docs now feel fresher, with all the right moves.
🥕✨

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[aralovelace]

will check more next week

[m-hulbert]

I think we can also delete everything in src/components/Homepage/BodySection with this update.

[jamiehenson]

Pretty good, close to a stamp for me. Though naturally we can't release this until Examples goes out, which is marked for this week no matter what. Related to this, there also needs to be changes to the Header to both allow the Documentation/Examples switched, and the "DOCS" bit alongside the logo.

From testing locally:

• the headers of the Examples and Changelogs sections (incl their respective View All links) aren't aligned with eachother vertically
• in mobile, the margin between the product tiles section and the Examples section needs to be reduced to 48px from 64px
• the gap is too big between the header and the Platform & Products section

[m-hulbert]

We've lost the Examples background entirely now 😅

[m-hulbert]

🚀