build-your-own-radar icon indicating copy to clipboard operation
build-your-own-radar copied to clipboard

Published 20 hours ago • verified publisher icon thoughtworks

fix: use relative asset imports

Open sigwinch28 opened this issue 4 years ago • 1 comments

Fix asset imports in SCSS, HTML, and JavaScript files so that the application works from any path, not just the root.

Several bits of the application use hard-coded references to image assets, e.g. <img src="/images/logo.png">. This means that I can't host the application anywhere except under the root path /.

However, it doesn't need to be this way: we can instead require the assets in the HTML templates, SCSS files, and javascript files. Then we can remove the publicPath: "/" webpack config and even add hashes to files loaded by file-loader. This means that babel-loader and css-loader correctly rewrite the paths.

This PR:

  1. Fixes image imports in SCSS files so they point to the assets using a path relative to the scss file.
  2. Uses image imports in javascript (via require) instead of hard-coding /images path.
  3. Uses image imports in HTML templates (via require and <%= ... %> syntax) instead of hard-coding /images path.
  4. Adds hashes to the filenames of image assets.
  5. Disables the esModule feature of file-loader since it's not needed and breaks HTML templating

Example file tree output (before vs. after):

--- before	2021-10-19 18:31:19.000000000 +0100
+++ after	2021-10-19 18:31:15.000000000 +0100
@@ -1,16 +1,16 @@
 dist
-├── common.6ce3d5b33f83763cdbff.css
-├── common.6ce3d5b33f83763cdbff.js
+├── common.94c0210b8fbbb652cee2.css
+├── common.94c0210b8fbbb652cee2.js
 ├── error.html
 ├── images
-│   ├── favicon.ico
-│   ├── logo.png
-│   ├── radar_legend.png
-│   ├── search-logo-2x.svg
-│   ├── tech-radar-landing-page-wide.png
-│   └── tw-logo.png
+│   ├── favicon.4aeb047e2ee51f9612af79498044d8a8.ico
+│   ├── logo.fabc8a6fc53ce3193a1a02ebe86c5c60.png
+│   ├── radar_legend.abc647e272ba5932c46e98a8fd5eb9d3.png
+│   ├── search-logo-2x.e565df250d7905a5838ffff5cf2c93fc.svg
+│   ├── tech-radar-landing-page-wide.8fede10852ad40bfaae508114326a399.png
+│   └── tw-logo.f70356919fc8804e5bf352741012eeba.png
 ├── index.html
-├── main.6ce3d5b33f83763cdbff.css
-└── main.6ce3d5b33f83763cdbff.js
+├── main.94c0210b8fbbb652cee2.css
+└── main.94c0210b8fbbb652cee2.js

 1 directory, 12 files

Example of changes to dist/index.html:

--- old/dist/index.html	2021-10-19 18:26:51.000000000 +0100
+++ new/dist/index.html	2021-10-19 18:27:44.000000000 +0100
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <link href="/images/favicon.ico" rel="icon"/>
-  <link href="/main.6ce3d5b33f83763cdbff.css" rel="stylesheet"></head>
+    <link href="images/favicon.4aeb047e2ee51f9612af79498044d8a8.ico" rel="icon"/>
+  <link href="main.94c0210b8fbbb652cee2.css" rel="stylesheet"></head>

   <body>
-  <script type="text/javascript" src="/main.6ce3d5b33f83763cdbff.js"></script></body>
+  <script type="text/javascript" src="main.94c0210b8fbbb652cee2.js"></script></body>
 </html>

sigwinch28 avatar Oct 19 '21 17:10 sigwinch28

Unit tests are now broken. Looks like Jasmine is very unhappy about encountering a PNG file.

sigwinch28 avatar Oct 19 '21 19:10 sigwinch28

Hi, thanks for raising this PR. We are in middle of a design refresh and will consider this functionality as part of it itself.

Thanks!

devansh-sharma-tw avatar Jan 25 '23 04:01 devansh-sharma-tw

Glad to hear! Thanks. I'll close this PR for now since the functionality is being considered :)

sigwinch28 avatar Jan 25 '23 12:01 sigwinch28