Storybook AMP Html ·

用于 AMP（加速移动页面） 的 Storybook 附加组件。允许在您的故事中显示使用 React 生成的 AMP Html 组件。

• 特性
• 演示
• 入门
  • 安装
  • 配置
  • 使用
  • 示例
• 路线图
• 贡献
• 许可证
• 鸣谢
• 链接

特性

• 在每个故事中提供由 SSR 生成的输出代码（AMP 准备就绪）。
• 适用于 AMP 网站、AMP 邮件 和 AMP 广告
• 实时 AMP 验证。
• 添加附加组件面板以验证故事（使用在线 AMP 验证器）并查看输出代码。
• 使用自定义渲染函数支持样式化组件

演示

• 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 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 附加组件 兼容
• 使其与 无障碍性附加组件 兼容
• 在与 文档附加组件 一起使用时调整 UI 细节
• 更多用于 AMP 广告 和 AMP 邮件 的工具
• 添加更多示例测试
• 添加测试
• 使 CI 集成成为可能

贡献

Storybook AMP Html 附加组件是一个开源项目。我们致力于完全透明的开发流程，并高度赞赏任何贡献。无论您是帮助我们修复错误、提出新功能、改进我们的文档还是传播信息 - 我们都希望您成为社区的一员。

请参阅我们的 贡献指南 和 行为准则.

许可证

Storybook AMP Html 附加组件在 MIT 许可证下授权 - 有关详细信息，请参阅 LICENSE 文件。

鸣谢

最初由 onWidget 创建，并由 贡献者 社区维护。

链接

• AMP 项目
• Awesome Amp