kitsu web
1.0.0
Ceci est notre référentiel client. Il contient l'application React.js pour Kitsu.
Consultez les référentiels Docs Tools, Mobile, Server et API.
Le fait que vous lisez ceci signifie probablement que vous souhaitez contribuer à l'application Web Kitsu. Si oui, bienvenue! C'est assez facile de commencer, et nous sommes là pour vous aider. Si vous avez des questions, n'hésitez pas à nous poser sur notre discorde dans la chaîne #DEV!
Avant de faire une demande de traction, veuillez lire le StyleGuide et assurez-vous que vous gardez la base de code propre et cohérente pour les futurs développeurs.
Vous allez avoir besoin d'une version Node.js assez moderne. Le LTS actif est probablement la meilleure option si vous n'êtes pas sûr. Nos déploiements utiliseront le LTS actif, mais nous essayons de nous assurer que tout se déroule également en douceur sur la version actuelle.
Après avoir nœud, exécutez ce qui suit:
npm install (installe les dépendances)npm run dev (port par défaut 3000) Visitez maintenant http://localhost:3000 et vous devriez voir l'application Kitsu!
Par défaut, en mode développement, cela se connectera à
staging.kitsu.io(notre environnement de pré-production) pour l'API, ce qui signifie que tout ce que vous faites sera éliminé chaque semaine. Vous pouvez le modifier pour vous connecter à la production si nécessaire en définissantVITE_API_HOST=https://kitsu.io/dans le fichier.env. Ce n'est généralement pas nécessaire, mais il y a certaines choses qui ne fonctionnent pas pleinement dans la mise en scène.À l'avenir, nous prévoyons d'intégrer cela dans l'environnement Kitsu-Tools Dev.
Bien que la structure du projet de base soit familière à la plupart des développeurs qui ont utilisé React et Vite dans le passé, Kitsu est une grande application et a plus de structure que vous pourriez être habitué.
Vite compile l'application à partir d'un "point d'entrée". Dans notre cas, nous en avons quatre, sur trois "cibles de construction":
BUILD_TARGET=client - L'application Web principale du kitsu (V4)index.html - Point d'entrée principal pour l'application Web Kitsuoauth2-callback.html - Point d'entrée pour un gestionnaire de rappel d'un fournisseur OAuth2 (principalement des délégués à notre bibliothèque NanoAuth).BUILD_TARGET=server - version rendue côté serveur de l'application Web Kitsuserver.js - point d'entrée principal pour l'application Web KitsuBUILD_TARGET=library - Une bibliothèque de composants de l'application Web Kitsu (V4) à exposer pour l'application V3 Ember pendant la migration.src/entry-ember.tsx - les exportations qui seront accessibles à partir de l'application Ember src/assets/ - des actifs statiques comme les icônes, les illustrations et les animations importées par l'application. Ceux-ci ne sont pas seulement copiés dans le répertoire de sortie, ceux-ci doivent être importés et peuvent être traités pendant la compilation avec divers plugins.src/components/ - Composants communs et réutilisablessrc/pages/ - composants rendant une page entièresrc/layouts/ - Composants fournissant une structure de page réutilisablesrc/contexts/ - Réagir des contextes pour partager l'état entre les composantssrc/initializers/ - Code impératif qui s'exécute pendant l'application Boot (évitez-les si possible, préférez les crochets dans le composant de l'application)src/constants/config.ts - expose la configuration à l'application lors de l'exécutionsrc/graphql/ - Code de support GraphQL, tel que les types de schéma générés, les scalaires et les échanges URQL.src/hooks/ - Crochets de réaction personnalisés pour l'applicationsrc/locales/ - DONNÉES POUR TOUT LES LOCAUX que nous soutenons (traductions, lieux de date-FN, etc.)src/errors/ - toutes nos sous-classes d'erreursrc/styles/ - Styles à l'échelle de l'application (non spécifiques à un composant), principalement sous la forme de variables qui sont utilisées dans les styles de composants. npm run codegen Si vous modifiez un fichier .gql ou ajoutez une nouvelle clé de traduction, vous devrez exécuter npm run codegen pour les faire fonctionner correctement. Le GraphQL CodeGen générera des fichiers TypeScript pour chaque requête et INTL CodeGen extrait toutes les touches de traduction de vos composants.
npm run storybookNous utilisons un livre de contes pour documenter les composants. Nous vous demandons de documenter les nouveaux composants que vous ajoutez.
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)Nous avons deux suites de test:
.test.ts(x) fichierscypress/La plupart du temps, nous vous recommandons de tester votre code avec Vitest. C'est une expérience beaucoup plus agréable, et ça fonctionne plus vite. Cela dit, vous devez parfois tester un flux de travail complet de bout en bout, à quoi sert le cyprès.
Nous utilisons Crowdin pour gérer les traductions, rendez-vous sur Crowdin.com/project/Kitsu-Web pour suggérer des modifications ou ajouter de nouvelles traductions.
Les traductions utilisent le format de syntaxe du message ICU. Lisez la documentation de syntaxe.
Vous cherchez à créer un problème? Ouvrez un rapport de bogue ou une demande de fonctionnalité sur Kitsu.
