출처 상자

Trust box

방패 아이콘 머리 줄 아래에 출처가 번호 줄로 이어지는, 저장소 파일 목록 같은 상자예요.

쓰는 규칙목록 표시는 출처에만 쓴다 — 검사가 목록 줄 수로 출처를 센다.

다른 이름: TrustBox

···

usage (Astro)

---
// src/pages/[post].astro
import { TrustBox } from '../components/registry';
---
<TrustBox sources={post.data.sources} checked={checked} aboutHref="/about/" disclaimerHref="/disclaimer/" medical={MEDICAL_NOTE} />

site.json

// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "TrustBox": "panel" }
}

props (TypeScript)

export interface TrustBoxProps {
  sources: Source[];
  checked: Date;
  aboutHref: string;
  disclaimerHref: string;
  medical: string;
  variant?: VariantOf<'TrustBox'>;
}

panel은 회색 머리 줄(「참고한 자료와 확인」), 「기관 자료 6곳과 대조했어요」 요약, 번호 붙은 출처 줄, 맨 아래 「편집 원칙」·「의학 정보 면책 안내」 링크와 면책 문장으로 이어져요. 출처마다 기관·확인일이 작은 글자로 따라요. ledger는 줄마다 기관 | 자료 | 확인일 세 칸이고 날짜가 오른쪽 끝에 붙어요. notes는 상자 없이 위 선 아래 작은 번호 목록으로 각주처럼 써요.

출처가 많은 글은 ledger가 정리돼 보이고, 글 끝을 가볍게 두려면 notes가 맞아요. panel은 상자 크기가 커서 존재감이 있어요. 외국 기관 자료 제목이 영어 그대로 보여요.

이럴 때 — 변형 3

panel상자 하나 출처가 두세 곳으로 적을 때 — 한 상자에 전부.쓰는 사이트 3곳: babyfood, babyplay, vaccination
ledger장부 출처가 많고 기관마다 확인일을 보여 주는 게 중요할 때 — 기관 | 자료 | 확인일.쓰는 사이트 3곳: babysleep, birthprep, toddlerfood
notes각주 글 끝을 가볍게 두고 싶을 때 — 각주처럼 작게.쓰는 사이트 5곳: babysick, feeding, milestone, newborn, 허브