Fix asset loading for web (#2323)

* Updates for assets. * Newline. Co-authored-by: phix <[email protected]> Co-authored-by: Willy Lulciuc <[email protected]>
MarquezProject · Dec 15, 2022 · a2a63ae · a2a63ae
1 parent ef68ee5
commit a2a63ae
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 16 deletions.
diff --git a/web/src/components/header/Header.tsx b/web/src/components/header/Header.tsx
@@ -10,6 +10,7 @@ import MqText from '../core/text/MqText'
 import NamespaceSelect from '../namespace-select/NamespaceSelect'
 import React, { ReactElement } from 'react'
 import Search from '../search/Search'
+import marquez_logo from './marquez_logo.svg'
 
 const styles = (theme: Theme) => {
   return createStyles({
@@ -47,13 +48,7 @@ const Header = (props: HeaderProps): ReactElement => {
       <Toolbar>
         <Box className={classes.innerToolbar}>
           <Link to='/'>
-            <img
-              src={
-                'https://raw.githubusercontent.com/MarquezProject/marquez/main/web/src/img/marquez_logo.svg'
-              }
-              height={48}
-              alt='Marquez Logo'
-            />
+            <img src={marquez_logo} height={48} alt='Marquez Logo' />
           </Link>
           <Box display={'flex'} alignItems={'center'}>
             <Search />

diff --git a/web/src/img/marquez_logo.svg → web/src/components/header/marquez_logo.svg b/web/src/img/marquez_logo.svg → web/src/components/header/marquez_logo.svg
diff --git a/web/styles.d.ts b/web/styles.d.ts
@@ -2,3 +2,5 @@ declare module '*.css' {
   const content: any;
   export = content;
 }
+
+declare module '*.svg';
diff --git a/web/tsconfig.json b/web/tsconfig.json
@@ -14,6 +14,9 @@
     "downlevelIteration": true,
     "resolveJsonModule": false
   },
-  "include": ["./src/**/*"],
+  "include": [
+    "./src/**/*",
+    "styles.d.ts"
+  ],
   "exclude": ["./src/__tests__/*"]
 }
diff --git a/web/webpack.common.js b/web/webpack.common.js
@@ -29,13 +29,7 @@ module.exports = {
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?v=\d+\.\d+\.\d+)?$/,
-        use: [{
-          loader: 'file-loader',
-          options: {
-            name: '[name].[ext]',
-            outputPath: 'img/'
-          }
-        }]
+        loader: 'file-loader'
       },
       {
         test: /\.(woff(2)?|ttf|eot|otf)(\?v=\d+\.\d+\.\d+)?$/,
@@ -60,6 +54,7 @@ module.exports = {
   },
   output: {
     filename: 'bundle.js',
-    path: path.resolve(__dirname, 'dist')
+    path: path.resolve(__dirname, 'dist'),
+    publicPath: '/'
   }
 };