Skip to content

Instantly share code, notes, and snippets.

@hazmihaz

hazmihaz/ampify.js

Created February 23, 2021 02:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hazmihaz/de95555a49079ed481f64158c38cdf0c to your computer and use it in GitHub Desktop.
Save hazmihaz/de95555a49079ed481f64158c38cdf0c to your computer and use it in GitHub Desktop.
Download ZIP
Nuxt plugin to make AMP html
Raw
ampify.js
// Retrieved from https://mazipan.space/generate-amp-pages-in-nuxtjs at 23 Feb 2021
const ampScript = '<script async src="https://cdn.ampproject.org/v0.js"></script>';
const ampBoilerplate =
'<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>';
module.exports = (html) => {
// Add ⚡ to html tag
html = html.replace(/<html/gi, '<html ⚡');
// Combine css into single tag
let styleConcat = '';
html = html.replace(/<style[^>]*data-vue-ssr[^>]*>(.*?)?<\/style>/gi, (match, sub) => {
styleConcat += sub;
return '';
});
html = html.replace('</head>', `<style amp-custom>${styleConcat}</style></head>`);
// Remove preload and prefetch tags
html = html.replace(/<link[^>]*rel="(?:preload|prefetch)?"[^>]*>/gi, '');
// Remove amphtml tag
html = html.replace(/<link[^>]*rel="(?:amphtml)?"[^>]*>/gi, '');
// Remove data attributes from tags
html = html.replace(/\s*data-(?:[^=>]*="[^"]*"|[^=>\s]*)/gi, '');
// Remove JS script tags except for ld+json
html = html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, (match) => {
return /application\/ld\+json/gi.test(match) ? match : '';
});
// Replace img tags with amp-img
html = html.replace(/<img([^>]*)>/gi, (match, sub) => {
return `<amp-img ${sub} layout=intrinsic></amp-img>`;
});
// Add AMP script before </head>
html = html.replace('</head>', ampScript + ampBoilerplate + '</head>');
return html;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment