Scribe型付き MDX CMS

例

scribe-cms の一般的なワークフロー向けコピペ用スニペット。

インストール

Node 20以上の任意のプロジェクトにscribe-cmsを追加します。

pnpm add scribe-cms zod better-sqlite3

設定

Zodでコンテンツタイプを定義します。翻訳可能フィールド、構造フィールド、およびリレーションフィールドに対応しています。

import { z } from "zod";
import { defineConfig, defineContentType, field } from "scribe-cms";

const blogSchema = z.object({
title: field.translatable(z.string().min(1)),
description: field.translatable(z.string().min(50)),
author: field.relation("author"),
});

const authorSchema = z.object({
name: field.structural(z.string().min(1)),
});

export default defineConfig({
  rootDir: ".",
  locales: ["en", "fr"],
  types: [
    defineContentType({
      id: "blog",
      path: "/blog/{slug}",
      schema: blogSchema,
      slugStrategy: "localized",
    }),
    defineContentType({
      id: "author",
      contentDir: "authors",
      schema: authorSchema,
    }),
  ],
});

コンテンツファイル

1ドキュメントにつき1つの.mdxファイルを使用します。ファイル名は英語のスラッグとなります。

---
title: "こんにちは、世界"
description: "世界へ挨拶する最初の投稿です。スキーマの制約上50文字以上の入力が要求されているため、このように少し長めの文章を書いています。"
author: jane
publishedAt: "2026-01-15"
---

本文はMDXで記述します。**Markdown**とコンポーネントの両方が利用可能です。

ランタイム

型付きクライアントを使用してコンテンツを読み込みます。一覧取得、解決、リレーションの追跡が可能です。

import { createScribe } from "scribe-cms/runtime";
import config from "./scribe.config";

const scribe = createScribe(config);

const posts = scribe.blog.list("fr");
const { document } = scribe.blog.resolve("hello-world", "fr");
const author = scribe.blog.related(document!, "author");

CLI

ビルド前のコンテンツ検証や、Geminiを活用した古いページの翻訳を行います。

scribe validate
scribe translate --locale fr
scribe status
例 · Scribe