amps-in-the-trunk

A module to transform HTML directly to Google AMP HTML

amps-in-the-trunk turns HTML into AM HTML: changing <img> into <amp-img>, including:

• Adding missing height / width stats
• Performing server-side syntax highlighting for <pre><code> blocks.
• Stripping inline syles

It also comes with express middleware so you can res.renderAMP(). Woo!

How to use with express.js (and how to do the bits this module doesn't)

The biggest challenges for AMP are:

• No script tags (except the AMP script tag)
• CSS needs to be included in the HTML
• No inline style attributes (most web developers don't use these, but some libraries eg for markdown generation output them)
• Images always need height and width

Most apps use a templating engine to generate their HTML. So as a developer:

• Use a different layout that:
  • doesn't have all the usual analytics <script> tags
  • inlines all stylesheets
• Take the HTML generated by your templating engine and use amps-in-the-trunk to turn HTML into AMP HTML.

So you're using express, this looks like

• Use layout= to specify the AMP layout rather than your normal one
• Use res.renderAMP(view, local) to render HTML and convert it to AMP:

// Load the module and pass in any overrides
// imageOverrides optional Object - see below
// enableCodeHighlighting optional Boolean - see below
// languageSubset - optional Array - for highlightjs. See http://highlightjs.readthedocs.io/en/latest/api.html#highlightauto-value-languagesubset
var ampsInTheTrunk = require('amps-in-the-trunk')(imageOverrides, enableCodeHighlighting, languageSubset)

// Enable the renderAMP Express middleware
app.use(ampsInTheTrunk.renderAMP);

// Handle a route by respondingwith an AMP page
router.get('/blog', function(req, res){
	res.renderAMP('blog-index', {
		'title': 'My Blog',
		inlineStyles,
		styles: [ 'style', 'articles']
	});
});

The imageOverrides option - when SVGs aren't sized correctly, or I want a different layout for an image

amps-in-the-trunk sets images to responsive by default. You can change that with imageOverrides. Also most SVGs have incorrect sizing. You could fix the SVGs, or you could override them with imageOverrides.

var imageOverrides = {
	'logo.svg': {
		width: 22,
		height: 22,
		layout: 'fixed'
	},
	'rss.svg': {
		width: 26,
		height: 16,
		layout: 'fixed'
	}
}

var ampsInTheTrunk = require('amps-in-the-trunk')(imageOverrides)

The enableCodeHighlighting option - highlights <pre><code> blocks using highlight.js

If you want syntax highlighting, AMPS in the Trunk will use highlight.js to highlight the specific blocks.

Why another AMP module?

I tried html-to-amp but that uses html-to-article-json first and it lost images. I don't care about article.json and I don't care about non-AMP alternative formats. I just wanted an AMP version of my HTML that didn't lose any data and would pass the AMP validator.

Pull requests welcome

This is the first version of the module, created really for my own needs. I'm quite happy to take pull requests for additional features.

Why the name?

Because amplify and html-to-amp were taken and because House of Pain