mirror of
https://github.com/nonebot/nonebot2.git
synced 2025-07-28 16:51:26 +00:00
📝 update homepage
This commit is contained in:
yanyongyu
101
website/src/components/Hero.tsx
Normal file
101
website/src/components/Hero.tsx
Normal file
@ -0,0 +1,101 @@
|
||||
import React, { PropsWithChildren } from "react";
|
||||
|
||||
import Link from "@docusaurus/Link";
|
||||
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import Logo from "@theme/Logo";
|
||||
|
||||
export function Hero(): JSX.Element {
|
||||
const { siteConfig } = useDocusaurusContext();
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap p-16 mx-auto max-w-7xl h-screen relative px-4 sm:p-24">
|
||||
<div className="flex-grow self-center text-center">
|
||||
<Logo imageClassName="max-h-48" />
|
||||
<h1 className="text-5xl tracking-tight font-light sm:text-5xl md:text-5xl">
|
||||
<span className="text-hero">N</span>one
|
||||
<span className="text-hero">B</span>ot
|
||||
</h1>
|
||||
<p className="my-3 max-w-md mx-auto text-sm font-medium tracking-wide uppercase opacity-70 md:mt-5 md:max-w-3xl">
|
||||
{siteConfig.tagline}
|
||||
</p>
|
||||
<div className="mt-8">
|
||||
<Link
|
||||
to="/docs/guide"
|
||||
className="inline-block bg-hero text-white font-bold rounded-lg px-6 py-3"
|
||||
>
|
||||
开始使用
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute flex-grow flex items-center justify-between bottom-0 right-0 w-full">
|
||||
<div className="mx-auto self-start animate-bounce">
|
||||
<FontAwesomeIcon
|
||||
className="text-4xl text-hero"
|
||||
icon={["fas", "angle-down"]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export type Feature = {
|
||||
readonly title: string;
|
||||
readonly tagline?: string;
|
||||
readonly description?: string;
|
||||
readonly annotaion?: string;
|
||||
};
|
||||
|
||||
export function HeroFeature(props: PropsWithChildren<Feature>): JSX.Element {
|
||||
const { title, tagline, description, annotaion, children } = props;
|
||||
|
||||
return (
|
||||
<>
|
||||
<p className="mt-3 mb-3 max-w-md mx-auto text-sm font-medium tracking-wide uppercase opacity-70 md:mt-5 md:max-w-3xl">
|
||||
{tagline}
|
||||
</p>
|
||||
<h1 className="text-4xl tracking-tight font-light sm:text-5xl md:text-5xl text-hero">
|
||||
{title}
|
||||
</h1>
|
||||
<p className="mt-10 mb-6">{description}</p>
|
||||
{children}
|
||||
<p className="text-sm italic opacity-70">{annotaion}</p>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function HeroFeatureSingle(
|
||||
props: PropsWithChildren<Feature>
|
||||
): JSX.Element {
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto py-16 px-4 text-center md:px-16">
|
||||
<HeroFeature {...props} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function HeroFeatureDouble(
|
||||
props: PropsWithChildren<{ features: [Feature, Feature] }>
|
||||
): JSX.Element {
|
||||
const {
|
||||
features: [feature1, feature2],
|
||||
children,
|
||||
} = props;
|
||||
|
||||
let children1, children2;
|
||||
if (Array.isArray(children) && children.length === 2) {
|
||||
[children1, children2] = children;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto py-16 px-4 md:grid md:grid-cols-2 md:gap-6 md:px-16">
|
||||
<div className="pb-16 text-center md:pb-0">
|
||||
<HeroFeature {...feature1} children={children1} />
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<HeroFeature {...feature2} children={children2} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,30 +1,107 @@
|
||||
import Hero, { HeroFeatureSingle } from "@theme/Hero";
|
||||
import clsx from "clsx";
|
||||
import React from "react";
|
||||
|
||||
import CodeBlock from "@theme/CodeBlock";
|
||||
import { HeroFeatureDouble, HeroFeatureSingle } from "@theme/Hero";
|
||||
import Layout from "@theme/Layout";
|
||||
import React from "react";
|
||||
import clsx from "clsx";
|
||||
import styles from "./index.module.css";
|
||||
|
||||
import { Hero, HeroFeature } from "../components/Hero";
|
||||
import type { Feature } from "../components/Hero";
|
||||
import styles from "../css/index.module.css";
|
||||
|
||||
export default function Home() {
|
||||
const feature = {
|
||||
const feature: Feature = {
|
||||
title: "Develop",
|
||||
tagline: "fast to code",
|
||||
description: "仅需两步，即可开始编写你的机器人",
|
||||
};
|
||||
const features: [Feature, Feature] = [
|
||||
{
|
||||
title: "Plugin",
|
||||
tagline: "build bot with plugins",
|
||||
description: "插件化开发，模块化管理",
|
||||
},
|
||||
{
|
||||
title: "Multi-Platform",
|
||||
tagline: "write once run everywhere",
|
||||
description: "支持多种平台，以及多样的事件响应方式",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<Hero />
|
||||
<HeroFeatureSingle {...feature}>
|
||||
<CodeBlock
|
||||
title="Installation"
|
||||
className={clsx("inline-block", styles.homeCodeBlock)}
|
||||
metastring="bash"
|
||||
>
|
||||
{"pip install nb-cli\nnb create"}
|
||||
</CodeBlock>
|
||||
</HeroFeatureSingle>
|
||||
<div className="max-w-7xl mx-auto py-16 px-4 text-center md:px-16">
|
||||
<HeroFeature {...feature}>
|
||||
<CodeBlock
|
||||
title="Installation"
|
||||
className={clsx("inline-block language-bash", styles.homeCodeBlock)}
|
||||
>
|
||||
{[
|
||||
"$ pip install nb-cli",
|
||||
"$ nb",
|
||||
// "d8b db .d88b. d8b db d88888b d8888b. .d88b. d888888b",
|
||||
// "888o 88 .8P Y8. 888o 88 88' 88 `8D .8P Y8. `~~88~~'",
|
||||
// "88V8o 88 88 88 88V8o 88 88ooooo 88oooY' 88 88 88",
|
||||
// "88 V8o88 88 88 88 V8o88 88~~~~~ 88~~~b. 88 88 88",
|
||||
// "88 V888 `8b d8' 88 V888 88. 88 8D `8b d8' 88",
|
||||
// "VP V8P `Y88P' VP V8P Y88888P Y8888P' `Y88P' YP",
|
||||
"[?] What do you want to do?",
|
||||
"❯ Create a New Project",
|
||||
" Run the Bot in Current Folder",
|
||||
" Create a New NoneBot Plugin",
|
||||
" List All Published Plugins",
|
||||
" ...",
|
||||
].join("\n")}
|
||||
</CodeBlock>
|
||||
</HeroFeature>
|
||||
</div>
|
||||
<div className="max-w-7xl mx-auto py-16 px-4 md:grid md:grid-cols-2 md:gap-6 md:px-16">
|
||||
<div className="pb-16 text-center md:pb-0">
|
||||
<HeroFeature {...features[0]}>
|
||||
<CodeBlock
|
||||
title
|
||||
className={clsx(
|
||||
"inline-block language-python",
|
||||
styles.homeCodeBlock
|
||||
)}
|
||||
>
|
||||
{[
|
||||
"import nonebot",
|
||||
"# 加载一个插件",
|
||||
'nonebot.load_plugin("path.to.your.plugin")',
|
||||
"# 从文件夹加载插件",
|
||||
'nonebot.load_plugins("plugins")',
|
||||
"# 从配置文件加载多个插件",
|
||||
'nonebot.load_from_json("plugins.json")',
|
||||
'nonebot.load_from_toml("pyproject.toml")',
|
||||
].join("\n")}
|
||||
</CodeBlock>
|
||||
</HeroFeature>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<HeroFeature {...features[1]}>
|
||||
<CodeBlock
|
||||
title
|
||||
className={clsx(
|
||||
"inline-block language-python",
|
||||
styles.homeCodeBlock
|
||||
)}
|
||||
>
|
||||
{[
|
||||
"import nonebot",
|
||||
"# OneBot",
|
||||
"from nonebot.adapters.onebot.v11 import Bot as OneBot",
|
||||
"# 钉钉",
|
||||
"from nonebot.adapters.ding import Bot as DingBot",
|
||||
"driver = nonebot.get_driver()",
|
||||
'driver.register_adapter("onebot", OneBot)',
|
||||
'driver.register_adapter("ding", DingBot)',
|
||||
].join("\n")}
|
||||
</CodeBlock>
|
||||
</HeroFeature>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user