Migrate to react router

.gitignore

@@ -2,6 +2,7 @@ node_modules
 
 /build
 /server-build
+.react-router/
 .env
 .cache
 /test-results/

app/components/back-to-top.tsx

@@ -1,4 +1,4 @@
-import { Link } from '@remix-run/react'
+import { Link } from 'react-router'
 import { ChevronUpIcon } from 'lucide-react'
 
 export function BackToTop({ className }: { className?: string }) {

app/components/error-boundary.tsx

@@ -3,7 +3,7 @@ import {
   isRouteErrorResponse,
   useParams,
   useRouteError,
-} from '@remix-run/react'
+} from 'react-router'
 import { captureRemixErrorBoundaryError } from '@sentry/remix'
 import { getErrorMessage } from '#app/utils/misc.tsx'
 

app/components/hydrated.tsx

@@ -1,4 +1,4 @@
-import  { type PropsWithChildren , useEffect, useState } from 'react'
+import { type PropsWithChildren, useEffect, useState } from 'react'
 
 let isHydrating = true
 

app/components/newsletter.tsx

@@ -1,4 +1,4 @@
-import { useFetcher } from '@remix-run/react'
+import { useFetcher } from 'react-router'
 import { LoaderIcon } from 'lucide-react'
 import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { useSpinDelay } from 'spin-delay'
@@ -16,7 +16,7 @@ export function NewsletterForm() {
       name="newsletter"
       method="POST"
       action="/resources/newsletter"
-      className="xl:p-8 grid max-w-xl rounded-md bg-card p-6 shadow-md"
+      className="grid max-w-xl rounded-md bg-card p-6 shadow-md xl:p-8"
       key={JSON.stringify(fetcher.data)}
     >
       <HoneypotInputs />

app/components/section-heading.tsx

@@ -1,4 +1,4 @@
-import { Link } from '@remix-run/react'
+import { Link } from 'react-router'
 
 export function SectionHeading({
   children,

app/components/shell.tsx

@@ -1,4 +1,4 @@
-import { Link, NavLink } from '@remix-run/react'
+import { Link, NavLink } from 'react-router'
 import {
   ExternalLinkIcon,
   Home,
@@ -28,28 +28,28 @@ export function Navigation() {
   return (
     <nav
       aria-label="Global"
-      className="xl:flex-col xl:items-start xl:gap-0 flex flex-col divide-y divide-stone-100 overflow-hidden rounded-lg bg-card shadow-lg shadow-stone-200 md:flex-row md:items-center md:gap-2 md:divide-none md:bg-transparent md:shadow-none lg:gap-3"
+      className="flex flex-col divide-y divide-stone-100 overflow-hidden rounded-lg bg-card shadow-lg shadow-stone-200 md:flex-row md:items-center md:gap-2 md:divide-none md:bg-transparent md:shadow-none lg:gap-3 xl:flex-col xl:items-start xl:gap-0"
     >
       <NavLink
         to="/"
         prefetch="intent"
         className={({ isActive }) =>
           cn(
-            'xl:p-1 xl:aspect-auto xl:rounded-none group flex-none items-center px-3 py-2 font-condensed text-lg font-bold outline-none transition-colors hover:text-gray-900 focus:ring-2 focus:ring-inset focus:ring-primary/20 md:mr-1 md:aspect-square md:rounded-full md:p-3 lg:text-xl',
+            'group flex-none items-center px-3 py-2 font-condensed text-lg font-bold outline-none transition-colors hover:text-gray-900 focus:ring-2 focus:ring-inset focus:ring-primary/20 md:mr-1 md:aspect-square md:rounded-full md:p-3 lg:text-xl xl:aspect-auto xl:rounded-none xl:p-1',
             'hover:text-primary',
             {
               'text-stone-900 ring-0': isActive,
-              'xl:after:content-none relative after:absolute after:bottom-[5px] after:left-1/2 after:-ml-5 after:h-[2px] after:w-10 after:bg-primary after:content-none md:after:content-[""]':
+              'relative after:absolute after:bottom-[5px] after:left-1/2 after:-ml-5 after:h-[2px] after:w-10 after:bg-primary after:content-none md:after:content-[""] xl:after:content-none':
                 isActive,
             },
           )
         }
       >
         <Home
           size={24}
-          className="xl:hidden order-1 hidden stroke-secondary md:block md:group-hover:scale-105"
+          className="order-1 hidden stroke-secondary md:block md:group-hover:scale-105 xl:hidden"
         />
-        <span className="xl:not-sr-only md:sr-only">Startseite</span>
+        <span className="md:sr-only xl:not-sr-only">Startseite</span>
       </NavLink>
       {navigation.main.map(item => (
         <NavLink
@@ -58,11 +58,11 @@ export function Navigation() {
           prefetch="intent"
           className={({ isActive }) =>
             cn(
-              'xl:p-1 px-3 py-2 font-condensed text-lg font-bold text-stone-800 outline-none ring-inset ring-card transition-colors focus:ring-2 focus:ring-primary/20 md:rounded-md md:px-1 md:py-2 lg:text-xl',
+              'px-3 py-2 font-condensed text-lg font-bold text-stone-800 outline-none ring-inset ring-card transition-colors focus:ring-2 focus:ring-primary/20 md:rounded-md md:px-1 md:py-2 lg:text-xl xl:p-1',
               'hover:text-primary',
               {
                 'text-stone-900 ring-0': isActive,
-                'xl:after:content-none relative after:absolute after:bottom-[5px] after:left-1/2 after:-ml-5 after:h-[2px] after:w-10 after:bg-primary after:content-none md:after:content-[""]':
+                'relative after:absolute after:bottom-[5px] after:left-1/2 after:-ml-5 after:h-[2px] after:w-10 after:bg-primary after:content-none md:after:content-[""] xl:after:content-none':
                   isActive,
               },
             )

app/components/toc.tsx

@@ -1,4 +1,4 @@
-import { Link } from '@remix-run/react'
+import { Link } from 'react-router'
 import { BookOpen } from 'lucide-react'
 import { cn } from '#app/utils/misc.js'
 

app/components/ui/divider.tsx

@@ -1,4 +1,4 @@
-import { Link } from '@remix-run/react'
+import { Link } from 'react-router'
 import { ChevronUpIcon } from 'lucide-react'
 import { cn } from '#app/utils/misc.js'
 

app/entry.client.tsx

@@ -1,4 +1,4 @@
-import { RemixBrowser } from '@remix-run/react'
+import { HydratedRouter } from 'react-router/dom'
 import { startTransition } from 'react'
 import { hydrateRoot } from 'react-dom/client'
 
@@ -11,5 +11,5 @@ if (ENV.MODE === 'production' && ENV.SENTRY_DSN) {
 }
 
 startTransition(() => {
-  hydrateRoot(document, <RemixBrowser />)
+  hydrateRoot(document, <HydratedRouter />)
 })

app/entry.server.tsx

@@ -1,11 +1,13 @@
 import { PassThrough } from 'stream'
+
 import {
   type ActionFunctionArgs,
   type LoaderFunctionArgs,
-  createReadableStreamFromReadable,
   type HandleDocumentRequestFunction,
-} from '@remix-run/node'
-import { RemixServer } from '@remix-run/react'
+} from 'react-router'
+
+import { createReadableStreamFromReadable } from '@react-router/node'
+import { ServerRouter } from 'react-router'
 import * as Sentry from '@sentry/remix'
 import chalk from 'chalk'
 import { isbot } from 'isbot'
@@ -29,7 +31,8 @@ if (ENV.MODE === 'production' && ENV.SENTRY_DSN) {
 type DocRequestArgs = Parameters<HandleDocumentRequestFunction>
 
 export default async function handleRequest(...args: DocRequestArgs) {
-  const [request, responseStatusCode, responseHeaders, remixContext] = args
+  const [request, responseStatusCode, responseHeaders, reactRouterContext] =
+    args
   const callbackName = isbot(request.headers.get('user-agent'))
     ? 'onAllReady'
     : 'onShellReady'
@@ -39,9 +42,9 @@ export default async function handleRequest(...args: DocRequestArgs) {
     const timings = makeTimings('render', 'renderToPipeableStream')
 
     const { pipe, abort } = renderToPipeableStream(
-      <RemixServer
+      <ServerRouter
         abortDelay={ABORT_DELAY}
-        context={remixContext}
+        context={reactRouterContext}
         url={request.url}
       />,
       {

app/root.tsx

@@ -1,4 +1,3 @@
-import { type LoaderFunctionArgs } from '@remix-run/node'
 import {
   Link,
   Links,
@@ -8,7 +7,7 @@ import {
   ScrollRestoration,
   useLoaderData,
   useLocation,
-} from '@remix-run/react'
+} from 'react-router'
 import { withSentry } from '@sentry/remix'
 import { MenuIcon } from 'lucide-react'
 import { HoneypotProvider } from 'remix-utils/honeypot/react'
@@ -25,6 +24,7 @@ import fontStyleSheetUrl from './styles/font.css?url'
 import { getEnv } from './utils/env.server.ts'
 import { honeypot } from './utils/honeypot.server.ts'
 import { cn, getDomainUrl } from './utils/misc.tsx'
+import { type Route } from '../.react-router/types/app/+types/root.ts'
 
 export function links() {
   return [
@@ -39,7 +39,7 @@ export function meta() {
   return [{ title: 'Walz' }]
 }
 
-export async function loader({ request }: LoaderFunctionArgs) {
+export async function loader({ request }: Route.LoaderArgs) {
   return {
     requestInfo: {
       origin: getDomainUrl(request),

app/routes.ts

@@ -0,0 +1,15 @@
+import { type RouteConfig } from '@react-router/dev/routes'
+import { remixRoutesOptionAdapter } from '@react-router/remix-routes-option-adapter'
+import { flatRoutes } from 'remix-flat-routes'
+
+export default remixRoutesOptionAdapter(defineRoutes =>
+  flatRoutes('routes', defineRoutes, {
+    ignoredRouteFiles: [
+      '.*',
+      '**/*.css',
+      '**/*.query.ts',
+      '**/*.test.{js,jsx,ts,tsx}',
+      '**/__*.*',
+    ],
+  }),
+) satisfies RouteConfig

app/routes/$.tsx

@@ -1,4 +1,4 @@
-import { Link, useLocation } from '@remix-run/react'
+import { Link, useLocation } from 'react-router'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 
 export async function loader() {

app/routes/_index/route.tsx

@@ -1,4 +1,4 @@
-import { Link, useLoaderData } from '@remix-run/react'
+import { Link, useLoaderData } from 'react-router'
 import { getImageDimensions } from '@sanity/asset-utils'
 import {
   ArrowRight,
@@ -140,7 +140,6 @@ export default function Home() {
           </article>
         )}
       </div>
-
       <div className="grid grid-cols-subgrid gap-8 lg:col-span-2">
         <section className="col-span-1 space-y-4">
           <div>
@@ -193,7 +192,6 @@ export default function Home() {
           </div>
         </section>
       </div>
-
       <section className="grid gap-4 lg:col-span-2">
         <h1 className="text-body-xs font-bold uppercase tracking-widest text-muted-foreground">
           Beiträge
@@ -284,7 +282,6 @@ export default function Home() {
           </div>
         </div>
       </section>
-
       <section className="grid gap-8 lg:col-span-2">
         <header className="py-4 md:py-8 lg:py-12">
           <SectionHeading id="philosophie">Unsere Philosophie</SectionHeading>
@@ -304,7 +301,6 @@ export default function Home() {
           })}
         </div>
       </section>
-
       <section className="grid gap-8 lg:col-span-2">
         <header className="py-4 md:py-8">
           <SectionHeading id="testimonials">
@@ -333,7 +329,6 @@ export default function Home() {
           </div>
         </Carousel>
       </section>
-
       <section className="grid gap-8 lg:col-span-2">
         <header className="py-4 md:py-8">
           <SectionHeading id="faq">Häufige Fragen</SectionHeading>
@@ -396,7 +391,6 @@ export default function Home() {
           </Link>
         </div>
       </section>
-
       <section className="grid gap-8 lg:col-span-2">
         <header className="py-4 md:py-8">
           <SectionHeading id="kontakt">Anfahrt & Kontakt</SectionHeading>
@@ -492,7 +486,7 @@ function TestimonialCard({ idx, ...entry }: TestimonialCardProps) {
           <p className="font-bold text-primary md:text-body-md">
             {entry.name}
             {'  '}
-            <span className="font-greek align-super font-bold text-secondary">
+            <span className="align-super font-greek font-bold text-secondary">
               {alphabetMap[entry.year?.letter ?? '']}
             </span>{' '}
           </p>

app/routes/_seo+/robots[.]txt.ts

@@ -1,5 +1,5 @@
 import { generateRobotsTxt } from '@nasa-gcn/remix-seo'
-import { type LoaderFunctionArgs } from '@remix-run/node'
+import { type LoaderFunctionArgs } from 'react-router'
 import { getDomainUrl } from '#app/utils/misc.tsx'
 
 export function loader({ request }: LoaderFunctionArgs) {

app/routes/_seo+/sitemap[.].xml.ts

@@ -1,5 +1,5 @@
 import { generateSitemap } from '@nasa-gcn/remix-seo'
-import { type LoaderFunctionArgs, type ServerBuild } from '@remix-run/node'
+import { type LoaderFunctionArgs, type ServerBuild } from 'react-router'
 import { getDomainUrl } from '#app/utils/misc.tsx'
 
 export async function loader({ request, context }: LoaderFunctionArgs) {

app/routes/aktuelles/route.tsx

@@ -4,8 +4,8 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from '@radix-ui/react-accordion'
-import { type LoaderFunctionArgs } from '@remix-run/node'
-import { Link, useLoaderData, useLocation } from '@remix-run/react'
+import { type LoaderFunctionArgs } from 'react-router'
+import { Link, useLoaderData, useLocation } from 'react-router'
 import { loadQuery } from '@sanity/react-loader'
 import {
   ArrowRight,

app/routes/aktuelles_.beitraege+/$slug.tsx

@@ -1,6 +1,6 @@
 import { PortableText } from '@portabletext/react'
-import { type LoaderFunctionArgs } from '@remix-run/node'
-import { type MetaArgs, useLoaderData } from '@remix-run/react'
+import { type LoaderFunctionArgs } from 'react-router'
+import { type MetaArgs, useLoaderData } from 'react-router'
 import { getImageDimensions } from '@sanity/asset-utils'
 import { loadQuery } from '@sanity/react-loader'
 import { urlFor } from '#app/sanity/instance.ts'

app/routes/aktuelles_.beitraege+/_index.tsx

@@ -1,4 +1,4 @@
-import { useLoaderData } from '@remix-run/react'
+import { useLoaderData } from 'react-router'
 import { loadQuery } from '@sanity/react-loader'
 import { PostItem } from '../aktuelles/route.tsx'
 import { type QueryResult, beitraegeIndexQuery } from './_index.query.tsx'

app/routes/aktuelles_.beitraege+/_layout.tsx

@@ -1,4 +1,4 @@
-import { Link, Outlet } from '@remix-run/react'
+import { Link, Outlet } from 'react-router'
 import { ArrowLeft } from 'lucide-react'
 
 export default function PostLayout() {

app/routes/aufnahme+/__formular.tsx

@@ -1,4 +1,4 @@
-import { Form } from '@remix-run/react'
+import { Form } from 'react-router'
 import { Button } from '#app/components/ui/button.tsx'
 import { Input } from '#app/components/ui/input.tsx'
 import { Label } from '#app/components/ui/label.tsx'

app/routes/aufnahme+/_index.tsx

@@ -1,4 +1,4 @@
-import { useLoaderData } from '@remix-run/react'
+import { useLoaderData } from 'react-router'
 import { loadQuery } from '@sanity/react-loader'
 import { DownloadIcon, ExternalLinkIcon, InfoIcon } from 'lucide-react'
 import { Toc } from '#app/components/toc.tsx'

app/routes/curriculum/route.tsx

@@ -1,4 +1,4 @@
-import { useLoaderData } from '@remix-run/react'
+import { useLoaderData } from 'react-router'
 import React from 'react'
 import {
   Carousel,

app/routes/die-walz-kennenlernen.tsx

@@ -1,5 +1,5 @@
-import { type ActionFunctionArgs } from '@remix-run/node'
-import { useFetcher } from '@remix-run/react'
+import { type ActionFunctionArgs } from 'react-router'
+import { useFetcher } from 'react-router'
 import { getImage } from '@sanity/asset-utils'
 import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { Button } from '#app/components/ui/button.tsx'

app/routes/haeufige-fragen.tsx

@@ -1,4 +1,4 @@
-import { Link } from '@remix-run/react'
+import { Link } from 'react-router'
 import { BackToTop } from '#app/components/back-to-top.tsx'
 import { Divider } from '#app/components/ui/divider.js'
 

app/routes/jahrgaenge+/$year.tsx

@@ -1,5 +1,5 @@
-import { type LoaderFunctionArgs } from '@remix-run/node'
-import { Link, type MetaArgs, useLoaderData } from '@remix-run/react'
+import { type LoaderFunctionArgs } from 'react-router'
+import { Link, type MetaArgs, useLoaderData } from 'react-router'
 import { getImageDimensions } from '@sanity/asset-utils'
 import { loadQuery } from '@sanity/react-loader'
 import { BabyIcon, DownloadIcon } from 'lucide-react'

app/routes/resources+/healthcheck.ts

@@ -1,5 +1,5 @@
 // learn more: https://fly.io/docs/reference/configuration/#services-http_checks
-import { type LoaderFunctionArgs } from '@remix-run/node'
+import { type LoaderFunctionArgs } from 'react-router'
 
 export async function loader({ request }: LoaderFunctionArgs) {
   const host =

app/routes/resources+/newsletter.ts

@@ -1,4 +1,4 @@
-import { type ActionFunctionArgs } from '@remix-run/node'
+import { type ActionFunctionArgs } from 'react-router'
 import z from 'zod'
 import * as Buttondown from '#app/utils/buttondown.ts'
 import { checkHoneypot } from '#app/utils/honeypot.server.ts'

app/routes/studio.$.tsx

@@ -1,4 +1,4 @@
-import  { type LinksFunction } from '@remix-run/node'
+import { type LinksFunction } from 'react-router'
 import { Studio } from 'sanity'
 import { Hydrated } from '#app/components/hydrated.tsx'
 import studioCssUrl from '#app/styles/studio.css?url'

app/routes/ueber-uns+/_index.tsx

@@ -1,5 +1,5 @@
 import * as ScrollArea from '@radix-ui/react-scroll-area'
-import { Link, useLoaderData } from '@remix-run/react'
+import { Link, useLoaderData } from 'react-router'
 import { type SanityImageSource } from '@sanity/image-url/lib/types/types.js'
 import { loadQuery } from '@sanity/react-loader'
 import { ExternalLinkIcon, SmileIcon } from 'lucide-react'