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

rembrandx created an issue. See original summary.

rembrandx’s picture

Issue summary: View changes
rembrandx’s picture

Issue summary: View changes
rembrandx’s picture

Issue summary: View changes
rubendello’s picture

There 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:

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 = result.replace(reg_images, 'url(\\"images\/');
result = result.replace(reg_icons, 'url(\\"icons\/');
result = result.replace(reg_inline_svg, 'generated\/sprite-inline.svg\#');

  • rembrandx committed 7f98c93 on 3.x
    Issue #3283754 by rembrandx, rubendello: Paths to fonts (and sprite svg...
rembrandx’s picture

Status: Active » Reviewed & tested by the community

will pick this up for the new release

rembrandx’s picture

Version: 3.6.7 » 3.7.0
Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.