AstroPaper 5.0

마침내 오랫동안 기다려온 AstroPaper v5가 출시되었습니다. AstroPaper v5는 동일한 미니멀하고 깔끔한 외관을 유지하면서도 내부적으로 상당한 업데이트가 이루어졌습니다.

AstroPaper v5

주요 변경 사항

Astro v5로 업그레이드 #455

AstroPaper는 이제 Astro v5와 함께 제공되어 Astro v5의 모든 새로운 기능과 개선 사항을 활용할 수 있습니다.

Tailwind v4

AstroPaper가 Tailwind v4로 업그레이드되었으며, 내부적으로 많은 스타일 변경이 포함되어 있습니다. tailwind.config.js 파일이 제거되었고, 이제 모든 설정이 src/styles/global.css 파일에 위치합니다. 타이포그래피 관련 스타일은 별도로 분리되어 src/styles/typography.css로 이동되었습니다.

TailwindCSS v4의 새로운 동작 방식으로 인해 컴포넌트 내 <style> 블록의 스타일이 제거되고 인라인 Tailwind 클래스로 대체되었습니다.

또한 UI 전반의 색상 팔레트가 업데이트되었습니다. 새 팔레트는 다섯 가지 색상만으로 구성됩니다:

:root,
html[data-theme="light"] {
  --background: #fdfdfd;
  --foreground: #282728;
  --accent: #006cac;
  --muted: #e6e6e6;
  --border: #ece9e9;
}

html[data-theme="dark"] {
  --background: #212737;
  --foreground: #eaedf3;
  --accent: #ff6b01;
  --muted: #343f60bf;
  --border: #ab4b08;
}

React + Fuse.js를 제거하고 Pagefind 검색으로 대체

이전 버전에서는 검색 기능과 OG 이미지 생성을 위해 React.js와 Fuse.js를 사용했습니다. AstroPaper v5에서는 React.js가 제거되고 정적 사이트 검색 도구인 Pagefind로 대체되었습니다.

검색 경험은 이전 버전과 거의 동일하지만, Pagefind 덕분에 이제 제목과 설명뿐만 아니라 모든 콘텐츠가 인덱싱되어 검색 가능합니다.

개발 모드에서 Pagefind를 사용하는 아이디어는 이 블로그 글에서 영감을 받았습니다.

import alias 업데이트

import alias가 @directory에서 @/directory로 변경되었습니다. 이제 다음과 같이 import해야 합니다:

---
import { slugifyStr } from "@/utils/slugify";
import IconHash from "@/assets/icons/IconHash.svg";
---

`pnpm`으로 전환

AstroPaper가 npm에서 pnpm으로 전환되었으며, 더 빠르고 효율적인 패키지 관리를 제공합니다.

아이콘/SVG를 Astro의 Svg 컴포넌트로 대체

AstroPaper v5는 인라인 SVG를 Astro의 실험적 SVG 컴포넌트로 대체합니다. 이 업데이트로 socialIcons 객체에 사전 정의된 SVG 코드의 필요성이 줄어들어 코드베이스가 더 깔끔하고 유지보수하기 쉬워졌습니다.

상수와 설정 분리

프로젝트 구조가 재구성되었습니다. src/config.ts 파일은 이제 프로젝트의 주요 설정을 담는 SITE 객체만 포함합니다. LOCALE, SOCIALS, SHARE_LINKS 등의 모든 상수는 src/constants.ts 파일로 이동되었습니다.

기타 주요 변경 사항

블로그 글 디렉터리가 src/content/blog/에서 src/data/blog/로 변경되었습니다.
컬렉션 정의 파일(src/content/config.ts)이 src/content.config.ts로 대체되었습니다.
성능과 보안 향상을 위해 다양한 의존성이 업그레이드되었습니다.
IBM Plex Mono 폰트가 제거되고 기본 시스템 모노 폰트로 전환되었습니다.
뒤로 가기 버튼 로직이 업데이트되었습니다. 이제 브라우저의 history API를 실행하는 대신 AstroPaper v5는 브라우저 세션을 사용하여 뒤로 가기 URL을 임시로 저장합니다. 세션에 뒤로 가기 URL이 없으면 홈페이지로 리다이렉트됩니다.
약간의 스타일 및 레이아웃 변경도 있습니다.

마무리

AstroPaper v5는 많은 변경 사항을 가져오지만 핵심 경험은 동일합니다. AstroPaper가 알려진 깔끔하고 미니멀한 디자인을 유지하면서 더 매끄럽고 효율적인 블로깅 플랫폼을 즐겨보세요!

변경 사항을 자유롭게 살펴보시고 의견을 공유해 주세요. 항상 여러분의 성원에 감사드립니다!

이 테마가 마음에 드신다면 리포지토리에 별을 남겨 주시기 바랍니다. GitHub Sponsors를 통해 후원하시거나 커피를 사주실 수도 있습니다. 물론 이러한 행동은 전적으로 선택 사항이며 필수가 아닙니다.

즐기세요!

Sat Naing

목차