kitsu web
1.0.0
這是我們的客戶存儲庫。它包含kitsu的react.js應用程序。
查看工具，移動，服務器和API文檔存儲庫。
您正在閱讀的事實可能意味著您有興趣為Kitsu Web應用程序做出貢獻。如果是這樣，歡迎！入門非常容易，我們在這里為您提供幫助。如果您有任何疑問，請隨時在#DEV頻道中的不和諧中詢問我們！
在提出拉動請求之前，請閱讀styleGuide，並確保將代碼庫保持清潔和一致的未來開發人員。
您將需要一個相當現代的node.js版本。如果您不確定，那麼Active LTS可能是最好的選擇。我們的部署將使用Active LTS，但我們嘗試確保所有內容在當前版本上也順利運行。
有節點後，運行以下內容：
npm install （安裝依賴項）npm run dev （默認端口3000）現在訪問http://localhost:3000 ，您應該查看Kitsu應用程序！
默認情況下，在開發模式下，這將連接到API的
staging.kitsu.io（我們的預生產環境），這意味著您所做的任何事情都將每週消除。您可以通過在.env文件中設置VITE_API_HOST=https://kitsu.io/將其更改為連接到生產。這通常不是必需的，但是有些事情在分期中無法完全起作用。將來，我們計劃將其整合到Kitsu-Tools開發環境中。
儘管過去使用React和Vite的大多數開發人員應該熟悉基本的項目結構，但Kitsu是一個大型應用程序，其結構比您習慣的更多。
Vite從“入口點”開始編譯應用程序。在我們的情況下，我們有四個“構建目標”：
BUILD_TARGET=client - 主媚值（V4）Web應用程序index.html - kitsu Web應用程序的主要入口點oauth2-callback.html - 來自OAuth2提供商（主要是我們納米AANOAUTH）庫的回調處理程序的入口點。BUILD_TARGET=server - 服務器端渲染版本的Kitsu Web應用程序server.js - Kitsu Web應用程序的主要切入點BUILD_TARGET=library - kitsu（v4）Web應用程序中的組件庫，可在遷移過程中曝光V3 Ember應用程序。src/entry-ember.tsx - 可以從Ember應用程序訪問的出口src/assets/ - 應用程序導入的圖標，插圖和動畫等靜態資產。這些不僅複製到輸出目錄，還必須進口這些目錄，並且可以在使用各種插件的過程中處理。src/components/ - 常見，可重複使用的組件src/pages/ - 呈現整個頁面的組件src/layouts/ - 提供可重複使用的頁面結構的組件src/contexts/ - 在組件之間共享狀態的反應上下文src/initializers/ - 在應用程序啟動期間運行的命令代碼（如果可能的話，請避免使用應用程序中的鉤子）src/constants/config.ts - 在運行時公開配置到應用程序src/graphql/ - GraphQl支持代碼，例如生成的模式類型，標量和URQL交換。src/hooks/ - 應用程序的自定義式掛鉤src/locales/ - 我們支持的每個語言環境的數據（翻譯，date-fn Locales等）src/errors/ - 我們所有的錯誤子類src/styles/ - 全應用樣式（不是針對組件的特定），主要是以組件樣式使用的變量形式。 npm run codegen如果更改.gql文件或添加新的翻譯鍵，則需要運行npm run codegen以使其正常工作。 GraphQl CodeGen將為每個查詢生成打字稿文件，INTL CodeGen將從組件中提取所有翻譯鍵。
npm run storybook我們使用故事書記錄組件。我們要求您記錄您添加的任何新組件。
npm run test:unit # Runs unit tests (vitest)
npm run test:unit:watch # Opens vitest in watch mode
npm run test:e2e # Runs e2e tests (cypress)我們有兩個測試套件：
.test.ts(x)文件中的代碼附近cypress/在大多數情況下，我們建議使用Vitest測試您的代碼。這是一個更好的體驗，而且運行速度更快。也就是說，有時您需要從端到端測試完整的工作流程，這是柏樹的目的。
我們使用Crowdin來處理翻譯，前往Crowdin.com/project/kitsu-web建議更改或添加新的翻譯。
翻譯使用ICU消息語法格式。閱讀語法文檔。
想要創建一個問題？在Kitsu上打開錯誤報告或功能請求。
