frontpage

Сайт сборника рассказов

Строительница - самый популярный исследователь компонентов пользовательского интерфейса! Это веб -сайт для https://storybook.js.org/.

Примечание : это не документы, они находятся здесь.

? Внося

Взносы приветствуются! Если это что -то маленькое, например, грамматика или пунктуация, откройте запрос на тягу. Если это большее изменение или новая функция, добавьте проблему для обсуждения.

Рабочий процесс

1. Идея функции или ошибка?
2. Сначала построить новый пользовательский интерфейс или настройка существующего пользовательского интерфейса в сборнике рассказов
3. Интегрируйте с Гэтсби
4. Убедитесь, что тесты проходят в Circle CI -сборниках/фронтальной странице
5. Убедитесь, что сайт работает и является QAED с помощью предварительных просмотров NetLify
6. Убедитесь, что визуальные ошибки в хроматических сборниках рассказов/Frontpage
7. Потянуть запрос

Запуск проекта локально

Инструкции по сборнику рассказов

Сборник рассказов для сборника рассказов содержит каждый компонент пользовательского интерфейса. Пользовательский интерфейс построен после разработки, управляемой компонентами, процесс, который строит пользовательские интерфейсы с «снизу вверх», начиная с компонентов и заканчивая экранами. Это означает, что участники должны составлять пользовательские интерфейсы в сборник рассказов перед интеграцией с приложением Gatsby.

1. Установка пряжи
2. Строительство пряжи
3. Справочник по питанию

Гэтсби инструкции

Gatsby используется для базовой маршрутизации и статической генерации сайтов.

1. yarn start запускать весь сайт

2. yarn start:skip-addons , чтобы пропустить строительство каталога аддона

3. yarn start:docs-only чтобы издеваться над домашней страницей и создать страницы документов

Содержание документов

Контент для раздела документации находится в docs/ Subercectory of the Storybook Monorepo: https://github.com/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/Leleases как файлы .md . Имя файла соответствует версии (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 к файлу из шага 1

Сайт заполняется каждые 24 часа, поэтому любые обновления будут отражены за это время.

Сообщения в блоге

Последнее сообщение в блоге получено от Ghost. Вам нужно будет добавить, чтобы это работало, требуется переменная среды:

GHOST_STORYBOOK_API_KEY

Как настроить на своей машине:

1. Создайте файл .env.development
2. Получите ключ здесь: https://storybookblog.ghost.io/ghost
3. Добавить GHOST_STORYBOOK_API_KEY=key к файлу из шага 1

Инструмент

Этот проект использует эти инструменты, чтобы упростить нашу работу.

? Развертывается с помощью NetLify

Основные и филиалы автоматически развернуты путем netLify каждый коммит.

? Визуальное тестирование хроматическим

Все истории в сборнике рассказов автоматически протестированы на рабочем столе и мобильных устройствах каждый коммит. Убедитесь, что все базовые линии принимаются перед слиянием.

? Непрерывная интеграция по кругу CI

Каждый строительство тестового набора работает. Убедитесь, что нет ошибок перед слиянием.