mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-12 04:18:54 +00:00

Files

akumatus 261d413607 feat: history timeline shows relative time, such as today and yesterday (#6864 )

### TL;DR
First, fixed an i18n issue in history panel. When the browser language is set to Chinese, and the AFFiNE application language is set to English, the language supposed to be English global. But now the language is a mixture of Chinese and English, which is obviously wrong.

![截屏2024-05-08 18.23.21.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/sJGviKxfE3Ap685cl5bj/93d8218a-3b26-4b0c-9f15-71a8996556db.png)

Second, design a time formatter to convert timestamp into relative calendar date, such today and yesterday and so on. Long-ago edits will show the exact date like before.

![截屏2024-05-10 15.30.57.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/sJGviKxfE3Ap685cl5bj/dbc59e80-9504-40b1-b712-5c155cb6fa63.png)

### What changed?
- `new Intl.DateTimeFormat` with language option form  `document.documentElement.lang`
- Added `timestampToCalendarDate` function to convert timestamp into relative calendar date
- Updated unit tests
- Updated i18n copywriting

### How to test?
1. Open view history version
2. Check edit timeline

2024-05-13 11:59:48 +00:00

src

feat: history timeline shows relative time, such as today and yesterday (#6864 )

2024-05-13 11:59:48 +00:00

.gitignore

refactor(infra): directory structure (#4615 )

2023-10-18 15:30:08 +00:00

build.mjs

style: apply prefer-node-protocol lint rule (#5627 )

2024-01-19 03:47:08 +00:00

dev.mjs

style: apply prefer-node-protocol lint rule (#5627 )

2024-01-19 03:47:08 +00:00

package.json

chore: bump up all non-major dependencies (#6526 )

2024-05-07 10:30:58 +00:00

project.json

refactor(infra): directory structure (#4615 )

2023-10-18 15:30:08 +00:00

README.md

refactor(infra): directory structure (#4615 )

2023-10-18 15:30:08 +00:00

tsconfig.json

refactor(infra): directory structure (#4615 )

2023-10-18 15:30:08 +00:00

tsconfig.node.json

refactor(infra): directory structure (#4615 )

2023-10-18 15:30:08 +00:00

tsconfig.resources.json

refactor(infra): directory structure (#4615 )

2023-10-18 15:30:08 +00:00

README.md

i18n

Usages

Update missing translations into the base resources, a.k.a the src/resources/en.json
Replace literal text with translation keys

import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { LOCALES, useI18N } from '@affine/i18n';
// src/resources/en.json
// {
//     'Text': 'some text',
//     'Switch to language': 'Switch to {{language}}', // <- you can interpolation by curly brackets
// };

const App = () => {
  const t = useAFFiNEI18N();
  const i18n = useI18N();
  const changeLanguage = (language: string) => {
    i18n.changeLanguage(language);
  };

  return (
    <div>
      <div>{t['Workspace Settings']()}</div>
      <>
        {LOCALES.map(option => {
          return (
            <button
              key={option.name}
              onClick={() => {
                changeLanguage(option.tag);
              }}
            >
              {option.originalName}
            </button>
          );
        })}
      </>
    </div>
  );
};

How the i18n workflow works?

When the src/resources/en.json(base language) updated and merged to the develop branch, will trigger the languages-sync action.
The languages-sync action will check the base language and add missing translations to the Tolgee platform.
This way, partners from the community can update the translations.

How to sync translations manually

Set token as environment variable

export TOLGEE_API_KEY=tgpak_XXXXXXX

Run the sync-languages:check to check all languages
Run the sync-languages script to add new keys to the Tolgee platform
Run the download-resources script to download the latest full-translation translation resources from the Tolgee platform

README.md

i18n

Usages

How the i18n workflow works?

How to sync translations manually

References