docs(source): implement badges for deprecated and recently updated #1103
Conversation
…mponents; add functionality to retrieve git last modified dates for content files
|
Walkthrough페이지 렌더링에 UpdatedBadge와 RECENTLY_UPDATED_DAYS(14일) 기반 최근 업데이트 판정이 추가되고, Deprecated 판정이 컴포넌트 페이지로 제한되며 배지 결정 흐름과 null 안전성이 개선되었습니다. NotificationBadge가 새로 도입됩니다. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
docs/app/source.tsx (3)
68-73: 불필요한new Date()생성자 호출
lastModified는 이미Date타입(Map<string, Date>)이므로 Line 72의new Date(lastModified)는 불필요합니다.function isRecentlyUpdated(lastModified: Date | undefined): boolean { if (!lastModified) return false; const fourteenDaysAgo = new Date(); fourteenDaysAgo.setDate(fourteenDaysAgo.getDate() - RECENTLY_UPDATED_DAYS); - return new Date(lastModified) > fourteenDaysAgo; + return lastModified > fourteenDaysAgo; }
101-105:getGitLastModifiedDates()호출 위치 최적화 제안
getGitLastModifiedDates()가transformNode내부에서 매 페이지마다 호출됩니다. 함수 내부에 캐시가 있어 실제 git 명령어는 한 번만 실행되지만, 캐시 확인 오버헤드를 줄이려면transformPageTreeWithBadges함수 시작 시점에 한 번만 호출하는 것이 더 명확합니다.async function transformPageTreeWithBadges( tree: Root, sourceLoader: typeof baseSource, contentDir: string, ): Promise<Root> { try { + const gitDates = getGitLastModifiedDates(); + async function transformNode(node: Node): Promise<Node> { if (node.type === "page") { // ... - const gitDates = getGitLastModifiedDates(); const filePath = `docs/content/${contentDir}/${page.path}`;
120-130: 배지 렌더링 구조 불일치
DeprecatedBadge렌더링(Line 113)에서는node.name을<span>으로 감싸지만,UpdatedBadge렌더링(Line 125)에서는 감싸지 않습니다. 일관성을 위해 동일한 구조를 사용하는 것이 좋습니다.if (isUpdated) { return { ...node, name: ( <span className="flex items-center" key={node.$id}> - {node.name} + <span>{node.name}</span> <UpdatedBadge /> </span> ), }; }
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
docs/app/source.tsx(5 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/docs.mdc)
**/*.{ts,tsx}: Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
Structure files: exported component, subcomponents, helpers, static content, types
Favor named exports for components
Use TypeScript for all code; prefer interfaces over types
Avoid enums; use maps instead
Use the "function" keyword for pure functions
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements
Files:
docs/app/source.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/docs.mdc)
**/*.tsx: Use functional components with TypeScript interfaces
Use declarative JSX
Use Tailwind CSS for styling
Implement responsive design with Tailwind CSS; use a mobile-first approach
Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC)
Wrap client components in Suspense with fallback
Optimize images: use WebP format, include size data, implement lazy loading
Use 'nuqs' for URL search parameter state management
Limit 'use client': favor server components and Next.js SSR; use only for Web API access in small components; avoid for data fetching or state management
Files:
docs/app/source.tsx
docs/**
📄 CodeRabbit inference engine (.cursor/rules/overview.mdc)
The
docs/directory contains online documentation built on Next.js and Fumadocs
Files:
docs/app/source.tsx
🧬 Code graph analysis (1)
docs/app/source.tsx (2)
packages/react/src/components/NotificationBadge/NotificationBadge.tsx (1)
NotificationBadge(24-26)docs/components/rootage.ts (1)
getRootageMetadata(50-66)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Analyze (javascript)
- GitHub Check: Deploy seed-design-v3 Storybook Alpha
- GitHub Check: Deploy Seed Design V3 Docs
🔇 Additional comments (3)
docs/app/source.tsx (3)
62-64: LGTM!
UpdatedBadge컴포넌트가 간결하게 구현되었습니다.NotificationBadge를 적절히 활용하고 있습니다.
188-202: LGTM!각 페이지 트리 변환 함수가 적절한
contentDir값을 전달하고 있습니다. 이전 코멘트에서 언급한 경로 확인 후 정상 동작을 검증해 주세요.
43-45: 파일 경로 매핑 불일치 가능성Line 43에서
docs/content/로 시작하는 경로를 캐시에 저장하지만, Line 103에서는docs/content/${contentDir}/${page.path}형태로 경로를 구성합니다.
contentDir이"docs"인 경우docs/content/docs/...경로가 되는데, 실제 git log 출력의 경로와 일치하는지 확인이 필요합니다.#!/bin/bash # Description: Verify actual file paths in docs/content directory # List directory structure under docs/content fd -t d . docs/content --max-depth 2 2>/dev/null || fd -t d . content --max-depth 2 # Check git log output format for file paths git log --oneline --name-only -3 -- "docs/content" 2>/dev/null | head -20
Deploying seed-design-v3 with
|
| Latest commit: |
ad0d3d4
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://571a3145.seed-design.pages.dev |
| Branch Preview URL: | https://docs-updated-badge.seed-design.pages.dev |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
docs/app/source.tsx (1)
68-73: 불필요한new Date()생성자 호출
lastModified는 이미getGitLastModifiedDates()에서Date객체로 반환됩니다. Line 72의new Date(lastModified)는 불필요한 객체 생성입니다.function isRecentlyUpdated(lastModified: Date | undefined): boolean { if (!lastModified) return false; const fourteenDaysAgo = new Date(); fourteenDaysAgo.setDate(fourteenDaysAgo.getDate() - RECENTLY_UPDATED_DAYS); - return new Date(lastModified) > fourteenDaysAgo; + return lastModified > fourteenDaysAgo; }
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
docs/app/source.tsx(5 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/docs.mdc)
**/*.{ts,tsx}: Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
Structure files: exported component, subcomponents, helpers, static content, types
Favor named exports for components
Use TypeScript for all code; prefer interfaces over types
Avoid enums; use maps instead
Use the "function" keyword for pure functions
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements
Files:
docs/app/source.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/docs.mdc)
**/*.tsx: Use functional components with TypeScript interfaces
Use declarative JSX
Use Tailwind CSS for styling
Implement responsive design with Tailwind CSS; use a mobile-first approach
Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC)
Wrap client components in Suspense with fallback
Optimize images: use WebP format, include size data, implement lazy loading
Use 'nuqs' for URL search parameter state management
Limit 'use client': favor server components and Next.js SSR; use only for Web API access in small components; avoid for data fetching or state management
Files:
docs/app/source.tsx
docs/**
📄 CodeRabbit inference engine (.cursor/rules/overview.mdc)
The
docs/directory contains online documentation built on Next.js and Fumadocs
Files:
docs/app/source.tsx
🧬 Code graph analysis (1)
docs/app/source.tsx (2)
packages/react/src/components/NotificationBadge/NotificationBadge.tsx (1)
NotificationBadge(24-26)docs/components/rootage.ts (1)
getRootageMetadata(50-66)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Analyze (javascript)
- GitHub Check: Deploy Seed Design V3 Docs
- GitHub Check: Deploy seed-design-v3 Storybook Alpha
🔇 Additional comments (4)
docs/app/source.tsx (4)
1-11: LGTM!필요한 의존성들이 올바르게 import 되었습니다.
execSync를 캐싱과 함께 사용하는 것은 빌드 타임 컨텍스트에서 적절합니다.
12-52: 캐시 무효화 전략 검토 필요모듈 레벨 캐시(
gitDatesCache)는 빌드 타임에는 적절하지만, 개발 모드에서 Hot Module Replacement(HMR) 시 캐시가 무효화되지 않아 새로운 git 변경사항이 반영되지 않을 수 있습니다.개발 환경에서 문제가 되지 않는지 확인해 주세요.
188-202: LGTM!각 소스에 대해 올바른
contentDir값이 전달되고 있습니다. 비동기 함수를 통한 lazy loading 패턴도 적절합니다.
101-105: 파일 경로 구성 검증 필요
page.path의 형식에 따라 경로가 올바르게 구성되는지 확인이 필요합니다. 만약page.path가 슬래시로 시작하거나 파일 확장자를 포함하지 않는다면 git 캐시에서 매칭이 실패할 수 있습니다.다음 스크립트로 실제 파일 경로 형식을 확인해 주세요:
#!/bin/bash # Description: Check the actual file structure in docs/content to verify path format # List files in each content directory to understand the path structure echo "=== docs/content/docs ===" fd -t f -e mdx -e md . docs/content/docs 2>/dev/null | head -10 echo "=== docs/content/react ===" fd -t f -e mdx -e md . docs/content/react 2>/dev/null | head -10 # Check git log output format to verify file paths match echo "=== Git log sample output ===" git log --format="%H %aI" --name-only --diff-filter=ACMR -n 5 -- "docs/content" 2>/dev/null | head -20
… for last modified dates; remove git date caching functionality
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
docs/app/source.tsx (3)
24-29: 불필요한 Date 생성자 호출을 제거할 수 있습니다.Line 28에서
new Date(lastModified)는lastModified가 이미 Date 객체인 경우 불필요합니다. fumadocs의lastModified가 Date 타입을 반환한다면 직접 비교할 수 있습니다.function isRecentlyUpdated(lastModified: Date | undefined): boolean { if (!lastModified) return false; const fourteenDaysAgo = new Date(); fourteenDaysAgo.setDate(fourteenDaysAgo.getDate() - RECENTLY_UPDATED_DAYS); - return new Date(lastModified) > fourteenDaysAgo; + return lastModified > fourteenDaysAgo; }
18-20: Tailwind 클래스를 사용하여 인라인 스타일 제거
style={{ transform: "translateX(6px)" }}을 Tailwind 유틸리티 클래스로 대체하세요. 코딩 가이드라인에서 *.tsx 파일은 Tailwind CSS를 사용하도록 권장합니다. NotificationBadge 컴포넌트는 className prop을 지원합니다.const UpdatedBadge = () => { - return <NotificationBadge size="small" style={{ transform: "translateX(6px)" }} />; + return <NotificationBadge size="small" className="translate-x-1.5" />; };
56-84: 배지 렌더링 로직이 올바르게 구현되었습니다.deprecated와 updated 상태를 명확히 분리하고, 하나의 배지만 표시되도록 한 로직이 정확합니다. React key로
node.$id를 사용한 것도 적절합니다.Line 58의
page.data.load()는 모든 페이지 노드에 대해 호출되지만, 이는 빌드/렌더 시간에 실행되는 트리 변환 작업이며Promise.all을 통해 병렬 처리되므로 실시간 성능에는 영향을 주지 않습니다. 문서 사이트 규모가 급격히 증가할 경우 빌드 시간 모니터링을 고려할 수 있습니다.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
docs/app/source.tsx(4 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/docs.mdc)
**/*.{ts,tsx}: Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
Structure files: exported component, subcomponents, helpers, static content, types
Favor named exports for components
Use TypeScript for all code; prefer interfaces over types
Avoid enums; use maps instead
Use the "function" keyword for pure functions
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements
Files:
docs/app/source.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/docs.mdc)
**/*.tsx: Use functional components with TypeScript interfaces
Use declarative JSX
Use Tailwind CSS for styling
Implement responsive design with Tailwind CSS; use a mobile-first approach
Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC)
Wrap client components in Suspense with fallback
Optimize images: use WebP format, include size data, implement lazy loading
Use 'nuqs' for URL search parameter state management
Limit 'use client': favor server components and Next.js SSR; use only for Web API access in small components; avoid for data fetching or state management
Files:
docs/app/source.tsx
docs/**
📄 CodeRabbit inference engine (.cursor/rules/overview.mdc)
The
docs/directory contains online documentation built on Next.js and Fumadocs
Files:
docs/app/source.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Analyze (javascript)
- GitHub Check: Deploy Seed Design V3 Docs
- GitHub Check: Deploy seed-design-v3 Storybook Alpha
🔇 Additional comments (1)
docs/app/source.tsx (1)
45-54: 좋은 null 안전성과 최적화 로직입니다.Line 45의 early return으로 null 안전성을 확보했으며, Line 52에서 frontmatter에 deprecated가 없을 때만 metadata를 가져오는 것은 불필요한 API 호출을 방지하는 좋은 최적화입니다. 컴포넌트 페이지에만 deprecated 체크를 제한한 것도 요구사항에 부합합니다.
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.