MDX

프런트매터 변수 사용

---
layout: '../../layouts/BlogPostLayout.astro'
title: 'My first MDX post'
---

# {frontmatter.title}

컴포넌트 사용

astro는 모든 컴포넌트를 html로 바꾸니까 가능한 것 같다
-> 클라이언트 컴포넌트도 넣을 수 있을까?

---
layout: ../layouts/BaseLayout.astro
title: About me
---
import Button from '../components/Button.astro';
import ReactCounter from '../components/ReactCounter.jsx';

I live on **Mars** but feel free to <Button title="Contact me" />.

Here is my counter component, working in MDX:

<ReactCounter client:load />

HTML요소에 맞춤 컴포넌트 할당

인용문 박스나 강조문 박스를 맘대로 만들 수 있을듯! 😳😳

//Blkockquote.astro
---
const props = Astro.props;
---
<blockquote {...props} class="bg-blue-50 p-4">
  <span class="text-4xl text-blue-600 mb-2">“</span>
  <slot />
</blockquote>


//about.mdx
import Blockquote from '../components/Blockquote.astro';
export const components = {blockquote: Blockquote}

> This quote will be a custom Blockquote

마크다운 가져오기

---
import * as greatPost from '../pages/post/great-post.md';

const posts = await Astro.glob('../pages/post/*.md'); //이렇게 가져와서 컴포넌트처럼 사용 가능!
---

<p>{greatPost.frontmatter.title}</p>
<p>Written by: {greatPost.frontmatter.author}</p>

<p>Post Archive:</p>
<ul>
  {posts.map(post => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
</ul>

가져온 md의 속성

속성	설명	예시
file	절대 파일 경로	/home/user/projects/.../file.md
url	페이지인 경우 페이지의 URL	/en/guides/markdown-content
frontmatter	프런트매터에 지정된 모든 데이터
getHeadings	파일의 모든 제목 배열을 반환 (비동기)	{ depth: number; slug: string(id. 앵커링크에 사용); text: string }
Content	파일의 전체 렌더링 콘텐츠 반환	< Content/ >
rawContent()	(Markdown만 해당) 원시 Markdown을 문자열로 반환
compiledContent()	(Markdown만 해당) HTML 문자열로 컴파일된 Markdown반환

동적 페이지 라우팅

---
export async function getStaticPaths() {
  const posts = await Astro.glob('../posts/**/*.md')

  return posts.map(post => ({
    params: {
      slug: post.frontmatter.slug //posts로 가져온 각 값을 param과 props에 재할당해 리턴
    },
    props: {
      post
    },
  }))
}

const { Content } = Astro.props.post //그리고 props에서 받아온 컴포넌트를 그대로 사용
---
<article>
  <Content/>
</article>

가져온 mdx가 있는 사용자 정의 컴포넌트

---
import { Content, components } from '../content.mdx';
import Heading from '../Heading.astro';
---
  //모든 h1태그에 Heading 컴포넌트를 적용한다는 뜻! 
  // ...component를 먼저 해주고 추가하는 것을 잊지 말기
<Content components={{...components, h1: Heading }} />

마크다운 및 mdx 구성

마크다운 플러그인

-> 목차 자동 생성, 접근 가능한 이모티콘 라벨 적용, Markdown 스타일 지정 등 가능!

• awesome-remark
• awesome-rehype
  ...

//astro.config.mjs

import { defineConfig } from 'astro/config';
import remarkToc from 'remark-toc';
import { rehypeAccessibleEmojis } from 'rehype-accessible-emojis';

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkToc], // : [ [remarkToc, { heading: "contents"} ] ] 처럼 옵션을 추가할 수 있음!
    rehypePlugins: [rehypeAccessibleEmojis],
  },
});

제목 id 및 플러그인

Astro는 Markdown 및 MDX 파일의 모든 h태그에 id 속성 삽입
-> Markdown 내보낸 속성에서 해당 ID를 검색하기 위한 getHeadings()를 제공!
-> 기본적으로 Astro는 rehype 플러그인이 실행된 후 id 속성을 주입

//astro.config.mjs

import { defineConfig } from 'astro/config';
import { rehypeHeadingIds } from '@astrojs/markdown-remark';
import { otherPluginThatReliesOnHeadingIDs } from 'some/plugin/source';

export default defineConfig({
  markdown: {
    rehypePlugins: [
      rehypeHeadingIds, //플러그인에 이 항목을 추가하면 플러그인이 Astro에서 삽입한 ID에 액세스 가능
      otherPluginThatReliesOnHeadingIDs,
    ],
  },
});

코드 펜스 기능

Astro에는 Shiki 및 Prism에 대한 지원이 내장!
-> Shiki의 github-dark 테마가 default
-> 여기나 여기에서 테마를 추가할 수 있다

//astro.config.mjs

import { defineConfig } from 'astro/config';
import customTheme from './my-shiki-theme.json'; 

export default defineConfig({
  markdown: {
    shikiConfig: {
      themes: {
        light: 'github-light',
        dark: 'github-dark',
        custom: customTheme, //이렇게 테마를 가져와서 사용할 수도 있음!
      },
      langs: [], // 사용자 정의 언어 추가
      wrap: true, //가로스크롤 방지
      transformers: [],
    },
  },
});
``