Open9日前にコメント追加1

Astro.jsを使うときの個人的Tips

SlotとProps

レイアウトとかでHeadを楽に設定したいとき、

---
// head.astro
interface Props {
    title?: string
    desc?: string
}
const { title = "hoge", desc = "fuga" } = Astro.props
---
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>{title}</title>
    <meta name="description" content={desc} />
</head>

---
// layouts.astro
import Head from 'src/components/head.astro'
---
<html lang="ja">
    <Head title="foo" desc="bar" />
    <body>
        <slot />
    </body>
</html>

とするよりも、

---
// head.astro
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <slot name="title">
        <title>hoge (fallback)</title>
    </slot>
    <slot name="description" />
</head>

---
// layout.astro
import Head from "src/components/head.astro";
---
<html lang="ja" class="scroll-smooth">
    <Head>
        <slot name="title" slot="title" />
        <slot name="description" slot="description" />
    </Head>
    <main>
        <slot />
    </main>
</html>

とかのほうが好き。
前者はフォーマッタの都合もあって、文字が長くなると行の変更が激しかったりする。descだけ編集したのに2行が1行になったり（その逆も）あり得る。
後者ならどのシチューエションでもslotごとに明確に行を分けられるので、変更が分かりやすい。
SlotはFallbackもできるのでデフォルトのなんやらが決まっているときはこれが便利だと思ってる。

ログインするとコメントできます