update docs

Author: wu-clan

docs/.vuepress/components/Footer.vue

@@ -11,11 +11,17 @@
           <a
               href="https://github.com/fastapi-practices/fastapi_best_architecture"
               target="_blank"
-              rel="noopener noreferrer"
               class="social-link"
           >
             <Icon name="line-md:github" size="2rem" />
           </a>
+          <a
+              href="https://discord.com/invite/yNN3wTbVAC"
+              target="_blank"
+              class="social-link"
+          >
+            <Icon name="line-md:discord" size="2rem" />
+          </a>
           <a href="/fastapi_best_architecture_docs/blog/" class="social-link">
             <Icon name="la:blog" size="2rem" />
           </a>

docs/.vuepress/components/SponsorHome.vue

@@ -8,13 +8,20 @@
   </section>
   <section v-else id="special-spsr">
     <span class="no-brand">
-      <a href="/fastapi_best_architecture_docs/sponsors.html" target="_self">独家赞助商席位现已空缺 - 立即咨询</a>
+      <a href="/fastapi_best_architecture_docs/sponsors.html" target="_self">
+        <GradientText
+            text="独家赞助商席位现已空缺 - 立即咨询"
+            :colors="['#009485', 'rgba(162,84,240)']"
+            :animation-speed="3"
+        />
+      </a>
     </span>
   </section>
 </template>
 
 <script lang="ts" setup>
 import { homeSponsor, shouldShowSponsor } from "../data/sponsors";
+import GradientText from "./bits/GradientText.vue";
 </script>
 
 <style scoped>

docs/.vuepress/components/bits/GradientText.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface GradientTextProps {
+  text: string;
+  className?: string;
+  colors?: string[];
+  animationSpeed?: number;
+  showBorder?: boolean;
+}
+
+const props = withDefaults(defineProps<GradientTextProps>(), {
+  text: '',
+  className: '',
+  colors: () => ['#ffaa40', '#9c40ff', '#ffaa40'],
+  animationSpeed: 8,
+  showBorder: false
+});
+
+const gradientStyle = computed(() => ({
+  backgroundImage: `linear-gradient(to right, ${ props.colors.join(', ') })`,
+  animationDuration: `${ props.animationSpeed }s`,
+  backgroundSize: '300% 100%',
+  '--animation-duration': `${ props.animationSpeed }s`
+}));
+
+const borderStyle = computed(() => ({
+  ...gradientStyle.value
+}));
+
+const textStyle = computed(() => ({
+  ...gradientStyle.value,
+  backgroundClip: 'text',
+  WebkitBackgroundClip: 'text'
+}));
+</script>
+
+<template>
+  <div
+      :class="`relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-[1.25rem] font-medium backdrop-blur transition-shadow duration-500 overflow-hidden cursor-pointer ${className}`"
+  >
+    <div
+        v-if="showBorder"
+        class="absolute inset-0 bg-cover z-0 pointer-events-none animate-gradient"
+        :style="borderStyle"
+    >
+      <div
+          class="absolute inset-0 bg-black rounded-[1.25rem] z-[-1]"
+          style="width: calc(100% - 2px); height: calc(100% - 2px); left: 50%; top: 50%; transform: translate(-50%, -50%)"
+      />
+    </div>
+
+    <div class="inline-block relative z-2 text-transparent bg-cover animate-gradient" :style="textStyle">
+      {{ text }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+.animate-gradient {
+  animation: gradient var(--animation-duration, 8s) linear infinite;
+}
+</style>

docs/.vuepress/styles/custom.css

@@ -39,7 +39,7 @@
 
 /* 公告板 */
 .vp-bulletin {
-    width: 380px;
+    width: 380px !important;
 }
 
 /* 首页文字说明 */