Update astro to v4

astro/astro.config.mjs

@@ -9,9 +9,6 @@ export default defineConfig({
   build: {
     inlineStylesheets: "auto",
   },
-  experimental: {
-    viewTransitions: true,
-  },
   integrations: [
     tailwind({
       config: {

astro/package.json

@@ -9,11 +9,11 @@
     "build": "astro build"
   },
   "dependencies": {
-    "@astrojs/image": "^0.17.3",
-    "@astrojs/prefetch": "^0.3.0",
-    "@astrojs/sitemap": "^2.0.2",
-    "@astrojs/tailwind": "4.0.0",
-    "astro": "^2.10.12",
+    "@astrojs/image": "0.18.0",
+    "@astrojs/prefetch": "0.4.1",
+    "@astrojs/sitemap": "3.1.4",
+    "@astrojs/tailwind": "5.1.0",
+    "astro": "4.8.6",
     "css-select": "5.1.0",
     "sharp": "^0.32.6",
     "slate-serializers": "0.4.1",

astro/src/pages/index.astro

@@ -27,7 +27,7 @@ const posts = await getPosts();
           posts.map((post) => (
             <a href={`/posts/${post.id}/`}>
               <article class="text-gray bg-gray-light px-5 py-3 rounded-md shadow-md w-64 text-center hover:-translate-y-1 transition-transform">
-                <h3 class="font-bold text-lg" transition:name=`title-${post.id}`>{post.title}</h3>
+                <h3 class="font-bold text-lg">{post.title}</h3>
                 {post.publishedDate && (
                   <p>
                     {new Date(post.publishedDate).toLocaleDateString("de-DE")}

astro/src/pages/posts/[id].astro

@@ -21,7 +21,7 @@ const post = id && (await getPost(id));
     <Layout title={`Paystro | ${post.title!}`}>
       <div class="space-y-3 my-3">
         <a href="/">BACK</a>
-        <h1 class="font-bold text-5xl" transition:name=`title-${post.id}`>{post.title}</h1>
+        <h1 class="font-bold text-5xl">{post.title}</h1>
         {post.content && <Content content={post.content} />}
       </div>
     </Layout>