تم تصميم موقع Fairfield Programming Association الجديد في Gatsby ويستخدم CSS Tailwind للتصميم. هذا يمكّننا من الحفاظ على تكاليف الخادم مع توفير تجربة مستخدم ومطور ممتازة. جميع صفحاتنا هي DSG (الجيل الثابت المؤجل) ، مما يعني أنه يمكن تغيير معظم المعلومات الموجودة على موقع الويب عن طريق تعديل المعلومات الموجودة داخل مجلد البيانات.
كل متطوع في فريق FPA لديه صفحات فردية خاصة بهم. هذا يعني أنه إذا كنت ترغب في التطوع ، فستحصل على استئناف Miniture لشرح ما فعلته من أجل FPA ، وكيف أثرت على الآخرين من حولك. أملنا هو أن هذه الصفحات الشخصية يمكن أن تساعدك في المستقبل من خلال إظهار المبلغ الذي ساعدتنا في مهمتنا.
أحد الأشياء العظيمة حول FPA هو عدد المشاريع التي نديرها. من لغات البرمجة إلى شراكات مدرجة في بورصة ناسداك إلى التعلم الشخصي في المدارس المحرومة ، فإن FPA يفعل كل شيء. لكننا كنا بحاجة إلى طريقة لإظهار العالم كل الأشياء الرائعة والأنيقة التي كنا نعمل عليها. لذلك ، أضفنا قوائم المشاريع التي تتيح لنا تخصيص جميع المعلومات الصحيحة لكل صفحة مشروع مع الحفاظ على التصميم والمديرات المتسقة.
قم بتنزيل المشروع من Github.
لديك عقدة و NPM و Gatsby مثبتة.
قم بتشغيل الأمر أدناه لتثبيت الحزم.
npm installgatsby developملاحظة: قد يستغرق الأمر في أي مكان من بضع ثوان إلى بضع دقائق لبدء موقع الويب ، ولكن بمجرد أن يكون موقع الويب مباشرًا ، فإنه يتم إعادة تحميله الساخن.
للمساهمة في هذا المشروع ، يرجى الاطلاع على علامة تبويب المشكلات. سيحتوي هذا على جميع الأشياء التي نحتاج حاليًا إلى المساعدة عليها.
إضافة أعضاء الفريق بسيط للغاية - داخل مجلد البيانات ، لدينا ملف مسمى ، data/team.json ، والذي يحتوي على جميع معلومات أعضاء الفريق. لإضافة عضو في الفريق ، ما عليك سوى تكرار بيانات أعضاء الفريق الأخرى من الملف وتغيير البيانات الموجودة بداخله. يرجى إضافة عضو الفريق الجديد إلى أسفل الملف لأننا لا نريد مشاكل في الفهرسة وما إلى ذلك . بمجرد إضافتك في عضو الفريق الجديد هذا ، أرسل التغييرات الخاصة بك كطلب سحب وإنتهما!
قد يكون أحد الأشياء المربكة حول كائنات أعضاء الفريق هو email works معلمات. تم تنسيق البريد الإلكتروني دائمًا [last name][first initial]@fairfieldprogramming.org . الأعمال عبارة عن مجموعة من الأرقام - كل رقم هو فهرس المشروع (في ملف data/programs.json ).
يتم تخزين جميع المشاريع داخل ملف data/programs.json . لإضافة مشروع جديد ، ما عليك سوى إضافة عنصر جديد في الجزء السفلي من الصفيف الذي يحتوي على سبيكة وعنوان ووصف ومنذ المعلمات.
إذا كنت تتطلع إلى إضافة معلومات أكثر تعقيدًا إلى المشروع ، فما عليك سوى إلقاء نظرة على أمثلة من مشاريع أخرى في الصفيف أو أسفلها أدناه عند تعريف كائن البرنامج.
class Program {
slug = "example" ; // The URL slug of the project- ex: https://fairfieldprogramming.org/programs/example
title = "Example Project" ;
description = "This is an example project" ; // Just a short description (20-25 words)
since = "04-17-22" ; // Follows ISO Date Format
joining = "To join, email John!" ; // A paragraph on how to join, with requirements (80-120 words)
// An array of sub-pages
pages = [
{
"slug" : "sub-page" , // The URL slug of the project- ex: https://fairfieldprogramming.org/programs/example/sub-page
"title" : "This is a sub-page" , // Page title
// The description shows up in the banner (optional) and the OpenGraph data of the page
"description" : "The FPA General Code License was originally created as a way to permissively license our software for all without having to deal with commercial entities 'asset-ripping' code from our open projects." ,
// An array of the sections of the page (vertically laid out)
"content" : [
{
"type" : "banner|markdown|code" // can be either banner, markdown, or code
// Banner makes a giant banner explaining the page
// Markdown allows you to put markdown onto the page
// Code allows you to embed a code example in the page
} ,
]
}
] ;
}