프로젝트 소개

NK Omladinac Niza는 니자(Koška Municipality)에 있는 같은 이름의 축구 클럽 공식 웹사이트의 저장소다. 사이트는 Astro, Tailwind CSS v4, TypeScript로 구축되었으며 GitHub Pages에 호스팅된다. 스포츠 데이터의 최신 소스는 HNS Semafor다. 주요 기능은 자동 콘텐츠 갱신이다. 3개의 스크래퍼와 1개의 수동 소스가 데이터를 채운다: 1. HNS Semafor(스포츠 데이터) — scripts/scrape.mjs 스크립트는 Cheerio 파서를 사용해 클럽명, 경기장, 주소, 엠블럼, 현재 대회 및 시즌, 엠블럼과 폼을 포함한 전체 리그 순위표, 모든 대회(리그 및 컵)의 전 시즌 경기, 치러진 경기의 세부 정보(라인업, 골, 카드, 심판, 관중 수), 사진·등번호·포지션·출전 통계가 포함된 선수, 그리고 득점·카드·최다 출전 순위표를 추출한다. 클럽이 참가하는 모든 대회를 연령 그룹별(시니어 및 U-11 비기너)로 스크래핑하며, 대회 목록은 Semafor의 getCompetitions 핸들러를 통해 가져온다. 결과는 대회별 데이터와 통합된 시니어 뷰를 담은 src/data/hns.json으로 저장된다. 2. Facebook 뉴스 — scripts/scrape-facebook.mjs는 Graph API v21.0을 사용해 @omladinacniza 페이지의 최신 게시물을 가져온다. FB CDN URL은 1~2주 후 만료되므로 이미지는 로컬에 다운로드한다. GitHub Secrets FB_PAGE_ID와 FB_ACCESS_TOKEN이 필요하다. 3. Facebook 앨범(갤러리) — scripts/scrape-facebook-albums.mjs는 연도별 할당량(FB_PHOTOS_PER_YEAR, 기본값 200)을 적용해 모든 앨범과 사진 메타데이터를 가져온다. 각 사진에 대해 500px WebP 썸네일과 이미지 크기를 저장하며, 그리드에는 썸네일을 표시하고 라이트박스에는 원본을 표시한다. 프로필 및 커버 이미지는 건너뛴다. 4. 친선 경기 — 수동으로 편집할 수 있는 유일한 파일은 src/data/friendlies.json이며 friendlies.README.md에 안내가 있다. GitHub를 통해 휴대폰에서도 편집할 수 있다. 스크래퍼는 콘텐츠가 변경된 경우에만 파일을 기록하므로 불필요한 커밋과 배포를 만들지 않는다. GitHub Action 워크플로 scrape-and-deploy.yml은 30분마다 cron 일정으로, main에 푸시할 때마다, 그리고 수동으로 실행된다. 세 스크래퍼를 모두 실행하고 변경 사항을 커밋한 다음 다시 빌드하고 배포한다. 빌드 작업은 게시된 사이트와 저장소가 달라지지 않도록 의도적으로 다시 스크래핑하지 않는다. 프로젝트 구조에는 컴포넌트(Header, Footer, 카드, 테이블), SEO/OG/favicon/manifest/RSS/View Transitions 설정이 포함된 레이아웃, base path, 통합 경기, 크로아티아어 수사 어형 변화, Facebook 게시물 형식 지정을 위한 라이브러리, 그리고 정적 .astro 페이지, 선수 프로필, 경기 세부 정보, 경기별 동적 OG 이미지(satori 및 resvg), RSS 피드, 구독용 .ics 형식 일정, PWA manifest 등의 페이지가 포함된다. 스타일은 클럽 색상과 글꼴이 포함된 Tailwind v4 @theme을 사용한다. 로컬 개발에는 Node.js 22.12 이상이 필요하다. 스크립트에는 핫 리로드 지원 개발 서버, scrape:hns, scrape:facebook, scrape:fb-albums, scrape(세 가지 모두), WebP 썸네일용 thumbs, 자동으로 먼저 스크래핑을 수행하는 build, 스크래핑하지 않는 astro build, 타입 검사용 check, 프로덕션 빌드 미리보기 preview가 포함된다. 배포는 GitHub Actions를 통해 GitHub Pages로 이루어지며, 도메인 omladinacniza.hr은 public/CNAME(deSEC DNS)을 통해 설정된다. 한편 SITE와 BASE는 astro.config.mjs에 설정되어 있고 ASTRO_SITE 및 ASTRO_BASE 변수로 재정의할 수 있다. 모든 클럽 콘텐츠(로고, 사진, 역사)는 NK Omladinac Niza의 소유이며, 코드는 다른 클럽이 영감을 얻을 수 있도록 자유롭게 공개된다.