fairfield programming.github.io

Fontend Association de programmation de Fairfield

Le nouveau site Web de l'association de programmation de Fairfield est construit à Gatsby et utilise CSS Tailwind pour le style. Cela nous permet de réduire les coûts du serveur tout en offrant une excellente expérience d'utilisateur et de développeur. Toutes nos pages sont DSG (génération statique différée), ce qui signifie que la plupart des informations sur le site Web peuvent être modifiées en modifiant les informations à l'intérieur du dossier de données.

Caractéristiques

Système membre de l'équipe - Exemple

Chaque bénévole de l'équipe FPA a ses propres pages individuelles. Cela signifie que si vous voulez faire du bénévolat, vous obtenez un CV mineure expliquant ce que vous avez fait pour le FPA et comment il a eu un impact sur les autres autour de vous. Nous espérons que ces pages personnelles peuvent vous aider à l'avenir en montrant combien vous nous avez aidés dans notre mission.

Listes de projets - Exemple

L'une des grandes choses de la FPA est le nombre de projets que nous mettons en place. Des langages de programmation aux partenariats cotés au NASDAQ en passant par l'apprentissage en personne dans les écoles mal desservies, le FPA fait tout. Mais, nous avions besoin d'un moyen de montrer au monde toutes les choses cool et soignées sur lesquelles nous travaillions. Nous avons donc ajouté des listes de projets qui nous permettent de personnaliser toutes les bonnes informations pour chaque page de projet tout en conservant une conception et des directeurs cohérents.

Installation

1. Téléchargez le projet depuis GitHub.

2. Faire installer le nœud, le npm et le gatsby.

3. Exécutez la commande ci-dessous pour installer les packages.

npm install

4. Exécutez la commande ci-dessous pour démarrer le site Web.

gatsby develop

Remarque: il peut prendre de quelques secondes à quelques minutes pour démarrer le site Web, mais une fois le site Web en direct, il recharge à chaud.

Contribuer

Pour contribuer à ce projet, veuillez consulter l'onglet Problèmes. Cela contiendra toutes les choses sur lesquelles nous avons actuellement besoin d'aide.

Comment ajouter des membres de l'équipe

L'ajout de membres de l'équipe est assez simple - à l'intérieur du dossier de données, nous avons un fichier nommé, data/team.json , qui contient toutes les informations des membres de l'équipe. Pour ajouter un membre de l'équipe, dupliquez simplement les données des membres d'une autre équipe du fichier et modifiez les données à l'intérieur. Veuillez ajouter le nouveau membre de l'équipe en bas du fichier car nous ne voulons pas de problèmes avec l'indexation et ainsi de suite . Une fois que vous avez ajouté ce nouveau membre de l'équipe, soumettez vos modifications en tant que demande de traction et vous avez terminé!

Une chose déroutante à propos des objets des membres de l'équipe pourrait être l' email et works des paramètres. L'e-mail est toujours formaté [last name][first initial]@fairfieldprogramming.org . Les travaux sont un tableau de nombres - chaque numéro est l'index d'un projet (dans le fichier data/programs.json ).

Comment ajouter un projet

Les projets sont tous stockés à l'intérieur du fichier data/programs.json . Pour ajouter un nouveau projet, ajoutez simplement un nouvel élément au bas du tableau qui a des limaces, un titre, une description et depuis les paramètres.

Si vous cherchez à ajouter des informations plus complexes au projet, regardez simplement les exemples d'autres projets dans le tableau ou en bas ci-dessous lors de la définition d'un objet de programme.

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