Switch to vite

app/@types/icon.d.ts

@@ -1,3 +1,8 @@
 // This file is generated by npm run build:icons
 
-export type IconName = "github" | "instagram" | "linkedin" | "mail" | "twitter";
+export type IconName =
+	| "github"
+	| "instagram"
+	| "linkedin"
+	| "mail"
+	| "twitter"

app/components/error/error.tsx

@@ -1,6 +1,5 @@
 import type { FC } from "react";
 
-import { KarelFunny } from "~/assets/images";
 import { Grid, Heading, Image, Link, Text, TextContainer, TextStyle } from "~/ui";
 
 interface ErrorProps {
@@ -31,7 +30,7 @@ export const Error: FC<ErrorProps> = ({ error }) => {
 			<Image
 				alt="Funny Karel Verschraegen"
 				className="w-full max-w-lg rounded-xl"
-				src={KarelFunny}
+				src="/assets/images/karel-funny.webp"
 				width={512}
 				height={512}
 			/>

app/components/header/header.tsx

@@ -1,6 +1,5 @@
 import { Link } from "@remix-run/react";
 
-import { Karel } from "~/assets/images";
 import { Avatar, Heading, NavLink, TextStyle } from "~/ui";
 
 const ROUTES = [
@@ -14,7 +13,7 @@ export const Header = () => {
 	return (
 		<header className="flex items-center justify-end border-b border-slate-200 pb-4 md:justify-between dark:border-slate-700">
 			<Link to="/" className="pointer-events-auto hidden items-center gap-4 md:flex" aria-label="Home">
-				<Avatar src={Karel} alt="Karel Verschraegen" />
+				<Avatar src="/assets/images/karel.webp" alt="Karel Verschraegen" />
 
 				<Heading element="h1" className="text-2xl">
 					<TextStyle variation="fancy">Karel Verschraegen</TextStyle>

app/root.tsx

@@ -2,7 +2,6 @@ import type { LinksFunction, LoaderFunction, MetaFunction } from "@remix-run/nod
 import { json } from "@remix-run/node";
 import {
 	Links,
-	LiveReload,
 	Meta,
 	Outlet,
 	Scripts,
@@ -15,9 +14,8 @@ import { Analytics } from "@vercel/analytics/react";
 import type { FC, PropsWithChildren } from "react";
 import { useEffect } from "react";
 
-import stylesheet from "~/tailwind.css";
+import "~/tailwind.css";
 
-import spriteSheet from "./assets/icons/sprite.svg";
 import { Error } from "./components/error/error";
 import { Footer } from "./components/footer/footer";
 import { Header } from "./components/header/header";
@@ -41,17 +39,10 @@ export const meta: MetaFunction = () => {
 };
 
 export const links: LinksFunction = () => [
-	{ rel: "stylesheet", href: stylesheet },
 	{
 		rel: "stylesheet",
 		href: "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap",
 	},
-	{
-		rel: "preload",
-		href: spriteSheet,
-		as: "image",
-		type: "image/svg+xml",
-	},
 ];
 
 const Layout: FC<PropsWithChildren> = ({ children }) => {
@@ -86,7 +77,6 @@ const Document: FC<PropsWithChildren> = ({ children }) => {
 
 				<ScrollRestoration />
 				<Scripts />
-				<LiveReload />
 				<Analytics />
 			</body>
 		</html>

app/routes/[sitemap.xml].tsx

@@ -1,6 +1,7 @@
 import { generateSitemap } from "@nasa-gcn/remix-seo";
-import { routes } from "@remix-run/dev/server-build";
 import type { LoaderFunction } from "@remix-run/node";
+// @ts-ignore
+import { routes } from "virtual:remix/server-build";
 
 export const loader: LoaderFunction = ({ request }) => {
 	return generateSitemap(request, routes, {

app/routes/_index.tsx

@@ -1,7 +1,5 @@
 import type { FC } from "react";
 
-import { Karel, KarelFunny } from "~/assets/images";
-import { EquipmentList, EquipmentListFirstFrame, LiquidEditor, LiquidEditorFirstFrame } from "~/assets/videos";
 import { SOCIALS } from "~/constants/socials";
 import { Grid, Heading, Icon, Image, Link, Text, TextContainer, TextStyle } from "~/ui";
 
@@ -14,14 +12,14 @@ const Index: FC = () => {
 						<div className="group relative">
 							<Image
 								alt="Funny Karel Verschraegen"
-								src={KarelFunny}
+								src="/assets/images/karel-funny.webp"
 								className="absolute inset-0 w-full max-w-lg rounded-xl opacity-0 transition-all duration-300 group-hover:rotate-3 group-hover:opacity-100"
 								width={512}
 								height={512}
 							/>
 							<Image
 								alt="Karel Verschraegen"
-								src={Karel}
+								src="/assets/images/karel.webp"
 								className="relative w-full max-w-lg rounded-xl opacity-100 transition-all duration-300 group-hover:rotate-3 group-hover:opacity-0"
 								width={512}
 								height={512}
@@ -265,11 +263,11 @@ const Index: FC = () => {
 								<video
 									className="rounded border border-slate-200 p-4 shadow dark:border-slate-700"
 									controls
-									poster={LiquidEditorFirstFrame}
+									poster="/assets/videos/liquid-editor-first-frame.webp"
 									preload="none"
 								>
 									This browser does not support embedded video players
-									<source src={LiquidEditor} type="video/mp4" />
+									<source src="/assets/videos/liquid-editor.mp4" type="video/mp4" />
 								</video>
 							</details>
 						</TextContainer>
@@ -296,11 +294,11 @@ const Index: FC = () => {
 								<video
 									className="rounded border border-slate-200 p-4 shadow dark:border-slate-700"
 									controls
-									poster={EquipmentListFirstFrame}
+									poster="/assets/videos/equipment-list-first-frame.webp"
 									preload="none"
 								>
 									This browser does not support embedded video players
-									<source src={EquipmentList} type="video/mp4" />
+									<source src="/assets/videos/equipment-list.mp4" type="video/mp4" />
 								</video>
 							</details>
 						</TextContainer>

app/ui/icon/icon.tsx

@@ -2,7 +2,6 @@ import type { FC, SVGAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 
 import type { IconName } from "../../@types/icon";
-import spriteSheet from "../../assets/icons/sprite.svg";
 
 type Size = "small" | "medium" | "large";
 
@@ -19,6 +18,6 @@ const SIZES: Record<Size, string> = {
 
 export const Icon: FC<Props> = ({ className = "", source, size = "medium" }) => (
 	<svg className={twMerge(`text-slate-700 dark:text-slate-300`, SIZES[size], className)}>
-		<use href={`${spriteSheet}#${source}`} />
+		<use href={`/assets/icons/sprite.svg#${source}`} />
 	</svg>
 );

env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="@remix-run/node" />

package.json

@@ -4,12 +4,13 @@
   "sideEffects": false,
   "type": "module",
   "scripts": {
-    "build": "bun run build:icons && NODE_ENV=production remix build",
-    "build:icons": "node --loader tsm ./scripts/build-icons.ts",
-    "dev": "bun run build:icons && remix dev --manual",
+    "build": "remix vite:build",
+    "build:icons": "bun run ./scripts/build-icons.ts",
+    "dev": "remix vite:dev",
     "lint": "eslint . --ext .ts,.tsx --fix",
     "fmt": "prettier 'app/**/*.{js,ts,jsx,tsx,json}' --write",
-    "fmt:check": "prettier 'app/**/*.{js,ts,jsx,tsx,json}' --check"
+    "fmt:check": "prettier 'app/**/*.{js,ts,jsx,tsx,json}' --check",
+    "start": "remix-serve ./build/server/index.js"
   },
   "dependencies": {
     "@nasa-gcn/remix-seo": "^2.0.0",
@@ -38,8 +39,9 @@
     "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.12",
     "tailwindcss": "^3.4.1",
-    "tsm": "^2.3.0",
     "typescript": "^5.4.2",
+    "vite": "^5.1.5",
+    "vite-tsconfig-paths": "^4.3.1",
     "web-vitals": "^3.5.2"
   },
   "engines": {

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+};

scripts/build-icons.ts

@@ -5,7 +5,7 @@ import * as path from "node:path";
 
 const cwd = process.cwd();
 const inputDir = path.join(cwd, "assets", "icons");
-const outputDir = path.join(cwd, "app", "assets", "icons");
+const outputDir = path.join(cwd, "public", "assets", "icons");
 const typesDir = path.join(cwd, "app", "@types");
 
 const files = glob

tsconfig.json

@@ -1,13 +1,14 @@
 {
-	"include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+	"include": ["env.d.ts", "**/*.ts", "**/*.tsx"],
 	"compilerOptions": {
-		"lib": ["DOM", "DOM.Iterable", "ES2019"],
+		"lib": ["ESNext"],
 		"isolatedModules": true,
 		"esModuleInterop": true,
 		"jsx": "react-jsx",
-		"moduleResolution": "node",
+		"module": "ESNext",
+		"moduleResolution": "Bundler",
 		"resolveJsonModule": true,
-		"target": "ES2019",
+		"target": "ESNext",
 		"strict": true,
 		"allowJs": true,
 		"forceConsistentCasingInFileNames": true,
@@ -17,6 +18,7 @@
 		},
 
 		// Remix takes care of building everything in `remix build`.
-		"noEmit": true
+		"noEmit": true,
+		"skipLibCheck": true
 	}
 }

vite.config.ts

@@ -0,0 +1,13 @@
+import { vitePlugin as remix } from "@remix-run/dev";
+import { installGlobals } from "@remix-run/node";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+installGlobals();
+
+export default defineConfig({
+	server: {
+		port: 3000,
+	},
+	plugins: [remix(), tsconfigPaths()],
+});