sidebars.js

/**
 * Creating a sidebar enables you to:
 - create an ordered group of docs
 - render a sidebar for each doc of that group
 - provide next/previous navigation

 The sidebars can be generated from the filesystem, or explicitly defined here.

 Create as many sidebars as you want.
 */

// @ts-check

/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
const sidebars = {
  // 默认情况下，Docusaurus 会根据文档文件夹结构生成侧边栏
  // tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],

  // 但你也可以手动创建侧边栏

  tutorialSidebar: [
    {
      type: 'doc',
      label: '关于 Stately 和 XState',
      id: 'about',
    },
    {
      type: 'category',
      label: '入门',
      link: {
        type: 'generated-index',
        title: '入门',
        description: '快速入门 XState 和 Stately Studio。',
        slug: '/category/get-started',
        keywords: ['指南'],
      },
      collapsed: false,
      collapsible: true,
      items: [
        'quick-start',
        {
          type: 'doc',
          label: '安装 XState',
          id: 'installation',
        },
        {
          type: 'doc',
          label: '迁移到 XState v5',
          id: 'migration',
        },
        {
          type: 'doc',
          label: '示例',
          id: 'examples',
        },
        'templates',
        'cheatsheet',
        'typescript',
        {
          type: 'link',
          label: 'API',
          // href: 'https://tsdocs.dev/docs/xstate',
          href: 'https://www.jsdocs.io/package/xstate',
        },
      ],
    },
    {
      type: 'category',
      label: '核心概念',
      link: {
        type: 'generated-index',
        title: '核心概念',
        description: '了解 XState 和 Stately Studio 的核心概念。',
        slug: '/category/core-concepts',
        keywords: ['指南'],
      },
      collapsed: false,
      collapsible: true,
      items: [
        {
          type: 'doc',
          label: 'State machines(状态机)',
          id: 'state-machines-and-statecharts',
        },
        {
          type: 'doc',
          label: 'Actor model(执行者模型)',
          id: 'actor-model',
        },
        {
          type: 'doc',
          label: '什么是 XState？',
          id: 'xstate',
        },
      ],
    },
    {
      type: 'category',
      label: 'Stately Studio',
      link: {
        type: 'generated-index',
        title: 'Stately Studio',
        description: '了解如何使用 Stately Studio 的编辑器。',
        slug: '/category/studio',
        keywords: ['指南'],
      },
      collapsed: true,
      collapsible: true,
      items: [
        {
          type: 'doc',
          label: '介绍 Stately Studio',
          id: 'studio',
        },
        {
          type: 'doc',
          label: 'Stately Studio Pro',
          id: 'studio-pro-plan',
        },
        {
          type: 'doc',
          label: 'Stately Studio 团队',
          id: 'studio-team-plan',
        },
        {
          type: 'doc',
          label: 'Stately Studio 企业版',
          id: 'studio-enterprise-plan',
        },
        {
          type: 'doc',
          label: 'Stately Studio 社区版',
          id: 'studio-community-plan',
        },
        {
          type: 'doc',
          label: 'States and transitions(状态和转换)',
          id: 'editor-states-and-transitions',
        },
        {
          type: 'doc',
          label: 'Actions and actors(动作和执行者)',
          id: 'editor-actions-and-actors',
        },
        {
          type: 'category',
          label: '设计模式',
          link: {
            type: 'doc',
            id: 'design-mode',
          },
          items: [
            {
              type: 'doc',
              label: '使用 AI 生成',
              id: 'generate-flow',
            },
            {
              type: 'doc',
              label: '生成 React 应用',
              id: 'generate-react',
            },
            {
              type: 'doc',
              label: '颜色',
              id: 'colors',
            },
            {
              type: 'doc',
              label: '笔记',
              id: 'annotations',
            },
            'descriptions',
            {
              type: 'doc',
              label: '嵌入 Figma',
              id: 'figma',
            },
            {
              type: 'doc',
              label: '资产',
              id: 'assets',
            },
            {
              type: 'doc',
              label: '标签',
              id: 'editor-tags',
            },
            'machine-restore',
            'autolayout',
          ],
        },
        {
          type: 'category',
          label: '模拟模式',
          link: {
            type: 'doc',
            id: 'simulate-mode',
          },
          items: [
            {
              type: 'doc',
              label: '实时模拟',
              id: 'live-simulation',
            },
          ],
        },
        {
          type: 'category',
          label: '代码',
          link: {
            type: 'generated-index',
            title: '代码',
            description: '了解如何使用 Stately Studio 的代码。',
            slug: '/category/code',
            keywords: ['指南'],
          },
          collapsed: true,
          collapsible: true,
          items: [
            'import-from-code',
            'import-from-github',
            'generate-test-paths',
            'sources',
            'export-as-code',
          ],
        },
        'projects',
        {
          type: 'category',
          label: 'Stately Sky',
          link: {
            type: 'doc',
            id: 'stately-sky-getting-started',
          },
          items: [
            {
              type: 'doc',
              label: '入门',
              id: 'stately-sky-getting-started',
            },
          ],
        },
        {
          type: 'doc',
          label: '团队',
          id: 'teams',
        },
        'discover',
        {
          type: 'category',
          label: '分享',
          link: {
            type: 'generated-index',
            title: '分享',
            description:
              '了解如何分享在 Stately Studio 中创建的机器。',
            slug: '/category/share',
            keywords: ['指南'],
          },
          items: [
            {
              type: 'doc',
              label: '嵌入 URL',
              id: 'embed',
            },
            {
              type: 'doc',
              label: '图片 URL',
              id: 'image',
            },
            {
              type: 'doc',
              label: '分享 URL',
              id: 'url',
            },
          ],
        },
        {
          type: 'category',
          label: '账户',
          link: {
            type: 'generated-index',
            title: 'Stately Studio 账户',
            description:
              '了解 Stately Studio 的计划以及如何管理您的账户。',
            slug: '/category/accounts',
            keywords: ['指南'],
          },
          items: [
            {
              type: 'doc',
              label: '注册',
              id: 'sign-up',
            },
            {
              type: 'doc',
              label: '升级',
              id: 'upgrade',
            },
          ],
        },
        {
          type: 'doc',
          label: '版本历史',
          id: 'versions',
        },
        {
          type: 'doc',
          label: '锁定机器',
          id: 'lock-machines',
        },
        'keyboard-shortcuts',
        'canvas-view-controls',
        'user-preferences',
        'studio-api',
      ],
    },
    {
      type: 'category',
      label: 'Actors',
      link: {
        type: 'generated-index',
        title: 'Actors',
        description:
          '了解如何在 XState 和 Stately Studio 中使用 actors 和 actor 模型。',
        slug: '/category/actors',
        keywords: ['指南'],
      },
      collapsed: false,
      collapsible: true,
      items: [
        'actors',
        'state-machine-actors',
        'promise-actors',
        'transition-actors',
        'callback-actors',
        'observable-actors',
        'invoke',
        'spawn',
        'system',
        'inspection',
      ],
    },
    {
      type: 'category',
      label: '状态机',
      link: {
        type: 'generated-index',
        title: '状态机',
        description:
          '了解如何在 XState 和 Stately Studio 中使用状态机。',
        slug: '/category/state-machines',
        keywords: ['指南'],
      },
      collapsed: false,
      collapsible: true,
      items: [
        'machines',
        'setup',
        'states',
        'context',
        'input',
        'output',
        'transitions',
        'eventless-transitions',
        'delayed-transitions',
        'actions',
        'guards',
        'initial-states',
        'finite-states',
        'parent-states',
        'parallel-states',
        'final-states',
        'history-states',
        'persistence',
        'tags',
        'event-emitter',
      ],
    },
    {
      type: 'category',
      label: '代理',
      link: {
        type: 'generated-index',
        title: '代理',
        description:
          '了解如何在 XState 和 Stately Studio 中使用 AI 代理。',
        slug: '/category/agents',
        keywords: ['代理'],
      },
      collapsed: true,
      collapsible: true,
      items: ['agents'],
    },
    {
      type: 'category',
      label: '指南',
      link: {
        type: 'generated-index',
        title: '指南',
        description:
          '这些指南涵盖了使用 XState 和 immer、测试策略以及未来将添加的其他指南的不同方面。 这些指南的目的是为用户提供深入的知识和实际示例，以有效地在项目中使用 XState。',
        slug: '/category/guides',
        keywords: ['指南'],
      },
      collapsed: true,
      collapsible: true,
      items: ['testing', 'immer'],
    },
    {
      type: 'category',
      label: '软件包',
      link: {
        type: 'generated-index',
        title: '软件包',
        description: '查找 XState 中的所有软件包。',
        slug: '/category/xstate-packages',
        keywords: ['指南'],
      },
      collapsed: false,
      collapsible: true,
      items: [
        'xstate-store',
        'xstate-react',
        'xstate-vue',
        'xstate-svelte',
        'xstate-graph',
        'xstate-test',
      ],
    },
    {
      type: 'category',
      label: '开发者工具',
      collapsed: true,
      collapsible: true,
      link: {
        type: 'generated-index',
        title: 'Stately 开发者工具',
        description:
          '查找所有可以与 XState 和 Stately Studio 的编辑器一起使用的开发者工具。',
        slug: '/category/developer-tools',
        keywords: ['指南'],
      },
      items: [
        'xstate-vscode-extension',
        'visualizer',
        'inspector',
        {
          type: 'doc',
          label: '其他工具',
          id: 'developer-tools',
        },
      ],
    },
    {
      type: 'doc',
      label: '术语表',
      id: 'glossary',
    },
  ],
};

module.exports = sidebars;