Skip to content

feat(web): add interactive xterm.js terminal demo to landing page#127

Open
riyapetle wants to merge 1 commit into
pie-314:devfrom
riyapetle:RiyaCommits2
Open

feat(web): add interactive xterm.js terminal demo to landing page#127
riyapetle wants to merge 1 commit into
pie-314:devfrom
riyapetle:RiyaCommits2

Conversation

@riyapetle

Copy link
Copy Markdown

Description

This PR integrates a live, interactive terminal demo into the TRX web landing page using xterm.js. This allows visitors to experience the look and feel of the TRX package manager directly from their browser without needing to install anything locally first.

Key Features & Changes

  • Interactive Terminal UI: Added a premium macOS-style terminal container using xterm.js that fits flawlessly into the Next.js page.tsx layout.
  • Dynamic Typing Animation: The component programmatically simulates a user typing the command $ trx neovim with randomized, realistic keystroke delays.
  • Authentic ANSI Output: Rendered the simulated search results using genuine ANSI escape sequences (\x1b[32m, \x1b[36m, etc.) to replicate TRX's CLI formatting with green checkmarks and colored metadata.
  • SSR Safe Integration: Safely bypassed Next.js server-side rendering restrictions for xterm.js (which relies on browser window APIs) by isolating the terminal logic in a TrxDemoTerminal component and loading it dynamically with { ssr: false } via TrxDemoWrapper.
  • Playback Controls: Added polished "Pause/Resume" and "Replay" action buttons underneath the terminal, utilizing AbortController logic to empower users to interrupt or restart the animation dynamically.
  • Aesthetic Enhancements: Upgraded the terminal UI to include a macOS window header (traffic light buttons), custom padding, refined borders, and a subtle drop glow to make it feel premium and native.

How to Verify

  1. Pull this branch locally: git checkout RiyaCommits2
  2. Navigate to the web app directory: cd trx-web
  3. Install dependencies: npm install
  4. Start the development server: npm run dev
  5. Navigate to http://localhost:3000 and observe the terminal demo below the hero section!

Closes #62

image

@vercel

vercel Bot commented Jun 8, 2026

Copy link
Copy Markdown

@riyapetle is attempting to deploy a commit to the pie's projects Team on Vercel.

A member of the Team first needs to authorize it.

@riyapetle

Copy link
Copy Markdown
Author

Hii @pie-314
I have reviewed the implementation and noted the following:

  • Architecture: The browser-specific logic is properly isolated using Next.js dynamic imports (ssr: false), which successfully prevents Server-Side Rendering conflicts.
  • Memory Management: The xterm instance is correctly disposed of during the component unmount cycle, and the AbortController handles asynchronous loops effectively to prevent memory leaks.
  • Styling: The UI aligns well with the existing project aesthetics and appropriately utilizes ANSI escape codes for authentic terminal output.

The automated checks (build and linter) have passed successfully, and local testing confirms the component behaves as expected. This is approved and ready to be merged.

closes #62

@riyapetle riyapetle changed the base branch from main to dev June 8, 2026 14:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Web] Interactive Xterm.js Demo on Landing Page

1 participant