Commit 7f98c931 authored by rembrandx's avatar rembrandx Committed by rembrandx
Browse files

Issue #3283754 by rembrandx, rubendello: Paths to fonts (and sprite svg) give a 404 in Storybook

parent a4098035

templates/BASE/.storybook/main.js

+1 −0
Original line number Diff line number Diff line
@@ -2,6 +2,7 @@ module.exports = { 
  core: {

    builder: "webpack5",

  },

  staticDirs: [{ from: '../icons', to: '/icons' }, { from: '../images/generated', to: '/images/generated' }, { from: '../images/source', to: '/images/source' }, { from: '../fonts', to: '/fonts' }],

  "stories": [

    "../components/**/*.stories.mdx",

    "../components/**/*.stories.@(js|jsx|ts|tsx)"

templates/BASE/package.json.gtemp

+2 −2
Original line number Diff line number Diff line
@@ -62,8 +62,8 @@ 
    "requirements-check": "node check_node_version.js",

    "preinstall": "chmod +x sh/preinstall.sh && sh/preinstall.sh",

    "postinstall": "npm run requirements-check && find node_modules/ -name '*.info' -type f -delete",

    "storybook": "node patches/twig-embed.js && start-storybook --ci -s ./icons, ./images, ./fonts -p 6006",

    "build-storybook": "node patches/twig-embed.js && build-storybook -s ./icons,./images,./fonts -o ../../../styleguide && node patches/relative-urls.js --location '../../../styleguide'",

    "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'",

    "dev-all": "gulp dev && npm run storybook",

    "prod-all": "gulp prod && npm run build-storybook",

    "gulp": "gulp",

templates/BASE/patches/relative-urls.js

+13 −7
Original line number Diff line number Diff line
@@ -56,13 +56,19 @@ glob(myFiles, {nonull:true}, function (er, files) { 
        return console.log(err);

      }



      // eg. find: url(\"../fonts/

      // replace with: url(\"



      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\(\\"');

      // find: url(\"../fonts/

      // replace with: url(\"fonts/

      // eg: url(\"../fonts/ -> url(\"fonts/")



      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\#');



      fs.writeFile(f, result, 'utf8', function (err) {

        if (err) return console.log(err);