Skip to content

Convert your HTML to Google AMP (Accelerated Mobile Pages)

License

Notifications You must be signed in to change notification settings

rkazakov/ampify

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ampify

NPM Version Downloads Stats

Build Status tested with jest Known Vulnerabilities Greenkeeper badge

Convert plain HTML to Google AMP (Accelerated Mobile Pages)

Installation

npm install ampify

Usage

const ampify = require('ampify');
const html = '<YOUR_HTML_CONTENT>';
const amp = ampify(html, {
  cwd: 'amp',
  canonicalURL: 'https://<your-canoncial-url>',
});
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

canonicalURL

  • Type: String
  • Default: ''

Cannonical URL should be a full valid URL. Please see Make your pages discoverable.

Example

Input

<html>
  <head>
    <link rel="stylesheet" href="styles.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', async (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 = await 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 = async (html) => {
      const amp = await 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