# Test Markdown

これはブログ機能の表示確認用に置いたテスト用 Markdown です。

## Heading Scale

# H1 Heading Sample

H1 のサイズと段落との距離感を確認します。

## H2 Heading Sample

H2 はセクション区切りとして使う想定です。

### H3 Heading Sample

H3 は本文中の小見出しとして十分に目立つかを見ます。

#### H4 Heading Sample

H4 は補助的なラベルに近い強さです。

##### H5 Heading Sample

H5 はかなり控えめでも読める必要があります。

## リード文

日本語の本文表示を確認するため、段落、見出し、箇条書き、引用、テーブル、コード、画像などをまとめて入れています。

---

## Sections

- Cloudflare D1
- Cloudflare R2
- MDX rendering
- Image upload
- Thumbnail support
- Basic authentication

### ネストしたリスト

1. 記事の下書きを作る
2. サムネイルを追加する
3. 本文に画像を差し込む
   - 画像は R2 に保存される
   - URL は `/media/...` で配信される
4. 公開状態に切り替える

### 通常の箇条書き

- 1つ目の項目
- 2つ目の項目
- 3つ目の項目
  - ネストされた項目 A
  - ネストされた項目 B

### チェックボックス

- [x] 公開ページの確認
- [x] エディタ保存の確認
- [ ] モバイル表示の最終確認
- [ ] デザイン微調整

## 強調表現

通常の文章の中で **太字** を使ったり、*イタリック* を使ったり、`inline code` を混ぜたときの見え方を確認します。

## 引用

> 良いブログUIは、書く人の負荷を減らしつつ、
> 読む人の視線移動も整理できている。

## テーブル

| 項目 | 保存先 | 用途 |
| --- | --- | --- |
| タイトル | D1 | 一覧・詳細表示 |
| 抜粋 | D1 | カード表示 |
| 本文(MDX) | R2 | 記事本文 |
| サムネイル | R2 + D1 | 一覧表示 |
| 本文画像 | R2 | 記事中の図版 |

## Sample Code

```ts title="blog-store.ts" {1}
const message = "hello markdown";
console.log(message);
```

```jsx title="HeroCard.jsx" {2,6}
export function HeroCard() {
  return (
    <section className="hero-card">
      <p className="eyebrow">Featured</p>
      <h2>JSX preview</h2>
    </section>
  );
}
```

```bash title="deploy.sh"
npx wrangler d1 execute blog-db --remote --file=./migrations/0002_add_blog_images.sql
```

### Inline Code Matrix

- `const value = 42`
- `npm run deploy`
- `!timeline`

### More Code

```json
{
  "name": "timeline-sample",
  "enabled": true,
  "items": 3
}
```

```css
.timeline-post-body p {
  margin: 0 0 0.7rem;
  line-height: 1.7;
}
```

## リンク

- [Next.js](https://nextjs.org/)
- [Cloudflare D1](https://developers.cloudflare.com/d1/)
- [Cloudflare R2](https://developers.cloudflare.com/r2/)

## 画像

![Sample placeholder](/window.svg)

## Timeline

!timeline
2026/03/06 20:00:00
最初のログ
タイムライン本文の表示テストです。
\---
2026/03/06 21:30:00
次のログ
二件目は **強調** や `inline code` も混ぜます。
!endtimeline

## 補足メモ

### 小見出し

長めの日本語テキストも確認します。やや長い文を数行にわたって置いたときに、行間、段落間の余白、見出しとの距離感が不自然でないかを見るための文章です。実運用の記事では、このくらいの長さの段落が連続することを想定しています。

### チェックポイント

- H1, H2, H3 のサイズ差
- 箇条書きの行間
- テーブルのセル余白
- コードブロックの視認性
- 画像の角丸と余白
- リンク色の判別しやすさ

> このファイルはトップページと `/test-markdown` から確認できます。