amps-in-the-trunk

KO | EN

gitlite — search

#javascript #python #ai #go #deep-learning #linux #docker #java #windows #awesome #cli #kubernetes #vue #openai

amps-in-the-trunk

(★ 8)

Transform HTML directly to Google AMP HTML

amps-in-the-trunk 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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](https://www.npmjs.com/package/highlight.js) to highlight the specific blocks.

## Why another AMP module?

I tried [html-to-amp](https://www.npmjs.com/package/html-to-amp) but that uses [html-to-article-json](https://www.npmjs.com/package/html-to-amp) 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](https://www.youtube.com/watch?v=KZaz7OqyTHQ)

amps-in-the-trunk

amps-in-the-trunk 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

amps-in-the-trunk

amps-in-the-trunk 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README