docs: add blog about noIM and update Homepage

website/blog/2023-03-01-the-era-of-noIM.md

@@ -0,0 +1,31 @@
+---
+title: It's time to officially step into the era of noIM
+authors: moonrailgun
+image: /img/logo.svg
+keywords:
+  - tailchat
+  - noIM
+tags: [blog]
+---
+
+From far to now, there have been many rounds of changes in communication methods, from email to IRC, to today's communication tools such as Slack or Discord that include audio and video communication, and chats such as Telegram and Signal that focus on message privacy and security. Now, I think it's time to step into a new stage, the noIM (Not Only IM) stage.
+
+As people's needs for information communication methods continue to evolve, we need to collaborate on more and more platforms. We can exchange information on Slack, communicate design drafts on Figma, exchange documents on Notion, conduct video conferences on Zoom, and so on. With the growing power of the Web, most of the online tools can be operated on the web.
+
+This brings possibility to the concept of noIM.
+
+noIM means that an instant messaging application is not only for sending and receiving messages – of course, messaging tools will always be the core of instant messaging application iterations – but also means that it should undertake a multi-person collaborative circulation tool and responsibility. Because IM is the natural way, it represents the most basic way of communication and collaboration on the Internet. We can seamlessly connect various tools based on IM. Imagine that, we can do things in the same tool that we needed to switch between multiple tools before, and these tools can interact to a certain extent through the central IM.
+
+![](/img/intro/connect-apps.excalidraw.svg)
+
+Excellent chat systems such as Slack and Discord also provide an open platform, allowing third-party applications to interact with chat applications, but I don't think that's enough. Current integration methods simply send links, in the new era, we need a more native integration method. Many things should be shared and connected–such as account system, permission system, group relationship, etc.
+
+A basic noIM system should have an open design to allow it to be combined with other tools in a native way, or to implement all possible collaboration methods by itself - such as G Suite, in this way, the flow between applications can be very smooth, but I think a better way is to connect third-party application users to have the right to choose their favorite tools, so it is inevitable to design a sufficiently open design.
+
+So I designed a product like Tailchat. In addition to having an open platform with existing popular projects, Tailchat also provides a set of plugin mechanisms to help achieve deeper integration. Through Tailchat's plugin mechanism, any product can directly obtain all existing contexts of Tailchat, such as user system, permission system, etc. More importantly, Tailchat is an open source and open platform, which means Tailchat has better privacy, can develop plugins very well, and it's easy to make tools unique to users. This is the same as the ecology that VSCode wants to create, but unlike VSCode, Tailchat, as an IM, can naturally bring more interactions, which is a natural advantage of chat software. This is also why I believe that noIM can shine in the future.
+
+Github: [https://github.com/msgbyte/tailchat](https://github.com/msgbyte/tailchat)
+
+Office Website: [https://tailchat.msgbyte.com/](https://tailchat.msgbyte.com/)
+
+Try in online: [https://nightly.paw.msgbyte.com/](https://nightly.paw.msgbyte.com/)

website/docusaurus.config.js

@@ -108,7 +108,7 @@ const presetClassicOptions = {
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
 module.exports = {
   title: 'Tailchat',
-  tagline: 'A pluginify IM Application',
+  tagline: 'The next-generation noIM Application',
   url: 'https://tailchat.msgbyte.com', // TODO: 待修改成文档主页
   baseUrl: '/',
   onBrokenLinks: 'throw',

website/i18n/zh-Hans/docusaurus-plugin-content-blog/2023-03-01-the-era-of-noIM.md

@@ -0,0 +1,31 @@
+---
+title: 是时候正式步入noIM的时代了
+authors: moonrailgun
+image: /img/logo.svg
+keywords:
+  - tailchat
+tags: [blog]
+---
+
+从远至今，已经经历了很多轮沟通方式的变更，从邮件到IRC，再到如今的如 Slack 或者 Discord 这样的包含了音视频通讯的沟通工具，以及如 Telegram, Signal 这样侧重消息隐私安全的聊天工具。如今，我认为现在是时候步入新一代的，noIM(Not only IM) 的阶段。
+
+随着人们的对于信息沟通的方式的需求不断的演进，我们需要在越来越多的平台上进行协作。我们可以在Slack上进行信息的交流，在Figma上沟通设计稿，在Notion上交流文档，在Zoom上进行视频会议等等。随着 Web能力的越发强大，大多数的在线工具都可以在网页上操作。
+
+而这，给 noIM 的概念带来了可能。
+
+noIM，意味着一个即时通讯应用不仅仅做消息的发送与接受 —— 当然消息工具会一直是即时通讯应用迭代的核心 —— 更意味着应当承担一种多人协作的流转工具与职责。因为IM天然的，就代表着互联网时代最基本的沟通与协作方式。我们可以基于IM无缝的连接各种各样的工具。想象一下，我们可以在同一个工具中完成之前需要切换多个工具才能做到的事情，而且这些工具可以通过中心的IM来进行一定程度上的交互。
+
+
+![](/img/intro/connect-apps.excalidraw.svg)
+
+如Slack, Discord这样优秀的聊天系统也提供了开放平台，让第三方应用能够与聊天应用产生一定的交互，但是我认为这还远远不够，目前的现有的集成方式只不过是在发送一个个链接罢了，在新的时代我们需要更加原生的集成方式。很多东西本就该产生共享与联系——比如账户系统、权限系统、群组关系等。
+
+一个基本的noIM系统应当有一套开放式的设计来让其能够与其他工具以一种原生的方式结合在一起，或者说自己来实现所有的可能的协作方式 —— 如 G Suite，然而这种方式可以做到应用之间流转十分顺畅，但是我认为更好的方式是连接第三方应用用户有选择自己喜好工具的权利，那么设计一套足够开放的设计则是一种必然。
+
+因此，我设计了[Tailchat](https://tailchat.msgbyte.com/) 这样的一种产品，除了拥有和现有的流行项目都有开放平台以外，Tailchat还提供了一套插件机制来帮助实现更加深入的集成。通过 Tailchat 的插件机制, 任何产品都可以直接获取到 Tailchat 的现有的一切上下文，比如用户体系、权限体系等。更加重要的是，Tailchat是开源且开放的，这意味着Tailchat 拥有更好的隐私性，能够很好的开发插件，易于制作独属于用户的工具。在这一点和 VSCode 所要打造的生态是一样的，但是与VSCode不同的是，Tailchat 作为IM天然能够带来更多的交互，这是聊天软件天然的优势。也是我相信noIM能够在未来大放异彩的原因。
+
+Github: [https://github.com/msgbyte/tailchat](https://github.com/msgbyte/tailchat)
+
+官方文档: [https://tailchat.msgbyte.com/](https://tailchat.msgbyte.com/)
+
+在线尝试: [https://nightly.paw.msgbyte.com/](https://nightly.paw.msgbyte.com/)

website/src/components/HomepageHeader.less

@@ -13,7 +13,7 @@
     .title {
       margin-bottom: 24px;
       font-size: 2.25rem;
-      line-height: 1;
+      line-height: 1.5;
       font-weight: 900;
 
       @media (min-width: 997px) {
@@ -23,6 +23,38 @@
       @media (min-width: 1300px) {
         font-size: 5rem;
       }
+
+      strong {
+        position: relative;
+        color: var(--ifm-color-primary);
+        cursor: pointer;
+        user-select: none;
+
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: -0.125rem;
+          left: -0.5rem;
+          right: -0.5rem;
+          height: 0.75rem;
+
+          // Position the line behind the text so that
+          // it is still easily readable
+          z-index: -1;
+
+          // The SVG is added as an SVG background image
+          background-image: url('/img/underline.svg');
+          background-repeat: no-repeat;
+
+          // This allows the SVG to flex in size to fit
+          // any length of word. If the word is short,
+          // the SVG will be stretched vertically, if it
+          // is long, the SVG will be stretched horizontally.
+          // The jagged nature of this particular SVG works
+          // with this transforming.
+          background-size: cover;
+        }
+      }
     }
 
     .desc {
@@ -31,10 +63,20 @@
       color: rgb(153, 153, 153);
       font-size: 1rem;
       line-height: 1.5;
+      margin-bottom: 3rem;
 
       @media (min-width: 997px) {
         font-size: 1.5rem;
       }
+
+      small {
+        display: block;
+        font-size: 0.75rem;
+
+        @media (min-width: 997px) {
+          font-size: 1rem;
+        }
+      }
     }
 
     .btns {

website/src/components/HomepageHeader.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useReducer } from 'react';
 import Link from '@docusaurus/Link';
 import Head from '@docusaurus/Head';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@@ -7,9 +7,19 @@ import { useColorMode } from '@docusaurus/theme-common';
 import { inviteLink, nightlyUrl } from '../utils/consts';
 import './HomepageHeader.less';
 
+const alternative = ['Slack', 'Discord', 'Rocket.Chat'];
+
+export function getRandomAlternative() {
+  return alternative[Math.floor(Math.random() * alternative.length)];
+}
+
 export const HomepageHeader: React.FC = React.memo(() => {
   const { siteConfig } = useDocusaurusContext();
   const { colorMode } = useColorMode();
+  const [alternativeIndex, updateAlternative] = useReducer(
+    (index) => (index + 1) % alternative.length,
+    Math.floor(Math.random() * alternative.length)
+  );
 
   return (
     <div className="homepage-header">
@@ -18,13 +28,27 @@ export const HomepageHeader: React.FC = React.memo(() => {
         <link rel="prefetch" href="/img/hero-dark.png" />
       </Head>
 
-      <div className="screenshot flex-1 xl:flex-none">
+      <div className="screenshot">
         <img src={`/img/hero-${colorMode}.png`} alt="Preview of Tailchat" />
       </div>
 
       <div className="header">
         <h1 className="title">Open Source, Open Platform</h1>
-        <p className="desc">Tailchat: {siteConfig.tagline}</p>
+        <h3 className="title">
+          Not only Another{' '}
+          <strong onClick={updateAlternative}>
+            {alternative[alternativeIndex]}
+          </strong>
+        </h3>
+
+        <p className="desc">
+          Tailchat: {siteConfig.tagline}
+          <small>
+            <Link href="/blog/2023/03/01/the-era-of-noIM">
+              What is noIM(not only IM)?
+            </Link>
+          </small>
+        </p>
 
         <div className="btns">
           <Link className="button button--primary button--lg" to={inviteLink}>

website/static/img/underline.svg

@@ -0,0 +1,8 @@
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 15.6">
+  <style>
+    .st0{fill:#f3bc34}
+  </style>
+  <path class="st0" d="M206.8 7.3l-.1.3c.1-.2.2-.3.1-.3zM234.7 10h-.1c-.2.4-.1.3.1 0zM54.8 4.2l-.6-.4c.2.4.4.5.6.4zM17.1 5.1zM34.5 9.6l.1.3c0-.2 0-.3-.1-.3zM22.4 10.8c-.3-.1-.7-.1-1-.1.2.1.7.1 1 .1zM17.5 5c-.1.1-.2.1-.4.2.2-.1.3-.2.4-.2zM52.7 9.8l.5.9c-.1-.3-.3-.6-.5-.9zM19.5 11.6c-.2-.2-.4-.2-.6-.3 0 .2.3.3.6.3zM120.9 11.4c-.1.1-.2.2-.2.3.3-.1.3-.2.2-.3zM80.9 10.4h-.1s.1.1.2.1l-.1-.1zM92.6 10.4l-.2.2c.2-.1.2-.1.2-.2zM72.1 11.3c-.1.1-.3.2-.4.3l.4-.3z"/>
+  <path class="st0" d="M260 6c-1-.6-4.7-1.2-5.8.3-.2-.1.1-.3.2-.4-.9.2-2.2.1-3.6 0s-2.9-.2-4.2 0c-1 1.5-3.9-.6-4.8 1.4l.5-.4c.9.5-1.2 1.4-1.5 1.9-.8-1.2-.1-1-1-2l1.1.4-.3-1c-3.1 2.8-6.2-.9-8.2 1.1.1-.1.1-.3.2-.4-1.4-.5-2.3.8-3.3 1.2-.1-.5.6-.9 1.1-1.3-2.4-.3-6.4 1.2-9 .4-.9.7.4.9-.6 1.5-.8-.2-1.4-.7-.4-1.1-2.3-1.2-7.6 1-11.1-.2-1.8.8-.7 1.1-3.5 1.6.7-.5-.7-1.7 1-1.7l.2-.5c-2.8-.1-6.6-.3-8.1 1.2-.1-1.1-.5-.2-1.6-.8-.4.1 0 .2.2.2-1 .9-1.6-.1-2.3.1l.3-.2-2 .7c-.3-.2-.8-.4-.9-.7v.8c-1.1 0-.5-1-1.9-.8l.3.6c-.9-.4-2.2.4-2.4-.5 0-.2.1-.1.4-.1-1.3-1.2-3.5.3-5.1-.3l.4 1.3c-1.6.4-1-.3-.9-.7-1.1 0-1.3-.4-2.7-.6-.7.3-.4.5-.6.8l-1.5-.4 1-.7c-2.3 1.8-5.6-.4-7.2 1.2-.8-.4.8-.7.3-1-2.6-.9-6 1-8.2 0-3.6-1-7.8-.4-11.8-1.1l.1.3-2.9-.4c-.8.7-2.7.3-4 1.1.1-.3-.1-.7.2-.9-1.2.1-2.6.4-3.3-.1l.4-.3c-2.7-.3-6.4-.5-7.9.1-.9 0-.9-.6-1.1-1-1.6-.1-2.6.2-3.9.7-.3-.2-.7-.3-1-.6l-.6.8c-.6-.1-.1-.7-.6-.9-2.5.9-5.3-.1-7-.1l.2.4c-.7.3-2.1-.3-1.2-.7-3.4-.6-5.1 1.2-9.6.8-.6-1.5-4.1.3-4.8-1.4-1.9.4-3.2-.3-4.5.6 0-.2-.2-.2.1-.3-.8-.6-3.3-.2-5.3.2l-.1-.5c-.9 1.2-4.2.9-4.9 2-.2-.2.4-.5.7-.7-1-1.1-1.8.5-3.1.2.1-.3-.3-.6 0-.8-4.4-1.2-10.6.7-16.3-.1-1.6 0 .6 1.2-1.5 1.1-.6-.6 1-1.1-.3-1.4-.9.7-1.3.5-2.6.5.2-.4 0-.6.9-.9-.7-.5-3.1.9-4.5 0 .1.3-.2.5-.5.7-2.1 1-4.9-.9-5.1-.4 0 0-.7.2-.1.3-.8 0-1.9-.2-1.7-.7-.4.3-.8.8-1.4.8l.3-.6c-.4.1-.8.5-1.1.6l.6.4c-.9-.5-2.6.8-2.6-.4h.3l-1.7-.5c-.7.5-1.3 1-2.5.9-.5-1.3-2.9-.2-4.3-.3l.1-.4c-1.1.6-4 .4-3.5.6-1.1 0-2.6-.2-2-.6-.8.1-2.7.1-3.2.9l-1.8-1c-1 1.6-3.6-.5-3.6 1.2-1-.2-.8-.6-1.5-.9-1.4.9-2.8.8-4.2.7v-.2c-1.4-.1-3.1.8-5.1 1l-.5-1.2c-1 .2-1.3 1.2-2.3 1-.2-.2 0-.3.2-.3-1 .3-2.3.1-3.1-.2-1.5 1-2.7.7-3.9 1.8-1.3-1 1.7-.6.6-1.6-2.2-.4-4.4.4-6.7 1.1-.2-.2 0-.4.1-.7 0 0-1.2.9-2.2 1.8C.9 8.3 0 9.4.5 10c-.5.9-1.2 1.4.9 2 .6-.5 2.5-1.3 2.9-.4l.1-.9c2.6-.6.4 1.8 3.6 1.6l-.7-.3c.6-.1 1.1-.7 1.8-.5.2.2-.2.4-.5.6.9-.5 1.7-.9 2.6-1.4.1.5.1.8-.4 1.2 2.5-.2-.6-1.6 2.4-1.4.6.4-.2.6-.5.9 1.4.7 2.3-.1 3.8-.6.1.8-.9.7.3 1.2-.3-.4-.5-1.1.5-1.2-.4.8.7.4 1.6.5-.2-.3-.1-.6.2-.8.4-.1.8.1 1.4.1l-1.1-.7c1.5-.8 2.4.3 3.6.6-.1.1-.3.3-.5.3 1.2.3 2.5.9 4.1.1l-.3.1c2.9-.9-1-1.3 2.4-2.2 1.1.1-.4 2.6 2.1 1.6-1.3-.6 1.6-1.7 3.1-2L32.4 10c.6 0 1.6-.5 2-.3l-.1-.3c-.2-1.3 1.9.1 3-.7-1.3 1.8-1.4 1.5-1.6 3.2 1-1 2.2-1.9 4.1-1.8l-1.5 1.4c2.5.2 5.5-1.9 7.6-3-.5 1 .3 1.4-.6 2.2l2.4-.3-.7 1.1c1-1.2 2.1-.4 1.9-1.9-.3.2-.2.4-.7.3.1-.4.5-1.4 1.7-1.3.9.3-.5.6-.2 1 .8-.6.9.3 1.7-.1l-.8-.6c.6-.9 1.4-.1 2.2-.5-1 .4-.7.9-.3 1.4l-.1-.1c.8-.1 1.6-.7 2-.2l-.5 1.2.9-.9c.3.1.6.6 0 .8 2.8.7-.1-2.5 3.6-1.5 0 .5-.4.8-1.4.5-.2.7.1 1.1 1.1 1.4v.1c1.9 0 4.4 0 5.6-.8.4.3 0 .6-.4.9 2.1.4 2.8-.7 5 .1l-1-.4c1.4-.6 4-.8 5.3.1l-.4.3c1.3-.7 3.5.6 4 0-.6-.4 0-.6-.8-1l3.4-.7.2 1.2 1.8-.4c-.4-.5 2.4.4 2.5-.7 1 .4-.4.9-.8 1.4 1-.3 1.1.2 2.1-.5l1 1.1 2.6-.7c-.1.1 0 .2-.1.3 1.2-.9 3.1.6 4.6-.9-.1.1-.1.1-.1.2.9-.8 2.9-.2 3.7 0 1.4-.2.6-1 .6-1.4 3.9.4 2.7.3 6-.9 2 1.4-2.4 2.1.1 3 .4-.6 2.1-1.1 4.1-1.3 1.8.5 4.8.9 6.5 1.9l-.2-.9 2.6-.4-1.5 1.2c.4-.3 1.7-.8 2.6-1.2 2.7-.7 1.4 1.9 3.5.7.1.1.1.2.2.3.7-.6 2.4-.3 4.4-.5l-.7 1.1-1.3-.3c.7 1.1 2.1-.1 3.4 0 1.3-.3.7-1.3 1.4-1.6.5.1 1.2-.2 1.6.1 1.1.4.1 1.3-.3 1.8 1-1.1 1.4-.9 3.6-1.3.1.5-.1.8-.4.9.5-.1.9-.3 1.2-.8l.7.7c2.5 1 2.6-2 5.6-1.5-.8.6 2.6 0 3.5.7-1.1.1.4 1.6-.2 2.3 2.4.5 1-1.3 3-1.4l-.9 1.3c1.9-.5.5-.7 2.4-1.1-.5.4.8.4-.3.8 2.5.2 1.9.1 4.1.3l.2-1.3c.7-.1 1 .5 1.2.7-.3 0-.8-.1-.7.1.8 1.2 1.4-.6 2.4.5-.2-.4-.5-1 .4-1.1-.3.8 1.4.8 1.4 1.2-.6-.6 2-.2 2.1-1 1 .7-.4.6-.4 1.1.9-1 3.7 0 4.6-.6 0 .1.1.1.1.2 1.2-.6 3-.7 5.3-1.5l-.8.7c2.2.4 1.4-1.5 3.3-1.5-.4 1.1 3.1 0 2.2 1.2 1.1-.6 2.3-.8 3.1-1.7 1 .6-2.1 1.4-.6 1.8l1.6-.5.3.6c.1-.4 1.5-.4 1.4-.8.2.7.9 1.2.8 1.8 1-.2 2.4.5 3.3-.1l.1.3c1-1.3 3.1-.2 3.6-1.5l.6.7c1.5-.1 1.3-1.5 2-1.8.6 0 1.4-.2 2 0-2 .8 1 1.1 1.4 1.6.8 0 3.1 0 3.7-.7-1 .7-.4 1.2-2.1 1.3.9 1.3 2.6-.2 4.5-.1v.6c2.7-.4 2.8-1.5 4-2.5.3.8.1 1-.7 1.7 1.8.5 4.7-.1 6.7 0 .6.5.2.9-.5 1.1 2.1-.6 4.7.1 6-1.2-.5.5.9.3 1.6.6 0-.3.1-.6.2-.6 1.3-.6 4.1-1.1 5.6-.7l-.5.4c1.7.1 3-.5 4.3-.9 1.3-.4 2.6-.8 4.5-.4.7.3-.7 1.1.7 1 .7-.5.4-1.5 2.2-1.3l-.1.9 1.2-.9c-.7-.7-2.6-.4-1.3-1.2 1.6.8 1.3-.9 3.3 0-.4.1-1 .8-1.3 1.2 2 .4 3.4.1 4.8-.1 1.4-.3 2.8-.6 4.9-.2 2-.8 4.6-1.2 5.9-1.9 0 .9 0 1.7-.8 2.4 1.8 0 2.4-2.1 3.7-.9.7-1.3 4.7-1.2 5-3l2-.8z"/>
+  <path class="st0" d="M58.1 11.1c-1 0-1.9 0-2.3.2.2.2 2.3.6 2.3-.2zM208.2 13.3c-.1 0-.3.1-.4.1.1 0 .3 0 .4-.1zM216.3 12.9c-.1-.1-.2-.2-.4-.3 0 .3.1.5.4.3zM132.6 11.5zM178.5 13.7c.7-.4 1-.7 1-1-.4.1-.7.3-1 1zM163 12.6c-.1.1-.2.1-.3.2.3-.1.3-.2.3-.2zM130.2 12c.7-.4 1.6-.3 2.4-.5-.7.2-1.9-.3-2.4.5zM226.1 11.4l-.7.6.8-.4zM218.6 12c-.3-.1-1.7.3-1.3.6.4-.3.9-.5 1.3-.6zM189.6 11.4l-.3.6.7-.5z"/>
+</svg>