Skip to content

feat: custom PrevNextPage component#119

Merged
jbroma merged 2 commits intomainfrom
fix/use-custom-prev-next
Feb 2, 2026
Merged

feat: custom PrevNextPage component#119
jbroma merged 2 commits intomainfrom
fix/use-custom-prev-next

Conversation

@jbroma
Copy link
Member

@jbroma jbroma commented Jan 30, 2026

Summary

  • Restores the custom PrevNextPage component that was removed in feat: add compatibility with @rspress/core@2.0.0-rc.3 #91
  • The default rspress component displays icons poorly
  • Updated to use rspress 2.0 hooks (usePrevNextPage, useI18n, renderInlineMarkdown)
  • Removed unused CSS overrides for the default component from nav.css

Animations & Hover Effects

  • Sliding grey background on hover (matches LLMS button style)
  • Icon slides out/in animation on hover
  • Icon box turns accent color with white icon
  • Title turns accent color on hover
  • Created dedicated arrow-bar-left.svg asset for prev button

Test plan

  • Verify prev/next navigation displays correctly on doc pages
  • Verify icons render properly (arrow in grey box)
  • Verify hover animations work (background slides, icon animates)
  • Verify mobile responsive layout (stacks vertically)

🤖 Generated with Claude Code

The default rspress PrevNextPage component displays icons poorly.
This restores our custom implementation with proper icon styling.

Updated to use rspress 2.0 hooks:
- usePrevNextPage() for navigation data
- useI18n() for internationalized labels
- renderInlineMarkdown() for page titles

Co-Authored-By: Claude <noreply@anthropic.com>
@github-actions github-actions bot added the release: bug fix Bug Fix label Jan 30, 2026
@jbroma jbroma changed the title fix: restore custom PrevNextPage component fix: use custom PrevNextPage component Jan 30, 2026
@github-actions
Copy link

github-actions bot commented Jan 30, 2026

PR Preview Action v1.8.1

QR code for preview link

🚀 View preview at
https://callstack.github.io/rspress-theme/pr-preview/pr-119/

Built to branch gh-pages at 2026-01-30 15:02 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

@jaworek
Copy link
Collaborator

jaworek commented Jan 30, 2026

PrevNextPage should not apply color to icon when user hovers over it.

Current:
image

Correct:
image

https://incubator.callstack.com/ottrelite/docs/backends/introduction

- Add sliding background animation on hover (grey overlay)
- Add slide-out/slide-in animation for icons
- Create arrow-bar-left.svg for prev button (avoids rotation conflicts)
- Icon box turns accent color with white icon on hover
- Title turns accent color on hover

Co-Authored-By: Claude <noreply@anthropic.com>
@jbroma jbroma changed the title fix: use custom PrevNextPage component feat: use custom PrevNextPage component Jan 30, 2026
@github-actions github-actions bot added release: feature New Feature and removed release: bug fix Bug Fix labels Jan 30, 2026
@jbroma jbroma changed the title feat: use custom PrevNextPage component feat: custom PrevNextPage component Jan 30, 2026
@jbroma jbroma merged commit f9ab81a into main Feb 2, 2026
9 checks passed
@jbroma jbroma deleted the fix/use-custom-prev-next branch February 2, 2026 11:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

release: feature New Feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants