Kitsu 网页应用

---

<p align="center">这是我们的客户端仓库。它包含了 Kitsu 的 React.js 应用程序。<br />查看 工具, 移动端, 服务器 和 API 文档 仓库。</p>

---

贡献

你正在阅读这段内容，可能意味着你有兴趣为 Kitsu 网页应用做出贡献。如果是这样，欢迎加入！开始参与非常简单，我们随时为你提供帮助。如果你有任何问题，请随时在我们的 Discord 的 #dev 频道中向我们询问！

在你提交拉取请求之前，请阅读风格指南，确保你能保持代码库的整洁和一致性，方便未来的开发者使用。

运行项目

你需要一个相对较新的 Node.js 版本。如果你不确定选择哪个版本，Active LTS 可能是最佳选择。我们的部署会使用 Active LTS，但我们也努力确保一切在当前版本上顺利运行。

安装 Node 后，运行以下命令：

1. npm install（安装依赖）
2. npm run dev（默认端口 3000）

现在访问 http://localhost:3000，你应该能看到 Kitsu 应用程序了！

默认情况下，在开发模式中，这将连接到 staging.kitsu.io（我们的预生产环境）作为 API，这意味着你所做的任何操作每周都会被清除。如果需要，你可以通过在 .env 文件中设置 VITE_API_HOST=https://kitsu.io/ 来改为连接到生产环境。通常这不是必要的，但有些功能在预发环境中可能无法完全正常工作。

未来我们计划将其更好地集成到 kitsu-tools 开发环境中。

导航代码库

虽然基本的项目结构对于使用过 React 和 Vite 的大多数开发者来说应该很熟悉，但 Kitsu 是一个大型应用程序，它的结构可能比你习惯的更加复杂。

入口点

Vite 从"入口点"开始编译应用程序。在我们的情况下，我们有四个入口点，分布在三个"构建目标"中：

• BUILD_TARGET=client — 主要的 Kitsu (V4) 网页应用
  • index.html — Kitsu 网页应用的主要入口点
  • oauth2-callback.html — OAuth2 提供商回调处理程序的入口点（主要委托给我们的 nanoauth 库）
• BUILD_TARGET=server — Kitsu 网页应用的服务器端渲染版本
  • server.js — Kitsu 网页应用的主要入口点
• BUILD_TARGET=library — 从 Kitsu (V4) 网页应用中提取的组件库，用于在迁移期间暴露给 V3 Ember 应用
  • src/entry-ember.tsx — 从 Ember 应用程序可访问的导出

应用程序源代码

• src/assets/ — 由应用程序导入的静态资源，如图标、插图和动画。这些不仅仅是复制到输出目录，它们必须被导入，并可在编译过程中通过各种插件进行处理。
• src/components/ — 通用、可重用的组件
• src/pages/ — 渲染整个页面的组件
• src/layouts/ — 提供可重用页面结构的组件
• src/contexts/ — 用于在组件之间共享状态的React上下文
• src/initializers/ — 在应用程序启动期间运行的命令式代码（尽可能避免使用这些，优先使用App组件中的钩子）
• src/constants/config.ts — 在运行时向应用程序公开配置
• src/graphql/ — GraphQL支持代码，如生成的模式类型、标量和urql交换。
• src/hooks/ — 应用程序的自定义React钩子
• src/locales/ — 我们支持的每种语言环境的数据（翻译、date-fn语言环境等）
• src/errors/ — 所有我们的错误子类
• src/styles/ — 应用程序范围的样式（不特定于某个组件），主要以在组件样式中使用的变量形式存在。

主要库

• 语言： TypeScript
• 框架： React（我们可能在某个时候切换到Preact）
• 打包工具： Vite
• 测试： Vitest
• 路由： React Router V6
• GraphQL客户端： Urql，启用Graphcache
• 样式： 由PostCSS处理的CSS Modules
• 国际化/本地化： React Intl
• 时间： date-fns

常见开发工作流程

运行代码生成

npm run codegen

如果你更改了.gql文件或添加了新的翻译键，你需要运行npm run codegen以使它们正常工作。GraphQL代码生成器将为每个查询生成TypeScript文件，Intl代码生成器将从你的组件中提取所有翻译键。

运行Storybook

npm run storybook

我们使用Storybook来记录组件。我们要求你为你添加的任何新组件编写文档。

运行测试

npm run test:unit # 运行单元测试（vitest）
npm run test:unit:watch # 以监视模式打开vitest
npm run test:e2e # 运行端到端测试（cypress）

我们有两个测试套件：

• 单元测试
  • 由Vitest驱动，一个与Jest兼容的测试框架
  • 极快
  • 在假DOM中运行（不是真实浏览器）
  • 存储在代码旁边的.test.ts(x)文件中
• 端到端测试
  • 由Cypress驱动，一个无头浏览器测试框架
  • 较慢
  • 在真实浏览器中运行（Chrome、Firefox等）
  • 存储在cypress/中

大多数情况下，我们建议使用Vitest测试你的代码。这是一个更好的体验，而且运行速度更快。但是，有时你需要从端到端测试完整的工作流程，这就是Cypress的用途所在。

翻译

我们使用CrowdIn处理翻译，请前往crowdin.com/project/kitsu-web提出更改建议或添加新翻译。

翻译使用ICU消息语法格式。阅读语法文档。

问题

想要创建问题？在Kitsu上打开错误报告或功能请求。