fairfield programming.github.io

Fairfield編程協會前端

新的Fairfield編程協會網站是在Gatsby構建的，並使用Tailwind CSS進行樣式。這使我們能夠降低服務器成本，同時還提供出色的用戶和開發人員體驗。我們所有的頁面均為DSG（遞延靜態生成），這意味著可以通過修改數據文件夾中的信息來更改網站上的大多數信息。

特徵

團隊成員系統 - 示例

FPA團隊的每個志願者都有自己的單獨頁面。這意味著，如果您想志願服務，您將獲得一個小型簡歷，以解釋您為FPA所做的事情，以及它如何影響您周圍的其他人。我們的希望是，這些個人頁面可以通過展示您對我們的使命有多幫助，可以在將來為您提供幫助。

項目清單 - 示例

FPA的偉大之處之一是我們運行了多少個項目。從編程語言到納斯達克上市的合作夥伴關係，再到服務不足的學校的面對面學習，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文件中。要添加一個新項目，只需在數組底部添加一個新項目，該項目具有sl，標題，描述和以後的參數。

如果您想向項目添加更多複雜的信息，只需在程序對象的定義下查看陣列中其他項目的示例或下面的示例。

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