본문으로 건너뛰기
에이든의 블로그
뒤로가기

AstroPaper 2.0

Astro 2.0이 멋진 기능들, 호환성 변경 사항, 개발 경험 개선, 더 나은 에러 오버레이 등과 함께 출시되었습니다. AstroPaper는 이러한 멋진 기능들, 특히 Content Collections API를 활용합니다.

AstroPaper 2.0 소개

목차

기능 및 변경 사항

타입 안전한 Frontmatter와 재정의된 블로그 스키마

AstroPaper 2.0의 마크다운 콘텐츠 frontmatter는 Astro의 Content Collections 덕분에 이제 타입 안전합니다. 블로그 스키마는 src/content/_schemas.ts 파일 내에 정의되어 있습니다.

블로그 콘텐츠의 새로운 위치

모든 블로그 글이 src/contents 디렉터리에서 src/content/blog 디렉터리로 이동되었습니다.

새로운 Fetch API

이제 콘텐츠는 getCollection 함수로 가져옵니다. 더 이상 콘텐츠에 대한 상대 경로를 지정할 필요가 없습니다.

// 이전 콘텐츠 가져오기 방식
- const postImportResult = import.meta.glob<MarkdownInstance<Frontmatter>>(
  "../contents/**/**/*.md",);

// 새로운 콘텐츠 가져오기 방식
+ const postImportResult = await getCollection("blog");

더 나은 검색 결과를 위한 검색 로직 수정

이전 버전의 AstroPaper에서는 글을 검색할 때 title, description, headings(블로그 글의 모든 제목 h1 ~ h6)가 검색 기준 키로 사용되었습니다. AstroPaper v2에서는 사용자가 입력할 때 titledescription만 검색됩니다.

Frontmatter 속성 이름 변경

다음 frontmatter 속성들의 이름이 변경되었습니다.

이전 이름새 이름
datetimepubDatetime
slugpostSlug

블로그 글의 기본 태그

블로그 글에 태그가 없는 경우(즉, frontmatter 속성 tags가 지정되지 않은 경우), 해당 블로그 글에는 기본 태그 others가 사용됩니다. 기본 태그는 /src/content/_schemas.ts 파일에서 설정할 수 있습니다.

// src/contents/_schemas.ts
export const blogSchema = z.object({
  // ---
  // "others"를 원하는 값으로 변경하세요
  tags: z.array(z.string()).default(["others"]),
  ogImage: z.string().optional(),
  description: z.string(),
});

새로운 사전 정의 다크 색상 테마

AstroPaper v2에는 Astro의 다크 로고를 기반으로 한 새로운 다크 색상 테마(고대비 및 저대비)가 있습니다. 자세한 내용은 이 링크를 확인하세요.

새로운 사전 정의 다크 색상 테마

자동 클래스 정렬

AstroPaper 2.0은 TailwindCSS Prettier 플러그인을 사용한 자동 클래스 정렬을 포함합니다.

문서 및 README 업데이트

모든 #docs 블로그 글과 README가 AstroPaper v2에 맞게 업데이트되었습니다.

버그 수정

  • 블로그 글 페이지에서 깨진 태그 수정
  • 태그 페이지에서 breadcrumb의 마지막 부분이 일관성을 위해 소문자로 업데이트됨
  • 태그 페이지에서 초안 글 제외
  • 페이지 새로고침 후 ‘onChange 값이 업데이트되지 않는 문제’ 수정