ghost.sori.studio/docs/spec.md

기술 명세

현재 버전

• v0.1.40

테마 개요

• Ghost v5 대응 커스텀 테마
• 참고 사이트 https://thred.brightthemes.com/ 기반의 3열 에디토리얼 레이아웃
• 좌측 탐색, 중앙 콘텐츠, 우측 구독/추천/작성자 패널 구조

구현 범위

• default.hbs 기반 공통 셸
• home, index, tag, author, post, page 템플릿
• 검색 오버레이, 탭 전환, 다크모드 토글용 프런트 스크립트
• Ghost navigation, get, subscribe_form, comments, pagination 헬퍼 사용
• Tailwind CSS 빌드 결과물(assets/built/tailwind.css)을 기존 screen.css와 함께 로드
• Tailwind 기본 초기화(preflight)를 활성화해 브라우저 기본 마진과 폼 스타일을 리셋
• Alpine.js 로컬 자산(assets/built/alpine.js)을 전역 로드
• npm run dev:watch는 초기 dev:prepare 실행 후 Tailwind --watch와 파일 변경 감지 기반 dev:sync를 함께 실행함
• npm run zip:version은 현재 package.json 버전명을 기준으로 업로드용 zip을 생성함
• 좌측 카테고리 영역은 Alpine.js로 제어되며 1024px 이상에서 기본 열림, 미만에서 기본 닫힘
• 좌측 네비게이션 마커와 카테고리 마커는 동일한 세로 바 → 원형 hover 패턴 사용
• 전역 ol, ul, menu 기본 패딩과 리스트 스타일 리셋 적용
• author.hbs는 페이지 컨텍스트의 작성자 데이터를 직접 사용
• page-tags.hbs, page-authors.hbs는 각각 slug=tags, slug=authors 페이지에 연결 가능
• 태그/작성자 디렉터리 목록은 현재 limit="100" 기준
• tags-index.hbs, authors-index.hbs는 Ghost routes.yaml 커스텀 라우트로 /tags/, /authors/에 연결됨
• 로컬 개발 환경의 실제 라우트 설정은 .docker/ghost/content/settings/routes.yaml을 기준으로 사용함
• 홈 메인 피드는 히어로, 탭형 목록, 카테고리 개요를 원본 비주얼 밀도에 가깝게 재구성
• 리스트형 post-card는 Tailwind 유틸리티 중심 마크업으로 구성되며, 썸네일은 aspect-square sm:aspect-video 비율을 사용
• 각 카드 항목은 border-b border-brd 구분선을 유지하고, 콘텐츠 래퍼는 min-w-0 기준으로 줄바꿈 폭을 제어
• 포스트 상세 헤더는 제목, 메타, 공유 버튼, 대표 이미지를 Tailwind 유틸리티 중심 마크업으로 구성하고 상단 단일 태그 라벨은 표시하지 않음
• 포스트 본문은 prose prose-theme 클래스를 사용하며, Typography 플러그인 대신 Tailwind 입력 파일에서 원본 기준 타이포그래피 규칙을 직접 제공함
• 본문 ul, ol은 전역 리스트 리셋과 별개로 prose 범위 안에서 실제 마커와 들여쓰기를 다시 적용함
• 태그 배지는 --color-accent 기반 배경 혼합색(bg-accent/10, hover:bg-accent/5)을 사용함
• 홈 Latest, 기본 index, 태그 아카이브, 작성자 아카이브의 목록 영역은 Load More 버튼 기반 확장형 페이지네이션을 사용함

주요 스타일 방향

• 밝은 크림톤 배경 + 오렌지 포인트
• 테두리 중심의 미니멀 편집형 UI
• 데스크톱 3열, 태블릿 2열, 모바일 1열 반응형
• Tailwind는 점진적으로 도입하고, 기존 구조 클래스와 병행 사용