메타 정보에 Created/Updated 동시 노출

변경 요약

• 콘텐츠 메타 영역에서 Created와 Updated 두 날짜를 명시적으로 함께 노출할 수 있도록 컴포넌트 확장.
• 기본 동작은 Quartz의 단일 날짜 표시를 유지하되, 레이아웃에서 옵션을 주입하면 다중 날짜 렌더링.

변경된 파일

• quartz/components/ContentMeta.tsx
• quartz/components/styles/contentMeta.scss
• quartz.layout.ts

주요 구현 포인트

• ContentMeta.tsx
  • 사용자 옵션 dateTypes?: ('created' | 'modified')[], dateLabels?: Partial<Record<'created' | 'modified', string>> 추가.
  • 옵션이 주어지면 중복 타임스탬프를 제거하여 Created, Updated를 순서대로 렌더.
  • 읽기 시간 표시는 기존 옵션(showReadingTime) 유지.
• 스타일(contentMeta.scss)
  • .content-meta__date, .content-meta__label 스타일로 레이블과 타임스탬프 구분.
• 레이아웃(quartz.layout.ts)

  • 단일/목록 페이지 beforeBody에서

    Component.ContentMeta({
      dateTypes: ["modified", "created"],
      dateLabels: { created: "Created", modified: "Updated" },
    })

    형태로 옵션을 주입하여 두 날짜를 함께 노출.

변경 코드 (실제)

아래는 본 저장소에서 적용된 실제 변경 코드의 발췌본입니다. 로컬과 배포 환경 간 차이를 줄이기 위해 그대로 복사·검토 가능합니다.

1) quartz/components/ContentMeta.tsx

옵션 정의와 기본값, 그리고 다중 날짜 렌더링 로직입니다.

// quartz/components/ContentMeta.tsx
interface ContentMetaOptions {
  /** Whether to display reading time */
  showReadingTime: boolean
  showComma: boolean
  /** Custom (user): List of date fields to render. */
  dateTypes?: ValidDateType[]
  /** Custom (user): Optional labels per date type. */
  dateLabels?: Partial<Record<ValidDateType, string>>
}
 
const defaultOptions: ContentMetaOptions = {
  showReadingTime: true,
  showComma: true,
  dateTypes: undefined,
  dateLabels: undefined,
}
 
// ...
 
if (fileData.dates) {
  const hasCustomDateTypes = Array.isArray(options.dateTypes) && options.dateTypes.length > 0
 
  if (!hasCustomDateTypes) {
    // Quartz 기본 단일 날짜 렌더링으로 폴백
    const fallbackDate = getDate(cfg, fileData)
    if (fallbackDate) {
      segments.push(<Date date={fallbackDate} locale={cfg.locale} />)
    }
  } else {
    // 생성/수정 등 여러 날짜 타입을 순서대로 렌더 (중복 타임스탬프 제거)
    const seenTimestamps = new Set<number>()
 
    for (const dateType of options.dateTypes!) {
      const dateValue = fileData.dates?.[dateType]
      if (!dateValue) continue
 
      const timestamp = dateValue.getTime()
      if (seenTimestamps.has(timestamp)) continue
      seenTimestamps.add(timestamp)
 
      const label = options.dateLabels?.[dateType]
      segments.push(
        <span class={`content-meta__date content-meta__date--${dateType}`}>
          {label ? <span class="content-meta__label">{label}: </span> : null}
          <Date date={dateValue} locale={cfg.locale} />
        </span>,
      )
    }
  }
}

2) quartz/components/styles/contentMeta.scss

레이블과 날짜를 나눠 보이도록 하는 경량 스타일입니다.

// quartz/components/styles/contentMeta.scss
.content-meta {
  margin-top: 0;
  color: var(--darkgray);
 
  &[show-comma="true"] {
    > *:not(:last-child) {
      margin-right: 8px;
      &::after { content: ","; }
    }
  }
}
 
// Custom (user): Styling for explicit created/updated date blocks.
.content-meta__date {
  display: inline-flex;
  align-items: center;
}
 
// Custom (user): Label styling to separate text from timestamp.
.content-meta__label {
  font-weight: 500;
  margin-right: 4px;
}

3) quartz.layout.ts

단일 페이지와 목록 페이지 레이아웃 모두에서 두 날짜를 노출하도록 옵션을 주입합니다.

// quartz.layout.ts (단일 페이지)
export const defaultContentPageLayout: PageLayout = {
  beforeBody: [
    Component.Breadcrumbs(),
    Component.ContentMeta({
      dateTypes: ["modified", "created"],
      dateLabels: { created: "Created", modified: "Updated" },
    }),
    Component.TagList(),
  ],
  // ...
}
 
// quartz.layout.ts (목록 페이지)
export const defaultListPageLayout: PageLayout = {
  beforeBody: [
    Component.Breadcrumbs(),
    Component.ContentMeta({
      dateTypes: ["modified", "created"],
      dateLabels: { created: "Created", modified: "Updated" },
    }),
    Component.TagList(),
  ],
  // ...
}

옵션 요약 및 동작

• dateTypes: 렌더링할 날짜 타입의 순서를 명시합니다. 예: ["modified", "created"].
• dateLabels: 각 타입의 레이블 텍스트를 지정합니다. 예: { created: "Created", modified: "Updated" }.
• 중복 억제: created와 modified 타임스탬프가 동일하면 한 번만 표시합니다.
• 폴백: dateTypes가 없으면 Quartz 기본(단일 날짜) 렌더링을 사용합니다.
• showReadingTime, showComma는 기존 옵션과 동일하게 동작합니다.

왜 변경했는가

• 문서 신뢰성 향상을 위해 최초 작성일과 최신 수정일을 동시에 제공하여 업데이트 맥락을 명확히 함.
• Quartz 기본 동작과 호환성을 유지하면서, 사이트 정책에 맞춘 확장성 확보.

운영 체크리스트

• plugins.transformers에 CreatedModifiedDate가 활성화되어 있어야 함(이미 설정됨).
• 프리뷰: 대표 페이지에서 레이블/날짜 포맷, 중복 억제 동작 확인.