Use import aliases where possible

src/components/Header.astro

@@ -1,6 +1,6 @@
 ---
 import HeaderLink from './HeaderLink.astro';
-import { SITE_TITLE } from '../consts';
+import { SITE_TITLE } from '@consts';
 ---
 
 <header>

src/content/blog/using-mdx.mdx

@@ -18,7 +18,7 @@ If you have existing content authored in MDX, this integration will hopefully ma
 Here is how you import and use a UI component inside of MDX.  
 When you open this page in the browser, you should see the clickable button below.
 
-import HeaderLink from '../../components/HeaderLink.astro';
+import HeaderLink from '@components/HeaderLink.astro';
 
 <HeaderLink href="#" onclick="alert('clicked!')">
   Embedded component in MDX

src/layouts/Base.astro

@@ -1,6 +1,6 @@
 ---
-import Footer from '../components/Footer.astro';
-import Header from '../components/Header.astro';
+import Footer from '@components/Footer.astro';
+import Header from '@components/Header.astro';
 
 interface Props {
   title: string;

src/layouts/BlogPost.astro

@@ -1,6 +1,6 @@
 ---
 import type { CollectionEntry } from 'astro:content';
-import FormattedDate from '../components/FormattedDate.astro';
+import FormattedDate from '@components/FormattedDate.astro';
 import Base from './Base.astro';
 
 type Props = CollectionEntry<'blog'>['data'];

src/pages/404.astro

@@ -1,6 +1,6 @@
 ---
-import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
-import Base from '../layouts/Base.astro';
+import { SITE_TITLE, SITE_DESCRIPTION } from '@consts';
+import Base from '@layouts/Base.astro';
 ---
 
 <Base title={SITE_TITLE} description={SITE_DESCRIPTION}> 404</Base>

src/pages/about.astro

@@ -1,5 +1,5 @@
 ---
-import Layout from '../layouts/BlogPost.astro';
+import Layout from '@layouts/BlogPost.astro';
 ---
 
 <Layout

src/pages/blog/[...slug].astro

@@ -1,6 +1,6 @@
 ---
 import { type CollectionEntry, getCollection } from 'astro:content';
-import BlogPost from '../../layouts/BlogPost.astro';
+import BlogPost from '@layouts/BlogPost.astro';
 
 export async function getStaticPaths() {
   const posts = await getCollection('blog');

src/pages/blog/index.astro

@@ -1,8 +1,8 @@
 ---
-import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
+import { SITE_TITLE, SITE_DESCRIPTION } from '@consts';
 import { getCollection } from 'astro:content';
-import FormattedDate from '../../components/FormattedDate.astro';
-import Base from '../../layouts/Base.astro';
+import FormattedDate from '@components/FormattedDate.astro';
+import Base from '@layouts/Base.astro';
 
 const posts = (await getCollection('blog')).sort(
   (a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()

src/pages/index.astro

@@ -1,6 +1,6 @@
 ---
-import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
-import Base from '../layouts/Base.astro';
+import { SITE_TITLE, SITE_DESCRIPTION } from '@consts';
+import Base from '@layouts/Base.astro';
 ---
 
 <Base title={SITE_TITLE} description={SITE_DESCRIPTION}>

src/pages/rss.xml.js

@@ -1,6 +1,6 @@
 import rss from '@astrojs/rss';
 import { getCollection } from 'astro:content';
-import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
+import { SITE_TITLE, SITE_DESCRIPTION } from '@consts';
 
 export async function GET(context) {
   const posts = await getCollection('blog');

tsconfig.json

@@ -1,6 +1,21 @@
 {
   "extends": "astro/tsconfigs/strictest",
   "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": [
+        "src/components/*"
+      ],
+      "@assets/*": [
+        "src/assets/*"
+      ],
+      "@layouts/*": [
+        "src/layouts/*"
+      ],
+      "@consts": [
+        "src/consts.ts"
+      ]
+    },
     "strictNullChecks": true
-  }
-}
+  },
+}