Add Swiper integration for app previews and update deployment workflow

Author: Ayideyia

.github/workflows/deploy.yml

@@ -62,9 +62,19 @@ jobs:
           )
           mkdir -p .vitepress/dist/apps
           mv GUI.for.SingBox/frontend/dist .vitepress/dist/apps/gfs
-          mv public/fakeruntime.js .vitepress/dist/apps/gfs
+          cp public/fakeruntime.js .vitepress/dist/apps/gfs
           sed -i '/<title>/a <script src="./fakeruntime.js"></script>' .vitepress/dist/apps/gfs/index.html
 
+          git clone --depth=1 https://github.com/GUI-for-Cores/GUI.for.Clash.git
+          (
+            cd GUI.for.Clash/frontend
+            pnpm install && pnpm build-only
+          )
+          mkdir -p .vitepress/dist/apps
+          mv GUI.for.Clash/frontend/dist .vitepress/dist/apps/gfc
+          cp public/fakeruntime.js .vitepress/dist/apps/gfc
+          sed -i '/<title>/a <script src="./fakeruntime.js"></script>' .vitepress/dist/apps/gfc/index.html
+
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:

.vitepress/theme/components/HomeLayout.vue

@@ -1,28 +1,51 @@
 <script setup>
 import DefaultTheme from "vitepress/theme";
+import { Navigation, Pagination } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+
+const modules = [Navigation, Pagination];
 </script>
 
 <template>
   <DefaultTheme.Layout>
     <template #home-features-before>
       <div class="app-preview">
-        <iframe src="/apps/gfs/"></iframe>
+        <Swiper
+          :slides-per-view="1"
+          :modules="modules"
+          :pagination="{ clickable: true }"
+          navigation
+        >
+          <SwiperSlide class="swiper-slide">
+            <iframe src="/apps/gfs/"></iframe>
+          </SwiperSlide>
+          <SwiperSlide class="swiper-slide">
+            <iframe src="/apps/gfc/"></iframe>
+          </SwiperSlide>
+        </Swiper>
       </div>
     </template>
   </DefaultTheme.Layout>
 </template>
 
 <style scoped>
 .app-preview {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 0 40px 0;
+  width: 60%;
+  margin: 0 auto;
+  .swiper-slide {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 40px;
+  }
   iframe {
     width: 800px;
     height: 540px;
     border: none;
-    border-radius: 8px;
+    border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 0 16px rgba(0, 0, 0, 0.4);
   }

package.json

@@ -17,5 +17,8 @@
   "license": "ISC",
   "devDependencies": {
     "vitepress": "1.5.0"
+  },
+  "dependencies": {
+    "swiper": "^11.2.1"
   }
 }