代码片段贡献
添加或更新文档中的代码片段。此页面概述了代码片段的结构。
已记录的框架
Storybook 为各种框架维护代码片段。我们努力使其随着框架 API 的发展而保持最新。但跟踪每个框架中的每个 API 更改很棘手。
我们欢迎社区为代码片段做出贡献。这是一个我们拥有代码片段的框架矩阵。帮助我们为您最喜欢的框架添加代码片段。
| React | Vue 3 | Angular | Web Components | Svelte | Solid | Ember | HTML | Preact |
|---|---|---|---|---|---|---|---|---|
| ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ |
设置
假设您已经按照本地环境指南进行操作，您需要做的第一件事是在您的本地 Storybook monorepo 上创建一个分支，运行以下命令
git checkout -b code-snippets-for-framework在添加代码片段之前，使用您选择的编辑器打开docs文件夹。熟悉文档，包括代码片段的组织方式及其内容。
然后在 Storybook monorepo 的根文件夹中，运行以下命令
yarn task选择选项同步文档 (sync-docs)并键入您的frontpage项目文件夹的路径。现在，monorepo docs文件夹中的每个文件更改都将反映在 frontpage 存储库的src/content/docs中。
添加您的第一个代码片段
现在您已经熟悉了文档的结构，是时候添加代码片段了。首先，转到docs/snippets/文件夹，并为您的目标框架创建一个新目录（例如，ember）。
浏览文档并查找您愿意贡献的代码片段。例如，在设置页面上，您应该会看到类似以下内容
// /docs/get-started/setup.md
{/* prettier-ignore-start */}
<CodeSnippets
paths={[
'react/your-component.js.mdx',
'react/your-component.ts.mdx',
'angular/your-component.ts.mdx',
'vue/your-component.3.js.mdx',
'svelte/your-component.js.mdx',
'web-components/your-component.js.mdx',
'solid/your-component.js.mdx',
'solid/your-component.ts.mdx',
]}
/>
{/* prettier-ignore-end */}创建文件ember/your-component.js.mdx，类似于其他框架，并引用它。
// /docs/get-started/setup.md
{/* prettier-ignore-start */}
<CodeSnippets
paths={[
'react/your-component.js.mdx',
'react/your-component.ts.mdx',
'angular/your-component.ts.mdx',
'vue/your-component.3.js.mdx',
'svelte/your-component.js.mdx',
'web-components/your-component.js.mdx',
'solid/your-component.js.mdx',
'solid/your-component.ts.mdx',
'ember/your-component.js.mdx', //👈🏼 The code snippet you created.
]}
/>
{/* prettier-ignore-end */}代码片段分为各种文件扩展名，如果您要贡献 TypeScript 文件，请使用.ts.mdx，或者如果您要添加 JavaScript 文件，请使用.js.mdx。
浏览其余文档并重复此过程。
预览您的工作
在提交您的贡献之前，我们建议您根据 Storybook 网站检查您的工作。这样做可以防止文档出现最后一刻的问题，并且也是维护人员在您提交拉取请求后更快合并的绝佳方式。但是，如果未能做到这一点，将导致维护人员之一通知您您的贡献存在问题。
首先，为frontpage 存储库创建分支，并将其克隆到本地。
git clone https://github.com/your-username/frontpage.git导航到frontpage目录，并使用以下命令安装所需的依赖项
yarn接下来，确保您已从 Storybook monorepo 运行同步文档 (sync-docs)任务。然后，执行以下命令以启动 Storybook 网站。
yarn start:docs-only在启动过程中，如果文档存在问题，该过程将停止，您将收到通知。
打开浏览器窗口访问https://127.0.0.1:8000，点击“文档”链接，然后从下拉菜单中选择您的框架。
浏览文档并检查您的工作。
提交您的贡献
最后，提交、推送并在 Storybook 单仓中打开一个拉取请求。添加您已完成工作的清晰描述，维护者之一将指导您完成合并过程。
了解有关为 Storybook 贡献的更多信息