Miss any of our Open RFC calls?Watch the recordings here! »

ampify

0.5.0 • Public • Published

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 --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="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

Install

npm i ampify

DownloadsWeekly Downloads

162

Version

0.5.0

License

MIT

Unpacked Size

14.2 kB

Total Files

7

Last publish

Collaborators

  • avatar