【保存版】記事で使えるコンポーネント一覧と使い方

function greet(name) {
  return `こんにちは、${name}さん！`;
}

console.log(greet('世界'));

type User = {
  id: number;
  name: string;
  email: string;
};

const getUser = async (id: number): Promise<User> => {
  const res = await fetch(`/api/users/${id}`);
  return res.json();
};

# 依存パッケージをインストール
pnpm install

# 開発サーバーを起動
pnpm dev

.card {
  border-radius: 0.75rem;
  padding: 1.5rem;
  background: white;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
}

{% callout type="info" %}
ここにテキストを書く
{% /callout %}

{% timeline %}
{% timelineItem date="2024年1月" title="タイトル" %}
ここに内容を書く
{% /timelineItem %}
{% /timeline %}

{% chat %}
{% bubble speaker="left" name="相手の名前" %}
テキスト
{% /bubble %}

{% bubble speaker="right" name="自分の名前" %}
テキスト
{% /bubble %}
{% /chat %}

{% AffiliateBox
   productName="商品名"
   description="商品の説明文"
   imageUrl="https://..."
   amazonUrl="https://..."
   rakutenUrl="https://..."
   yahooUrl="https://..."
   customUrl="https://..."
   customLabel="ショップ名で見る" /%}

{% FAQ %}
{% FAQItem question="質問文をここに書く" %}
回答文をここに書く。**マークダウン**も使えます。
{% /FAQItem %}
{% /FAQ %}

{% YouTube url="https://youtu.be/jNQXAC9IVRw" /%}

{% YouTube
   url="https://youtu.be/jNQXAC9IVRw"
   adImageUrl="https://placehold.co/400x100/f59e0b/ffffff?text=広告サンプル"
   adLinkUrl="https://example.com"
   adDelay=5
   adPosition="bottom"
/%}

{% ExternalHtmlEmbed html="<blockquote class=\"twitter-tweet\"><p lang=\"ja\" dir=\"ltr\">ポストの本文</p>&mdash; 名前 (@handle) <a href=\"https://twitter.com/handle/status/123456789\">日付</a></blockquote><script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>" /%}