サイトを書き直しました

## 目次

1.  <div>

    [これは何？](#loc-1)

    </div>

    1.  [なぜ Rust + Leptos + Typst なのか](#loc-3)
    2.  [隠し機能](#loc-4)

2.  <div>

    [マークアップテスト](#loc-5)

    </div>

    1.  <div>

        [Numbered List](#loc-6)

        </div>

        1.  [Lorem Ipsum](#loc-7)

    2.  [Callouts](#loc-9)

## これは何？

友人に Next.js のアンチがいたのと、高速化にハマっていたので、ブログを Rust + Leptos + Typst で書き直しました。

Typst はドキュメント作成ツールですが、HTML 出力もできるので、ブログ記事の本文を Typst で書いて HTML に変換し、Leptos 側で組み合わせて表示する形にしました[<sup>1</sup>](#loc-10)。

Lighthouse スコア満点を目指します

### なぜ Rust + Leptos + Typst なのか

Rust は好きだからです。高速で安全で、最近はウェブ開発のエコシステムも充実してきました。Leptos はコンポーネントベースのフレームワークで、React に似た感覚で書けるので選びました。Typst は友人が妙に推していたので選びました。

### 隠し機能

`/blog/[slug].typ` の記事ページにアクセスすると、記事本文の生 Typst ファイルを得ることができます。また、`/blog/[slug].md` にアクセスすると pandoc で変換された Markdown 版の記事も得られます。

## マークアップテスト

以下はテスト用です

This is a sample `.typ` <span class="mark">source</span> file.  
This is line break test.

- Bullet one
- Bullet two
- Bullet three

### Numbered List

1.  Numbered first
2.  Numbered five?
3.  Numbered six!

---

And a **bold** and *italic* <span style="text-decoration: underline">markers</span> (left as ~~plain~~ text for now<sub>2</sub><sup>citation needed</sup>).

#### Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.

<figure>
Make it a Quote Image
<figcaption>テスト画像</figcaption>
</figure>

```js
const greet = () => {
  console.log("Hello, world!");
};
greet();
```

[リンクのテスト](https://www.youtube.com/watch?v=dQw4w9WgXcQ)

|      |      |            |
|------|------|------------|
| 名前 | 年齢 | 職業       |
| 山田 | 28   | エンジニア |
| 佐藤 | 34   | デザイナー |

\[画像\]

ここに数式のテストがあります: <span style="display: inline-block">\[画像\]</span>.

<div>

人生は一箱のマッチに似ている。 重んずるのは馬鹿馬鹿しく、軽んずるのは危険である。

*— 芥川龍之介*

</div>

これは本文です[<sup>2</sup>](#loc-11)。

### Callouts

<div class="callout callout-info">

<span class="callout-icon">\[画像\]</span>

<div class="callout-body">

情報メッセージです。 aaaaaaaaaa

</div>

</div>

<div class="callout callout-warn">

<span class="callout-icon">\[画像\]</span>

<div class="callout-body">

注意メッセージです。  
aaaaaaaaaaa

</div>

</div>

> これ  
> 作者不明のブラウザ拡張機能は入れない方がいい  
>   
> フル権限を許可した場合、フォームに入力されたパスワード / クレカ番号までこっそり外部に送信される可能性がある [](https://t.co/f8ogXxNmOw)<https://t.co/f8ogXxNmOw>
>
> <span style="white-space: pre-wrap"> </span>— catnose (@catnose99)<span style="white-space: pre-wrap"> </span>[2025年12月5日](https://twitter.com/catnose99/status/1996798476789874895?ref_src=twsrc%5Etfw)

<div class="section" role="doc-endnotes">

1.  <span id="loc-10">[<sup>1</sup>](#loc-2)2025/11/27 時点ではまだ Unstable ではあるのであまり推奨されない</span>
2.  <span id="loc-11">[<sup>2</sup>](#loc-8)ここに脚注を書く</span>

</div>