fix(docs-framework): update webpack to handle all images the same way (#4843)

Author: wise-king-sullyman

packages/documentation-framework/components/example/example.js

@@ -108,6 +108,8 @@ export const Example = ({
   // absolute url to hosted file
   sourceLink = ''
 }) => {
+
+
   if (isFullscreenPreview) {
     isFullscreen = false;
   }
@@ -264,6 +266,11 @@ export const Example = ({
   );
   const metaText = hasMetaText && tooltips;
 
+  const thumbnailDimensions = {
+    width: "800",
+    height: "450"
+  }
+
   return (
     <Stack hasGutter>
       <StackItem>
@@ -281,7 +288,7 @@ export const Example = ({
               target="_blank"
               aria-label={`Open fullscreen ${title} example`}
             >
-              <img src={thumbnail.src} width={thumbnail.width} height={thumbnail.height} alt={`${title} screenshot`} />
+              <img src={thumbnail} width={thumbnailDimensions.width} height={thumbnailDimensions.height} alt={`${title} screenshot`} />
             </a>
           </div>
         ) : (

packages/documentation-framework/package.json

@@ -54,7 +54,6 @@
     "remark-mdxjs": "2.0.0-next.8",
     "remark-parse": "8.0.3",
     "remark-squeeze-paragraphs": "4.0.0",
-    "responsive-loader": "3.1.2",
     "sharp": "0.33.0",
     "style-to-object": "0.3.0",
     "to-vfile": "6.1.0",

packages/documentation-framework/scripts/webpack/webpack.base.config.js

@@ -72,18 +72,7 @@ module.exports = (_env, argv) => {
           }
         },
         {
-          test: /\.(png|jpe?g|webp)$/,
-          use: {
-            loader: 'responsive-loader',
-            options: {
-              adapter: require('responsive-loader/sharp'),
-              name: '[name].[contenthash].[ext]',
-              outputPath: 'images/'
-            }
-          }
-        },
-        {
-          test: /\.(gif|svg)$/,
+          test: /\.(gif|svg|png|jpe?g|webp)$/,
           type: 'asset/resource',
           dependency: { not: ['url'] },
           generator: {

yarn.lock

@@ -4151,7 +4151,6 @@ __metadata:
     remark-mdxjs: "npm:2.0.0-next.8"
     remark-parse: "npm:8.0.3"
     remark-squeeze-paragraphs: "npm:4.0.0"
-    responsive-loader: "npm:3.1.2"
     sharp: "npm:0.33.0"
     style-to-object: "npm:0.3.0"
     to-vfile: "npm:6.1.0"
@@ -5959,15 +5958,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:^18.11.9":
-  version: 18.19.32
-  resolution: "@types/node@npm:18.19.32"
-  dependencies:
-    undici-types: "npm:~5.26.4"
-  checksum: 10c0/29d60ddd83a8216daf90d4bf101a6eff7fcf034b24bb89da90291017ec54c33b5ce30e7c125aef3f23f756037f0c382d15ebd434ad9c4536c8db8f1fb129f0ce
-  languageName: node
-  linkType: hard
-
 "@types/normalize-package-data@npm:^2.4.0":
   version: 2.4.4
   resolution: "@types/normalize-package-data@npm:2.4.4"
@@ -8721,13 +8711,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"commondir@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "commondir@npm:1.0.1"
-  checksum: 10c0/33a124960e471c25ee19280c9ce31ccc19574b566dc514fe4f4ca4c34fa8b0b57cf437671f5de380e11353ea9426213fca17687dd2ef03134fea2dbc53809fd6
-  languageName: node
-  linkType: hard
-
 "compare-func@npm:^2.0.0":
   version: 2.0.0
   resolution: "compare-func@npm:2.0.0"
@@ -11413,17 +11396,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"find-cache-dir@npm:^3.3.2":
-  version: 3.3.2
-  resolution: "find-cache-dir@npm:3.3.2"
-  dependencies:
-    commondir: "npm:^1.0.1"
-    make-dir: "npm:^3.0.2"
-    pkg-dir: "npm:^4.1.0"
-  checksum: 10c0/92747cda42bff47a0266b06014610981cfbb71f55d60f2c8216bc3108c83d9745507fb0b14ecf6ab71112bed29cd6fb1a137ee7436179ea36e11287e3159e587
-  languageName: node
-  linkType: hard
-
 "find-cache-dir@npm:^4.0.0":
   version: 4.0.0
   resolution: "find-cache-dir@npm:4.0.0"
@@ -14224,7 +14196,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json5@npm:^2.1.2, json5@npm:^2.2.1, json5@npm:^2.2.2, json5@npm:^2.2.3":
+"json5@npm:^2.1.2, json5@npm:^2.2.2, json5@npm:^2.2.3":
   version: 2.2.3
   resolution: "json5@npm:2.2.3"
   bin:
@@ -14714,13 +14686,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loader-utils@npm:^3.2.1":
-  version: 3.2.1
-  resolution: "loader-utils@npm:3.2.1"
-  checksum: 10c0/d3e1f217d160e8e894a0385a33500d4ce14065e8ffb250f5a81ae65bc2c3baa50625ec34182ba4417b46b4ac6725aed64429e1104d6401e074af2aa1dd018394
-  languageName: node
-  linkType: hard
-
 "locate-path@npm:^2.0.0":
   version: 2.0.0
   resolution: "locate-path@npm:2.0.0"
@@ -14931,7 +14896,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"make-dir@npm:3.1.0, make-dir@npm:^3.0.2, make-dir@npm:^3.1.0":
+"make-dir@npm:3.1.0":
   version: 3.1.0
   resolution: "make-dir@npm:3.1.0"
   dependencies:
@@ -18208,7 +18173,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pkg-dir@npm:^4.1.0, pkg-dir@npm:^4.2.0":
+"pkg-dir@npm:^4.2.0":
   version: 4.2.0
   resolution: "pkg-dir@npm:4.2.0"
   dependencies:
@@ -19966,27 +19931,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"responsive-loader@npm:3.1.2":
-  version: 3.1.2
-  resolution: "responsive-loader@npm:3.1.2"
-  dependencies:
-    "@types/node": "npm:^18.11.9"
-    find-cache-dir: "npm:^3.3.2"
-    json5: "npm:^2.2.1"
-    loader-utils: "npm:^3.2.1"
-    make-dir: "npm:^3.1.0"
-    schema-utils: "npm:^4.0.0"
-  peerDependencies:
-    webpack: ^5.73.0
-  peerDependenciesMeta:
-    jimp:
-      optional: true
-    sharp:
-      optional: true
-  checksum: 10c0/c93b200bb51fe2968ee8092b4817db55dd55f2306d1d75fa66aa6cd2dbddf9c7f394528f9182acbc3a37489fed9b5d743b51a5275c88d31fb665195cf0f5adaf
-  languageName: node
-  linkType: hard
-
 "restore-cursor@npm:^2.0.0":
   version: 2.0.0
   resolution: "restore-cursor@npm:2.0.0"