Port over homepage

additional.d.ts

@@ -0,0 +1,16 @@
+declare module '*.svg' {
+    import { FunctionComponent, SVGProps } from 'react'
+    export const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement>>
+    const src: string
+    export default src
+}
+
+declare module '*.mp4' {
+    const src: string
+    export default src
+}
+
+declare module '*.webm' {
+    const src: string
+    export default src
+}

next.config.js

@@ -1,7 +1,32 @@
 /** @type {import('next').NextConfig} */
+
 const nextConfig = {
   reactStrictMode: true,
   pageExtensions: ['tsx'],
+  webpack(config, options) {
+    const { isServer } = options
+
+    config.module.rules.push(
+      {
+        test: /\.svg$/,
+        use: ['@svgr/webpack', 'url-loader'],
+      },
+      {
+        test: /\.(mp4|webm)$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              publicPath: '/_next/static/media/',
+              outputPath: `${isServer ? '../' : ''}static/media/`,
+              name: '[name]-[hash].[ext]',
+            },
+          },
+        ],
+      }
+    )
+    return config
+  },
 }
 
 module.exports = nextConfig

package.json

@@ -65,6 +65,7 @@
     "@sourcegraph/eslint-config": "^0.27.0",
     "@sourcegraph/event-logger": "^2.0.2",
     "@sourcegraph/prettierrc": "^3.0.3",
+    "@svgr/webpack": "^6.2.1",
     "@types/d3-format": "^3.0.1",
     "@types/d3-time-format": "^4.0.0",
     "@types/lodash": "^4.14.180",
@@ -73,11 +74,13 @@
     "bootstrap": "4.6.0",
     "eslint": "^7.32.0",
     "eslint-config-next": "^12.1.0",
+    "file-loader": "^6.2.0",
     "mdi-react": "^8.2.0",
     "prettier": "^2.5.1",
     "react-bootstrap": "2.0.0",
     "react-spring": "^9.4.4",
     "sass": "^1.49.7",
-    "typescript": "4.5.5"
+    "typescript": "4.5.5",
+    "url-loader": "^4.1.1"
   }
 }