Astro 2.1 で実験的サポートされた Markdoc Integration を触ってみる

cd astro-blog-example
npx astro add markdoc

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import react from '@astrojs/react';
import sitemap from '@astrojs/sitemap';

import markdoc from "@astrojs/markdoc";

// https://astro.build/config
export default defineConfig({
  site: 'https://example.com',
  integrations: [mdx(), sitemap(), react(), markdoc()]
});

---
title: "Using Markdoc"
description: "Markdoc usage page"
pubDate: "Mar 20 2023"
---

## Why Markdoc?

### Markdown table

| Italics   | Bold     | Code   |
| --------- | -------- | ------ |
| _italics_ | **bold** | `code` |

### Markdoc table

{% table %}
- Italics
- Bold
- Code
---
- _italics_
- **bold**
- `code`
{% /table %}

---
import { Icon } from 'astro-icon'
export type CalloutType = 'check' | 'error' | 'note' | 'warning'
interface Props {
    title: string
    type: CalloutType
}

const ICON_MAP: Record<CalloutType, string> = {
    'check': 'check-circle',
    'error': 'close-circle',
    'note': 'note',
    'warning': 'warning-circle'
}

const COLOR_MAP: Record<CalloutType, string> = {
    'check': 'text-green-700',
    'error': 'text-red-700',
    'note': ' text-gray-700',
    'warning': 'text-orange-400'
}

const { title, type = 'note' } = Astro.props
---
<div class="callout flex gap-2 w-full bg-gray-50 my-1 px-5 py-2 rounded-sm shadow-sm">
    <Icon class={`w-8 h-8 inline-block ${COLOR_MAP[type]}`} pack="mdi" name={ICON_MAP[type]} />
    <div class="copy flex flex-col">
        <h3 class={`title m-0 ${COLOR_MAP[type]}`}>{title}</h3>
        <slot/>
    </div>
</div>

---
import { CollectionEntry, getCollection } from 'astro:content';
import BlogPost from '../../layouts/BlogPost.astro';
import Callout from '../../components/mdoc/Callout.astro';

export async function getStaticPaths() {
	const posts = await getCollection('blog');
	return posts.map((post) => ({
		params: { slug: post.slug },
		props: post,
	}));
}
type Props = CollectionEntry<'blog'>;

const post = Astro.props;
const { Content } = await post.render();
---

<BlogPost {...post.data}>
	<h1>{post.data.title}</h1>
	<Content components={{ Callout }}/>
</BlogPost>

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import react from '@astrojs/react';
import sitemap from '@astrojs/sitemap';
import markdoc from "@astrojs/markdoc";

import tailwind from "@astrojs/tailwind";

// https://astro.build/config
export default defineConfig({
  site: 'https://example.com',
  integrations: [mdx(), sitemap(), react(),
    tailwind({
      config: { applyBaseStyles: false },
    }),
    markdoc({
      tags: {
        callout: {
          render: "Callout",
          attributes: {
            type: {
              type: String
            },
            title: {
              type: String
            }
          }
        }
      }
    }
  ),]
});

## Custom Tag (callout)
{% callout type="check" title="Check" %}
    This is a check callout.
{% /callout %}

{% callout type="error" title="Error" %}
    This is a error callout.
{% /callout %}

{% callout type="note" title="Note" %}
    this is a note callout.
{% /callout %}

{% callout type="warning" title="Warning" %}
    this is a woaning callout.
{% /callout %}