fix(QueryContributors): display styles of anon. contributors (qiuwenbaike#1768)

* fix(QueryContributors): display styles of anon. contributors

Author: WaitSpringQW

dist/QueryContributors/QueryContributors.js

@@ -12,7 +12,7 @@ import {getContributors} from './modules/util/getContributors';
 		return;
 	}
 
-	const contributors: string[] = await getContributors(wgPageName);
+	const contributors: (string | number)[] = await getContributors(wgPageName);
 
 	appendElement(contributors);
 })();

src/QueryContributors/QueryContributors.ts

@@ -2,7 +2,7 @@ import * as OPTIONS from '../options.json';
 import {FooterUserList} from './components/react';
 import React from 'ext.gadget.JSX';
 
-const appendElement = (userNames: string[]): void => {
+const appendElement = (userNames: (string | number)[]): void => {
 	if (!userNames || !userNames.length) {
 		return;
 	}

src/QueryContributors/modules/appendElement.tsx

@@ -34,28 +34,36 @@ const FooterNotice = ({children = <></>}: FooterNoticeProps) => {
 };
 
 interface UserListProps {
-	userNames: string[];
+	userNames: (string | number)[];
 }
 
 const UserList = ({userNames}: UserListProps) => (
 	<>
 		<>{getMessage('Based on contributions of')}</>
 		{userNames.map((userName, index) => (
 			<>
-				<a
-					href={
-						/(>|&gt;)/.test(userName)
-							? mw.util.getUrl(
-									`Special:GoToInterWiki/${sanitize(
-										userName.replace(/(>|&gt;)/, ':User:').replace(/(>|&gt;)/g, '&gt;')
-									)}`
-								)
-							: mw.util.getUrl(`User:${sanitize(userName)}`)
-					}
-					key={userName}
-				>
-					{userName}
-				</a>
+				{typeof userName === 'number' ? (
+					<span key={`${userName}`}>
+						{getMessage('Other $1 anonymous contributors').replace('$1', `${userName}`)}
+					</span>
+				) : (
+					<a
+						href={
+							/(>|&gt;)/.test(userName)
+								? mw.util.getUrl(
+										`Special:GoToInterWiki/${sanitize(
+											userName.replace(/(>|&gt;)/, ':User:').replace(/(>|&gt;)/g, '&gt;')
+										)}`
+									)
+								: mw.util.getUrl(`User:${sanitize(userName)}`)
+						}
+						rel="noopener noreferrer"
+						target="_blank"
+						key={userName}
+					>
+						{userName}
+					</a>
+				)}
 				<>{index < userNames.length - 1 ? getMessage('Seperator') : getMessage('Period')}</>
 			</>
 		))}

src/QueryContributors/modules/components/react.tsx

@@ -16,7 +16,7 @@ const getI18nMessages = () => {
 			en: '.',
 			zh: '。',
 		}),
-		'Other anonymous contributors': localize({
+		'Other $1 anonymous contributors': localize({
 			en: 'other $1 anonymous contributor(s)',
 			'zh-hans': '其他$1位匿名贡献者',
 			'zh-hant': '其他$1位匿名貢獻者',

src/QueryContributors/modules/i18n.ts

@@ -1,9 +1,8 @@
-import {getMessage} from '../i18n';
 import {queryContributors} from '../queryContributors';
 import {uniqueArray} from 'ext.gadget.Util';
 
 const getContributors = async (title: string) => {
-	let pclist: string[] = [];
+	let pclist: (string | number)[] = [];
 	let pccontinue: string | undefined;
 
 	const CACHE_KEY_PREFIX = 'ext.gadget.QueryContributors_getContributors-';
@@ -32,10 +31,7 @@ const getContributors = async (title: string) => {
 					}
 
 					if (page?.anoncontributors) {
-						pclist[pclist.length] = getMessage('Other anonymous contributors').replace(
-							'$1',
-							`${page.anoncontributors}`
-						);
+						pclist[pclist.length] = page.anoncontributors;
 					}
 				}
 			} else {