Skip to content

Commit d3ba65b

Browse files
martinwq997martinwq997
committed
1
1 parent 27d570b commit d3ba65b

File tree

8 files changed

+332
-12
lines changed

8 files changed

+332
-12
lines changed

‎app/homepage/[name]/[version]/dependencies/page.tsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import React from 'react';
2+
import Link from 'next/link';
3+
4+
const CratePage = () => {
5+
// Other code
6+
7+
return (
8+
<div>
9+
{/* Existing header and search */}
10+
<header className="bg-white shadow p-4">
11+
<div className="flex justify-between items-center">
12+
<div className="text-xl font-bold flex flex-col items-start space-y-1">
13+
<div className="flex items-center space-x-1">
14+
<span>open</span>
15+
<span className="text-green-500">/</span>
16+
<span>source</span>
17+
<span className="text-green-500">/</span>
18+
<span>insights</span>
19+
</div>
20+
<div className="flex items-center space-x-2 mt-15">
21+
<span>tokio</span>
22+
<div className="relative">
23+
<button className="flex items-center px-4 py-2 border border-gray-300 rounded hover:bg-gray-100">
24+
1.41.1
25+
<svg
26+
className="ml-2 w-4 h-4"
27+
viewBox="0 0 20 20"
28+
fill="currentColor"
29+
>
30+
<path
31+
fillRule="evenodd"
32+
d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z"
33+
clipRule="evenodd"
34+
/>
35+
</svg>
36+
</button>
37+
{/* 这里可以添加版本选择的下拉菜单 */}
38+
</div>
39+
</div>
40+
</div>
41+
<div className="flex items-center space-x-4">
42+
<input
43+
type="text"
44+
className="p-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500"
45+
placeholder="Search..."
46+
/>
47+
<button className="bg-blue-600 text-white px-4 py-2 rounded-r-md hover:bg-blue-700">
48+
Search
49+
</button>
50+
</div>
51+
</div>
52+
<nav className="mt-4">
53+
<ul className="flex space-x-4 text-gray-500 relative">
54+
<li className="cursor-pointer relative">
55+
<Link href="/homepage/search/ad">
56+
<div className="block py-2 relative z-10">Overview</div> </Link>
57+
<div className="absolute bottom-0 left-0 w-full h-1 bg-blue-500"></div>
58+
</li>
59+
<li className="cursor-pointer relative">
60+
<a href="#" className="block py-2 relative z-10">Dependencies</a>
61+
</li>
62+
<li className="cursor-pointer relative">
63+
<a href="#" className="block py-2 relative z-10">Dependents</a>
64+
</li>
65+
<li className="cursor-pointer relative">
66+
<a href="#" className="block py-2 relative z-10">Compare</a>
67+
</li>
68+
<li className="cursor-pointer relative">
69+
<a href="#" className="block py-2 relative z-10">Versions</a>
70+
</li>
71+
</ul>
72+
</nav>
73+
</header>
74+
75+
76+
77+
78+
</div>
79+
);
80+
};
81+
82+
export default CratePage;

‎app/homepage/[name]/[version]/page.tsx‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
import React from 'react';
2+
import Link from 'next/link';
3+
const CratePage = () => {
4+
// Other code
5+
6+
return (
7+
<div>
8+
{/* Existing header and search */}
9+
<header className="bg-white shadow p-4">
10+
<div className="flex justify-between items-center">
11+
<div className="text-xl font-bold flex flex-col items-start space-y-1">
12+
<div className="flex items-center space-x-1">
13+
<span>open</span>
14+
<span className="text-green-500">/</span>
15+
<span>source</span>
16+
<span className="text-green-500">/</span>
17+
<span>insights</span>
18+
</div>
19+
<div className="flex items-center space-x-2 mt-15">
20+
<span>tokio</span>
21+
<div className="relative">
22+
<button className="flex items-center px-4 py-2 border border-gray-300 rounded hover:bg-gray-100">
23+
1.41.1
24+
<svg
25+
className="ml-2 w-4 h-4"
26+
viewBox="0 0 20 20"
27+
fill="currentColor"
28+
>
29+
<path
30+
fillRule="evenodd"
31+
d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z"
32+
clipRule="evenodd"
33+
/>
34+
</svg>
35+
</button>
36+
{/* 这里可以添加版本选择的下拉菜单 */}
37+
</div>
38+
</div>
39+
</div>
40+
<div className="flex items-center space-x-4">
41+
<input
42+
type="text"
43+
className="p-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500"
44+
placeholder="Search..."
45+
/>
46+
<button className="bg-blue-600 text-white px-4 py-2 rounded-r-md hover:bg-blue-700">
47+
Search
48+
</button>
49+
</div>
50+
</div>
51+
52+
<nav className="mt-4">
53+
<ul className="flex space-x-4 text-gray-500 relative">
54+
<li className="cursor-pointer relative">
55+
<Link href="/homepage/search/ad">
56+
<div className="block py-2 relative z-10">Overview</div>
57+
</Link>
58+
<div className="absolute bottom-0 left-0 w-full h-1 bg-blue-500"></div>
59+
</li>
60+
<li className="cursor-pointer relative">
61+
<Link href="/homepage/search/ad/dependencies">
62+
<div className="block py-2 relative z-10">Dependencies</div>
63+
</Link>
64+
</li>
65+
<li className="cursor-pointer relative">
66+
<a href="#" className="block py-2 relative z-10">Dependents</a>
67+
</li>
68+
<li className="cursor-pointer relative">
69+
<a href="#" className="block py-2 relative z-10">Compare</a>
70+
</li>
71+
<li className="cursor-pointer relative">
72+
<a href="#" className="block py-2 relative z-10">Versions</a>
73+
</li>
74+
</ul>
75+
</nav>
76+
</header>
77+
78+
{/* cve */}
79+
<div className="container mx-auto my-8 grid grid-cols-1 lg:grid-cols-2 gap-6">
80+
<div className="space-y-6">
81+
{/* Security Advisories */}
82+
<div className="bg-white shadow rounded-lg p-4">
83+
<h2 className="text-lg font-bold mb-2">Security Advisories</h2>
84+
<p>No advisories detected.</p>
85+
</div>
86+
{/* Licenses */}
87+
<div className="bg-white shadow rounded-lg p-4">
88+
<h2 className="text-lg font-bold mb-2">Licenses</h2>
89+
<div className="mb-2">
90+
<span className="font-bold">LICENSES:</span> MIT
91+
</div>
92+
<div className="mb-2">
93+
<span className="font-bold">DEPENDENCY LICENSES:</span>
94+
<ul className="list-disc pl-6">
95+
<li>Apache-2.0 OR MIT (116)</li>
96+
<li>MIT (27)</li>
97+
<li>MIT OR Uniclicense (7)</li>
98+
{/* Add more dependency licenses */}
99+
</ul>
100+
</div>
101+
</div>
102+
{/* Dependencies */}
103+
<div className="bg-white shadow rounded-lg p-4">
104+
<h2 className="text-lg font-bold mb-2">Dependencies</h2>
105+
<div className="mb-2">
106+
<span className="font-bold">Direct:</span> 23
107+
</div>
108+
<div className="mb-2">
109+
<span className="font-bold">Indirect:</span> 139
110+
</div>
111+
<a href="#" className="text-blue-500 hover:underline">
112+
View all dependencies
113+
</a>
114+
</div>
115+
{/* Dependents */}
116+
<div className="bg-white shadow rounded-lg p-4">
117+
<h2 className="text-lg font-bold mb-2">Dependents</h2>
118+
<div className="mb-2">
119+
<span className="font-bold">Direct:</span> 23
120+
</div>
121+
<div className="mb-2">
122+
<span className="font-bold">Indirect:</span> 139
123+
</div>
124+
<a href="#" className="text-blue-500 hover:underline">
125+
View all dependencies
126+
</a>
127+
</div>
128+
</div>
129+
<div className="bg-white shadow rounded-lg p-4">
130+
<h2 className="text-lg font-bold mb-2">OpenSSF scorecard</h2>
131+
<p>The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.</p>
132+
<a href="#" className="text-blue-500 hover:underline">
133+
View information about checks and how to fix failures.
134+
</a>
135+
<div className="flex items-center justify-between mt-4">
136+
<div className="text-3xl font-bold">8.3/10</div>
137+
<div className="text-sm text-gray-500">Scorecard as of November 11, 2024.</div>
138+
</div>
139+
<div className="mt-4 space-y-2">
140+
<div className="flex justify-between">
141+
<span>Code-Review</span>
142+
<span>10/10</span>
143+
</div>
144+
<div className="flex justify-between">
145+
<span>Maintained</span>
146+
<span>10/10</span>
147+
</div>
148+
<div className="flex justify-between">
149+
<span>CI/Best-Practices</span>
150+
<span>0/10</span>
151+
</div>
152+
<div className="flex justify-between">
153+
<span>License</span>
154+
<span>10/10</span>
155+
</div>
156+
<div className="flex justify-between">
157+
<span>Dangerous-Workflow</span>
158+
<span>10/10</span>
159+
</div>
160+
<div className="flex justify-between">
161+
<span>Security-Policy</span>
162+
<span>10/10</span>
163+
</div>
164+
<div className="flex justify-between">
165+
<span>Token-Permissions</span>
166+
<span>10/10</span>
167+
</div>
168+
<div className="flex justify-between">
169+
<span>Binary-Artifacts</span>
170+
<span>10/10</span>
171+
</div>
172+
<div className="flex justify-between">
173+
<span>Pinned-Dependencies</span>
174+
<span>0/10</span>
175+
</div>
176+
</div>
177+
</div>
178+
</div>
179+
</div>
180+
);
181+
};
182+
183+
export default CratePage;

‎app/newpage/layout.tsx‎ renamed to ‎app/homepage/layout.tsx‎

File renamed without changes.

‎app/newpage/page.tsx‎ renamed to ‎app/homepage/page.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,18 +68,24 @@ const HomePage = () => {
6868
<div className="bg-gray-800 p-5 mb-6 rounded shadow-md">
6969
<h2 className="text-2xl font-semibold">New features in the deps.dev API</h2>
7070
<p className="mt-2">The deps.dev API, which provides free access to the data that powers this website, now has experimental batch and pull support, as well as a new version that comes with a stability guarantee and deprecation policy.</p>
71+
7172
<p className="mt-2">Learn more about the new features on our blog, or get started with the API documentation, and code examples.</p>
73+
7274
</div>
7375

7476
<div className="bg-gray-800 p-5 mb-6 rounded shadow-md">
7577
<h2 className="text-2xl font-semibold">Seeing the big picture can be difficult—but it shouldn&apos;t be</h2>
7678
<p className="mt-2">The Open Source Insights page for each package shows the full dependency graph and updates it every day. The information provided can help you make informed decisions about using, building, and maintaining your software.</p>
79+
7780
<p className="mt-2">With Open Source Insights, you can actually see the dependency graph for a package, then isolate the paths to a particular dependency. Or see whether a vulnerability in a dependency might affect your code. Or compare two versions of a package to see how the dependencies have changed in a new release.</p>
81+
7882
</div>
7983

8084
<div className="bg-gray-800 p-5 mb-6 rounded shadow-md">
8185
<h2 className="text-2xl font-semibold">How it works</h2>
86+
8287
<p className="mt-2">The service repeatedly examines sites such as github.com, npmjs.com, and pkg.go.dev to find up-to-date information about open source software packages. Using that information, it builds for each package the full dependency graph from scratch—not just from package lock files—connecting it to the packages it depends on and to those that depend on it. This transitive dependency graph allows problems in any package to be made visible to the owners and users of any software they affect.</p>
88+
8389
</div>
8490
</div>
8591
</div >

‎app/newpage/search/page.tsx‎ renamed to ‎app/homepage/search/page.tsx‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
"use client";
22

3+
import Link from 'next/link';
34
import { useState } from 'react';
45

56
export default function Home() {
@@ -57,17 +58,19 @@ export default function Home() {
5758

5859
{/*搜索数据展示 */}
5960
<div className="max-w-2xl ml-10 p-4">
60-
<div id="results" className="space-y-4">
61-
{results.map((item, index) => (
62-
<div
63-
key={index}
64-
className="p-4 rounded-md hover:bg-blue-100 transition"
65-
>
66-
<strong>{item.crate_name}</strong>
67-
<div>Crate {item.version}Published {item.date}</div>
68-
</div>
69-
))}
70-
</div>
61+
<Link href="/homepage/tokio/1.41.1">
62+
<div id="results" className="space-y-4">
63+
{results.map((item, index) => (
64+
<div
65+
key={index}
66+
className="p-4 rounded-md hover:bg-blue-100 transition"
67+
>
68+
<strong>{item.crate_name}</strong>
69+
<div>Crate {item.version}Published {item.date}</div>
70+
</div>
71+
))}
72+
</div>
73+
</Link>
7174
</div>
7275
</div>
7376
);

‎app/newpage/styles.css‎ renamed to ‎app/homepage/styles.css‎

File renamed without changes.

‎components/CratePage.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
//import { useParams } from 'react-router-dom';
2+
// import { useState, useEffect } from 'react';
3+
// import './CratePage.css';
4+
5+
// interface CrateData {
6+
// crate_name: string;
7+
// version: string;
8+
// date: string;
9+
// }
10+
11+
// const CratePage: React.FC = () => {
12+
// const { name, version } = useParams<{ name: string; version: string }>();
13+
// const [crateData, setCrateData] = useState<CrateData | null>(null);
14+
15+
// useEffect(() => {
16+
// const fetchCrateData = async () => {
17+
// try {
18+
// const response = await fetch(`/api/crates/${name}/${version}`);
19+
// const data = await response.json();
20+
// setCrateData(data);
21+
// } catch (error) {
22+
// console.error('Error fetching crate data:', error);
23+
// }
24+
// };
25+
26+
// fetchCrateData();
27+
// }, [name, version]);
28+
29+
// if (!crateData) {
30+
// return <div>Loading...</div>;
31+
// }
32+
33+
// return (
34+
// <div className="crate-page">
35+
// <div className="bg-white shadow p-4">
36+
// <h1>{crateData.crate_name}</h1>
37+
// <p>Version: {crateData.version}</p>
38+
// <p>Published: {crateData.date}</p>
39+
// {/* Additional crate details */}
40+
// </div>
41+
// </div>
42+
// );
43+
// };
44+
45+
// export default CratePage;

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"postcss": "8.4.49",
2424
"react": "18.3.1",
2525
"react-dom": "18.3.1",
26+
"react-router-dom": "^6.28.0",
2627
"tailwindcss": "3.4.15",
2728
"typescript": "5.6.3",
2829
"use-debounce": "^10.0.1",
@@ -40,4 +41,4 @@
4041
"engines": {
4142
"node": ">=20.12.0"
4243
}
43-
}
44+
}

0 commit comments

Comments
 (0)