add crate search page and crate info page.update CVE info page styling#1309
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Pull Request Overview
This PR adds comprehensive search functionality to the Rust ecosystem with new crate search and detail pages, while also updating the styling of CVE information pages.
- Implements a new search results page for crates with filtering and pagination
- Creates a detailed crate information page displaying dependencies, security advisories, and licensing details
- Adds functional search navigation from the main ecosystem page
- Updates CVE detail page styling for improved readability and consistency
Reviewed Changes
Copilot reviewed 4 out of 5 changed files in this pull request and generated 8 comments.
| File | Description |
|---|---|
pages/[org]/rust/rust-ecosystem/search/index.tsx |
New search results page with tabbed filtering and mock crate data display |
pages/[org]/rust/rust-ecosystem/search/crate-info/index.tsx |
New comprehensive crate detail page showing security, dependencies, and metadata |
pages/[org]/rust/rust-ecosystem/index.tsx |
Added search functionality to navigate to search results page |
pages/[org]/rust/rust-ecosystem/ecosystem-cve/cve-info/[cve-id]/index.tsx |
Updated CVE page styling with improved typography and layout |
| import { MagnifyingGlassIcon } from '@heroicons/react/24/outline' | ||
| import { useRouter } from 'next/router' | ||
|
|
||
| // 模拟搜索结果数据 - 移到组件外部 |
There was a problem hiding this comment.
The mock data contains identical duplicate entries that may not provide realistic testing scenarios. Consider varying the mock data entries to better simulate real search results with different packages, versions, and metadata.
| const mockSearchResults = [ | ||
| { | ||
| id: 1, | ||
| type: 'NuGet', |
There was a problem hiding this comment.
The mock data shows 'NuGet' package types in a Rust ecosystem search page. This appears inconsistent - Rust packages should typically be 'Cargo' or 'crates.io' packages.
| type: 'NuGet', | |
| type: 'Cargo', |
| export default function SearchResultsPage() { | ||
| const [search, setSearch] = useState('') | ||
| const [activeTab, setActiveTab] = useState('All') | ||
| const [searchResults, setSearchResults] = useState<any[]>([]) |
There was a problem hiding this comment.
Using 'any[]' type reduces type safety. Consider defining a proper interface for search results to improve type checking and code maintainability.
| const [searchResults, setSearchResults] = useState<any[]>([]) | |
| const [searchResults, setSearchResults] = useState<SearchResult[]>([]) |
| @@ -0,0 +1,915 @@ | |||
| // crate-info页面 | |||
| "use client"; | |||
There was a problem hiding this comment.
The 'use client' directive is not valid in Next.js pages router. This directive is only used in the app router architecture. Remove this line as it may cause unexpected behavior.
| "use client"; |
| import React, { useEffect, useState } from 'react'; | ||
| import { Link } from '@gitmono/ui/Link'; | ||
| import Head from 'next/head'; | ||
| import { useParams } from 'next/navigation'; |
There was a problem hiding this comment.
The 'useParams' hook from 'next/navigation' is for the app router. In pages router, use 'useRouter' from 'next/router' and access params via router.query instead.
| import { useParams } from 'next/navigation'; |
| <div className="flex space-x-8 mb-0"> | ||
| {[ | ||
| { id: 'overview', label: 'overview' }, | ||
| { id: 'dependencis', label: 'dependencis' }, |
There was a problem hiding this comment.
The label 'dependencis' should be 'dependencies' to correct the spelling error.
| { id: 'dependencis', label: 'dependencis' }, | |
| { id: 'dependencies', label: 'dependencies' }, |
| {[ | ||
| { id: 'overview', label: 'overview' }, | ||
| { id: 'dependencis', label: 'dependencis' }, | ||
| { id: 'depentes', label: 'depentes' }, |
There was a problem hiding this comment.
The label 'depentes' should be 'dependents' to correct the spelling error.
| { id: 'depentes', label: 'depentes' }, | |
| { id: 'dependents', label: 'dependents' }, |
|
|
||
|
|
||
| const CratePage = () => { | ||
| const params = useParams(); |
There was a problem hiding this comment.
Since useParams is from the app router and shouldn't be used in pages router, this will likely cause runtime errors. Use router.query instead to access dynamic route parameters.
| const params = useParams(); |
No description provided.