fairfield programming.github.io

Frontend da Associação de Programação de Fairfield

O novo site da Fairfield Programming Association é construído em Gatsby e usa o CSS do Tailwind CSS para o estilo. Isso nos permite manter os custos do servidor, além de fornecer uma excelente experiência de usuário e desenvolvedor. Todas as nossas páginas são DSG (geração estática diferida), o que significa que a maioria das informações no site pode ser alterada modificando as informações dentro da pasta de dados.

Características

Sistema de membros da equipe - Exemplo

Todo voluntário da equipe da FPA tem suas próprias páginas individuais. Isso significa que, se você deseja se voluntariar, você recebe um currículo para minas explicando o que fez para o FPA e como isso impactou outras pessoas ao seu redor. Nossa esperança é que essas páginas pessoais possam ajudá -lo no futuro, mostrando o quanto você nos ajudou em nossa missão.

Listagens de projetos - Exemplo

Uma das grandes coisas do FPA é quantos projetos executamos. De linguagens de programação a parcerias listadas na NASDAQ e aprendizado pessoal em escolas carentes, o FPA faz tudo isso. Mas precisávamos de uma maneira de mostrar ao mundo todas as coisas legais e legais em que estávamos trabalhando. Portanto, adicionamos listagens de projetos que nos permitem personalizar todas as informações corretas para cada página do projeto, mantendo o design e os diretores consistentes.

Configurar

1. Faça o download do projeto do Github.

2. Tenha o nó, NPM e Gatsby instalados.

3. Execute o comando abaixo para instalar os pacotes.

npm install

4. Execute o comando abaixo para iniciar o site.

gatsby develop

NOTA: Pode levar de alguns segundos a alguns minutos para iniciar o site, mas uma vez que o site esteja ao vivo, ele recarrega a quente.

Contribuir

Para contribuir com este projeto, consulte a guia Problemas. Isso conterá todas as coisas em que atualmente precisamos de ajuda para trabalhar.

Como adicionar membros da equipe

A adição de membros da equipe é bastante simples - dentro da pasta de dados, temos um arquivo chamado data/team.json , que contém todas as informações do membro da equipe. Para adicionar um membro da equipe, basta duplicar os dados de outros membros da equipe do arquivo e alterar os dados dentro dele. Adicione o novo membro da equipe à parte inferior do arquivo, porque não queremos problemas com indexação e outros enfeites . Depois de adicionar este novo membro da equipe, envie suas alterações como uma solicitação de tração e você terminou!

Uma coisa confusa sobre os objetos membros da equipe pode ser o email e os parâmetros works . O email é sempre formatado [last name][first initial]@fairfieldprogramming.org . O Works é uma matriz de números - cada número é o índice de um projeto (no arquivo de data/programs.json ).

Como adicionar um projeto

Os projetos são todos armazenados dentro do arquivo data/programs.json . Para adicionar um novo projeto, basta adicionar um novo item na parte inferior da matriz que possui lesma, título, descrição e, desde os parâmetros.

Se você deseja adicionar informações mais complexas ao projeto, basta olhar para os exemplos de outros projetos na matriz ou abaixo na definição de um 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
          } ,
      ]
    }
  ] ;
}