Version Packages

fix(cli): responsive images need to respect pathPrefix
2026-03-21 08:51:18 +00:00 · 2021-06-21 14:37:07 +02:00 · 2021-06-21 14:35:51 +02:00
7 changed files with 59 additions and 3 deletions
--- a/packages/cli/CHANGELOG.md
+++ b/packages/cli/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @rocket/cli

+## 0.9.1
+
+### Patch Changes
+
+- 43a7ca1: Responsive images need to respect a set pathPrefix
+
 ## 0.9.0

 ### Minor Changes
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@rocket/cli",
-  "version": "0.9.0",
+  "version": "0.9.1",
  "publishConfig": {
    "access": "public"
  },
@@ -67,7 +67,7 @@
    "@web/dev-server": "^0.1.4",
    "@web/dev-server-rollup": "^0.3.2",
    "@web/rollup-plugin-copy": "^0.2.0",
-    "check-html-links": "^0.2.2",
+    "check-html-links": "^0.2.3",
    "command-line-args": "^5.1.1",
    "command-line-usage": "^6.1.1",
    "fs-extra": "^9.0.1",
--- a/packages/cli/src/eleventy-plugins/insertResponsiveImages.cjs
+++ b/packages/cli/src/eleventy-plugins/insertResponsiveImages.cjs
@@ -2,6 +2,7 @@
 const fs = require('fs');
 const path = require('path');
 const EleventyImage = require('@11ty/eleventy-img');
+const urlFilter = require('@11ty/eleventy/src/Filters/Url.js');
 const { SaxEventType, SAXParser } = require('sax-wasm');
 const { getComputedConfig } = require('../public/computedConfig.cjs');

@@ -140,7 +141,7 @@ async function responsiveImages(images, { inputPath, outputDir, imagePresets = {

    const metadata = await EleventyImage(filePath, {
      outputDir: path.join(outputDir, 'images'),
-      urlPath: '/images/',
+      urlPath: urlFilter('/images/'),
      ...presetSettings,
    });
    const lowsrc = metadata.jpeg[0];
--- a/packages/cli/test-node/RocketCli.e2e.test.js
+++ b/packages/cli/test-node/RocketCli.e2e.test.js
@@ -102,6 +102,30 @@ describe('RocketCli e2e', () => {
    );
    const assetHtml = await readStartOutput(cli, 'use-assets/index.html');
    expect(assetHtml).to.equal('<link rel="stylesheet" href="/_merged_assets/some.css">');
+    const imageHtml = await readStartOutput(cli, 'image/index.html');
+    expect(imageHtml).to.equal(
+      [
+        '<p>',
+        '      <figure>',
+        '        <picture>',
+        '<source type="image/avif" srcset="/images/dd502010-600.avif 600w, /images/dd502010-900.avif 900w" sizes="100vw">',
+        '<source type="image/jpeg" srcset="/images/dd502010-600.jpeg 600w, /images/dd502010-900.jpeg 900w" sizes="100vw">',
+        '          <img',
+        '            alt="My Image Alternative Text" rocket-image="responsive"',
+        '            src="/images/dd502010-600.jpeg"',
+        '            ',
+        '            ',
+        '            width="600"',
+        '            height="316"',
+        '            loading="lazy"',
+        '            decoding="async"',
+        '          />',
+        '        </picture>',
+        '      <figcaption>My Image Description</figcaption>',
+        '</figure>',
+        '    </p>',
+      ].join('\n'),
+    );
  });

  it('can add a pathPrefix that will be used in the build command', async () => {
@@ -119,6 +143,25 @@ describe('RocketCli e2e', () => {
    expect(assetHtml).to.equal(
      '<html><head><link rel="stylesheet" href="../41297ffa.css">\n\n</head><body>\n\n</body></html>',
    );
+    const imageHtml = await readBuildOutput(cli, 'image/index.html');
+    expect(imageHtml).to.equal(
+      [
+        '<html><head>',
+        '</head><body><p>',
+        '      </p><figure>',
+        '        <picture>',
+        '<source type="image/avif" srcset="../e64e2277.avif 600w, ../37453c88.avif 900w" sizes="100vw">',
+        '<source type="image/jpeg" srcset="../d0f18b5a.jpeg 600w, ../81998598.jpeg 900w" sizes="100vw">',
+        '          <img alt="My Image Alternative Text" rocket-image="responsive" src="../d0f18b5a.jpeg" width="600" height="316" loading="lazy" decoding="async">',
+        '        </picture>',
+        '      <figcaption>My Image Description</figcaption>',
+        '</figure>',
+        '    <p></p>',
+        '',
+        '',
+        '</body></html>',
+      ].join('\n'),
+    );
  });

  it('smoke test for link checking', async () => {
--- a/packages/cli/test-node/e2e-fixtures/content/docs/_assets/my-image.jpg
+++ b/packages/cli/test-node/e2e-fixtures/content/docs/_assets/my-image.jpg
--- a/packages/cli/test-node/e2e-fixtures/content/docs/image.md
+++ b/packages/cli/test-node/e2e-fixtures/content/docs/image.md
@@ -0,0 +1,5 @@
+---
+layout: layout-raw
+---
+
+![My Image Alternative Text](./_assets/my-image.jpg 'My Image Description')
--- a/rocket.config.js
+++ b/rocket.config.js
@@ -25,6 +25,7 @@ const config = {
    }),
  ],
  // serviceWorkerName: 'sw.js',
+  // pathPrefix: '/_site/',

  // emptyOutputDir: false,
 };
Author	SHA1	Message	Date
github-actions[bot]	2a5fc08f35	Version Packages	2021-06-21 14:37:07 +02:00
Thomas Allmer	43a7ca10c3	fix(cli): responsive images need to respect pathPrefix	2021-06-21 14:35:51 +02:00