<amp-video src="video.mp4" width="300" height="200"></amp-video>
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
<div amp-fx="fade-in">I will fade in</div>
<script async custom-element="amp-fx-collection" src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js"></script>
<html> <head> <title>My Page</title> <link rel="canonical" href="/mypage.html" /> </head> <body> <h1>Hello World!</h1> </body>
<!doctype html> <html > <head> <meta charset="utf-8"> <title>My Page</title> <link rel="canonical" href="/mypage.html" /> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>...</noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body> <h1>Hello World!</h1> </body> </html>
export const config = {amp: true}; export default () => ( <div amp-fx='fade-in'>I will fade-in</div> );
import Head from 'next/head' export const config = {amp: true}; export default () => ( <> <Head> <script async key="amp-fx-collection" custom-element="amp-fx-collection" src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js" /> </Head> <div amp-fx='fade-in'>I will fade-in</div> </> );
README.md => HTML => AMP Optimizer => valid AMP
const AmpOptimizer = require('@ampproject/toolbox-optimizer'); const md = require('markdown-it')({ // don't sanitize html if you want to support AMP components in Markdown html: true, }); // enable markdown mode const ampOptimizer = AmpOptimizer.create({ markdown: true, }); const markdown = ` # Markdown Here is an image declared in Markdown syntax: . You can directly declare AMP components: <amp-twitter width="375" height="472" layout="responsive" data-tweetid="1182321926473162752"> </amp-twitter> Any missing extensions will be automatically imported. `; const html = md.render(markdown); // valid AMP! const amphtml = await ampOptimizer.transformHtml(html, { canonical: filePath, });
