fairfield programming.github.io

Fairfield Association Association Frontend

Новый веб -сайт Fairfield программирования построен в Gatsby и использует Taillid CSS для стиля. Это позволяет нам снижать затраты на сервер, а также предоставлять отличный опыт пользователей и разработчиков. Все наши страницы - DSG (отложенная статическая генерация), что означает, что большая часть информации на веб -сайте может быть изменена путем изменения информации внутри папки данных.

Функции

Система членов команды - пример

У каждого волонтера в команде FPA есть свои отдельные страницы. Это означает, что если вы хотите стать добровольным, вы получаете резюме Miniture, объясняющее, что вы сделали для FPA, и как оно повлияло на других вокруг вас. Мы надеемся, что эти личные страницы могут помочь вам в будущем, показав, сколько вы помогли нам в нашей миссии.

Списки проектов - пример

Одна из замечательных особенностей FPA - сколько проектов мы запускаем. От языков программирования до партнерских отношений, зарегистрированных в списке NASDAQ, до личного обучения в недостаточно обслуживаемых школах, FPA делает все это. Но нам нужен был способ показать миру все крутые и аккуратные вещи, над которыми мы работали. Итак, мы добавили списки проектов, которые позволяют нам настраивать всю нужную информацию для каждой страницы проекта, сохраняя при этом постоянный дизайн и принципы.

Настраивать

1. Загрузите проект с GitHub.

2. Установите узел, NPM и Gatsby.

3. Запустите ниже команду, чтобы установить пакеты.

npm install

4. Запустите ниже команду, чтобы запустить сайт.

gatsby develop

Примечание: для запуска веб -сайта может потребоваться от нескольких секунд до нескольких минут, но как только веб -сайт станет в прямом эфире, он делает горячую перезагрузку.

Способствовать

Чтобы внести свой вклад в этот проект, см. Вкладку «Проблемы». Это будет содержать все вещи, над которыми нам нужна помощь, работая.

Как добавить членов команды

Добавление членов команды довольно просто - внутри папки данных у нас есть файл с именем, data/team.json , который содержит всю информацию о членах команды. Чтобы добавить члена команды, просто дублируйте данные других членов команды из файла и измените данные внутри него. Пожалуйста, добавьте нового члена команды в нижнюю часть файла, потому что мы не хотим проблем с индексацией и еще много чего . После того, как вы добавили в этот новый член команды, отправьте свои изменения в качестве запроса на привлечение, и вы закончите!

Одной из запутанных объектов команды может быть параметры email и works . Электронная почта всегда отформатирована [last name][first initial]@fairfieldprogramming.org . Работы представляют собой массив чисел - каждое число является индексом проекта (в файле data/programs.json ).

Как добавить проект

Все проекты хранятся в файле data/programs.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
          } ,
      ]
    }
  ] ;
}