TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-13 05:16:28 +03:00
Code Issues Projects Releases Wiki Activity
ce50653f89
Ghost/test/unit/apps/amp/amp_content_spec.js

328 lines
15 KiB
JavaScript
Raw Normal View History

Updated var declarations to const/let and no lists - All var declarations are now const or let as per ES6 - All comma-separated lists / chained declarations are now one declaration per line - This is for clarity/readability but also made running the var-to-const/let switch smoother - ESLint rules updated to match How this was done: - npm install -g jscodeshift - git clone https://github.com/cpojer/js-codemod.git - git clone git@github.com:TryGhost/Ghost.git shallow-ghost - cd shallow-ghost - jscodeshift -t ../js-codemod/transforms/unchain-variables.js . -v=2 - jscodeshift -t ../js-codemod/transforms/no-vars.js . -v=2 - yarn - yarn test - yarn lint / fix various lint errors (almost all indent) by opening files and saving in vscode - grunt test-regression - sorted!
2020-04-29 18:44:27 +03:00
const should = require('should');
const rewire = require('rewire');
const nock = require('nock');
const urlUtils = require('../../../utils/urlUtils');
const ampContentHelper = rewire('../../../../core/frontend/apps/amp/lib/helpers/amp_content');
✨ [FEATURE] AMP⚡ (#7229) closes #6588, #7095 * `ImageObject` with image dimensions (#7152, #7151, #7153) - Returns meta data as promise - returns a new Promise from meta data - uses `Promise.props()` to resolve `getClient()` and `getMetaData()` - Adds 'image-size' util The util returns an object like this ``` { height: 50, url: 'http://myblog.com/images/cat.jpg', width: 50 }; ``` if the dimensions can be fetched and rejects with error, if not. In case we get a locally stored image or a not complete url (like `//www.gravatar.com/andsoon`), we add the protocol to the incomplete one and use `urlFor()` to get the absolute URL. If the request fails or `image-size` is not able to read the file, we reject with error. - adds 'image-size' module to dependencies - adds `getImageSizeFromUrl` function that returns image dimensions - In preparation of AMP support and to improve our schema.org JSON-LD and structured data, I made the following changes: - Changes the following properties to be `Objects`, which have a `url` property by default and a `dimensions` property, if `width` and `height` are available: - `metaData.coverImage` - `metaData.authorImage` - `metaData.blog.logo` - Checks cache by calling `getCachedImageSizeFromUrl`. If image dimensions were fetched already, returns them from cache instead of fetching them again. - If we have image dimensions on hand, the output in our JSON-LD changes from normal urls to be full `ImageObjects`. Applies to all images and logos. - Special case for `publisher.logo` as it has size restrictions: if the image doesn't fulfil the restrictions (<=600 width and <=60 height), we simply output the url instead, so like before. - Adds new property for schema.org JSON-LD: `mainEntityOfPage` as an Object. - Adds additional Open Graph data (if we have the image size): `og:image:width` and `og:image:height` - Adds/updates tests * AMP router and controller (#7171, #7157) Implements AMP in `/apps/`: - renders `amp.hbs` if route is `/:slug/amp/` - updates `setResponseContext` to set context to `['amp', 'post']` for a amp post and `['amp', 'page']` for a page, but will not render amp template for a page - updates `context_spec` - registers 'amp' as new internal app - adds the `amp.hbs` template to `core/server/apps/amp` which will be the default template for AMP posts. - adds `isAmpURL` to `post-lookup` * 🎨 Use `context` in meta as array (#7205) Instead of reading the first value of the context array, we're checking if it includes certain context values. This is a preparation change for AMP, where the context will be delivered as `['amp', 'post']`. * ✨ AMP helpers (#7174, #7216, #7215, #7223) - Adds AMP helpers `{{amp_content}}`, `{{amp_component}}` and `{{amp_ghost_head}}` to support AMP: - `{{amp_content}}`: - Adds `Amperize` as dependency - AMP app uses new helper `{{amp_content}}` to render AMP HTML - `Amperize` transforms regular HTML into AMP HTML - Adds test for `{{amp_content}}` helper - Adds 'Sanitize-HTML` as dependendy - After the HTML get 'amperized' we still might have some HTML tags, which are prohibited in AMP HTML, so we use `sanitize-html` to remove those. With every update, `Amperize` gets and it is able to transform more HTML tags, they valid AMP HTML tags (e. g. `video` and `amp-video`) and will therefore not be removed. - `{{amp_ghost_head}}`: - registers `{{amp_ghost_head}}` helper, but uses `{{ghost_head}}` code - uses `{{amp_ghost_head}}` in `amp.hbs` instead of `{{ghost_head}}` - `{{ghost_head}}`: - Render `amphtml` link in metadata for post, which links to the amp post (`getAmpUrl`) - Updates all test in metadata to support `amp` context - Changes context conditionals to work with full array instead of first array value - Adds conditionals, so no additional javascript gets rendered in `{{ghost_head}}` - Removes trailing `/amp/` in URLs, so only `amphtml` link on regular post renders it - Adds a conditional, so no code injection will be included, for an `amp` context. - `{{amp_components}}`: - AMP app uses new helper `{{amp_components}}` to render necessary script tags for AMP extended components as `amp-iframe`, `amp-anime` and `amp-form` - Adds test for `{{amp_components}}`
2016-08-22 19:49:27 +03:00
⬆️ 🚨 Update Amperize dep and fix test (#7374) no issue Updates Amperize dep to v0.3.1 and fixes test for `amp_content`.
2016-09-14 14:30:37 +03:00
// TODO: Amperize really needs to get stubbed, so we can test returning errors
// properly and make this test faster!
✨ [FEATURE] AMP⚡ (#7229) closes #6588, #7095 * `ImageObject` with image dimensions (#7152, #7151, #7153) - Returns meta data as promise - returns a new Promise from meta data - uses `Promise.props()` to resolve `getClient()` and `getMetaData()` - Adds 'image-size' util The util returns an object like this ``` { height: 50, url: 'http://myblog.com/images/cat.jpg', width: 50 }; ``` if the dimensions can be fetched and rejects with error, if not. In case we get a locally stored image or a not complete url (like `//www.gravatar.com/andsoon`), we add the protocol to the incomplete one and use `urlFor()` to get the absolute URL. If the request fails or `image-size` is not able to read the file, we reject with error. - adds 'image-size' module to dependencies - adds `getImageSizeFromUrl` function that returns image dimensions - In preparation of AMP support and to improve our schema.org JSON-LD and structured data, I made the following changes: - Changes the following properties to be `Objects`, which have a `url` property by default and a `dimensions` property, if `width` and `height` are available: - `metaData.coverImage` - `metaData.authorImage` - `metaData.blog.logo` - Checks cache by calling `getCachedImageSizeFromUrl`. If image dimensions were fetched already, returns them from cache instead of fetching them again. - If we have image dimensions on hand, the output in our JSON-LD changes from normal urls to be full `ImageObjects`. Applies to all images and logos. - Special case for `publisher.logo` as it has size restrictions: if the image doesn't fulfil the restrictions (<=600 width and <=60 height), we simply output the url instead, so like before. - Adds new property for schema.org JSON-LD: `mainEntityOfPage` as an Object. - Adds additional Open Graph data (if we have the image size): `og:image:width` and `og:image:height` - Adds/updates tests * AMP router and controller (#7171, #7157) Implements AMP in `/apps/`: - renders `amp.hbs` if route is `/:slug/amp/` - updates `setResponseContext` to set context to `['amp', 'post']` for a amp post and `['amp', 'page']` for a page, but will not render amp template for a page - updates `context_spec` - registers 'amp' as new internal app - adds the `amp.hbs` template to `core/server/apps/amp` which will be the default template for AMP posts. - adds `isAmpURL` to `post-lookup` * 🎨 Use `context` in meta as array (#7205) Instead of reading the first value of the context array, we're checking if it includes certain context values. This is a preparation change for AMP, where the context will be delivered as `['amp', 'post']`. * ✨ AMP helpers (#7174, #7216, #7215, #7223) - Adds AMP helpers `{{amp_content}}`, `{{amp_component}}` and `{{amp_ghost_head}}` to support AMP: - `{{amp_content}}`: - Adds `Amperize` as dependency - AMP app uses new helper `{{amp_content}}` to render AMP HTML - `Amperize` transforms regular HTML into AMP HTML - Adds test for `{{amp_content}}` helper - Adds 'Sanitize-HTML` as dependendy - After the HTML get 'amperized' we still might have some HTML tags, which are prohibited in AMP HTML, so we use `sanitize-html` to remove those. With every update, `Amperize` gets and it is able to transform more HTML tags, they valid AMP HTML tags (e. g. `video` and `amp-video`) and will therefore not be removed. - `{{amp_ghost_head}}`: - registers `{{amp_ghost_head}}` helper, but uses `{{ghost_head}}` code - uses `{{amp_ghost_head}}` in `amp.hbs` instead of `{{ghost_head}}` - `{{ghost_head}}`: - Render `amphtml` link in metadata for post, which links to the amp post (`getAmpUrl`) - Updates all test in metadata to support `amp` context - Changes context conditionals to work with full array instead of first array value - Adds conditionals, so no additional javascript gets rendered in `{{ghost_head}}` - Removes trailing `/amp/` in URLs, so only `amphtml` link on regular post renders it - Adds a conditional, so no code injection will be included, for an `amp` context. - `{{amp_components}}`: - AMP app uses new helper `{{amp_components}}` to render necessary script tags for AMP extended components as `amp-iframe`, `amp-anime` and `amp-form` - Adds test for `{{amp_components}}`
2016-08-22 19:49:27 +03:00
describe('{{amp_content}} helper', function () {
afterEach(function () {
ampContentHelper.__set__('amperizeCache', {});
});
it('can render content', function (done) {
Updated var declarations to const/let and no lists - All var declarations are now const or let as per ES6 - All comma-separated lists / chained declarations are now one declaration per line - This is for clarity/readability but also made running the var-to-const/let switch smoother - ESLint rules updated to match How this was done: - npm install -g jscodeshift - git clone https://github.com/cpojer/js-codemod.git - git clone git@github.com:TryGhost/Ghost.git shallow-ghost - cd shallow-ghost - jscodeshift -t ../js-codemod/transforms/unchain-variables.js . -v=2 - jscodeshift -t ../js-codemod/transforms/no-vars.js . -v=2 - yarn - yarn test - yarn lint / fix various lint errors (almost all indent) by opening files and saving in vscode - grunt test-regression - sorted!
2020-04-29 18:44:27 +03:00
const testData = {
html: 'Hello World',
updated_at: 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)',
id: 1
};
const ampResult = ampContentHelper.call(testData);
✨ [FEATURE] AMP⚡ (#7229) closes #6588, #7095 * `ImageObject` with image dimensions (#7152, #7151, #7153) - Returns meta data as promise - returns a new Promise from meta data - uses `Promise.props()` to resolve `getClient()` and `getMetaData()` - Adds 'image-size' util The util returns an object like this ``` { height: 50, url: 'http://myblog.com/images/cat.jpg', width: 50 }; ``` if the dimensions can be fetched and rejects with error, if not. In case we get a locally stored image or a not complete url (like `//www.gravatar.com/andsoon`), we add the protocol to the incomplete one and use `urlFor()` to get the absolute URL. If the request fails or `image-size` is not able to read the file, we reject with error. - adds 'image-size' module to dependencies - adds `getImageSizeFromUrl` function that returns image dimensions - In preparation of AMP support and to improve our schema.org JSON-LD and structured data, I made the following changes: - Changes the following properties to be `Objects`, which have a `url` property by default and a `dimensions` property, if `width` and `height` are available: - `metaData.coverImage` - `metaData.authorImage` - `metaData.blog.logo` - Checks cache by calling `getCachedImageSizeFromUrl`. If image dimensions were fetched already, returns them from cache instead of fetching them again. - If we have image dimensions on hand, the output in our JSON-LD changes from normal urls to be full `ImageObjects`. Applies to all images and logos. - Special case for `publisher.logo` as it has size restrictions: if the image doesn't fulfil the restrictions (<=600 width and <=60 height), we simply output the url instead, so like before. - Adds new property for schema.org JSON-LD: `mainEntityOfPage` as an Object. - Adds additional Open Graph data (if we have the image size): `og:image:width` and `og:image:height` - Adds/updates tests * AMP router and controller (#7171, #7157) Implements AMP in `/apps/`: - renders `amp.hbs` if route is `/:slug/amp/` - updates `setResponseContext` to set context to `['amp', 'post']` for a amp post and `['amp', 'page']` for a page, but will not render amp template for a page - updates `context_spec` - registers 'amp' as new internal app - adds the `amp.hbs` template to `core/server/apps/amp` which will be the default template for AMP posts. - adds `isAmpURL` to `post-lookup` * 🎨 Use `context` in meta as array (#7205) Instead of reading the first value of the context array, we're checking if it includes certain context values. This is a preparation change for AMP, where the context will be delivered as `['amp', 'post']`. * ✨ AMP helpers (#7174, #7216, #7215, #7223) - Adds AMP helpers `{{amp_content}}`, `{{amp_component}}` and `{{amp_ghost_head}}` to support AMP: - `{{amp_content}}`: - Adds `Amperize` as dependency - AMP app uses new helper `{{amp_content}}` to render AMP HTML - `Amperize` transforms regular HTML into AMP HTML - Adds test for `{{amp_content}}` helper - Adds 'Sanitize-HTML` as dependendy - After the HTML get 'amperized' we still might have some HTML tags, which are prohibited in AMP HTML, so we use `sanitize-html` to remove those. With every update, `Amperize` gets and it is able to transform more HTML tags, they valid AMP HTML tags (e. g. `video` and `amp-video`) and will therefore not be removed. - `{{amp_ghost_head}}`: - registers `{{amp_ghost_head}}` helper, but uses `{{ghost_head}}` code - uses `{{amp_ghost_head}}` in `amp.hbs` instead of `{{ghost_head}}` - `{{ghost_head}}`: - Render `amphtml` link in metadata for post, which links to the amp post (`getAmpUrl`) - Updates all test in metadata to support `amp` context - Changes context conditionals to work with full array instead of first array value - Adds conditionals, so no additional javascript gets rendered in `{{ghost_head}}` - Removes trailing `/amp/` in URLs, so only `amphtml` link on regular post renders it - Adds a conditional, so no code injection will be included, for an `amp` context. - `{{amp_components}}`: - AMP app uses new helper `{{amp_components}}` to render necessary script tags for AMP extended components as `amp-iframe`, `amp-anime` and `amp-form` - Adds test for `{{amp_components}}`
2016-08-22 19:49:27 +03:00
ampResult.then(function (rendered) {
should.exist(rendered);
rendered.string.should.equal(testData.html);
done();
}).catch(done);
});
🐛 fix: make small media types not stretch (#7265) no issue Fixes a bug with displaying small media types like images or gif. Two reasons for that: 1. In many cases, we only have the relative URL instead of the absolute URL for the media source and therefore, `Amperize` module wasn't able to detect the image size and set the default image size of `width="600"` and `height="400"`. 2. Even if we have detected the correct image size, the attribute `layout="default"` would still make it strech. This issue is fixed in `Amperize`, but it wasn't merged at this time, so I set the dependency on my fork. Adds `amp-anim` to the `.post-content` class, to have same CSS style as an image.
2016-08-25 12:09:25 +03:00
it('returns if no html is provided', function (done) {
Updated var declarations to const/let and no lists - All var declarations are now const or let as per ES6 - All comma-separated lists / chained declarations are now one declaration per line - This is for clarity/readability but also made running the var-to-const/let switch smoother - ESLint rules updated to match How this was done: - npm install -g jscodeshift - git clone https://github.com/cpojer/js-codemod.git - git clone git@github.com:TryGhost/Ghost.git shallow-ghost - cd shallow-ghost - jscodeshift -t ../js-codemod/transforms/unchain-variables.js . -v=2 - jscodeshift -t ../js-codemod/transforms/no-vars.js . -v=2 - yarn - yarn test - yarn lint / fix various lint errors (almost all indent) by opening files and saving in vscode - grunt test-regression - sorted!
2020-04-29 18:44:27 +03:00
const testData = {
updated_at: 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)',
id: 1
};
const ampResult = ampContentHelper.call(testData);
✨ [FEATURE] AMP⚡ (#7229) closes #6588, #7095 * `ImageObject` with image dimensions (#7152, #7151, #7153) - Returns meta data as promise - returns a new Promise from meta data - uses `Promise.props()` to resolve `getClient()` and `getMetaData()` - Adds 'image-size' util The util returns an object like this ``` { height: 50, url: 'http://myblog.com/images/cat.jpg', width: 50 }; ``` if the dimensions can be fetched and rejects with error, if not. In case we get a locally stored image or a not complete url (like `//www.gravatar.com/andsoon`), we add the protocol to the incomplete one and use `urlFor()` to get the absolute URL. If the request fails or `image-size` is not able to read the file, we reject with error. - adds 'image-size' module to dependencies - adds `getImageSizeFromUrl` function that returns image dimensions - In preparation of AMP support and to improve our schema.org JSON-LD and structured data, I made the following changes: - Changes the following properties to be `Objects`, which have a `url` property by default and a `dimensions` property, if `width` and `height` are available: - `metaData.coverImage` - `metaData.authorImage` - `metaData.blog.logo` - Checks cache by calling `getCachedImageSizeFromUrl`. If image dimensions were fetched already, returns them from cache instead of fetching them again. - If we have image dimensions on hand, the output in our JSON-LD changes from normal urls to be full `ImageObjects`. Applies to all images and logos. - Special case for `publisher.logo` as it has size restrictions: if the image doesn't fulfil the restrictions (<=600 width and <=60 height), we simply output the url instead, so like before. - Adds new property for schema.org JSON-LD: `mainEntityOfPage` as an Object. - Adds additional Open Graph data (if we have the image size): `og:image:width` and `og:image:height` - Adds/updates tests * AMP router and controller (#7171, #7157) Implements AMP in `/apps/`: - renders `amp.hbs` if route is `/:slug/amp/` - updates `setResponseContext` to set context to `['amp', 'post']` for a amp post and `['amp', 'page']` for a page, but will not render amp template for a page - updates `context_spec` - registers 'amp' as new internal app - adds the `amp.hbs` template to `core/server/apps/amp` which will be the default template for AMP posts. - adds `isAmpURL` to `post-lookup` * 🎨 Use `context` in meta as array (#7205) Instead of reading the first value of the context array, we're checking if it includes certain context values. This is a preparation change for AMP, where the context will be delivered as `['amp', 'post']`. * ✨ AMP helpers (#7174, #7216, #7215, #7223) - Adds AMP helpers `{{amp_content}}`, `{{amp_component}}` and `{{amp_ghost_head}}` to support AMP: - `{{amp_content}}`: - Adds `Amperize` as dependency - AMP app uses new helper `{{amp_content}}` to render AMP HTML - `Amperize` transforms regular HTML into AMP HTML - Adds test for `{{amp_content}}` helper - Adds 'Sanitize-HTML` as dependendy - After the HTML get 'amperized' we still might have some HTML tags, which are prohibited in AMP HTML, so we use `sanitize-html` to remove those. With every update, `Amperize` gets and it is able to transform more HTML tags, they valid AMP HTML tags (e. g. `video` and `amp-video`) and will therefore not be removed. - `{{amp_ghost_head}}`: - registers `{{amp_ghost_head}}` helper, but uses `{{ghost_head}}` code - uses `{{amp_ghost_head}}` in `amp.hbs` instead of `{{ghost_head}}` - `{{ghost_head}}`: - Render `amphtml` link in metadata for post, which links to the amp post (`getAmpUrl`) - Updates all test in metadata to support `amp` context - Changes context conditionals to work with full array instead of first array value - Adds conditionals, so no additional javascript gets rendered in `{{ghost_head}}` - Removes trailing `/amp/` in URLs, so only `amphtml` link on regular post renders it - Adds a conditional, so no code injection will be included, for an `amp` context. - `{{amp_components}}`: - AMP app uses new helper `{{amp_components}}` to render necessary script tags for AMP extended components as `amp-iframe`, `amp-anime` and `amp-form` - Adds test for `{{amp_components}}`
2016-08-22 19:49:27 +03:00
ampResult.then(function (rendered) {
should.exist(rendered);
🐛 fix: make small media types not stretch (#7265) no issue Fixes a bug with displaying small media types like images or gif. Two reasons for that: 1. In many cases, we only have the relative URL instead of the absolute URL for the media source and therefore, `Amperize` module wasn't able to detect the image size and set the default image size of `width="600"` and `height="400"`. 2. Even if we have detected the correct image size, the attribute `layout="default"` would still make it strech. This issue is fixed in `Amperize`, but it wasn't merged at this time, so I set the dependency on my fork. Adds `amp-anim` to the `.post-content` class, to have same CSS style as an image.
2016-08-25 12:09:25 +03:00
rendered.string.should.be.equal('');
done();
✨ [FEATURE] AMP⚡ (#7229) closes #6588, #7095 * `ImageObject` with image dimensions (#7152, #7151, #7153) - Returns meta data as promise - returns a new Promise from meta data - uses `Promise.props()` to resolve `getClient()` and `getMetaData()` - Adds 'image-size' util The util returns an object like this ``` { height: 50, url: 'http://myblog.com/images/cat.jpg', width: 50 }; ``` if the dimensions can be fetched and rejects with error, if not. In case we get a locally stored image or a not complete url (like `//www.gravatar.com/andsoon`), we add the protocol to the incomplete one and use `urlFor()` to get the absolute URL. If the request fails or `image-size` is not able to read the file, we reject with error. - adds 'image-size' module to dependencies - adds `getImageSizeFromUrl` function that returns image dimensions - In preparation of AMP support and to improve our schema.org JSON-LD and structured data, I made the following changes: - Changes the following properties to be `Objects`, which have a `url` property by default and a `dimensions` property, if `width` and `height` are available: - `metaData.coverImage` - `metaData.authorImage` - `metaData.blog.logo` - Checks cache by calling `getCachedImageSizeFromUrl`. If image dimensions were fetched already, returns them from cache instead of fetching them again. - If we have image dimensions on hand, the output in our JSON-LD changes from normal urls to be full `ImageObjects`. Applies to all images and logos. - Special case for `publisher.logo` as it has size restrictions: if the image doesn't fulfil the restrictions (<=600 width and <=60 height), we simply output the url instead, so like before. - Adds new property for schema.org JSON-LD: `mainEntityOfPage` as an Object. - Adds additional Open Graph data (if we have the image size): `og:image:width` and `og:image:height` - Adds/updates tests * AMP router and controller (#7171, #7157) Implements AMP in `/apps/`: - renders `amp.hbs` if route is `/:slug/amp/` - updates `setResponseContext` to set context to `['amp', 'post']` for a amp post and `['amp', 'page']` for a page, but will not render amp template for a page - updates `context_spec` - registers 'amp' as new internal app - adds the `amp.hbs` template to `core/server/apps/amp` which will be the default template for AMP posts. - adds `isAmpURL` to `post-lookup` * 🎨 Use `context` in meta as array (#7205) Instead of reading the first value of the context array, we're checking if it includes certain context values. This is a preparation change for AMP, where the context will be delivered as `['amp', 'post']`. * ✨ AMP helpers (#7174, #7216, #7215, #7223) - Adds AMP helpers `{{amp_content}}`, `{{amp_component}}` and `{{amp_ghost_head}}` to support AMP: - `{{amp_content}}`: - Adds `Amperize` as dependency - AMP app uses new helper `{{amp_content}}` to render AMP HTML - `Amperize` transforms regular HTML into AMP HTML - Adds test for `{{amp_content}}` helper - Adds 'Sanitize-HTML` as dependendy - After the HTML get 'amperized' we still might have some HTML tags, which are prohibited in AMP HTML, so we use `sanitize-html` to remove those. With every update, `Amperize` gets and it is able to transform more HTML tags, they valid AMP HTML tags (e. g. `video` and `amp-video`) and will therefore not be removed. - `{{amp_ghost_head}}`: - registers `{{amp_ghost_head}}` helper, but uses `{{ghost_head}}` code - uses `{{amp_ghost_head}}` in `amp.hbs` instead of `{{ghost_head}}` - `{{ghost_head}}`: - Render `amphtml` link in metadata for post, which links to the amp post (`getAmpUrl`) - Updates all test in metadata to support `amp` context - Changes context conditionals to work with full array instead of first array value - Adds conditionals, so no additional javascript gets rendered in `{{ghost_head}}` - Removes trailing `/amp/` in URLs, so only `amphtml` link on regular post renders it - Adds a conditional, so no code injection will be included, for an `amp` context. - `{{amp_components}}`: - AMP app uses new helper `{{amp_components}}` to render necessary script tags for AMP extended components as `amp-iframe`, `amp-anime` and `amp-form` - Adds test for `{{amp_components}}`
2016-08-22 19:49:27 +03:00
}).catch(done);
});
🐛 fix: make small media types not stretch (#7265) no issue Fixes a bug with displaying small media types like images or gif. Two reasons for that: 1. In many cases, we only have the relative URL instead of the absolute URL for the media source and therefore, `Amperize` module wasn't able to detect the image size and set the default image size of `width="600"` and `height="400"`. 2. Even if we have detected the correct image size, the attribute `layout="default"` would still make it strech. This issue is fixed in `Amperize`, but it wasn't merged at this time, so I set the dependency on my fork. Adds `amp-anim` to the `.post-content` class, to have same CSS style as an image.
2016-08-25 12:09:25 +03:00
describe('Cache', function () {
it('can render content from cache', function (done) {
Updated var declarations to const/let and no lists - All var declarations are now const or let as per ES6 - All comma-separated lists / chained declarations are now one declaration per line - This is for clarity/readability but also made running the var-to-const/let switch smoother - ESLint rules updated to match How this was done: - npm install -g jscodeshift - git clone https://github.com/cpojer/js-codemod.git - git clone git@github.com:TryGhost/Ghost.git shallow-ghost - cd shallow-ghost - jscodeshift -t ../js-codemod/transforms/unchain-variables.js . -v=2 - jscodeshift -t ../js-codemod/transforms/no-vars.js . -v=2 - yarn - yarn test - yarn lint / fix various lint errors (almost all indent) by opening files and saving in vscode - grunt test-regression - sorted!
2020-04-29 18:44:27 +03:00
const testData = {
html: 'Hello World',
updated_at: 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)',
id: 1
};
let ampCachedResult;
const ampResult = ampContentHelper.call(testData);
const amperizeCache = ampContentHelper.__get__('amperizeCache');
✨ [FEATURE] AMP⚡ (#7229) closes #6588, #7095 * `ImageObject` with image dimensions (#7152, #7151, #7153) - Returns meta data as promise - returns a new Promise from meta data - uses `Promise.props()` to resolve `getClient()` and `getMetaData()` - Adds 'image-size' util The util returns an object like this ``` { height: 50, url: 'http://myblog.com/images/cat.jpg', width: 50 }; ``` if the dimensions can be fetched and rejects with error, if not. In case we get a locally stored image or a not complete url (like `//www.gravatar.com/andsoon`), we add the protocol to the incomplete one and use `urlFor()` to get the absolute URL. If the request fails or `image-size` is not able to read the file, we reject with error. - adds 'image-size' module to dependencies - adds `getImageSizeFromUrl` function that returns image dimensions - In preparation of AMP support and to improve our schema.org JSON-LD and structured data, I made the following changes: - Changes the following properties to be `Objects`, which have a `url` property by default and a `dimensions` property, if `width` and `height` are available: - `metaData.coverImage` - `metaData.authorImage` - `metaData.blog.logo` - Checks cache by calling `getCachedImageSizeFromUrl`. If image dimensions were fetched already, returns them from cache instead of fetching them again. - If we have image dimensions on hand, the output in our JSON-LD changes from normal urls to be full `ImageObjects`. Applies to all images and logos. - Special case for `publisher.logo` as it has size restrictions: if the image doesn't fulfil the restrictions (<=600 width and <=60 height), we simply output the url instead, so like before. - Adds new property for schema.org JSON-LD: `mainEntityOfPage` as an Object. - Adds additional Open Graph data (if we have the image size): `og:image:width` and `og:image:height` - Adds/updates tests * AMP router and controller (#7171, #7157) Implements AMP in `/apps/`: - renders `amp.hbs` if route is `/:slug/amp/` - updates `setResponseContext` to set context to `['amp', 'post']` for a amp post and `['amp', 'page']` for a page, but will not render amp template for a page - updates `context_spec` - registers 'amp' as new internal app - adds the `amp.hbs` template to `core/server/apps/amp` which will be the default template for AMP posts. - adds `isAmpURL` to `post-lookup` * 🎨 Use `context` in meta as array (#7205) Instead of reading the first value of the context array, we're checking if it includes certain context values. This is a preparation change for AMP, where the context will be delivered as `['amp', 'post']`. * ✨ AMP helpers (#7174, #7216, #7215, #7223) - Adds AMP helpers `{{amp_content}}`, `{{amp_component}}` and `{{amp_ghost_head}}` to support AMP: - `{{amp_content}}`: - Adds `Amperize` as dependency - AMP app uses new helper `{{amp_content}}` to render AMP HTML - `Amperize` transforms regular HTML into AMP HTML - Adds test for `{{amp_content}}` helper - Adds 'Sanitize-HTML` as dependendy - After the HTML get 'amperized' we still might have some HTML tags, which are prohibited in AMP HTML, so we use `sanitize-html` to remove those. With every update, `Amperize` gets and it is able to transform more HTML tags, they valid AMP HTML tags (e. g. `video` and `amp-video`) and will therefore not be removed. - `{{amp_ghost_head}}`: - registers `{{amp_ghost_head}}` helper, but uses `{{ghost_head}}` code - uses `{{amp_ghost_head}}` in `amp.hbs` instead of `{{ghost_head}}` - `{{ghost_head}}`: - Render `amphtml` link in metadata for post, which links to the amp post (`getAmpUrl`) - Updates all test in metadata to support `amp` context - Changes context conditionals to work with full array instead of first array value - Adds conditionals, so no additional javascript gets rendered in `{{ghost_head}}` - Removes trailing `/amp/` in URLs, so only `amphtml` link on regular post renders it - Adds a conditional, so no code injection will be included, for an `amp` context. - `{{amp_components}}`: - AMP app uses new helper `{{amp_components}}` to render necessary script tags for AMP extended components as `amp-iframe`, `amp-anime` and `amp-form` - Adds test for `{{amp_components}}`
2016-08-22 19:49:27 +03:00
ampResult.then(function (rendered) {
should.exist(rendered);
should.exist(amperizeCache);
🐛 fix: make small media types not stretch (#7265) no issue Fixes a bug with displaying small media types like images or gif. Two reasons for that: 1. In many cases, we only have the relative URL instead of the absolute URL for the media source and therefore, `Amperize` module wasn't able to detect the image size and set the default image size of `width="600"` and `height="400"`. 2. Even if we have detected the correct image size, the attribute `layout="default"` would still make it strech. This issue is fixed in `Amperize`, but it wasn't merged at this time, so I set the dependency on my fork. Adds `amp-anim` to the `.post-content` class, to have same CSS style as an image.
2016-08-25 12:09:25 +03:00
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);
Fixed "no-shadow" eslint warning in tests refs https://github.com/TryGhost/eslint-plugin-ghost/commit/b6728ecb0f3385789497943648443cea5e3f8cf9 - The "no-shadow" eslint rune was introduced into ghost's eslint plugin (referenced commmit), which resulted in flood of warning in console output when linting the project codebase. - This cleanup is aiming to make any new linting issues more visible. Follow up commits will contain similar cleanups in other parts of the codebase
2020-10-19 07:45:26 +03:00
ampCachedResult.then(function (cachedResult) {
should.exist(cachedResult);
🐛 fix: make small media types not stretch (#7265) no issue Fixes a bug with displaying small media types like images or gif. Two reasons for that: 1. In many cases, we only have the relative URL instead of the absolute URL for the media source and therefore, `Amperize` module wasn't able to detect the image size and set the default image size of `width="600"` and `height="400"`. 2. Even if we have detected the correct image size, the attribute `layout="default"` would still make it strech. This issue is fixed in `Amperize`, but it wasn't merged at this time, so I set the dependency on my fork. Adds `amp-anim` to the `.post-content` class, to have same CSS style as an image.
2016-08-25 12:09:25 +03:00
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) {
Updated var declarations to const/let and no lists - All var declarations are now const or let as per ES6 - All comma-separated lists / chained declarations are now one declaration per line - This is for clarity/readability but also made running the var-to-const/let switch smoother - ESLint rules updated to match How this was done: - npm install -g jscodeshift - git clone https://github.com/cpojer/js-codemod.git - git clone git@github.com:TryGhost/Ghost.git shallow-ghost - cd shallow-ghost - jscodeshift -t ../js-codemod/transforms/unchain-variables.js . -v=2 - jscodeshift -t ../js-codemod/transforms/no-vars.js . -v=2 - yarn - yarn test - yarn lint / fix various lint errors (almost all indent) by opening files and saving in vscode - grunt test-regression - sorted!
2020-04-29 18:44:27 +03:00
const testData1 = {
html: 'Hello World',
updated_at: 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)',
id: 1
};
const testData2 = {
html: 'Hello Ghost',
updated_at: 'Wed Jul 30 2016 18:17:22 GMT+0200 (CEST)',
id: 1
};
let ampResult = ampContentHelper.call(testData1);
const amperizeCache = ampContentHelper.__get__('amperizeCache');
✨ [FEATURE] AMP⚡ (#7229) closes #6588, #7095 * `ImageObject` with image dimensions (#7152, #7151, #7153) - Returns meta data as promise - returns a new Promise from meta data - uses `Promise.props()` to resolve `getClient()` and `getMetaData()` - Adds 'image-size' util The util returns an object like this ``` { height: 50, url: 'http://myblog.com/images/cat.jpg', width: 50 }; ``` if the dimensions can be fetched and rejects with error, if not. In case we get a locally stored image or a not complete url (like `//www.gravatar.com/andsoon`), we add the protocol to the incomplete one and use `urlFor()` to get the absolute URL. If the request fails or `image-size` is not able to read the file, we reject with error. - adds 'image-size' module to dependencies - adds `getImageSizeFromUrl` function that returns image dimensions - In preparation of AMP support and to improve our schema.org JSON-LD and structured data, I made the following changes: - Changes the following properties to be `Objects`, which have a `url` property by default and a `dimensions` property, if `width` and `height` are available: - `metaData.coverImage` - `metaData.authorImage` - `metaData.blog.logo` - Checks cache by calling `getCachedImageSizeFromUrl`. If image dimensions were fetched already, returns them from cache instead of fetching them again. - If we have image dimensions on hand, the output in our JSON-LD changes from normal urls to be full `ImageObjects`. Applies to all images and logos. - Special case for `publisher.logo` as it has size restrictions: if the image doesn't fulfil the restrictions (<=600 width and <=60 height), we simply output the url instead, so like before. - Adds new property for schema.org JSON-LD: `mainEntityOfPage` as an Object. - Adds additional Open Graph data (if we have the image size): `og:image:width` and `og:image:height` - Adds/updates tests * AMP router and controller (#7171, #7157) Implements AMP in `/apps/`: - renders `amp.hbs` if route is `/:slug/amp/` - updates `setResponseContext` to set context to `['amp', 'post']` for a amp post and `['amp', 'page']` for a page, but will not render amp template for a page - updates `context_spec` - registers 'amp' as new internal app - adds the `amp.hbs` template to `core/server/apps/amp` which will be the default template for AMP posts. - adds `isAmpURL` to `post-lookup` * 🎨 Use `context` in meta as array (#7205) Instead of reading the first value of the context array, we're checking if it includes certain context values. This is a preparation change for AMP, where the context will be delivered as `['amp', 'post']`. * ✨ AMP helpers (#7174, #7216, #7215, #7223) - Adds AMP helpers `{{amp_content}}`, `{{amp_component}}` and `{{amp_ghost_head}}` to support AMP: - `{{amp_content}}`: - Adds `Amperize` as dependency - AMP app uses new helper `{{amp_content}}` to render AMP HTML - `Amperize` transforms regular HTML into AMP HTML - Adds test for `{{amp_content}}` helper - Adds 'Sanitize-HTML` as dependendy - After the HTML get 'amperized' we still might have some HTML tags, which are prohibited in AMP HTML, so we use `sanitize-html` to remove those. With every update, `Amperize` gets and it is able to transform more HTML tags, they valid AMP HTML tags (e. g. `video` and `amp-video`) and will therefore not be removed. - `{{amp_ghost_head}}`: - registers `{{amp_ghost_head}}` helper, but uses `{{ghost_head}}` code - uses `{{amp_ghost_head}}` in `amp.hbs` instead of `{{ghost_head}}` - `{{ghost_head}}`: - Render `amphtml` link in metadata for post, which links to the amp post (`getAmpUrl`) - Updates all test in metadata to support `amp` context - Changes context conditionals to work with full array instead of first array value - Adds conditionals, so no additional javascript gets rendered in `{{ghost_head}}` - Removes trailing `/amp/` in URLs, so only `amphtml` link on regular post renders it - Adds a conditional, so no code injection will be included, for an `amp` context. - `{{amp_components}}`: - AMP app uses new helper `{{amp_components}}` to render necessary script tags for AMP extended components as `amp-iframe`, `amp-anime` and `amp-form` - Adds test for `{{amp_components}}`
2016-08-22 19:49:27 +03:00
🐛 fix: make small media types not stretch (#7265) no issue Fixes a bug with displaying small media types like images or gif. Two reasons for that: 1. In many cases, we only have the relative URL instead of the absolute URL for the media source and therefore, `Amperize` module wasn't able to detect the image size and set the default image size of `width="600"` and `height="400"`. 2. Even if we have detected the correct image size, the attribute `layout="default"` would still make it strech. This issue is fixed in `Amperize`, but it wasn't merged at this time, so I set the dependency on my fork. Adds `amp-anim` to the `.post-content` class, to have same CSS style as an image.
2016-08-25 12:09:25 +03:00
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);
Fixed "no-shadow" eslint warning in tests refs https://github.com/TryGhost/eslint-plugin-ghost/commit/b6728ecb0f3385789497943648443cea5e3f8cf9 - The "no-shadow" eslint rune was introduced into ghost's eslint plugin (referenced commmit), which resulted in flood of warning in console output when linting the project codebase. - This cleanup is aiming to make any new linting issues more visible. Follow up commits will contain similar cleanups in other parts of the codebase
2020-10-19 07:45:26 +03:00
ampResult.then(function (cachedResult) {
should.exist(cachedResult);
🐛 fix: make small media types not stretch (#7265) no issue Fixes a bug with displaying small media types like images or gif. Two reasons for that: 1. In many cases, we only have the relative URL instead of the absolute URL for the media source and therefore, `Amperize` module wasn't able to detect the image size and set the default image size of `width="600"` and `height="400"`. 2. Even if we have detected the correct image size, the attribute `layout="default"` would still make it strech. This issue is fixed in `Amperize`, but it wasn't merged at this time, so I set the dependency on my fork. Adds `amp-anim` to the `.post-content` class, to have same CSS style as an image.
2016-08-25 12:09:25 +03:00
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
Fixed "no-shadow" eslint warning in tests refs https://github.com/TryGhost/eslint-plugin-ghost/commit/b6728ecb0f3385789497943648443cea5e3f8cf9 - The "no-shadow" eslint rune was introduced into ghost's eslint plugin (referenced commmit), which resulted in flood of warning in console output when linting the project codebase. - This cleanup is aiming to make any new linting issues more visible. Follow up commits will contain similar cleanups in other parts of the codebase
2020-10-19 07:45:26 +03:00
cachedResult.string.should.equal(testData2.html);
🐛 fix: make small media types not stretch (#7265) no issue Fixes a bug with displaying small media types like images or gif. Two reasons for that: 1. In many cases, we only have the relative URL instead of the absolute URL for the media source and therefore, `Amperize` module wasn't able to detect the image size and set the default image size of `width="600"` and `height="400"`. 2. Even if we have detected the correct image size, the attribute `layout="default"` would still make it strech. This issue is fixed in `Amperize`, but it wasn't merged at this time, so I set the dependency on my fork. Adds `amp-anim` to the `.post-content` class, to have same CSS style as an image.
2016-08-25 12:09:25 +03:00
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);
});
✨ [FEATURE] AMP⚡ (#7229) closes #6588, #7095 * `ImageObject` with image dimensions (#7152, #7151, #7153) - Returns meta data as promise - returns a new Promise from meta data - uses `Promise.props()` to resolve `getClient()` and `getMetaData()` - Adds 'image-size' util The util returns an object like this ``` { height: 50, url: 'http://myblog.com/images/cat.jpg', width: 50 }; ``` if the dimensions can be fetched and rejects with error, if not. In case we get a locally stored image or a not complete url (like `//www.gravatar.com/andsoon`), we add the protocol to the incomplete one and use `urlFor()` to get the absolute URL. If the request fails or `image-size` is not able to read the file, we reject with error. - adds 'image-size' module to dependencies - adds `getImageSizeFromUrl` function that returns image dimensions - In preparation of AMP support and to improve our schema.org JSON-LD and structured data, I made the following changes: - Changes the following properties to be `Objects`, which have a `url` property by default and a `dimensions` property, if `width` and `height` are available: - `metaData.coverImage` - `metaData.authorImage` - `metaData.blog.logo` - Checks cache by calling `getCachedImageSizeFromUrl`. If image dimensions were fetched already, returns them from cache instead of fetching them again. - If we have image dimensions on hand, the output in our JSON-LD changes from normal urls to be full `ImageObjects`. Applies to all images and logos. - Special case for `publisher.logo` as it has size restrictions: if the image doesn't fulfil the restrictions (<=600 width and <=60 height), we simply output the url instead, so like before. - Adds new property for schema.org JSON-LD: `mainEntityOfPage` as an Object. - Adds additional Open Graph data (if we have the image size): `og:image:width` and `og:image:height` - Adds/updates tests * AMP router and controller (#7171, #7157) Implements AMP in `/apps/`: - renders `amp.hbs` if route is `/:slug/amp/` - updates `setResponseContext` to set context to `['amp', 'post']` for a amp post and `['amp', 'page']` for a page, but will not render amp template for a page - updates `context_spec` - registers 'amp' as new internal app - adds the `amp.hbs` template to `core/server/apps/amp` which will be the default template for AMP posts. - adds `isAmpURL` to `post-lookup` * 🎨 Use `context` in meta as array (#7205) Instead of reading the first value of the context array, we're checking if it includes certain context values. This is a preparation change for AMP, where the context will be delivered as `['amp', 'post']`. * ✨ AMP helpers (#7174, #7216, #7215, #7223) - Adds AMP helpers `{{amp_content}}`, `{{amp_component}}` and `{{amp_ghost_head}}` to support AMP: - `{{amp_content}}`: - Adds `Amperize` as dependency - AMP app uses new helper `{{amp_content}}` to render AMP HTML - `Amperize` transforms regular HTML into AMP HTML - Adds test for `{{amp_content}}` helper - Adds 'Sanitize-HTML` as dependendy - After the HTML get 'amperized' we still might have some HTML tags, which are prohibited in AMP HTML, so we use `sanitize-html` to remove those. With every update, `Amperize` gets and it is able to transform more HTML tags, they valid AMP HTML tags (e. g. `video` and `amp-video`) and will therefore not be removed. - `{{amp_ghost_head}}`: - registers `{{amp_ghost_head}}` helper, but uses `{{ghost_head}}` code - uses `{{amp_ghost_head}}` in `amp.hbs` instead of `{{ghost_head}}` - `{{ghost_head}}`: - Render `amphtml` link in metadata for post, which links to the amp post (`getAmpUrl`) - Updates all test in metadata to support `amp` context - Changes context conditionals to work with full array instead of first array value - Adds conditionals, so no additional javascript gets rendered in `{{ghost_head}}` - Removes trailing `/amp/` in URLs, so only `amphtml` link on regular post renders it - Adds a conditional, so no code injection will be included, for an `amp` context. - `{{amp_components}}`: - AMP app uses new helper `{{amp_components}}` to render necessary script tags for AMP extended components as `amp-iframe`, `amp-anime` and `amp-form` - Adds test for `{{amp_components}}`
2016-08-22 19:49:27 +03:00
});
🐛 fix: make small media types not stretch (#7265) no issue Fixes a bug with displaying small media types like images or gif. Two reasons for that: 1. In many cases, we only have the relative URL instead of the absolute URL for the media source and therefore, `Amperize` module wasn't able to detect the image size and set the default image size of `width="600"` and `height="400"`. 2. Even if we have detected the correct image size, the attribute `layout="default"` would still make it strech. This issue is fixed in `Amperize`, but it wasn't merged at this time, so I set the dependency on my fork. Adds `amp-anim` to the `.post-content` class, to have same CSS style as an image.
2016-08-25 12:09:25 +03:00
describe('Transforms and sanitizes HTML', function () {
beforeEach(function () {
Updated links to docs (#10941) no issue
2019-07-22 13:17:50 +03:00
ampContentHelper.__set__('urlUtils', urlUtils.getInstance({url: 'https://ghost.org/blog/'}));
🐛 fix: make small media types not stretch (#7265) no issue Fixes a bug with displaying small media types like images or gif. Two reasons for that: 1. In many cases, we only have the relative URL instead of the absolute URL for the media source and therefore, `Amperize` module wasn't able to detect the image size and set the default image size of `width="600"` and `height="400"`. 2. Even if we have detected the correct image size, the attribute `layout="default"` would still make it strech. This issue is fixed in `Amperize`, but it wasn't merged at this time, so I set the dependency on my fork. Adds `amp-anim` to the `.post-content` class, to have same CSS style as an image.
2016-08-25 12:09:25 +03:00
});
✨ [FEATURE] AMP⚡ (#7229) closes #6588, #7095 * `ImageObject` with image dimensions (#7152, #7151, #7153) - Returns meta data as promise - returns a new Promise from meta data - uses `Promise.props()` to resolve `getClient()` and `getMetaData()` - Adds 'image-size' util The util returns an object like this ``` { height: 50, url: 'http://myblog.com/images/cat.jpg', width: 50 }; ``` if the dimensions can be fetched and rejects with error, if not. In case we get a locally stored image or a not complete url (like `//www.gravatar.com/andsoon`), we add the protocol to the incomplete one and use `urlFor()` to get the absolute URL. If the request fails or `image-size` is not able to read the file, we reject with error. - adds 'image-size' module to dependencies - adds `getImageSizeFromUrl` function that returns image dimensions - In preparation of AMP support and to improve our schema.org JSON-LD and structured data, I made the following changes: - Changes the following properties to be `Objects`, which have a `url` property by default and a `dimensions` property, if `width` and `height` are available: - `metaData.coverImage` - `metaData.authorImage` - `metaData.blog.logo` - Checks cache by calling `getCachedImageSizeFromUrl`. If image dimensions were fetched already, returns them from cache instead of fetching them again. - If we have image dimensions on hand, the output in our JSON-LD changes from normal urls to be full `ImageObjects`. Applies to all images and logos. - Special case for `publisher.logo` as it has size restrictions: if the image doesn't fulfil the restrictions (<=600 width and <=60 height), we simply output the url instead, so like before. - Adds new property for schema.org JSON-LD: `mainEntityOfPage` as an Object. - Adds additional Open Graph data (if we have the image size): `og:image:width` and `og:image:height` - Adds/updates tests * AMP router and controller (#7171, #7157) Implements AMP in `/apps/`: - renders `amp.hbs` if route is `/:slug/amp/` - updates `setResponseContext` to set context to `['amp', 'post']` for a amp post and `['amp', 'page']` for a page, but will not render amp template for a page - updates `context_spec` - registers 'amp' as new internal app - adds the `amp.hbs` template to `core/server/apps/amp` which will be the default template for AMP posts. - adds `isAmpURL` to `post-lookup` * 🎨 Use `context` in meta as array (#7205) Instead of reading the first value of the context array, we're checking if it includes certain context values. This is a preparation change for AMP, where the context will be delivered as `['amp', 'post']`. * ✨ AMP helpers (#7174, #7216, #7215, #7223) - Adds AMP helpers `{{amp_content}}`, `{{amp_component}}` and `{{amp_ghost_head}}` to support AMP: - `{{amp_content}}`: - Adds `Amperize` as dependency - AMP app uses new helper `{{amp_content}}` to render AMP HTML - `Amperize` transforms regular HTML into AMP HTML - Adds test for `{{amp_content}}` helper - Adds 'Sanitize-HTML` as dependendy - After the HTML get 'amperized' we still might have some HTML tags, which are prohibited in AMP HTML, so we use `sanitize-html` to remove those. With every update, `Amperize` gets and it is able to transform more HTML tags, they valid AMP HTML tags (e. g. `video` and `amp-video`) and will therefore not be removed. - `{{amp_ghost_head}}`: - registers `{{amp_ghost_head}}` helper, but uses `{{ghost_head}}` code - uses `{{amp_ghost_head}}` in `amp.hbs` instead of `{{ghost_head}}` - `{{ghost_head}}`: - Render `amphtml` link in metadata for post, which links to the amp post (`getAmpUrl`) - Updates all test in metadata to support `amp` context - Changes context conditionals to work with full array instead of first array value - Adds conditionals, so no additional javascript gets rendered in `{{ghost_head}}` - Removes trailing `/amp/` in URLs, so only `amphtml` link on regular post renders it - Adds a conditional, so no code injection will be included, for an `amp` context. - `{{amp_components}}`: - AMP app uses new helper `{{amp_components}}` to render necessary script tags for AMP extended components as `amp-iframe`, `amp-anime` and `amp-form` - Adds test for `{{amp_components}}`
2016-08-22 19:49:27 +03:00
🐛 fix: make small media types not stretch (#7265) no issue Fixes a bug with displaying small media types like images or gif. Two reasons for that: 1. In many cases, we only have the relative URL instead of the absolute URL for the media source and therefore, `Amperize` module wasn't able to detect the image size and set the default image size of `width="600"` and `height="400"`. 2. Even if we have detected the correct image size, the attribute `layout="default"` would still make it strech. This issue is fixed in `Amperize`, but it wasn't merged at this time, so I set the dependency on my fork. Adds `amp-anim` to the `.post-content` class, to have same CSS style as an image.
2016-08-25 12:09:25 +03:00
afterEach(function () {
ampContentHelper.__set__('amperizeCache', {});
});
✨ [FEATURE] AMP⚡ (#7229) closes #6588, #7095 * `ImageObject` with image dimensions (#7152, #7151, #7153) - Returns meta data as promise - returns a new Promise from meta data - uses `Promise.props()` to resolve `getClient()` and `getMetaData()` - Adds 'image-size' util The util returns an object like this ``` { height: 50, url: 'http://myblog.com/images/cat.jpg', width: 50 }; ``` if the dimensions can be fetched and rejects with error, if not. In case we get a locally stored image or a not complete url (like `//www.gravatar.com/andsoon`), we add the protocol to the incomplete one and use `urlFor()` to get the absolute URL. If the request fails or `image-size` is not able to read the file, we reject with error. - adds 'image-size' module to dependencies - adds `getImageSizeFromUrl` function that returns image dimensions - In preparation of AMP support and to improve our schema.org JSON-LD and structured data, I made the following changes: - Changes the following properties to be `Objects`, which have a `url` property by default and a `dimensions` property, if `width` and `height` are available: - `metaData.coverImage` - `metaData.authorImage` - `metaData.blog.logo` - Checks cache by calling `getCachedImageSizeFromUrl`. If image dimensions were fetched already, returns them from cache instead of fetching them again. - If we have image dimensions on hand, the output in our JSON-LD changes from normal urls to be full `ImageObjects`. Applies to all images and logos. - Special case for `publisher.logo` as it has size restrictions: if the image doesn't fulfil the restrictions (<=600 width and <=60 height), we simply output the url instead, so like before. - Adds new property for schema.org JSON-LD: `mainEntityOfPage` as an Object. - Adds additional Open Graph data (if we have the image size): `og:image:width` and `og:image:height` - Adds/updates tests * AMP router and controller (#7171, #7157) Implements AMP in `/apps/`: - renders `amp.hbs` if route is `/:slug/amp/` - updates `setResponseContext` to set context to `['amp', 'post']` for a amp post and `['amp', 'page']` for a page, but will not render amp template for a page - updates `context_spec` - registers 'amp' as new internal app - adds the `amp.hbs` template to `core/server/apps/amp` which will be the default template for AMP posts. - adds `isAmpURL` to `post-lookup` * 🎨 Use `context` in meta as array (#7205) Instead of reading the first value of the context array, we're checking if it includes certain context values. This is a preparation change for AMP, where the context will be delivered as `['amp', 'post']`. * ✨ AMP helpers (#7174, #7216, #7215, #7223) - Adds AMP helpers `{{amp_content}}`, `{{amp_component}}` and `{{amp_ghost_head}}` to support AMP: - `{{amp_content}}`: - Adds `Amperize` as dependency - AMP app uses new helper `{{amp_content}}` to render AMP HTML - `Amperize` transforms regular HTML into AMP HTML - Adds test for `{{amp_content}}` helper - Adds 'Sanitize-HTML` as dependendy - After the HTML get 'amperized' we still might have some HTML tags, which are prohibited in AMP HTML, so we use `sanitize-html` to remove those. With every update, `Amperize` gets and it is able to transform more HTML tags, they valid AMP HTML tags (e. g. `video` and `amp-video`) and will therefore not be removed. - `{{amp_ghost_head}}`: - registers `{{amp_ghost_head}}` helper, but uses `{{ghost_head}}` code - uses `{{amp_ghost_head}}` in `amp.hbs` instead of `{{ghost_head}}` - `{{ghost_head}}`: - Render `amphtml` link in metadata for post, which links to the amp post (`getAmpUrl`) - Updates all test in metadata to support `amp` context - Changes context conditionals to work with full array instead of first array value - Adds conditionals, so no additional javascript gets rendered in `{{ghost_head}}` - Removes trailing `/amp/` in URLs, so only `amphtml` link on regular post renders it - Adds a conditional, so no code injection will be included, for an `amp` context. - `{{amp_components}}`: - AMP app uses new helper `{{amp_components}}` to render necessary script tags for AMP extended components as `amp-iframe`, `amp-anime` and `amp-form` - Adds test for `{{amp_components}}`
2016-08-22 19:49:27 +03:00
🐛 fix: make small media types not stretch (#7265) no issue Fixes a bug with displaying small media types like images or gif. Two reasons for that: 1. In many cases, we only have the relative URL instead of the absolute URL for the media source and therefore, `Amperize` module wasn't able to detect the image size and set the default image size of `width="600"` and `height="400"`. 2. Even if we have detected the correct image size, the attribute `layout="default"` would still make it strech. This issue is fixed in `Amperize`, but it wasn't merged at this time, so I set the dependency on my fork. Adds `amp-anim` to the `.post-content` class, to have same CSS style as an image.
2016-08-25 12:09:25 +03:00
it('can transform img tags to amp-img', function (done) {
Mocked network access for {{amp_content}} img unit test (#10792) no issue - unit test was fetching images over the network which could cause random test failures on poor connections
2019-06-19 09:56:30 +03:00
const GIF1x1 = Buffer.from('R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==', 'base64');
Updated links to docs (#10941) no issue
2019-07-22 13:17:50 +03:00
nock('https://ghost.org/blog/')
Mocked network access for {{amp_content}} img unit test (#10792) no issue - unit test was fetching images over the network which could cause random test failures on poor connections
2019-06-19 09:56:30 +03:00
.get('/content/images/2019/06/test.jpg')
.reply(200, GIF1x1);
Updated var declarations to const/let and no lists - All var declarations are now const or let as per ES6 - All comma-separated lists / chained declarations are now one declaration per line - This is for clarity/readability but also made running the var-to-const/let switch smoother - ESLint rules updated to match How this was done: - npm install -g jscodeshift - git clone https://github.com/cpojer/js-codemod.git - git clone git@github.com:TryGhost/Ghost.git shallow-ghost - cd shallow-ghost - jscodeshift -t ../js-codemod/transforms/unchain-variables.js . -v=2 - jscodeshift -t ../js-codemod/transforms/no-vars.js . -v=2 - yarn - yarn test - yarn lint / fix various lint errors (almost all indent) by opening files and saving in vscode - grunt test-regression - sorted!
2020-04-29 18:44:27 +03:00
const testData = {
html: '<img src="/content/images/2019/06/test.jpg" alt="The Ghost Logo" />',
updated_at: 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)',
id: 1
};
const expectedResult = '<amp-img src="https://ghost.org/blog/content/images/2019/06/test.jpg" alt="The Ghost Logo" width="1" height="1" layout="fixed"></amp-img>';
const ampResult = ampContentHelper.call(testData);
✨ [FEATURE] AMP⚡ (#7229) closes #6588, #7095 * `ImageObject` with image dimensions (#7152, #7151, #7153) - Returns meta data as promise - returns a new Promise from meta data - uses `Promise.props()` to resolve `getClient()` and `getMetaData()` - Adds 'image-size' util The util returns an object like this ``` { height: 50, url: 'http://myblog.com/images/cat.jpg', width: 50 }; ``` if the dimensions can be fetched and rejects with error, if not. In case we get a locally stored image or a not complete url (like `//www.gravatar.com/andsoon`), we add the protocol to the incomplete one and use `urlFor()` to get the absolute URL. If the request fails or `image-size` is not able to read the file, we reject with error. - adds 'image-size' module to dependencies - adds `getImageSizeFromUrl` function that returns image dimensions - In preparation of AMP support and to improve our schema.org JSON-LD and structured data, I made the following changes: - Changes the following properties to be `Objects`, which have a `url` property by default and a `dimensions` property, if `width` and `height` are available: - `metaData.coverImage` - `metaData.authorImage` - `metaData.blog.logo` - Checks cache by calling `getCachedImageSizeFromUrl`. If image dimensions were fetched already, returns them from cache instead of fetching them again. - If we have image dimensions on hand, the output in our JSON-LD changes from normal urls to be full `ImageObjects`. Applies to all images and logos. - Special case for `publisher.logo` as it has size restrictions: if the image doesn't fulfil the restrictions (<=600 width and <=60 height), we simply output the url instead, so like before. - Adds new property for schema.org JSON-LD: `mainEntityOfPage` as an Object. - Adds additional Open Graph data (if we have the image size): `og:image:width` and `og:image:height` - Adds/updates tests * AMP router and controller (#7171, #7157) Implements AMP in `/apps/`: - renders `amp.hbs` if route is `/:slug/amp/` - updates `setResponseContext` to set context to `['amp', 'post']` for a amp post and `['amp', 'page']` for a page, but will not render amp template for a page - updates `context_spec` - registers 'amp' as new internal app - adds the `amp.hbs` template to `core/server/apps/amp` which will be the default template for AMP posts. - adds `isAmpURL` to `post-lookup` * 🎨 Use `context` in meta as array (#7205) Instead of reading the first value of the context array, we're checking if it includes certain context values. This is a preparation change for AMP, where the context will be delivered as `['amp', 'post']`. * ✨ AMP helpers (#7174, #7216, #7215, #7223) - Adds AMP helpers `{{amp_content}}`, `{{amp_component}}` and `{{amp_ghost_head}}` to support AMP: - `{{amp_content}}`: - Adds `Amperize` as dependency - AMP app uses new helper `{{amp_content}}` to render AMP HTML - `Amperize` transforms regular HTML into AMP HTML - Adds test for `{{amp_content}}` helper - Adds 'Sanitize-HTML` as dependendy - After the HTML get 'amperized' we still might have some HTML tags, which are prohibited in AMP HTML, so we use `sanitize-html` to remove those. With every update, `Amperize` gets and it is able to transform more HTML tags, they valid AMP HTML tags (e. g. `video` and `amp-video`) and will therefore not be removed. - `{{amp_ghost_head}}`: - registers `{{amp_ghost_head}}` helper, but uses `{{ghost_head}}` code - uses `{{amp_ghost_head}}` in `amp.hbs` instead of `{{ghost_head}}` - `{{ghost_head}}`: - Render `amphtml` link in metadata for post, which links to the amp post (`getAmpUrl`) - Updates all test in metadata to support `amp` context - Changes context conditionals to work with full array instead of first array value - Adds conditionals, so no additional javascript gets rendered in `{{ghost_head}}` - Removes trailing `/amp/` in URLs, so only `amphtml` link on regular post renders it - Adds a conditional, so no code injection will be included, for an `amp` context. - `{{amp_components}}`: - AMP app uses new helper `{{amp_components}}` to render necessary script tags for AMP extended components as `amp-iframe`, `amp-anime` and `amp-form` - Adds test for `{{amp_components}}`
2016-08-22 19:49:27 +03:00
🐛 fix: make small media types not stretch (#7265) no issue Fixes a bug with displaying small media types like images or gif. Two reasons for that: 1. In many cases, we only have the relative URL instead of the absolute URL for the media source and therefore, `Amperize` module wasn't able to detect the image size and set the default image size of `width="600"` and `height="400"`. 2. Even if we have detected the correct image size, the attribute `layout="default"` would still make it strech. This issue is fixed in `Amperize`, but it wasn't merged at this time, so I set the dependency on my fork. Adds `amp-anim` to the `.post-content` class, to have same CSS style as an image.
2016-08-25 12:09:25 +03:00
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) {
Updated var declarations to const/let and no lists - All var declarations are now const or let as per ES6 - All comma-separated lists / chained declarations are now one declaration per line - This is for clarity/readability but also made running the var-to-const/let switch smoother - ESLint rules updated to match How this was done: - npm install -g jscodeshift - git clone https://github.com/cpojer/js-codemod.git - git clone git@github.com:TryGhost/Ghost.git shallow-ghost - cd shallow-ghost - jscodeshift -t ../js-codemod/transforms/unchain-variables.js . -v=2 - jscodeshift -t ../js-codemod/transforms/no-vars.js . -v=2 - yarn - yarn test - yarn lint / fix various lint errors (almost all indent) by opening files and saving in vscode - grunt test-regression - sorted!
2020-04-29 18:44:27 +03:00
const testData = {
html: '<audio controls="controls" width="auto" height="50" autoplay="mobile">Your browser does not support the <code>audio</code> element.<source src="https://audio.com/foo.wav" type="audio/wav"></audio>' +
🐛 🎨 Improves AMP validation for video and iframe (#7270) no issue Video tags aren't supported in Amperize yet, therefore, we strip them out. If a `<video>` tag has nested `<source>` elements, they would stay because they are whitelisted regarding `Sanitize`, as we use them for `<audio>` tags as well. This PR uses `cheerio` to strip out in `<video>` nested `<source>` tags, without removing the fallback text. It also removes prohibites attributes for `<amp-iframe>` which are e. g. used by Vimeo embeds. Removes every kind of inline `style` attributes, as they will cause validation errors as well.
2016-08-25 13:47:28 +03:00
'<audio src="http://audio.com/foo.ogg"><track kind="captions" src="http://audio.com/foo.en.vtt" srclang="en" label="English"><source kind="captions" src="http://audio.com/foo.sv.vtt" srclang="sv" label="Svenska"></audio>',
Updated var declarations to const/let and no lists - All var declarations are now const or let as per ES6 - All comma-separated lists / chained declarations are now one declaration per line - This is for clarity/readability but also made running the var-to-const/let switch smoother - ESLint rules updated to match How this was done: - npm install -g jscodeshift - git clone https://github.com/cpojer/js-codemod.git - git clone git@github.com:TryGhost/Ghost.git shallow-ghost - cd shallow-ghost - jscodeshift -t ../js-codemod/transforms/unchain-variables.js . -v=2 - jscodeshift -t ../js-codemod/transforms/no-vars.js . -v=2 - yarn - yarn test - yarn lint / fix various lint errors (almost all indent) by opening files and saving in vscode - grunt test-regression - sorted!
2020-04-29 18:44:27 +03:00
updated_at: 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)',
id: 1
};
const expectedResult = '<amp-audio controls="controls" width="auto" height="50" autoplay="mobile">Your browser does not support the <code>audio</code> element.<source src="https://audio.com/foo.wav" type="audio/wav" /></amp-audio>' +
'<amp-audio src="https://audio.com/foo.ogg"><track kind="captions" src="https://audio.com/foo.en.vtt" srclang="en" label="English" /><source kind="captions" src="https://audio.com/foo.sv.vtt" srclang="sv" label="Svenska" /></amp-audio>';
const ampResult = ampContentHelper.call(testData);
🐛 🎨 Improves AMP validation for video and iframe (#7270) no issue Video tags aren't supported in Amperize yet, therefore, we strip them out. If a `<video>` tag has nested `<source>` elements, they would stay because they are whitelisted regarding `Sanitize`, as we use them for `<audio>` tags as well. This PR uses `cheerio` to strip out in `<video>` nested `<source>` tags, without removing the fallback text. It also removes prohibites attributes for `<amp-iframe>` which are e. g. used by Vimeo embeds. Removes every kind of inline `style` attributes, as they will cause validation errors as well.
2016-08-25 13:47:28 +03:00
ampResult.then(function (rendered) {
should.exist(rendered);
rendered.string.should.equal(expectedResult);
done();
}).catch(done);
});
it('removes video tags including source children', function (done) {
Updated var declarations to const/let and no lists - All var declarations are now const or let as per ES6 - All comma-separated lists / chained declarations are now one declaration per line - This is for clarity/readability but also made running the var-to-const/let switch smoother - ESLint rules updated to match How this was done: - npm install -g jscodeshift - git clone https://github.com/cpojer/js-codemod.git - git clone git@github.com:TryGhost/Ghost.git shallow-ghost - cd shallow-ghost - jscodeshift -t ../js-codemod/transforms/unchain-variables.js . -v=2 - jscodeshift -t ../js-codemod/transforms/no-vars.js . -v=2 - yarn - yarn test - yarn lint / fix various lint errors (almost all indent) by opening files and saving in vscode - grunt test-regression - sorted!
2020-04-29 18:44:27 +03:00
const testData = {
html: '<video width="480" controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" >' +
🐛 Remove oldschool HTML attribrutes (#7309) no issue Uses `allowedAttributes` functionality of `Sanitize` HTML and whitelists attributes for certain tags, regarding AMP validation rules. This PR fixes issues with inline style like `border`, `bgcolor`, `align` and so on.
2016-09-01 17:05:39 +03:00
'<track kind="captions" src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" srclang="en">' +
🐛 🎨 Improves AMP validation for video and iframe (#7270) no issue Video tags aren't supported in Amperize yet, therefore, we strip them out. If a `<video>` tag has nested `<source>` elements, they would stay because they are whitelisted regarding `Sanitize`, as we use them for `<audio>` tags as well. This PR uses `cheerio` to strip out in `<video>` nested `<source>` tags, without removing the fallback text. It also removes prohibites attributes for `<amp-iframe>` which are e. g. used by Vimeo embeds. Removes every kind of inline `style` attributes, as they will cause validation errors as well.
2016-08-25 13:47:28 +03:00
'<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm">' +
'<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" type="video/mp4">' +
'Your browser doesn\'t support HTML5 video tag.' +
'</video>',
Updated var declarations to const/let and no lists - All var declarations are now const or let as per ES6 - All comma-separated lists / chained declarations are now one declaration per line - This is for clarity/readability but also made running the var-to-const/let switch smoother - ESLint rules updated to match How this was done: - npm install -g jscodeshift - git clone https://github.com/cpojer/js-codemod.git - git clone git@github.com:TryGhost/Ghost.git shallow-ghost - cd shallow-ghost - jscodeshift -t ../js-codemod/transforms/unchain-variables.js . -v=2 - jscodeshift -t ../js-codemod/transforms/no-vars.js . -v=2 - yarn - yarn test - yarn lint / fix various lint errors (almost all indent) by opening files and saving in vscode - grunt test-regression - sorted!
2020-04-29 18:44:27 +03:00
updated_at: 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)',
id: 1
};
const expectedResult = 'Your browser doesn\'t support HTML5 video tag.';
const ampResult = ampContentHelper.call(testData);
🐛 🎨 Improves AMP validation for video and iframe (#7270) no issue Video tags aren't supported in Amperize yet, therefore, we strip them out. If a `<video>` tag has nested `<source>` elements, they would stay because they are whitelisted regarding `Sanitize`, as we use them for `<audio>` tags as well. This PR uses `cheerio` to strip out in `<video>` nested `<source>` tags, without removing the fallback text. It also removes prohibites attributes for `<amp-iframe>` which are e. g. used by Vimeo embeds. Removes every kind of inline `style` attributes, as they will cause validation errors as well.
2016-08-25 13:47:28 +03:00
ampResult.then(function (rendered) {
should.exist(rendered);
rendered.string.should.equal(expectedResult);
done();
}).catch(done);
});
it('removes inline style', function (done) {
Updated var declarations to const/let and no lists - All var declarations are now const or let as per ES6 - All comma-separated lists / chained declarations are now one declaration per line - This is for clarity/readability but also made running the var-to-const/let switch smoother - ESLint rules updated to match How this was done: - npm install -g jscodeshift - git clone https://github.com/cpojer/js-codemod.git - git clone git@github.com:TryGhost/Ghost.git shallow-ghost - cd shallow-ghost - jscodeshift -t ../js-codemod/transforms/unchain-variables.js . -v=2 - jscodeshift -t ../js-codemod/transforms/no-vars.js . -v=2 - yarn - yarn test - yarn lint / fix various lint errors (almost all indent) by opening files and saving in vscode - grunt test-regression - sorted!
2020-04-29 18:44:27 +03:00
const testData = {
html: '<amp-img src="/content/images/2016/08/aileen_small.jpg" style="border-radius: 50%"; !important' +
🐛 Remove oldschool HTML attribrutes (#7309) no issue Uses `allowedAttributes` functionality of `Sanitize` HTML and whitelists attributes for certain tags, regarding AMP validation rules. This PR fixes issues with inline style like `border`, `bgcolor`, `align` and so on.
2016-09-01 17:05:39 +03:00
'border="0" align="center" font="Arial" width="50" height="50" layout="responsive"></amp-img>' +
'<p align="right" style="color: red; !important" bgcolor="white">Hello</p>' +
'<table style="width:100%"><tr bgcolor="tomato" colspan="2"><th font="Arial">Name:</th> ' +
'<td color="white" colspan="2">Bill Gates</td></tr><tr><th rowspan="2" valign="center">Telephone:</th> ' +
'<td>55577854</td></tr></table>',
Updated var declarations to const/let and no lists - All var declarations are now const or let as per ES6 - All comma-separated lists / chained declarations are now one declaration per line - This is for clarity/readability but also made running the var-to-const/let switch smoother - ESLint rules updated to match How this was done: - npm install -g jscodeshift - git clone https://github.com/cpojer/js-codemod.git - git clone git@github.com:TryGhost/Ghost.git shallow-ghost - cd shallow-ghost - jscodeshift -t ../js-codemod/transforms/unchain-variables.js . -v=2 - jscodeshift -t ../js-codemod/transforms/no-vars.js . -v=2 - yarn - yarn test - yarn lint / fix various lint errors (almost all indent) by opening files and saving in vscode - grunt test-regression - sorted!
2020-04-29 18:44:27 +03:00
updated_at: 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)',
id: 1
};
const expectedResult = '<amp-img src="https://ghost.org/blog/content/images/2016/08/aileen_small.jpg" width="50" ' +
'height="50" layout="responsive"></amp-img><p align="right">Hello</p>' +
'<table><tr bgcolor="tomato"><th>Name:</th> ' +
'<td colspan="2">Bill Gates</td></tr><tr><th rowspan="2" valign="center">Telephone:</th> ' +
'<td>55577854</td></tr></table>';
const ampResult = ampContentHelper.call(testData);
🐛 🎨 Improves AMP validation for video and iframe (#7270) no issue Video tags aren't supported in Amperize yet, therefore, we strip them out. If a `<video>` tag has nested `<source>` elements, they would stay because they are whitelisted regarding `Sanitize`, as we use them for `<audio>` tags as well. This PR uses `cheerio` to strip out in `<video>` nested `<source>` tags, without removing the fallback text. It also removes prohibites attributes for `<amp-iframe>` which are e. g. used by Vimeo embeds. Removes every kind of inline `style` attributes, as they will cause validation errors as well.
2016-08-25 13:47:28 +03:00
ampResult.then(function (rendered) {
should.exist(rendered);
rendered.string.should.equal(expectedResult);
done();
}).catch(done);
});
it('removes prohibited iframe attributes', function (done) {
Updated var declarations to const/let and no lists - All var declarations are now const or let as per ES6 - All comma-separated lists / chained declarations are now one declaration per line - This is for clarity/readability but also made running the var-to-const/let switch smoother - ESLint rules updated to match How this was done: - npm install -g jscodeshift - git clone https://github.com/cpojer/js-codemod.git - git clone git@github.com:TryGhost/Ghost.git shallow-ghost - cd shallow-ghost - jscodeshift -t ../js-codemod/transforms/unchain-variables.js . -v=2 - jscodeshift -t ../js-codemod/transforms/no-vars.js . -v=2 - yarn - yarn test - yarn lint / fix various lint errors (almost all indent) by opening files and saving in vscode - grunt test-regression - sorted!
2020-04-29 18:44:27 +03:00
const testData = {
html: '<iframe src="https://player.vimeo.com/video/180069681?color=ffffff" width="640" height="267" frameborder="0" ' +
🐛 🎨 Improves AMP validation for video and iframe (#7270) no issue Video tags aren't supported in Amperize yet, therefore, we strip them out. If a `<video>` tag has nested `<source>` elements, they would stay because they are whitelisted regarding `Sanitize`, as we use them for `<audio>` tags as well. This PR uses `cheerio` to strip out in `<video>` nested `<source>` tags, without removing the fallback text. It also removes prohibites attributes for `<amp-iframe>` which are e. g. used by Vimeo embeds. Removes every kind of inline `style` attributes, as they will cause validation errors as well.
2016-08-25 13:47:28 +03:00
'webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>',
Updated var declarations to const/let and no lists - All var declarations are now const or let as per ES6 - All comma-separated lists / chained declarations are now one declaration per line - This is for clarity/readability but also made running the var-to-const/let switch smoother - ESLint rules updated to match How this was done: - npm install -g jscodeshift - git clone https://github.com/cpojer/js-codemod.git - git clone git@github.com:TryGhost/Ghost.git shallow-ghost - cd shallow-ghost - jscodeshift -t ../js-codemod/transforms/unchain-variables.js . -v=2 - jscodeshift -t ../js-codemod/transforms/no-vars.js . -v=2 - yarn - yarn test - yarn lint / fix various lint errors (almost all indent) by opening files and saving in vscode - grunt test-regression - sorted!
2020-04-29 18:44:27 +03:00
updated_at: 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)',
id: 1
};
const expectedResult = '<amp-iframe src="https://player.vimeo.com/video/180069681?color=ffffff" width="640" height="267" ' +
'frameborder="0" allowfullscreen sandbox="allow-scripts allow-same-origin" layout="responsive"></amp-iframe>';
const ampResult = ampContentHelper.call(testData);
✨ [FEATURE] AMP⚡ (#7229) closes #6588, #7095 * `ImageObject` with image dimensions (#7152, #7151, #7153) - Returns meta data as promise - returns a new Promise from meta data - uses `Promise.props()` to resolve `getClient()` and `getMetaData()` - Adds 'image-size' util The util returns an object like this ``` { height: 50, url: 'http://myblog.com/images/cat.jpg', width: 50 }; ``` if the dimensions can be fetched and rejects with error, if not. In case we get a locally stored image or a not complete url (like `//www.gravatar.com/andsoon`), we add the protocol to the incomplete one and use `urlFor()` to get the absolute URL. If the request fails or `image-size` is not able to read the file, we reject with error. - adds 'image-size' module to dependencies - adds `getImageSizeFromUrl` function that returns image dimensions - In preparation of AMP support and to improve our schema.org JSON-LD and structured data, I made the following changes: - Changes the following properties to be `Objects`, which have a `url` property by default and a `dimensions` property, if `width` and `height` are available: - `metaData.coverImage` - `metaData.authorImage` - `metaData.blog.logo` - Checks cache by calling `getCachedImageSizeFromUrl`. If image dimensions were fetched already, returns them from cache instead of fetching them again. - If we have image dimensions on hand, the output in our JSON-LD changes from normal urls to be full `ImageObjects`. Applies to all images and logos. - Special case for `publisher.logo` as it has size restrictions: if the image doesn't fulfil the restrictions (<=600 width and <=60 height), we simply output the url instead, so like before. - Adds new property for schema.org JSON-LD: `mainEntityOfPage` as an Object. - Adds additional Open Graph data (if we have the image size): `og:image:width` and `og:image:height` - Adds/updates tests * AMP router and controller (#7171, #7157) Implements AMP in `/apps/`: - renders `amp.hbs` if route is `/:slug/amp/` - updates `setResponseContext` to set context to `['amp', 'post']` for a amp post and `['amp', 'page']` for a page, but will not render amp template for a page - updates `context_spec` - registers 'amp' as new internal app - adds the `amp.hbs` template to `core/server/apps/amp` which will be the default template for AMP posts. - adds `isAmpURL` to `post-lookup` * 🎨 Use `context` in meta as array (#7205) Instead of reading the first value of the context array, we're checking if it includes certain context values. This is a preparation change for AMP, where the context will be delivered as `['amp', 'post']`. * ✨ AMP helpers (#7174, #7216, #7215, #7223) - Adds AMP helpers `{{amp_content}}`, `{{amp_component}}` and `{{amp_ghost_head}}` to support AMP: - `{{amp_content}}`: - Adds `Amperize` as dependency - AMP app uses new helper `{{amp_content}}` to render AMP HTML - `Amperize` transforms regular HTML into AMP HTML - Adds test for `{{amp_content}}` helper - Adds 'Sanitize-HTML` as dependendy - After the HTML get 'amperized' we still might have some HTML tags, which are prohibited in AMP HTML, so we use `sanitize-html` to remove those. With every update, `Amperize` gets and it is able to transform more HTML tags, they valid AMP HTML tags (e. g. `video` and `amp-video`) and will therefore not be removed. - `{{amp_ghost_head}}`: - registers `{{amp_ghost_head}}` helper, but uses `{{ghost_head}}` code - uses `{{amp_ghost_head}}` in `amp.hbs` instead of `{{ghost_head}}` - `{{ghost_head}}`: - Render `amphtml` link in metadata for post, which links to the amp post (`getAmpUrl`) - Updates all test in metadata to support `amp` context - Changes context conditionals to work with full array instead of first array value - Adds conditionals, so no additional javascript gets rendered in `{{ghost_head}}` - Removes trailing `/amp/` in URLs, so only `amphtml` link on regular post renders it - Adds a conditional, so no code injection will be included, for an `amp` context. - `{{amp_components}}`: - AMP app uses new helper `{{amp_components}}` to render necessary script tags for AMP extended components as `amp-iframe`, `amp-anime` and `amp-form` - Adds test for `{{amp_components}}`
2016-08-22 19:49:27 +03:00
🐛 fix: make small media types not stretch (#7265) no issue Fixes a bug with displaying small media types like images or gif. Two reasons for that: 1. In many cases, we only have the relative URL instead of the absolute URL for the media source and therefore, `Amperize` module wasn't able to detect the image size and set the default image size of `width="600"` and `height="400"`. 2. Even if we have detected the correct image size, the attribute `layout="default"` would still make it strech. This issue is fixed in `Amperize`, but it wasn't merged at this time, so I set the dependency on my fork. Adds `amp-anim` to the `.post-content` class, to have same CSS style as an image.
2016-08-25 12:09:25 +03:00
ampResult.then(function (rendered) {
should.exist(rendered);
rendered.string.should.equal(expectedResult);
done();
}).catch(done);
});
✨ [FEATURE] AMP⚡ (#7229) closes #6588, #7095 * `ImageObject` with image dimensions (#7152, #7151, #7153) - Returns meta data as promise - returns a new Promise from meta data - uses `Promise.props()` to resolve `getClient()` and `getMetaData()` - Adds 'image-size' util The util returns an object like this ``` { height: 50, url: 'http://myblog.com/images/cat.jpg', width: 50 }; ``` if the dimensions can be fetched and rejects with error, if not. In case we get a locally stored image or a not complete url (like `//www.gravatar.com/andsoon`), we add the protocol to the incomplete one and use `urlFor()` to get the absolute URL. If the request fails or `image-size` is not able to read the file, we reject with error. - adds 'image-size' module to dependencies - adds `getImageSizeFromUrl` function that returns image dimensions - In preparation of AMP support and to improve our schema.org JSON-LD and structured data, I made the following changes: - Changes the following properties to be `Objects`, which have a `url` property by default and a `dimensions` property, if `width` and `height` are available: - `metaData.coverImage` - `metaData.authorImage` - `metaData.blog.logo` - Checks cache by calling `getCachedImageSizeFromUrl`. If image dimensions were fetched already, returns them from cache instead of fetching them again. - If we have image dimensions on hand, the output in our JSON-LD changes from normal urls to be full `ImageObjects`. Applies to all images and logos. - Special case for `publisher.logo` as it has size restrictions: if the image doesn't fulfil the restrictions (<=600 width and <=60 height), we simply output the url instead, so like before. - Adds new property for schema.org JSON-LD: `mainEntityOfPage` as an Object. - Adds additional Open Graph data (if we have the image size): `og:image:width` and `og:image:height` - Adds/updates tests * AMP router and controller (#7171, #7157) Implements AMP in `/apps/`: - renders `amp.hbs` if route is `/:slug/amp/` - updates `setResponseContext` to set context to `['amp', 'post']` for a amp post and `['amp', 'page']` for a page, but will not render amp template for a page - updates `context_spec` - registers 'amp' as new internal app - adds the `amp.hbs` template to `core/server/apps/amp` which will be the default template for AMP posts. - adds `isAmpURL` to `post-lookup` * 🎨 Use `context` in meta as array (#7205) Instead of reading the first value of the context array, we're checking if it includes certain context values. This is a preparation change for AMP, where the context will be delivered as `['amp', 'post']`. * ✨ AMP helpers (#7174, #7216, #7215, #7223) - Adds AMP helpers `{{amp_content}}`, `{{amp_component}}` and `{{amp_ghost_head}}` to support AMP: - `{{amp_content}}`: - Adds `Amperize` as dependency - AMP app uses new helper `{{amp_content}}` to render AMP HTML - `Amperize` transforms regular HTML into AMP HTML - Adds test for `{{amp_content}}` helper - Adds 'Sanitize-HTML` as dependendy - After the HTML get 'amperized' we still might have some HTML tags, which are prohibited in AMP HTML, so we use `sanitize-html` to remove those. With every update, `Amperize` gets and it is able to transform more HTML tags, they valid AMP HTML tags (e. g. `video` and `amp-video`) and will therefore not be removed. - `{{amp_ghost_head}}`: - registers `{{amp_ghost_head}}` helper, but uses `{{ghost_head}}` code - uses `{{amp_ghost_head}}` in `amp.hbs` instead of `{{ghost_head}}` - `{{ghost_head}}`: - Render `amphtml` link in metadata for post, which links to the amp post (`getAmpUrl`) - Updates all test in metadata to support `amp` context - Changes context conditionals to work with full array instead of first array value - Adds conditionals, so no additional javascript gets rendered in `{{ghost_head}}` - Removes trailing `/amp/` in URLs, so only `amphtml` link on regular post renders it - Adds a conditional, so no code injection will be included, for an `amp` context. - `{{amp_components}}`: - AMP app uses new helper `{{amp_components}}` to render necessary script tags for AMP extended components as `amp-iframe`, `amp-anime` and `amp-form` - Adds test for `{{amp_components}}`
2016-08-22 19:49:27 +03:00
⬆️ 🚨 Update Amperize dep and fix test (#7374) no issue Updates Amperize dep to v0.3.1 and fixes test for `amp_content`.
2016-09-14 14:30:37 +03:00
it('can handle incomplete HTML tags by returning not Amperized HTML', function (done) {
Updated var declarations to const/let and no lists - All var declarations are now const or let as per ES6 - All comma-separated lists / chained declarations are now one declaration per line - This is for clarity/readability but also made running the var-to-const/let switch smoother - ESLint rules updated to match How this was done: - npm install -g jscodeshift - git clone https://github.com/cpojer/js-codemod.git - git clone git@github.com:TryGhost/Ghost.git shallow-ghost - cd shallow-ghost - jscodeshift -t ../js-codemod/transforms/unchain-variables.js . -v=2 - jscodeshift -t ../js-codemod/transforms/no-vars.js . -v=2 - yarn - yarn test - yarn lint / fix various lint errors (almost all indent) by opening files and saving in vscode - grunt test-regression - sorted!
2020-04-29 18:44:27 +03:00
const testData = {
html: '<img><///img>',
updated_at: 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)',
id: 1
};
const ampResult = ampContentHelper.call(testData);
let sanitizedHTML;
let ampedHTML;
✨ [FEATURE] AMP⚡ (#7229) closes #6588, #7095 * `ImageObject` with image dimensions (#7152, #7151, #7153) - Returns meta data as promise - returns a new Promise from meta data - uses `Promise.props()` to resolve `getClient()` and `getMetaData()` - Adds 'image-size' util The util returns an object like this ``` { height: 50, url: 'http://myblog.com/images/cat.jpg', width: 50 }; ``` if the dimensions can be fetched and rejects with error, if not. In case we get a locally stored image or a not complete url (like `//www.gravatar.com/andsoon`), we add the protocol to the incomplete one and use `urlFor()` to get the absolute URL. If the request fails or `image-size` is not able to read the file, we reject with error. - adds 'image-size' module to dependencies - adds `getImageSizeFromUrl` function that returns image dimensions - In preparation of AMP support and to improve our schema.org JSON-LD and structured data, I made the following changes: - Changes the following properties to be `Objects`, which have a `url` property by default and a `dimensions` property, if `width` and `height` are available: - `metaData.coverImage` - `metaData.authorImage` - `metaData.blog.logo` - Checks cache by calling `getCachedImageSizeFromUrl`. If image dimensions were fetched already, returns them from cache instead of fetching them again. - If we have image dimensions on hand, the output in our JSON-LD changes from normal urls to be full `ImageObjects`. Applies to all images and logos. - Special case for `publisher.logo` as it has size restrictions: if the image doesn't fulfil the restrictions (<=600 width and <=60 height), we simply output the url instead, so like before. - Adds new property for schema.org JSON-LD: `mainEntityOfPage` as an Object. - Adds additional Open Graph data (if we have the image size): `og:image:width` and `og:image:height` - Adds/updates tests * AMP router and controller (#7171, #7157) Implements AMP in `/apps/`: - renders `amp.hbs` if route is `/:slug/amp/` - updates `setResponseContext` to set context to `['amp', 'post']` for a amp post and `['amp', 'page']` for a page, but will not render amp template for a page - updates `context_spec` - registers 'amp' as new internal app - adds the `amp.hbs` template to `core/server/apps/amp` which will be the default template for AMP posts. - adds `isAmpURL` to `post-lookup` * 🎨 Use `context` in meta as array (#7205) Instead of reading the first value of the context array, we're checking if it includes certain context values. This is a preparation change for AMP, where the context will be delivered as `['amp', 'post']`. * ✨ AMP helpers (#7174, #7216, #7215, #7223) - Adds AMP helpers `{{amp_content}}`, `{{amp_component}}` and `{{amp_ghost_head}}` to support AMP: - `{{amp_content}}`: - Adds `Amperize` as dependency - AMP app uses new helper `{{amp_content}}` to render AMP HTML - `Amperize` transforms regular HTML into AMP HTML - Adds test for `{{amp_content}}` helper - Adds 'Sanitize-HTML` as dependendy - After the HTML get 'amperized' we still might have some HTML tags, which are prohibited in AMP HTML, so we use `sanitize-html` to remove those. With every update, `Amperize` gets and it is able to transform more HTML tags, they valid AMP HTML tags (e. g. `video` and `amp-video`) and will therefore not be removed. - `{{amp_ghost_head}}`: - registers `{{amp_ghost_head}}` helper, but uses `{{ghost_head}}` code - uses `{{amp_ghost_head}}` in `amp.hbs` instead of `{{ghost_head}}` - `{{ghost_head}}`: - Render `amphtml` link in metadata for post, which links to the amp post (`getAmpUrl`) - Updates all test in metadata to support `amp` context - Changes context conditionals to work with full array instead of first array value - Adds conditionals, so no additional javascript gets rendered in `{{ghost_head}}` - Removes trailing `/amp/` in URLs, so only `amphtml` link on regular post renders it - Adds a conditional, so no code injection will be included, for an `amp` context. - `{{amp_components}}`: - AMP app uses new helper `{{amp_components}}` to render necessary script tags for AMP extended components as `amp-iframe`, `amp-anime` and `amp-form` - Adds test for `{{amp_components}}`
2016-08-22 19:49:27 +03:00
🐛 fix: make small media types not stretch (#7265) no issue Fixes a bug with displaying small media types like images or gif. Two reasons for that: 1. In many cases, we only have the relative URL instead of the absolute URL for the media source and therefore, `Amperize` module wasn't able to detect the image size and set the default image size of `width="600"` and `height="400"`. 2. Even if we have detected the correct image size, the attribute `layout="default"` would still make it strech. This issue is fixed in `Amperize`, but it wasn't merged at this time, so I set the dependency on my fork. Adds `amp-anim` to the `.post-content` class, to have same CSS style as an image.
2016-08-25 12:09:25 +03:00
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('<img>');
should.exist(sanitizedHTML);
sanitizedHTML.should.be.equal('');
done();
}).catch(done);
});
⬆️ 🚨 Update Amperize dep and fix test (#7374) no issue Updates Amperize dep to v0.3.1 and fixes test for `amp_content`.
2016-09-14 14:30:37 +03:00
it('can handle not existing img src by returning not Amperized HTML', function (done) {
Updated var declarations to const/let and no lists - All var declarations are now const or let as per ES6 - All comma-separated lists / chained declarations are now one declaration per line - This is for clarity/readability but also made running the var-to-const/let switch smoother - ESLint rules updated to match How this was done: - npm install -g jscodeshift - git clone https://github.com/cpojer/js-codemod.git - git clone git@github.com:TryGhost/Ghost.git shallow-ghost - cd shallow-ghost - jscodeshift -t ../js-codemod/transforms/unchain-variables.js . -v=2 - jscodeshift -t ../js-codemod/transforms/no-vars.js . -v=2 - yarn - yarn test - yarn lint / fix various lint errors (almost all indent) by opening files and saving in vscode - grunt test-regression - sorted!
2020-04-29 18:44:27 +03:00
const testData = {
html: '<img src="/content/images/does-not-exist.jpg" alt="The Ghost Logo" />',
updated_at: 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)',
id: 1
};
const ampResult = ampContentHelper.call(testData);
let sanitizedHTML;
let ampedHTML;
⬆️ 🚨 Update Amperize dep and fix test (#7374) no issue Updates Amperize dep to v0.3.1 and fixes test for `amp_content`.
2016-09-14 14:30:37 +03:00
ampResult.then(function (rendered) {
sanitizedHTML = ampContentHelper.__get__('cleanHTML');
ampedHTML = ampContentHelper.__get__('ampHTML');
should.exist(rendered);
rendered.string.should.equal('');
should.exist(ampedHTML);
Updated links to docs (#10941) no issue
2019-07-22 13:17:50 +03:00
ampedHTML.should.be.equal('<img src="https://ghost.org/blog/content/images/does-not-exist.jpg" alt="The Ghost Logo">');
⬆️ 🚨 Update Amperize dep and fix test (#7374) no issue Updates Amperize dep to v0.3.1 and fixes test for `amp_content`.
2016-09-14 14:30:37 +03:00
should.exist(sanitizedHTML);
sanitizedHTML.should.be.equal('');
done();
}).catch(done);
});
🐛 Fixed internal links converting to absolute URLs (#9143) closes #9136 Changed the functionality in `make-absolute-urls.js` util to not convert the URL when starting which an `#`, as it indicates and internal link. The util is used inside of the `{{amp_content}}` helper and to render the RSS feed. I tested the changes with the most popular RSS reader 'Feedly' and it seems like these internal links get converted to absolute URL inside of Feedly automatically.
2017-10-18 19:54:17 +03:00
it('does not convert internal anchor links starting with "#"', function (done) {
Updated var declarations to const/let and no lists - All var declarations are now const or let as per ES6 - All comma-separated lists / chained declarations are now one declaration per line - This is for clarity/readability but also made running the var-to-const/let switch smoother - ESLint rules updated to match How this was done: - npm install -g jscodeshift - git clone https://github.com/cpojer/js-codemod.git - git clone git@github.com:TryGhost/Ghost.git shallow-ghost - cd shallow-ghost - jscodeshift -t ../js-codemod/transforms/unchain-variables.js . -v=2 - jscodeshift -t ../js-codemod/transforms/no-vars.js . -v=2 - yarn - yarn test - yarn lint / fix various lint errors (almost all indent) by opening files and saving in vscode - grunt test-regression - sorted!
2020-04-29 18:44:27 +03:00
const testData = {
html: '<a href="#jumptosection">Table of Content</a>',
updated_at: 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)',
id: 1
};
const ampResult = ampContentHelper.call(testData);
let sanitizedHTML;
let ampedHTML;
🐛 Fixed internal links converting to absolute URLs (#9143) closes #9136 Changed the functionality in `make-absolute-urls.js` util to not convert the URL when starting which an `#`, as it indicates and internal link. The util is used inside of the `{{amp_content}}` helper and to render the RSS feed. I tested the changes with the most popular RSS reader 'Feedly' and it seems like these internal links get converted to absolute URL inside of Feedly automatically.
2017-10-18 19:54:17 +03:00
ampResult.then(function (rendered) {
sanitizedHTML = ampContentHelper.__get__('cleanHTML');
ampedHTML = ampContentHelper.__get__('ampHTML');
should.exist(rendered);
rendered.string.should.equal('<a href="#jumptosection">Table of Content</a>');
should.exist(ampedHTML);
ampedHTML.should.be.equal('<a href="#jumptosection">Table of Content</a>');
should.exist(sanitizedHTML);
sanitizedHTML.should.be.equal('<a href="#jumptosection">Table of Content</a>');
done();
}).catch(done);
});
🐛 fix: make small media types not stretch (#7265) no issue Fixes a bug with displaying small media types like images or gif. Two reasons for that: 1. In many cases, we only have the relative URL instead of the absolute URL for the media source and therefore, `Amperize` module wasn't able to detect the image size and set the default image size of `width="600"` and `height="400"`. 2. Even if we have detected the correct image size, the attribute `layout="default"` would still make it strech. This issue is fixed in `Amperize`, but it wasn't merged at this time, so I set the dependency on my fork. Adds `amp-anim` to the `.post-content` class, to have same CSS style as an image.
2016-08-25 12:09:25 +03:00
it('sanitizes remaining and not valid tags', function (done) {
Updated var declarations to const/let and no lists - All var declarations are now const or let as per ES6 - All comma-separated lists / chained declarations are now one declaration per line - This is for clarity/readability but also made running the var-to-const/let switch smoother - ESLint rules updated to match How this was done: - npm install -g jscodeshift - git clone https://github.com/cpojer/js-codemod.git - git clone git@github.com:TryGhost/Ghost.git shallow-ghost - cd shallow-ghost - jscodeshift -t ../js-codemod/transforms/unchain-variables.js . -v=2 - jscodeshift -t ../js-codemod/transforms/no-vars.js . -v=2 - yarn - yarn test - yarn lint / fix various lint errors (almost all indent) by opening files and saving in vscode - grunt test-regression - sorted!
2020-04-29 18:44:27 +03:00
const testData = {
html: '<form<input type="text" placeholder="Hi AMP tester"></form>' +
🐛 fix: make small media types not stretch (#7265) no issue Fixes a bug with displaying small media types like images or gif. Two reasons for that: 1. In many cases, we only have the relative URL instead of the absolute URL for the media source and therefore, `Amperize` module wasn't able to detect the image size and set the default image size of `width="600"` and `height="400"`. 2. Even if we have detected the correct image size, the attribute `layout="default"` would still make it strech. This issue is fixed in `Amperize`, but it wasn't merged at this time, so I set the dependency on my fork. Adds `amp-anim` to the `.post-content` class, to have same CSS style as an image.
2016-08-25 12:09:25 +03:00
'<script>some script here</script>' +
'<style> h1 {color:red;} p {color:blue;}</style>',
Updated var declarations to const/let and no lists - All var declarations are now const or let as per ES6 - All comma-separated lists / chained declarations are now one declaration per line - This is for clarity/readability but also made running the var-to-const/let switch smoother - ESLint rules updated to match How this was done: - npm install -g jscodeshift - git clone https://github.com/cpojer/js-codemod.git - git clone git@github.com:TryGhost/Ghost.git shallow-ghost - cd shallow-ghost - jscodeshift -t ../js-codemod/transforms/unchain-variables.js . -v=2 - jscodeshift -t ../js-codemod/transforms/no-vars.js . -v=2 - yarn - yarn test - yarn lint / fix various lint errors (almost all indent) by opening files and saving in vscode - grunt test-regression - sorted!
2020-04-29 18:44:27 +03:00
updated_at: 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)',
id: 1
};
const ampResult = ampContentHelper.call(testData);
✨ [FEATURE] AMP⚡ (#7229) closes #6588, #7095 * `ImageObject` with image dimensions (#7152, #7151, #7153) - Returns meta data as promise - returns a new Promise from meta data - uses `Promise.props()` to resolve `getClient()` and `getMetaData()` - Adds 'image-size' util The util returns an object like this ``` { height: 50, url: 'http://myblog.com/images/cat.jpg', width: 50 }; ``` if the dimensions can be fetched and rejects with error, if not. In case we get a locally stored image or a not complete url (like `//www.gravatar.com/andsoon`), we add the protocol to the incomplete one and use `urlFor()` to get the absolute URL. If the request fails or `image-size` is not able to read the file, we reject with error. - adds 'image-size' module to dependencies - adds `getImageSizeFromUrl` function that returns image dimensions - In preparation of AMP support and to improve our schema.org JSON-LD and structured data, I made the following changes: - Changes the following properties to be `Objects`, which have a `url` property by default and a `dimensions` property, if `width` and `height` are available: - `metaData.coverImage` - `metaData.authorImage` - `metaData.blog.logo` - Checks cache by calling `getCachedImageSizeFromUrl`. If image dimensions were fetched already, returns them from cache instead of fetching them again. - If we have image dimensions on hand, the output in our JSON-LD changes from normal urls to be full `ImageObjects`. Applies to all images and logos. - Special case for `publisher.logo` as it has size restrictions: if the image doesn't fulfil the restrictions (<=600 width and <=60 height), we simply output the url instead, so like before. - Adds new property for schema.org JSON-LD: `mainEntityOfPage` as an Object. - Adds additional Open Graph data (if we have the image size): `og:image:width` and `og:image:height` - Adds/updates tests * AMP router and controller (#7171, #7157) Implements AMP in `/apps/`: - renders `amp.hbs` if route is `/:slug/amp/` - updates `setResponseContext` to set context to `['amp', 'post']` for a amp post and `['amp', 'page']` for a page, but will not render amp template for a page - updates `context_spec` - registers 'amp' as new internal app - adds the `amp.hbs` template to `core/server/apps/amp` which will be the default template for AMP posts. - adds `isAmpURL` to `post-lookup` * 🎨 Use `context` in meta as array (#7205) Instead of reading the first value of the context array, we're checking if it includes certain context values. This is a preparation change for AMP, where the context will be delivered as `['amp', 'post']`. * ✨ AMP helpers (#7174, #7216, #7215, #7223) - Adds AMP helpers `{{amp_content}}`, `{{amp_component}}` and `{{amp_ghost_head}}` to support AMP: - `{{amp_content}}`: - Adds `Amperize` as dependency - AMP app uses new helper `{{amp_content}}` to render AMP HTML - `Amperize` transforms regular HTML into AMP HTML - Adds test for `{{amp_content}}` helper - Adds 'Sanitize-HTML` as dependendy - After the HTML get 'amperized' we still might have some HTML tags, which are prohibited in AMP HTML, so we use `sanitize-html` to remove those. With every update, `Amperize` gets and it is able to transform more HTML tags, they valid AMP HTML tags (e. g. `video` and `amp-video`) and will therefore not be removed. - `{{amp_ghost_head}}`: - registers `{{amp_ghost_head}}` helper, but uses `{{ghost_head}}` code - uses `{{amp_ghost_head}}` in `amp.hbs` instead of `{{ghost_head}}` - `{{ghost_head}}`: - Render `amphtml` link in metadata for post, which links to the amp post (`getAmpUrl`) - Updates all test in metadata to support `amp` context - Changes context conditionals to work with full array instead of first array value - Adds conditionals, so no additional javascript gets rendered in `{{ghost_head}}` - Removes trailing `/amp/` in URLs, so only `amphtml` link on regular post renders it - Adds a conditional, so no code injection will be included, for an `amp` context. - `{{amp_components}}`: - AMP app uses new helper `{{amp_components}}` to render necessary script tags for AMP extended components as `amp-iframe`, `amp-anime` and `amp-form` - Adds test for `{{amp_components}}`
2016-08-22 19:49:27 +03:00
🐛 fix: make small media types not stretch (#7265) no issue Fixes a bug with displaying small media types like images or gif. Two reasons for that: 1. In many cases, we only have the relative URL instead of the absolute URL for the media source and therefore, `Amperize` module wasn't able to detect the image size and set the default image size of `width="600"` and `height="400"`. 2. Even if we have detected the correct image size, the attribute `layout="default"` would still make it strech. This issue is fixed in `Amperize`, but it wasn't merged at this time, so I set the dependency on my fork. Adds `amp-anim` to the `.post-content` class, to have same CSS style as an image.
2016-08-25 12:09:25 +03:00
ampResult.then(function (rendered) {
should.exist(rendered);
rendered.string.should.be.equal('');
done();
}).catch(done);
});
✨ [FEATURE] AMP⚡ (#7229) closes #6588, #7095 * `ImageObject` with image dimensions (#7152, #7151, #7153) - Returns meta data as promise - returns a new Promise from meta data - uses `Promise.props()` to resolve `getClient()` and `getMetaData()` - Adds 'image-size' util The util returns an object like this ``` { height: 50, url: 'http://myblog.com/images/cat.jpg', width: 50 }; ``` if the dimensions can be fetched and rejects with error, if not. In case we get a locally stored image or a not complete url (like `//www.gravatar.com/andsoon`), we add the protocol to the incomplete one and use `urlFor()` to get the absolute URL. If the request fails or `image-size` is not able to read the file, we reject with error. - adds 'image-size' module to dependencies - adds `getImageSizeFromUrl` function that returns image dimensions - In preparation of AMP support and to improve our schema.org JSON-LD and structured data, I made the following changes: - Changes the following properties to be `Objects`, which have a `url` property by default and a `dimensions` property, if `width` and `height` are available: - `metaData.coverImage` - `metaData.authorImage` - `metaData.blog.logo` - Checks cache by calling `getCachedImageSizeFromUrl`. If image dimensions were fetched already, returns them from cache instead of fetching them again. - If we have image dimensions on hand, the output in our JSON-LD changes from normal urls to be full `ImageObjects`. Applies to all images and logos. - Special case for `publisher.logo` as it has size restrictions: if the image doesn't fulfil the restrictions (<=600 width and <=60 height), we simply output the url instead, so like before. - Adds new property for schema.org JSON-LD: `mainEntityOfPage` as an Object. - Adds additional Open Graph data (if we have the image size): `og:image:width` and `og:image:height` - Adds/updates tests * AMP router and controller (#7171, #7157) Implements AMP in `/apps/`: - renders `amp.hbs` if route is `/:slug/amp/` - updates `setResponseContext` to set context to `['amp', 'post']` for a amp post and `['amp', 'page']` for a page, but will not render amp template for a page - updates `context_spec` - registers 'amp' as new internal app - adds the `amp.hbs` template to `core/server/apps/amp` which will be the default template for AMP posts. - adds `isAmpURL` to `post-lookup` * 🎨 Use `context` in meta as array (#7205) Instead of reading the first value of the context array, we're checking if it includes certain context values. This is a preparation change for AMP, where the context will be delivered as `['amp', 'post']`. * ✨ AMP helpers (#7174, #7216, #7215, #7223) - Adds AMP helpers `{{amp_content}}`, `{{amp_component}}` and `{{amp_ghost_head}}` to support AMP: - `{{amp_content}}`: - Adds `Amperize` as dependency - AMP app uses new helper `{{amp_content}}` to render AMP HTML - `Amperize` transforms regular HTML into AMP HTML - Adds test for `{{amp_content}}` helper - Adds 'Sanitize-HTML` as dependendy - After the HTML get 'amperized' we still might have some HTML tags, which are prohibited in AMP HTML, so we use `sanitize-html` to remove those. With every update, `Amperize` gets and it is able to transform more HTML tags, they valid AMP HTML tags (e. g. `video` and `amp-video`) and will therefore not be removed. - `{{amp_ghost_head}}`: - registers `{{amp_ghost_head}}` helper, but uses `{{ghost_head}}` code - uses `{{amp_ghost_head}}` in `amp.hbs` instead of `{{ghost_head}}` - `{{ghost_head}}`: - Render `amphtml` link in metadata for post, which links to the amp post (`getAmpUrl`) - Updates all test in metadata to support `amp` context - Changes context conditionals to work with full array instead of first array value - Adds conditionals, so no additional javascript gets rendered in `{{ghost_head}}` - Removes trailing `/amp/` in URLs, so only `amphtml` link on regular post renders it - Adds a conditional, so no code injection will be included, for an `amp` context. - `{{amp_components}}`: - AMP app uses new helper `{{amp_components}}` to render necessary script tags for AMP extended components as `amp-iframe`, `amp-anime` and `amp-form` - Adds test for `{{amp_components}}`
2016-08-22 19:49:27 +03:00
});
});
Reference in New Issue Copy Permalink