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