Storybook AMP Html ·

用於 AMP (Accelerated Mobile Pages) 的 Storybook 擴充功能。允許在你的 stories 中顯示用 React 生成的 AMP Html 元件。

• 功能特色
• 演示
• 開始使用
  • 安裝
  • 設定
  • 用法
  • 範例
• 路線圖
• 貢獻
• 許可證
• 致謝
• 連結

功能特色

• 在每個 story 中提供從 SSR 產生的輸出程式碼（已準備好用於 AMP）。
• 適用於 AMP 網站、AMP 電子郵件 和 AMP 廣告
• 即時 AMP 驗證。
• 新增擴充功能面板，以驗證 story（使用線上 AMP 驗證器）並檢視輸出程式碼。
• 使用自訂渲染函式支援 Styled Components

演示

• Storybook AMP Html 演示

開始使用

安裝

npm install -D storybook-amp

設定

接下來，將 .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 的設定

// 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>
)

範例

• React

路線圖

• 使其與 Chromatic 擴充功能 相容
• 使其與 Accessibility 擴充功能 相容
• 當與 Docs 擴充功能 一起使用時調整 UI 詳細資訊
• 更多用於 AMP 廣告 和 AMP 電子郵件 的工具
• 新增更多範例測試
• 新增測試
• 使 CI 整合成為可能

貢獻

Storybook AMP Html 擴充功能是一個開源專案。我們致力於完全透明的開發流程，並高度感謝任何貢獻。無論你是協助我們修復錯誤、提出新功能、改善我們的文件或宣傳此專案 - 我們都樂意邀請你成為社群的一份子。

請參閱我們的 貢獻指南 和 行為準則。

許可證

Storybook AMP Html 擴充功能採用 MIT 許可證授權 — 詳細資訊請參閱 LICENSE 檔案。

致謝

最初由 onWidget 建立，並由 貢獻者 社群維護。

連結

• AMP 專案
• Awesome Amp