📝 add creating project

docs/.vuepress/components/Messenger.vue

@@ -0,0 +1,231 @@
+<template>
+  <div class="qq-chat">
+    <v-app
+      ><v-main>
+        <v-card class="elevation-6">
+          <v-toolbar color="primary" dark dense flat>
+            <v-row no-gutters>
+              <v-col>
+                <v-row no-gutters justify="space-between">
+                  <v-col cols="auto">
+                    <v-icon small>fa-chevron-left</v-icon>
+                  </v-col>
+                  <v-col cols="auto">
+                    <h3>🔥</h3>
+                  </v-col>
+                </v-row>
+              </v-col>
+              <v-col cols="auto">
+                <h3 class="white--text">NoneBot</h3>
+              </v-col>
+              <v-col class="text-right">
+                <v-tooltip top>
+                  <template v-slot:activator="{ on, attrs }">
+                    <v-btn class="mr-2" icon small v-bind="attrs" v-on="on"
+                      ><v-icon small>fa-terminal</v-icon></v-btn
+                    >
+                  </template>
+                  <span>Terminal</span>
+                </v-tooltip>
+                <v-tooltip top>
+                  <template v-slot:activator="{ on, attrs }">
+                    <v-btn icon small v-bind="attrs" v-on="on"
+                      ><v-icon small>fa-trash-alt</v-icon></v-btn
+                    >
+                  </template>
+                  <span>Clear</span>
+                </v-tooltip>
+              </v-col>
+            </v-row>
+          </v-toolbar>
+          <v-container fluid ref="chat" class="chat chat-bg">
+            <template v-for="(item, index) in messages">
+              <v-row
+                v-if="item.position === 'right'"
+                justify="end"
+                :key="index"
+                class="message wow animate__fadeInRight"
+                data-wow-duration="0.7s"
+              >
+                <div
+                  class="message-box"
+                  v-html="
+                    item.msg.replace(/\n/g, '<br/>').replace(/ /g, '&nbsp;')
+                  "
+                ></div>
+                <v-avatar color="blue lighten-2" size="36">
+                  <v-icon small>fa-user</v-icon>
+                </v-avatar>
+              </v-row>
+              <v-row
+                v-else-if="item.position === 'left'"
+                justify="start"
+                :key="index"
+                class="message wow animate__fadeInLeft"
+                data-wow-duration="0.7s"
+              >
+                <v-avatar color="transparent" size="36">
+                  <v-img src="/logo.png"></v-img>
+                </v-avatar>
+                <div
+                  class="message-box"
+                  v-html="
+                    item.msg.replace(/\n/g, '<br/>').replace(/ /g, '&nbsp;')
+                  "
+                ></div>
+              </v-row>
+              <v-row
+                v-else
+                justify="center"
+                :key="index"
+                class="notify mt-1 wow animate__fadeIn"
+                data-wow-duration="0.7s"
+              >
+                <div class="notify-box">
+                  <span style="display: inline; white-space: nowrap">
+                    <v-icon x-small color="blue" left>fa-info-circle</v-icon>
+                  </span>
+                  <span
+                    v-html="
+                      item.msg.replace(/\n/g, '<br/>').replace(/ /g, '&nbsp;')
+                    "
+                  ></span>
+                </div>
+              </v-row>
+            </template>
+          </v-container>
+          <v-container fluid class="chat-bg py-0">
+            <v-row dense class="mx-0">
+              <v-col>
+                <v-text-field
+                  dense
+                  solo
+                  hide-details
+                  height="28px"
+                ></v-text-field>
+              </v-col>
+              <v-col cols="auto">
+                <v-btn
+                  style="font-size: 0.8rem"
+                  color="primary"
+                  small
+                  rounded
+                  depressed
+                  >发送</v-btn
+                >
+              </v-col>
+            </v-row>
+            <v-row class="text-center" no-gutters>
+              <v-col class="pa-1" cols="2">
+                <v-icon small>fa-microphone</v-icon>
+              </v-col>
+              <v-col class="pa-1" cols="2">
+                <v-icon small>fa-image</v-icon>
+              </v-col>
+              <v-col class="pa-1" cols="2">
+                <v-icon small>fa-camera</v-icon>
+              </v-col>
+              <v-col class="pa-1" cols="2">
+                <v-icon small>fa-wallet</v-icon>
+              </v-col>
+              <v-col class="pa-1" cols="2">
+                <v-icon small>fa-smile-wink</v-icon>
+              </v-col>
+              <v-col class="pa-1" cols="2">
+                <v-icon small>fa-plus-circle</v-icon>
+              </v-col>
+            </v-row>
+          </v-container>
+        </v-card></v-main
+      ></v-app
+    >
+  </div>
+</template>
+
+<script>
+import { WOW } from "wowjs";
+import "animate.css/animate.min.css";
+
+export default {
+  name: "Messenger",
+  props: {
+    messages: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data: () => ({
+    wow: null
+  }),
+  methods: {
+    initWOW: function() {
+      this.wow = new WOW({
+        noxClass: "wow",
+        animateClass: "animate__animated",
+        offset: 0,
+        mobile: true,
+        live: true
+      });
+      this.wow.init();
+    }
+  },
+  mounted() {
+    this.initWOW();
+  }
+};
+</script>
+
+<style scoped>
+.wow {
+  visibility: hidden;
+}
+
+.chat {
+  min-height: 150px;
+}
+.chat-bg {
+  background-color: #f3f6f9;
+}
+
+.message {
+  position: relative;
+  margin: 0;
+}
+.message .message-box {
+  position: relative;
+  width: fit-content;
+  max-width: 55%;
+  border-radius: 0.5rem;
+  padding: 0.6rem 0.8rem;
+  margin: 0.4rem 0.8rem;
+  background-color: #fff;
+}
+.message .message-box::after {
+  content: "";
+  position: absolute;
+  right: 100%;
+  top: 0;
+  width: 8px;
+  height: 12px;
+  color: #fff;
+  border: 0 solid transparent;
+  border-bottom: 7px solid;
+  border-radius: 0 0 0 8px;
+}
+.message.justify-end .message-box::after {
+  left: 100%;
+  right: auto;
+  border-radius: 0 0 8px 0;
+}
+
+.notify {
+  position: relative;
+}
+.notify .notify-box {
+  max-width: 70%;
+  background: #e0e0e0;
+  border-radius: 10px;
+  padding: 5px 12px;
+  font-size: 12px;
+}
+</style>

docs/.vuepress/config.js

@@ -20,6 +20,14 @@ module.exports = context => ({
     [
       "meta",
       { name: "apple-mobile-web-app-status-bar-style", content: "black" }
+    ],
+    [
+      "link",
+      {
+        rel: "stylesheet",
+        href:
+          "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css"
+      }
     ]
   ],
   locales: {
@@ -59,7 +67,12 @@ module.exports = context => ({
               path: "",
               collapsable: false,
               sidebar: "auto",
-              children: ["", "installation", "getting-started"]
+              children: [
+                "",
+                "installation",
+                "getting-started",
+                "creating-a-project"
+              ]
             }
           ],
           "/api/": [
@@ -124,6 +137,14 @@ module.exports = context => ({
           console.log(`Created version ${version} in ${versionDestPath}`);
         }
       }
+    ],
+    [
+      "container",
+      {
+        type: "vue",
+        before: '<pre class="vue-container"><code>',
+        after: "</code></pre>"
+      }
     ]
   ]
 });

docs/.vuepress/enhanceApp.js

@@ -4,12 +4,25 @@
  * https://v1.vuepress.vuejs.org/guide/basic-config.html#app-level-enhancements
  */
 
+import Vuetify from "vuetify";
+import "vuetify/dist/vuetify.min.css";
+
 export default ({
   Vue, // the version of Vue being used in the VuePress app
   options, // the options for the root Vue instance
   router, // the router instance for the app
   siteData // site metadata
 }) => {
+  Vue.use(Vuetify);
+  options.vuetify = new Vuetify({
+    icons: {
+      iconfont: "fa",
+      values: {
+        //
+      }
+    }
+  });
+
   if (typeof process === "undefined" || process.env.VUE_ENV !== "server") {
     router.onReady(() => {
       const { app } = router;
@@ -18,7 +31,7 @@ export default ({
         setTimeout(() => {
           const { hash } = document.location;
           if (hash.length > 1) {
-            const id = hash.substring(1);
+            const id = decodeURI(hash.substring(1));
             const element = document.getElementById(id);
             if (element) element.scrollIntoView();
           }

docs/guide/creating-a-project.md

@@ -0,0 +1,55 @@
+# 创建一个完整的项目
+
+上一章中我们已经运行了一个最小的 NoneBot 实例，在这一章，我们将从零开始一个完整的项目。
+
+## 目录结构
+
+首先，我们可以使用 `nb-cli` 或者自行创建项目目录：
+
+```bash
+pip install nonebot2[cli]
+# pip install nb-cli
+nb create
+```
+
+这将创建默认的目录结构
+
+<!-- prettier-ignore-start -->
+:::vue
+AweSome-Bot
+├── `awesome_bot` _(**或是 src**)_
+│   └── `plugins`
+├── `.env`
+├── `.env.dev`
+├── `.env.prod`
+├── .gitignore
+├── `bot.py`
+├── docker-compose.yml
+├── Dockerfile
+├── `pyproject.toml`
+└── README.md
+:::
+<!-- prettier-ignore-end -->
+
+- `awesome_bot/plugins` 或 `src/plugins`: 用于存放编写的 bot 插件
+- `.env`, `.env.dev`, `.env.prod`: 各环境配置文件
+- `bot.py`: bot 入口文件
+- `pyproject.toml`: 项目依赖管理文件，默认使用 [poetry](https://python-poetry.org/)
+
+## 启动 Bot
+
+如果你使用 `nb-cli`
+
+```bash
+nb run [--file=bot.py] [--app=app]
+```
+
+或者使用
+
+```bash
+python bot.py
+```
+
+:::tip 提示
+如果在 bot 入口文件内定义了 asgi server， `nb-cli` 将会为你启动**冷重载模式**
+:::

docs/guide/getting-started.md

@@ -140,3 +140,5 @@ QQ 协议端举例:
 ```
 
 到这里如果一切 OK，你应该会收到机器人给你回复了 `你好，世界`。这一历史性的对话标志着你已经成功地运行了一个 NoneBot 的最小实例，开始了编写更强大的 QQ 机器人的创意之旅！
+
+<Messenger :messages="[{ position: 'right', msg: '/say 你好，世界' }, { position: 'left', msg: '你好，世界' }]"/>

docs/guide/installation.md

@@ -15,7 +15,8 @@ pip install nonebot2
 ```bash
 git clone https://github.com/nonebot/nonebot2.git
 cd nonebot2
-pip install .
+poetry install --no-dev  # 推荐
+pip install .  # 不推荐
 ```
 
 ## 额外依赖

package.json

@@ -20,10 +20,14 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@vuepress/plugin-back-to-top": "^1.3.1",
+    "@vuepress/plugin-back-to-top": "^1.5.4",
-    "@vuepress/plugin-medium-zoom": "^1.3.1",
+    "@vuepress/plugin-medium-zoom": "^1.5.4",
-    "vuepress": "^1.3.1",
+    "vuepress": "^1.5.4",
     "vuepress-plugin-versioning": "^4.5.0",
     "vuepress-theme-titanium": "^4.5.1"
+  },
+  "dependencies": {
+    "vuetify": "^2.3.10",
+    "wowjs": "^1.1.3"
   }
 }