Merge pull request #667 from toeverything/feat/add-i18n

feat：add i18n support

packages/app/src/components/404/index.tsx

@@ -1,9 +1,10 @@
 import { NotFoundTitle, PageContainer } from './styles';
-
+import { useTranslation } from 'react-i18next';
 export const NotfoundPage = () => {
+  const { t } = useTranslation();
   return (
     <PageContainer>
-      <NotFoundTitle>404 - Page Not Found</NotFoundTitle>
+      <NotFoundTitle>{t('404 - Page Not Found')}</NotFoundTitle>
     </PageContainer>
   );
 };

packages/app/src/components/contact-modal/index.tsx

@@ -23,7 +23,7 @@ import {
   StyledModalFooter,
 } from './style';
 import bg from '@/components/contact-modal/bg.png';
-
+import { useTranslation } from 'react-i18next';
 const linkList = [
   {
     icon: <GithubIcon />,
@@ -51,20 +51,6 @@ const linkList = [
     link: 'https://discord.gg/Arn7TqJBvG',
   },
 ];
-const rightLinkList = [
-  {
-    icon: <LogoIcon />,
-    title: 'Official Website ',
-    subTitle: 'AFFiNE.pro',
-    link: 'https://affine.pro',
-  },
-  {
-    icon: <DocIcon />,
-    title: 'AFFiNE Community',
-    subTitle: 'community.affine.pro',
-    link: 'https://community.affine.pro',
-  },
-];
 
 type TransitionsModalProps = {
   open: boolean;
@@ -72,6 +58,21 @@ type TransitionsModalProps = {
 };
 
 export const ContactModal = ({ open, onClose }: TransitionsModalProps) => {
+  const { t } = useTranslation();
+  const rightLinkList = [
+    {
+      icon: <LogoIcon />,
+      title: t('Official Website'),
+      subTitle: 'AFFiNE.pro',
+      link: 'https://affine.pro',
+    },
+    {
+      icon: <DocIcon />,
+      title: t('AFFiNE Community'),
+      subTitle: 'community.affine.pro',
+      link: 'https://community.affine.pro',
+    },
+  ];
   return (
     <Modal open={open} onClose={onClose} data-testid="contact-us-modal-content">
       <ModalWrapper
@@ -109,7 +110,7 @@ export const ContactModal = ({ open, onClose }: TransitionsModalProps) => {
             })}
           </StyledLeftContainer>
           <StyledRightContainer>
-            <StyledSubTitle>Get in touch!</StyledSubTitle>
+            <StyledSubTitle>{t('Get in touch!')}</StyledSubTitle>
             {linkList.map(({ icon, title, link }) => {
               return (
                 <StyledSmallLink key={title} href={link} target="_blank">
@@ -128,7 +129,7 @@ export const ContactModal = ({ open, onClose }: TransitionsModalProps) => {
               target="_blank"
               rel="noreferrer"
             >
-              How is AFFiNE Alpha different？
+              {t('How is AFFiNE Alpha different?')}
             </a>
           </p>
           <p>Copyright &copy; 2022 Toeverything</p>

packages/app/src/components/editor-mode-switch/index.tsx

@@ -15,7 +15,7 @@ import { useTheme } from '@/providers/themeProvider';
 import { EdgelessIcon, PaperIcon } from './icons';
 import useCurrentPageMeta from '@/hooks/use-current-page-meta';
 import { usePageHelper } from '@/hooks/use-page-helper';
-
+import { useTranslation } from 'react-i18next';
 const PaperItem = ({ active }: { active?: boolean }) => {
   const {
     theme: {
@@ -96,7 +96,7 @@ export const EditorModeSwitch = ({
     setRadioItemStatus(modifyRadioItemStatus());
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isHover, mode]);
-
+  const { t } = useTranslation();
   return (
     <StyledAnimateRadioContainer
       data-testid="editor-mode-switcher"
@@ -106,7 +106,7 @@ export const EditorModeSwitch = ({
     >
       <AnimateRadioItem
         isLeft={true}
-        label="Paper"
+        label={t('Paper')}
         icon={<PaperItem />}
         active={mode === 'page'}
         status={radioItemStatus.left}
@@ -126,7 +126,7 @@ export const EditorModeSwitch = ({
       <StyledMiddleLine hidden={!isHover} dark={themeMode === 'dark'} />
       <AnimateRadioItem
         isLeft={false}
-        label="Edgeless"
+        label={t('Edgeless')}
         data-testid="switch-edgeless-item"
         icon={<EdgelessItem />}
         active={mode === 'edgeless'}

packages/app/src/components/header/header-right-items/editor-option-menu.tsx

@@ -16,12 +16,13 @@ import { usePageHelper } from '@/hooks/use-page-helper';
 import { useConfirm } from '@/providers/confirm-provider';
 import useCurrentPageMeta from '@/hooks/use-current-page-meta';
 import { toast } from '@/ui/toast';
-
+import { useTranslation } from 'react-i18next';
 const PopoverContent = () => {
   const { editor } = useAppState();
   const { toggleFavoritePage, toggleDeletePage } = usePageHelper();
   const { changePageMode } = usePageHelper();
   const { confirm } = useConfirm();
+  const { t } = useTranslation();
   const {
     mode = 'page',
     id = '',
@@ -35,11 +36,13 @@ const PopoverContent = () => {
         data-testid="editor-option-menu-favorite"
         onClick={() => {
           toggleFavoritePage(id);
-          toast(!favorite ? 'Removed to Favourites' : 'Added to Favourites');
+          toast(
+            !favorite ? t('Removed to Favourites') : t('Added to Favourites')
+          );
         }}
         icon={favorite ? <FavouritedIcon /> : <FavouritesIcon />}
       >
-        {favorite ? 'Remove' : 'Add'} to favourites
+        {favorite ? t('Remove to favourites') : t('Add to favourites')}
       </MenuItem>
       <MenuItem
         icon={mode === 'page' ? <EdgelessIcon /> : <PaperIcon />}
@@ -48,7 +51,8 @@ const PopoverContent = () => {
           changePageMode(id, mode === 'page' ? 'edgeless' : 'page');
         }}
       >
-        Convert to {mode === 'page' ? 'Edgeless' : 'Page'}
+        {t('Convert to ')}
+        {mode === 'page' ? t('Edgeless') : t('Page')}
       </MenuItem>
       <Menu
         placement="left-start"
@@ -60,7 +64,7 @@ const PopoverContent = () => {
               }}
               icon={<ExportToHtmlIcon />}
             >
-              Export to HTML
+              {t('Export to HTML')}
             </MenuItem>
             <MenuItem
               onClick={() => {
@@ -68,31 +72,33 @@ const PopoverContent = () => {
               }}
               icon={<ExportToMarkdownIcon />}
             >
-              Export to Markdown
+              {t('Export to Markdown')}
             </MenuItem>
           </>
         }
       >
         <MenuItem icon={<ExportIcon />} isDir={true}>
-          Export
+          {t('Export')}
         </MenuItem>
       </Menu>
       <MenuItem
         data-testid="editor-option-menu-delete"
         onClick={() => {
           confirm({
-            title: 'Delete page?',
+            title: t('Delete page?'),
-            content: `${title || 'Untitled'} will be moved to Trash`,
+            content: t('will be moved to Trash', {
-            confirmText: 'Delete',
+              title: title || 'Untitled',
+            }),
+            confirmText: t('Delete'),
             confirmType: 'danger',
           }).then(confirm => {
             confirm && toggleDeletePage(id);
-            confirm && toast('Moved to Trash');
+            confirm && toast(t('Moved to Trash'));
           });
         }}
         icon={<TrashIcon />}
       >
-        Delete
+        {t('Delete')}
       </MenuItem>
     </>
   );

packages/app/src/components/header/quick-search-button.tsx

@@ -3,15 +3,15 @@ import { IconButton, IconButtonProps } from '@/ui/button';
 import { Tooltip } from '@/ui/tooltip';
 import { ArrowDownIcon } from '@blocksuite/icons';
 import { useModal } from '@/providers/global-modal-provider';
-
+import { useTranslation } from 'react-i18next';
 export const QuickSearchButton = ({
   onClick,
   ...props
 }: Omit<IconButtonProps, 'children'>) => {
   const { triggerQuickSearchModal } = useModal();
-
+  const { t } = useTranslation();
   return (
-    <Tooltip content="Switch to" placement="bottom">
+    <Tooltip content={t('Switch to')} placement="bottom">
       <IconButton
         data-testid="header-quickSearchButton"
         {...props}

packages/app/src/components/help-island/index.tsx

@@ -8,6 +8,7 @@ import {
 import { CloseIcon, ContactIcon, HelpIcon, KeyboardIcon } from './icons';
 import Grow from '@mui/material/Grow';
 import { Tooltip } from '@/ui/tooltip';
+import { useTranslation } from 'react-i18next';
 import { useModal } from '@/providers/global-modal-provider';
 import { useTheme } from '@/providers/themeProvider';
 import useCurrentPageMeta from '@/hooks/use-current-page-meta';
@@ -22,7 +23,7 @@ export const HelpIsland = ({
   const { mode: editorMode } = useCurrentPageMeta() || {};
   const { triggerShortcutsModal, triggerContactModal } = useModal();
   const isEdgelessDark = mode === 'dark' && editorMode === 'edgeless';
-
+  const { t } = useTranslation();
   return (
     <>
       <StyledIsland
@@ -37,7 +38,7 @@ export const HelpIsland = ({
         <Grow in={showContent}>
           <StyledIslandWrapper>
             {showList.includes('contact') && (
-              <Tooltip content="Contact Us" placement="left-end">
+              <Tooltip content={t('Contact Us')} placement="left-end">
                 <StyledIconWrapper
                   data-testid="right-bottom-contact-us-icon"
                   isEdgelessDark={isEdgelessDark}
@@ -51,7 +52,7 @@ export const HelpIsland = ({
               </Tooltip>
             )}
             {showList.includes('shortcuts') && (
-              <Tooltip content="Keyboard Shortcuts" placement="left-end">
+              <Tooltip content={t('Keyboard Shortcuts')} placement="left-end">
                 <StyledIconWrapper
                   data-testid="shortcuts-icon"
                   isEdgelessDark={isEdgelessDark}

packages/app/src/components/import/index.tsx

@@ -6,6 +6,7 @@ import Loading from '@/components/loading';
 import { usePageHelper } from '@/hooks/use-page-helper';
 import { useAppState } from '@/providers/app-state-provider/context';
 import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 // import { Tooltip } from '@/ui/tooltip';
 type ImportModalProps = {
   open: boolean;
@@ -19,6 +20,7 @@ export const ImportModal = ({ open, onClose }: ImportModalProps) => {
   const [status, setStatus] = useState<'unImported' | 'importing'>('importing');
   const { openPage, createPage } = usePageHelper();
   const { currentWorkspace } = useAppState();
+  const { t } = useTranslation();
   const _applyTemplate = function (pageId: string, template: Template) {
     const page = currentWorkspace?.getPage(pageId);
 
@@ -84,7 +86,7 @@ export const ImportModal = ({ open, onClose }: ImportModalProps) => {
     <Modal open={open} onClose={onClose}>
       <ModalWrapper width={460} minHeight={240}>
         <ModalCloseButton onClick={onClose} />
-        <StyledTitle>Import</StyledTitle>
+        <StyledTitle>{t('Import')}</StyledTitle>
 
         {status === 'unImported' && (
           <StyledButtonWrapper>

packages/app/src/components/page-list/index.tsx

@@ -24,7 +24,7 @@ import { useAppState } from '@/providers/app-state-provider/context';
 import { toast } from '@/ui/toast';
 import { usePageHelper } from '@/hooks/use-page-helper';
 import { useTheme } from '@/providers/themeProvider';
-
+import { useTranslation } from 'react-i18next';
 const FavoriteTag = ({
   pageMeta: { favorite, id },
 }: {
@@ -32,9 +32,10 @@ const FavoriteTag = ({
 }) => {
   const { toggleFavoritePage } = usePageHelper();
   const { theme } = useTheme();
+  const { t } = useTranslation();
   return (
     <Tooltip
-      content={favorite ? 'Favourited' : 'Favourite'}
+      content={favorite ? t('Favourited') : t('Favourite')}
       placement="top-start"
     >
       <IconButton
@@ -43,7 +44,9 @@ const FavoriteTag = ({
         onClick={e => {
           e.stopPropagation();
           toggleFavoritePage(id);
-          toast(!favorite ? 'Removed to Favourites' : 'Added to Favourites');
+          toast(
+            !favorite ? t('Removed to Favourites') : t('Added to Favourites')
+          );
         }}
         style={{
           color: favorite ? theme.colors.primaryColor : theme.colors.iconColor,
@@ -71,6 +74,7 @@ export const PageList = ({
 }) => {
   const router = useRouter();
   const { currentWorkspaceId } = useAppState();
+  const { t } = useTranslation();
   if (pageList.length === 0) {
     return <Empty />;
   }
@@ -80,10 +84,10 @@ export const PageList = ({
       <Table>
         <TableHead>
           <TableRow>
-            <TableCell proportion={0.5}>Title</TableCell>
+            <TableCell proportion={0.5}>{t('Title')}</TableCell>
-            <TableCell proportion={0.2}>Created</TableCell>
+            <TableCell proportion={0.2}>{t('Created')}</TableCell>
             <TableCell proportion={0.2}>
-              {isTrash ? 'Moved to Trash' : 'Updated'}
+              {isTrash ? t('Moved to Trash') : t('Updated')}
             </TableCell>
             <TableCell proportion={0.1}></TableCell>
           </TableRow>
@@ -108,7 +112,7 @@ export const PageList = ({
                         <PaperIcon />
                       )}
                       <Content ellipsis={true} color="inherit">
-                        {pageMeta.title || 'Untitled'}
+                        {pageMeta.title || t('Untitled')}
                       </Content>
                     </StyledTitleLink>
                     {showFavoriteTag && <FavoriteTag pageMeta={pageMeta} />}

packages/app/src/components/page-list/operation-cell.tsx

@@ -14,23 +14,25 @@ import {
 } from '@blocksuite/icons';
 import { toast } from '@/ui/toast';
 import { usePageHelper } from '@/hooks/use-page-helper';
-
+import { useTranslation } from 'react-i18next';
 export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
   const { id, favorite } = pageMeta;
   const { openPage } = usePageHelper();
   const { toggleFavoritePage, toggleDeletePage } = usePageHelper();
   const { confirm } = useConfirm();
-
+  const { t } = useTranslation();
   const OperationMenu = (
     <>
       <MenuItem
         onClick={() => {
           toggleFavoritePage(id);
-          toast(!favorite ? 'Removed to Favourites' : 'Added to Favourites');
+          toast(
+            !favorite ? t('Removed to Favourites') : t('Added to Favourites')
+          );
         }}
         icon={favorite ? <FavouritedIcon /> : <FavouritesIcon />}
       >
-        {favorite ? 'Remove' : 'Add'} to favourites
+        {favorite ? t('Remove to favourites') : t('Add to favourites')}
       </MenuItem>
       <MenuItem
         onClick={() => {
@@ -38,23 +40,25 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
         }}
         icon={<OpenInNewIcon />}
       >
-        Open in new tab
+        {t('Open in new tab')}
       </MenuItem>
       <MenuItem
         onClick={() => {
           confirm({
-            title: 'Delete page?',
+            title: t('Delete page?'),
-            content: `${pageMeta.title || 'Untitled'} will be moved to Trash`,
+            content: t('will be moved to Trash', {
-            confirmText: 'Delete',
+              title: pageMeta.title || 'Untitled',
+            }),
+            confirmText: t('Delete'),
             confirmType: 'danger',
           }).then(confirm => {
             confirm && toggleDeletePage(id);
-            toast('Moved to Trash');
+            toast(t('Moved to Trash'));
           });
         }}
         icon={<TrashIcon />}
       >
-        Delete
+        {t('Delete')}
       </MenuItem>
     </>
   );
@@ -74,7 +78,7 @@ export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
   const { openPage, getPageMeta } = usePageHelper();
   const { toggleDeletePage, permanentlyDeletePage } = usePageHelper();
   const { confirm } = useConfirm();
-
+  const { t } = useTranslation();
   return (
     <Wrapper>
       <IconButton
@@ -82,7 +86,7 @@ export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
         style={{ marginRight: '12px' }}
         onClick={() => {
           toggleDeletePage(id);
-          toast(`${getPageMeta(id)?.title || 'Untitled'} restored`);
+          toast(t('restored', { title: getPageMeta(id)?.title || 'Untitled' }));
           openPage(id);
         }}
       >
@@ -92,13 +96,13 @@ export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
         darker={true}
         onClick={() => {
           confirm({
-            title: 'Delete permanently?',
+            title: t('Delete permanently?'),
-            content: "Once deleted, you can't undo this action.",
+            content: t("Once deleted, you can't undo this action."),
-            confirmText: 'Delete',
+            confirmText: t('Delete'),
             confirmType: 'danger',
           }).then(confirm => {
             confirm && permanentlyDeletePage(id);
-            toast('Permanently deleted');
+            toast(t('Permanently deleted'));
           });
         }}
       >

packages/app/src/components/quick-search/config.ts

@@ -1,21 +1,22 @@
 import { AllPagesIcon, FavouritesIcon, TrashIcon } from '@blocksuite/icons';
-
+import { useTranslation } from 'react-i18next';
-export const config = (currentWorkspaceId: string) => {
+export const useSwitchToConfig = (currentWorkspaceId: string) => {
+  const { t } = useTranslation();
   const List = [
     {
-      title: 'All pages',
+      title: t('All pages'),
       href: currentWorkspaceId ? `/workspace/${currentWorkspaceId}/all` : '',
       icon: AllPagesIcon,
     },
     {
-      title: 'Favourites',
+      title: t('Favourites'),
       href: currentWorkspaceId
         ? `/workspace/${currentWorkspaceId}/favorite`
         : '',
       icon: FavouritesIcon,
     },
     {
-      title: 'Trash',
+      title: t('Trash'),
       href: currentWorkspaceId ? `/workspace/${currentWorkspaceId}/trash` : '',
       icon: TrashIcon,
     },

packages/app/src/components/quick-search/footer.tsx

@@ -4,10 +4,11 @@ import { StyledModalFooterContent } from './style';
 import { useModal } from '@/providers/global-modal-provider';
 import { Command } from 'cmdk';
 import { usePageHelper } from '@/hooks/use-page-helper';
-
+import { useTranslation } from 'react-i18next';
 export const Footer = (props: { query: string }) => {
   const { triggerQuickSearchModal } = useModal();
   const { openPage, createPage } = usePageHelper();
+  const { t } = useTranslation();
   const query = props.query;
 
   return (
@@ -25,9 +26,9 @@ export const Footer = (props: { query: string }) => {
       <StyledModalFooterContent>
         <AddIcon />
         {query ? (
-          <span>New &quot;{query}&quot; page</span>
+          <span>{t('New Keyword Page', { query: query })}</span>
         ) : (
-          <span>New page</span>
+          <span>{t('New Page')}</span>
         )}
       </StyledModalFooterContent>
     </Command.Item>

packages/app/src/components/quick-search/results.tsx

@@ -5,8 +5,9 @@ import { PaperIcon, EdgelessIcon } from '@blocksuite/icons';
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { useAppState } from '@/providers/app-state-provider';
 import { useRouter } from 'next/router';
-import { config } from './config';
+import { useSwitchToConfig } from './config';
 import { NoResultSVG } from './noResultSVG';
+import { useTranslation } from 'react-i18next';
 import usePageHelper from '@/hooks/use-page-helper';
 import usePageMetaList from '@/hooks/use-page-meta-list';
 export const Results = (props: {
@@ -25,8 +26,9 @@ export const Results = (props: {
   const router = useRouter();
   const { currentWorkspaceId } = useAppState();
   const { search } = usePageHelper();
-  const List = config(currentWorkspaceId);
+  const List = useSwitchToConfig(currentWorkspaceId);
   const [results, setResults] = useState(new Map<string, string | undefined>());
+  const { t } = useTranslation();
   useEffect(() => {
     setResults(search(query));
     setLoading(false);
@@ -47,7 +49,9 @@ export const Results = (props: {
     <>
       {query ? (
         resultsPageMeta.length ? (
-          <Command.Group heading={`Find ${resultsPageMeta.length} results`}>
+          <Command.Group
+            heading={t('Find results', { number: resultsPageMeta.length })}
+          >
             {resultsPageMeta.map(result => {
               return (
                 <Command.Item
@@ -72,12 +76,12 @@ export const Results = (props: {
           </Command.Group>
         ) : (
           <StyledNotFound>
-            <span>Find 0 result</span>
+            <span>{t('Find 0 result')}</span>
             <NoResultSVG />
           </StyledNotFound>
         )
       ) : (
-        <Command.Group heading="Switch to">
+        <Command.Group heading={t('Switch to')}>
           {List.map(link => {
             return (
               <Command.Item

packages/app/src/components/shortcuts-modal/config.ts

@@ -1,71 +1,85 @@
-export const macKeyboardShortcuts = {
+import { useTranslation } from 'react-i18next';
-  Undo: '⌘+Z',
+export const useMacKeyboardShortcuts = () => {
-  Redo: '⌘+⇧+Z',
+  const { t } = useTranslation();
-  Bold: '⌘+B',
+  return {
-  Italic: '⌘+I',
+    [t('Undo')]: '⌘+Z',
-  Underline: '⌘+U',
+    [t('Redo')]: '⌘+⇧+Z',
-  Strikethrough: '⌘+⇧+S',
+    [t('Bold')]: '⌘+B',
-  'Inline code': ' ⌘+E',
+    [t('Italic')]: '⌘+I',
-  'Code block': '⌘+⌥+C',
+    [t('Underline')]: '⌘+U',
-  Link: '⌘+K',
+    [t('Strikethrough')]: '⌘+⇧+S',
-  'Body text': '⌘+⌥+0',
+    [t('Inline code')]: ' ⌘+E',
-  'Heading 1': '⌘+⌥+1',
+    [t('Code block')]: '⌘+⌥+C',
-  'Heading 2': '⌘+⌥+2',
+    [t('Link')]: '⌘+K',
-  'Heading 3': '⌘+⌥+3',
+    [t('Body text')]: '⌘+⌥+0',
-  'Heading 4': '⌘+⌥+4',
+    [t('Heading', { number: '1' })]: '⌘+⌥+1',
-  'Heading 5': '⌘+⌥+5',
+    [t('Heading', { number: '2' })]: '⌘+⌥+2',
-  'Heading 6': '⌘+⌥+6',
+    [t('Heading', { number: '3' })]: '⌘+⌥+3',
-  'Increase indent': 'Tab',
+    [t('Heading', { number: '4' })]: '⌘+⌥+4',
-  'Reduce indent': '⇧+Tab',
+    [t('Heading', { number: '5' })]: '⌘+⌥+5',
+    [t('Heading', { number: '6' })]: '⌘+⌥+6',
+    [t('Increase indent')]: 'Tab',
+    [t('Reduce indent')]: '⇧+Tab',
+  };
 };
 
-export const macMarkdownShortcuts = {
+export const useMacMarkdownShortcuts = () => {
-  Bold: '**Text** ',
+  const { t } = useTranslation();
-  Italic: '*Text* ',
+  return {
-  Underline: '~Text~ ',
+    [t('Bold')]: '**Text** ',
-  Strikethrough: '~~Text~~ ',
+    [t('Italic')]: '*Text* ',
-  Divider: '***',
+    [t('Underline')]: '~Text~ ',
-  'Inline code': '`Text` ',
+    [t('Strikethrough')]: '~~Text~~ ',
-  'Code block': '``` Space',
+    [t('Divider')]: '***',
-  'Heading 1': '# Text',
+    [t('Inline code')]: '`Text` ',
-  'Heading 2': '## Text',
+    [t('Code block')]: '``` Space',
-  'Heading 3': '### Text',
+    [t('Heading', { number: '1' })]: '# Text',
-  'Heading 4': '#### Text',
+    [t('Heading', { number: '2' })]: '## Text',
-  'Heading 5': '##### Text',
+    [t('Heading', { number: '3' })]: '### Text',
-  'Heading 6': '###### Text',
+    [t('Heading', { number: '4' })]: '#### Text',
+    [t('Heading', { number: '5' })]: '##### Text',
+    [t('Heading', { number: '6' })]: '###### Text',
+  };
 };
 
-export const windowsKeyboardShortcuts = {
+export const useWindowsKeyboardShortcuts = () => {
-  Undo: 'Ctrl+Z',
+  const { t } = useTranslation();
-  Redo: 'Ctrl+Y',
+  return {
-  Bold: 'Ctrl+B',
+    [t('Undo')]: 'Ctrl+Z',
-  Italic: 'Ctrl+I',
+    [t('Redo')]: 'Ctrl+Y',
-  Underline: 'Ctrl+U',
+    [t('Bold')]: 'Ctrl+B',
-  Strikethrough: 'Ctrl+Shift+S',
+    [t('Italic')]: 'Ctrl+I',
-  'Inline code': ' Ctrl+E',
+    [t('Underline')]: 'Ctrl+U',
-  'Code block': 'Ctrl+Alt+C',
+    [t('Strikethrough')]: 'Ctrl+Shift+S',
-  Link: 'Ctrl+K',
+    [t('Inline code')]: ' Ctrl+E',
-  'Body text': 'Ctrl+Shift+0',
+    [t('Code block')]: 'Ctrl+Alt+C',
-  'Heading 1': 'Ctrl+Shift+1',
+    [t('Link')]: 'Ctrl+K',
-  'Heading 2': 'Ctrl+Shift+2',
+    [t('Body text')]: 'Ctrl+Shift+0',
-  'Heading 3': 'Ctrl+Shift+3',
+    [t('Heading', { number: '1' })]: 'Ctrl+Shift+1',
-  'Heading 4': 'Ctrl+Shift+4',
+    [t('Heading', { number: '2' })]: 'Ctrl+Shift+2',
-  'Heading 5': 'Ctrl+Shift+5',
+    [t('Heading', { number: '3' })]: 'Ctrl+Shift+3',
-  'Heading 6': 'Ctrl+Shift+6',
+    [t('Heading', { number: '4' })]: 'Ctrl+Shift+4',
-  'Increase indent': 'Tab',
+    [t('Heading', { number: '5' })]: 'Ctrl+Shift+5',
-  'Reduce indent': 'Shift+Tab',
+    [t('Heading', { number: '6' })]: 'Ctrl+Shift+6',
+    [t('Increase indent')]: 'Tab',
+    [t('Reduce indent')]: 'Shift+Tab',
+  };
+};
+export const useWinMarkdownShortcuts = () => {
+  const { t } = useTranslation();
+  return {
+    [t('Bold')]: '**Text** ',
+    [t('Italic')]: '*Text* ',
+    [t('Underline')]: '~Text~ ',
+    [t('Strikethrough')]: '~~Text~~ ',
+    [t('Divider')]: '***',
+    [t('Inline code')]: '`Text` ',
+    [t('Code block')]: '``` Text',
+    [t('Heading', { number: '1' })]: '# Text',
+    [t('Heading', { number: '2' })]: '## Text',
+    [t('Heading', { number: '3' })]: '### Text',
+    [t('Heading', { number: '4' })]: '#### Text',
+    [t('Heading', { number: '5' })]: '##### Text',
+    [t('Heading', { number: '6' })]: '###### Text',
   };
-export const winMarkdownShortcuts = {
-  Bold: '**Text** ',
-  Italic: '*Text* ',
-  Underline: '~Text~ ',
-  Strikethrough: '~~Text~~ ',
-  'Inline code': '`Text` ',
-  'Code block': '``` Text',
-  'Heading 1': '# Text',
-  'Heading 2': '## Text',
-  'Heading 3': '### Text',
-  'Heading 4': '#### Text',
-  'Heading 5': '##### Text',
-  'Heading 6': '###### Text',
 };

packages/app/src/components/shortcuts-modal/index.tsx

@@ -8,14 +8,15 @@ import {
   StyledTitle,
 } from './style';
 import {
-  macKeyboardShortcuts,
+  useMacKeyboardShortcuts,
-  macMarkdownShortcuts,
+  useMacMarkdownShortcuts,
-  windowsKeyboardShortcuts,
+  useWindowsKeyboardShortcuts,
-  winMarkdownShortcuts,
+  useWinMarkdownShortcuts,
 } from '@/components/shortcuts-modal/config';
 import Slide from '@mui/material/Slide';
 import { ModalCloseButton } from '@/ui/modal';
 import { getUaHelper } from '@/utils';
+import { useTranslation } from 'react-i18next';
 type ModalProps = {
   open: boolean;
   onClose: () => void;
@@ -26,12 +27,18 @@ const isMac = () => {
 };
 
 export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
+  const { t } = useTranslation();
+  const macMarkdownShortcuts = useMacMarkdownShortcuts();
+  const winMarkdownShortcuts = useWinMarkdownShortcuts();
+  const macKeyboardShortcuts = useMacKeyboardShortcuts();
+  const windowsKeyboardShortcuts = useWindowsKeyboardShortcuts();
   const markdownShortcuts = isMac()
     ? macMarkdownShortcuts
     : winMarkdownShortcuts;
   const keyboardShortcuts = isMac()
     ? macKeyboardShortcuts
     : windowsKeyboardShortcuts;
+
   return createPortal(
     <Slide direction="left" in={open} mountOnEnter unmountOnExit>
       <StyledShortcutsModal data-testid="shortcuts-modal">
@@ -39,7 +46,7 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
           <StyledModalHeader>
             <StyledTitle>
               <KeyboardIcon />
-              Shortcuts
+              {t('Shortcuts')}
             </StyledTitle>
 
             <ModalCloseButton
@@ -53,7 +60,7 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
             />
           </StyledModalHeader>
           <StyledSubTitle style={{ marginTop: 0 }}>
-            Keyboard Shortcuts
+            {t('Keyboard Shortcuts')}
           </StyledSubTitle>
           {Object.entries(keyboardShortcuts).map(([title, shortcuts]) => {
             return (
@@ -63,7 +70,7 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
               </StyledListItem>
             );
           })}
-          <StyledSubTitle>Markdown Syntax</StyledSubTitle>
+          <StyledSubTitle>{t('Markdown Syntax')}</StyledSubTitle>
           {Object.entries(markdownShortcuts).map(([title, shortcuts]) => {
             return (
               <StyledListItem key={title}>

packages/app/src/components/workspace-slider-bar/index.tsx

@@ -25,18 +25,18 @@ import Link from 'next/link';
 import { Tooltip } from '@/ui/tooltip';
 import { useModal } from '@/providers/global-modal-provider';
 import { useAppState } from '@/providers/app-state-provider/context';
-
 import { IconButton } from '@/ui/button';
 // import { WorkspaceSelector } from './WorkspaceSelector';
 import useLocalStorage from '@/hooks/use-local-storage';
 import usePageMetaList from '@/hooks/use-page-meta-list';
 import { usePageHelper } from '@/hooks/use-page-helper';
+import { useTranslation } from 'react-i18next';
 
 const FavoriteList = ({ showList }: { showList: boolean }) => {
   const { openPage } = usePageHelper();
   const pageList = usePageMetaList();
   const router = useRouter();
-
+  const { t } = useTranslation();
   const favoriteList = pageList.filter(p => p.favorite && !p.trash);
   return (
     <Collapse in={showList}>
@@ -59,7 +59,7 @@ const FavoriteList = ({ showList }: { showList: boolean }) => {
         );
       })}
       {favoriteList.length === 0 && (
-        <StyledSubListItem disable={true}>No item</StyledSubListItem>
+        <StyledSubListItem disable={true}>{t('No item')}</StyledSubListItem>
       )}
     </Collapse>
   );
@@ -70,7 +70,7 @@ export const WorkSpaceSliderBar = () => {
   const { currentWorkspaceId } = useAppState();
   const { openPage, createPage } = usePageHelper();
   const router = useRouter();
-
+  const { t } = useTranslation();
   const [showTip, setShowTip] = useState(false);
   const [show, setShow] = useLocalStorage('AFFiNE_SLIDE_BAR', false, true);
 
@@ -86,7 +86,7 @@ export const WorkSpaceSliderBar = () => {
     <>
       <StyledSliderBar show={show}>
         <Tooltip
-          content={show ? 'Collapse sidebar' : 'Expand sidebar'}
+          content={show ? t('Collapse sidebar') : t('Expand sidebar')}
           placement="right"
           visible={showTip}
         >
@@ -120,17 +120,17 @@ export const WorkSpaceSliderBar = () => {
             }}
           >
             <SearchIcon />
-            Quick search
+            {t('Quick search')}
           </StyledListItem>
           <Link href={{ pathname: paths.all }}>
             <StyledListItem active={router.asPath === paths.all}>
-              <AllPagesIcon /> <span>All pages</span>
+              <AllPagesIcon /> <span>{t('All pages')}</span>
             </StyledListItem>
           </Link>
           <StyledListItem active={router.asPath === paths.favorite}>
             <StyledLink href={{ pathname: paths.favorite }}>
               <FavouritesIcon />
-              Favourites
+              {t('Favourites')}
             </StyledLink>
             <IconButton
               darker={true}
@@ -152,12 +152,12 @@ export const WorkSpaceSliderBar = () => {
               triggerImportModal();
             }}
           >
-            <ImportIcon /> Import
+            <ImportIcon /> {t('Import')}
           </StyledListItem>
 
           <Link href={{ pathname: paths.trash }}>
             <StyledListItem active={router.asPath === paths.trash}>
-              <TrashIcon /> Trash
+              <TrashIcon /> {t('Trash')}
             </StyledListItem>
           </Link>
           <StyledNewPageButton
@@ -168,7 +168,7 @@ export const WorkSpaceSliderBar = () => {
               }
             }}
           >
-            <AddIcon /> New Page
+            <AddIcon /> {t('New Page')}
           </StyledNewPageButton>
         </StyledSliderBarWrapper>
       </StyledSliderBar>

packages/app/src/libs/i18n/resources/en.json

@@ -1,28 +1,65 @@
 {
-  "Sync to Disk": "Sync to Disk",
+  "Quick search": "Quick search",
-  "Share": "Share",
+  "All pages": "All pages",
-  "WarningTips": {
+  "Favourites": "Favourites",
-    "IsNotfsApiSupported": "Welcome to the AFFiNE demo. To begin saving changes you can SYNC DATA TO DISK with the latest version of Chromium based browser like Chrome/Edge",
+  "No item": "No item",
-    "IsNotLocalWorkspace": "Welcome to the AFFiNE demo. To begin saving changes you can SYNC TO DISK.",
+  "Import": "Import",
-    "DoNotStore": "AFFiNE is under active development and the current version is UNSTABLE. Please DO NOT store information or data"
+  "Trash": "Trash",
-  },
+  "New Page": "New Page",
-  "Layout": "Layout",
+  "New Keyword Page": "New '{{query}}' page",
-  "Comment": "Comment",
+  "Find 0 result": "Find 0 result",
-  "Settings": "Settings",
+  "Find results": "Find {{number}} results",
-  "ComingSoon": "Layout Settings Coming Soon...",
+  "Collapse sidebar": "Collapse sidebar",
-  "Duplicate Page": "Duplicate Page",
+  "Expand sidebar": "Expand sidebar",
-  "Copy Page Link": "Copy Page Link",
+  "Removed to Favourites": "Removed to Favourites",
-  "Language": "Language",
+  "Remove to favourites": "Remove to favourites",
-  "Clear Workspace": "Clear Workspace",
+  "Added to Favourites": "Added to Favourites",
-  "Export As Markdown": "Export As Markdown",
+  "Add to favourites": "Add to favourites",
-  "Export As HTML": "Export As HTML",
+  "Paper": "Paper",
-  "Export As PDF (Unsupported)": "Export As PDF (Unsupported)",
+  "Edgeless": "Edgeless",
-  "Import Workspace": "Import Workspace",
+  "Switch to": "Switch to",
-  "Export Workspace": "Export Workspace",
+  "Convert to ": "Convert to ",
-  "Last edited by": "Last edited by {{name}}",
+  "Page": "Page",
-  "Logout": "Logout",
+  "Export": "Export",
+  "Export to HTML": "Export to HTML",
+  "Export to Markdown": "Export to Markdown",
   "Delete": "Delete",
-  "Turn into": "Turn into",
+  "Title": "Title",
-  "Add A Below Block": "Add A Below Block",
+  "Untitled": "Untitled",
-  "Divide Here As A New Group": "Divide Here As A New Group"
+  "Created": "Created",
+  "Updated": "Updated",
+  "Open in new tab": "Open in new tab",
+  "Favourite": "Favourite",
+  "Favourited": "Favourited",
+  "Delete page?": "Delete page?",
+  "Delete permanently?": "Delete permanently?",
+  "will be moved to Trash": "{{title}} will be moved to Trash",
+  "Once deleted, you can't undo this action.": "Once deleted,you can't undo this action.",
+  "Moved to Trash": "Moved to Trash",
+  "Permanently deleted": "Permanently deleted",
+  "restored": "{{title}} restored",
+  "Cancel": "Cancel",
+  "Keyboard Shortcuts": "Keyboard Shortcuts",
+  "Contact Us": "Contact Us",
+  "Official Website": "Official Website",
+  "Get in touch!": "Get in touch!",
+  "AFFiNE Community": "AFFiNE Community",
+  "How is AFFiNE Alpha different?": "How is AFFiNE Alpha different?",
+  "Shortcuts": "Shortcuts",
+  "Undo": "Undo",
+  "Redo": "Redo",
+  "Bold": "Bold",
+  "Italic": "Italic",
+  "Underline": "Underline",
+  "Strikethrough": "Strikethrough",
+  "Inline code": "Inline code",
+  "Code block": "Code block",
+  "Link": "Link",
+  "Body text": "Body text",
+  "Heading": "Heading {{number}}",
+  "Increase indent": "Increase indent",
+  "Reduce indent": "Reduce indent",
+  "Markdown Syntax": "Markdown Syntax",
+  "Divider": "Divider",
+  "404 - Page Not Found": "404 - Page Not Found"
 }

packages/app/src/pages/_app.tsx

@@ -18,6 +18,7 @@ import { useEffect } from 'react';
 import { useAppState } from '@/providers/app-state-provider';
 import { PageLoading } from '@/components/loading';
 import Head from 'next/head';
+import '@/libs/i18n';
 
 const ThemeProvider = dynamic(() => import('@/providers/themeProvider'), {
   ssr: false,

packages/app/src/pages/workspace/[workspaceId]/all.tsx

@@ -4,13 +4,13 @@ import usePageMetaList from '@/hooks/use-page-meta-list';
 import { PageListHeader } from '@/components/header';
 import { ReactElement } from 'react';
 import WorkspaceLayout from '@/components/workspace-layout';
-
+import { useTranslation } from 'react-i18next';
 const All = () => {
   const pageMetaList = usePageMetaList();
-
+  const { t } = useTranslation();
   return (
     <>
-      <PageListHeader icon={<AllPagesIcon />}>All Page</PageListHeader>
+      <PageListHeader icon={<AllPagesIcon />}>{t('All pages')}</PageListHeader>
       <PageList
         pageList={pageMetaList.filter(p => !p.trash)}
         showFavoriteTag={true}

packages/app/src/pages/workspace/[workspaceId]/favorite.tsx

@@ -4,12 +4,15 @@ import { FavouritesIcon } from '@blocksuite/icons';
 import usePageMetaList from '@/hooks/use-page-meta-list';
 import { ReactElement } from 'react';
 import WorkspaceLayout from '@/components/workspace-layout';
-
+import { useTranslation } from 'react-i18next';
 export const Favorite = () => {
   const pageMetaList = usePageMetaList();
+  const { t } = useTranslation();
   return (
     <>
-      <PageListHeader icon={<FavouritesIcon />}>Favourites</PageListHeader>
+      <PageListHeader icon={<FavouritesIcon />}>
+        {t('Favourites')}
+      </PageListHeader>
       <PageList pageList={pageMetaList.filter(p => p.favorite && !p.trash)} />
     </>
   );

packages/app/src/pages/workspace/[workspaceId]/trash.tsx

@@ -4,12 +4,13 @@ import { TrashIcon } from '@blocksuite/icons';
 import usePageMetaList from '@/hooks/use-page-meta-list';
 import { ReactElement } from 'react';
 import WorkspaceLayout from '@/components/workspace-layout';
-
+import { useTranslation } from 'react-i18next';
 export const Trash = () => {
   const pageMetaList = usePageMetaList();
+  const { t } = useTranslation();
   return (
     <>
-      <PageListHeader icon={<TrashIcon />}>Trash</PageListHeader>
+      <PageListHeader icon={<TrashIcon />}>{t('Trash')}</PageListHeader>
       <PageList pageList={pageMetaList.filter(p => p.trash)} isTrash={true} />
     </>
   );

packages/app/src/ui/confirm/Confirm.tsx

@@ -7,6 +7,7 @@ import {
   StyledModalWrapper,
 } from '@/ui/confirm/styles';
 import { Button } from '@/ui/button';
+import { useTranslation } from 'react-i18next';
 export type ConfirmProps = {
   title?: string;
   content?: string;
@@ -26,6 +27,7 @@ export const Confirm = ({
   onCancel,
 }: ConfirmProps) => {
   const [open, setOpen] = useState(true);
+  const { t } = useTranslation();
   return (
     <Modal open={open}>
       <StyledModalWrapper>
@@ -48,7 +50,7 @@ export const Confirm = ({
             }}
             style={{ marginRight: '24px' }}
           >
-            Cancel
+            {t('Cancel')}
           </Button>
           <Button
             type={confirmType}