📝 update homepage

CHANGELOG.md

@@ -0,0 +1,3 @@
+# Changelog
+
+See [changelog.md](./website/src/pages/changelog.md) or <https://v2.nonebot.dev/changelog>

docs_build/README.rst

@@ -1,29 +1,12 @@
 \-\-\-
+sidebar_position: 1
 id: index
-slug: /api/
+slug: /api
 \-\-\-
 
-NoneBot Api Reference
+NoneBot 模块
-=====================
+===============
 
-:模块索引:
+.. automodule:: nonebot
-  - `nonebot <./nonebot.md>`_
+   :members:
-  - `nonebot.config <./config.md>`_
+   :show-inheritance:
-  - `nonebot.plugin <./plugin.md>`_
-  - `nonebot.message <./message.md>`_
-  - `nonebot.matcher <./matcher.md>`_
-  - `nonebot.handler <./handler.md>`_
-  - `nonebot.rule <./rule.md>`_
-  - `nonebot.permission <./permission.md>`_
-  - `nonebot.log <./log.md>`_
-  - `nonebot.utils <./utils.md>`_
-  - `nonebot.typing <./typing.md>`_
-  - `nonebot.exception <./exception.md>`_
-  - `nonebot.drivers <./drivers/README.md>`_
-  - `nonebot.drivers.fastapi <./drivers/fastapi.md>`_
-  - `nonebot.drivers.quart <./drivers/quart.md>`_
-  - `nonebot.drivers.aiohttp <./drivers/aiohttp.md>`_
-  - `nonebot.adapters <./adapters/README.md>`_
-  - `nonebot.adapters.ding <./adapters/ding.md>`_
-  - `nonebot.adapters.mirai <./adapters/mirai.md>`_
-  - `nonebot.adapters.feishu <./adapters/feishu.md>`_

docs_build/nonebot.rst

@@ -1,8 +0,0 @@
-
-
-NoneBot 模块
-===============
-
-.. automodule:: nonebot
-   :members:
-   :show-inheritance:

website/docs/README.md

@@ -1,15 +0,0 @@
----
-home: true
-heroImage: /logo.png
-tagline: 跨平台 Python 异步机器人框架
-actionText: 开始使用
-actionLink: guide/
-features:
-  - title: 简洁
-    details: 提供极其简洁易懂的 API，使你可以毫无压力地开始验证你的绝佳创意，只需编写最少量的代码，即可实现丰富的功能。
-  - title: 易于扩展
-    details: 精心设计的消息处理流程使得你可以很方便地将原型扩充为具有大量实用功能的完整聊天机器人，并持续保证扩展性。
-  - title: 高性能
-    details: 采用异步 I/O，利用 WebSocket 进行通信，以获得极高的性能；同时，支持使用多账号同时接入，减少业务宕机的可能。
-footer: MIT Licensed | Copyright © 2018 - 2021 NoneBot Team
----

website/docs/README.mdx

@@ -0,0 +1,7 @@
+---
+slug: /
+---
+
+import { Redirect } from "@docusaurus/router";
+
+<Redirect to="guide" />;

website/docusaurus.config.js

@@ -142,9 +142,9 @@ const config = {
         apiKey: "ef449608d0ad6e81b9efd05db6367040",
         indexName: "nonebot",
         contextualSearch: true,
-        searchParameters: {
+        // searchParameters: {
-          facetFilters: ["lang:zh-CN"],
+        //   facetFilters: ["lang:zh-CN"],
-        },
+        // },
       },
       tailwindConfig: require("./tailwind.config"),
       customCss: [require.resolve("./src/css/custom.css")],

website/src/components/Hero.tsx

@@ -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>
+  );
+}

website/src/pages/index.tsx

@@ -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 { Hero, HeroFeature } from "../components/Hero";
-import styles from "./index.module.css";
+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}>
+      <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", styles.homeCodeBlock)}
+            className={clsx("inline-block language-bash", styles.homeCodeBlock)}
-          metastring="bash"
           >
-          {"pip install nb-cli\nnb create"}
+            {[
+              "$ 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>
-      </HeroFeatureSingle>
+        </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>
   );
 }

website/tailwind.config.js

@@ -1 +1,28 @@
-module.exports = {};
+module.exports = {
+  // content: [
+  //   `${__dirname}/src/**/*.{js,jsx,ts,tsx}`,
+  //   `${__dirname}/docs/**/*.{js,jsx,ts,tsx}`,
+  // ],
+  theme: {
+    extend: {
+      nonepress: {
+        light: {
+          theme: {
+            DEFAULT: "#ea5252",
+          },
+        },
+        dark: {
+          theme: {
+            DEFAULT: "#ea5252",
+          },
+        },
+      },
+      colors: {
+        hero: "#ea5252",
+        light: {
+          DEFAULT: "#fffdfd",
+        },
+      },
+    },
+  },
+};