fairfield programming.github.io

Frontend Asosiasi Pemrograman Fairfield

Situs web Asosiasi Pemrograman Fairfield baru dibangun di Gatsby dan menggunakan CSS Tailwind untuk gaya. Ini memungkinkan kami untuk menjaga biaya server sementara juga memberikan pengalaman pengguna dan pengembang yang sangat baik. Semua halaman kami adalah DSG (generasi statis yang ditangguhkan), yang berarti bahwa sebagian besar informasi di situs web dapat diubah dengan memodifikasi informasi di dalam folder data.

Fitur

Sistem Anggota Tim - Contoh

Setiap sukarelawan di tim FPA memiliki halaman masing -masing. Ini berarti bahwa jika Anda ingin menjadi sukarelawan, Anda mendapatkan resume miniture menjelaskan apa yang telah Anda lakukan untuk FPA, dan bagaimana hal itu berdampak pada orang lain di sekitar Anda. Harapan kami adalah bahwa halaman -halaman pribadi ini dapat membantu Anda di masa depan dengan menunjukkan betapa Anda telah membantu kami dalam misi kami.

Daftar Proyek - Contoh

Salah satu hal hebat tentang FPA adalah berapa banyak proyek yang kami jalankan. Dari bahasa pemrograman hingga kemitraan yang terdaftar di Nasdaq hingga pembelajaran langsung di sekolah-sekolah yang kurang terlayani, FPA melakukan semuanya. Tapi, kami membutuhkan cara untuk menunjukkan kepada dunia semua hal keren dan rapi yang sedang kami kerjakan. Jadi, kami menambahkan daftar proyek yang memungkinkan kami untuk menyesuaikan semua informasi yang tepat untuk setiap halaman proyek sambil tetap menjaga desain dan prinsipal yang konsisten.

Pengaturan

1. Unduh proyek dari GitHub.

2. Miliki Node, NPM, dan Gatsby diinstal.

3. Jalankan perintah di bawah ini untuk menginstal paket.

npm install

4. Jalankan perintah di bawah ini untuk memulai situs web.

gatsby develop

Catatan: Ini dapat memakan waktu di mana saja dari beberapa detik hingga beberapa menit untuk memulai situs web, tetapi begitu situs webnya langsung, ia memuat ulang panas.

Menyumbang

Untuk berkontribusi pada proyek ini, silakan lihat tab Masalah. Ini akan berisi semua hal yang saat ini perlu kami kerjakan.

Cara Menambahkan Anggota Tim

Menambahkan anggota tim cukup sederhana - di dalam folder data kami memiliki file bernama, data/team.json , yang berisi semua informasi anggota tim. Untuk menambahkan anggota tim, cukup duplikat data anggota tim lain dari file dan ubah data di dalamnya. Harap tambahkan anggota tim baru ke bagian bawah file karena kami tidak ingin masalah dengan pengindeksan dan yang lainnya . Setelah Anda menambahkan di anggota tim baru ini, kirimkan perubahan Anda sebagai permintaan tarik dan Anda selesai!

Satu hal yang membingungkan tentang objek anggota tim mungkin adalah parameter email dan works . Email selalu diformat [last name][first initial]@fairfieldprogramming.org . Pekerjaan adalah array angka - setiap angka adalah indeks proyek (dalam file data/programs.json ).

Cara Menambahkan Proyek

Proyek semua disimpan di dalam file data/programs.json . Untuk menambahkan proyek baru, cukup tambahkan item baru di bagian bawah array yang memiliki siput, judul, deskripsi, dan karena parameter.

Jika Anda ingin menambahkan informasi yang lebih kompleks ke proyek, lihat saja contoh -contoh dari proyek lain di array atau di bawah pada definisi objek program.

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