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
- doesn't have all the usual analytics
- 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)
<pre><code>
blocks using highlight.js
The enableCodeHighlighting option - highlights 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