Sanity

概要

Fumadocs は、Sanity CMS のセットアップを簡単にする公式インテグレーションを提供しています。

Sanity のサンプルは GitHub で公開しています。

セットアップ

このガイドでは、Sanity の公式ドキュメントに従って、すでに設定が完了していることを前提としています。

データ型

次のコマンドを実行して、コンテンツタイプを初期化します。

npx @fumadocs/cli add sanity/base

または、npx @fumadocs/cli add を実行して、ほかの Sanity プリセットを一覧から選んでインストールすることもできます。

インストールした型を登録します。

import { docsType, blockContent, callout, card, cards } from '@/lib/sanity/base';

export const schemaTypes = [blockContent, callout, card, cards, docsType];

コンテンツローダー

インテグレーションをインストールします。

npm i @fumadocs/sanity

Sanity クライアントでソースを作成します:

lib/source.ts

import { dynamicLoader } from 'fumadocs-core/source';
import { createSanitySource } from '@fumadocs/sanity';
// Sanity クライアント
import { client } from '@/sanity/lib/client';
// 生成された型
import type { Docs } from '@/sanity/types';

const source = dynamicLoader(
  createSanitySource<Docs>({
    client,
    docType: 'docs',
  }),
  {
    baseUrl: '/docs',
  },
);

export async function getSource() {
  return source.get();
}

次に、getSource() 関数を使ってページをレンダリングします:

---
import type { GetStaticPaths, InferGetStaticPropsType } from 'astro';
import Layout from '@/layouts/Layout.astro';
import { Docs } from '@/components/docs';
import { getSource } from '@/lib/source';

export const prerender = true;

export const getStaticPaths = (async () => {
  const source = await getSource();
  return source.getPages().map((page) => ({
    params: { slug: decodeURI(page.slugs.join('/')) || undefined },
    props: { page },
  }));
}) satisfies GetStaticPaths;

type Props = InferGetStaticPropsType<typeof getStaticPaths>;

const { page } = Astro.props;
const source = await getSource();
const pageTree = await source.serializePageTree(source.getPageTree());
const { title, description, _toc, body } = await page.data.load();
---

<Layout title={page.data.title}>
  <Docs
    client:load
    pathname={Astro.url.pathname}
    params={Astro.params}
    tree={pageTree}
    title={title}
    description={description}
    toc={_toc}
    body={body}
  />
</Layout>

完了

Studio エディターで docs タイプのドキュメントを作成すると、docs ルートに表示されるようになります。

概要アンカーリンクをコピー

セットアップアンカーリンクをコピー

データ型アンカーリンクをコピー

コンテンツローダーアンカーリンクをコピー

完了アンカーリンクをコピー

このページの内容

概要

セットアップ

データ型

コンテンツローダー

完了