# Hello AMPHTML World <amp-carousel lightbox amp-fx="fade-in" layout='responsive' width='600' height='400' type='slides'> <amp-img src='https://picsum.photos/id/1015/600/400' layout='fill'></amp-img> <amp-img src='https://picsum.photos/id/1016/600/400' layout='fill'></amp-img> <amp-img src='https://picsum.photos/id/1018/600/400' layout='fill'></amp-img> </amp-carousel>
Checkout this video: {% video "my-video.mp4" %} Or this tweet (the number specifies the embed height): {% twitter "1182321926473162752" 472 %} Here is a Youtube video: {% youtube "v0BVLgEEuMY" %} And of course Instagram: {% instagram "BMQ8i4lBTlb" %}
$ mkdir eleventy-amp-demo $ cd eleventy-amp-demo $ npm init --yes $ npm install @ampproject/eleventy-plugin-amp --save-dev
const ampPlugin = require('@ampproject/eleventy-plugin-amp'); module.exports = function(eleventyConfig) { eleventyConfig.addPlugin(ampPlugin); };
$ echo '# Hello World  {% twitter "1182321926473162752" 472 %}' > index.md
$ npm install -g @11ty/eleventy $ eleventy --serve
eleventyConfig.addPlugin(pluginAmp, { ampCache: false, downloadAmpRuntime: true, ampRuntimeHost: process.env.ENV === 'prod' ? 'https://your-domain.com' : 'http://localhost:8080', });
"scripts": { "build": "ENV=prod eleventy", "watch": "eleventy --watch", "serve": "eleventy --serve" }
eleventyConfig.addPlugin(pluginAmp, { ampCache: false, downloadAmpRuntime: true, ampRuntimeHost: process.env.ENV === 'prod' ? 'https://your-domain.com' : 'http://localhost:8080', experimentEsm: true, experimentImg: true, validation: false, imageOptimization: { urlPath: '/img/', }, });
