Merge remote-tracking branch 'origin/master'

baomidou · May 29, 2024 · 807eef2 · 807eef2
2 parents f4b5499 + 839928a
commit 807eef2
Show file tree

Hide file tree

Showing 5 changed files with 212 additions and 26 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -29,4 +29,5 @@ jobs:
           username: ${{ secrets.ECS_USERNAME }}
           password: ${{ secrets.ECS_PASSWORD }}
           source: './dist/*'
-          target: '/var/www/mybatis-plus-doc/'
+          target: '/var/www/mybatis-plus-doc/'
+          # rm: true
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -108,4 +108,15 @@ export default defineConfig({
     }),
     svelte(),
   ],
+  vite: {
+    build: {
+      rollupOptions: {
+        output: {
+          entryFileNames: 'entry.[hash].mjs',
+          chunkFileNames: 'chunks/chunk.[hash].mjs',
+          assetFileNames: 'assets/asset.[hash][extname]',
+        },
+      },
+    },
+  },
 });
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "@astrojs/tailwind": "^5.1.0",
     "astro": "^4.5.16",
     "sharp": "^0.33.3",
+    "store2": "^2.14.3",
     "svelte": "^4.2.12",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.4"

diff --git a/src/components/CheckAdBlocked.svelte b/src/components/CheckAdBlocked.svelte
@@ -1,37 +1,78 @@
 <script>
-  import { onMount } from 'svelte';
+  import { onMount } from "svelte";
+  import store from "store2";
 
   let adBlockDetected = false;
+  let session = store.session;
+  const key = "adBlockNoticeClosed";
 
   function checkAdBlocker() {
-    setTimeout(() => {
-      if (window._AdBlockInit === undefined) {
-        adBlockDetected = true;
-      }
-    }, 2000);
+    let adBlockNoticeClosed = session.get(key) ?? false;
+    if (adBlockNoticeClosed) {
+      return;
+    }
+
+    // check ad block init
+    // if (window._AdBlockInit === undefined) {
+    //   adBlockDetected = true;
+    //   return;
+    // }
+
+    // check script banned
+    checkAdScriptBanned('https://cdn.wwads.cn/js/makemoney.js');
+  }
+  
+  function checkAdScriptBanned(scriptUrl) {
+    fetch(scriptUrl)
+        .then(response => {
+            if (!response.ok) {
+              adBlockDetected = true;
+            }
+        })
+        .catch(() => {
+            adBlockDetected = true;
+        });
+  }
+
+  function closeNotice() {
+    session.set(key, true);
+    adBlockDetected = false;
   }
 
   onMount(() => {
-    checkAdBlocker();
+    const interval = setInterval(checkAdBlocker, 5000);
+    return () => clearInterval(interval);
   });
 </script>
 
-<div class="{adBlockDetected ? 'flex' : 'hidden'} fixed inset-0 bg-black bg-opacity-90 z-[99999]">
+<div
+  class="{adBlockDetected
+    ? 'flex'
+    : 'hidden'} fixed inset-0 bg-black bg-opacity-90 z-[99999]"
+>
   <div class="m-auto p-5 bg-white rounded-lg text-center space-y-4">
-    <button class="absolute top-3 right-3 text-black text-white bg-transparent" on:click={() => adBlockDetected = false}>×</button>
+    <button
+      class="absolute top-3 right-3 text-black text-white bg-transparent"
+      on:click={closeNotice}>×</button
+    >
     <p class="text-center text-lg text-gray-700">
       我们的广告服务商并不跟踪您的隐私，为了支持本站的长期运营，请将我们的网站加入广告拦截器的白名单，谢谢！
     </p>
     <div class="flex justify-center gap-4">
-      <a href="https://wwads.cn/page/end-user-privacy" target="_blank"
-        class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-300 text-current no-underline hover:no-underline">
+      <a
+        href="https://wwads.cn/page/end-user-privacy"
+        target="_blank"
+        class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-300 text-current no-underline hover:no-underline"
+      >
         查看隐私声明
       </a>
-      <a href="https://wwads.cn/page/whitelist-wwads" target="_blank"
-        class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition duration-300 text-current no-underline hover:no-underline">
+      <a
+        href="https://wwads.cn/page/whitelist-wwads"
+        target="_blank"
+        class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition duration-300 text-current no-underline hover:no-underline"
+      >
         查看加入白名单教程
       </a>
     </div>
   </div>
 </div>
-
diff --git a/src/components/SponsorBanner.svelte b/src/components/SponsorBanner.svelte
@@ -1,12 +1,144 @@
-<div class="not-content max-w-full w-full text-sm leading-6 text-center">
-    <a href="https://doc.flowlong.com?from=mp" target="_blank">
-        <img alt="aizuda-Logo" src="https://foruda.gitee.com/images/1715955628416785121/954c16ef_12260.png" width="200px" height="50px">
-    </a>
-    <a href="https://gitee.com/gz-yami/mall4j?from=mp" target="_blank">
-        <img alt="mall4j-Logo" src="https://foruda.gitee.com/images/1716776021837872678/87883b39_12260.gif" width="200px" height="50px">
-    </a>
-    <a href="http://github.crmeb.net/u/MyBatis-Plus" target="_blank">
-        <img alt="crmeb-Logo" src="https://foruda.gitee.com/images/1685339553088166856/b0a6b1a4_12260.gif" width="200px" height="50px">
-    </a><br/>
-    <a href="/resources/support#成为赞助商">😍成为赞助商</a>
+<script>
+  import { onMount } from "svelte";
+  import { tweened } from "svelte/motion";
+  import { cubicOut } from "svelte/easing";
+  import { slide } from "svelte/transition";
+  import store from "store2";
+
+  export let sponsors = [];
+  let currentSponsors = [];
+  let session = store.session;
+  const key = "sponsorBannerEnabled";
+  let isVisible;
+
+  function initVisibility() {
+    isVisible = session.get(key) ?? true;
+  }
+
+  function toggleVisibility() {
+    isVisible = !isVisible;
+    session.set(key, isVisible);
+  }
+
+  function getRandomElements(array, num) {
+    const shuffled = array.sort(() => 0.5 - Math.random());
+    return shuffled.slice(0, num);
+  }
+
+  function selectSponsors() {
+    currentSponsors = getRandomElements(sponsors, 3);
+  }
+
+  const opacity = tweened(1, {
+    duration: 200,
+    easing: cubicOut,
+  });
+
+  function updateCard() {
+    opacity.set(0).then(() => {
+      selectSponsors();
+      opacity.set(1);
+    });
+  }
+
+  onMount(() => {
+    initVisibility();
+    selectSponsors();
+    const interval = setInterval(updateCard, 5000);
+    return () => clearInterval(interval);
+  });
+</script>
+
+<div class="not-content max-w-full w-full text-sm leading-6">
+  {#if isVisible}
+    <div transition:slide>
+      {#each currentSponsors as currentSponsor}
+        <a
+          href={currentSponsor.link}
+          class="text-current no-underline hover:no-underline w-full block mb-1"
+          target="_blank"
+          style="opacity: {$opacity}"
+        >
+          <figure
+            class="border rounded-lg p-3 dark:bg-slate-800 dark:highlight-white/5"
+          >
+            <figcaption class="flex items-center space-x-4">
+              <img
+                src={currentSponsor.logo}
+                alt=""
+                class="flex-none w-14 h-14 object-contain"
+                loading="lazy"
+                decoding="async"
+              />
+              <div class="flex-auto">
+                <div class="text-sm font-semibold dark:text-slate-200">
+                  {currentSponsor.title}
+                </div>
+                <div class="text-xs text-slate-700 dark:text-slate-300 mt-0.5">
+                  {currentSponsor.description}
+                </div>
+              </div>
+            </figcaption>
+          </figure>
+        </a>
+      {/each}
+      <div class="w-full block flex justify-between text-[11px]">
+        <span>广告采取随机轮播3个方式显示</span>
+        <a
+          class="text-current no-underline hover:no-underline text-red-500"
+          href="/resources/support/#成为赞助商"
+        >
+          <span class="with-love">♥</span>成为赞助商
+        </a>
+      </div>
+    </div>
+  {/if}
+
+  <div class="button-container">
+    <button class="toggle-button" on:click={toggleVisibility}>
+      {isVisible ? "收" : "展"}
+    </button>
+  </div>
 </div>
+
+<style>
+  .with-love {
+    color: #ff6347;
+    display: inline-block;
+    margin-right: 2px;
+    animation: icon-animate 1s ease-in-out infinite;
+  }
+
+  @keyframes icon-animate {
+    0%,
+    100% {
+      transform: scale(1);
+    } /* 在动画开始和结束时，元素保持原始大小 */
+    50% {
+      transform: scale(1.2);
+    } /* 在动画中间，元素放大到原始大小的1.2倍 */
+  }
+
+  .button-container {
+    background-color: rgba(0, 0, 0, 0.15);
+    width: 100%;
+    height: 1px;
+    margin: 30px 0 20px 0;
+    position: relative;
+  }
+
+  .toggle-button {
+    border-radius: 100%;
+    padding: 0;
+    text-align: center;
+    border: none;
+    background-color: #ff3861;
+    cursor: pointer;
+    position: absolute;
+    left: calc(50% - 15px);
+    top: -15px;
+    height: 30px;
+    width: 30px;
+    color: #fff;
+  }
+</style>