fairfield programming.github.io

Frontend de la Asociación de Programación Fairfield

El sitio web de New Fairfield Programming Association está integrado en Gatsby y utiliza CSS Tailwind para el estilo. Esto nos permite mantener bajos los costos del servidor y al mismo tiempo proporcionar una excelente experiencia de usuario y desarrollador. Todas nuestras páginas son DSG (generación estática diferida), lo que significa que la mayor parte de la información en el sitio web se puede cambiar modificando la información dentro de la carpeta de datos.

Características

Sistema de miembros del equipo - Ejemplo

Cada voluntario en el equipo de la FPA tiene sus propias páginas individuales. Esto significa que si desea ser voluntario, obtiene un currículum de ministerio que explica lo que ha hecho por el FPA y cómo ha impactado a otros a su alrededor. Nuestra esperanza es que estas páginas personales puedan ayudarlo en el futuro mostrando cuánto nos ha ayudado en nuestra misión.

Listados de proyectos - Ejemplo

Una de las mejores cosas del FPA es cuántos proyectos dirigimos. Desde lenguajes de programación hasta asociaciones que cotizan en NASDAQ hasta el aprendizaje en persona en escuelas desatendidas, el FPA lo hace todo. Pero, necesitábamos una forma de mostrar al mundo todas las cosas geniales y ordenadas en las que estábamos trabajando. Por lo tanto, agregamos listados de proyectos que nos permiten personalizar toda la información correcta para cada página del proyecto mientras mantienen un diseño y directores consistentes.

Configuración

1. Descargue el proyecto de GitHub.

2. Tener instalados Node, NPM y Gatsby.

3. Ejecute el siguiente comando a continuación para instalar los paquetes.

npm install

4. Ejecute el siguiente comando para iniciar el sitio web.

gatsby develop

Nota: puede tomar desde unos segundos hasta unos minutos para iniciar el sitio web, pero una vez que el sitio web está en vivo, hace una recarga en caliente.

Contribuir

Para contribuir a este proyecto, consulte la pestaña Problemas. Esto contendrá todas las cosas en las que actualmente necesitamos ayuda para trabajar.

Cómo agregar miembros del equipo

Agregar miembros del equipo es bastante simple: dentro de la carpeta de datos tenemos un archivo llamado, data/team.json , que contiene toda la información del miembro del equipo. Para agregar un miembro del equipo, simplemente duplique los datos de otros miembros del equipo del archivo y cambie los datos dentro de él. Agregue el nuevo miembro del equipo al final del archivo porque no queremos problemas con la indexación y otras cosas . Una vez que haya agregado a este nuevo miembro del equipo, envíe sus cambios como una solicitud de extracción y termine.

Una cosa confusa sobre los objetos de los miembros del equipo podría ser el email y los parámetros works . El correo electrónico siempre está formateado [last name][first initial]@fairfieldprogramming.org . Las obras son una matriz de números: cada número es el índice de un proyecto (en el archivo data/programs.json ).

Cómo agregar un proyecto

Los proyectos se almacenan dentro del archivo data/programs.json . Para agregar un nuevo proyecto, simplemente agregue un nuevo elemento en la parte inferior de la matriz que tenga Slug, Title, Descripción y desde los parámetros.

Si está buscando agregar información más compleja al proyecto, solo mire los ejemplos de otros proyectos en la matriz o más abajo en la definición de un objeto de programa.

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