Merge pull request #396 from toeverything/develop

Sync develop to master

.github/workflows/languages-sync.yml

@@ -1,10 +1,17 @@
-name: Lint
+name: Languages Sync
 
 on:
     push:
-        branches: [master]
-    # pull_request:
-    #     branches: [master]
+        branches: [ "develop", "master" ]
+        paths:
+            - 'libs/datasource/i18n/**'
+            - '.github/workflows/languages-sync.yml'
+    pull_request:
+        branches: [ "develop", "master" ]
+        paths:
+            - 'libs/datasource/i18n/**'
+            - '.github/workflows/languages-sync.yml'
+    workflow_dispatch:
 
 # Cancels all previous workflow runs for pull requests that have not completed.
 # See https://docs.github.com/en/actions/using-jobs/using-concurrency
@@ -18,11 +25,9 @@ jobs:
     main:
         strategy:
             matrix:
-                node-version: [16]
+                node-version: [18]
                 os: [ubuntu-latest]
         runs-on: ${{ matrix.os }}
-        # TODO Remove the next line after cleaning all errors
-        continue-on-error: true
 
         steps:
             - name: Checkout
@@ -43,20 +48,16 @@ jobs:
             - name: Install node modules
               run: pnpm install
 
-            - name: Lint
-              if: always()
-              run: pnpm run lint:with-cache
+            - name: Check Language Key
+              if: github.ref != 'refs/heads/develop' && github.ref != 'refs/heads/master'
+              working-directory: ./libs/datasource/i18n
+              run: pnpm run sync-languages:check
+              env:
+                TOLGEE_API_KEY: ${{ secrets.TOLGEE_API_KEY }}
 
-            # - name: Check
-            #   if: always()
-            #   run: pnpm run check
-
-            # - name: Format Check
-            #   if: always()
-            #   run: pnpm run format:ci
-
-            # - name: Build
-            #  run: pnpm run build
-
-            # - name: Test
-            #   run: pnpm run test
+            - name: Sync Languages
+              if: github.ref == 'refs/heads/develop' || github.ref == 'refs/heads/master'
+              working-directory: ./libs/datasource/i18n
+              run: pnpm run sync-languages
+              env:
+                TOLGEE_API_KEY: ${{ secrets.TOLGEE_API_KEY }}

.github/workflows/livedemo.yml

@@ -0,0 +1,87 @@
+name: Build AFFiNE-Local
+
+on:
+    push:
+        branches: [master]
+    # pull_request:
+    #     branches: [master]
+
+# Cancels all previous workflow runs for pull requests that have not completed.
+# See https://docs.github.com/en/actions/using-jobs/using-concurrency
+concurrency:
+    # The concurrency group contains the workflow name and the branch name for
+    # pull requests or the commit hash for any other events.
+    group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }}
+    cancel-in-progress: true
+
+env:
+    REGISTRY: ghcr.io
+    NAMESPACE: toeverything
+    AFFINE_IMAGE_NAME: LIVEDEMO
+    IMAGE_TAG_LATEST: nightly-latest
+    LOCAL_CACHE: localhost:5000/toeverything/relocate:latest
+
+jobs:
+    ligo-virgo:
+        runs-on: self-hosted
+        environment: development
+        permissions:
+            contents: read
+            packages: write
+
+        services:
+          registry:
+            image: registry:2
+            ports:
+              - 5000:5000
+
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v2
+
+            - name: Log in to the Container registry
+              uses: docker/login-action@v2
+              with:
+                  registry: ${{ env.REGISTRY }}
+                  username: ${{ github.actor }}
+                  password: ${{ secrets.GITHUB_TOKEN }}
+
+            - name: Set up QEMU
+              uses: docker/setup-qemu-action@v1
+
+            - name: Set up Docker Buildx
+              id: buildx
+              uses: docker/setup-buildx-action@v1
+              with:
+                driver-opts: network=host
+
+            - name: Extract metadata (tags, labels) for Docker (AFFiNE-Local)
+              id: meta_affine
+              uses: docker/metadata-action@v4
+              with:
+                  images: ${{ env.REGISTRY }}/${{ env.NAMESPACE }}/${{ env.AFFINE_IMAGE_NAME }}
+                  tags: ${{ env.IMAGE_TAG_LATEST }}
+
+            - name: Build and push Docker image (AFFINE-Local)
+              uses: docker/build-push-action@v3
+              env:
+                HUBSPOT_API_SECRET: ${{ secrets.SuperSecret }}
+              with:
+                  context: .
+                  push: true
+                  file: ./.github/deployment/Dockerfile-affine
+                  tags: ${{ env.LOCAL_CACHE }}
+                  target: AFFiNE
+
+            - name: Build and push Docker image (AFFINE-Local)
+              uses: docker/build-push-action@v3
+              with:
+                  context: .
+                  platforms: linux/amd64,linux/arm64/v8
+                  file: ./.github/deployment/Dockerfile-affine-multiplatform
+                  push: ${{ github.ref == 'refs/heads/master' && true || false }}
+                  tags: ${{ steps.meta_affine.outputs.tags }}
+                  labels: ${{ steps.meta_affine.outputs.labels }}
+                  target: AFFiNE
+                  build-args: |
+                    BASE_IMAGE=${{ env.LOCAL_CACHE }}

apps/ligo-virgo/src/template.html

@@ -4,6 +4,7 @@
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title><%= htmlWebpackPlugin.options.title %></title>
+        <%= htmlWebpackPlugin.options.hubspotScript %>
     </head>
     <body>
         <div id="root"></div>

apps/ligo-virgo/webpack.config.js

@@ -12,6 +12,13 @@ const Style9Plugin = require('style9/webpack');
 
 const enableBundleAnalyzer = process.env.BUNDLE_ANALYZER;
 
+function generateHubspotScript() {
+    const hubspotApiSecret = process.env.HUBSPOT_API_SECRET;
+    if (hubspotApiSecret) {
+        return `<script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/${hubspotApiSecret}.js"></script>`;
+    }
+}
+
 module.exports = function (webpackConfig) {
     const config = getNxWebpackConfig(webpackConfig);
 
@@ -175,6 +182,7 @@ module.exports = function (webpackConfig) {
                 ), //favicon path
                 template: path.resolve(__dirname, './src/template.html'),
                 publicPath: '/',
+                hubspotScript: generateHubspotScript(),
             }),
         new Style9Plugin(),
         isProd &&

apps/venus/src/app/IndexPage/Alternatives.tsx

@@ -7,7 +7,7 @@ import { useMediaQuery } from '@mui/material';
 
 const Alternatives = styled(Box)<{ width: string }>(({ width }) => ({
     position: 'relative',
-    width: '20em',
+    width: '24em',
     height: '128px',
     transform: 'translateY(-8px)',
     overflowY: 'hidden',
@@ -21,7 +21,7 @@ const Alternatives = styled(Box)<{ width: string }>(({ width }) => ({
         height: 'inherit',
         position: 'absolute',
         left: '0',
-        top: '0',
+        top: '-23px',
         paddingTop: '22px',
         lineHeight: '96px',
         '@media (max-width: 1024px)': {
@@ -105,7 +105,7 @@ export const AlternativesProduct = () => {
                 )}
             >
                 <Typography
-                    fontSize="64px"
+                    fontSize="96px"
                     fontWeight={900}
                     sx={{
                         color: '#06449d',
@@ -135,7 +135,7 @@ export const AlternativesProduct = () => {
                 }}
             >
                 <Typography
-                    fontSize="64px"
+                    fontSize="96px"
                     fontWeight={900}
                     sx={{
                         color: '#06449d',

apps/venus/src/app/IndexPage/IndexPage.tsx

@@ -64,7 +64,7 @@ export function IndexPage() {
     return (
         <>
             <AFFiNEHeader />
-            <Grid xs={12} sx={{ display: 'flex', marginTop: '12vh!important' }}>
+            <Grid xs={12} sx={{ display: 'flex', marginTop: '20vh!important' }}>
                 <Box
                     sx={{
                         display: 'inline-flex',
@@ -76,7 +76,7 @@ export function IndexPage() {
                     }}
                 >
                     <Typography
-                        fontSize="64px"
+                        fontSize="96px"
                         fontWeight={900}
                         sx={{
                             marginRight: '0.25em',
@@ -89,7 +89,7 @@ export function IndexPage() {
                         {t('Open Source')},
                     </Typography>
                     <Typography
-                        fontSize="64px"
+                        fontSize="96px"
                         fontWeight={900}
                         sx={{
                             '@media (max-width: 1024px)': {
@@ -120,7 +120,7 @@ export function IndexPage() {
                 >
                     <AlternativesProduct />
                     <Typography
-                        fontSize="64px"
+                        fontSize="96px"
                         fontWeight={900}
                         sx={{
                             color: '#06449d',

apps/venus/src/app/common/Header.tsx

@@ -139,34 +139,6 @@ export const AFFiNEHeader = () => {
                         window.open(href);
                     }}
                 />
-                <HoverMenu
-                    title={t('ContactUs')}
-                    options={[
-                        {
-                            title: 'Discord',
-                            value: 'https://discord.gg/Arn7TqJBvG',
-                        },
-                        {
-                            title: 'Telegram',
-                            value: 'https://t.me/affineworkos',
-                        },
-                        {
-                            title: 'Reddit',
-                            value: 'https://www.reddit.com/r/Affine/',
-                        },
-                        {
-                            title: 'Medium',
-                            value: 'https://medium.com/@affineworkos',
-                        },
-                        {
-                            title: 'Email',
-                            value: 'mailto:contact@toeverything.info',
-                        },
-                    ]}
-                    onSelect={href => {
-                        window.open(href);
-                    }}
-                />
                 <Select
                     defaultValue="en"
                     sx={{ display: matchesIPAD ? 'none' : 'intial' }}
@@ -192,6 +164,7 @@ const Container = styled(Grid)({
     transform: 'translateX(-50%)',
     width: '100%',
     paddingTop: '1em',
+    paddingBottom: '1em',
     backgroundColor: '#fff',
     zIndex: 1500,
     maxWidth: '1440px',

libs/datasource/i18n/README.md

@@ -8,7 +8,7 @@ import { useTranslation } from '@toeverything/datasource/i18n';
 // base.json
 // {
 //     'Text': 'some text',
-//     'Switch to language': 'Switch to {language}',
+//     'Switch to language': 'Switch to {{language}}', // <- you can interpolation by curly brackets
 // };
 
 const App = () => {
@@ -41,10 +41,12 @@ const App = () => {
 export TOLGEE_API_KEY=tgpak_XXXXXXX
 ```
 
--   Run the `sync` script from package script
+-   Run the `sync-languages:check` to check all languages
+-   Run the `sync-languages` script to add new keys to the tolgee platform
 
 ## References
 
+-   [AFFiNE | Tolgee](https://i18n.affine.pro/)
+-   [Tolgee Documentation](https://tolgee.io/docs/)
 -   [i18next](https://www.i18next.com/)
 -   [react-i18next](https://react.i18next.com/)
--   [Tolgee](https://tolgee.io/docs/)

libs/datasource/i18n/package.json

@@ -2,11 +2,11 @@
     "name": "@toeverything/datasource/i18n",
     "version": "0.0.1",
     "scripts": {
-        "sync": "NODE_OPTIONS=--experimental-fetch ts-node src/scripts/sync.ts"
+        "sync-languages": "NODE_OPTIONS=--experimental-fetch ts-node src/scripts/sync.ts",
+        "sync-languages:check": "pnpm run sync-languages --check"
     },
     "dependencies": {
         "i18next": "^21.9.1",
-        "jotai": "^1.8.1",
         "react-i18next": "^11.18.4"
     }
 }

libs/datasource/i18n/src/index.ts

@@ -19,6 +19,8 @@ declare module 'react-i18next' {
     }
 }
 
+const STORAGE_KEY = 'i18n_lng';
+
 const LOCALES = [
     { value: 'en', text: 'English', res: en_US },
     { value: 'zh', text: '简体中文', res: zh_CN },
@@ -29,11 +31,26 @@ const resources = LOCALES.reduce<Resource>(
     {}
 );
 
+const fallbackLng = LOCALES[0].value;
+const standardizeLocale = (language: string) => {
+    if (LOCALES.find(locale => locale.value === language)) return language;
+    if (
+        LOCALES.find(
+            locale => locale.value === language.slice(0, 2).toLowerCase()
+        )
+    )
+        return language;
+    return fallbackLng;
+};
+
+const language = standardizeLocale(
+    localStorage.getItem(STORAGE_KEY) ?? navigator.language
+);
+
 const i18n = i18next.createInstance();
 i18n.use(initReactI18next).init({
-    // TODO auto detect
-    lng: LOCALES[0].value,
-    fallbackLng: LOCALES[0].value,
+    lng: language,
+    fallbackLng,
     debug: process.env['NODE_ENV'] === 'development',
 
     resources,
@@ -42,6 +59,10 @@ i18n.use(initReactI18next).init({
     },
 });
 
+i18n.on('languageChanged', lng => {
+    localStorage.setItem(STORAGE_KEY, lng);
+});
+
 const I18nProvider = I18nextProvider;
 
 export { i18n, useTranslation, I18nProvider, LOCALES };

libs/datasource/i18n/src/scripts/request.ts

@@ -9,6 +9,7 @@ if (!TOLGEE_API_KEY) {
 const withTolgee = (
     fetch: typeof globalThis.fetch
 ): typeof globalThis.fetch => {
+    const baseUrl = `${TOLGEE_API_URL}/v2/projects`;
     const headers = new Headers({
         'X-API-Key': TOLGEE_API_KEY,
         'Content-Type': 'application/json',
@@ -29,14 +30,14 @@ const withTolgee = (
                 if (!argArray[0].headers) {
                     argArray[0] = {
                         ...argArray[0],
-                        url: `${TOLGEE_API_URL}/v2/projects${argArray[0].url}`,
+                        url: `${baseUrl}${argArray[0].url}`,
                         headers,
                     };
                 }
             } else {
                 // URL or URLLike + ?RequestInit
                 if (typeof argArray[0] === 'string') {
-                    argArray[0] = TOLGEE_API_URL + argArray[0];
+                    argArray[0] = `${baseUrl}${argArray[0]}`;
                 }
                 if (!argArray[1]) {
                     argArray[1] = {};

libs/datasource/i18n/src/scripts/sync.ts

@@ -78,6 +78,41 @@ const differenceObject = (
     return { add, remove, modify };
 };
 
+function warnDiff(diff: { add: string[]; remove: string[]; modify: string[] }) {
+    if (diff.add.length) {
+        console.log('New keys found:', diff.add.join(', '));
+        //See https://docs.github.com/en/actions/using-workflows/workflow-commands-for-github-actions#setting-a-notice-message
+        process.env['CI'] &&
+            console.log(
+                `::notice file=${BASE_JSON_PATH},line=1,title=New keys::${diff.add.join(
+                    ', '
+                )}`
+            );
+    }
+    if (diff.remove.length) {
+        console.warn('[WARN]', 'Unused keys found:', diff.remove.join(', '));
+        process.env['CI'] &&
+            console.warn(
+                `::notice file=${BASE_JSON_PATH},line=1,title=Unused keys::${diff.remove.join(
+                    ', '
+                )}`
+            );
+    }
+    if (diff.modify.length) {
+        console.warn(
+            '[WARN]',
+            'Inconsistent keys found:',
+            diff.modify.join(', ')
+        );
+        process.env['CI'] &&
+            console.warn(
+                `::warning file=${BASE_JSON_PATH},line=1,title=Inconsistent keys::${diff.modify.join(
+                    ', '
+                )}`
+            );
+    }
+}
+
 const main = async () => {
     console.log('Loading local base translations...');
     const baseLocalTranslations = JSON.parse(
@@ -107,17 +142,14 @@ const main = async () => {
     );
 
     console.log(''); // new line
-    diff.add.length && console.log('New keys found:', diff.add.join(', '));
-    diff.remove.length &&
-        console.warn('[WARN]', 'Unused keys found:', diff.remove.join(', '));
-    diff.modify.length &&
-        console.warn(
-            '[WARN]',
-            'Inconsistent keys found:',
-            diff.modify.join(', ')
-        );
+    warnDiff(diff);
     console.log(''); // new line
 
+    if (process.argv.slice(2).includes('--check')) {
+        // check mode
+        return;
+    }
+
     diff.add.forEach(async key => {
         const val = flatLocalTranslations[key];
         console.log(`Creating new key: ${key} -> ${val}`);

pnpm-lock.yaml

@@ -580,11 +580,9 @@ importers:
   libs/datasource/i18n:
     specifiers:
       i18next: ^21.9.1
-      jotai: ^1.8.1
       react-i18next: ^11.18.4
     dependencies:
       i18next: 21.9.1
-      jotai: 1.8.1
       react-i18next: 11.18.4_i18next@21.9.1
 
   libs/datasource/jwt: