feat: redesign homepage with side-by-side hero and animated lint demo#1018
feat: redesign homepage with side-by-side hero and animated lint demo#1018fansenze wants to merge 1 commit into
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request replaces the shared hero component with a custom implementation and introduces an interactive linting demo featuring a parallax starfield background. The new LintDemo component provides a simulated rslint execution with animated scanning, CLI-style logging, and interactive tooltips. Feedback highlights several performance optimization opportunities, including debouncing the starfield resize handler, utilizing a MutationObserver for theme detection instead of polling within the render loop, and improving the efficiency of the HTML escaping utility. Additionally, it is recommended to remove legacy commented-out code to maintain project cleanliness.
| import { useI18n, useNavigate } from '@rspress/core/runtime'; | ||
| import { Hero as BaseHero } from '@rstack-dev/doc-ui/hero'; | ||
| // import { Hero as BaseHero } from '@rstack-dev/doc-ui/hero'; |
There was a problem hiding this comment.
This commented-out import is no longer needed and should be removed to keep the file clean.
| import { useI18n, useNavigate } from '@rspress/core/runtime'; | |
| import { Hero as BaseHero } from '@rstack-dev/doc-ui/hero'; | |
| // import { Hero as BaseHero } from '@rstack-dev/doc-ui/hero'; | |
| import { useI18n, useNavigate } from '@rspress/core/runtime'; |
| /* Previous shared-component implementation (kept for reference): | ||
| * | ||
| * import { Hero as BaseHero } from '@rstack-dev/doc-ui/hero'; | ||
| * | ||
| * <BaseHero | ||
| * showStars={false} | ||
| * showOvalBg={false} | ||
| * onClickGetStarted={onClickGetStarted} | ||
| * title="Rslint" | ||
| * subTitle={t('subtitle')} | ||
| * description={t('slogan')} | ||
| * logoUrl={LOGO_URL} | ||
| * getStartedButtonText={t('quickStart')} | ||
| * githubURL={GITHUB_URL} | ||
| * /> | ||
| */ |
There was a problem hiding this comment.
This large block of commented-out code should be removed. Keeping dead code for reference makes the component harder to maintain; previous implementations can always be retrieved from the version control history if needed.
| const onResize = () => { | ||
| resize(); | ||
| seed(); | ||
| }; | ||
| window.addEventListener('resize', onResize); |
There was a problem hiding this comment.
The onResize handler calls seed(), which performs significant allocations and computations (re-seeding hundreds of stars). During rapid window resizing, this can lead to performance degradation and high GC pressure. It is recommended to debounce this handler.
| const isLight = () => !document.documentElement.classList.contains('dark'); | ||
|
|
||
| let raf = 0; | ||
| let prev = performance.now(); | ||
| function render(now: number) { | ||
| const dt = Math.min(0.08, (now - prev) / 1000); | ||
| prev = now; | ||
|
|
||
| const light = isLight(); |
There was a problem hiding this comment.
Performance/Discrepancy: The docstring at line 15 mentions using a MutationObserver to track theme changes, but the implementation here polls document.documentElement.classList on every frame within the render loop. This is inefficient. Implementing a MutationObserver to update a cached light variable would be more performant and align with the stated intent.
| function esc(s: string) { | ||
| return s.replace( | ||
| /[&<>]/g, | ||
| (c) => | ||
| ( | ||
| ({ '&': '&', '<': '<', '>': '>' }) as Record< | ||
| string, | ||
| string | ||
| > | ||
| )[c], | ||
| ); | ||
| } |
There was a problem hiding this comment.
The esc function creates a new object literal on every character match. For better efficiency, define the escape map once outside the function.
const ESC_MAP: Record<string, string> = { '&': '&', '<': '<', '>': '>' };
function esc(s: string) {
return s.replace(/[&<>]/g, (c) => ESC_MAP[c]);
}
Deploying rslint with
|
| Latest commit: |
8636aa0
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://f9949afb.rslint.pages.dev |
| Branch Preview URL: | https://feat-website-lint-demo-20260.rslint.pages.dev |
1 participant
Summary
Redesign the website homepage hero into a side-by-side layout with a live, animated "lint scan" demo.
<Hero>— faithfully replicates its gradient title, button styles, GitHub link and light/dark colours, but scaled down and left-aligned to sit beside the demo (decorative stars/oval off, since we have our own background).LintDemopane: a scanner sweeps a TS snippet, the console types$ rslint ./demo.ts, two diagnostics render in rslint's real default-printer format with VS Code hover tooltips + a working Quick Fix → re-lint, and an animated frame border draws clockwise from the top-left in sync with the run (a shine dot leads the fill, then loops).Starfieldparallax canvas background.containerStyle, so their gutters align with the Rstack section at every window size; the row stacks below 1024px.Related Links
N/A
Checklist