Skip to content

Commit

Permalink
feat: cname, private cdn support
Browse files Browse the repository at this point in the history
  • Loading branch information
@raae
raae committed Jun 5, 2024
1 parent ae1c98d commit 3a82b2f
Show file tree
Hide file tree
Showing 5 changed files with 378 additions and 67 deletions.
140 changes: 140 additions & 0 deletions demo/src/pages/manual-tests/cname-private-cdn.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
import React from 'react';
import { graphql, useStaticQuery } from 'gatsby';
import { getImage } from 'gatsby-plugin-image';

const CnamePage = () => {
const data = useStaticQuery(graphql`
query {
cname: allProject {
nodes {
name
coverImage {
gatsbyImageData(
height: 300
aspectRatio: 2
placeholder: TRACED_SVG
transformations: ["c_fill", "g_auto:subject", "q_auto"]
cname: "example.com"
secure: false
)
}
}
}
secureDistribution: allProject {
nodes {
name
coverImage {
gatsbyImageData(
height: 300
aspectRatio: 2
placeholder: TRACED_SVG
transformations: ["c_fill", "g_auto:subject", "q_auto"]
secureDistribution: "example.com"
secure: true
)
}
}
}
privateCDNSecure: allProject {
nodes {
name
coverImage {
gatsbyImageData(
height: 300
aspectRatio: 2
placeholder: TRACED_SVG
transformations: ["c_fill", "g_auto:subject", "q_auto"]
privateCdn: true
secure: true
)
}
}
}
privateCDNUnSecure: allProject {
nodes {
name
coverImage {
gatsbyImageData(
height: 300
aspectRatio: 2
placeholder: TRACED_SVG
transformations: ["c_fill", "g_auto:subject", "q_auto"]
privateCdn: true
secure: false
)
}
}
}
}
`);

return (
<>
<h2>Secure distribution</h2>
<p>
Expect url to start with <code>https://example.com</code>
</p>
{data.secureDistribution.nodes.map((node) => {
const gatsbyImage = getImage(node.coverImage?.gatsbyImageData);

return (
<>
<h2>{node.name}</h2>
<pre>{gatsbyImage.images.fallback.src}</pre>
</>
);
})}

<h2>CNAME</h2>
<p>
Expect urls to start with <code>http://example.com</code>
</p>
{data.cname.nodes.map((node) => {
const gatsbyImage = getImage(node.coverImage?.gatsbyImageData);

return (
<>
<h2>{node.name}</h2>
<pre>{gatsbyImage.images.fallback.src}</pre>
</>
);
})}

<h2>Private CDN (Secure)</h2>
<p>
Expect urls to start with the cloudinary subdomain (https version), not{' '}
<code>https://res.cloudinary.com</code>
</p>

{data.privateCDNSecure.nodes.map((node) => {
const gatsbyImage = getImage(node.coverImage?.gatsbyImageData);

return (
<>
<h2>{node.name}</h2>
<pre>{gatsbyImage.images.fallback.src}</pre>
</>
);
})}

<h2>Private CDN (UnSecure)</h2>
<p>
Expect urls to start with the cloudinary subdomain (http version), not{' '}
<code>http://res.cloudinary.com</code>
</p>

{data.privateCDNUnSecure.nodes.map((node) => {
const gatsbyImage = getImage(node.coverImage?.gatsbyImageData);

return (
<>
<h2>{node.name}</h2>
<pre>{gatsbyImage.images.fallback.src}</pre>
</>
);
})}
</>
);
};

export default CnamePage;
3 changes: 3 additions & 0 deletions plugin/gatsby-plugin-image/generate-asset-url.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,9 @@ exports.generateCloudinaryAssetUrl = ({
const url = cloudinary.url(publicId, {
cloud_name: cloudName,
secure: options.secure,
cname: options.cname,
secure_distribution: options.secureDistribution,
private_cdn: options.privateCdn,
transformation: transformation,
flags: flags,
urlAnalytics: true,
Expand Down
150 changes: 102 additions & 48 deletions plugin/gatsby-plugin-image/generate-asset-url.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,63 +18,117 @@ describe('generateCloudinaryAssetUrl', () => {
format: 'jpg',
};

it('generates correct Cloudinary url when no options', () => {
const url = generateCloudinaryAssetUrl(asset);
expect(url).toBe(
`http://res.cloudinary.com/cloud-name/image/upload/f_jpg,h_600,w_400/public-id?_a=${ANALYTICS_CODE}`
);
});
describe('generates correct Cloudinary url', () => {
it('when no options', () => {
const url = generateCloudinaryAssetUrl(asset);
expect(url).toBe(
`http://res.cloudinary.com/cloud-name/image/upload/f_jpg,h_600,w_400/public-id?_a=${ANALYTICS_CODE}`
);
});

it('generates correct Cloudinary url with transformations option', () => {
const url = generateCloudinaryAssetUrl({
...asset,
options: {
transformations: ['e_grayscale', 'e_pixelate'],
},
it('with transformations option', () => {
const url = generateCloudinaryAssetUrl({
...asset,
options: {
transformations: ['e_grayscale', 'e_pixelate'],
},
});
expect(url).toBe(
`http://res.cloudinary.com/cloud-name/image/upload/f_jpg,h_600,w_400,e_grayscale,e_pixelate/public-id?_a=${ANALYTICS_CODE}`
);
});
expect(url).toBe(
`http://res.cloudinary.com/cloud-name/image/upload/f_jpg,h_600,w_400,e_grayscale,e_pixelate/public-id?_a=${ANALYTICS_CODE}`
);
});

it('generates correct Cloudinary url with chained option', () => {
const url = generateCloudinaryAssetUrl({
...asset,
options: {
chained: ['t_lwj', 'e_pixelate'],
},
it('with chained option', () => {
const url = generateCloudinaryAssetUrl({
...asset,
options: {
chained: ['t_lwj', 'e_pixelate'],
},
});
expect(url).toBe(
`http://res.cloudinary.com/cloud-name/image/upload/f_jpg,h_600,w_400/t_lwj/e_pixelate/public-id?_a=${ANALYTICS_CODE}`
);
});
expect(url).toBe(
`http://res.cloudinary.com/cloud-name/image/upload/f_jpg,h_600,w_400/t_lwj/e_pixelate/public-id?_a=${ANALYTICS_CODE}`
);
});

it('generates correct Cloudinary url with scure option set to true', () => {
const url = generateCloudinaryAssetUrl({
...asset,
options: {
secure: true,
},
it('with scure option set to true', () => {
const url = generateCloudinaryAssetUrl({
...asset,
options: {
secure: true,
},
});
expect(url).toBe(
`https://res.cloudinary.com/cloud-name/image/upload/f_jpg,h_600,w_400/public-id?_a=${ANALYTICS_CODE}`
);
});

it('with custom secure_distribution (cname) and secure is true', () => {
const url = generateCloudinaryAssetUrl({
...asset,
options: {
secure: true,
secureDistribution: 'example.com',
},
});
expect(url).toBe(
`https://example.com/cloud-name/image/upload/f_jpg,h_600,w_400/public-id?_a=${ANALYTICS_CODE}`
);
});
expect(url).toBe(
`https://res.cloudinary.com/cloud-name/image/upload/f_jpg,h_600,w_400/public-id?_a=${ANALYTICS_CODE}`
);
});

it('generates correct Cloudinary url in traced SVG mode', () => {
const url = generateCloudinaryAssetUrl({
...asset,
tracedSvg: {
it('with cname and secure is false', () => {
const url = generateCloudinaryAssetUrl({
...asset,
options: {
colors: 2,
detail: 0.3,
despeckle: 0.1,
secure: false,
cname: 'example.com',
},
});
expect(url).toBe(
`http://example.com/cloud-name/image/upload/f_jpg,h_600,w_400/public-id?_a=${ANALYTICS_CODE}`
);
});

it('for private_cdn and secure is true', () => {
const url = generateCloudinaryAssetUrl({
...asset,
options: {
secure: true,
privateCdn: true,
},
});
expect(url).toBe(
`https://cloud-name-res.cloudinary.com/image/upload/f_jpg,h_600,w_400/public-id?_a=${ANALYTICS_CODE}`
);
});

it('for private_cdn and secure is false', () => {
const url = generateCloudinaryAssetUrl({
...asset,
options: {
secure: false,
privateCdn: true,
},
});
expect(url).toBe(
`http://cloud-name-res.cloudinary.com/image/upload/f_jpg,h_600,w_400/public-id?_a=${ANALYTICS_CODE}`
);
});

it('generates correct Cloudinary url in traced SVG mode', () => {
const url = generateCloudinaryAssetUrl({
...asset,
tracedSvg: {
options: {
colors: 2,
detail: 0.3,
despeckle: 0.1,
},
width: 300,
},
width: 300,
},
});
expect(url).toBe(
`http://res.cloudinary.com/cloud-name/image/upload/f_jpg,h_600,w_400/e_vectorize:colors:2:detail:0.3:despeckle:0.1,w_300/public-id?_a=${ANALYTICS_CODE}`
);
});
expect(url).toBe(
`http://res.cloudinary.com/cloud-name/image/upload/f_jpg,h_600,w_400/e_vectorize:colors:2:detail:0.3:despeckle:0.1,w_300/public-id?_a=${ANALYTICS_CODE}`
);
});
});
Loading

0 comments on commit 3a82b2f

Please sign in to comment.