Skip to content

Commit 771d06e

Browse files
committed
add homepage
1 parent 5d10f1e commit 771d06e

File tree

13 files changed

+238
-15
lines changed

13 files changed

+238
-15
lines changed

app/(home)/images.tsx

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
"use client";
2+
3+
import Image from 'next/image';
4+
import { useCallback, useEffect, useState } from 'react';
5+
6+
export function ImageCarousel() {
7+
const images = [
8+
{ src: '/images-hydro/pict1.png', alt: 'Hydro Screenshot 1' },
9+
{ src: '/images-hydro/pict2.png', alt: 'Hydro Screenshot 2' },
10+
{ src: '/images-hydro/pict3.png', alt: 'Hydro Screenshot 3' },
11+
];
12+
13+
const [currentIndex, setCurrentIndex] = useState(0);
14+
15+
const next = useCallback(() => {
16+
setCurrentIndex((current) => (current + 1) % images.length);
17+
}, [images.length]);
18+
19+
useEffect(() => {
20+
const timer = setInterval(next, 10000);
21+
return () => clearInterval(timer);
22+
}, [next]);
23+
24+
return (
25+
<div className="relative w-screen left-[50%] right-[50%] -mx-[50vw]">
26+
<div className="max-w-5xl mx-auto px-4">
27+
<div className="relative rounded-lg overflow-hidden bg-fd-subtle mb-12 aspect-[16/10]">
28+
{images.map((image, index) => (
29+
<div
30+
key={index}
31+
className={`absolute inset-0 transition-opacity duration-1000 ease-in-out ${
32+
index === currentIndex ? 'opacity-100 z-10' : 'opacity-0 z-0'
33+
}`}
34+
>
35+
<Image
36+
src={image.src}
37+
alt={image.alt}
38+
fill
39+
sizes="(max-width: 1280px) 100vw, 1280px"
40+
className="object-contain"
41+
priority={index === currentIndex || index === (currentIndex + 1) % images.length}
42+
/>
43+
</div>
44+
))}
45+
</div>
46+
</div>
47+
</div>
48+
);
49+
}

app/(home)/layout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@ import { HomeLayout } from 'fumadocs-ui/layouts/home';
33
import { baseOptions } from '@/app/layout.config';
44

55
export default function Layout({ children }: { children: ReactNode }) {
6-
return <HomeLayout {...baseOptions}>{children}dsa</HomeLayout>;
6+
return <HomeLayout {...baseOptions}>{children}</HomeLayout>;
77
}

app/(home)/page.tsx

+145-11
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,153 @@
1+
import { GithubInfo } from 'fumadocs-ui/components/github-info';
12
import Link from 'next/link';
3+
import Image from 'next/image';
4+
import { ImageCarousel } from './images';
5+
import { Rocket, Zap, Box, Shield, Puzzle, Github, MousePointer } from 'lucide-react';
6+
7+
const contributors = ['undefined-moe', 'pandadtdyy', 'wuxianucw', 'criyle', 'Macesuted', 'guke1024'];
28

39
export default function HomePage() {
410
return (
5-
<main className="flex flex-1 flex-col justify-center text-center">
6-
<h1 className="mb-4 text-2xl font-bold">Hello World</h1>
7-
<p className="text-fd-muted-foreground">
8-
You can open{' '}
9-
<Link
10-
href="/docs"
11-
className="text-fd-foreground font-semibold underline"
12-
>
13-
/docs
14-
</Link>{' '}
15-
and see the documentation.
11+
<main className="flex flex-1 flex-col max-w-3xl mx-auto px-4 py-16">
12+
<div className="flex items-center gap-4 mb-6">
13+
<div className="relative w-12 h-12">
14+
<Image
15+
src="/favicon.png"
16+
alt="Hydro Logo"
17+
fill
18+
className="object-contain"
19+
priority
20+
/>
21+
</div>
22+
<h1 className="text-4xl font-bold">
23+
Hydro Development Team
24+
</h1>
25+
</div>
26+
<p className="text-fd-muted-foreground text-lg mb-8">
27+
专注信息学竞赛,提供一站式服务。
1628
</p>
29+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
30+
<div className="group block p-6 rounded-lg border border-fd-border hover:shadow-lg transition-all">
31+
<Link
32+
href="/docs/Hydro"
33+
className="hover:border-fd-border-hover"
34+
>
35+
<h3 className="text-xl font-semibold mb-2">
36+
Hydro - 在线测评系统
37+
</h3>
38+
<p className="text-fd-muted-foreground">
39+
高性能、可扩展、多语言、跨平台、易安装、有题库。
40+
</p>
41+
</Link>
42+
<GithubInfo
43+
owner="hydro-dev"
44+
repo="Hydro"
45+
/>
46+
</div>
47+
<div className="group block p-6 rounded-lg border border-fd-border hover:shadow-lg transition-all">
48+
<Link
49+
href="/docs/Tools"
50+
className="hover:border-fd-border-hover"
51+
>
52+
<h3 className="text-xl font-semibold mb-2">
53+
XCPC-Tools - 现场赛工具包
54+
</h3>
55+
<p className="text-fd-muted-foreground">
56+
DOMJudge 支持、赛事监控、小票打印、摄像头管理
57+
</p>
58+
</Link>
59+
<GithubInfo
60+
owner="hydro-dev"
61+
repo="xcpc-tools"
62+
/>
63+
</div>
64+
</div>
65+
<ImageCarousel />
66+
67+
<div className="col-span-full flex flex-row items-start justify-center border-l border-t p-8 pb-2 text-center">
68+
<h2 className="bg-fd-primary text-fd-primary-foreground px-1 text-2xl font-semibold">优势特性</h2>
69+
<MousePointer className="w-6 h-6 -ml-1 mt-8" />
70+
</div>
71+
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
72+
<div className="flex flex-col items-start">
73+
<div className="flex items-center gap-2 mb-2">
74+
<Rocket className="w-6 h-6" />
75+
<h3 className="text-xl font-semibold">强大</h3>
76+
</div>
77+
<p className="text-fd-muted-foreground">
78+
提供了比赛 训练 讨论 题解 作业等功能
79+
</p>
80+
</div>
81+
<div className="flex flex-col items-start">
82+
<div className="flex items-center gap-2 mb-2">
83+
<Zap className="w-6 h-6" />
84+
<h3 className="text-xl font-semibold">性能</h3>
85+
</div>
86+
<p className="text-fd-muted-foreground">
87+
沙箱复用,延迟计算,提高运行效率
88+
</p>
89+
</div>
90+
<div className="flex flex-col items-start">
91+
<div className="flex items-center gap-2 mb-2">
92+
<Box className="w-6 h-6" />
93+
<h3 className="text-xl font-semibold">便捷</h3>
94+
</div>
95+
<p className="text-fd-muted-foreground">
96+
支持使用脚本一键搭建
97+
</p>
98+
</div>
99+
<div className="flex flex-col items-start">
100+
<div className="flex items-center gap-2 mb-2">
101+
<Shield className="w-6 h-6" />
102+
<h3 className="text-xl font-semibold">安全</h3>
103+
</div>
104+
<p className="text-fd-muted-foreground">
105+
使用 Linux 容器技术隔离用户程序
106+
</p>
107+
</div>
108+
<div className="flex flex-col items-start">
109+
<div className="flex items-center gap-2 mb-2">
110+
<Puzzle className="w-6 h-6" />
111+
<h3 className="text-xl font-semibold">扩展</h3>
112+
</div>
113+
<p className="text-fd-muted-foreground">
114+
可通过安装附加组件进行扩展
115+
</p>
116+
</div>
117+
<div className="flex flex-col items-start">
118+
<div className="flex items-center gap-2 mb-2">
119+
<Github className="w-6 h-6" />
120+
<h3 className="text-xl font-semibold">开源</h3>
121+
</div>
122+
<p className="text-fd-muted-foreground">
123+
代码基于 AGPL 开源,可修改
124+
</p>
125+
</div>
126+
</div>
127+
128+
<div className="flex flex-col items-center text-center max-w-2xl mx-auto">
129+
<p className="text-fd-muted-foreground text-lg mb-8">
130+
<span className="text-red-500"></span> Hydro 由开源社区驱动。
131+
</p>
132+
<div className="flex flex-wrap justify-center gap-2 mb-4">
133+
{contributors.map((username) => (
134+
<div
135+
key={username}
136+
className="w-12 h-12 rounded-full overflow-hidden bg-fd-subtle relative group"
137+
>
138+
<Image
139+
src={`https://github.com/${username}.png`}
140+
alt={`Contributor ${username}`}
141+
fill
142+
className="object-cover"
143+
/>
144+
</div>
145+
))}
146+
</div>
147+
<p className="text-fd-muted-foreground">
148+
我们的一些活跃贡献者
149+
</p>
150+
</div>
17151
</main>
18152
);
19153
}

app/docs/layout.tsx app/docs/[[...slug]]/layout.tsx

+13-1
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,24 @@ import { RootToggle } from 'fumadocs-ui/components/layout/root-toggle';
33
import type { ReactNode } from 'react';
44
import { baseOptions } from '@/app/layout.config';
55
import { source } from '@/lib/source';
6+
import { GithubInfo } from 'fumadocs-ui/components/github-info';
67

7-
export default function Layout({ children }: { children: ReactNode }) {
8+
const maps = {
9+
'Hydro': <GithubInfo owner="hydro-dev" repo="Hydro" />,
10+
'Tools': <GithubInfo owner="hydro-dev" repo="xcpc-tools" />,
11+
};
12+
13+
export default function Layout({ children, params }: { children: ReactNode, params: { slug: string[] } }) {
814
return (
915
<DocsLayout
1016
tree={source.pageTree}
1117
{...baseOptions}
18+
links={Object.keys(maps).find((key) => params.slug?.[0] === key) ? [
19+
{
20+
type: 'custom',
21+
children: maps[params.slug?.[0] as keyof typeof maps],
22+
},
23+
] : []}
1224
sidebar={{
1325
tabs: false,
1426
banner: (

app/layout.config.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,4 @@ export const baseOptions: BaseLayoutProps = {
2222
</>
2323
),
2424
},
25-
links: [
26-
],
2725
};

package.json

+1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"dependencies": {
1414
"@orama/stopwords": "^3.1.1",
1515
"@orama/tokenizers": "patch:@orama/tokenizers@npm%3A3.1.1#~/.yarn/patches/@orama-tokenizers-npm-3.1.1-d353c0f792.patch",
16+
"embla-carousel-react": "^8.5.2",
1617
"fumadocs-core": "15.0.15",
1718
"fumadocs-mdx": "11.5.6",
1819
"fumadocs-twoslash": "^3.1.0",
File renamed without changes.
File renamed without changes.

public/images-hydro/pict1.png

320 KB
Loading

public/images-hydro/pict2.png

296 KB
Loading

public/images-hydro/pict3.png

238 KB
Loading
File renamed without changes.

yarn.lock

+29
Original file line numberDiff line numberDiff line change
@@ -2510,6 +2510,34 @@ __metadata:
25102510
languageName: node
25112511
linkType: hard
25122512

2513+
"embla-carousel-react@npm:^8.5.2":
2514+
version: 8.5.2
2515+
resolution: "embla-carousel-react@npm:8.5.2"
2516+
dependencies:
2517+
embla-carousel: "npm:8.5.2"
2518+
embla-carousel-reactive-utils: "npm:8.5.2"
2519+
peerDependencies:
2520+
react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
2521+
checksum: 10c0/8e55a2bc562aed2c55d9debf2523dbd4f2524b0ecea62cf51f8f096ed993af608890084b5f35e1694a8aada087602a12cc4b8a68aeee12b4a33cc8361636c63d
2522+
languageName: node
2523+
linkType: hard
2524+
2525+
"embla-carousel-reactive-utils@npm:8.5.2":
2526+
version: 8.5.2
2527+
resolution: "embla-carousel-reactive-utils@npm:8.5.2"
2528+
peerDependencies:
2529+
embla-carousel: 8.5.2
2530+
checksum: 10c0/aa4870539d9090f9ac02338c3ca3e1710a6f0e6890cd2f6fbf6afcc1eeac48192406f92bf042fe9429cc61709338124baf1514c75227a7a16b19b83e9f376274
2531+
languageName: node
2532+
linkType: hard
2533+
2534+
"embla-carousel@npm:8.5.2":
2535+
version: 8.5.2
2536+
resolution: "embla-carousel@npm:8.5.2"
2537+
checksum: 10c0/4bbb04c08616d560a7b47b1897794a077baa5aa27642420b35b3be58ab7b0dc000ef073b6e47d0029b0791c046e0cd39d295704faecb1957d2c315df51be58e6
2538+
languageName: node
2539+
linkType: hard
2540+
25132541
"emoji-regex-xs@npm:^1.0.0":
25142542
version: 1.0.0
25152543
resolution: "emoji-regex-xs@npm:1.0.0"
@@ -3946,6 +3974,7 @@ __metadata:
39463974
"@types/node": "npm:22.13.8"
39473975
"@types/react": "npm:^19.0.10"
39483976
"@types/react-dom": "npm:^19.0.4"
3977+
embla-carousel-react: "npm:^8.5.2"
39493978
eslint: "npm:^8"
39503979
eslint-config-next: "npm:15.2.0"
39513980
fumadocs-core: "npm:15.0.15"

0 commit comments

Comments
 (0)