Global

src/global.tsx (or jsx) または /src/pages/_global.tsx (or jsx) を作成すると、サイト全体を囲うラッパーコンポーネントとなります。export default が必須です。

INFO

Head コンポーネントが使用できます
Metadata を export できます
静的ビルドされるため React Hooks を使用することはできません
Partial Hydration で React Hooks を含んだコンポーネントを設置することはできます
非同期関数 getStaticData を用いた Fetch が使用できます
import した CSS は bundle.css として結合し全体に適応されます

// src/global.tsx
import type { GlobalProps } from "minista"
import { Head } from "minista"

import "./global.css"

export default function ({ url, title, children }: GlobalProps) {
  return (
    <>
      <Head>
        <title>{title}</title>
        <meta property="description" content="description" />
      </Head>
      {url === "/" ? (
        <div className="home">{children}</div>
      ) : (
        <div>{children}</div>
      )}
    </>
  )
}

GlobalProps

Global ではページデータである children の他に、Pages で export した Metadata を props として利用できます。また、ページの url を参照できます。これらの props をもとにページ毎のレイアウト変更などの条件分岐が可能です。

type GlobalProps = {
  url: string
  title: string
  group: string
  draft: boolean
  children: React.ReactNode
  [key: string]: any
}