feat(vanity): add support for vanity name in url

README.md

@@ -134,6 +134,10 @@ Return the url as a string.
 
 Specify the number of pixels to pad the image.
 
+### `vanityName(value)`
+
+Specify a vanity name for the image. This is useful for SEO purposes.
+
 ### Deprecated: `minWidth(pixels)`, `maxWidth(pixels)`, `minHeight(pixels)`, `maxHeight(pixels)`
 
 Specifies min/max dimensions when cropping.

src/builder.ts

@@ -247,6 +247,11 @@ export class ImageUrlBuilder {
     return this.withOptions({pad})
   }
 
+  // Vanity URL for more SEO friendly URLs
+  vanityName(value: string) {
+    return this.withOptions({vanityName: value})
+  }
+
   // Gets the url based on the submitted parameters
   url() {
     return urlForImage(this.options)

src/types.ts

@@ -26,6 +26,7 @@ export type ImageUrlBuilderOptions = Partial<SanityProjectDetails> & {
   saturation?: number
   auto?: AutoMode
   pad?: number
+  vanityName?: string
 }
 
 export type ImageUrlBuilderOptionsWithAliases = ImageUrlBuilderOptions & {

src/urlForImage.ts

@@ -80,8 +80,9 @@ export default function urlForImage(options: ImageUrlBuilderOptions): string {
 // eslint-disable-next-line complexity
 function specToImageUrl(spec: ImageUrlBuilderOptionsWithAsset) {
   const cdnUrl = (spec.baseUrl || 'https://cdn.sanity.io').replace(/\/+$/, '')
-  const filename = `${spec.asset.id}-${spec.asset.width}x${spec.asset.height}.${spec.asset.format}`
-  const baseUrl = `${cdnUrl}/images/${spec.projectId}/${spec.dataset}/${filename}`
+  const vanityStub = spec.vanityName ? `/${spec.vanityName}` : '' 
+  const filename = `${spec.asset.id}-${spec.asset.width}x${spec.asset.height}.${spec.asset.format}${vanityStub}`
+  const baseUrl = `${cdnUrl}/images/${spec.projectId}/${spec.dataset}/${filename}` 
 
   const params = []
 

test/__snapshots__/builder.test.ts.snap

@@ -41,3 +41,5 @@ exports[`builder skips hotspot/crop if focal point specified 1`] = `"https://cdn
 exports[`builder sub zero top/left 1`] = `"w=1000&h=805"`;
 
 exports[`builder toString() aliases url() 1`] = `"https://cdn.sanity.io/images/zp7mbokg/production/Tb9Ew8CXIwaY6R1kjMvI0uRR-2000x3000.jpg?w=100&h=80"`;
+
+exports[`builder vanity name 1`] = `"https://cdn.sanity.io/images/zp7mbokg/production/Tb9Ew8CXIwaY6R1kjMvI0uRR-2000x3000.jpg/moo"`;

test/builder.test.ts

@@ -144,6 +144,11 @@ const cases = [
     url: stripPath(urlFor.image(noHotspotImage()).dpr(1).url()),
   },
 
+  {
+    name: 'vanity name',
+    url: urlFor.image(noHotspotImage()).vanityName('moo').url()
+  },
+
   {
     name: 'sub zero top/left',
     url: stripPath(
@@ -175,7 +180,7 @@ const cases = [
         .flipHorizontal()
         .flipVertical()
         .fit('crop')
-        .pad(40)
+        .pad(40)  
         .url()
     ),
   },
@@ -203,15 +208,15 @@ const cases = [
         .flipVertical()
         .fit('crop')
         .crop('center')
-        .pad(40)
+        .pad(40) 
         .url()
     ),
   },
 ]
 
 describe('builder', () => {
   cases.forEach((testCase) => {
-    test(testCase.name, () => {
+    test(testCase.name, () => { 
       expect(testCase.url).toMatchSnapshot()
     })
   })