Skip to content
This repository has been archived by the owner on Oct 26, 2023. It is now read-only.
/ ampify Public archive
forked from rkazakov/ampify

Convert your HTML to Google AMP (Accelerated Mobile Pages)

License

Notifications You must be signed in to change notification settings

jusbrasil/ampify

 
 

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'});
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

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%