Storybook AMP Html ·

用於 AMP（加速行動網頁）的 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 專案
• 超讚的 Amp