refactor: create common asset

Author: ilyar

module/app/package.json

@@ -9,9 +9,11 @@
   },
   "devDependencies": {
     "typescript": "^5.5.3",
-    "vite": "^5.4.1"
+    "vite": "^5.4.1",
+    "vite-plugin-static-copy": "^1.0.6"
   },
   "dependencies": {
+    "@fontsource/jetbrains-mono": "^5.1.0",
     "pixi.js": "^8.4.1"
   }
 }

module/site/src/images/background.jpg module/asset/background.jpgmodule/site/src/images/background.jpg renamed to module/asset/background.jpg

@@ -21,6 +21,32 @@ const nextConfig = {
     unoptimized: true,
   },
   pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'mdx'],
+  webpack(config) {
+    // Grab the existing rule that handles SVG imports
+    // @ts-ignore - this is a private property that is not typed
+    const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'));
+
+    config.module.rules.push(
+      // Reapply the existing rule, but only for svg imports ending in ?url
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        resourceQuery: /url/, // *.svg?url
+      },
+      // Convert all other *.svg imports to React components
+      {
+        test: /\.svg$/i,
+        issuer: fileLoaderRule.issuer,
+        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
+        use: ['@svgr/webpack'],
+      }
+    );
+
+    // Modify the file loader rule to ignore *.svg, since we have it handled now.
+    fileLoaderRule.exclude = /\.svg$/i;
+
+    return config;
+  },
 }
 
 export default withMDX(nextConfig)

module/asset/logo.svg

@@ -38,6 +38,7 @@
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
     "@types/mdx": "^2.0.13",
     "eslint": "^8.56.0",
     "eslint-config-next": "^14.0.4",

module/site/next.config.mjs

@@ -1,10 +1,9 @@
 import { useId } from 'react'
 
 import { Intro, IntroFooter } from '@/components/Intro'
-import { StarField } from '@/components/StarField'
 import { ThemeToggle } from '@/components/ThemeToggle'
 
-import bg from '../images/background.jpg'
+import bg from '../../../asset/background.jpg'
 
 function Timeline() {
   let id = useId()