michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Feat/image url hash (#3965)

Browse source 
* Including a hash of the full remote URL when building for SSG

* chore: add changeset
This commit is contained in:
Tony Sullivan 2022-07-19 04:48:22 +00:00 committed by GitHub
parent 60e38f6eb4
commit 299b4afcab
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 95 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/rare-deers-relax.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/image': patch
---
Adding a unique hash to remote images built for SSG to ensure unique URLs are always de-duplicated

67
packages/integrations/image/src/shorthash.ts Normal file
View file

@ -0,0 +1,67 @@
/**
* shortdash - https://github.com/bibig/node-shorthash
*
* @license
*
* (The MIT License)
*
* Copyright (c) 2013 Bibig <bibig@me.com>
*
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use,
* copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following
* conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE.
*/
const dictionary = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXY';
const binary = dictionary.length;
// refer to: http://werxltd.com/wp/2010/05/13/javascript-implementation-of-javas-string-hashcode-method/
function bitwise(str: string) {
let hash = 0;
if (str.length === 0) return hash;
for (let i = 0; i < str.length; i++) {
const ch = str.charCodeAt(i);
hash = (hash << 5) - hash + ch;
hash = hash & hash; // Convert to 32bit integer
}
return hash;
}
export function shorthash(text: string) {
let num: number;
let result = '';
let integer = bitwise(text);
const sign = integer < 0 ? 'Z' : ''; // It it's negative, start with Z, which isn't in the dictionary
integer = Math.abs(integer);
while (integer >= binary) {
num = integer % binary;
integer = Math.floor(integer / binary);
result = dictionary[num] + result;
}
if (integer > 0) {
result = dictionary[integer] + result;
}
return sign + result;
}

6
packages/integrations/image/src/utils.ts
View file

@ -1,5 +1,6 @@
import fs from 'fs';
import path from 'path';
import { shorthash } from './shorthash.js';
import type { OutputFormat, TransformOptions } from './types';
export function isOutputFormat(value: string): value is OutputFormat {
@ -48,6 +49,11 @@ export function propsToFilename({ src, width, height, format }: TransformOptions
const ext = path.extname(src);
let filename = src.replace(ext, '');
// for remote images, add a hash of the full URL to dedupe images with the same filename
if (isRemoteImage(src)) {
filename += `-${shorthash(src)}`;
}
if (width && height) {
return `${filename}_${width}x${height}.${format}`;
} else if (width) {

8
packages/integrations/image/test/image-ssg.test.js
View file

@ -58,16 +58,20 @@ describe('SSG images', function () {
});
describe('Remote images', () => {
// Hard-coding in the test! This should never change since the hash is based
// on the static `src` string
const HASH = 'Z1iI4xW';
it('includes src, width, and height attributes', () => {
const image = $('#google');
expect(image.attr('src')).to.equal('/_image/googlelogo_color_272x92dp_544x184.webp');
expect(image.attr('src')).to.equal(`/_image/googlelogo_color_272x92dp-${HASH}_544x184.webp`);
expect(image.attr('width')).to.equal('544');
expect(image.attr('height')).to.equal('184');
});
it('built the optimized image', () => {
verifyImage('_image/googlelogo_color_272x92dp_544x184.webp', {
verifyImage(`_image/googlelogo_color_272x92dp-${HASH}_544x184.webp`, {
width: 544,
height: 184,
type: 'webp',

18
packages/integrations/image/test/picture-ssg.test.js
View file

@ -91,6 +91,10 @@ describe('SSG pictures', function () {
});
describe('Remote images', () => {
// Hard-coding in the test! This should never change since the hash is based
// on the static `src` string
const HASH = 'Z1iI4xW';
it('includes sources', () => {
const sources = $('#google source');
@ -102,38 +106,38 @@ describe('SSG pictures', function () {
it('includes src, width, and height attributes', () => {
const image = $('#google img');
expect(image.attr('src')).to.equal('/_image/googlelogo_color_272x92dp_544x184.png');
expect(image.attr('src')).to.equal(`/_image/googlelogo_color_272x92dp-${HASH}_544x184.png`);
expect(image.attr('width')).to.equal('544');
expect(image.attr('height')).to.equal('184');
});
it('built the optimized image', () => {
verifyImage('_image/googlelogo_color_272x92dp_272x92.avif', {
verifyImage(`_image/googlelogo_color_272x92dp-${HASH}_272x92.avif`, {
width: 272,
height: 92,
type: 'avif',
});
verifyImage('_image/googlelogo_color_272x92dp_272x92.webp', {
verifyImage(`_image/googlelogo_color_272x92dp-${HASH}_272x92.webp`, {
width: 272,
height: 92,
type: 'webp',
});
verifyImage('_image/googlelogo_color_272x92dp_272x92.png', {
verifyImage(`_image/googlelogo_color_272x92dp-${HASH}_272x92.png`, {
width: 272,
height: 92,
type: 'png',
});
verifyImage('_image/googlelogo_color_272x92dp_544x184.avif', {
verifyImage(`_image/googlelogo_color_272x92dp-${HASH}_544x184.avif`, {
width: 544,
height: 184,
type: 'avif',
});
verifyImage('_image/googlelogo_color_272x92dp_544x184.webp', {
verifyImage(`_image/googlelogo_color_272x92dp-${HASH}_544x184.webp`, {
width: 544,
height: 184,
type: 'webp',
});
verifyImage('_image/googlelogo_color_272x92dp_544x184.png', {
verifyImage(`_image/googlelogo_color_272x92dp-${HASH}_544x184.png`, {
width: 544,
height: 184,
type: 'png',