Skip to content

feat: massive UI/UX overhaul, fuzzy search, and mobile navigation - #39

Merged
Yash-pluto merged 2 commits into
mainfrom
feat/roadmaps-and-resources
Aug 9, 2026
Merged

Yash-pluto merged 2 commits into
mainfrom
feat/roadmaps-and-resources

Conversation

@Yash-pluto

@Yash-pluto Yash-pluto commented Aug 9, 2026 •

Copy link
Copy Markdown
Owner
  • Redesigned landing page with a new hero section and categorized topic grids
  • Built mobile-responsive navigation including a slide-out drawer and inline TOC
  • Upgraded MDX components with advanced code blocks and callouts/admonitions
  • Integrated Fuse.js for fuzzy search with exact-match text highlighting
  • Added breadcrumbs, a feedback widget, and 'Edit on GitHub' links

Summary by CodeRabbit

  • New Features

    • Added responsive mobile navigation and table-of-contents drawers.
    • Added fuzzy search across topics and headings with matched-text highlighting.
    • Added breadcrumbs, GitHub edit links, feedback notifications, and scroll-to-top controls.
    • Added reusable callouts for information, tips, warnings, and danger notices.
    • Added enhanced code blocks with filenames and highlighted lines.
    • Introduced a refreshed landing page with searchable reference categories, keyboard shortcuts, responsive cards, theme support, and social links.
  • Improvements

    • Topic pages now generate clearer titles, content headers, and responsive navigation layouts.

- Redesigned landing page with a new hero section and categorized topic grids
- Built mobile-responsive navigation including a slide-out drawer and inline TOC
- Upgraded MDX components with advanced code blocks and callouts/admonitions
- Integrated Fuse.js for fuzzy search with exact-match text highlighting
- Added breadcrumbs, a feedback widget, and 'Edit on GitHub' links
@Yash-pluto Yash-pluto self-assigned this Aug 9, 2026
@vercel

vercel Bot commented Aug 9, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
refme Ready Ready Preview Aug 9, 2026 8:25pm

@Yash-pluto Yash-pluto added enhancement checked The provided code works. labels Aug 9, 2026
@Yash-pluto
Yash-pluto merged commit bf21c0f into main Aug 9, 2026
3 of 4 checks passed
@coderabbitai

coderabbitai Bot commented Aug 9, 2026 •

Copy link
Copy Markdown

Review Change Stack

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: cd69b4e1-ba7a-4844-9b2c-7811ccad343f

📥 Commits

Reviewing files that changed from the base of the PR and between 5db0734 and 95ee076.

⛔ Files ignored due to path filters (1)
  • frontend/package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (5)
  • frontend/app/[topic]/TopicLayout.tsx
  • frontend/app/components/Callout.tsx
  • frontend/app/components/ClientCodeBlock.tsx
  • frontend/app/page.tsx
  • frontend/package.json

📝 Walkthrough

Walkthrough

The frontend replaces the landing page directory with fuzzy search and responsive reference cards. Topic pages gain mobile navigation, fuzzy heading search, structured content controls, feedback toasts, breadcrumbs, edit links, and scroll-to-top behavior. Reusable callout and code-block components receive new presentation features.

Changes

Frontend experience

Layer / File(s) Summary
Shared content components
frontend/package.json, frontend/app/components/Callout.tsx, frontend/app/components/ClientCodeBlock.tsx
Added frontend dependencies. Added themed callout variants. Added code-block filenames, file icons, wrapped lines, and highlighted lines.
Landing page search and directory
frontend/app/page.tsx
Updated reference metadata. Added Fuse.js search, match highlighting, keyboard shortcuts, responsive reference cards, and social footer links.
Topic navigation and content controls
frontend/app/[topic]/TopicLayout.tsx
Added responsive navigation drawers, fuzzy topic and heading search, scroll locking, structured headers, feedback notifications, breadcrumbs, GitHub edit links, and scroll-to-top controls.

Estimated code review effort: 4 (Complex) | ~60 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Reader
  participant TopicLayout
  participant FuseJS
  participant NextRouter
  Reader->>TopicLayout: Enter a topic or heading query
  TopicLayout->>FuseJS: Search topic metadata and headings
  FuseJS-->>TopicLayout: Return ranked matches and match ranges
  Reader->>TopicLayout: Select a result
  TopicLayout->>NextRouter: Navigate to a topic or section
Loading

Possibly related PRs

  • Yash-pluto/refme#34: Earlier changes to the same topic layout, code block, and landing page components.

Poem

Fuzzy matches light the way,
Drawers open, then close away.
Code lines glow in themed hue,
Callouts guide what readers do.
A gentle scroll returns the view,
While search makes paths feel new.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/roadmaps-and-resources

Comment @coderabbitai help to get the list of available commands.

@Yash-pluto Yash-pluto left a comment

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

This branch was successfully deployed

1 active deployment
Preview — 95ee0767 Deployed Aug 9, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

checked The provided code works.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant