Root

src 直下に root.tsx または root.jsx を作成すると、サイト全体を囲うラッパーコンポーネントとなります。export default が必須です。

import type { MinistaLocation } from "minista"

import { Head } from "minista"
import { Fragment } from "react"

import "./root.css"

import AppLayout from "./components/app-layout"

export type FrontmatterProps = {
  title?: string
  draft?: boolean
}

type RootProps = {
  location: MinistaLocation
  frontmatter?: FrontmatterProps
  children: React.ReactNode
}

const Root = ({ location, frontmatter, children }: RootProps) => {
  return (
    <>
      <Head>
        <title>タイトル</title>
        <meta property="description" content="ディスクリプション" />
      </Head>
      <AppLayout>{children}</AppLayout>
    </>
  )
}

export default Root

CAUTION

静的ビルドされるため React の Hook を使用することはできません
import した CSS は bundle.css として結合し全体に適応されま

す

location

// src/root.tsx (with src/pages/docs/index.tsx)
export default ({ location }) => {
  return <>{location.pathname}</>
}
// => "/docs/"

Root は props から location.pathname を取得可能です。これにより、メタタグの URL を現在地ごとに出し分けるテンプレートを作成できます。

frontmatter

// src/root.tsx (with src/pages/docs/index.md)
export default ({ frontmatter }) => {
  return <>{frontmatter.title}</>
}
// => "Page Docs Title"

Root は props から Markdown .md .mdx の frontmatter を取得可能です。

getStaticData

Root は非同期関数 getStaticData で Next.js の getStaticProps を再現できます。ここで返した props は Root とページファイルすべてで使用可能です。

また、components を持たせると Markdown .md .mdx のコンポーネントを差し替えることができます。パターンは MDX 公式ドキュメントを参照ください。

import type { MinistaLocation } from "minista"

import { Head } from "minista"

export const getStaticData = async () => {
  const apiUrl = "https://api.github.com/repos/qrac/minista"
  const response = await fetch(apiUrl)
  const data = await response.json()
  return {
    props: {
      global: {
        title: data.name,
        description: data.description,
      },
      components: {
        h2: (props) => <h2 className="mdx-components-test" {...props} />,
      },
    },
  }
}

export type GlobalProps = {
  title: string
  description: string
}

export type FrontmatterProps = {
  title?: string
  draft?: boolean
}

type RootProps = {
  global: GlobalProps
  frontmatter?: FrontmatterProps
  location: MinistaLocation
  children: React.ReactNode
}

const Root = ({ global, frontmatter, location, children }: RootProps) => {
  const ogType = location.pathname === "/" ? "website" : "article"
  return (
    <>
      <Head>
        <title>
          {frontmatter?.title
            ? frontmatter?.title + " | " + global?.title
            : global?.title}
        </title>
        <meta name="description" content={global?.description}></meta>
        <meta property="og:type" content={ogType} />
      </Head>
      {children}
    </>
  )
}

export default Root