/awesome-amp

๐Ÿ˜Ž Awesome things related to AMP HTML

Primary LanguageHTMLCreative Commons Zero v1.0 UniversalCC0-1.0

Awesome AMP HTML

Awesome AMP HTML ยท Awesome Lint License: CC0-1.0

A curated list of AMP (Accelerated Mobile Pages) repos, examples, starters, tutorials, components, modules, videos, and anything else useful.

Inspired by the awesome-* trend on GitHub.

AMP is a web component framework to easily create user-first websites, stories, ads and emails.

Contents

About

AMP is a free, open-source web component framework that powers all kinds of experiences on the web. Its mission is to improve the web for everyone โ€“ publishers, platforms, advertisers, creators, and of course, users. The AMP Project enables the creation of user-first websites, immersive tappable stories, lightning-fast ads, and dynamic email.

Getting Started

  • Official Documentation:
    • AMP Websites - Web pages that are compelling, smooth, and load near instantaneously.
    • Web Stories - Use AMP to create visual stories on the web.
    • AMP Ads - Use AMP to build and serve lightning fast, safe ads to pages and stories.
    • AMP Email - Use AMP to send interactive, dynamic emails.
    • Tools - Tools for creation, design and development of AMP html projects.
  • Official Repository - The AMP web component framework.
  • The AMP Channel - Official YouTube channel of the AMP project.
  • Examples - AMP examples.

Development and Optimization

  • AMP Validator - Web interface for validate AMP html.
  • Experiment Configurator - Beta-test new features of AMP before they're available for everyone.
  • AMP Playground - Start prototyping in an interactive online editor.
  • AMP Toolbox - A collection of AMP tools making it easier to publish and host AMP pages.
  • AMP Page Experience Guide - Analyze and learn how to optimize your AMP pages for Google's page experience ranking signal.
  • VS Code Extension - Makes authoring AMP easy by validating for errors/warnings as you type within VS Code.
  • AMP Prototyper - A prototyping tool that automatically converts a HTML page to AMP for demonstrating performance gains with AMP.

Testing

Integrations

Wordpress

  • AMP for WP - Success with WordPress, powered by AMP with the Official AMP plugin.
    • AMP Plugin - The Official AMP plugin for Wordpress.
    • Ecosystem Plugins - Plugins compatibles with the Official AMP plugin for Wordpress.
    • Ecosystem Themes - Themes compatibles with the Official AMP plugin for Wordpress.
  • AMP for WP Plugin - AMP for WP automatically adds Accelerated Mobile Pages (Google AMP Project) functionality to your WordPress site.

Magento

React

  • Nextjs AMP Support - With Next.js you can turn any React page into an AMP page, with minimal config, and without leaving React.
  • react-amphtml - Use amphtml components inside your React apps easily.
  • Storybook:
    • Storybook AMP addon - Storybook addon for AMP (Accelerated Mobile Pages). Allows to display in your stories AMP Html components generated with React.
    • @ampproject/storybook-addon - Storybook addon for building and testing AMP components.

Templates

  • AMP Project Templates - Get started quickly with a ready-made design. Templates designed to work with all devices: mobile, tablet and desktop.
  • amptemplates.io - A collection of responsive, blazing fast AMP templates from all over the web.

Community