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!
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)
If you want syntax highlighting, AMPS in the Trunk will use highlight.js to highlight the specific blocks.
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.
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.
Because amplify
and html-to-amp
were taken and because House of Pain