fairfield programming.github.io

Frontend der Fairfield Programming Association

Die New Fairfield Programing Association -Website ist in Gatsby integriert und verwendet Tailwind CSS für das Styling. Auf diese Weise können wir die Serverkosten senken und gleichzeitig ein hervorragendes Benutzer- und Entwicklererlebnis bieten. Alle unsere Seiten sind DSG (aufgeschobene statische Erzeugung), was bedeutet, dass die meisten Informationen auf der Website geändert werden können, indem die Informationen innerhalb des Datenordners geändert werden.

Merkmale

Teammitgliedssystem - Beispiel

Jeder Freiwillige im FPA -Team hat seine eigenen Seiten. Dies bedeutet, dass Sie, wenn Sie sich freiwillig melden möchten, einen Minitor -Lebenslauf erhalten, der erklärt, was Sie für die FPA getan haben und wie er andere um Sie herum beeinflusst hat. Wir hoffen, dass diese persönlichen Seiten Ihnen in Zukunft helfen können, indem Sie zeigen, wie viel Sie uns bei unserer Mission geholfen haben.

Projektlisten - Beispiel

Eines der großartigen Dinge am FPA ist, wie viele Projekte wir durchführen. Von den Programmiersprachen bis hin zu NASDAQ-List-Partnerschaften bis hin zu persönlichem Lernen an unterversorgten Schulen macht die FPA alles. Aber wir brauchten eine Möglichkeit, der Welt all die coolen und ordentlichen Dinge zu zeigen, an denen wir gearbeitet haben. Wir haben also Projektlisten hinzugefügt, mit denen wir die richtigen Informationen für jede Projektseite anpassen und gleichzeitig konsequentes Design und Schulleiter aufbewahren können.

Aufstellen

1. Laden Sie das Projekt von GitHub herunter.

2. Lassen Sie Knoten, NPM und Gatsby installiert.

3. Führen Sie den folgenden Befehl aus, um die Pakete zu installieren.

npm install

4. Führen Sie den folgenden Befehl aus, um die Website zu starten.

gatsby develop

Hinweis: Es kann zwischen wenigen Sekunden bis zu wenigen Minuten dauern, um die Website zu starten. Sobald die Website live ist, wird das heiße Nachladen ausgeführt.

Beitragen

Um zu diesem Projekt beizutragen, finden Sie auf der Registerkarte "Ausgaben". Dies enthält alle Dinge, an denen wir derzeit Hilfe benötigen.

So fügen Sie Teammitglieder hinzu

Das Hinzufügen von Teammitgliedern ist recht einfach - innerhalb des Datenordners haben wir eine Datei namens data/team.json , die alle Teammitgliedsinformationen enthält. Um ein Teammitglied hinzuzufügen, duplizieren Sie einfach andere Teammitgliederdaten aus der Datei und ändern Sie die Daten darin. Bitte fügen Sie das neue Teammitglied am Ende der Datei hinzu, da wir keine Probleme mit der Indexierung und so weiter haben . Sobald Sie dieses neue Teammitglied hinzugefügt haben, senden Sie Ihre Änderungen als Pull -Anfrage und sind fertig!

Eine verwirrende Sache über Teammitgliedsobjekte kann die email und works sein. Die E -Mail ist immer formatiert [last name][first initial]@fairfieldprogramming.org . Die Arbeiten sind eine Reihe von Zahlen - jede Nummer ist der Index eines Projekts (in der data/programs.json ).

So fügen Sie ein Projekt hinzu

Projekte werden alle in der data/programs.json gespeichert. Um ein neues Projekt hinzuzufügen, fügen Sie einfach ein neues Element am Ende des Arrays hinzu , das Slug, Titel, Beschreibung und seit den Parametern enthält.

Wenn Sie dem Projekt komplexere Informationen hinzufügen möchten, schauen Sie sich nur Beispiele aus anderen Projekten im Array oder unten an der Definition eines Programmobjekts an.

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