Use @/components alias for components

content/about/index.mdx

@@ -1,4 +1,4 @@
-import Bubble from "./../../components/Bubble";
+import Bubble from "@/components/Bubble";
 
 <Bubble>
 

pages/_app.tsx

@@ -2,11 +2,11 @@ import React, { ComponentType, ReactNode } from "react";
 import { NextComponentType, NextPageContext } from "next";
 import { AppProps as DefaultAppProps } from "next/app";
 import { MDXProvider } from "@mdx-js/react";
-import { ThemeProvider } from "../components/Theme";
-import { Navbar } from "../components/Navbar";
-import { Footer } from "../components/Footer";
-import { Link } from "../components/Link";
-import { DefaultLayout } from "../components/DefaultLayout";
+import { ThemeProvider } from "@/components/Theme";
+import { Navbar } from "@/components/Navbar";
+import { Footer } from "@/components/Footer";
+import { Link } from "@/components/Link";
+import { DefaultLayout } from "@/components/DefaultLayout";
 import styles from "./_app.module.css";
 
 import "./_app.css";

pages/about/index.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { Image } from "../../components/Image";
+import { Image } from "@/components/Image";
 import Content from "../../content/about/index.mdx";
 import styles from "./index.module.css";
-import { ConnectWithUs } from "components/ConnectWithUs";
-import { EmailSignup } from "components/EmailSignup";
-import { DefaultLayout } from "components/DefaultLayout";
+import { ConnectWithUs } from "@/components/ConnectWithUs";
+import { EmailSignup } from "@/components/EmailSignup";
+import { DefaultLayout } from "@/components/DefaultLayout";
 
 export default function AboutUs() {
   return (

pages/about/our-supporters.tsx

@@ -1,8 +1,11 @@
 import React from "react";
-import { Image } from "../../components/Image";
+
 import Content from "../../content/about/our-supporters.mdx";
+
 import styles from "./our-supporters.module.css";
 
+import { Image } from "@/components/Image";
+
 export default function OurSupporters() {
   return (
     <>

pages/get-involved.tsx

@@ -1,10 +1,13 @@
 import React from "react";
-import { Image } from "../components/Image";
-import { ConnectWithUs } from "../components/ConnectWithUs";
-import { EmailSignup } from "../components/EmailSignup";
+
 import Content from "../content/get-involved.mdx";
+
 import styles from "./get-involved.module.css";
 
+import { ConnectWithUs } from "@/components/ConnectWithUs";
+import { EmailSignup } from "@/components/EmailSignup";
+import { Image } from "@/components/Image";
+
 export default function GetInvolved() {
   return (
     <div className={styles.page}>

pages/index.tsx

@@ -1,24 +1,27 @@
 import React from "react";
-import { Image } from "../components/Image";
-import { SocialLinks } from "../components/SocialLinks";
-import { EventDescriptionCard } from "../components/EventDescriptionCard";
-import { NewsCard } from "../components/NewsCard";
-import { ConnectWithUs } from "../components/ConnectWithUs";
-import { EmailSignup } from "../components/EmailSignup";
-import { DefaultLayout } from "../components/DefaultLayout";
-import styles from "./index.module.css";
 
-// temporary event and news imports
-import OOTBReact, {
-  metadata as OOTBReactEventMetadata,
-} from "../content/playground/ootb-react.event.mdx";
 import AltTab, {
   metadata as altTabEventMetadata,
 } from "../content/playground/alt-tab.event.mdx";
+import OOTBReact, {
+  metadata as OOTBReactEventMetadata,
+} from "../content/playground/ootb-react.event.mdx";
 import UnavailableContent, {
   metadata as unavailableMetadata,
 } from "../content/playground/unavailable.news.mdx";
 
+import styles from "./index.module.css";
+
+import { ConnectWithUs } from "@/components/ConnectWithUs";
+import { DefaultLayout } from "@/components/DefaultLayout";
+import { EmailSignup } from "@/components/EmailSignup";
+import { EventDescriptionCard } from "@/components/EventDescriptionCard";
+import { Image } from "@/components/Image";
+import { NewsCard } from "@/components/NewsCard";
+import { SocialLinks } from "@/components/SocialLinks";
+
+// temporary event and news imports
+
 export default function Home() {
   const events = [
     { Content: OOTBReact, metadata: OOTBReactEventMetadata },

pages/playground.mdx

@@ -10,11 +10,11 @@ import {
   ButtonDemo,
   TechTalkDemo,
   MiniTechTalkDemo,
-} from "../components/playground";
-import { ConnectWithUs } from "../components/ConnectWithUs";
-import { EmailSignup } from "../components/EmailSignup";
+} from "@/components/playground";
+import { ConnectWithUs } from "@/components/ConnectWithUs";
+import { EmailSignup } from "@/components/EmailSignup";
 
-import { TeamMemberCard } from "../components/TeamMemberCard";
+import { TeamMemberCard } from "@/components/TeamMemberCard";
 
 # Playground
 

pages/themer.tsx

@@ -1,10 +1,11 @@
 import React from "react";
-import { useThemeContext, emptyPalette } from "components/Theme";
-import { Input } from "components/Input";
-import { Button } from "components/Button";
 
 import styles from "./themer.module.css";
 
+import { Button } from "@/components/Button";
+import { Input } from "@/components/Input";
+import { useThemeContext, emptyPalette } from "@/components/Theme";
+
 export default function Themer() {
   const context = useThemeContext();
   const palette = context?.theme.palette ?? emptyPalette;

tsconfig.json

@@ -24,6 +24,9 @@
     "strictBindCallApply": true,
     "strictPropertyInitialization": true,
     "strictFunctionTypes": true,
+    "paths": {
+      "@/components/*": ["components/*"]
+    }
   },
   "include": [
     "next-env.d.ts",