fairfield programming.github.io

Fairfield Programming Association Frontend

เว็บไซต์สมาคมการเขียนโปรแกรม Fairfield ใหม่สร้างขึ้นใน Gatsby และใช้ Tailwind CSS สำหรับสไตล์ สิ่งนี้ช่วยให้เราสามารถลดต้นทุนเซิร์ฟเวอร์ในขณะเดียวกันก็มอบประสบการณ์ผู้ใช้และนักพัฒนาที่ยอดเยี่ยม หน้าทั้งหมดของเราคือ DSG (การสร้างแบบคงที่รอการตัดบัญชี) ซึ่งหมายความว่าข้อมูลส่วนใหญ่ในเว็บไซต์สามารถเปลี่ยนแปลงได้โดยการปรับเปลี่ยนข้อมูลภายในโฟลเดอร์ข้อมูล

คุณสมบัติ

ระบบสมาชิกในทีม - ตัวอย่าง

อาสาสมัครทุกคนในทีม FPA มีหน้าของตัวเอง ซึ่งหมายความว่าหากคุณต้องการเป็นอาสาสมัครคุณจะได้รับประวัติย่อขั้นต่ำเพื่ออธิบายสิ่งที่คุณทำเพื่อ FPA และมันส่งผลกระทบต่อผู้อื่นรอบตัวคุณอย่างไร ความหวังของเราคือหน้าส่วนตัวเหล่านี้สามารถช่วยคุณได้ในอนาคตโดยแสดงให้เห็นว่าคุณช่วยเราในภารกิจของเรามากแค่ไหน

รายชื่อโครงการ - ตัวอย่าง

หนึ่งในสิ่งที่ยอดเยี่ยมเกี่ยวกับ FPA คือจำนวนโครงการที่เราดำเนินการ ตั้งแต่ภาษาการเขียนโปรแกรมไปจนถึงการเป็นหุ้นส่วนที่จดทะเบียนใน NASDAQ ไปจนถึงการเรียนรู้ด้วยตนเองที่โรงเรียนที่ด้อยโอกาส FPA ทำทุกอย่าง แต่เราต้องการวิธีที่จะแสดงให้โลกเห็นทุกสิ่งที่เจ๋งและเรียบร้อยที่เรากำลังทำอยู่ ดังนั้นเราจึงเพิ่มรายชื่อโครงการที่ช่วยให้เราสามารถปรับแต่งข้อมูลที่ถูกต้องทั้งหมดสำหรับแต่ละหน้าโครงการในขณะที่ยังคงการออกแบบและหลักการที่สอดคล้องกัน

การตั้งค่า

1. ดาวน์โหลดโครงการจาก GitHub

2. ติดตั้งโหนด, NPM และ Gatsby

3. เรียกใช้คำสั่งด้านล่างเพื่อติดตั้งแพ็คเกจ

npm install

4. เรียกใช้คำสั่งด้านล่างเพื่อเริ่มเว็บไซต์

gatsby 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
          } ,
      ]
    }
  ] ;
}