feat: MDX 파이프라인 구성 (#1018) by hyoseong1994 · Pull Request #5 · DaleStudy/daleui.com

hyoseong1994 · 2026-05-08T02:21:03Z

MDX 기반 문서 콘텐츠를 Vite에서 렌더링할 수 있도록 파이프라인을 구성합니다. (closes #1018)

@mdx-js/rollup Vite 플러그인과 remark/rehype 체인 설정
- remark: frontmatter, mdx-frontmatter, gfm, 커스텀 remark-video-link
- rehype: slug, autolink-headings, mermaid, expressive-code, external-links
rehype-expressive-code(github-light/dark)로 코드 하이라이팅 + Copy 버튼 기본 제공
rehype-mermaid로 빌드 타임에 mermaid 다이어그램 변환
rehype-external-links로 외부 링크 자동 target="_blank" + rel="noopener noreferrer"
zod 스키마로 blog frontmatter를 모듈 로드 시점에 검증
.prose 스코프의 GitHub 스타일 마크다운 타이포그래피
frontmatter를 named export로 추출 (export const frontmatter)
*.mdx 모듈 타입 및 프로젝트 전용 Frontmatter 타입
import.meta.glob 기반 문서 로더, BlogPage, /blog/:slug 임시 라우팅
커스텀 remark-video-link로 video 확장자 링크를 <video> 태그로 렌더 (GitHub과 동일한 업로드 링크 처리 방식)

라우터 도입 및 라우트별 정적 HTML 사전 렌더링은 #1023에서 다룰 예정이라, 이번 PR에서는 파이프라인 검증용 최소 라우팅만 포함했습니다.

테스팅

dev 서버에서 `src/content/blog/getting-started.mdx`의 변환 결과 확인
배포된 서버에서 /blog/getting-started 경로로 이동하여 확인 가능

체크 리스트

코드 리뷰를 요청하기 전에 반드시 CI가 통과하는지 확인해주세요.

cloudflare-workers-and-pages · 2026-05-13T05:32:34Z

Deploying with Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	daleui	`12089bd`	Commit Preview URL	May 22 2026, 04:37 AM

RiaOh

@hyoseong1994 님,
모르는 내용이 많이 이해하느라 조금 시간이 걸렸습니다. 늦어서 죄송합니다.

/blog/getting-started경로로 임시 블로그 샘플문서 잘 나오는지도 확인완료했습니다.
수고많으셨습니다!
한가지 궁금한 사항이 있어 질문 드렸습니다~!

RiaOh · 2026-05-13T06:55:12Z

+          })}`}
+        >
+          <header className={css({ mb: "24" })}>
+            <h1>{frontmatter.title}</h1>


이 BlogPage.tsx에서는 daleui 컴포넌트를 따로 사용 안하시는지요!

사실 고민해보지 않았습니다.
아직 디자인이 안나왔기에 대략 보기만 좋게하면 된다고 생각했어요

daleui 태그로 수정했습니다

@RiaOh 알림이 누락된거같아서 태그합니다 :)

@hyoseong1994 답이 늦어서 죄송합니다. 네! daleui태그로 수정해주셔서 감사합니다~~!

SimYunSup · 2026-05-14T05:03:31Z

+  const linkText = extractLinkText(children);
+  const isVideo = isVideoSource(href) || isVideoSource(linkText);


runtime에 Video를 판독해서 Video 태그를 삽입하는 것보다 Remark 빌드 시에 Video 태그 변환하는 것이 더 좋아보입니다!

의견 감사합니다.
기존에 있는 lib들은 확장자명 제한등의 문제가 있어서 커스텀 remark 플러그인을 작성했습니다.

@SimYunSup 알림이 누락된거같아서 태그합니다 :)

SimYunSup · 2026-05-14T05:10:35Z

+          [remarkMdxFrontmatter, { name: "frontmatter" }],
+          remarkGfm,
+        ],
+        rehypePlugins: [


rehype-autolink-headings는 블로그나 다른 문서에 적용하기에 좋기에 추가하는 것이 좋습니다. 이외에도 다른 remark / rehype 플러그인을 추가로 찾아보시죠!

넵 동의합니다.

rehype-autolink-headings과 더불어 mermaid rehype-external-links 설치하고
rehype-pretty-code 를 rehype-expressive-code 로 변경하였습니다.

SimYunSup · 2026-05-14T05:11:29Z

+  "html.dark .prose pre, html.dark .prose pre span": {
+    color: "var(--shiki-dark)",
+  },
+  "html.dark .prose pre": {
+    backgroundColor: "var(--shiki-dark-bg)",
+  },


var(--shiki-light)는 없나요?

rehype-expressive-code 로 변경하면서 dark theme와 함꼐 해당 css는 제거되었습니다.

SimYunSup · 2026-05-14T05:12:26Z

+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);
+}


zod로 frontmatter를 검증하는 것이 좋아보입니다.

zod 추가했습니다. 리뷰 감사합니다!

hyoseong1994 · 2026-05-15T05:50:30Z

 {
  "compilerOptions": {
-    "target": "ES2020",
+    "target": "ES2022",


Error의 두 번째 인자 사용을 위해서 ES2022 변경하였습니다.
node.json은 이미 ES2022 사용중입니다.

hyoseong1994 · 2026-05-17T23:32:45Z

+  const linkText = extractLinkText(children);
+  const isVideo = isVideoSource(href) || isVideoSource(linkText);


@SimYunSup 알림이 누락된거같아서 태그합니다 :)

hyoseong1994 · 2026-05-17T23:32:56Z

+          })}`}
+        >
+          <header className={css({ mb: "24" })}>
+            <h1>{frontmatter.title}</h1>


@RiaOh 알림이 누락된거같아서 태그합니다 :)

RiaOh

효성님, 수고많으셨습니다 :)

- 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 · 2026-05-27T00:21:46Z

@SimYunSup 개인사정상 피드백이 어렵다고 하셔서 우선 merge하고 추후에 피드백 주시면 따로 PR 열도록하겠습니다.

github-actions Bot assigned hyoseong1994 May 8, 2026

hyoseong1994 force-pushed the 1018-mdx-pipeline branch from f7aecc1 to 9443eb5 Compare May 8, 2026 05:21

hyoseong1994 changed the base branch from main to refactor/section-layout May 8, 2026 05:25

hyoseong1994 force-pushed the 1018-mdx-pipeline branch 3 times, most recently from 384a475 to b3101fd Compare May 8, 2026 07:34

hyoseong1994 marked this pull request as ready for review May 8, 2026 07:43

hyoseong1994 requested a review from a team as a code owner May 8, 2026 07:43

Base automatically changed from refactor/section-layout to main May 10, 2026 23:43

hyoseong1994 linked an issue May 11, 2026 that may be closed by this pull request

MDX 파이프라인 구성 #9

Closed

5 tasks

hyoseong1994 force-pushed the 1018-mdx-pipeline branch from b3101fd to 29fe438 Compare May 13, 2026 05:32

RiaOh reviewed May 13, 2026

View reviewed changes

hyoseong1994 force-pushed the 1018-mdx-pipeline branch 3 times, most recently from f958f95 to 9b2b09b Compare May 13, 2026 07:53

SimYunSup reviewed May 14, 2026

View reviewed changes

hyoseong1994 requested a review from RiaOh May 15, 2026 00:03

hyoseong1994 force-pushed the 1018-mdx-pipeline branch 4 times, most recently from 22506e3 to b195f5e Compare May 15, 2026 05:42

hyoseong1994 requested a review from SimYunSup May 15, 2026 05:45

hyoseong1994 commented May 17, 2026

View reviewed changes

RiaOh approved these changes May 18, 2026

View reviewed changes

hyoseong1994 added 2 commits May 22, 2026 13:36

refactor: reorganize blog content loading and validation

12089bd

hyoseong1994 force-pushed the 1018-mdx-pipeline branch from a8df128 to 12089bd Compare May 22, 2026 04:36

hyoseong1994 merged commit 46c85f8 into main May 27, 2026
4 checks passed

hyoseong1994 deleted the 1018-mdx-pipeline branch May 27, 2026 00:21

		const linkText = extractLinkText(children);
		const isVideo = isVideoSource(href) \|\| isVideoSource(linkText);

Conversation

hyoseong1994 commented May 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

테스팅

체크 리스트

Uh oh!

cloudflare-workers-and-pages Bot commented May 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying with Cloudflare Workers

Uh oh!

RiaOh left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

RiaOh left a comment

Choose a reason for hiding this comment

Uh oh!

hyoseong1994 commented May 27, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

hyoseong1994 commented May 8, 2026 •

edited

Loading

cloudflare-workers-and-pages Bot commented May 13, 2026 •

edited

Loading