Skip to content

Commit 730eee9

Browse files
martinwq997martinwq997
committed
new home page
1 parent 3465c93 commit 730eee9

File tree

12 files changed

+264
-71
lines changed

12 files changed

+264
-71
lines changed

‎app/newpage/layout.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import '@/app/ui/global.css';
2+
import { inter } from '@/app/ui/fonts';
3+
4+
export const metadata = {
5+
title: 'cratespro',
6+
description: 'Generated by Next.js',
7+
}
8+
9+
export default function RootLayout({
10+
children,
11+
}: {
12+
children: React.ReactNode
13+
}) {
14+
return (
15+
<html lang="en">
16+
<body>{children}</body>
17+
</html>
18+
)
19+
}

‎app/newpage/page.tsx‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import React from 'react';
2+
import '@/app/ui/global.css';
3+
4+
5+
const HomePage = () => {
6+
return (
7+
//紫色渐变
8+
// <div className="min-h-screen bg-gray-900 text-white">
9+
// {/* 头部和搜索部分 */}
10+
// <div className="bg-gradient-to-b from-[#4D004D] to-white">
11+
// <header className="p-4 flex justify-between items-center">
12+
// <div className="text-2xl font-bold">open/source/insights</div>
13+
// <nav>
14+
// <ul className="flex space-x-5">
15+
// <li><a href="#" className="hover:underline">About</a></li>
16+
// <li><a href="#" className="hover:underline">Documentation</a></li>
17+
// <li><a href="#" className="hover:underline">Blog</a></li>
18+
// </ul>
19+
// </nav>
20+
// </header>
21+
// <div className="flex flex-col items-center justify-center h-80">
22+
// <h1 className="text-4xl font-bold mb-4">Understand your dependencies</h1>
23+
// <p className="text-center mb-4">Your software and your users rely not only on the code you write, but also on the code your code depends on, the code that code depends on, and so on.</p>
24+
// <div className="flex items-center mb-4">
25+
// <input
26+
// type="text"
27+
// placeholder="Search for open source packages, advisories and projects"
28+
// className="p-2 border-none rounded-md text-gray-800 w-2/3 max-w-xl"
29+
// />
30+
// <button className="bg-teal-600 text-white rounded-md p-2 ml-2 hover:bg-teal-700">Search</button>
31+
// </div>
32+
// </div>
33+
// </div>
34+
35+
36+
//绿色渐变
37+
< div className="min-h-screen bg-gray-900 text-white" >
38+
<header className="bg-teal-500 p-4 flex justify-between items-center">
39+
<div className="text-2xl font-bold">open/source/insights</div>
40+
<nav>
41+
<ul className="flex space-x-5">
42+
<li><a href="#" className="hover:underline">About</a></li>
43+
<li><a href="#" className="hover:underline">Documentation</a></li>
44+
<li><a href="#" className="hover:underline">Blog</a></li>
45+
</ul>
46+
</nav>
47+
</header>
48+
{/* 搜索部分 */}
49+
<div className="flex flex-col items-center justify-center h-80 bg-gradient-to-b from-teal-500 to-gray-800">
50+
<h1 className="text-4xl font-bold mb-4 ">Understand your dependencies</h1>
51+
<p className="text-center mb-4">Your software and your users rely not only on the code you write, but also on the code your code depends on, the code that code depends on, and so on.</p>
52+
<div className="flex items-center mb-4">
53+
<input
54+
type="text"
55+
placeholder="Search for open source crates"
56+
className="p-2 border-none rounded-md text-gray-800 w-80 max-w-2xl"
57+
/>
58+
<button className="bg-teal-600 text-white rounded-md p-2 ml-2 hover:bg-teal-700">Search</button>
59+
</div>
60+
</div>
61+
62+
63+
{/* 分割线部分 */}
64+
<div className="border-t-4 border-green-500 h-1/4"></div>
65+
66+
{/* 一些介绍 */}
67+
<div className="container mx-auto p-10">
68+
<div className="bg-gray-800 p-5 mb-6 rounded shadow-md">
69+
<h2 className="text-2xl font-semibold">New features in the deps.dev API</h2>
70+
<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+
<p className="mt-2">Learn more about the new features on our blog, or get started with the API documentation, and code examples.</p>
72+
</div>
73+
74+
<div className="bg-gray-800 p-5 mb-6 rounded shadow-md">
75+
<h2 className="text-2xl font-semibold">Seeing the big picture can be difficult—but it shouldn't be</h2>
76+
<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>
77+
<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>
78+
</div>
79+
80+
<div className="bg-gray-800 p-5 mb-6 rounded shadow-md">
81+
<h2 className="text-2xl font-semibold">How it works</h2>
82+
<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>
83+
</div>
84+
</div>
85+
</div >
86+
);
87+
}
88+
89+
export default HomePage;

‎app/newpage/search/page.tsx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
"use client";
2+
3+
import { useState } from 'react';
4+
5+
export default function Home() {
6+
const [query, setQuery] = useState('');
7+
// 使用假数据进行测试
8+
const [results, setResults] = useState([
9+
{ crate_name: "tokio", version: "1.41.1", date: "2023-01-01" },
10+
{ crate_name: "tokio", version: "0.1.2", date: "2023-02-01" },
11+
]);
12+
13+
const search = async () => {
14+
// 待替换api
15+
const apiUrl = 'api';
16+
17+
try {
18+
const response = await fetch(apiUrl, {
19+
method: 'POST',
20+
headers: {
21+
'Content-Type': 'application/json',
22+
},
23+
body: JSON.stringify({ query }),
24+
});
25+
26+
const data = await response.json();
27+
setResults(data.results);
28+
} catch (error) {
29+
console.error('Error fetching data:', error);
30+
}
31+
};
32+
33+
return (
34+
<div className="min-h-screen bg-gray-100">
35+
<header className="bg-white shadow p-4">
36+
<div className="flex justify-between items-center">
37+
<div className="text-xl font-bold flex items-center space-x-1">
38+
<span>open</span>
39+
<span className="text-green-500">/</span>
40+
<span>source</span>
41+
<span className="text-green-500">/</span>
42+
<span>insights</span>
43+
</div>
44+
<div className="flex items-center space-x-2">
45+
<input
46+
type="text"
47+
className="p-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500"
48+
placeholder="Search..."
49+
/>
50+
<button className="bg-blue-600 text-white px-4 py-2 rounded-r-md hover:bg-blue-700">
51+
Search
52+
</button>
53+
</div>
54+
</div>
55+
</header>
56+
57+
<div className="max-w-2xl ml-10 p-4">
58+
<div id="results" className="space-y-4">
59+
{results.map((item, index) => (
60+
<div
61+
key={index}
62+
className="p-4 rounded-md hover:bg-blue-100 transition"
63+
>
64+
<strong>{item.crate_name}</strong>
65+
<div>Crate {item.version} Published {item.date}</div>
66+
</div>
67+
))}
68+
</div>
69+
</div>
70+
</div>
71+
);
72+
}

‎app/newpage/styles.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.height-1-3 {
2+
height: 33.3333vh;
3+
/* 使用视口高度的 1/3 */
4+
}

‎app/ui/acme-logo.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,29 @@ import { lusitana } from '@/app/ui/fonts';
44

55
export default function AcmeLogo() {
66
return (
7+
78
<div
89
className={`${lusitana.className} flex flex-row items-center leading-none text-white`}
10+
// style={{
11+
// backgroundImage: 'url(/School-flag.jpg)', // 替换为您的图片路径
12+
// //backgroundSize: 'cover', // 背景图片覆盖整个容器
13+
// backgroundPosition: 'center', // 背景图片居中对齐
14+
// backgroundSize: '100% 100%',
15+
// backgroundRepeat: 'no-repeat',
16+
// }}
917
>
18+
{/* <div
19+
className="absolute top-0 left-0 w-full h-full bg-cover bg-center "
20+
style={{
21+
backgroundImage: 'url(/School-flag.jpg)', // 替换为您的实际图片名
22+
}}
23+
/> */}
1024
<FontAwesomeIcon icon={faRust} className="h-12 w-12 mr-2" />
1125
<p className="text-[22px]">Crates Pro</p>
26+
27+
1228
</div>
1329
);
1430
}
31+
32+

‎app/ui/global.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,4 @@ input[type='number']::-webkit-inner-spin-button {
1515
input[type='number']::-webkit-outer-spin-button {
1616
-webkit-appearance: none;
1717
margin: 0;
18-
}
18+
}

‎app/ui/programs/nav-links.tsx‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ const NavLinks: React.FC = () => {
7575
return (
7676
<>
7777
{contextHolder}
78+
{/* {Home按钮} */}
7879
{links.map((link) => {
7980
const LinkIcon = link.icon;
8081
return (
@@ -94,16 +95,6 @@ const NavLinks: React.FC = () => {
9495
);
9596
})}
9697

97-
{/* 提交按钮 */}
98-
{/* <button
99-
onClick={() => setModalOpen(true)}
100-
className="mt-4 flex h-[48px] w-full items-center justify-center rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600"
101-
>
102-
Submit
103-
</button> */}
104-
105-
106-
10798
{/* submit按钮 */}
10899
<button
109100
onClick={() => setModalOpen(true)} //点击打开弹窗

‎layout.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import '@/app/ui/global.css';
2-
import { inter } from '@/app/ui/fonts';
3-
import React from 'react';
4-
import { message } from 'antd';
1+
// import '@/app/ui/global.css';
2+
// import { inter } from '@/app/ui/fonts';
3+
// import React from 'react';
4+
// import { message } from 'antd';
55

6-
export default function RootLayout({
7-
children,
8-
}: {
9-
children: React.ReactNode;
10-
}) {
11-
return (
12-
<html lang="en">
13-
<body className={`${inter.className} antialiased`}>{children}</body>
14-
</html >
15-
);
16-
}
6+
// export default function RootLayout({
7+
// children,
8+
// }: {
9+
// children: React.ReactNode;
10+
// }) {
11+
// return (
12+
// <html lang="en">
13+
// <body className={`${inter.className} antialiased`}>{children}</body>
14+
// </html >
15+
// );
16+
// }

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
22
"private": true,
33
"scripts": {
4-
"build": "next build",
54
"dev": "next dev",
65
"start": "next start",
7-
"lint": "next lint"
6+
"lint": "next lint",
7+
"build": "next build"
88
},
99
"dependencies": {
1010
"@fortawesome/free-brands-svg-icons": "^6.6.0",
@@ -23,7 +23,7 @@
2323
"postcss": "8.4.38",
2424
"react": "19.0.0-rc-f38c22b244-20240704",
2525
"react-dom": "19.0.0-rc-f38c22b244-20240704",
26-
"tailwindcss": "3.4.4",
26+
"tailwindcss": "^3.4.4",
2727
"typescript": "5.5.2",
2828
"use-debounce": "^10.0.1",
2929
"zod": "^3.23.8"
@@ -39,4 +39,4 @@
3939
"engines": {
4040
"node": ">=20.12.0"
4141
}
42-
}
42+
}

0 commit comments

Comments
 (0)