Skip to content

Commit ea079b3

Browse files
StarHeartHuntStarHeartHunt
committed
♻️ refactor homepage
1 parent d20deb0 commit ea079b3

File tree

7 files changed

+248
-226
lines changed

7 files changed

+248
-226
lines changed

‎website/src/components/Hero.tsx‎

Lines changed: 0 additions & 106 deletions
This file was deleted.

‎website/src/components/Home/Feature.tsx‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
import React from "react";
2+
3+
import CodeBlock from "@theme/CodeBlock";
4+
5+
export type Feature = {
6+
title: string;
7+
tagline?: string;
8+
description?: string;
9+
annotaion?: string;
10+
children?: React.ReactNode;
11+
};
12+
13+
export function HomeFeature({
14+
title,
15+
tagline,
16+
description,
17+
annotaion,
18+
children,
19+
}: Feature): React.ReactNode {
20+
return (
21+
<div className="flex flex-col items-center justify-center p-4">
22+
<p className="text-sm text-base-content/70 font-medium tracking-wide uppercase">
23+
{tagline}
24+
</p>
25+
<h1 className="mt-3 font-mono font-light text-4xl tracking-tight sm:text-5xl md:text-5xl text-primary">
26+
{title}
27+
</h1>
28+
<p className="mt-10 mb-6">{description}</p>
29+
{children}
30+
<p className="text-sm italic text-base-content/70">{annotaion}</p>
31+
</div>
32+
);
33+
}
34+
35+
function HomeFeatureSingleColumn(props: Feature): React.ReactNode {
36+
return (
37+
<div className="grid grid-cols-1 px-4 py-8 md:px-16 mx-auto">
38+
<HomeFeature {...props} />
39+
</div>
40+
);
41+
}
42+
43+
function HomeFeatureDoubleColumn({
44+
features: [feature1, feature2],
45+
children,
46+
}: {
47+
features: [Feature, Feature];
48+
children?: [React.ReactNode, React.ReactNode];
49+
}): React.ReactNode {
50+
const [children1, children2] = children ?? [];
51+
52+
return (
53+
<div className="grid gap-x-6 gap-y-8 grid-cols-1 lg:grid-cols-2 max-w-7xl px-4 py-8 md:px-16 mx-auto">
54+
<HomeFeature {...feature1}>{children1}</HomeFeature>
55+
<HomeFeature {...feature2}>{children2}</HomeFeature>
56+
</div>
57+
);
58+
}
59+
60+
function HomeFeatures(): React.ReactNode {
61+
return (
62+
<>
63+
<HomeFeatureSingleColumn
64+
title="开箱即用"
65+
tagline="out of box"
66+
description="使用 NB-CLI 快速构建属于你的机器人"
67+
>
68+
<CodeBlock
69+
title="Installation"
70+
language="bash"
71+
className="home-codeblock"
72+
>
73+
{[
74+
"$ pipx install nb-cli",
75+
"$ nb",
76+
// "d8b db .d88b. d8b db d88888b d8888b. .d88b. d888888b",
77+
// "888o 88 .8P Y8. 888o 88 88' 88 `8D .8P Y8. `~~88~~'",
78+
// "88V8o 88 88 88 88V8o 88 88ooooo 88oooY' 88 88 88",
79+
// "88 V8o88 88 88 88 V8o88 88~~~~~ 88~~~b. 88 88 88",
80+
// "88 V888 `8b d8' 88 V888 88. 88 8D `8b d8' 88",
81+
// "VP V8P `Y88P' VP V8P Y88888P Y8888P' `Y88P' YP",
82+
"[?] What do you want to do?",
83+
"❯ Create a NoneBot project.",
84+
" Run the bot in current folder.",
85+
" Manage bot driver.",
86+
" Manage bot adapters.",
87+
" Manage bot plugins.",
88+
" ...",
89+
].join("\n")}
90+
</CodeBlock>
91+
</HomeFeatureSingleColumn>
92+
<HomeFeatureDoubleColumn
93+
features={[
94+
{
95+
title: "插件系统",
96+
tagline: "plugin system",
97+
description: "支持插件和执行脚本",
98+
},
99+
{
100+
title: "跨语言支持",
101+
tagline: "i18n support",
102+
description: "支持多种语言，自动识别系统语言",
103+
},
104+
]}
105+
>
106+
<CodeBlock title="" language="python" className="home-codeblock">
107+
{[
108+
"[project.entry-points.nb]",
109+
`plugin_name = "cli_plugin.plugin:install"`,
110+
"[project.entry-points.nb_scripts]",
111+
`foo = "awesome_bot.module:function"`,
112+
" "
113+
].join("\n")}
114+
</CodeBlock>
115+
<CodeBlock title="" language="python" className="home-codeblock">
116+
{[
117+
"[?] 你想要进行什么操作?",
118+
"❯ 创建一个 NoneBot 项目.",
119+
" 管理 bot 插件.",
120+
" 管理 bot 适配器.",
121+
" 管理 bot 驱动器.",
122+
].join("\n")}
123+
</CodeBlock>
124+
</HomeFeatureDoubleColumn>
125+
</>
126+
);
127+
}
128+
129+
export default React.memo(HomeFeatures);

‎website/src/components/Home/Hero.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from "react";
2+
3+
import Link from "@docusaurus/Link";
4+
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
5+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
6+
import { useNonepressThemeConfig } from "@nullbot/docusaurus-theme-nonepress/client";
7+
8+
function HomeHero(): React.ReactNode {
9+
const {
10+
siteConfig: { tagline },
11+
} = useDocusaurusContext();
12+
const {
13+
navbar: { logo },
14+
} = useNonepressThemeConfig();
15+
16+
return (
17+
<div className="home-hero">
18+
<img src={logo!.src} alt={logo!.alt} className="home-hero-logo" />
19+
<h1 className="home-hero-title">
20+
<span className="text-primary">None</span>
21+
Bot CLI
22+
</h1>
23+
<p className="home-hero-tagline">{tagline}</p>
24+
<div className="home-hero-actions">
25+
<Link to="/docs/" className="btn btn-primary">
26+
开始使用 <FontAwesomeIcon icon={["fas", "chevron-right"]} />
27+
</Link>
28+
</div>
29+
<div className="home-hero-next">
30+
<FontAwesomeIcon icon={["fas", "angle-down"]} />
31+
</div>
32+
</div>
33+
);
34+
}
35+
36+
export default React.memo(HomeHero);

‎website/src/components/Home/index.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from "react";
2+
3+
import HomeFeatures from "./Feature";
4+
import HomeHero from "./Hero";
5+
6+
import "./styles.css";
7+
8+
export default function HomeContent(): React.ReactNode {
9+
return (
10+
<div className="home-container">
11+
<HomeHero />
12+
<HomeFeatures />
13+
</div>
14+
);
15+
}

‎website/src/components/Home/styles.css‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
.home {
2+
&-container {
3+
@apply -mt-16;
4+
}
5+
6+
&-hero {
7+
@apply relative flex flex-col items-center justify-center gap-4 h-screen;
8+
9+
&-logo {
10+
@apply h-48 w-auto;
11+
}
12+
13+
&-title {
14+
@apply text-5xl font-normal tracking-tight;
15+
}
16+
17+
&-tagline {
18+
@apply text-sm font-medium uppercase tracking-wide text-base-content/70;
19+
}
20+
21+
&-actions {
22+
@apply flex flex-col sm:flex-row gap-4;
23+
}
24+
25+
&-copy {
26+
@apply font-normal normal-case text-base-content/70;
27+
}
28+
29+
&-next {
30+
@apply absolute bottom-4;
31+
32+
& svg {
33+
@apply animate-bounce text-primary text-4xl;
34+
}
35+
}
36+
}
37+
38+
&-codeblock {
39+
@apply inline-block !max-w-[600px];
40+
}
41+
}

0 commit comments

Comments
 (0)