Rework everything (#7)

* Allow user to disable gadget

* Disable gadget is page language is different than Chinese

* Add va-variant query param to set local variant

In case the user uses incognito mode, local variant may be cleared when the browser quits.
Adding the query param va-variant to allow local variant being set manually.
It is recommended to save a url containing this to a bookmark and load it first in incognito
mode.

* Avoid spread syntexes to prevent unnecessary generated code

* Add opt-out logic

* refactor: Remove redundant code

* Overhaul variant dialog (prompt)

The variant dialog is now VAVariantPrompt, which is a non-modal
dialog popped at the left bottom of the page.

* Exempt page redirection for logged in users, and
do not rewrite link for links with variants

* Fix script exceptions

See https://zh.wikipedia.org/w/index.php?oldid=79892477&diff=79927662

* Fix tests

* Add stats support, and refactor for better type inference

* Do not rewrite link with invalid or no hrefs

* Switch license to GPL2

In complience with the license of https://github.com/wikimedia/design-codex

* Adapt for Vector 2022

* Avoid target in gadget definition

* Adjust for Vector 2022 (part 2)

* Add opt out logic & stats

* Change license to GPLv2 (part 2)

* Disable button on prompt selection

* Initial work on mobile prompt

* refactor: mobile layout

* Improve mobile layout design, set Select default value from page variant

* Split mobile prompt into a seperate Vue component

* refactor: remove redundant strings

* refactor: remove unused code

* refactor: change mount method

* Add ?va-force-dialog debug option

* Add aria label for Select

* Prevent prompt obsecured by header in Vector 2022

* Fix mobile browser incompatibility

Including:
- Safari <= 14 (opening Select cause the prompt to disappear)
- Samsung phones (incorrectly shows desktop version)

* Fix mistakenly rewrite search limiting & paging links

* Improve feature detection logic

Now if user is logged in, the gadget is entirely disabled.
And for non-wikitext pages, it will attempt to rewrite anchors if
preferrer variant is available.

* Prevent over rewriting & other agressive behaviors

* test: fix tests

* Remove search URL hack, replaced using redirection

* Only show prompt when wgAction is view

* Add a more instructive UI when variant can be inferred

* Rework README

* Improve English README

.eslintrc.json

@@ -5,6 +5,9 @@
     "node": true,
     "browser": true
   },
+  "globals": {
+    "mw": "readonly"
+  },
   "rules": {
     "semi": "error",
     "comma-dangle": [
@@ -49,4 +52,4 @@
     "parser": "@typescript-eslint/parser",
     "sourceType": "module"
   }
-}
+}

.gitignore

@@ -137,3 +137,6 @@ dist
 
 # Built Visual Studio Code Extensions
 *.vsix
+
+# Rollup cache
+.rollup.cache

README.EN.MD

@@ -1,4 +1,47 @@
 # Variant Ally
-This is a gadget aimed to enhance Chinese language variant support on Chinese Wikipedia where MediaWiki can't handle it itself.
+[中文](./README.MD)
 
-Since this gadget is mainly intended for Chinese Wikipedia's use, most of its documentation is written in Chinese. If you want guidance on how to build and modify this, please see [CONTRIBUTING.MD](./CONTRIBUTING.MD).
+Variant Ally is a gadget aimed at better handling Chinese variant problems when MediaWiki can't do well itself.
+
+## The problem
+Chinese Wikipedia utilized MediaWiki's LanguageConverter widely, to serve content for readers from various cultural backgrounds. Consequently, every page is stored in a mixture of Simplified and Traditional Chinese, and is converted on the fly when read, according to the user's variant preference.
+
+Normally, MediaWiki is able to infer a user's preferred Chinese language variant when they view an article at `https://zh.wikipedia.org/wiki/<article>` (via [`Accept-Language`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-Language) header), but it may not work when:
+
+1. User may open a link with variant specified (e.g. `https://zh.wikipedia.org/zh-tw/<article>`) from external sites or browsers. If the variant is not what user expected, it may worsen user experience.
+2. User's browser language may not always be Chinese (for instance, Tor browser recommends to set browser language to English), resulting in seeing a mixture of Simplified and Traditional Chinese content.
+3. `zh-hant` and `zh-hans` do not have full conversion rules applied, and should be only used for technical purposes. If a user opens link with this two variants, it will cause problems.
+4. Even the user manually specified a language variant, clicks on internal links still navigates user to unconverted pages.
+
+## The solution
+Variant Ally fixes this by storing user's variant preference in the local storage of the browser. When the user clicks on a link, the gadget will automatically adjust its variant. It will also redirect user to the correct variant when a link with an incorrect variant is opened from external sites and apps.
+
+A prompt is shown if Variant Ally cannot detect a user's preferred variant. Once the user makes a selection this prompt will not be shown again.
+
+**This gadget is only enabled for anonymous users.**
+
+## FAQ
+### Why I keep seeing the prompt?
+The gadget stores your language variant preference in the browser. If your browser clears browsing data automatically, or you are using incognito mode, you may keep seeing this prompt.
+
+To fix the problem, try these solutions:
+1. Add Chinese Wikipedia to the allow list of preserving site data.
+2. Add one of these links to your bookmark ([China Mainland (Simplified)](https://zh.wikipedia.org/?va-variant=zh-cn), [Singapore (Simplified)](https://zh.wikipedia.org/?va-variant=zh-sg), [Malaysia (Simplified)](https://zh.wikipedia.org/?va-variant=zh-my), [Taiwan (Traditional)](https://zh.wikipedia.org/?va-variant=zh-tw), [Hong Kong(Traditional)](https://zh.wikipedia.org/?va-variant=zh-hk), [Macau (Traditional)](https://zh.wikipedia.org/?va-variant=zh-mo)). When browsing in incognito, open the bookmark first and your variant preference is saved automatically.
+3. Click the "X" button when the prompt pops up. This will close it for the rest of the browsing session.
+4. Use an ad-blocker to block the prompt.
+
+### I don't want to use this gadget.
+This gadget is now disabled for logged-in users.
+
+### There is a bug in this gadget.
+Issue submissions are welcome! Create a new issue [here](https://github.com/wikimedia-gadgets/VariantAlly/issues/new).
+
+## Non-goal
+1. This gadget will not try to solve inconsistencies e.g. "Google indexing mobile versions of Wikipedia".
+2. This gadget' interface will not support other languages except Chinese, as it's mainly aimed at Chinese readers.
+
+## Development
+See [CONTRIBUTING.MD](./CONTRIBUTING.MD).
+
+## License
+Variant Ally is licensed under GPLv2, see [LICENSE](./LICENSE) for more info.

README.MD

@@ -1,64 +1,47 @@
-# 中文变体小助手（Variant Ally）
+# 变体小助手（Variant Ally）
 [English](./README.EN.MD)
 
-中文变体小助手工具旨在解决中文维基百科中 MediaWiki 无法顾及的变体处理问题。
+变体小助手工具旨在解决中文维基百科中 MediaWiki 无法顾及的变体处理问题。
 
 ## 要解决什么问题？
 中文维基百科广泛使用了 MediaWiki 的字词转换功能，从而做到向简体和繁体用户分别显示相应版本的条目。作为代价，每个条目的源代码都是简体中文和繁体中文的混合体，只有在显示的时候才会根据用户的语言设置自动转换。
 
 通常情况下，当用户通过 `https://zh.wikipedia.org/wiki/<条目名>` 访问条目时，MediaWiki 能根据用户的浏览器网页语言设置（[`Accept-Language`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-Language) 头部）自动判断用户偏好的语言变体。但仍然存在许多不足：
 
 1. 用户可能从应用中或其他地方打开了一个指定变体的外部链接（如 `https://zh.wikipedia.org/zh-tw/<条目名>`），而此变体恰巧不是用户偏好的变体，从而导致糟糕的阅读体验。
-2. 用户的浏览器可能没有正确配置语言设置（比如 Tor 浏览器推荐将网页语言设置为英文），从而导致用户看到简繁混杂的原始内容。
+2. 用户的浏览器语言可能不是中文（比如 Tor 浏览器推荐将网页语言设置为英文），从而导致用户看到简繁混杂的原始内容。
 3. `zh-hant` 和 `zh-hans` 这两个变体只为技术目的保留，且这两个变体下的简繁转换不完全，总之永远不应该呈现给用户。但如果出现上述 1、2 中的情况，则会影响阅读体验。
-4. 即使用户手动选择偏好的变体，但导航时仍会回退至无转换版本。
-
-站内现有 [NotifyConversion](https://zh.wikipedia.org/wiki/MediaWiki:Gadget-notifyConversion.js)、[variant-link-fix](https://zh.wikipedia.org/wiki/MediaWiki:Gadget-variant-link-fix.js)、[preserve-variant](https://zh.wikipedia.org/wiki/MediaWiki:Gadget-preserve-variant.js) 小工具可以解决部分问题，但又引入了若干新问题：
-1. 无法解决上述第一条列出的问题。
-2. 由于小工具呈现频率较高，呈现次数多了之后容易被用户主动忽略，从而起不到效果。
-3. 对于站内用户而言，编辑时可能有切换到不转换等变体的需求，此时弹出提示框反而适得其反。
-4. 仅仅解决了 Google 跳转的问题，而未解决其他相似情况。
-5. 相关的功能用多个小工具实现，显得碎片化且难以维护。
+4. 即使用户手动选择偏好的变体，但点击链接跳转时仍会回退至无转换版本。
 
 ## 是如何解决的？
-![工作原理](./docs/workflow.svg)
-
-中文变体小助手的功能分为**变体管理**、**自动变体跳转**和**自动变体链接修正**三部分。
-
-对于下列**资深用户**，自动变体跳转会关闭，而自动变体链接修正会保持开启，从而减少不必要的弹窗：
-- 延伸确认用户（包括管理员）；
-- 拥有全域特权的用户（例如 WMF 员工、监管员、申诉专员等）；
-- 特定列表中的用户。
+变体小助手将用户的变体偏好设置存储于浏览器本地存储中来解决这一问题。用户在站内跳转时，小工具会自动将内链修正为正确变体的版本。如果用户从外部点开了一个不正确变体的链接，本小工具也会自动修正。
 
-本小工具还会尝试尽可能从先前存储的数据中推测出用户期望看到的语言变体，从而进一步降低弹窗频率。
+如果变体小助手无法确定用户的偏好变体，则会显示弹框以便用户选择。一旦用户作出选择，此弹框则不会再次显示。
 
-弹窗虽然为模态对话框设计，但是可关闭弹窗的点击区域实际上更大（点击弹窗背景任意位置就可关闭），且用户的选择会在浏览器标签页中同步——即用户在一处关掉对话框，在所有页面中都会关闭；在一处做出选择，所有页面都会刷新[^1]，从而尽可能地避免打扰用户。
+**本小工具只对匿名用户启用。**
 
-### 变体管理
-中文变体小助手将用户的变体设置分为三部分——**浏览器变体设置**、**本地变体设置**和**账号变体设置**。
+## 常见问题（FAQ）
+### 为什么我总是看到弹窗？
+小工具会将您的变体设置存储于浏览器中，如果您的浏览器会自动清除网站数据，或者使用了无痕模式，您可能会多次看到此弹窗。
 
-浏览器变体设置是根据浏览器语言推断出的变体设置，如果无法推断则为空。账号变体设置即 MediaWiki 账号的偏好变体设置。本地变体设置可由用户选择产生，存储于浏览器的 Local Storage 中，且和浏览器变体设置保持同步。如果用户清除浏览器数据（或使用隐私浏览模式），那么此设置会丢失。如果用户想要在之后更改本地变体设置，可以更改浏览器语言。小工具会自动同步本地变体设置。
+要解决此问题，请尝试以下方案：
+1. 将中文维基百科加入浏览器清除网站数据的白名单中。
+2. 将这些链接添加到书签（[大陆简体](https://zh.wikipedia.org/?va-variant=zh-cn)、[新加坡简体](https://zh.wikipedia.org/?va-variant=zh-sg)、[马来西亚简体](https://zh.wikipedia.org/?va-variant=zh-my)、[臺灣正體](https://zh.wikipedia.org/?va-variant=zh-tw)、[香港繁體](https://zh.wikipedia.org/?va-variant=zh-hk)、[澳门繁體](https://zh.wikipedia.org/?va-variant=zh-mo)）。在使用无痕浏览模式前先打开这些链接，便会自动保存相应的变体设置。
+3. 出现弹窗时点击右上角关闭按钮，即可在当前会话中不再显示弹窗。
+4. 使用广告拦截插件屏蔽弹窗。
 
-**偏好变体**由这三部分计算产生。用户一旦登录，就会使用账号变体设置作为偏好变体（本地变体设置不会被覆盖）；如果其为空，使用本地变体设置；如果本地变体设置同样为空，则回退至浏览器变体设置；如果浏览器变体设置也为空，则计算失败，小工具将弹出提示框，要求用户选择本地变体并储存。
+### 我不希望使用这个小工具。
+变体小助手现在会对所有已登录用户禁用。
 
-例如，假设用户的浏览器语言为 `en`，那么初次进入网站时，小工具由于无法确定偏好变体，会询问用户。假设用户选择 `zh-tw`，那么本地变体即为 `zh-tw`，并存入浏览器 Local Storage 中，此时偏好变体为 `zh-tw`。如果此时用户登录了一个账号变体为 `zh-cn` 的账号，那么偏好变体变为 `zh-cn`。如果用户随后退出登录，偏好变体则为 `zh-tw`。此时如果用户将浏览器语言更改为 `zh-cn`，下次打开网页时小工具会自动将本地变体更改为 `zh-cn`。
-
-### 自动变体跳转
-一旦小工具发现当前页面的变体与偏好变体不同，就会重定向到偏好变体的版本，以下情况除外：
-- 站内导航。技术上通过 `document.referrer` 确定，如果用户的浏览器禁用了 Referrer，可能无法正确判断。
-- 从特定网站导航至当前页面。原理同上。
-
-### 自动变体链接修正
-如果当前页面的 URL 中指定了变体（如 `/zh-cn/条目` 或 `/w/index.php?title=条目&variant=zh-cn`），而用户点击了未指定变体的内链（如 `/wiki/条目`），那么本小工具会自动修正链接为当前页面的变体。这样是为了让用户通过下拉菜单手动切换变体时，变体选择可以“蔓延”至新页面。
+### 我发现这个小工具存在 bug。
+欢迎提交问题反馈！[在此处](https://github.com/wikimedia-gadgets/VariantAlly/issues/new)新建 issue。
 
 ## 不会解决的问题
 1. 本小工具不涉及桌面移动端跳转相关逻辑。
-2. 不会支持除简体中文、繁体中文和英文之外的其他语言。
+2. 不会支持除简体中文、繁体中文之外的其他语言。
 
 ## 开发和构建
 参见 [CONTRIBUTING.MD](./CONTRIBUTING.MD)。
 
 ## 协议
-中文变体小助手以 3 Clause BSD 协议授权，详见 [LICENSE](./LICENSE)。
-
-[^1]:  由于浏览器限制，无法在普通窗口和隐私浏览窗口之间同步；无法在 Safari < 15.4 中工作；无法在 Safari 无痕浏览模式中工作。
+变体小助手以 GPLv2 协议授权，详见 [LICENSE](./LICENSE)。

gadgets/variant-ally-dialog/.gadgetdefinition

@@ -1 +1 @@
-* VariantAllyDialog[ResourceLoader|package|hidden|requiresES6|targets=desktop,mobile|dependencies=vue,ext.gadget.VariantAlly]|VariantAllyDialog.js|VariantAllyDialog.css
+* VariantAllyDialog[ResourceLoader|package|hidden|requiresES6|dependencies=vue,ext.gadget.VariantAlly]|VariantAllyDialog.js|VariantAllyDialog.css

gadgets/variant-ally-dialog/LICENSE

@@ -1 +1 @@
-Licensed under 3 Clause BSD License. See LICENSE at project root for details.
+See LICENSE at project root for details.

gadgets/variant-ally-dialog/assets/intro.js

@@ -11,5 +11,4 @@
  *
  * See https://github.com/diskdance/VariantAlly/blob/main/CONTRIBUTING.md for build instructions.
  */
-// SPDX-License-Identifier: BSD-3-Clause
 // <nowiki>

gadgets/variant-ally-dialog/assets/messages.json

@@ -1,59 +1,32 @@
 {
-  "zh-hans": {
+  "variants": {
+    "zh-cn": "中国大陆简体",
+    "zh-sg": "新加坡简体",
+    "zh-my": "马来西亚简体",
+    "zh-hk": "香港繁體",
+    "zh-mo": "澳门繁體",
+    "zh-tw": "臺灣正體"
+  },
+  "hans": {
     "space": "",
     "close": "关闭",
-    "title": "我们希望提供更好的阅读体验",
-    "desc": "为避免您阅读简繁混杂的内容，请选择偏好的中文语言变体。",
-    "desc.btn": "了解更多。",
-    "desc.ext.1": "中文维基百科使用自动简繁转换技术，以满足不同文化背景的读者的需求。",
-    "desc.ext.2": "由于我们无法确定您的语言变体偏好，该功能将无法运作。您可能看到在其他地区常用的术语词汇，甚至简繁混杂的文本。",
-    "desc.ext.3": "为保障阅读体验，强烈建议您选择期望的中文语言变体。带来不便，敬请谅解！",
-    "vb.cn": "中国大陆简体",
-    "vb.sg": "新加坡简体",
-    "vb.my": "马来西亚简体",
-    "vb.hk": "香港繁體",
-    "vb.mo": "澳门繁體",
-    "vb.tw": "臺灣正體",
-    "footer.1": "您的选择仅保存于浏览器中，不会用作其他用途。",
-    "footer.2": "本提示不会再次显示。",
-    "footer.2.btn": "仍然显示？"
+    "vp.header": "我们支持",
+    "vp.header.alt": "记住此变体？",
+    "vp.main": "选取内容的语言变体",
+    "vp.main.alt": "以后都使用此变体呈现内容",
+    "vp.main.ext": "保存您偏好的中文语言变体，以避免显示简繁混杂的内容，提供最佳的阅读体验。",
+    "vp.button.ok": "确定",
+    "vp.button.other": "其他"
   },
-  "zh-hant": {
+  "hant": {
     "space": "",
     "close": "關閉",
-    "title": "我們希望提供更好的閱讀體驗",
-    "desc": "為避免您閱讀簡繁混雜的內容，請選擇偏好的中文語言變體。",
-    "desc.btn": "瞭解更多。",
-    "desc.ext.1": "中文維基百科使用自動簡繁轉換技術，以滿足不同文化背景的讀者的需求。",
-    "desc.ext.2": "由於我們無法確定您的語言變體偏好，該功能將無法運作。您可能看到在其他地區常用的術語詞彙，甚至簡繁混雜的文字。",
-    "desc.ext.3": "為保障閱讀體驗，強烈建議您選擇期望的中文語言變體。帶來不便，敬請諒解！",
-    "vb.cn": "中国大陆简体",
-    "vb.sg": "新加坡简体",
-    "vb.my": "马来西亚简体",
-    "vb.hk": "香港繁體",
-    "vb.mo": "澳门繁體",
-    "vb.tw": "臺灣正體",
-    "footer.1": "您的選擇僅儲存於瀏覽器中，不會用作其他用途。",
-    "footer.2": "本提示不會再次顯示。",
-    "footer.2.btn": "仍然顯示？"
-  },
-  "en": {
-    "space": " ",
-    "close": "Close",
-    "title": "We strive for a better experience",
-    "desc": "Please select your preferred Chinese language variant.",
-    "desc.btn": "Learn more.",
-    "desc.ext.1": "To accommodate readers from diverse cultural backgrounds, Chinese Wikipedia features an automatic conversion mechanism between Simplified and Traditional Chinese.",
-    "desc.ext.2": "Without your variant preference, this functionality remains inactive. Consequently, you might encounter commonly used terms from various regions and a mix of Simplified and Traditional Chinese content.",
-    "desc.ext.3": "For an optimized reading experience, we highly recommend selecting your preferred Chinese language variant. We apologize for the inconvenience.",
-    "vb.cn": "China Mainland (Simplified)",
-    "vb.sg": "Singapore (Simplified)",
-    "vb.my": "Malaysia (Simplified)",
-    "vb.hk": "Hong Kong (Traditional)",
-    "vb.mo": "Macau (Traditional)",
-    "vb.tw": "Taiwan (Traditional)",
-    "footer.1": "Your choice is stored only in this browser and is never used for other purposes.",
-    "footer.2": "This is a one-time prompt.",
-    "footer.2.btn": "Keep seeing this?"
+    "vp.header": "我們支援",
+    "vp.header.alt": "記住此變體？",
+    "vp.main": "選取內容的語言變體",
+    "vp.main.alt": "以後都使用此變體呈現內容",
+    "vp.main.ext": "儲存您偏好的中文語言變體，以避免顯示簡繁混雜的內容，提供最佳的閱讀體驗。",
+    "vp.button.ok": "確定",
+    "vp.button.other": "其他"
   }
-}
+}

gadgets/variant-ally-dialog/package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "dev:host": "vite --host",
+    "type-check": "vue-tsc --noEmit",
     "build:prod": "NODE_ENV=production vite build",
     "build:debug": "NODE_ENV=development vite build"
   },
@@ -17,9 +18,10 @@
     "browserslist": "^4.21.10",
     "less": "^4.1.3",
     "rollup-plugin-mediawiki-gadget": "^1.1.0",
-    "vite": "^4.3.9"
+    "vite": "^4.3.9",
+    "vue-tsc": "^1.8.24"
   },
   "dependencies": {
     "vue": "3.3.4"
   }
-}
+}