fix(docs-framework): update webpack to handle all images the same way#4843
Conversation
mcoker
left a comment
There was a problem hiding this comment.
According to https://www.npmjs.com/package/responsive-loader, you'd import an image and you can reference a bunch of data about it (src, width, height, srcSet, etc)
Looks like it was added here - #2075
I poked around for any reference of .src or .srcset and I think this is the only place https://github.com/wise-king-sullyman/patternfly-org/blob/6a14e6fe3ae6851f5b6d2d49ed3d95a7a4ad6843/packages/documentation-framework/components/example/example.js#L198
AFAICT that creates the thumbnail for full page examples/demos, which you can see broken on this branch if you go to a page like https://www.patternfly.org/components/modal/html-demos/
Assuming that's the only place, looks like there could be at least a couple of fixes. Easiest would be just hard code the width/height (that isn't even needed) and reference thumbnail directly for the src like this.
- <img src={thumbnail.src} width={thumbnail.width} height={thumbnail.height} alt={`${title} screenshot`} />
+ <img src={thumbnail} width="800" height="450" alt={`${title} screenshot`} />
The width/height looks to be consistently generated as 800x450. But it isn't necessary, either - it's probably just helping with perceived page load by making the image take up its default dimension before the image finishes loading, so the page doesn't jump around as it's loading.
The other is we could add back the responsive-loader, and modify the test parameter to include /(html|html-demos|react|react-demos)/ before the file extension. The filenames that are loaded look to follow this pattern, depending on whether its in core or react and an example or demo.
import srcImportbasic from './html/basic.png';
import srcImportcustomalert from './html/custom-alert.png';
import srcImportcustomtitle from './html/custom-title.png';
...
Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>
Closes #4842
Removes responsive-loader because we don't appear to be using that functionality, and it's causing issues with bundled images not being accessible in css files.