add title rewrite

README.md

@@ -97,10 +97,7 @@ Options are set within the [`window.$docsify`](https://docsify.js.org/#/configur
       // chat panel title
       title: '聊天记录',
       // set avatar url
-      users: [
-        { nickname: 'yuki', avatar: '' },
-        { nickname: 'kokkoro', avatar: '' },
-      ],
+      users: [],
       // message dialog on the right (myself)
       myself: 'yuki',
       // animation interval (ms)
@@ -110,8 +107,95 @@ Options are set within the [`window.$docsify`](https://docsify.js.org/#/configur
 </script>
 ```
 
+### title
+
+- Type: `string`
+- Default: `'聊天记录'`
+
+Sets the chat panel title.
+
+You can also set the title for each chat panel individually in `<!-- title:xxx -->`, 
+
+**Configuration**
+
+```javascript
+window.$docsify = {
+  // ...
+  chat: {
+    title: 'chat history'
+  }
+};
+```
+
+**Example**
+
+```markdown
+<!-- chat:start -->
+
+<!-- title:yuki's chat history -->
+
+<!-- chat:end -->
+```
+
+### users
+
+- Type: `array`
+- Default: `[]`
+
+Specify a nickname to match the user's avatar.
+
+**Configuration**
+
+```javascript
+window.$docsify = {
+  // ...
+  chat: {
+    users: [
+      { nickname: 'yuki', avatar: 'images/yuki.png' },
+      { nickname: 'kokkoro', avatar: 'images/kokkoro.png' },
+    ]
+  }
+};
+```
+
+### myself
+
+- Type: `string`
+- Default: `null`
+
+Set your own global nickname, the dialog will be displayed on the right side of the chat panel.
+
+**Configuration**
+
+```javascript
+window.$docsify = {
+  // ...
+  chat: {
+    myself: 'yuki'
+  }
+};
+```
+
+### animation
+
+- Type: `number`
+- Default: `50`
+
+Adjust the duration of the chat panel fade-in and fade-out animation.
+
+**Configuration**
+
+```javascript
+window.$docsify = {
+  // ...
+  chat: {
+    animation: 50
+  }
+};
+```
+
 ## Postscript
 
 Because I wrote a chatbot framework, I needed a chat panel for illustrate. before I took screenshots directly in the software, but it felt too troublesome. I was thinking why can't it be generated directly with markdown? I've been looking for a long time, but I can't find any similar plugins, so I made one myself.
 
-In order to save time, the syntax refers to docsify-tabs, which took only half a day to make. Although it basically meets daily use, there may be some unknown bugs.
+In order to save time, the syntax refers to [docsify-tabs](https://github.com/jhildenbiddle/docsify-tabs), which took only half a day to make. Although it basically meets daily use, there may be some unknown bugs.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "docsify-chat",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "A docsify plugin for generate chat panel from markdown",
   "main": "lib/docsify-chat.js",
   "scripts": {

src/index.js

@@ -8,7 +8,7 @@ const classNames = {
 };
 const regex = {
   chatPanelMarkup: /[\r\n]*(\s*)(<!-+\s+chat:\s*?start\s+-+>)[\r\n]+([\s|\S]*?)[\r\n\s]+(<!-+\s+chat:\s*?end\s+-+>)/m,
-
+  panelTitleMarkup: /[\r\n]*(\s*)<!-+\s+title:\s*(.*)\s+-+>[\r\n]+([\s\S]*?)[\r\n]*\s*(?=<!-+\s+chat?:(?!replace))/m,
   chatCommentMarkup: /[\r\n]*(\s*)#{1,6}\s*[*_]{2}\s*(.*[^\s])\s*[*_]{2}[\r\n]+([\s\S]*?)(?=#{1,6}\s*[*_]{2}|<!-+\s+chat:\s*?end\s+-+>)/,
 };
 const setting = {
@@ -46,18 +46,25 @@ function renderChat(content, vm) {
 
   while (chatPanelMatch = regex.chatPanelMarkup.exec(content)) {
     let chatPanel = chatPanelMatch[0];
+    let panelTitle = setting.title;
     let chatStartReplacement = '';
     let chatEndReplacement = '';
 
+    const hasTitle = regex.panelTitleMarkup.test(chatPanel);
     const hasComments = regex.chatCommentMarkup.test(chatPanel);
     const chatPanelStart = chatPanelMatch[2];
     const chatPanelEnd = chatPanelMatch[4];
+
+    if (hasTitle) {
+      const TitleMatch = regex.panelTitleMarkup.exec(chatPanel);
+      panelTitle = TitleMatch[2];
+    }
     const chatControls = `
       <div class="${classNames.chatControls}">
         <div class="circle red"></div>
         <div class="circle yellow"></div>
         <div class="circle green"></div>
-        <div class="title">${setting.title}</div>
+        <div class="title">${panelTitle}</div>
       </div>
     `;
 

src/style.scss

@@ -53,6 +53,7 @@
     transition: transform 0.4s ease-out, opacity 0.4s ease-in;
 
     &.myself {
+      text-align: right;
       transform: translate(10%);
 
       .message-box {