Closed
Conversation
- Migrate from Create React App to Rspack with SWC - Add dark mode support with theme toggle - Redesign UI with improved mobile responsiveness - Add GitHub Actions for deployment and PR previews - Convert class components to functional with hooks - Add CLAUDE.md for project documentation - Various bug fixes and styling improvements Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Replace rspack with rsbuild for bundling (rsbuild.config.mjs) - Add vitest with 17 unit tests across 4 test files - App: theme rendering and localStorage persistence - AwesomeInput: search input, results, focus handling - AwesomeSearch: loading state, menu rendering, controls - AwesomeReadme: loading state, GitHub link, TOC button - Fix 100vh causing scroll issues on mobile (use min-height) - Hide GitHub corner on mobile at 768px breakpoint - Add responsive images (max-width: 100%) - Update GitHub Actions: node 20, add test step, publish from dist/ - Clean up junk dependencies (i, npm, shebang-regex, web-vitals) https://claude.ai/code/session_01SzHAe3x8wH4SmbKcpHZJY7
Resolved conflicts between main's rsbuild/React 18/vitest migration and this branch's mobile UI redesign. Kept our redesigned components with mobile improvements, adopted main's React 18, rsbuild config, and CI/CD workflow. https://claude.ai/code/session_01SzHAe3x8wH4SmbKcpHZJY7
Preview DeploymentYour PR has been deployed for preview! Preview URL: https://awesomelists.top/pr-preview/pr-10 This preview will be updated on each push to this PR. |
The PR preview was broken because: 1. publish_dir was set to ./build but rsbuild outputs to ./dist 2. assetPrefix was hardcoded to '/' so all JS/CSS assets 404'd under /pr-preview/pr-N/ 3. The homepage hack via package.json doesn't work with rsbuild Now rsbuild.config.mjs reads PUBLIC_URL env var for assetPrefix, and the workflow sets it to the correct preview subdirectory path. https://claude.ai/code/session_01GjM9XRPq6LAgmMfmD8nrAd
When the custom backend at api.awesomelists.top fails (currently
returning 403), the app now falls back to fetching READMEs directly
from the GitHub API (api.github.com/repos/{user}/{repo}/readme).
This has a 60 req/hr rate limit but keeps the app functional.
https://claude.ai/code/session_01GjM9XRPq6LAgmMfmD8nrAd
Color palette improvements: - Added CSS variables for subtle backgrounds, accent colors, and dark mode - Replaced all hardcoded grays (#888, #666, #444, #eee, #ccc) with variables - Dark mode uses warmer tones (#a5b4fc, #f9a8d4) instead of cold (#818cf8) - Added gradient accents (indigo→pink→green) for mobile hero sections Mobile-specific enhancements: - Header buttons get colored pill backgrounds (indigo burger, pink theme toggle) - List titles use gradient text (indigo→pink) for visual pop - "View on GitHub" and TOC buttons become rounded pills with gradient fills - "Go to Top" button uses solid primary color instead of bordered style - Search results get accent-colored active states on tap - Mobile menu header label uses accent pink for category distinction - Subtle gradient tints on sticky headers and hero sections - Added header bottom border for cleaner mobile separation https://claude.ai/code/session_01GjM9XRPq6LAgmMfmD8nrAd
Problems fixed: - TOC panel was rendered inside the sticky header, expanding it awkwardly - No visual grouping of buttons vs stats - Inline color styles on TOC items ignored dark mode - Close button was a bare icon with no header context Layout changes: - ReadmeInfo split into two rows: repo name + action buttons on top, star count + last update on bottom - TOC panel moved outside sticky bar, now a slide-in drawer from the right edge (fixed position, full height on mobile) - TOC items use CSS classes (TocLevel1/2/3) with proper indentation and font sizing instead of inline styles - Proper header with "Contents" title and close button - "Go To Top" shortened to "Top", uses solid primary pill style - "View On Github" shortened to "GitHub" for mobile space https://claude.ai/code/session_01GjM9XRPq6LAgmMfmD8nrAd
- Added margin-top: 12px to the sticky header for breathing room - Set border-radius to 0 across all CSS modules (inputs, buttons, cards, list items, dropdowns, TOC panel, scroll-to-top, etc.) - Kept border-radius: 50% only for circular elements (avatars, dots) https://claude.ai/code/session_01GjM9XRPq6LAgmMfmD8nrAd
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Co-Authored-By: Claude Opus 4.5 noreply@anthropic.com