fairfield programming.github.io

페어 필드 프로그래밍 협회 프론트 엔드

New Fairfield Programming Association 웹 사이트는 Gatsby에 내장되어 있으며 스타일링에 Tailwind CSS를 사용합니다. 이를 통해 서버 비용을 낮추면서 우수한 사용자 및 개발자 경험을 제공 할 수 있습니다. 모든 페이지는 DSG (지연된 정적 생성)입니다. 즉, 데이터 폴더 내부의 정보를 수정하여 웹 사이트의 대부분의 정보를 변경할 수 있습니다.

특징

팀원 시스템 - 예

FPA 팀의 모든 자원 봉사자는 자체 개별 페이지가 있습니다. 이것은 자원 봉사를 원한다면 FPA를 위해 한 일과 주변의 다른 사람들에게 어떤 영향을 미쳤는지 설명하는 미성년 이력서를 얻는다는 것을 의미합니다. 우리의 희망은이 개인 페이지가 미래에 우리의 사명에 얼마나 도움이되었는지 보여줌으로써 미래에 당신을 도울 수 있기를 희망합니다.

프로젝트 목록 - 예

FPA의 가장 큰 장점 중 하나는 우리가 얼마나 많은 프로젝트를 운영하는지입니다. 언어 프로그래밍에서 나스닥에 등재 된 파트너십, 소외된 학교의 직접 학습에 이르기까지 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
          } ,
      ]
    }
  ] ;
}