frontpage

موقع القصص القصيرة

القصص القصيرة هو أكثر مستكشف مكونات واجهة المستخدم شعبية! هذا هو موقع الويب الخاص بـ https://storybook.js.org/.

ملاحظة : هذه ليست المستندات ، فهذه موجودة هنا.

؟ المساهمة

الترحيب بالمساهمات! إذا كان شيئًا صغيرًا مثل القواعد النحوية أو علامات الترقيم ، افتح طلب سحب. إذا كان تغييرًا أكبر أو ميزة جديدة ، أضف مشكلة للمناقشة.

سير العمل

1. ميزة فكرة أو bugfix؟
2. بناء واجهة مستخدم جديدة أو تعديل واجهة المستخدم الموجودة في القصص القصيرة أولاً
3. دمج مع غاتسبي
4. تأكد
5. تأكد من أعمال الموقع وهو QAED عبر معاينات NetLify
6. تأكد من عدم وجود أخطاء مرئية في كتب القصص/الصفحات الأمامية
7. طلب سحب

تشغيل المشروع محليا

تعليمات القصص

يحتوي كتاب القصص القصيرة على كل مكونات واجهة المستخدم. تم تصميم واجهة المستخدم بعد التطوير الذي يحركه المكون ، وهي عملية تقوم ببناء واجهة المستخدم من "القاع إلى الأعلى" بدءًا من المكونات وتنتهي بالشاشات. هذا يعني أن المساهمين يجب أن يقوموا بتكوين واجهة المستخدم في القصص القصيرة قبل التكامل مع تطبيق Gatsby.

1. تثبيت الغزل
2. بناء الغزل
3. غزل Run Storybook

تعليمات غاتسبي

يستخدم Gatsby للتوجيه الأساسي وتوليد الموقع الثابت.

1. yarn start في تشغيل الموقع بأكمله

2. yarn start:skip-addons لتخطي بناء كتالوج Addon

3. yarn start:docs-only للسخرية من الصفحة الرئيسية وإنشاء صفحات المستندات

محتوى المستندات

يوجد محتوى قسم الوثائق في docs/ الدليل الفرعي لـ Storybook Monorepo: https://github.com/storybookjs/storybook/tree/next/docs.

لتشغيل هذا التطبيق أثناء تحرير هذه الملفات ، قم بالبحث

داخل storybook المونوربو:

1. قم بتشغيل الأمر yarn task ثم حدد خيار Synchronize documentation (sync-docs) .

2. توفير المسار إلى مشروع frontpage .

مع هذا ، سيتم مزامنة مجلدات storybook/docs والصفحة frontpage/src/content/docs ، مما يضمن أن تنعكس أي تغييرات على الوثائق في القصة Monorepo في مستندات موقع القصص القصيرة.

داخل مستودع frontpage :

لتشغيل وثائق الموقع ، استخدم الأمر التالي:

 yarn start:docs-only

سيتم تصور المشروع في المتصفح في http://localhost:8000

ملاحظات الإصدار

يتم تخزين ملاحظات الإصدار في دليل SRC/Content/READES كملفات .md . يتوافق اسم الملف مع الإصدار (major.minor) من الإصدار وسيتم استخدامه لملء الرابط إلى الإصدار المحدد من صفحة الإصدارات.

ضمن ملف .md الخاص بالإصدار ، يتم استخدام FrontMatter لإنشاء عنوان صفحة ، بينما يتم تحليل بقية المحتوى باستخدام gatsby-transformer-remark وتصميم مع محددات في src/styles/formatting.js .

نشر إصدارات جديدة

انظر مستندات مفصلة

متغيرات البيئة

في التطوير ومع بنيات الإنتاج المحلي ، يمكن تكوين متغيرات البيئة مع ملفات .env كما هو موضح هنا. يتم توجيه المتغيرات مع GATSBY_ عندما يحتاج هذا المتغير إلى توفر في رمز من جانب العميل.

في النشر معاينات ونشر الإنتاج ، يتم تعيين هذه المتغيرات مع متغيرات بناء NetLify.

يبحث

البحث داخل المستندات مدعوم بواسطة DocSearch. لكي يعمل هذا ، مطلوب متغير البيئة:

GATSBY_ALGOLIA_API_KEY

كيفية الإعداد على جهازك:

1. إنشاء ملف .env.development محليًا
2. احصل على المفتاح هنا: https://app.netlify.com/sites/storybook-frontpage/settings/deploys#environment
3. إضافة GATSBY_ALGOLIA_API_KEY=key الملف من الخطوة 1

يزحف الموقع كل 24 ساعة بحيث تنعكس أي تحديثات في هذا الوقت من الوقت.

منشورات المدونة

تم جلب آخر مدونة من Ghost. ستحتاج إلى إضافة إلى هذا العمل ، مطلوب متغير البيئة:

GHOST_STORYBOOK_API_KEY

كيفية الإعداد على جهازك:

1. إنشاء ملف .env.development محليًا
2. احصل على المفتاح هنا: https://storybookblog.ghost.io/ghost
3. إضافة GHOST_STORYBOOK_API_KEY=key الملف من الخطوة 1

الأدوات

يستخدم هذا المشروع هذه الأدوات لجعل وظيفتنا أسهل.

؟ ينشر بواسطة NetLify

يتم نشر الفروع الرئيسية والفروع تلقائيًا عن طريق NetLify كل التزام.

؟ الاختبار البصري بواسطة لوني

يتم اختبار جميع القصص في قصة القصص تلقائيًا على سطح المكتب والجوال. تأكد من قبول جميع خطوط الأساس قبل الاندماج.

؟ التكامل المستمر بواسطة Circle CI

كل بناء مجموعة اختبار يعمل. تأكد من عدم وجود أخطاء قبل الاندماج.