kitsu web

تطبيق Kitsu الويب

---

هذا هو مستودع عميلنا. أنه يحتوي على تطبيق React.js لـ Kitsu.
تحقق من أدوات مستودعات مستندات المحمول والخادم و API.

---

المساهمة

ربما تعني حقيقة أنك تقرأ هذا أنك مهتم بالمساهمة في تطبيق Kitsu على الويب. إذا كان الأمر كذلك ، مرحبًا بك! من السهل جدًا البدء ، ونحن هنا لمساعدتك على طول الطريق. إذا كانت لديك أي أسئلة ، فلا تتردد في طرحها على خلافنا في قناة #DEV!

قبل تقديم طلب سحب ، يرجى قراءة StyleGuide والتأكد من أنك تحتفظ بقاعدة الكود نظيفة ومتسقة للمطورين في المستقبل.

تشغيله

ستحتاج إلى إصدار Node.js حديث إلى حد ما. ربما يكون LTS النشط هو الخيار الأفضل إذا لم تكن متأكدًا. ستستخدم عمليات النشر لدينا LTS النشطة ، لكننا نحاول التأكد من أن كل شيء يعمل بسلاسة على الإصدار الحالي أيضًا.

بعد أن يكون لديك عقدة ، قم بتشغيل ما يلي:

1. npm install (تثبيت التبعيات)
2. npm run dev (المنفذ الافتراضي 3000)

الآن قم بزيارة http://localhost:3000 ويجب أن ترى تطبيق kitsu!

افتراضيًا ، في وضع التطوير ، سيتصل هذا بـ staging.kitsu.io (بيئة ما قبل الإنتاج) لـ API ، مما يعني أنه سيتم القضاء على أي شيء تفعله أسبوعيًا. يمكنك تغيير هذا للاتصال بالإنتاج إذا لزم الأمر عن طريق تعيين VITE_API_HOST=https://kitsu.io/ في ملف .env . هذا ليس ضروريًا بشكل عام ، ولكن هناك بعض الأشياء التي لا تعمل بشكل كامل في التدريج.

في المستقبل ، نخطط لدمج هذا في بيئة Kitsu-Tools Dev بشكل أفضل.

التنقل في قاعدة الكود

على الرغم من أن هيكل المشروع الأساسي يجب أن يكون مألوفًا لمعظم المطورين الذين استخدموا React و Vite في الماضي ، فإن Kitsu هو تطبيق كبير ولديه بنية أكثر مما قد اعتادت عليه.

نقاط الدخول

يقوم Vite بتجميع التطبيق بدءًا من "نقطة الدخول". في حالتنا ، لدينا أربعة ، عبر ثلاثة "أهداف بناء":

• BUILD_TARGET=client - تطبيق الويب الرئيسي Kitsu (V4)
  • index.html - نقطة الدخول الرئيسية لتطبيق الويب Kitsu
  • oauth2-callback.html نقطة الدخول لمعالج رد الاتصال من موفر OAUTH2 (معظمهم فقط مندوبون إلى مكتبة Nanoauth).
• BUILD_TARGET=server إصدار من جانب الخادم من تطبيق Kitsu Web App
  • server.js - نقطة الدخول الرئيسية لتطبيق Kitsu Web
• BUILD_TARGET=library - مكتبة المكونات من تطبيق الويب Kitsu (V4) لفضح تطبيق 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/ -بيانات لكل لغة ندعمها (الترجمات ، واللغات التاريخية ، وما إلى ذلك)
• src/errors/ - جميع الفئات الفرعية خطأ لدينا
• src/styles/ -أنماط على نطاق التطبيق (غير محددة لمكون) ، ومعظمها في شكل متغيرات تستخدم في أنماط المكونات.

المكتبات الرئيسية

• اللغة: TypeScript
• إطار عمل: رد فعل (قد نتحول إلى preact في مرحلة ما)
• الحزمة: فيت
• الاختبار: Vitest
• التوجيه: React Router V6
• عميل GraphQL: URQL مع تمكين GraphCache
• الأنماط: وحدات CSS التي تتم معالجتها بواسطة PostCSS
• التدويل/التوطين: رد فعل intl
• الوقت: تاريخ FNS

سير عمل التنمية المشتركة

تشغيل Codegen

npm run codegen

إذا قمت بتغيير ملف .gql أو إضافة مفتاح ترجمة جديد ، فستحتاج إلى تشغيل npm run codegen لجعلهم يعملون بشكل صحيح. ستقوم CodeGen GraphQL بإنشاء ملفات TypeScript لكل استعلام وسيقوم Codegen Intl باستخراج جميع مفاتيح الترجمة من مكوناتك.

تشغيل القصص القصيرة

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)

لدينا جناح اختباران:

• اختبارات الوحدة
  • مدعوم من Vitest ، وهو إطار اختبار متوافق مع Jest
  • سريع للغاية
  • يدير في دوم مزيف (وليس متصفحًا حقيقيًا)
  • مخزنة مجاورة للرمز في ملفات .test.ts(x)
• اختبارات من طرف إلى طرف
  • مدعوم من Cypress ، إطار اختبار المتصفح بدون رأس
  • أبطأ
  • يعمل في متصفح حقيقي (Chrome ، Firefox ، وما إلى ذلك)
  • مخزنة في cypress/

معظم الوقت ، نوصي باختبار الكود الخاص بك مع Vitest. إنها تجربة أجمل بكثير ، وهي تعمل بشكل أسرع. ومع ذلك ، تحتاج في بعض الأحيان إلى اختبار سير عمل كامل من نهاية إلى طرف ، وهو ما يوجد من أجله.

الترجمات

نستخدم CrowdIn للتعامل مع الترجمات ، وتوجه إلى CrowdIn.com/project/kitsu-web لاقتراح تغييرات أو إضافة ترجمات جديدة.

ترجمات تستخدم تنسيق بناء رسائل وحدة العناية المركزة. قراءة وثائق بناء الجملة.

مشاكل

تتطلع إلى إنشاء مشكلة؟ افتح تقرير الأخطاء أو طلب ميزة على Kitsu.