all aliases implemented on imports

src/components/slideshow/Controls.tsx

@@ -1,6 +1,6 @@
 import { faXmark, faDownload } from "@fortawesome/free-solid-svg-icons";
 import styles from "@styles/Slideshow.module.css";
-import { Button } from "../common/Button";
+import { Button } from "@components/common/Button";
 
 interface ControlsProps {
   onClose: () => void;

src/components/slideshow/FullscreenImage.tsx

@@ -1,6 +1,6 @@
 import styles from "@styles/Slideshow.module.css";
 import animations from "@styles/animations.module.css";
-import type { SlideImage } from "../../types";
+import type { SlideImage } from "@types";
 
 interface FullscreenImageProps {
   image: SlideImage;

src/components/slideshow/GithubButton.tsx

@@ -1,5 +1,5 @@
 import { faGithub } from "@fortawesome/free-brands-svg-icons";
-import { Button } from "../common/Button";
+import { Button } from "@components/common/Button";
 
 export const GithubButton: React.FC = () => (
   <Button

src/components/slideshow/Slideshow.tsx

@@ -1,14 +1,14 @@
 import { useEffect, useRef, useState } from "react";
-import { preloadImages } from "../../utils/imagePreloader";
-import { useSlideshow } from "../../hooks/useSlideshow";
+import { preloadImages } from "@utils/imagePreloader";
+import { useSlideshow } from "@hooks/useSlideshow";
 import styles from "@styles/Slideshow.module.css";
-import type { SlideImage } from "../../types";
-import { getImagePath } from "../../config/images";
-import { Controls } from "./Controls";
-import { FullscreenImage } from "./FullscreenImage";
-import { GithubButton } from "./GithubButton";
-import { Loading } from "./Loading";
-import { Thumbnails } from "./Thumbnails";
+import type { SlideImage } from "@types";
+import { getImagePath } from "@config/images";
+import { Controls } from "@components/slideshow/Controls";
+import { FullscreenImage } from "@components/slideshow/FullscreenImage";
+import { GithubButton } from "@components/slideshow/GithubButton";
+import { Loading } from "@components/slideshow/Loading";
+import { Thumbnails } from "@components/slideshow/Thumbnails";
 
 const createImage = (id: string): SlideImage => ({
   id: id,

src/components/slideshow/Thumbnails.tsx

@@ -1,5 +1,5 @@
 import styles from "@styles/Slideshow.module.css";
-import type { SlideImage } from "../../types";
+import type { SlideImage } from "@types";
 
 interface ThumbnailsProps {
   images: SlideImage[];

tsconfig.json

@@ -14,7 +14,17 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@types": ["src/types"],
+      "@types/*": ["src/types/*"],
+      "@components/*": ["src/components/*"],
+      "@utils/*": ["src/utils/*"],
+      "@styles/*": ["src/styles/*"],
+      "@config/*": ["src/config/*"],
+      "@hooks/*": ["src/hooks/*"]
+    }
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

vite.config.ts

@@ -7,11 +7,12 @@ export default defineConfig({
   base: "/",
   resolve: {
     alias: {
-      "@types": path.resolve(__dirname, "./src/types"), // Alias @src to the src directory
-      "@components": path.resolve(__dirname, "./src/components"), // Alias @components to src/components
-      "@utils": path.resolve(__dirname, "./src/utils"), // Alias @utils to src/utils
-      "@styles": path.resolve(__dirname, "./src/styles"), //Alias @styles to src/styles
-      "@config": path.resolve(__dirname, "./src/config"), //Alias @config to src/config
+      "@types": path.resolve(__dirname, "src/types"),
+      "@components": path.resolve(__dirname, "src/components"),
+      "@hooks": path.resolve(__dirname, "src/hooks"),
+      "@utils": path.resolve(__dirname, "src/utils"),
+      "@styles": path.resolve(__dirname, "src/styles"),
+      "@config": path.resolve(__dirname, "src/config"),
     },
   },
   build: {