Commit fa0f8e9

HPCesia <me@hpcesia.com>
2025-02-15 08:54:57
refactor: manual swup setup
Manually setup swup instead of using the swup astro integration.
1 parent 6befa7c
src/layouts/GlobalLayout.astro
@@ -96,6 +96,41 @@ const favicons: Favicon[] =
   </body>
 </html>
 
+{/* 初始化 Swup */}
+<script>
+  import SwupHeadPlugin from '@swup/head-plugin';
+  import SwupParallelPlugin from '@swup/parallel-plugin';
+  import SwupPreloadPlugin from '@swup/preload-plugin';
+  import SwupProgressPlugin from '@swup/progress-plugin';
+  import SwupScriptsPlugin from '@swup/scripts-plugin';
+  import SwupScrollPlugin from '@swup/scroll-plugin';
+  import Swup from 'swup';
+
+  import { siteConfig } from '@/config';
+
+  window.swup = new Swup({
+    containers: ['main', ...(siteConfig.banner === false ? [] : ['#banner-img'])],
+    animationSelector: '[class*="swup-transition-"]',
+    plugins: [
+      new SwupHeadPlugin(),
+      new SwupParallelPlugin({
+        containers: [...(siteConfig.banner === false ? [] : ['#banner-img'])],
+      }),
+      new SwupPreloadPlugin(),
+      new SwupProgressPlugin({
+        delay: 2000,
+      }),
+      new SwupScriptsPlugin(),
+      new SwupScrollPlugin(),
+    ],
+  });
+
+  const dispatch = (name: string) => document.dispatchEvent(new Event(name));
+  window.swup.hooks.before('content:replace', () => dispatch('astro:before-swap'));
+  window.swup.hooks.on('content:replace', () => dispatch('astro:after-swap'));
+  window.swup.hooks.on('page:view', () => dispatch('astro:page-load'));
+</script>
+
 <script>
   import { convertTimeToRelative } from '@scripts/utils';
   import mediumZoom from 'medium-zoom/dist/pure';
src/global.d.ts
@@ -1,4 +1,4 @@
-import type { Swup } from '@swup/astro/client';
+import type { Swup } from 'swup';
 
 declare global {
   interface Window {
astro.config.mjs
@@ -11,7 +11,6 @@ import { wrapCode } from './src/plugins/shiki-transformers.ts';
 import { rehypeHeadingIds } from '@astrojs/markdown-remark';
 import mdx from '@astrojs/mdx';
 import sitemap from '@astrojs/sitemap';
-import swup from '@swup/astro';
 // import { transformerNotationDiff } from '@shikijs/transformers';
 // import { transformerNotationHighlight } from '@shikijs/transformers';
 import tailwindcss from '@tailwindcss/vite';
@@ -33,15 +32,6 @@ export default defineConfig({
     sitemap({ filter: (page) => !page.includes('/archives/') && !page.includes('/about/') }),
     pagefind(),
     mdx(),
-    swup({
-      theme: false,
-      containers: ['main', '#banner-img'],
-      animationClass: 'swup-transition-',
-      globalInstance: true,
-      smoothScrolling: true,
-      progress: true,
-      parallel: ['#banner-img'],
-    }),
   ],
   markdown: {
     shikiConfig: {
package.json
@@ -21,7 +21,12 @@
     "@iconify-json/material-symbols": "^1.2.14",
     "@iconify-json/mdi": "^1.2.3",
     "@shikijs/transformers": "^2.3.2",
-    "@swup/astro": "^1.5.0",
+    "@swup/head-plugin": "^2.3.1",
+    "@swup/parallel-plugin": "^0.4.0",
+    "@swup/preload-plugin": "^3.2.11",
+    "@swup/progress-plugin": "^3.2.0",
+    "@swup/scripts-plugin": "^2.1.0",
+    "@swup/scroll-plugin": "^3.3.2",
     "@tailwindcss/vite": "^4.0.6",
     "astro": "^5.3.0",
     "astro-compress": "2.3.5",
@@ -44,6 +49,7 @@
     "sanitize-html": "^2.14.0",
     "sharp": "^0.33.5",
     "shiki": "^2.3.2",
+    "swup": "^4.8.1",
     "tailwindcss": "^4.0.6",
     "typescript": "^5.7.3",
     "unist-util-visit": "^5.0.0"