新しいフェアフィールドプログラミング協会のウェブサイトは、ギャツビーに組み込まれており、スタイリングにTailwind CSSを使用しています。これにより、優れたユーザーと開発者のエクスペリエンスを提供しながら、サーバーコストを抑えることができます。私たちのページはすべてDSG(静的生成の延期)です。つまり、データフォルダー内の情報を変更することで、Webサイト上の情報のほとんどを変更できます。
FPAチームのすべてのボランティアには、独自のページがあります。これは、ボランティアをしたい場合、FPAのために何をしたか、そしてそれがあなたの周りの他の人にどのような影響を与えたかを説明するMinuture履歴書を取得することを意味します。私たちの希望は、これらの個人的なページが、あなたが私たちの使命でどれだけ役立ったかを示すことで、将来あなたを助けることができることです。
FPAの素晴らしい点の1つは、私たちが実行するプロジェクトの数です。プログラミング言語からNASDAQに登録されたパートナーシップ、サービスの行き届いていない学校での対面学習まで、FPAはそれをすべて行います。しかし、私たちは、私たちが取り組んでいたすべてのクールできちんとしたものを世界に示す方法が必要でした。そこで、一貫した設計と校長を維持しながら、各プロジェクトページのすべての適切な情報をカスタマイズできるプロジェクトリストを追加しました。
Githubからプロジェクトをダウンロードしてください。
ノード、NPM、およびギャツビーをインストールしてください。
以下のコマンドを実行して、パッケージをインストールします。
npm installgatsby develop注: Webサイトを開始するのに数秒から数分までのどこかにかかることがありますが、Webサイトが公開されると、ホットなリロードが行われます。
このプロジェクトに貢献するには、[問題]タブをご覧ください。これには、現在取り組んでいるすべてのものが含まれます。
チームメンバーの追加は非常にシンプルです。データフォルダーの内部には、すべてのチームメンバー情報が含まれる名前のファイル、 data/team.jsonがあります。チームメンバーを追加するには、ファイルから別のチームメンバーデータを複製し、その内部のデータを変更するだけです。インデックス作成などの問題が必要ないため、新しいチームメンバーをファイルの下部に追加してください。この新しいチームメンバーに追加したら、変更をプルリクエストとして送信すると、完了です!
チームメンバーのオブジェクトについて混乱することの1つは、 emailとworksパラメーターかもしれません。電子メールは常にフォーマットされています[last name][first initial]@fairfieldprogramming.org 。作品は数字の配列です。各番号はプロジェクトのインデックスです( data/programs.jsonファイル)。
プロジェクトはすべて、 data/programs.jsonの内部に保存されます。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
} ,
]
}
] ;
}