storybook amp

Сборник рассказов amp html ·

Аддон сборника рассказов для усилителя (ускоренные мобильные страницы). Позволяет отображать в ваших историях AMP HTML -компоненты, сгенерированные с помощью React.

Оглавление

• Функции
• Демо
• Начиная
  • Установка
  • Конфигурация
  • Использование
  • Примеры
• Дорожная карта
• Внося
• Лицензия
• Благодарности
• Ссылки

Функции

• Доставить в каждой истории выходной код (AMP готовый), полученный в результате SSR.
• Работает с AMP -сайтами, AMP Email и Amp Ads
• Реальная проверка усилителя в реальном времени.
• Добавляет панель Addon, чтобы также проверить историю (с помощью онлайн -валидатора AMP) и просмотреть выходной код.
• Компоненты стиля поддержки с использованием пользовательской функции рендеринга

Демо

• Сборник рассказов amp html demo

Начиная

Установка

npm install -D storybook-amp

Конфигурация

Далее, Update .storybook/main.js к следующему:

 // .storybook/main.js

module . exports = {
  stories : [
    // ...
  ] ,
  addons : [
    // Other Storybook addons

    'storybook-amp' , // ? The addon registered here
  ] ,
} ;

Использование

Чтобы установить пользовательские настройки, используйте параметр amp .

 // .storybook/preview.js

const scripts = '' ;
const styles = '' ;

export const parameters = {
  // Other defined parameters

  amp : {              // ? The addon parameters here
    isEnabled : true ,  // Enable the addon, false by default (boolean)
    scripts ,          // Global scripts to add, empty by default (string)
    styles ,           // Custom css styles, empty by default (string)
  } ,
} ;

Вы можете использовать параметр amp , чтобы переопределить настройки в каждой истории индивидуально:

 // Story example

export default {
  title : "Components/amp-youtube" ,
  parameters : {
    amp : {
      scripts : // ? Script needed by the story
        `<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>` ,
    } ,
  } ,
} ;

export const Story = ( args ) => (
  < amp-youtube
    width = "480"
    height = "270"
    layout = "responsive"
    data-videoid = 'lBTCB7yLs8Y'
  > </ amp-youtube >
)

Примеры

• Реагировать

Дорожная карта

• Сделайте его совместимым с хроматическим аддоном
• Сделайте его совместимым с аддоном доступности
• Настроить детали пользовательского интерфейса при использовании с Docs Addon
• Больше инструментов для AMP Ads и Emp Email
• Добавить больше примеров тестов
• Добавить тесты
• Сделать возможной интеграцию CI

Внося

Строительница AMP HTML Addon-это проект с открытым исходным кодом. Мы привержены полностью прозрачному процессу разработки и высоко ценим любые вклад. Независимо от того, помогаете ли вы исправить ошибки, предлагать новые функции, улучшать нашу документацию или распространять слово - мы хотели бы, чтобы вы как часть сообщества.

Пожалуйста, обратитесь к нашим руководящим принципам вклада и Кодексу поведения.

Лицензия

Аддон Amp html html сборника рассказов лицензирован по лицензии MIT - для получения подробной информации см. Файл лицензии.

Благодарности

Первоначально создан Onwidget и поддерживается сообществом участников.

Ссылки

• Усилитель проект
• Потрясающий усилитель