frontpage

故事书网站

Storybook是最受欢迎的UI组件资源书！这是https://storybook.js.org/的网站。

注意：这不是文档，它们位于这里。

？贡献

欢迎捐款！如果它很小，例如语法或标点符号，请打开拉动请求。如果是更大的更改或新功能，请添加讨论问题。

工作流程

1. 功能创意还是错误文件？
2. 首先在Storybook中构建新的UI或调整现有的UI
3. 与盖茨比集成
4. 确保测试通过圈子CI故事书/前页面
5. 确保网站有效，并通过NetLify预览进行QA
6. 确保在色本/前页面上没有视觉错误
7. 拉请求

本地运行该项目

故事书说明

故事书的故事书包含每个UI组件。 UI是按照组件驱动的开发构建的，该过程从“自下而上”的组件开始并以屏幕结尾构建UI。这意味着在与盖茨比应用程序集成之前，贡献者应在故事书中撰写UIS。

1. 纱线安装
2. 纱线构建
3. 纱线故事书

盖茨比说明

Gatsby用于基本路由和静态站点的生成。

1. yarn start运行整个网站

2. yarn start:skip-addons跳过构建插件目录

3. yarn start:docs-only嘲笑主页并构建文档页面

文档内容

文档部分的内容在Storybook Monorepo的docs/子目录中：https：//github.com/storybookjs/storybookjs/storybook/tree/next/docs。

要在编辑这些文件时运行此应用程序，请查看此存储库和MonorePo，然后：

在storybook Monorepo中：

1. 运行yarn task命令，然后选择Synchronize documentation (sync-docs)选项。

2. 提供frontpage项目的路径。

这样，文件夹storybook/docs和frontpage/src/content/docs将被同步，以确保故事书网站文档中对故事书Monorepo中对文档进行的任何更改。

在前frontpage存储库中：

要运行网站文档，请使用以下命令：

 yarn start:docs-only

该项目将在http://localhost:8000

发行说明

发行说明存储在src/content/释放目录中，作为.md文件。该文件的名称与版本的版本（Major.minor）相对应，并将用于填充从版本页面中的特定版本的链接。

在版本的.md文件中，前磨影用于创建页面标题，而其余内容则使用gatsby-transformer-remark解析，并使用src/styles/formatting.js中的选择器进行样式。

发布新版本

请参阅详细的文档

环境变量

在开发和本地生产构建中，可以使用此处解释的.env文件配置环境变量。当该变量需要在客户端代码中可用时，变量将带有GATSBY_的前缀。

在部署预览和生产部署中，这些变量是通过Netlify的构建变量设置的。

搜索

文档中的搜索由DocSearch提供支持。为了使其工作，需要一个环境变量：

GATSBY_ALGOLIA_API_KEY

如何在计算机上设置：

1. 在本地创建.ENV。开发文件
2. 在此处获取钥匙：https：//app.netlify.com/sites/storybook-frontpage/settings/deploys#environment
3. 添加GATSBY_ALGOLIA_API_KEY=key

该站点每24小时爬行一次，因此任何更新都将在此时间内反映出来。

博客文章

最新的博客文章是从Ghost获取的。您需要添加以使其工作，需要一个环境变量：

GHOST_STORYBOOK_API_KEY

如何在计算机上设置：

1. 在本地创建.ENV。开发文件
2. 在此处获取钥匙：https：//storybookblog.ghost.io/ghost
3. 添加GHOST_STORYBOOK_API_KEY=key到步骤1的文件

工具

该项目使用这些工具使我们的工作更容易。

？通过Netlify部署

主和分支通过Netlify每个提交自动部署。

？彩色测试的视觉测试

故事书中的所有故事均在桌面上自动进行视觉测试，每个提交的移动都在移动上进行。确保所有基准在合并之前被接受。

？ CI的连续集成

每个构建测试套件都运行。合并之前，请确保没有错误。