Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Convert your HTML to Google AMP (Accelerated Mobile Pages)

License

Notifications You must be signed in to change notification settings

jorigamy/ampify

Repository files navigation

ampify

NPM Version Downloads Stats Known Vulnerabilities

Convert plain HTML to Google AMP (Accelerated Mobile Pages)

Installation

npm install ampify --save

Usage

const ampify = require('ampify');
const html = '<YOUR_HTML_CONTENT>';
const amp = ampify(html, {cwd: 'amp'});
console.log(amp); // Content of AMP HTML

Options

cwd

Assets (images/styles) file path

  • Type: String
  • Default: ''

round

Enable images dimensions rounding

  • Type: String
  • Default: true

Example

Input

<html>
 <head>
 <link rel="stylesheet" href="style.css">
 </head>
 <img src="image.png">
</html>
image.png

image.png

style.css
body {
 background-color: #fff;
}

Output

<html amp="">
 <head>
 <style amp-custom="">body{background-color:#fff}</style>
 </head>
 <amp-img src="image.png" width="600" height="400"></amp-img>
</html>

More examples

See /examples folder for full source code.

Using in Express App

const ampify = require('ampify');
const express = require('express');
const app = express();
app.get('/article', (req, res) => {
 const html = `
 <html>
 <head>
 <title>AMP page</title>
 </head>
 <body>
 <div>
 <p>This is an AMP article</p>
 </div>
 </body>
 </html>
 `;
 const amp = ampify(html, {cwd: 'amp'});
 res.send(amp); // serving AMP content
});
app.listen(3000, () => {
 console.log('Listening on port 3000!');
});

Using as Express middleware

const ampify = require('ampify');
const express = require('express');
const app = express();
app.use((req, res, next) => {
 if (req.url.startsWith('/amp')) {
 const send = res.send;
 res.send = function (html) {
 const amp = ampify(html, {cwd: 'amp'});
 send.call(this, amp);
 };
 }
 next();
});
app.get('/amp/article', (req, res) => {
 const html = `
 <html>
 <head>
 <title>AMP page</title>
 </head>
 <body>
 <div>
 <p>This is AMP article</p>
 </div>
 </body>
 </html>
 `;
 res.send(html);
});
app.get('/article', (req, res) => {
 const html = `
 <html>
 <head>
 <title>HMTL page</title>
 </head>
 <body>
 <div>
 <p>This is HTML article</p>
 </div>
 </body>
 </html>
 `;
 res.send(html);
});
app.listen(3000, () => {
 console.log('Listening on port 3000!');
});

Release History

HISTORY

Licence

MIT (c) Ruslan Kazakov and contributors

About

Convert your HTML to Google AMP (Accelerated Mobile Pages)

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 99.8%
  • CSS 0.2%

AltStyle によって変換されたページ (->オリジナル) /