Skip to content

Feature/homepage #50

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 10 commits into from
Closed

Feature/homepage #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
27d570b
new homepage
martinwq997 Nov 20, 2024
9f9f73f
with gpg
martinwq997 Nov 20, 2024
078f718
with gpg
martinwq997 Nov 20, 2024
4b245ad
Merge
martinwq997 Nov 20, 2024
fe71383
111
martinwq997 Nov 20, 2024
b4805ff
new gpg gpg
martinwq997 Nov 20, 2024
db8a0b8
Merge branch 'feature/homepage' of https://github.com/martinwq997/cra…
martinwq997 Nov 20, 2024
d1cdfdb
a
martinwq997 Nov 20, 2024
d97368f
crate overview page
martinwq997 Nov 21, 2024
54b56dd
static page
martinwq997 Nov 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions app/api/fetchCrate/route.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
const fetchCrateData = async (cratename: string, version: string) => {
// 这里模拟一个API请求，实际应替换为真实的API调用
const response = await fetch(`https://example-api.com/crates/${cratename}/${version}`);
return await response.json();
};

export default fetchCrateData;
82 changes: 82 additions & 0 deletions app/homepage/[name]/[version]/dependencies/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import React from 'react';
import Link from 'next/link';

const CratePage = () => {
// Other code

return (
<div>
{/* Existing header and search */}
<header className="bg-white shadow p-4">
<div className="flex justify-between items-center">
<div className="text-xl font-bold flex flex-col items-start space-y-1">
<div className="flex items-center space-x-1">
<span>open</span>
<span className="text-green-500">/</span>
<span>source</span>
<span className="text-green-500">/</span>
<span>insights</span>
</div>
<div className="flex items-center space-x-2 mt-15">
<span>tokio</span>
<div className="relative">
<button className="flex items-center px-4 py-2 border border-gray-300 rounded hover:bg-gray-100">
1.41.1
<svg
className="ml-2 w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z"
clipRule="evenodd"
/>
</svg>
</button>
{/* 这里可以添加版本选择的下拉菜单 */}
</div>
</div>
</div>
<div className="flex items-center space-x-4">
<input
type="text"
className="p-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Search..."
/>
<button className="bg-blue-600 text-white px-4 py-2 rounded-r-md hover:bg-blue-700">
Search
</button>
</div>
</div>
<nav className="mt-4">
<ul className="flex space-x-4 text-gray-500 relative">
<li className="cursor-pointer relative">
<Link href="/homepage/search/ad">
<div className="block py-2 relative z-10">Overview</div> </Link>
<div className="absolute bottom-0 left-0 w-full h-1 bg-blue-500"></div>
</li>
<li className="cursor-pointer relative">
<a href="#" className="block py-2 relative z-10">Dependencies</a>
</li>
<li className="cursor-pointer relative">
<a href="#" className="block py-2 relative z-10">Dependents</a>
</li>
<li className="cursor-pointer relative">
<a href="#" className="block py-2 relative z-10">Compare</a>
</li>
<li className="cursor-pointer relative">
<a href="#" className="block py-2 relative z-10">Versions</a>
</li>
</ul>
</nav>
</header>




</div>
);
};

export default CratePage;
183 changes: 183 additions & 0 deletions app/homepage/[name]/[version]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
import React from 'react';
import Link from 'next/link';
const CratePage = () => {
// Other code

return (
<div>
{/* Existing header and search */}
<header className="bg-white shadow p-4">
<div className="flex justify-between items-center">
<div className="text-xl font-bold flex flex-col items-start space-y-1">
<div className="flex items-center space-x-1">
<span>open</span>
<span className="text-green-500">/</span>
<span>source</span>
<span className="text-green-500">/</span>
<span>insights</span>
</div>
<div className="flex items-center space-x-2 mt-15">
<span>tokio</span>
<div className="relative">
<button className="flex items-center px-4 py-2 border border-gray-300 rounded hover:bg-gray-100">
1.41.1
<svg
className="ml-2 w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z"
clipRule="evenodd"
/>
</svg>
</button>
{/* 这里可以添加版本选择的下拉菜单 */}
</div>
</div>
</div>
<div className="flex items-center space-x-4">
<input
type="text"
className="p-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Search..."
/>
<button className="bg-blue-600 text-white px-4 py-2 rounded-r-md hover:bg-blue-700">
Search
</button>
</div>
</div>

<nav className="mt-4">
<ul className="flex space-x-4 text-gray-500 relative">
<li className="cursor-pointer relative">
<Link href="/homepage/search/ad">
<div className="block py-2 relative z-10">Overview</div>
</Link>
<div className="absolute bottom-0 left-0 w-full h-1 bg-blue-500"></div>
</li>
<li className="cursor-pointer relative">
<Link href="/homepage/search/ad/dependencies">
<div className="block py-2 relative z-10">Dependencies</div>
</Link>
</li>
<li className="cursor-pointer relative">
<a href="#" className="block py-2 relative z-10">Dependents</a>
</li>
<li className="cursor-pointer relative">
<a href="#" className="block py-2 relative z-10">Compare</a>
</li>
<li className="cursor-pointer relative">
<a href="#" className="block py-2 relative z-10">Versions</a>
</li>
</ul>
</nav>
</header>

{/* cve */}
<div className="container mx-auto my-8 grid grid-cols-1 lg:grid-cols-2 gap-6">
<div className="space-y-6">
{/* Security Advisories */}
<div className="bg-white shadow rounded-lg p-4">
<h2 className="text-lg font-bold mb-2">Security Advisories</h2>
<p>No advisories detected.</p>
</div>
{/* Licenses */}
<div className="bg-white shadow rounded-lg p-4">
<h2 className="text-lg font-bold mb-2">Licenses</h2>
<div className="mb-2">
<span className="font-bold">LICENSES:</span> MIT
</div>
<div className="mb-2">
<span className="font-bold">DEPENDENCY LICENSES:</span>
<ul className="list-disc pl-6">
<li>Apache-2.0 OR MIT (116)</li>
<li>MIT (27)</li>
<li>MIT OR Uniclicense (7)</li>
{/* Add more dependency licenses */}
</ul>
</div>
</div>
{/* Dependencies */}
<div className="bg-white shadow rounded-lg p-4">
<h2 className="text-lg font-bold mb-2">Dependencies</h2>
<div className="mb-2">
<span className="font-bold">Direct:</span> 23
</div>
<div className="mb-2">
<span className="font-bold">Indirect:</span> 139
</div>
<a href="#" className="text-blue-500 hover:underline">
View all dependencies
</a>
</div>
{/* Dependents */}
<div className="bg-white shadow rounded-lg p-4">
<h2 className="text-lg font-bold mb-2">Dependents</h2>
<div className="mb-2">
<span className="font-bold">Direct:</span> 23
</div>
<div className="mb-2">
<span className="font-bold">Indirect:</span> 139
</div>
<a href="#" className="text-blue-500 hover:underline">
View all dependencies
</a>
</div>
</div>
<div className="bg-white shadow rounded-lg p-4">
<h2 className="text-lg font-bold mb-2">OpenSSF scorecard</h2>
<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>
<a href="#" className="text-blue-500 hover:underline">
View information about checks and how to fix failures.
</a>
<div className="flex items-center justify-between mt-4">
<div className="text-3xl font-bold">8.3/10</div>
<div className="text-sm text-gray-500">Scorecard as of November 11, 2024.</div>
</div>
<div className="mt-4 space-y-2">
<div className="flex justify-between">
<span>Code-Review</span>
<span>10/10</span>
</div>
<div className="flex justify-between">
<span>Maintained</span>
<span>10/10</span>
</div>
<div className="flex justify-between">
<span>CI/Best-Practices</span>
<span>0/10</span>
</div>
<div className="flex justify-between">
<span>License</span>
<span>10/10</span>
</div>
<div className="flex justify-between">
<span>Dangerous-Workflow</span>
<span>10/10</span>
</div>
<div className="flex justify-between">
<span>Security-Policy</span>
<span>10/10</span>
</div>
<div className="flex justify-between">
<span>Token-Permissions</span>
<span>10/10</span>
</div>
<div className="flex justify-between">
<span>Binary-Artifacts</span>
<span>10/10</span>
</div>
<div className="flex justify-between">
<span>Pinned-Dependencies</span>
<span>0/10</span>
</div>
</div>
</div>
</div>
</div>
);
};

export default CratePage;
Empty file added app/homepage/cratepage/page.tsx
View file
Open in desktop
Empty file.
19 changes: 19 additions & 0 deletions app/homepage/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import '@/app/ui/global.css';


export const metadata = {
title: 'cratespro',
description: 'Generated by Next.js',
}

export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
95 changes: 95 additions & 0 deletions app/homepage/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import React from 'react';
import '@/app/ui/global.css';


const HomePage = () => {
return (
//紫色渐变
// <div className="min-h-screen bg-gray-900 text-white">
// {/* 头部和搜索部分 */}
// <div className="bg-gradient-to-b from-[#4D004D] to-white">
// <header className="p-4 flex justify-between items-center">
// <div className="text-2xl font-bold">open/source/insights</div>
// <nav>
// <ul className="flex space-x-5">
// <li><a href="#" className="hover:underline">About</a></li>
// <li><a href="#" className="hover:underline">Documentation</a></li>
// <li><a href="#" className="hover:underline">Blog</a></li>
// </ul>
// </nav>
// </header>
// <div className="flex flex-col items-center justify-center h-80">
// <h1 className="text-4xl font-bold mb-4">Understand your dependencies</h1>
// <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>
// <div className="flex items-center mb-4">
// <input
// type="text"
// placeholder="Search for open source packages, advisories and projects"
// className="p-2 border-none rounded-md text-gray-800 w-2/3 max-w-xl"
// />
// <button className="bg-teal-600 text-white rounded-md p-2 ml-2 hover:bg-teal-700">Search</button>
// </div>
// </div>
// </div>


//绿色渐变
< div className="min-h-screen bg-gray-900 text-white" >
<header className="bg-teal-500 p-4 flex justify-between items-center">
<div className="text-2xl font-bold">open/source/insights</div>
<nav>
<ul className="flex space-x-5">
<li><a href="#" className="hover:underline">About</a></li>
<li><a href="#" className="hover:underline">Documentation</a></li>
<li><a href="#" className="hover:underline">Blog</a></li>
</ul>
</nav>
</header>
{/* 搜索部分 */}
<div className="flex flex-col items-center justify-center h-80 bg-gradient-to-b from-teal-500 to-gray-800">
<h1 className="text-4xl font-bold mb-4 ">Understand your dependencies</h1>
<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>
<div className="flex items-center mb-4">
<input
type="text"
placeholder="Search for open source crates"
className="p-2 border-none rounded-md text-gray-800 w-80 max-w-2xl"
/>
<button className="bg-teal-600 text-white rounded-md p-2 ml-2 hover:bg-teal-700">Search</button>
</div>
</div>


{/* 分割线部分 */}
<div className="border-t-4 border-green-500 h-1/4"></div>

{/* 一些介绍 */}
<div className="container mx-auto p-10">
<div className="bg-gray-800 p-5 mb-6 rounded shadow-md">
<h2 className="text-2xl font-semibold">New features in the deps.dev API</h2>
<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>

<p className="mt-2">Learn more about the new features on our blog, or get started with the API documentation, and code examples.</p>

</div>

<div className="bg-gray-800 p-5 mb-6 rounded shadow-md">
<h2 className="text-2xl font-semibold">Seeing the big picture can be difficult—but it shouldn&apos;t be</h2>
<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>

<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>

</div>

<div className="bg-gray-800 p-5 mb-6 rounded shadow-md">
<h2 className="text-2xl font-semibold">How it works</h2>

<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>

</div>
</div>
</div >
);
}

export default HomePage;
Loading
Loading