frontpage

ストーリーブックのウェブサイト

ストーリーブックは、最も人気のあるUIコンポーネントエクスプローラーです！これは、https：//storybook.js.org/のウェブサイトです。

注：これはドキュメントではなく、これらはここにあります。

？貢献

貢献を歓迎します！文法や句読点のような小さなものがある場合は、プルリクエストを開きます。それがより大きな変更または新機能の場合は、議論のために問題を追加します。

ワークフロー

1. 機能のアイデアやbugfix？
2. 新しいUIを構築するか、既存のUIをストーリーブックで最初に調整します
3. ギャツビーと統合します
4. サークルCIストーリーブック/フロントページでテストが渡されるようにします
5. サイトの動作を確認し、Netlifyプレビューを介してQAedを使用します
6. Chromatic Storybooks/FrontPageに視覚的なバグがないことを確認してください
7. リクエストをプルします

プロジェクトをローカルで実行します

ストーリーブックの指示

ストーリーブックのストーリーブックには、すべてのUIコンポーネントが含まれています。 UIは、コンポーネント駆動型開発に従って構築されており、コンポーネントから始まり、画面で終わる「ボトムアップ」からUIを構築するプロセスです。つまり、貢献者は、Gatsbyアプリと統合する前に、 StorybookでUISを作成する必要があります。

1. 糸インストール
2. 糸ビルド
3. Yarn Run Storybook

ギャツビーの指示

ギャツビーは、基本的なルーティングと静的サイト生成に使用されます。

1. yarn start

2. yarn start:skip-addons

3. yarn start:docs-only

ドキュメントコンテンツ

ドキュメントセクションのコンテンツは、ストーリーブックのdocs/サブディレクトリにあります。

これらのファイルの編集中にこのアプリを実行するには、このリポジトリとモノレポの両方をチェックアウトします。

storybookの内部モノレポ：

1. yarn taskコマンドを実行してから、 Synchronize documentation (sync-docs)オプションを選択します。

2. frontpageプロジェクトへのパスを提供します。

これにより、Folders storybook/docsとfrontpage/src/content/docsが同期され、Storybook Monorepoのドキュメントに加えられた変更がストーリーブックWebサイトドキュメントに反映されるようにします。

frontpageリポジトリ内：

Webサイトのドキュメントを実行するには、次のコマンドを使用します。

 yarn start:docs-only

このプロジェクトはhttp://localhost:8000ブラウザで視覚化されます

ノートをリリースします

リリースノートは、 .mdファイルとしてSRC/Content/Reeresesディレクトリに保存されます。ファイルの名前は、リリースのバージョン（Major.Minor）に対応し、リリースページから特定のリリースへのリンクを入力するために使用されます。

リリースの.mdファイル内では、FrontMatterがページタイトルを作成するために使用されますが、残りのコンテンツはgatsby-transformer-remarkを使用して解析され、 src/styles/formatting.jsのセレクターとスタイルが付けられています。

新しいバージョンの公開

詳細なドキュメントを参照してください

環境変数

開発およびローカルの生産ビルドでは、ここで説明するように、 .envファイルで環境変数を構成できます。変数は、その変数がクライアント側のコードで利用可能にする必要がある場合、 GATSBY_の前に付けられます。

展開プレビューと生産展開では、これらの変数はNetlifyのビルド変数で設定されています。

検索

ドキュメント内の検索は、docsearchを搭載しています。これが機能するためには、環境変数が必要です。

GATSBY_ALGOLIA_API_KEY

マシンでセットアップする方法：

1. .env.developmentファイルをローカルに作成します
2. ここでキーを入手してください：https：//app.netlify.com/sites/storybook-frontpage/settings/deploys#environment
3. GATSBY_ALGOLIA_API_KEY=keyを追加します

このサイトは24時間ごとにrawいされるため、更新はその時間に反映されます。

ブログ投稿

最新のブログ投稿はGhostからフェッチされています。これが機能するには、環境変数が必要です。

GHOST_STORYBOOK_API_KEY

マシンでセットアップする方法：

1. .env.developmentファイルをローカルに作成します
2. ここでキーを入手してください：https：//storybookblog.ghost.io/ghost
3. GHOST_STORYBOOK_API_KEY=keyを追加します

ツーリング

このプロジェクトは、これらのツールを使用して仕事を容易にします。

？ netlifyによる展開

メインとブランチは、すべてのコミットをNetlifyによって自動的に展開されます。

？色による視覚テスト

ストーリーブック内のすべてのストーリーは、デスクトップで自動的に視覚的にテストされ、各コミットでモバイルでテストされています。マージする前にすべてのベースラインが受け入れられていることを確認してください。

？サークルCIによる連続統合

すべてのビルドテストスイートが実行されます。マージする前にエラーがないことを確認してください。