diff --git a/core/server/apps/amp/lib/helpers/amp_content.js b/core/server/apps/amp/lib/helpers/amp_content.js index 92cafe502f..1c0a057311 100644 --- a/core/server/apps/amp/lib/helpers/amp_content.js +++ b/core/server/apps/amp/lib/helpers/amp_content.js @@ -11,6 +11,8 @@ var hbs = require('express-hbs'), Amperize = require('amperize'), moment = require('moment'), sanitizeHtml = require('sanitize-html'), + config = require('../../../../config'), + makeAbsoluteUrl = require('../../../../utils/make-absolute-urls'), amperize = new Amperize(), amperizeCache = {}, allowedAMPTags = [], @@ -40,6 +42,9 @@ function getAmperizeHTML(html, post) { return; } + // make relative URLs abolute + html = makeAbsoluteUrl(html, config.url, post.url).html(); + if (!amperizeCache[post.id] || moment(new Date(amperizeCache[post.id].updated_at)).diff(new Date(post.updated_at)) < 0) { return new Promise(function (resolve, reject) { amperize.parse(html, function (err, res) { @@ -64,7 +69,7 @@ function ampContent() { return Promise.props(amperizeHTML).then(function (result) { ampHTML = result.amperize || ''; - // let's sanitize our html!!! + // let's sanitize our HTML!!! cleanHTML = sanitizeHtml(ampHTML, { allowedTags: allowedAMPTags, allowedAttributes: false, diff --git a/core/server/apps/amp/lib/views/amp.hbs b/core/server/apps/amp/lib/views/amp.hbs index 1810e4d053..e22b1e2891 100644 --- a/core/server/apps/amp/lib/views/amp.hbs +++ b/core/server/apps/amp/lib/views/amp.hbs @@ -692,7 +692,8 @@ /* Keep images centered, and allow images wider than the main text column to break out. */ - .post-content amp-img { + .post-content amp-img, + .post-content amp-anim { /* Centers an image by (1) pushing its left edge to the center of its container and (2) shifting the entire image in the opposite direction by half its own width. diff --git a/core/server/apps/amp/tests/amp_content_spec.js b/core/server/apps/amp/tests/amp_content_spec.js index 48745b92b3..957593c3a3 100644 --- a/core/server/apps/amp/tests/amp_content_spec.js +++ b/core/server/apps/amp/tests/amp_content_spec.js @@ -1,5 +1,6 @@ var should = require('should'), rewire = require('rewire'), + configUtils = require('../../../../test/utils/configUtils'), // Stuff we are testing ampContentHelper = rewire('../lib/helpers/amp_content'); @@ -24,89 +25,6 @@ describe('{{amp_content}} helper', function () { }).catch(done); }); - it('can render content from cache', function (done) { - var testData = { - html: 'Hello World', - updated_at: 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)', - id: 1 - }, - ampCachedResult, - ampResult = ampContentHelper.call(testData), - amperizeCache = ampContentHelper.__get__('amperizeCache'); - - ampResult.then(function (rendered) { - should.exist(rendered); - should.exist(amperizeCache); - rendered.string.should.equal(testData.html); - amperizeCache[1].should.have.property('updated_at', 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)'); - amperizeCache[1].should.have.property('amp', testData.html); - // call it again, to make it fetch from cache - ampCachedResult = ampContentHelper.call(testData); - ampCachedResult.then(function (rendered) { - should.exist(rendered); - should.exist(amperizeCache); - amperizeCache[1].should.have.property('updated_at', 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)'); - amperizeCache[1].should.have.property('amp', testData.html); - done(); - }); - }).catch(done); - }); - - it('fetches new AMP HTML if post was changed', function (done) { - var testData1 = { - html: 'Hello World', - updated_at: 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)', - id: 1 - }, - testData2 = { - html: 'Hello Ghost', - updated_at: 'Wed Jul 30 2016 18:17:22 GMT+0200 (CEST)', - id: 1 - }, - ampResult = ampContentHelper.call(testData1), - amperizeCache = ampContentHelper.__get__('amperizeCache'); - - ampResult.then(function (rendered) { - should.exist(rendered); - should.exist(amperizeCache); - rendered.string.should.equal(testData1.html); - amperizeCache[1].should.have.property('updated_at', 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)'); - amperizeCache[1].should.have.property('amp', testData1.html); - - // call it again with different values to fetch from Amperize and not from cache - ampResult = ampContentHelper.call(testData2); - ampResult.then(function (rendered) { - should.exist(rendered); - should.exist(amperizeCache); - - // it should not have the old value, - amperizeCache[1].should.not.have.property('Wed Jul 30 2016 18:17:22 GMT+0200 (CEST)'); - // only the new one - rendered.string.should.equal(testData2.html); - amperizeCache[1].should.have.property('updated_at', 'Wed Jul 30 2016 18:17:22 GMT+0200 (CEST)'); - amperizeCache[1].should.have.property('amp', testData2.html); - done(); - }); - }).catch(done); - }); - - it('sanitizes remaining and not valid tags', function (done) { - var testData = { - html: '' + - '' + - '', - updated_at: 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)', - id: 1 - }, - ampResult = ampContentHelper.call(testData); - - ampResult.then(function (rendered) { - should.exist(rendered); - rendered.string.should.be.equal(''); - done(); - }).catch(done); - }); - it('returns if no html is provided', function (done) { var testData = { updated_at: 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)', @@ -121,60 +39,156 @@ describe('{{amp_content}} helper', function () { }).catch(done); }); - it('can transform img tags to amp-img', function (done) { - var testData = { - html: 'The Ghost Logo', - updated_at: 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)', - id: 1 - }, - expectedResult = '', - ampResult = ampContentHelper.call(testData); + describe('Cache', function () { + it('can render content from cache', function (done) { + var testData = { + html: 'Hello World', + updated_at: 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)', + id: 1 + }, + ampCachedResult, + ampResult = ampContentHelper.call(testData), + amperizeCache = ampContentHelper.__get__('amperizeCache'); - ampResult.then(function (rendered) { - should.exist(rendered); - rendered.string.should.equal(expectedResult); - done(); - }).catch(done); + ampResult.then(function (rendered) { + should.exist(rendered); + should.exist(amperizeCache); + rendered.string.should.equal(testData.html); + amperizeCache[1].should.have.property('updated_at', 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)'); + amperizeCache[1].should.have.property('amp', testData.html); + // call it again, to make it fetch from cache + ampCachedResult = ampContentHelper.call(testData); + ampCachedResult.then(function (rendered) { + should.exist(rendered); + should.exist(amperizeCache); + amperizeCache[1].should.have.property('updated_at', 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)'); + amperizeCache[1].should.have.property('amp', testData.html); + done(); + }); + }).catch(done); + }); + + it('fetches new AMP HTML if post was changed', function (done) { + var testData1 = { + html: 'Hello World', + updated_at: 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)', + id: 1 + }, + testData2 = { + html: 'Hello Ghost', + updated_at: 'Wed Jul 30 2016 18:17:22 GMT+0200 (CEST)', + id: 1 + }, + ampResult = ampContentHelper.call(testData1), + amperizeCache = ampContentHelper.__get__('amperizeCache'); + + ampResult.then(function (rendered) { + should.exist(rendered); + should.exist(amperizeCache); + rendered.string.should.equal(testData1.html); + amperizeCache[1].should.have.property('updated_at', 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)'); + amperizeCache[1].should.have.property('amp', testData1.html); + + // call it again with different values to fetch from Amperize and not from cache + ampResult = ampContentHelper.call(testData2); + ampResult.then(function (rendered) { + should.exist(rendered); + should.exist(amperizeCache); + + // it should not have the old value, + amperizeCache[1].should.not.have.property('Wed Jul 30 2016 18:17:22 GMT+0200 (CEST)'); + // only the new one + rendered.string.should.equal(testData2.html); + amperizeCache[1].should.have.property('updated_at', 'Wed Jul 30 2016 18:17:22 GMT+0200 (CEST)'); + amperizeCache[1].should.have.property('amp', testData2.html); + done(); + }); + }).catch(done); + }); }); - it('can transform audio tags to amp-audio', function (done) { - var testData = { - html: '' + - '', - updated_at: 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)', - id: 1 - }, - expectedResult = 'Your browser does not support the audio element.' + - '', - ampResult = ampContentHelper.call(testData); + describe('Transforms and sanitizes HTML', function () { + beforeEach(function () { + configUtils.set({url: 'https://my-awesome-blog.com/'}); + }); - ampResult.then(function (rendered) { - should.exist(rendered); - rendered.string.should.equal(expectedResult); - done(); - }).catch(done); - }); + afterEach(function () { + ampContentHelper.__set__('amperizeCache', {}); + configUtils.restore(); + }); - it('can handle incomplete HTML tags', function (done) { - var testData = { - html: '', - updated_at: 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)', - id: 1 - }, - ampResult = ampContentHelper.call(testData), - sanitizedHTML, - ampedHTML; + it('can transform img tags to amp-img', function (done) { + var testData = { + html: 'The Ghost Logo', + updated_at: 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)', + id: 1 + }, + expectedResult = '', + ampResult = ampContentHelper.call(testData); - ampResult.then(function (rendered) { - sanitizedHTML = ampContentHelper.__get__('cleanHTML'); - ampedHTML = ampContentHelper.__get__('ampHTML'); - should.exist(rendered); - rendered.string.should.equal(''); - should.exist(ampedHTML); - ampedHTML.should.be.equal(''); - should.exist(sanitizedHTML); - sanitizedHTML.should.be.equal(''); - done(); - }).catch(done); + ampResult.then(function (rendered) { + should.exist(rendered); + rendered.string.should.equal(expectedResult); + done(); + }).catch(done); + }); + + it('can transform audio tags to amp-audio', function (done) { + var testData = { + html: '' + + '', + updated_at: 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)', + id: 1 + }, + expectedResult = 'Your browser does not support the audio element.' + + '', + ampResult = ampContentHelper.call(testData); + + ampResult.then(function (rendered) { + should.exist(rendered); + rendered.string.should.equal(expectedResult); + done(); + }).catch(done); + }); + + it('can handle incomplete HTML tags', function (done) { + var testData = { + html: '', + updated_at: 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)', + id: 1 + }, + ampResult = ampContentHelper.call(testData), + sanitizedHTML, + ampedHTML; + + ampResult.then(function (rendered) { + sanitizedHTML = ampContentHelper.__get__('cleanHTML'); + ampedHTML = ampContentHelper.__get__('ampHTML'); + should.exist(rendered); + rendered.string.should.equal(''); + should.exist(ampedHTML); + ampedHTML.should.be.equal(''); + should.exist(sanitizedHTML); + sanitizedHTML.should.be.equal(''); + done(); + }).catch(done); + }); + + it('sanitizes remaining and not valid tags', function (done) { + var testData = { + html: '' + + '' + + '', + updated_at: 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)', + id: 1 + }, + ampResult = ampContentHelper.call(testData); + + ampResult.then(function (rendered) { + should.exist(rendered); + rendered.string.should.be.equal(''); + done(); + }).catch(done); + }); }); }); diff --git a/package.json b/package.json index 5f2153cf51..68ac728ce8 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "node": "~0.10.0 || ~0.12.0 || ^4.2.0" }, "dependencies": { - "amperize": "0.3.0", + "amperize": "https://github.com/aileencgn/amperize#fixed-layout-for-small-images", "archiver": "1.0.1", "bcryptjs": "2.3.0", "bluebird": "3.4.1",