Merge pull request #32581 from github/repo-sync

Repo sync

src/assets/lib/image-density.js

@@ -0,0 +1,10 @@
+import fs from 'fs'
+
+const file = fs.readFileSync('./src/assets/lib/image-density.txt', 'utf8')
+
+export const IMAGE_DENSITY = Object.fromEntries(
+  file.split('\n').map((line) => {
+    const [path, density] = line.split(' ')
+    return [path, density]
+  }),
+)

src/content-render/unified/rewrite-asset-img-tags.js

@@ -1,10 +1,13 @@
 import { visit, SKIP } from 'unist-util-visit'
+import { IMAGE_DENSITY } from '../../assets/lib/image-density.js'
 
 // This number must match a width we're willing to accept in a dynamic
 // asset URL.
 // (note this is exported for the sake of end-to-end tests' assertions)
 export const MAX_WIDTH = 1440
 
+const DEFAULT_IMAGE_DENSITY = '2x'
+
 // Matches any <img> tags with an href that starts with `/assets/`
 const matcher = (node) =>
   node.type === 'element' &&
@@ -32,11 +35,16 @@ export default function rewriteAssetImgTags() {
       if (node.properties.src.endsWith('.png')) {
         const copyPNG = structuredClone(node)
 
+        const originalSrc = node.properties.src
+        const originalSrcWithoutCb = originalSrc.replace(/cb-\w+\//, '')
+        const webpSrc = injectMaxWidth(node.properties.src.replace(/\.png$/, '.webp'), MAX_WIDTH)
+        const srcset = `${webpSrc} ${IMAGE_DENSITY[originalSrcWithoutCb] || DEFAULT_IMAGE_DENSITY}`
+
         const sourceWEBP = {
           type: 'element',
           tagName: 'source',
           properties: {
-            srcset: injectMaxWidth(node.properties.src.replace(/\.png$/, '.webp'), MAX_WIDTH),
+            srcset,
             type: 'image/webp',
           },
           children: [],

src/fixtures/fixtures/content/get-started/images/index.md

@@ -2,11 +2,12 @@
 title: Images
 intro: Testing various image functionality
 versions:
-  fpt: '*'
-  ghes: '*'
-  ghec: '*'
+  fpt: "*"
+  ghes: "*"
+  ghec: "*"
 children:
   - /single-image
   - /images-in-lists
   - /link-to-image
+  - /retina-image
 ---

src/fixtures/fixtures/content/get-started/images/retina-image.md

@@ -0,0 +1,17 @@
+---
+title: Single image
+intro: A simple page that has 1 asset image
+versions:
+  fpt: "*"
+  ghes: "*"
+  ghec: "*"
+type: how_to
+---
+
+## An image
+
+![A specified 1x image](/assets/images/_fixtures/electrocat.png)
+
+![A specified 2x image](/assets/images/_fixtures/screenshot.png)
+
+![A 2x image with no specification](/assets/images/_fixtures/abcdefghi.png)

src/fixtures/fixtures/content/get-started/images/single-image.md

@@ -2,9 +2,9 @@
 title: Single image
 intro: A simple page that has 1 asset image
 versions:
-  fpt: '*'
-  ghes: '*'
-  ghec: '*'
+  fpt: "*"
+  ghes: "*"
+  ghec: "*"
 type: how_to
 ---
 

src/fixtures/tests/images.js

@@ -14,7 +14,7 @@ describe('render Markdown image tags', () => {
     const sources = $('source', pictures)
     expect(sources.length).toBe(1)
     const srcset = sources.attr('srcset')
-    expect(srcset).toBe(`/assets/cb-914945/mw-${MAX_WIDTH}/images/_fixtures/screenshot.webp`)
+    expect(srcset).toBe(`/assets/cb-914945/mw-${MAX_WIDTH}/images/_fixtures/screenshot.webp 2x`)
     const type = sources.attr('type')
     expect(type).toBe('image/webp')
 
@@ -25,7 +25,7 @@ describe('render Markdown image tags', () => {
     const alt = imgs.attr('alt')
     expect(alt).toBe('This is the alt text')
 
-    const res = await get(srcset, { responseType: 'buffer' })
+    const res = await get(srcset.split(' ')[0], { responseType: 'buffer' })
     expect(res.statusCode).toBe(200)
     expect(res.headers['content-type']).toBe('image/webp')
 
@@ -42,6 +42,20 @@ describe('render Markdown image tags', () => {
     expect(height).toBe(Math.round((1494 * MAX_WIDTH) / 2000))
   })
 
+  test('images have density specified', async () => {
+    const $ = await getDOM('/get-started/images/retina-image')
+
+    const pictures = $('#article-contents picture')
+    expect(pictures.length).toBe(3)
+
+    const sources = $('source', pictures)
+    expect(sources.length).toBe(3)
+
+    expect(sources.eq(0).attr('srcset')).toContain('1x') // 0
+    expect(sources.eq(1).attr('srcset')).toContain('2x') // 1
+    expect(sources.eq(2).attr('srcset')).toContain('2x') // 2
+  })
+
   test('image inside a list keeps its span', async () => {
     const $ = await getDOM('/get-started/images/images-in-lists')