feat: ✨ add view transition

Author: BeiyanYunyi

src/components/BaseHead.astro

@@ -2,6 +2,7 @@
 // Import the global.css file here so that it is included on
 // all pages through the use of the <BaseHead /> component.
 import { useMiSans } from '@config';
+import { ClientRouter } from 'astro:transitions';
 import '@styles/global.css';
 import '@styles/prism-tomorrow.min.css';
 import 'uno.css';
@@ -41,6 +42,8 @@ const { title, description, image = '/头像方.png' } = Astro.props;
 <meta property="twitter:description" content={description} />
 <meta property="twitter:image" content={new URL(image, Astro.url)} />
 
+<ClientRouter />
+
 {
   useMiSans && (
     <link

src/components/Comments.astro

@@ -95,14 +95,18 @@
   </script> -->
 
   <script>
-    import { init } from 'sodesu-comment';
+    import { init as sodesuInit } from 'sodesu-comment';
 
-    init({
-      el: '#comment-container',
-      serverURL: 'https://waline.penclub.club/',
-      dark: 'html.dark',
-      pageview: !import.meta.env.DEV,
-      commentClassName: 'prose prose-neutral dark:prose-invert min-w-0 max-w-none',
-    });
+    function init() {
+      return sodesuInit({
+        el: '#comment-container',
+        serverURL: 'https://waline.penclub.club/',
+        dark: 'html.dark',
+        pageview: !import.meta.env.DEV,
+        commentClassName: 'prose prose-neutral dark:prose-invert min-w-0 max-w-none',
+      });
+    }
+
+    document.addEventListener('astro:page-load', init);
   </script>
 </div>

src/layouts/BaseLayout.astro

@@ -20,7 +20,7 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION, image = '/头像方.
     <Header />
     <main class="flex flex-col-reverse lg:flex-row">
       <SideBarLeft />
-      <div class="flex-auto min-w-0 mt-4 lg:(mt-0 ml-4)">
+      <div class="flex-auto min-w-0 mt-4 lg:(mt-0 ml-4)" transition:name="main">
         <slot />
         <Comments />
       </div>