chore(tsconfig): update paths to use ~ instead of @

src/components/BackButton.astro

@@ -1,12 +1,12 @@
 ---
 import { ArrowLeft } from 'lucide-astro'
-import { getLocale, getUI } from '@/utils/i18n'
+import { getLocale, getUI } from '~/utils/i18n'
 
 const locale = getLocale(Astro)
 
 const {
   routes: {
-    mods: {slug},
+    mods: { slug },
   },
 } = getUI(locale)
 ---

src/components/Button.astro

@@ -1,5 +1,5 @@
 ---
-import { getLocale, getPath } from '@/utils/i18n'
+import { getLocale, getPath } from '~/utils/i18n'
 
 const locale = getLocale(Astro)
 const getLocalePath = getPath(locale)

src/components/Community.astro

@@ -1,12 +1,12 @@
 ---
-import Description from '@/components/Description.astro'
-import Button from '@/components/Button.astro'
+import Description from '~/components/Description.astro'
+import Button from '~/components/Button.astro'
 import { motion } from 'motion/react'
 import { Github, Check } from 'lucide-astro'
-import { getTitleAnimation } from '@/animations'
-import ComImage from '@/assets/ComImage.png'
+import { getTitleAnimation } from '~/animations'
+import ComImage from '~/assets/ComImage.png'
 import Image from 'astro/components/Image.astro'
-import { getLocale, getUI } from '@/utils/i18n'
+import { getLocale, getUI } from '~/utils/i18n'
 
 const locale = getLocale(Astro)
 

src/components/Features.astro

@@ -1,15 +1,15 @@
 ---
-import Description from '@/components/Description.astro'
+import Description from '~/components/Description.astro'
 import { motion } from 'motion/react'
-import { getTitleAnimation } from '@/animations'
+import { getTitleAnimation } from '~/animations'
 
-import WorkspacesVideo from '@/assets/Workspaces.webm'
-import GlanceVideo from '@/assets/Glance.webm'
-import CompactModeVideo from '@/assets/CompactMode.webm'
-import SplitViewsVideo from '@/assets/SplitViews.webm'
+import WorkspacesVideo from '~/assets/Workspaces.webm'
+import GlanceVideo from '~/assets/Glance.webm'
+import CompactModeVideo from '~/assets/CompactMode.webm'
+import SplitViewsVideo from '~/assets/SplitViews.webm'
 
 import Video from './Video.astro'
-import { getLocale, getUI } from '@/utils/i18n'
+import { getLocale, getUI } from '~/utils/i18n'
 
 const locale = getLocale(Astro)
 
@@ -25,7 +25,9 @@ const {
   title3 = features.title3,
 } = Astro.props
 
-const descriptions = Object.values(features.featureTabs).map((tab) => tab.description)
+const descriptions = Object.values(features.featureTabs).map(
+  (tab) => tab.description
+)
 ---
 
 <section
@@ -125,7 +127,11 @@ const descriptions = Object.values(features.featureTabs).map((tab) => tab.descri
       </div>
 
       <!-- Mobile description -->
-      <div class="feature-description mt-4 lg:hidden" data-descriptions={descriptions}></div>
+      <div
+        class="feature-description mt-4 lg:hidden"
+        data-descriptions={descriptions}
+      >
+      </div>
     </div>
 
     <div class="relative w-full lg:w-3/5">
@@ -173,10 +179,14 @@ const descriptions = Object.values(features.featureTabs).map((tab) => tab.descri
 </section>
 
 <script>
-  const features = document.querySelectorAll('.feature, .feature-tab') as NodeListOf<HTMLElement>  
+  const features = document.querySelectorAll(
+    '.feature, .feature-tab'
+  ) as NodeListOf<HTMLElement>
 
   // Set initial description
-  const descriptionEl = document.querySelector('.feature-description') as HTMLDivElement
+  const descriptionEl = document.querySelector(
+    '.feature-description'
+  ) as HTMLDivElement
   const descriptions = descriptionEl?.dataset.descriptions?.split(',')
   if (descriptionEl && descriptions) {
     descriptionEl.textContent = descriptions[0]
@@ -209,7 +219,7 @@ const descriptions = Object.values(features.featureTabs).map((tab) => tab.descri
     }
 
     const videos = document.querySelectorAll(
-      '.feature-video',
+      '.feature-video'
     ) as NodeListOf<HTMLVideoElement>
     videos.forEach((vid, i) => {
       const yOffset = (i - index) * 20

src/components/Footer.astro

@@ -1,11 +1,11 @@
 ---
-import Title from '@/components/Title.astro'
-import Description from '@/components/Description.astro'
-import Button from '@/components/Button.astro'
-import Circles from '@/components/Circles.astro'
-import SocialMediaStrip from '@/components/SocialMediaStrip.astro'
+import Title from '~/components/Title.astro'
+import Description from '~/components/Description.astro'
+import Button from '~/components/Button.astro'
+import Circles from '~/components/Circles.astro'
+import SocialMediaStrip from '~/components/SocialMediaStrip.astro'
 import { ArrowRight } from 'lucide-astro'
-import { getLocale, getPath, getUI } from '@/utils/i18n'
+import { getLocale, getPath, getUI } from '~/utils/i18n'
 
 const locale = getLocale(Astro)
 const getLocalePath = getPath(locale)

src/components/Hero.astro

@@ -1,14 +1,14 @@
 ---
-import Title from '@/components/Title.astro'
-import Description from '@/components/Description.astro'
-import Button from '@/components/Button.astro'
-import HomePageVideo from '@/assets/HomePageVideo.webm'
+import Title from '~/components/Title.astro'
+import Description from '~/components/Description.astro'
+import Button from '~/components/Button.astro'
+import HomePageVideo from '~/assets/HomePageVideo.webm'
 import { ArrowRight } from 'lucide-astro'
 import { motion } from 'motion/react'
-import { getTitleAnimation } from '@/animations'
+import { getTitleAnimation } from '~/animations'
 import Video from './Video.astro'
 import SocialMediaStrip from './SocialMediaStrip.astro'
-import { getLocale, getPath, getUI } from '@/utils/i18n'
+import { getLocale, getPath, getUI } from '~/utils/i18n'
 
 let titleAnimationCounter = 0
 function getNewAnimationDelay() {
@@ -69,13 +69,13 @@ const {
     </motion.span>
     <div class="mt-6 flex w-2/3 flex-col gap-3 sm:gap-6 md:w-fit md:flex-row">
       <motion.span client:load {...getHeroTitleAnimation()}>
-        <Button class="w-full" href={getLocalePath("/download")} isPrimary>
+        <Button class="w-full" href={getLocalePath('/download')} isPrimary>
           {hero.buttons.beta}
           <ArrowRight class="size-4" />
         </Button>
       </motion.span>
       <motion.span client:load {...getHeroTitleAnimation()}>
-        <Button href={getLocalePath("/donate")}>{hero.buttons.support}</Button>
+        <Button href={getLocalePath('/donate')}>{hero.buttons.support}</Button>
       </motion.span>
     </div>
     <motion.span

src/components/MobileMenu.astro

@@ -1,5 +1,5 @@
 ---
-import { getLocale, getPath, getUI } from '@/utils/i18n'
+import { getLocale, getPath, getUI } from '~/utils/i18n'
 
 const locale = getLocale(Astro)
 const getLocalePath = getPath(locale)

src/components/ModsList.tsx

@@ -1,9 +1,9 @@
 import { useState, useEffect } from 'preact/hooks'
-import type { ZenTheme } from '@/mods'
+import type { ZenTheme } from '~/mods'
 import { library, icon } from '@fortawesome/fontawesome-svg-core'
 import { faSort, faSortUp, faSortDown } from '@fortawesome/free-solid-svg-icons'
-import { useModsSearch } from '@/hooks/useModsSearch'
-import { getUI, type Locale } from '@/utils/i18n'
+import { useModsSearch } from '~/hooks/useModsSearch'
+import { getUI, type Locale } from '~/utils/i18n'
 
 // Add icons to the library
 library.add(faSort, faSortUp, faSortDown)
@@ -80,7 +80,9 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
     window.scrollTo(0, 0)
   }
 
-  const { routes: { mods } } = getUI(locale)
+  const {
+    routes: { mods },
+  } = getUI(locale)
 
   function renderPagination() {
     if (totalPages <= 1) return null
@@ -98,8 +100,7 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
           &lt;
         </button>
         <form onSubmit={handlePageSubmit} className="flex items-center gap-2">
-          {
-            mods.pagination.pagination.split('{input}').map((value, index) => {
+          {mods.pagination.pagination.split('{input}').map((value, index) => {
             if (index === 0) {
               return (
                 <input
@@ -113,11 +114,12 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
             }
             return (
               <span className="text-sm">
-                  {value.replace('{totalPages}', totalPages.toString()).replace('{totalItems}', totalItems.toString())}
+                {value
+                  .replace('{totalPages}', totalPages.toString())
+                  .replace('{totalItems}', totalItems.toString())}
               </span>
             )
-            })
-          }
+          })}
         </form>
         <button
           type="button"
@@ -228,9 +230,7 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
         ) : (
           <div className="col-span-4 grid place-items-center gap-4 place-self-center px-8 text-center">
             <h2 className="text-lg font-bold">{mods.noResults}</h2>
-            <p className="text-sm font-thin">
-              {mods.noResultsDescription}
-            </p>
+            <p className="text-sm font-thin">{mods.noResultsDescription}</p>
           </div>
         )}
       </div>

src/components/NavBar.astro

@@ -1,13 +1,13 @@
 ---
 import { motion } from 'motion/react'
-import Button from '@/components/Button.astro'
+import Button from '~/components/Button.astro'
 import { Astronav, MenuItems, Dropdown, DropdownItems } from 'astro-navbar'
 import { ArrowRight, ChevronDown, Download, Menu } from 'lucide-astro'
 import Logo from './Logo.astro'
 import { getTitleAnimation } from '../animations.ts'
 import ThemeSwitch from './ThemeSwitch.astro'
 import MobileMenu from './MobileMenu.astro'
-import { getLocale, getPath, getUI } from '@/utils/i18n'
+import { getLocale, getPath, getUI } from '~/utils/i18n'
 
 const locale = getLocale(Astro)
 const getLocalePath = getPath(locale)

src/components/ReleaseNoteItem.astro

@@ -6,9 +6,9 @@ import {
   type ReleaseNote,
   type BreakingChange,
   getReleaseNoteFirefoxVersion,
-} from '../release-notes';
+} from '../release-notes'
 import { releaseNotes as releaseNotesData } from '../release-notes'
-import { getLocale, getUI, getPath } from '@/utils/i18n'
+import { getLocale, getUI, getPath } from '~/utils/i18n'
 export type Props = ReleaseNote
 const { isTwilight, ...props } = Astro.props
 
@@ -17,9 +17,7 @@ const getLocalePath = getPath(locale)
 const {
   routes: {
     releaseNotes: {
-      components: {
-        releaseNoteItem,
-      }
+      components: { releaseNoteItem },
     },
   },
 } = getUI(locale)
@@ -30,14 +28,14 @@ if (props.date) {
   date = new Date(Date.parse(`${year}-${month}-${day}`))
 }
 
-const ffVersion = getReleaseNoteFirefoxVersion(props);
+const ffVersion = getReleaseNoteFirefoxVersion(props)
 const currentReleaseIndex = releaseNotesData.findIndex(
   (releaseNote: ReleaseNote) => releaseNote.version === props.version
-);
-const prevReleaseNote = releaseNotesData[currentReleaseIndex + 1];
-let compareLink = '';
+)
+const prevReleaseNote = releaseNotesData[currentReleaseIndex + 1]
+let compareLink = ''
 if (prevReleaseNote && !isTwilight) {
-  compareLink = `https://github.com/zen-browser/desktop/compare/${prevReleaseNote.version}...${props.version}`;
+  compareLink = `https://github.com/zen-browser/desktop/compare/${prevReleaseNote.version}...${props.version}`
 }
 ---
 
@@ -50,7 +48,7 @@ if (prevReleaseNote && !isTwilight) {
       isTwilight ? (
         <a
           class="!mb-2 block w-fit rounded-full bg-coral px-3 py-1 text-xs text-paper"
-          href={getLocalePath("/download?twilight")}
+          href={getLocalePath('/download?twilight')}
         >
           {releaseNoteItem.twilight}
         </a>
@@ -59,9 +57,13 @@ if (prevReleaseNote && !isTwilight) {
     <h1 class="flex items-center text-3xl font-bold">
       {
         isTwilight ? (
-          <>{releaseNoteItem.twilightChanges} {props.version} 🌙</>
+          <>
+            {releaseNoteItem.twilightChanges} {props.version} 🌙
+          </>
         ) : (
-          <>{releaseNoteItem.releaseChanges} {props.version} 🎉</>
+          <>
+            {releaseNoteItem.releaseChanges} {props.version} 🎉
+          </>
         )
       }
       {
@@ -115,13 +117,7 @@ if (prevReleaseNote && !isTwilight) {
     <div class="text-muted-forground mt-6 flex text-sm opacity-70">
       {isTwilight ? <Info class="mx-4 my-0 size-6 text-yellow-500" /> : null}
       <p class="m-0">
-        {
-          isTwilight ? (
-            <>
-              {releaseNoteItem.twilightWarning}
-            </>
-          ) : null
-        }
+        {isTwilight ? <>{releaseNoteItem.twilightWarning}</> : null}
         <span set:html={releaseNoteItem.reportIssues} />
       </p>
     </div>
@@ -154,7 +150,10 @@ if (prevReleaseNote && !isTwilight) {
                             href={`https://github.com/zen-browser/desktop/issues/${fix.issue}`}
                             rel="noopener noreferrer"
                             target="_blank"
-                            aria-label={releaseNoteItem.viewIssue.replace('{issue}', fix.issue)}
+                            aria-label={releaseNoteItem.viewIssue.replace(
+                              '{issue}',
+                              fix.issue
+                            )}
                           >
                             #{fix.issue}
                           </a>
@@ -206,7 +205,9 @@ if (prevReleaseNote && !isTwilight) {
                         href={breakingChange.link}
                         rel="noopener noreferrer"
                         target="_blank"
-                        aria-label={releaseNoteItem.sections.breakingChanges.description}
+                        aria-label={
+                          releaseNoteItem.sections.breakingChanges.description
+                        }
                       >
                         {releaseNoteItem.learnMore}
                       </a>

src/components/Sponsors.astro

@@ -1,12 +1,12 @@
 ---
-import Description from '@/components/Description.astro'
+import Description from '~/components/Description.astro'
 import { motion } from 'motion/react'
-import { getTitleAnimation } from '@/animations'
-import { getLocale, getUI } from '@/utils/i18n'
+import { getTitleAnimation } from '~/animations'
+import { getLocale, getUI } from '~/utils/i18n'
 
 const locale = getLocale(Astro)
 
-import tutaLogo from '@/assets/tuta-logo.png'
+import tutaLogo from '~/assets/tuta-logo.png'
 
 import Image from 'astro/components/Image.astro'
 const { showSponsors = true } = Astro.props
@@ -31,7 +31,11 @@ const {
     <div class="relative mt-8 flex items-center justify-center">
       <motion.span client:load {...getTitleAnimation(0.6)}>
         <a href={sponsors.sponsors['tuta'].url} target="_blank" class="w-fit">
-          <Image src={tutaLogo} alt={sponsors.sponsors['tuta'].name} class="h-16 w-fit object-contain" />
+          <Image
+            src={tutaLogo}
+            alt={sponsors.sponsors['tuta'].name}
+            class="h-16 w-fit object-contain"
+          />
         </a>
       </motion.span>
     </div>

src/layouts/Layout.astro

@@ -13,9 +13,9 @@ const defaultOgImage = '/share-pic.png';
 import '@fontsource/bricolage-grotesque/400.css'
 import '@fontsource/bricolage-grotesque/500.css'
 import '@fontsource/bricolage-grotesque/600.css'
-import NavBar from '@/components/NavBar.astro'
-import Footer from '@/components/Footer.astro'
-import { getLocale } from '@/utils/i18n'
+import NavBar from '~/components/NavBar.astro'
+import Footer from '~/components/Footer.astro'
+import { getLocale } from '~/utils/i18n'
 
 const locale = getLocale(Astro)
 ---

src/pages/[...locale]/404.astro

@@ -1,10 +1,10 @@
 ---
-import Title from '@/components/Title.astro'
-import Description from '@/components/Description.astro'
-import Button from '@/components/Button.astro'
-import { getLocale, getPath, getUI } from '@/utils/i18n'
-import Layout from '@/layouts/Layout.astro'
-export { getStaticPaths } from '@/utils/i18n'
+import Title from '~/components/Title.astro'
+import Description from '~/components/Description.astro'
+import Button from '~/components/Button.astro'
+import { getLocale, getPath, getUI } from '~/utils/i18n'
+import Layout from '~/layouts/Layout.astro'
+export { getStaticPaths } from '~/utils/i18n'
 
 const locale = getLocale(Astro)
 const getLocalePath = getPath(locale)

src/pages/[...locale]/about.astro

@@ -1,9 +1,9 @@
 ---
-import Button from '@/components/Button.astro'
-import Description from '@/components/Description.astro'
-import Layout from '@/layouts/Layout.astro'
-import { getLocale, getUI } from '@/utils/i18n'
-export { getStaticPaths } from '@/utils/i18n'
+import Button from '~/components/Button.astro'
+import Description from '~/components/Description.astro'
+import Layout from '~/layouts/Layout.astro'
+import { getLocale, getUI } from '~/utils/i18n'
+export { getStaticPaths } from '~/utils/i18n'
 
 const locale = getLocale(Astro)
 

src/pages/[...locale]/donate.astro

@@ -1,17 +1,15 @@
 ---
 import { ArrowRight } from 'lucide-astro'
-import Button from '@/components/Button.astro'
-import Description from '@/components/Description.astro'
-import Layout from '@/layouts/Layout.astro'
-import { getLocale, getUI } from '@/utils/i18n'
-export { getStaticPaths } from '@/utils/i18n'
+import Button from '~/components/Button.astro'
+import Description from '~/components/Description.astro'
+import Layout from '~/layouts/Layout.astro'
+import { getLocale, getUI } from '~/utils/i18n'
+export { getStaticPaths } from '~/utils/i18n'
 
 const locale = getLocale(Astro)
 const {
-  routes: {
-    donate,
-  },
-  layout
+  routes: { donate },
+  layout,
 } = getUI(locale)
 ---
 
@@ -21,9 +19,7 @@ const {
       class="relative flex w-full flex-col items-center justify-center gap-12"
     >
       <div class="px-8 lg:w-2/5 lg:text-center xl:px-0">
-        <Description class="text-6xl font-bold"
-          >{donate.title}</Description
-        >
+        <Description class="text-6xl font-bold">{donate.title}</Description>
         <Description>
           {donate.description}
         </Description>

src/pages/[...locale]/download.astro

@@ -1,11 +1,11 @@
 ---
-import Description from '@/components/Description.astro'
-import Layout from '@/layouts/Layout.astro'
-import { getReleasesWithChecksums } from '@/components/download/release-data.astro'
-import PlatformDownload from '@/components/download/PlatformDownload.astro'
-import DownloadScript from '@/components/download/DownloadScript.astro'
-import { getChecksums } from '@/utils/githubChecksums'
-import { getLocale, getUI } from '@/utils/i18n'
+import Description from '~/components/Description.astro'
+import Layout from '~/layouts/Layout.astro'
+import { getReleasesWithChecksums } from '~/components/download/release-data.astro'
+import PlatformDownload from '~/components/download/PlatformDownload.astro'
+import DownloadScript from '~/components/download/DownloadScript.astro'
+import { getChecksums } from '~/utils/githubChecksums'
+import { getLocale, getUI } from '~/utils/i18n'
 
 import { library, icon } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -16,7 +16,7 @@ import {
 } from '@fortawesome/free-brands-svg-icons'
 import { Lock, ExternalLink } from 'lucide-astro'
 
-export { getStaticPaths } from '@/utils/i18n'
+export { getStaticPaths } from '~/utils/i18n'
 
 const locale = getLocale(Astro)
 const {

src/pages/[...locale]/feed.xml.ts

@@ -1,7 +1,7 @@
 import rss, { type RSSOptions } from '@astrojs/rss'
-import { releaseNotes } from '@/release-notes'
-import type { ReleaseNote } from '@/release-notes'
-export { getStaticPaths } from '@/utils/i18n'
+import { releaseNotes } from '~/release-notes'
+import type { ReleaseNote } from '~/release-notes'
+export { getStaticPaths } from '~/utils/i18n'
 
 /** The default number of entries to include in the RSS feed. */
 const RSS_ENTRY_LIMIT = 20

src/pages/[...locale]/index.astro

@@ -1,21 +1,22 @@
 ---
-import Layout from '@/layouts/Layout.astro'
-import Hero from '@/components/Hero.astro'
-import Community from '@/components/Community.astro'
-import Features from '@/components/Features.astro'
-import Sponsors from '@/components/Sponsors.astro'
-import { getLocale, getUI } from '@/utils/i18n'
-export { getStaticPaths } from '@/utils/i18n'
+import Layout from '~/layouts/Layout.astro'
+import Hero from '~/components/Hero.astro'
+import Community from '~/components/Community.astro'
+import Features from '~/components/Features.astro'
+import Sponsors from '~/components/Sponsors.astro'
+import { getLocale, getUI } from '~/utils/i18n'
+export { getStaticPaths } from '~/utils/i18n'
 
 const locale = getLocale(Astro)
 
-const {
-  layout,
-} = getUI(locale)
-
+const { layout } = getUI(locale)
 ---
 
-<Layout title={layout.index.title} description={layout.index.description} isHome>
+<Layout
+  title={layout.index.title}
+  description={layout.index.description}
+  isHome
+>
   <main>
     <Hero />
     <Features />

src/pages/[...locale]/mods/[...slug].astro

@@ -1,12 +1,12 @@
 ---
-import { getAllMods, getAuthorLink, getLocalizedDate } from '@/mods'
-import Layout from '@/layouts/Layout.astro'
-import Description from '@/components/Description.astro'
-import Button from '@/components/Button.astro'
-import BackButton from '@/components/BackButton.astro'
+import { getAllMods, getAuthorLink, getLocalizedDate } from '~/mods'
+import Layout from '~/layouts/Layout.astro'
+import Description from '~/components/Description.astro'
+import Button from '~/components/Button.astro'
+import BackButton from '~/components/BackButton.astro'
 import { ArrowRight, Info } from 'lucide-astro'
-import { getUI } from '@/utils/i18n'
-import { getLocales, getLocale } from '@/utils/i18n'
+import { getUI } from '~/utils/i18n'
+import { getLocales, getLocale } from '~/utils/i18n'
 
 export async function getStaticPaths() {
   const mods = await getAllMods()
@@ -14,23 +14,23 @@ export async function getStaticPaths() {
     ...getLocales().map((locale) => ({
       params: {
         slug: mod.id,
-        locale: locale
+        locale: locale,
       },
       props: {
         ...mod,
-        locale: locale 
+        locale: locale,
       },
     })),
     {
       params: {
         slug: mod.id,
-        locale: undefined 
+        locale: undefined,
       },
       props: {
         ...mod,
-        locale: undefined 
+        locale: undefined,
+      },
     },
-    }
   ])
 }
 
@@ -47,14 +47,14 @@ const locale = getLocale(Astro)
 
 const {
   routes: {
-    mods: {slug},
+    mods: { slug },
   },
 } = getUI(locale)
 ---
 
 <Layout
-  title={slug.title.replace("{name}", mod.name)}
-  description={slug.description.replace("{name}", mod.name)}
+  title={slug.title.replace('{name}', mod.name)}
+  description={slug.description.replace('{name}', mod.name)}
   ogImage={mod.image}
 >
   <main class="mt-6 2xl:mt-0">
@@ -90,11 +90,23 @@ const {
       />
       <div class="flex flex-col justify-between gap-2 sm:flex-row">
         <div class="flex flex-shrink-0 flex-col gap-2 font-normal">
-          <p set:html={slug.createdBy.replace("{author}", mod.author).replace("{version}", mod.version).replace("{link}", getAuthorLink(mod.author))} />
-          <p set:html={slug.creationDate.replace("{createdAt}", dates.createdAt)} />
+          <p
+            set:html={slug.createdBy
+              .replace('{author}', mod.author)
+              .replace('{version}', mod.version)
+              .replace('{link}', getAuthorLink(mod.author))}
+          />
+          <p
+            set:html={slug.creationDate.replace('{createdAt}', dates.createdAt)}
+          />
           {
             dates.createdAt !== dates.updatedAt && (
-              <p set:html={slug.latestUpdate.replace("{updatedAt}", dates.updatedAt)} />
+              <p
+                set:html={slug.latestUpdate.replace(
+                  '{updatedAt}',
+                  dates.updatedAt
+                )}
+              />
             )
           }
           {

src/pages/[...locale]/mods/index.astro

@@ -1,11 +1,11 @@
 ---
-import Description from '@/components/Description.astro'
-import Layout from '@/layouts/Layout.astro'
-import ModsList from '@/components/ModsList'
-import { getAllMods } from '@/mods'
-import { getLocale, getUI } from '@/utils/i18n'
-import { CONSTANT } from '@/constants'
-export { getStaticPaths } from '@/utils/i18n'
+import Description from '~/components/Description.astro'
+import Layout from '~/layouts/Layout.astro'
+import ModsList from '~/components/ModsList'
+import { getAllMods } from '~/mods'
+import { getLocale, getUI } from '~/utils/i18n'
+import { CONSTANT } from '~/constants'
+export { getStaticPaths } from '~/utils/i18n'
 
 const locale = getLocale(Astro)
 

src/pages/[...locale]/privacy-policy.astro

@@ -1,8 +1,8 @@
 ---
-import Title from '@/components/Title.astro'
-import Layout from '@/layouts/Layout.astro'
-import { getLocale, getUI } from '@/utils/i18n'
-export { getStaticPaths } from '@/utils/i18n'
+import Title from '~/components/Title.astro'
+import Layout from '~/layouts/Layout.astro'
+import { getLocale, getUI } from '~/utils/i18n'
+export { getStaticPaths } from '~/utils/i18n'
 
 const locale = getLocale(Astro)
 

src/pages/[...locale]/release-notes/[...slug].astro

@@ -1,7 +1,7 @@
 ---
-import { releaseNotes } from '@/release-notes'
-import Layout from '@/layouts/Layout.astro'
-import { getLocale, getUI, getStaticPaths as getI18nPaths } from '@/utils/i18n'
+import { releaseNotes } from '~/release-notes'
+import Layout from '~/layouts/Layout.astro'
+import { getLocale, getUI, getStaticPaths as getI18nPaths } from '~/utils/i18n'
 
 const locale = getLocale(Astro)
 

src/pages/[...locale]/release-notes/index.astro

@@ -1,20 +1,21 @@
 ---
-import Layout from '@/layouts/Layout.astro'
-import ReleaseNoteItem from '@/components/ReleaseNoteItem.astro'
-import { releaseNotes as releaseNotesData, releaseNotesTwilight } from '@/release-notes'
-import Description from '@/components/Description.astro'
-import Button from '@/components/Button.astro'
+import Layout from '~/layouts/Layout.astro'
+import ReleaseNoteItem from '~/components/ReleaseNoteItem.astro'
+import {
+  releaseNotes as releaseNotesData,
+  releaseNotesTwilight,
+} from '~/release-notes'
+import Description from '~/components/Description.astro'
+import Button from '~/components/Button.astro'
 import { Modal, ModalBody, ModalHeader } from 'free-astro-components'
 import { ArrowUp } from 'lucide-astro'
-import { getLocale, getUI } from '@/utils/i18n'
-export { getStaticPaths } from '@/utils/i18n'
+import { getLocale, getUI } from '~/utils/i18n'
+export { getStaticPaths } from '~/utils/i18n'
 
 const locale = getLocale(Astro)
 
 const {
-  routes: {
-    releaseNotes,
-  },
+  routes: { releaseNotes },
   layout,
 } = getUI(locale)
 ---
@@ -28,7 +29,13 @@ const {
       class="py-42 flex min-h-screen flex-col justify-center px-10 lg:px-10 xl:px-10 2xl:w-3/5"
     >
       <Description class="mt-48 text-4xl font-bold">Release Notes</Description>
-      <p class="text-base opacity-55" set:html={releaseNotes.topSection.description.replaceAll("{latestVersion}", releaseNotesData[0].version)} />
+      <p
+        class="text-base opacity-55"
+        set:html={releaseNotes.topSection.description.replaceAll(
+          '{latestVersion}',
+          releaseNotesData[0].version
+        )}
+      />
       <div
         class="mx-auto mt-8 flex w-fit flex-col gap-4 sm:mr-0 sm:flex-row sm:items-center"
       >
@@ -53,7 +60,8 @@ const {
   </main>
   <Button href="#" id="scroll-top" isPrimary class="fixed bottom-8 right-8">
     <p class="hidden items-center gap-2 sm:flex">
-      {releaseNotes.backToTop} <ArrowUp aria-hidden="true" class="size-4" />
+      {releaseNotes.backToTop}
+      <ArrowUp aria-hidden="true" class="size-4" />
     </p>
     <ArrowUp aria-label="Back to the top" class="size-4 sm:hidden" />
   </Button>

src/pages/[...locale]/welcome.astro

@@ -1,15 +1,13 @@
 ---
-import Layout from '@/layouts/Layout.astro'
-import Features from '@/components/Features.astro'
-import { getLocale, getUI } from '@/utils/i18n'
-export { getStaticPaths } from '@/utils/i18n'
+import Layout from '~/layouts/Layout.astro'
+import Features from '~/components/Features.astro'
+import { getLocale, getUI } from '~/utils/i18n'
+export { getStaticPaths } from '~/utils/i18n'
 
 const locale = getLocale(Astro)
 
 const {
-  routes: {
-    welcome,
-  }, 
+  routes: { welcome },
   layout,
 } = getUI(locale)
 ---
@@ -18,6 +16,10 @@ const {
   <main
     class="relative mx-auto flex flex-col items-center gap-24 px-6 lg:gap-0 lg:px-24"
   >
-    <Features title1={welcome.title[0]} title2={welcome.title[1]} title3={welcome.title[2]} />
+    <Features
+      title1={welcome.title[0]}
+      title2={welcome.title[1]}
+      title3={welcome.title[2]}
+    />
   </main>
 </Layout>

src/pages/[...locale]/whatsnew.astro

@@ -1,16 +1,16 @@
 ---
 import { ArrowRight } from 'lucide-astro'
-import Button from '@/components/Button.astro'
-import Description from '@/components/Description.astro'
-import SocialMediaStrip from '@/components/SocialMediaStrip.astro'
-import Layout from '@/layouts/Layout.astro'
+import Button from '~/components/Button.astro'
+import Description from '~/components/Description.astro'
+import SocialMediaStrip from '~/components/SocialMediaStrip.astro'
+import Layout from '~/layouts/Layout.astro'
 
-import { releaseNotes } from '@/release-notes'
-import whatsNewText from '@/release-notes/whats-new.json'
-import Video from '@/components/Video.astro'
-import { getLocale, getUI } from '@/utils/i18n'
-import whatsNewVideo from '@/assets/whats-new.mp4'
-export { getStaticPaths } from '@/utils/i18n'
+import { releaseNotes } from '~/release-notes'
+import whatsNewText from '~/release-notes/whats-new.json'
+import Video from '~/components/Video.astro'
+import { getLocale, getUI } from '~/utils/i18n'
+import whatsNewVideo from '~/assets/whats-new.mp4'
+export { getStaticPaths } from '~/utils/i18n'
 
 const latestVersion = releaseNotes[0]
 
@@ -33,7 +33,7 @@ if (
 <Layout
   title={layout.whatsNew.title.replace(
     '{latestVersion.version}',
-    latestVersion.version,
+    latestVersion.version
   )}
 >
   <main
@@ -45,7 +45,7 @@ if (
           >{
             whatsNew.title.replace(
               '{latestVersion.version}',
-              latestVersion.version,
+              latestVersion.version
             )
           }</Description
         >

src/utils/i18n.ts

@@ -1,17 +1,15 @@
 import type { AstroGlobal, GetStaticPaths } from 'astro'
-import { CONSTANT } from '@/constants'
-import UI_EN from '@/i18n/en.json'
+import { CONSTANT } from '~/constants'
+import UI_EN from '~/i18n/en.json'
 
 export type Locale = (typeof locales)[number]
 
-export const getPath =
-  (locale?: Locale) =>
-  (path: string) => {
+export const getPath = (locale?: Locale) => (path: string) => {
   if (locale && !path.startsWith(`/${locale}`)) {
     return `/${locale}${path.startsWith('/') ? '' : '/'}${path}`
   }
   return path
-  }
+}
 
 export const getLocale = (Astro: AstroGlobal) => {
   if (Astro.params.locale) {
@@ -37,12 +35,19 @@ export const getUI = (locale?: Locale | string): UI => {
   const localeUI = ui[validLocale as Locale]
 
   function deepMerge<T>(defaultObj: T, overrideObj: Partial<T>): T {
-    if (typeof defaultObj !== 'object' || defaultObj === null) return (overrideObj ?? defaultObj) as T
-    if (typeof overrideObj !== 'object' || overrideObj === null) return (overrideObj ?? defaultObj) as T
-    const result: any = Array.isArray(defaultObj) ? [...defaultObj] : { ...defaultObj }
+    if (typeof defaultObj !== 'object' || defaultObj === null)
+      return (overrideObj ?? defaultObj) as T
+    if (typeof overrideObj !== 'object' || overrideObj === null)
+      return (overrideObj ?? defaultObj) as T
+    const result: any = Array.isArray(defaultObj)
+      ? [...defaultObj]
+      : { ...defaultObj }
     for (const key in defaultObj) {
       if (Object.prototype.hasOwnProperty.call(defaultObj, key)) {
-        result[key] = deepMerge((defaultObj as any)[key], (overrideObj as any)?.[key])
+        result[key] = deepMerge(
+          (defaultObj as any)[key],
+          (overrideObj as any)?.[key],
+        )
       }
     }
     for (const key in overrideObj) {
@@ -74,4 +79,3 @@ export const getStaticPaths = (() => {
 export const getLocales = () => {
   return [...locales, ...otherLocales]
 }
-  

tsconfig.json

@@ -5,7 +5,7 @@
     "jsxImportSource": "preact",
     "baseUrl": ".",
     "paths": {
-      "@/*": [
+      "~/*": [
         "./src/*"
       ]
     }