Problem/Motivation
When running the storybook command with continuous watch (so not the build-storybook task), the fonts don't load and in some cases neither to the inline svg icons.
Steps to reproduce
use the command: npm run storybook
Proposed resolution
Might turn this into a patch later, but these are the 3 replacements to make:
In package.json, replace the 2 storybook commands with these ones (the location of static folders should be gone):
"storybook": "node patches/twig-embed.js && start-storybook --ci -p 6006",
"build-storybook": "node patches/twig-embed.js && build-storybook -o ../../../styleguide && node patches/relative-urls.js --location '../../../styleguide'",
Storybook is basically just a static (React) site, generated on the fly. In order for it to work, it generates html from the Twig files but also copies the assets (images, fonts, …) into that static site’s folder (eg. the ‘storybook’ folder or in the case of the ‘watched’ version of storybook: some hidden temp folder). The current commands, tell Storybook what the static folders are but not how to build the relative paths. that ‘static folders location’ parameter (-s) is also deprecated. So we move that function into the main config file instead, and give it some more info.
go to .storybook/main.js
, and add this new line inside module.exports array.
For example, paste it at rule 5, after the "core" object:
staticDirs: [{ from: '../icons', to: '/icons' }, { from: '../images/generated', to: '/images/generated' }, { from: '../images/source', to: '/images/source' }, { from: '../fonts', to: '/fonts' }],
And lastly, we need to fix the 'patches/relative-urls.js' file to properly handle relative font paths:
Find lines 62 to 65
var result = data.replace(/url\(\\"..\/fonts\//g, 'url\(\\"');
result = result.replace(/images\/generated\/sprite-inline.svg\#/g, 'generated\/sprite-inline.svg\#');
result = result.replace(/url\(\\"..\/images\//g, 'url\(\\"');
result = result.replace(/url\(\\"..\/icons\//g, 'url\(\\"');
Now replace it with this:
const reg_fonts = /url\(\\"\.\.\/fonts\//g;
const reg_images = /url\(\\"\.\.\/images\//g;
const reg_icons = /url\(\\"\.\.\/icons\//g;
const reg_inline_svg = /images\/generated\/sprite-inline\.svg\#/g;
var result = data.replace(reg_fonts, 'url(\\"fonts\/');
result = data.replace(reg_images, 'url(\\"images\/');
result = data.replace(reg_icons, 'url(\\"icons\/');
result = data.replace(reg_inline_svg, 'generated\/sprite-inline.svg\#');
Remaining tasks
Make a new release that includes this fix
Comments
Comment #2
rembrandx CreditAttribution: rembrandx at Dropsolid commentedComment #3
rembrandx CreditAttribution: rembrandx at Dropsolid commentedComment #4
rembrandx CreditAttribution: rembrandx at Dropsolid commentedComment #5
rubendello CreditAttribution: rubendello commentedThere was an issue with the proposed change in 'patches/relative-urls.js'. The result var kept using data, and not updating the previously changed result.
Replace lines 62 to 65 with this:
Comment #7
rembrandx CreditAttribution: rembrandx at Dropsolid commentedwill pick this up for the new release
Comment #8
rembrandx CreditAttribution: rembrandx at Dropsolid commented