MoegirlPediaInterfaceCodes
萌娘百科界面代码库
欢迎来到萌娘百科界面代码库，本仓库由萌娘百科界面管理员所组成的团队维护，旨在以自动化的方式减轻维护界面代码的复杂度。
目前只有萌娘百科的界面管理员可以拥有本仓库的读写权限，如果你是萌娘百科的界面管理员但没有权限，你可以向 U:AnnAngela 获取本仓库的读写权限；不过如果你尚不是界面管理员，我们也欢迎你以下列方式参与到本仓库的维护工作中来。
仓库架构
仓库文件架构
本仓库包含多组文件用以实现不同用途，详情见下。
仓库架构详情
- [`.github`](.github) 文件夹用以保存 GitHub Dependabot 和 GitHub Actions 所需配置文件，其中： - [`.github/workflows/postCommit.yaml`](.github/workflows/postCommit.yaml) 用以保存自动化流程，包含自动配置 Conventional Commits（约定式提交）所需 scope（作用域）信息、自动导入来自 npm 和指定页面的代码、自动补全小工具列表；： - [`.github/workflows/generatePolyfill.yaml`](.github/workflows/generatePolyfill.yaml) 用以自动生成 polyfill 文件； - [`.github/workflows/auto_assign.yaml`](.github/workflows/auto_assign.yaml) 用以自动对 pull request 和 issue 添加 assignees 和 reviewers（若有）。 - [`.vscode/settings.json`](.vscode/settings.json) 用来保存 Conventional Commits（约定式提交）所需 scope（作用域）信息； - [`scripts`](scripts) 文件夹用以保存流程所需代码，其中： - [`scripts/postCommit/prepareGit.js`](scripts/postCommit/prepareGit.js) 用来准备 Github Actions 上的 git 环境，自动生成 author 和 committer 的相关信息； - [`scripts/browserify/index.js`](scripts/browserify/index.js) 用来通过 [browserify](https://browserify.org/) 库导入来自 npm 的代码，其目标在 [`scripts/browserify/targets.yaml`](scripts/browserify/targets.yaml) 中定义； - [`scripts/prefetch/index.js`](scripts/prefetch/index.js) 用来导入来自指定页面的代码，其目标在 [`scripts/prefetch/targets.yaml`](scripts/prefetch/targets.yaml) 中定义； - [`scripts/generatePolyfill/index.js`](scripts/generatePolyfill/index.js) 用来自动生成 polyfill 文件，该代码使用了 [JakeChampion/polyfill-service 库](https://github.com/JakeChampion/polyfill-service)； - [`scripts/generateGadgetsDefinition/index.js`](scripts/generateGadgetsDefinition/index.js) 用来自动补全小工具列表，当发现新增小工具时，该代码会自动将对应小工具插入到 [`src/gadgets/Gadgets-definition-list.yaml`](src/gadgets/Gadgets-definition-list.yaml) 的响应列表的末尾； - [`scripts/generateConventionalCommitsScopes/index.js`](scripts/generateConventionalCommitsScopes/index.js) 用来自动配置 Conventional Commits（约定式提交）所需 scope（作用域）信息； - [`scripts/postCommit/linguist-generated.js`](scripts/postCommit/linguist-generated.js) 用来自动生成 [`.gitattributes`](.gitattributes) 以告知 Github 如何区分代码是否自动生成； - [`scripts/postCommit/push.js`](scripts/postCommit/push.js) 用来推送由 Github Actions 做出的更改； - [`scripts/emailmapChecker/index.js`](scripts/emailmapChecker/index.js) 用来检查相关用户是否将其萌娘百科用户名和邮箱地址添加到 [`.mailmap`](.mailmap)，若当前环境为本地则检测 git 配置文件里的邮箱地址，若当前环境为 Github Actions 则检查相关 commits 的邮箱地址。 - [`scripts/ci/before.js`](scripts/ci/before.js) 和 [`scripts/ci/after.js`](scripts/ci/after.js) 用来在 `npm run ci` 里自动替换 [`package-lock.json`](package-lock.json) 里的 `resolved` 对应的 registry 为你本地设置的 registry，有助于加快安装速度。 - 自动化工具的配置文件： - [`.eslintrc.yaml`](.eslintrc.yaml) 配置 eslint，由于所有 Javascript 代码都需经过编译，故其 `parserOptions.ecmaVersion` 被指定为 `latest` 以便充分利用最新标准； - [`tsconfig.json`](tsconfig.json) 配置 tsc，由于需要生成能通过小工具扩展验证的代码，故其 `compilerOptions.target` 被指定为 `ES3`； - [`.stylelintrc.yaml`](.stylelintrc.yaml) 配置 stylelint； - [`.postcssrc.yaml`](.postcssrc.yaml) 配置 postcss； - [`.browserslistrc`](.browserslistrc) 配置 [autoprifixer](https://github.com/postcss/autoprefixer) 所使用的 [browserslist](https://github.com/browserslist/browserslist)，目前暂定锚定为 [`defaults`](https://github.com/browserslist/browserslist#full-list) 的基础上添加 `Chrome >= 70` 以适应萌百用户群体。 - 代码部分： - [`src/gadgets`](src/gadgets) 以文件夹形式保存小工具，每一个文件夹都是一个小工具，里面包含以下内容： - `definition.yaml` 保存小工具配置，包括依赖项、所需权限等，以 `_` 开头的键值对是其他配置，如小工具所在的章节等； - `.eslintrc.yaml` （可选）用以阻止 eslint 在某些文件上进行检查，常见于来自 npm 和指定页面的代码； - `*.js` 和 `*.css` 为小工具代码，文件名为萌娘百科上对应页面的页面名； - [`src/groups`](src/groups) 以文件夹形式保存用户组级别代码，每一个文件夹都对应一个子站点，每一个站点文件夹的子文件夹对应一个用户组，里面包含 `*.js` 和 `*.css` 等代码，文件名为萌娘百科上对应页面的页面名； - [`src/global`](src/global) 保存全站代码，每一个文件夹都对应一个站点，里面包含 `*.js` 和 `*.css` 等代码，文件名为萌娘百科上对应页面的页面名。本仓库支持同时管理多个子站点的代码：
仓库 npm 脚本
本仓库包含下列脚本：
npm run test方便检测代码错误npm run format可修正可被自动修正的错误npm run ci可通过临时修改镜像源的方式加快npm ci速度npm run build手动编译全部（CSS+JS）代码npm run build:css手动编译所有 CSS 代码npm run build:js手动编译所有 JS 代码
自动化流程
- 每周日 23:00 UTC 会自动触发一次 Generate Polyfill CI；
- 每天 00:15 UTC（但愿，Github Actions的 cron 延迟真的好高 _(:з」∠)_）会自动触发一次 postCommit CI；
- 每提交一次 commit（包括提交 pull request 和在 pull request 里提交新的 commit），postCommit CI 会触发；
- 当 postCommit CI 检测到新内容时，会自动触发一次 Linter test。
编译流程
机器人通过以下流程编译代码，然后提交到萌百：
- 执行
tsc --project tsconfig.production.json以编译*.js代码； - 执行
npx postcss src/**/*.css --base src/ -d dist/ --verbose以编译*.css代码； - 根据模板生成
MediaWiki:Gadgets-definition页面。
如需手动唤起机器人，请到 post commit CI workflow 处，选择 Branch 为 master，手动执行该 workflow。
已知问题
-
TypeScript 5.0 将
target: ES3编译选项标记为弃用，而萌娘百科目前（2023年3月）使用的 MediaWiki 1.31.7 存在 bug 无法解析使用保留字作为点号属性名（foo.return会报错），这在 MediaWiki 1.33 被修复。解决办法：
- 等萌百升级 MediaWiki 系统；或
- 找一个支持编译为 ECMAScript 3 版本的编译工具。
参与维护
众人拾柴火焰高，我们欢迎你参与到界面管理工作中来。
提出建议、意见
我们欢迎你在萌娘百科技术实现讨论版提出建议、意见，我们会审慎考虑可行性和成本等因素后作出决定。
提交贡献
提交贡献的原因有很多，可能是发现了 typo，可能你写成了一个小工具，不论如何我们都欢迎你来提交贡献。
但首先，最重要的一点是：务必阅读并遵守 CODE OF CONDUCT.md，否则你的贡献有可能被拒绝。
其次，由于需要确保（虽然永远也不可能出现的）将小工具迁移到 Gadget 名字空间的情况的兼容性，文件名对应了萌娘百科上对应页面的页面名，从而包含了 :，而这导致了本仓库无法在 Windows 上克隆。
所以我们建议你通过以下方式提交贡献：
- 使用 Linux on Windows with WSL；
- 使用 Linux 系统（可以是远程服务器、本地虚拟机、本地 Docker 容器等）；
- 使用 macOS 系统；
- 使用 GitHub Codespaces（对个人用户有免费额度）。
然后，我们建议你使用 Visual Studio Code，本仓库专为 VSCode 配置。我们也建议你搭配以下 VSCode 扩展结合本仓库提供的配置以优化体验：
- Conventional Commits（约定式提交）：Conventional Commits 扩展；
- eslint：ESLint 扩展；
- stylelint：Stylelint 扩展；
- EditorConfig：EditorConfig for VS Code 扩展；
- 远程开发：
- 在 Linux on Windows with WSL 里：Remote - WSL 扩展；
- 在运行 Linux 的本地 Docker 容器里：Remote - Containers 扩展；
- 在运行 Linux 的本地虚拟机或远程服务器里：Remote - SSH 扩展和 Remote - SSH: Editing Configuration Files 扩展。