@ -3,6 +3,7 @@ import clsx from 'clsx';
import React , { useEffect , useState } from 'react' ; import React , { useEffect , useState } from 'react' ;
import Head from '@docusaurus/Head' ; import Head from '@docusaurus/Head' ;
import Link from '@docusaurus/Link' ; import Link from '@docusaurus/Link' ;
import Translate from '@docusaurus/Translate' ;
import { nightlyUrl } from '../utils/consts' ; import { nightlyUrl } from '../utils/consts' ;
import './FeatureSection.less' ; import './FeatureSection.less' ;
@ -37,21 +38,17 @@ export const FeatureSection: React.FC = React.memo(() => {
} ;
} ;
} , [ ] ) ;
} , [ ] ) ;
function Pill ( { section } ) {
function Pill ( { id, label } ) {
return (
return (
< div
< div
className = { clsx (
className = { clsx ( 'pill' , { active : visibleSection === id } ) }
'pill' ,
'flex-1 cursor-pointer rounded-md py-2 px-6 text-center font-jakarta text-sm font-semibold' ,
{ active : visibleSection === section }
) }
onClick = { ( ) = > {
onClick = { ( ) = > {
document
document
. getElementById ( section )
. getElementById ( id )
? . scrollIntoView ( { behavior : 'smooth' , block : 'center' } ) ;
? . scrollIntoView ( { behavior : 'smooth' , block : 'center' } ) ;
} }
} }
>
>
{ ` ${ section [ 0 ] . toUpperCase ( ) } ${ section . substring ( 1 ) } ` }
{ label }
< / div >
< / div >
) ;
) ;
}
}
@ -68,15 +65,17 @@ export const FeatureSection: React.FC = React.memo(() => {
< / Head >
< / Head >
< div className = "main" >
< div className = "main" >
< div className = "title" >
< div className = "title" >
< h2 className = "left" > Feature Overview < / h2 >
< h2 className = "left" >
< Translate > Feature Overview < / Translate >
< / h2 >
< div className = "right" >
< div className = "right" >
< div className = "right-body" >
< div className = "right-body" >
< Pill section= "messenger" / >
< Pill id= "messenger" label = { < Translate > Messenger < / Translate > } / >
< Pill section= "plugin" / >
< Pill id= "plugin" label = { < Translate > Plugin < / Translate > } / >
< Pill section= "roles" / >
< Pill id= "roles" label = { < Translate > Roles < / Translate > } / >
< Pill section= "bot" / >
< Pill id= "bot" label = { < Translate > Bot < / Translate > } / >
< Pill section= "platform" / >
< Pill id= "platform" label = { < Translate > Platform < / Translate > } / >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
@ -84,21 +83,29 @@ export const FeatureSection: React.FC = React.memo(() => {
< div className = "body" >
< div className = "body" >
< div className = "item" id = "messenger" >
< div className = "item" id = "messenger" >
< div className = "left" >
< div className = "left" >
< h3 > Messenger < / h3 >
< h3 >
< Translate > Messenger < / Translate >
< / h3 >
< p >
< p >
< Translate >
Basic message support , multi message type like
Basic message support , multi message type like
text / link / mention / image / file etc . and support append reaction
text / link / mention / image / file etc . and support append reaction
for anything you want with messages .
for anything you want with messages .
< / Translate >
< / p >
< / p >
< p >
< p >
< Translate >
You can join multiple groups , and discuss different topics ,
You can join multiple groups , and discuss different topics ,
perhaps information and notifications , through multiple panels
perhaps information and notifications , through multiple panels
in the group . Not just a simple chat .
in the group . Not just a simple chat .
< / Translate >
< / p >
< / p >
< p >
< p >
In the inbox , you can receive anything you need to know , such as
< Translate >
mention or plugin notification . Or you can push anything on
In the inbox , you can receive anything you need to know , such
as mention or plugin notification . Or you can push anything on
yourself .
yourself .
< / Translate >
< / p >
< / p >
< / div >
< / div >
< div className = "right" >
< div className = "right" >
@ -108,21 +115,27 @@ export const FeatureSection: React.FC = React.memo(() => {
< div className = "item reverse" id = "plugin" >
< div className = "item reverse" id = "plugin" >
< div className = "left" >
< div className = "left" >
< h3 > Plugin Center < / h3 >
< h3 >
< Translate > Plugin Center < / Translate >
< / h3 >
< p >
< p >
< Translate >
Tailchat has a complete plugin system . With plugins , you can
Tailchat has a complete plugin system . With plugins , you can
integrate your apps and projects into your chat app in any form
integrate your apps and projects into your chat app in any
you want . Unlike VSCode , Tailchat has fewer restrictions on the
form you want . Unlike VSCode , Tailchat has fewer restrictions
form of expression . I think Tailchat is not only a chat app , but
on the form of expression . I think Tailchat is not only a chat
also a platform for integrating different applications . You can
app , but also a platform for integrating different
start a video conference , listen to music , use online tools and
applications . You can start a video conference , listen to
more in Tailchat .
music , use online tools and more in Tailchat .
< / Translate >
< / p >
< / p >
< p >
< p >
< Translate >
At the same time , through plugins , you can further improve the
At the same time , through plugins , you can further improve the
chat experience , such as topic panel , end - to - end encryption ,
chat experience , such as topic panel , end - to - end encryption ,
rich text , message notification , online drawing , receiving push
rich text , message notification , online drawing , receiving
from third - party applications , etc .
push from third - party applications , etc .
< / Translate >
< / p >
< / p >
< / div >
< / div >
@ -133,19 +146,23 @@ export const FeatureSection: React.FC = React.memo(() => {
< div className = "item" id = "roles" >
< div className = "item" id = "roles" >
< div className = "left" >
< div className = "left" >
< h3 > Group Roles < / h3 >
< h3 >
< Translate > Group Roles < / Translate >
< / h3 >
< p >
< p >
Tailchat has a builtin RBAC permission management system . Based
< Translate >
on the combination of role assignment and permission points ,
Tailchat has a builtin RBAC permission management system .
various permission combinations can be matched . At the same
Based on the combination of role assignment and permission
time , permission points can be easily integrated by plugins ,
points , various permission combinations can be matched . At the
which are a very flexible design .
same time , permission points can be easily integrated by
plugins , which are a very flexible design .
< / Translate >
< / p >
< / p >
< Link
< Link
className = "button button--link"
className = "button button--link"
to = "/docs/contribution/dev/role"
to = "/docs/contribution/dev/role"
>
>
Learn More
< Translate > Learn More < / Translate >
< / Link >
< / Link >
< / div >
< / div >
< div className = "right" >
< div className = "right" >
@ -155,12 +172,16 @@ export const FeatureSection: React.FC = React.memo(() => {
< div className = "item reverse" id = "bot" >
< div className = "item reverse" id = "bot" >
< div className = "left" >
< div className = "left" >
< h3 > Bot < / h3 >
< h3 >
< Translate > Bot < / Translate >
< / h3 >
< p >
< p >
< Translate >
Tailchat has a very simple way to integrate third - party
Tailchat has a very simple way to integrate third - party
applications with bot like most applications . A simple url
applications with bot like most applications . A simple url
request or add openapi app or even create a backend plugin . You
request or add openapi app or even create a backend plugin .
can use anyway to connect anything , its free !
You can use anyway to connect anything , its free !
< / Translate >
< / p >
< / p >
< / div >
< / div >
@ -171,22 +192,30 @@ export const FeatureSection: React.FC = React.memo(() => {
< div className = "item" id = "platform" >
< div className = "item" id = "platform" >
< div className = "left" >
< div className = "left" >
< h3 > Multi - platform Support < / h3 >
< h3 >
< Translate > Multi - platform Support < / Translate >
< / h3 >
< p >
< p >
< Translate >
Tailchat design on HTML , and fit any platform or os , but its
Tailchat design on HTML , and fit any platform or os , but its
still some native support cannot provide in web . So Tailchat
still some native support cannot provide in web . So Tailchat
also has client to provide os support like mobile notification ,
also has client to provide os support like mobile notification
desktop screenshot and etc .
, desktop screenshot and etc .
< / Translate >
< / p >
< / p >
< div className = "btns" >
< div className = "btns" >
< Link className = "button button--primary" to = { nightlyUrl } >
< Link className = "button button--primary" to = { nightlyUrl } >
Web
Web
< / Link >
< / Link >
< Link className = "button button--secondary disabled" >
< Link className = "button button--secondary disabled" >
Mobile ( in Alpha Test )
Mobile (
< Translate >
in Alpha Test , Join us for Early Experience
< / Translate >
)
< / Link >
< / Link >
< Link className = "button button--secondary disabled" >
< Link className = "button button--secondary disabled" >
Desktop ( in Alpha Test )
Desktop ( < Translate > in Alpha Test < / Translate > )
< / Link >
< / Link >
< / div >
< / div >
< / div >
< / div >
moonrailgun
2 years ago