I hear it is slow to access from China mainland to the foreign websites.

Genshin Dictionary is hosted by Cloudflare and it provides free global CDN, but the China data center is not available unless I bought the most expensive Enterprise plan.
Therefore, the Dictionary is probably served for users in China mainland from the foreign data centers. (Maybe Hong Kong or South Korea?)

Prerequisite

#6

Steps

• 1. Check performance (pagespeed) on access from China
  • Check Largest Contentful Paint using real-user monitoring (RUM).
• 2. Consider how can I resolve the performance problem.
  • Option 1. Serve from a server or CDN in China
    • ⚠ Is there any free or cheap static server or CDN?
    • ❌ Can I register ICP Beian?
  • Option 2. set up PWA to cache everything
    • It should be slow on first access, but faster from next access.

e.g. https://github.com/xicri/genshin-langdata/blob/main/dataset/dictionary/characters.json5#L2389

Would you add phonetic symbol for English and pinyin for Chinese to mark how to read the word ?

There are quite a lot rarely seen chinese characters in this game that people don't know how to read.
And it's the same with English.

Support Simplified Chinese UI

Translation library

Genshin Dictionary uses nuxt/i18n for i18n which is based on vue-i18n.

Translation Process

I added PR #48.

In this PR, I added placeholders for zh-CN translations: a910d30
Please add Simplified Chinese translations to the lines I added in the above commit.

After you added the translation, please send me a PR to this i18n-zh-CN branch.

Where to translate

Vue components

Most of the translations are in the .vue files.
.vue files are in:

• components/
• layouts/
• pages/

.vue files have some HTML tags like <template> and <script>.
Translation data is in the <i18n> tags in the JSON format.
See the document to learn more.

nuxt.config.js

nuxt.config.js includes texts for <title> and <meta name="description"> for each pages because you can't add them in the .vue files. (code)

• siteTitle property is the website title and it is appended after each title. (e.g. '"artifact" is "聖遺物" in Japanese | Genshin Dictionary')
• {vueFileName}Title property is <title> text before | {siteTitle}.
  • For example, wordIdTitle property is <title> for pages/_wordid.vue. (e.g. /artifact/)
• {vueFileName}Description property is the text for <meta name="description">.
  • For example, aboutDescription property is <meta name="description"> for pages/about.vue (/about/).

Variables in translation texts

Strings with curly brackets {} in the translation texts are variable.
For example, the following translation includes the createdAt variable in the text.

"updatedOn": "Updated on {createdAt}",

(code)

See the vue-i18n document to learn more.

Debug

To debug, see the Setup section in README:
https://github.com/xicri/genshin-dictionary#setup

You might see the tag texts are empty. This is expected because genshin-dictionary refers to current production tags.json which does not have Simplified Chinese translation yet.

It is not necessary to show tag texts properly, but if you want to show tag texts properly on your local machine:

1. In your local genshin-langdata directory, switch branch to i18n-zh-CN and run npm run build
2. Move to your local genshin-dictionary directory, and cp .env.example .env
3. Set the path to your local genshin-langdata repository to LANGDATA_PATH in .env
4. Run npm install again. This installs tag data from i18n-zh-CN branch

About site title

You don't have to translate the site title literally.
The Japanese site title is 原神 英語・**語辞典 (Genshin English & Chinese Dictionary), but the English title is just "Genshin Dictionary".

Chinese title might be like "Genshin English Dictionary" or "Genshin English & Japanese Dictionary"? Let me know if you have better options.
A short title is better because there is not so wide space in the header (especially on mobile devices).

In Chinese and Japanese, it might be better to insert whitespace after "原神" because the search engines might misunderstand our site title and cannot recognize the word "原神" if we didn't. (In the Japanese case, Google might misunderstand our website is about "原神英" if the site title was "原神英語・**語辞典")

About tests

The tests on the CI may fail after you add the translation. Just ignore it.

Untranslated texts

Translation for /about/ and /opendata/ are not ready yet.

Set up automatic deployment to Cloudflare Pages (The main server for Genshin Dictionary & Genshin Machine Translation).

For example, The Chi of Yore does not have a Chinese translation.
On the Chinese version of the word page, the title is ""的英语和日语翻译 | 原神中英日辞典.
https://genshin-dictionary.com/zh-CN/the-chi-of-yore/

On the English version of the word page, the title is "The Chi of Yore" is "" in Chinese | Genshin Dictionary.
https://genshin-dictionary.com/en/the-chi-of-yore/

Support Traditional Chinese UI.
Can it be automatically converted from Simplified Chinese using OpenCC?

Show the Simplified Chinese translations contributed in xicri/genshin-langdata#2 on the UI.

For example, if you search with "Mondstadt", The word "Mondstadt" appears at the last of the search results currently.
However, "Mondstadt" should be the first result.

List the search results in following order:

1. exact match with en, ja, and zhCN, and pronunciationJa
2. exact match with variants.en, variants.ja, and variants.zhCN
3. forward/backword/partial match with en, ja, and zhCN
4. forward/backword/partial match with variants.en, variants.ja, and variants.zhCN
5. forward/backword/partial match with pronunciationJa
6. exact/forward/backword/partial match with notes (on Japanese UI only) and notesZh (on Chinese UI only)

Support English UI.

I personally feel that this display effect looks a bit awkward. Shouldn't we switch it to a synonym, such as "简中" (short for "简体中文")?

Prerequisites

• Nuxt 3 RC released
• modules are available for Nuxt 3
  • Pinia
  • nuxt/i18n (Progress)
  • nuxt/robots (Progress)
  • nuxt/sitemap (Progress)
  • nuxt/sentry (Progress?)
    • Optional: implement by myself or remove

Step to reproduce

1. open https://genshin-dictionary.com/zh-CN/
2. enter "神里凌华", a Chinese variant for 神里绫华 (Kamisato Ayaka), in the search box

Expected: 神里绫华 is shown in the search result.
Actual: "未找到匹配的词汇。" (Not found) is shown.

Migrate to Next.js / React with TypeScript.

Motivation

Since Nuxt 3 release, it took two months for the first minor release, and until then, Nuxt 3 was still unstable. I guess Nuxt team does not have engineer resources enough. I gave up using Nuxt.

Some PRs were reverted by #115, but they should be applied again after migration to Nuxt 3.

The following PRs should be manually applied after migration to Nuxt 3:

• #106 → #126
• #107 → #127
• #108 → #117
• #110 → #118
• #111
• #112
• #114

Check if the following PRs should be applied manually after the migration to Nuxt 3:

• #101
• #105

Cloudflare is slow in mainland China. To provide better performance for users in mainland China, I will add CDN in or around mainland China.

CDN Options

1. Use CDN located in mainland China
   • 👍 Fastest
   • 😐 Need Chinese language skills
   • 👎 ICP Beian is required (Hard to pass, especially for foreigners like me)
2. Use Chinese CDN located around mainland China
   • 👎 Not as fast as CDN in mainland China
   • 😐 Need Chinese language skills
   • 👍 ICP Beian is not required
   • Candidate: Qiniu Cloud
3. Use CDN located in Japan
   • 👎 Slowest
   • 👎 It might cost (but less than 500 JPY per month?)
   • 👍 do not need Chinese language skills
   • 👍 ICP Beian is not required
   • Candidate: Sakura's Web Accelerator

Domain structure

Options:

1. Use a subdomain dedicated to China
   • e.g. china.genshin-dictionary.com
   • 👍 Free
   • 👎 Poor UX (Users have to switch domains by themselves)
   • 👎 It might affect SEO (duplicate pages)
2. Use Cloudflare Load Balancing to route traffic from China to CDN for China and traffic from other countries to Cloudflare
   • 👍 It is DNS-based load balancing and less chance to delay on access from China
   • 👍 Better UX (Users do not have to switch domains by themselves)
   • 👎 It may cost (but less than $5 per month?)