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的連續集成

每個構建測試套件都運行。合併之前，請確保沒有錯誤。