refactor: migrate from next.js to vite

.gitignore

@@ -19,10 +19,9 @@ node_modules/
 .env.production.local
 .env.local
 
-# Next.js files
-.next
-out
-next-env.d.ts
+# Vite and React Router output
+.react-router/
+build/
 
 # Fumadocs files
 .source

README.md

@@ -57,7 +57,7 @@ $ bun atlas:build    # Build Atlas only
 ```
 
 > [!NOTE]
-> Atlas hosted on Cloudflare using R2, Queue, Hyperdrive, and Rate Limits
+> Atlas hosted on Cloudflare using R2, Queue, Hyperdrive, and Rate Limits<br>
 > Website is built using a Dockerfile and runs as an image on our own infrastructure
 
 ## Contributing

apps/website/app/app.css

@@ -0,0 +1,9 @@
+@import "tailwindcss";
+@import "fumadocs-ui/css/neutral.css";
+@import "fumadocs-ui/css/preset.css";
+
+@layer base {
+  body {
+    font-family: "Inter", sans-serif;
+  }
+}

apps/website/src/components/docs/config-viewer.tsx → apps/website/app/components/docs/config-viewer.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { ChevronDown, ChevronRight, Search, X } from 'lucide-react';
 import type React from 'react';
 import { useMemo, useState } from 'react';
@@ -77,7 +75,7 @@ const ConfigViewer = ({ config, comments = {}, title = 'Configuration' }: Config
   const renderComment = (comment?: string, path?: string, depth: number = 0) => {
     if (!comment || !path || !visibleComments.has(path)) return null;
 
-    const indentSpaces = '  '.repeat(depth);
+    const _indentSpaces = '  '.repeat(depth);
 
     return (
       <div

apps/website/src/components/downloads/atlas-build-card.tsx → apps/website/app/components/downloads/atlas-build-card.tsx

@@ -1,16 +1,14 @@
-'use client';
-
-import { Download, Calendar, Package, GitCommit, ExternalLink } from 'lucide-react';
-import { type Build, formatDate, formatFileSize, getChannelColor } from '@/lib/atlas';
+import { Calendar, Download, ExternalLink, GitCommit, Package } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import { type Build, formatDate, formatFileSize, getChannelColor } from '@/lib/atlas';
 
 interface AtlasBuildCardProps {
   build: Build;
   projectName: string;
   version: string;
 }
 
-export function AtlasBuildCard({ build, projectName, version }: AtlasBuildCardProps) {
+export function AtlasBuildCard({ build, projectName, version: _version }: AtlasBuildCardProps) {
   const handleDownload = () => {
     window.open(build.downloads.application.url, '_blank');
   };

apps/website/src/components/downloads/atlas-builds-list.tsx → apps/website/app/components/downloads/atlas-builds-list.tsx

@@ -1,11 +1,9 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { AlertCircle, AlertTriangle, FlaskConical, Loader2, XCircle } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router';
+import { type Build, fetchBuilds, type VersionWithBuilds } from '@/lib/atlas';
 import { AtlasBuildCard } from './atlas-build-card';
 import { VersionSelector } from './version-selector';
-import { Loader2, AlertCircle, AlertTriangle, XCircle, FlaskConical } from 'lucide-react';
-import { type Build, type VersionWithBuilds, fetchBuilds } from '@/lib/atlas';
 
 interface AtlasBuildsListProps {
   projectId: string;
@@ -24,8 +22,7 @@ export function AtlasBuildsList({
   versionsMetadata,
   experimentalVersion,
 }: AtlasBuildsListProps) {
-  const router = useRouter();
-  const searchParams = useSearchParams();
+  const [searchParams, setSearchParams] = useSearchParams();
 
   const urlVersion = searchParams.get('version');
   const initialSelectedVersion = urlVersion && initialVersions.includes(urlVersion) ? urlVersion : defaultVersion;
@@ -43,9 +40,13 @@ export function AtlasBuildsList({
 
   const handleVersionChange = (version: string) => {
     setSelectedVersion(version);
-    const params = new URLSearchParams(searchParams.toString());
-    params.set('version', version);
-    router.push(`?${params.toString()}`, { scroll: false });
+    setSearchParams(
+      prev => {
+        prev.set('version', version);
+        return prev;
+      },
+      { preventScrollReset: true },
+    );
   };
 
   useEffect(() => {

apps/website/src/components/downloads/version-selector.tsx → apps/website/app/components/downloads/version-selector.tsx

@@ -1,10 +1,8 @@
-'use client';
-
-import { useState } from 'react';
-import { ChevronDown, Check, AlertTriangle, XCircle, FlaskConical } from 'lucide-react';
-import { cn } from '@/lib/utils';
 import * as Popover from '@radix-ui/react-popover';
+import { AlertTriangle, Check, ChevronDown, FlaskConical, XCircle } from 'lucide-react';
+import { useState } from 'react';
 import type { VersionWithBuilds } from '@/lib/atlas';
+import { cn } from '@/lib/cn';
 
 interface VersionSelectorProps {
   versions: string[];

apps/website/app/components/mdx.tsx

@@ -0,0 +1,25 @@
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Step, Steps } from 'fumadocs-ui/components/steps';
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import defaultMdxComponents from 'fumadocs-ui/mdx';
+import type { MDXComponents } from 'mdx/types';
+import ConfigViewer from '@/components/docs/config-viewer';
+
+export function getMDXComponents(components?: MDXComponents) {
+  return {
+    ...defaultMdxComponents,
+    ...components,
+    Step,
+    Steps,
+    Callout,
+    Tab,
+    Tabs,
+    ConfigViewer,
+  } satisfies MDXComponents;
+}
+
+export const useMDXComponents = getMDXComponents;
+
+declare global {
+  type MDXProvidedComponents = ReturnType<typeof getMDXComponents>;
+}

apps/website/src/components/sections/community.tsx → apps/website/app/components/sections/community.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { Github, MessageCircle } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card } from '@/components/ui/card';

apps/website/src/components/sections/footer.tsx → apps/website/app/components/sections/footer.tsx

@@ -1,10 +1,6 @@
-'use client';
-
-import Image from 'next/image';
-import Link from 'next/link';
-
+import { Link } from 'react-router';
+import { DiscordIcon, GitHubIcon } from '@/components/icons';
 import { siteConfig } from '@/config/site';
-import { DiscordIcon, GitHubIcon } from '../icons';
 
 interface LinkItem {
   href: string;
@@ -59,11 +55,11 @@ function LinkColumn({ title, links }: LinkColumnProps) {
   return (
     <section className='space-y-3'>
       <h3 className='text-sm font-medium'>{title}</h3>
-      <ul role='list' className='space-y-1.5'>
+      <ul className='space-y-1.5'>
         {links.map(({ href, label }) => {
           const isExternal = href.startsWith('http');
           return (
-            <li key={href} role='listitem'>
+            <li key={href}>
               {isExternal ? (
                 <a
                   href={href}
@@ -74,7 +70,7 @@ function LinkColumn({ title, links }: LinkColumnProps) {
                   {label}
                 </a>
               ) : (
-                <Link href={href} className='text-sm text-neutral-400 transition-colors duration-200 hover:text-white'>
+                <Link to={href} className='text-sm text-neutral-400 transition-colors duration-200 hover:text-white'>
                   {label}
                 </Link>
               )}
@@ -95,10 +91,10 @@ export function Footer() {
         <div className='grid gap-8 sm:grid-cols-2 sm:gap-10 lg:grid-cols-5'>
           <section className='text-left lg:col-span-2'>
             <Link
-              href='/'
+              to='/'
               className='inline-flex items-center gap-2 rounded-xl transition-opacity duration-200 hover:opacity-90 focus-visible:ring-2 focus-visible:ring-white/20 focus-visible:outline-none'
             >
-              <Image src='/logo.png' alt='' width={28} height={28} className='rounded-xl' />
+              <img src='/logo.png' alt='' width={28} height={28} className='rounded-xl' />
               <div>
                 <h2 className='text-base font-semibold'>BX Team</h2>
               </div>

apps/website/src/components/sections/hero.tsx → apps/website/app/components/sections/hero.tsx

@@ -1,10 +1,5 @@
-'use client';
-
 import { ArrowRight } from 'lucide-react';
-
-import Image from 'next/image';
-import Link from 'next/link';
-
+import { Link } from 'react-router';
 import { Button } from '@/components/ui/button';
 import { GradientBackground } from '@/components/ui/gradient-background';
 
@@ -35,7 +30,7 @@ export function Hero() {
 
             <div className='mt-8 flex flex-col items-center lg:items-start justify-center lg:justify-start gap-4 sm:mt-10 sm:flex-row'>
               <Button asChild className='w-full sm:w-auto px-6 py-2'>
-                <Link href='/docs'>Documentation</Link>
+                <Link to='/docs'>Documentation</Link>
               </Button>
               <Button asChild color='ghost' className='w-full sm:w-auto px-6 py-2'>
                 <a
@@ -56,7 +51,7 @@ export function Hero() {
             <div className='relative'>
               <div className='absolute inset-0 bg-blue-500/20 blur-3xl rounded-full scale-110'></div>
               <div className='relative w-80 h-80 xl:w-96 xl:h-96'>
-                <Image src='/logo.png' alt='BX Team Logo' fill className='object-contain drop-shadow-2xl' priority />
+                <img src='/logo.png' alt='BX Team Logo' className='object-contain drop-shadow-2xl w-full h-full' />
               </div>
             </div>
           </div>