feat: MDX 파이프라인 구성 (#1018)#5
Conversation
hyoseong1994
force-pushed
the
1018-mdx-pipeline
branch
from
f7aecc1 to
9443eb5
Compare
hyoseong1994
force-pushed
the
1018-mdx-pipeline
branch
3 times, most recently
from
384a475 to
b3101fd
Compare
hyoseong1994
force-pushed
the
1018-mdx-pipeline
branch
from
b3101fd to
29fe438
Compare
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
daleui | b195f5e | Commit Preview URL | May 15 2026, 05:42 AM |
RiaOh
left a comment
RiaOh
left a comment
There was a problem hiding this comment.
@hyoseong1994 님,
모르는 내용이 많이 이해하느라 조금 시간이 걸렸습니다. 늦어서 죄송합니다.
/blog/getting-started경로로 임시 블로그 샘플문서 잘 나오는지도 확인완료했습니다.
수고많으셨습니다!
한가지 궁금한 사항이 있어 질문 드렸습니다~!
| })}`} | ||
| > | ||
| <header className={css({ mb: "24" })}> | ||
| <h1>{frontmatter.title}</h1> |
There was a problem hiding this comment.
이 BlogPage.tsx에서는 daleui 컴포넌트를 따로 사용 안하시는지요!
There was a problem hiding this comment.
사실 고민해보지 않았습니다.
아직 디자인이 안나왔기에 대략 보기만 좋게하면 된다고 생각했어요
daleui 태그로 수정했습니다
hyoseong1994
force-pushed
the
1018-mdx-pipeline
branch
3 times, most recently
from
f958f95 to
9b2b09b
Compare
| const linkText = extractLinkText(children); | ||
| const isVideo = isVideoSource(href) || isVideoSource(linkText); |
There was a problem hiding this comment.
runtime에 Video를 판독해서 Video 태그를 삽입하는 것보다 Remark 빌드 시에 Video 태그 변환하는 것이 더 좋아보입니다!
There was a problem hiding this comment.
의견 감사합니다.
기존에 있는 lib들은 확장자명 제한등의 문제가 있어서 커스텀 remark 플러그인을 작성했습니다.
| [remarkMdxFrontmatter, { name: "frontmatter" }], | ||
| remarkGfm, | ||
| ], | ||
| rehypePlugins: [ |
There was a problem hiding this comment.
rehype-autolink-headings는 블로그나 다른 문서에 적용하기에 좋기에 추가하는 것이 좋습니다. 이외에도 다른 remark / rehype 플러그인을 추가로 찾아보시죠!
There was a problem hiding this comment.
넵 동의합니다.
rehype-autolink-headings과 더불어 mermaid rehype-external-links 설치하고
rehype-pretty-code 를 rehype-expressive-code 로 변경하였습니다.
| "html.dark .prose pre, html.dark .prose pre span": { | ||
| color: "var(--shiki-dark)", | ||
| }, | ||
| "html.dark .prose pre": { | ||
| backgroundColor: "var(--shiki-dark-bg)", | ||
| }, |
There was a problem hiding this comment.
rehype-expressive-code 로 변경하면서 dark theme와 함꼐 해당 css는 제거되었습니다.
| export function createFinder( | ||
| modules: Record<string, MdxModule>, | ||
| prefix: string, | ||
| ) { | ||
| const items: MdxDoc[] = Object.entries(modules) | ||
| .map(([path, mod]) => ({ | ||
| slug: path.slice(prefix.length, -EXT.length), | ||
| ...mod, | ||
| })) | ||
| .sort((a, b) => b.frontmatter.date.localeCompare(a.frontmatter.date)); | ||
|
|
||
| return (slug: string): MdxDoc | undefined => | ||
| items.find((item) => item.slug === slug); | ||
| } |
There was a problem hiding this comment.
zod로 frontmatter를 검증하는 것이 좋아보입니다.
There was a problem hiding this comment.
zod 추가했습니다. 리뷰 감사합니다!
hyoseong1994
force-pushed
the
1018-mdx-pipeline
branch
3 times, most recently
from
5607e00 to
22506e3
Compare
- Wire up MDX rollup plugin with eager glob loader for src/content/blog - remark plugins: frontmatter, mdx-frontmatter, gfm, custom video-link - rehype plugins: slug, autolink-headings, mermaid, expressive-code, external-links - Validate blog frontmatter with zod schemas at module load - Add BlogPage route with prose styles and mermaid client init - Seed getting-started.mdx as the first blog post
hyoseong1994
force-pushed
the
1018-mdx-pipeline
branch
from
22506e3 to
b195f5e
Compare
3 participants
MDX 기반 문서 콘텐츠를 Vite에서 렌더링할 수 있도록 파이프라인을 구성합니다. (closes #1018)
@mdx-js/rollupVite 플러그인과 remark/rehype 체인 설정frontmatter,mdx-frontmatter,gfm, 커스텀remark-video-linkslug,autolink-headings,mermaid,expressive-code,external-linksrehype-expressive-code(github-light/dark)로 코드 하이라이팅 + Copy 버튼 기본 제공rehype-mermaid로 빌드 타임에 mermaid 다이어그램 변환rehype-external-links로 외부 링크 자동target="_blank"+rel="noopener noreferrer"zod스키마로 blog frontmatter를 모듈 로드 시점에 검증.prose스코프의 GitHub 스타일 마크다운 타이포그래피export const frontmatter)*.mdx모듈 타입 및 프로젝트 전용Frontmatter타입import.meta.glob기반 문서 로더,BlogPage,/blog/:slug임시 라우팅remark-video-link로 video 확장자 링크를<video>태그로 렌더 (GitHub과 동일한 업로드 링크 처리 방식)테스팅
체크 리스트