{"id":13696600,"url":"https://github.com/onwidget/storybook-amp","last_synced_at":"2025-04-10T01:04:20.373Z","repository":{"id":53536078,"uuid":"203263742","full_name":"onwidget/storybook-amp","owner":"onwidget","description":"⚡ Addon to render and validate AMP html in Storybook","archived":false,"fork":false,"pushed_at":"2023-06-19T02:33:13.000Z","size":2585,"stargazers_count":36,"open_issues_count":1,"forks_count":10,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-02T22:53:49.296Z","etag":null,"topics":["addon","amp","amp-html","components","documentation","javascript","react","storybook","storybook-addon"],"latest_commit_sha":null,"homepage":"https://storybook.js.org/addons/storybook-amp","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/onwidget.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2019-08-19T23:17:58.000Z","updated_at":"2024-03-30T15:06:35.000Z","dependencies_parsed_at":"2023-07-17T17:42:33.662Z","dependency_job_id":null,"html_url":"https://github.com/onwidget/storybook-amp","commit_stats":{"total_commits":85,"total_committers":5,"mean_commits":17.0,"dds":0.6470588235294117,"last_synced_commit":"a34b6c0e39c22d636b7f37528303cef1f016e486"},"previous_names":["prototypearea/storybook-amp"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onwidget%2Fstorybook-amp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onwidget%2Fstorybook-amp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onwidget%2Fstorybook-amp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onwidget%2Fstorybook-amp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/onwidget","download_url":"https://codeload.github.com/onwidget/storybook-amp/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247850661,"owners_count":21006626,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["addon","amp","amp-html","components","documentation","javascript","react","storybook","storybook-addon"],"created_at":"2024-08-02T18:00:43.267Z","updated_at":"2025-04-10T01:04:20.358Z","avatar_url":"https://github.com/onwidget.png","language":"JavaScript","funding_links":[],"categories":["Integrations"],"sub_categories":["React"],"readme":"# Storybook AMP Html \u0026middot; [![npm package](https://img.shields.io/npm/v/storybook-amp?color=green\u0026label=npm\u0026style=flat-square)](https://www.npmjs.com/package/storybook-amp)\n\nStorybook addon for [AMP (Accelerated Mobile Pages)](https://amp.dev/). Allows to display in your stories *AMP Html* components generated with React.\n\n![Screenshot](screenshot.png)\n\n\u003cdetails open=\"open\"\u003e\n\u003csummary\u003eTable of Contents\u003c/summary\u003e\n\n- [Features](#features)\n- [Demo](#demo)\n- [Getting Started](#getting-started)\n  - [Installation](#installation)\n  - [Configuration](#configuration)\n  - [Usage](#usage)\n  - [Examples](#examples)\n- [Roadmap](#roadmap)\n- [Contributing](#contributing)\n- [License](#license)\n- [Acknowledgements](#acknowledgements)\n- [Links](#links)\n\n\u003c/details\u003e\n\n\u003cbr /\u003e\n\n## Features\n\n- Deliver in each story the output code (AMP ready) resulting from the SSR.\n- Works with [AMP websites](https://amp.dev/about/websites/), [AMP email](https://amp.dev/about/email/) and [AMP ads](https://amp.dev/about/ads/)\n- Realtime AMP validation.\n- Adds addon panel to also validate the story (using online [AMP Validator](https://validator.ampproject.org/)) and view the output code.\n- Support Styled Components using a custom render function\n\n## Demo\n\n- [Storybook AMP Html Demo](https://demo.onwidget.com/storybook-amp/)\n\n\u003cbr /\u003e\n\n## Getting Started\n\n### Installation\n\n```sh\nnpm install -D storybook-amp\n```\n\n\n### Configuration\n\nNext, update `.storybook/main.js` to the following:\n\n```js\n// .storybook/main.js\n\nmodule.exports = {\n  stories: [\n    // ...\n  ],\n  addons: [\n    // Other Storybook addons\n\n    'storybook-amp', // 👈 The addon registered here\n  ],\n};\n```\n\n\n### Usage\n\nTo set custom settings, use the  `amp` parameter. \n\n```js\n// .storybook/preview.js\n\nconst scripts = '';\nconst styles = '';\n\nexport const parameters = {\n  // Other defined parameters\n\n  amp: {              // 👈 The addon parameters here\n    isEnabled: true,  // Enable the addon, false by default (boolean)\n    scripts,          // Global scripts to add, empty by default (string)\n    styles,           // Custom css styles, empty by default (string)\n  },\n};\n```\n\nYou can use the `amp` parameter to override settings on each story individually:\n\n```js\n// Story example\n\nexport default {\n  title: \"Components/amp-youtube\",\n  parameters: {\n    amp: {\n      scripts: // 👈 Script needed by the story\n        `\u003cscript async custom-element=\"amp-youtube\" src=\"https://cdn.ampproject.org/v0/amp-youtube-0.1.js\"\u003e\u003c/script\u003e`,\n    },\n  },\n};\n\nexport const Story = (args) =\u003e (\n  \u003camp-youtube\n    width=\"480\"\n    height=\"270\"\n    layout=\"responsive\"\n    data-videoid='lBTCB7yLs8Y'\n  \u003e\u003c/amp-youtube\u003e\n)\n```\n\n### Examples\n\n- [React](https://github.com/onwidget/storybook-amp/tree/main/example)\n  \n\u003cbr /\u003e\n\n## Roadmap\n\n- Make it compatible with the *Chromatic addon*\n- Make it compatible with the *Accessibility addon*\n- Adjust UI details when used with *Docs addon*\n- More tools for *AMP Ads* and *AMP Email*\n- Add more example tests\n- Add tests\n- Make CI integration possible\n\n\u003cbr /\u003e\n\n## Contributing\n\nStorybook AMP Html addon is an open-source project. We are committed to a fully transparent development process and appreciate highly any contributions. Whether you are helping us fix bugs, proposing new features, improving our documentation or spreading the word - we would love to have you as part of the community.\n\nPlease refer to our [Contribution Guidelines](https://github.com/onwidget/storybook-amp/blob/main/CONTRIBUTING.md) and [Code of Conduct](https://github.com/onwidget/storybook-amp/blob/main/CODE_OF_CONDUCT.md).\n\n## License\n\nThe Storybook AMP Html addon is licensed under the MIT license — see the [LICENSE](https://github.com/onwidget/storybook-amp/blob/main/LICENSE) file for details.\n\n## Acknowledgements\n\nInitially created by [onWidget](https://onwidget.com) and maintained by a community of [contributors](https://github.com/onwidget/storybook-amp/graphs/contributors).\n\n## Links\n\n- [AMP Project](https://amp.dev/)\n- [Awesome Amp](https://github.com/onwidget/awesome-amp)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonwidget%2Fstorybook-amp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fonwidget%2Fstorybook-amp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonwidget%2Fstorybook-amp/lists"}