[Storybook] Fix PNG/SVG asset resolution.
Fixes the missing images in the Logo story. The current method of downloading the images into docs/ui/assets and treating them as static assets (with the start-storybook -s option) could be problematic if that directory is deleted or "cleaned" before the storybook build. Instead, the images are now downloaded into ./storybook/resolve-imports and imported explicitly in the code in Logo.stories.data.js. * ./storybook/resolve-less-imports renamed to resolve-imports * .gitignore is updated to reflect that * Webpack config is updated with the `resolve-imports` path * static option (-s) is removed from npm start script * Images are explicitly imported in Logo.stories.data.js * Type definitions are added for .svg and .png files Change-Id: I242d229242c86a5784d6d4611d0b9c7049712dac
This commit is contained in:
parent
57e069ba81
commit
6907c81a15
|
@ -43,5 +43,6 @@ Thumbs.db
|
|||
|
||||
# storybook
|
||||
/.storybook/resolve-less-imports/
|
||||
/.storybook/resolve-imports/
|
||||
/.storybook/integration.less
|
||||
.vscode
|
||||
|
|
|
@ -24,11 +24,10 @@ module.exports = {
|
|||
},
|
||||
{
|
||||
test: /\.(gif|png|jpe?g|svg)$/i,
|
||||
issuer: /\.less$/,
|
||||
loader: 'file-loader',
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
paths: [
|
||||
path.resolve( __dirname, 'components/images' )
|
||||
path.resolve( __dirname, './resolve-imports' )
|
||||
]
|
||||
}
|
||||
},
|
||||
|
@ -44,7 +43,7 @@ module.exports = {
|
|||
options: {
|
||||
relativeUrls: false,
|
||||
paths: [
|
||||
path.resolve( __dirname, 'resolve-less-imports' )
|
||||
path.resolve( __dirname, 'resolve-imports' )
|
||||
]
|
||||
}
|
||||
} ]
|
||||
|
|
|
@ -2,19 +2,19 @@
|
|||
set -euo pipefail
|
||||
IFS=$'\n\t'
|
||||
|
||||
mkdir -p .storybook/resolve-less-imports/mediawiki.ui
|
||||
mkdir -p docs/ui/assets/
|
||||
mkdir -p .storybook/resolve-imports/mediawiki.ui
|
||||
mkdir -p .storybook/resolve-imports/assets
|
||||
|
||||
rm -f .storybook/resolve-less-imports/mediawiki.skin.variables.less
|
||||
cp resources/mediawiki.less/mediawiki.skin.variables.less .storybook/resolve-less-imports/
|
||||
rm -f .storybook/resolve-imports/mediawiki.skin.variables.less
|
||||
cp resources/mediawiki.less/mediawiki.skin.variables.less .storybook/resolve-imports/
|
||||
|
||||
# Fetch resources via curl, `-sSL` silently, Show only errors, Location header and also with a 3XX response code.
|
||||
curl -sS "https://en.wikipedia.org/w/load.php?only=styles&skin=vector&debug=true&modules=ext.echo.styles.badge|ext.uls.pt|wikibase.client.init|mediawiki.skinning.interface" -o .storybook/integration.less
|
||||
curl -sSL "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.skin.defaults.less?format=TEXT" | base64 --decode > .storybook/resolve-less-imports/mediawiki.skin.defaults.less
|
||||
curl -sSL "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.mixins.less?format=TEXT" | base64 --decode > .storybook/resolve-less-imports/mediawiki.mixins.less
|
||||
curl -sSL "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.ui/variables.less?format=TEXT" | base64 --decode > .storybook/resolve-less-imports/mediawiki.ui/variables.less
|
||||
curl -sSL "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.mixins.rotation.less?format=TEXT" | base64 --decode > .storybook/resolve-less-imports/mediawiki.mixins.rotation.less
|
||||
curl -sSL "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.mixins.animation.less?format=TEXT" | base64 --decode > .storybook/resolve-less-imports/mediawiki.mixins.animation.less
|
||||
curl -sS "https://en.m.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg" -o "docs/ui/assets/wordmark.svg"
|
||||
curl -sS "https://en.m.wikipedia.org/static/images/mobile/copyright/wikipedia.png" -o "docs/ui/assets/icon.png"
|
||||
curl -sS "https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-tagline-en.svg" -o "docs/ui/assets/tagline.svg"
|
||||
curl -sSL "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.skin.defaults.less?format=TEXT" | base64 --decode > .storybook/resolve-imports/mediawiki.skin.defaults.less
|
||||
curl -sSL "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.mixins.less?format=TEXT" | base64 --decode > .storybook/resolve-imports/mediawiki.mixins.less
|
||||
curl -sSL "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.ui/variables.less?format=TEXT" | base64 --decode > .storybook/resolve-imports/mediawiki.ui/variables.less
|
||||
curl -sSL "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.mixins.rotation.less?format=TEXT" | base64 --decode > .storybook/resolve-imports/mediawiki.mixins.rotation.less
|
||||
curl -sSL "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.mixins.animation.less?format=TEXT" | base64 --decode > .storybook/resolve-imports/mediawiki.mixins.animation.less
|
||||
curl -sS "https://en.m.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg" -o ".storybook/resolve-imports/assets/wordmark.svg"
|
||||
curl -sS "https://en.m.wikipedia.org/static/images/mobile/copyright/wikipedia.png" -o ".storybook/resolve-imports/assets/icon.png"
|
||||
curl -sS "https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-tagline-en.svg" -o ".storybook/resolve-imports/assets/tagline.svg"
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "dev-scripts/setup-storybook.sh && start-storybook --quiet -p 6006 -s docs/ui",
|
||||
"start": "dev-scripts/setup-storybook.sh && start-storybook --quiet -p 6006",
|
||||
"test": "npm -s run lint && tsc && npm -s run doc",
|
||||
"test:size": "node ./tests/resource-loader-bundlesize.js",
|
||||
"lint": "npm -s run lint:js && npm -s run lint:styles && npm -s run lint:i18n",
|
||||
|
|
|
@ -4,12 +4,15 @@
|
|||
*/
|
||||
|
||||
import logoTemplate from '!!raw-loader!../includes/templates/Logo.mustache';
|
||||
import wordmarkSrc from '../.storybook/resolve-imports/assets/wordmark.svg';
|
||||
import tagelineScr from '../.storybook/resolve-imports/assets/tagline.svg';
|
||||
import iconSrc from '../.storybook/resolve-imports/assets/icon.png';
|
||||
|
||||
/**
|
||||
* @type {LogoOptions}
|
||||
*/
|
||||
const wordmark = {
|
||||
src: '/assets/wordmark.svg',
|
||||
src: wordmarkSrc,
|
||||
width: 116,
|
||||
height: 18
|
||||
};
|
||||
|
@ -18,7 +21,7 @@ const wordmark = {
|
|||
* @type {LogoOptions}
|
||||
*/
|
||||
const tagline = {
|
||||
src: '/assets/tagline.svg',
|
||||
src: tagelineScr,
|
||||
width: 117,
|
||||
height: 13
|
||||
};
|
||||
|
@ -26,7 +29,7 @@ const tagline = {
|
|||
/**
|
||||
* @type {string}
|
||||
*/
|
||||
const icon = '/assets/icon.png';
|
||||
const icon = iconSrc;
|
||||
|
||||
/**
|
||||
* @type {LogoTemplateData}
|
||||
|
|
|
@ -2,3 +2,13 @@ declare module "!!raw-loader!*" {
|
|||
const src: string;
|
||||
export default src;
|
||||
}
|
||||
|
||||
declare module "*.svg" {
|
||||
const src: string;
|
||||
export default src;
|
||||
}
|
||||
|
||||
declare module "*.png" {
|
||||
const src: string;
|
||||
export default src;
|
||||
}
|
Loading…
Reference in New Issue