feat: enable view-transitions (and prefetching) (#412)

CommanderStorm · web-flow · commit 819791127f0f · 2025-04-23T15:50:25.000+02:00
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -7,5 +7,6 @@ export default defineConfig({
   base: "",
   integrations: [mdx(), solidJs()],
   output: "static",
+  prefetch: true,
   site: "https://maplibre.org/",
 });
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -4,7 +4,7 @@ import Footer from "../components/Footer.astro";
 import Nav from "../components/Nav.astro";
 import { SITE_TITLE } from "../constants";
 const { title, description } = Astro.props;
-// import { ClientRouter } from 'astro:transitions';
+import { ClientRouter, fade } from "astro:transitions";
 ---
 
 <!doctype html>
@@ -19,7 +19,7 @@ const { title, description } = Astro.props;
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="author" content="MapLibre" />
     <meta name="description" content={description} />
-    <!-- <ClientRouter /> -->
+    <ClientRouter />
 
     <meta
       property="og:image"
@@ -82,7 +82,7 @@ const { title, description } = Astro.props;
       {title ? `${title} | ${SITE_TITLE}` : SITE_TITLE}
     </title>
   </head>
-  <body>
+  <body transition:animate={fade({ duration: "0.2s" })}>
     <script
       src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
       integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
