From 13d364ca8befe8c03941615026eeb1c20bf02bd7 Mon Sep 17 00:00:00 2001
From: jalen <jalenchuh@gmail.com>
Date: Thu, 12 Sep 2024 12:06:26 +0800
Subject: [PATCH] :sparkles: add vara

---
 package.json              |  1 +
 src/components/Author.vue | 51 +++++++++++++++++++++++++++++++++++++--
 src/main.js               |  6 +++++
 src/pages/About.vue       | 37 ++++++++++++++++++++--------
 src/pages/Friends.vue     | 25 +++++++++++++++++--
 yarn.lock                 |  5 ++++
 6 files changed, 111 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index d100f0a..7dcb32f 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "marked": "^2.0.0",
     "nprogress": "^0.2.0",
     "v-tooltip": "2.1.2",
+    "vara": "^1.4.1",
     "vue-scrollto": "^2.20.0",
     "word-count": "^0.2.2"
   },
diff --git a/src/components/Author.vue b/src/components/Author.vue
index 04dfb6c..8256635 100644
--- a/src/components/Author.vue
+++ b/src/components/Author.vue
@@ -11,8 +11,8 @@
       />
     </g-link>
 
-    <h1 v-if="showTitle" class="author__site-title">
-      {{ $static.metadata.siteName }}
+    <h1 v-if="showTitle" class="author__site-title" id="author-title">
+      <!-- {{ $static.metadata.siteName }} -->
     </h1>
 
     <p class="author__intro">你终于来啦👻</p>
@@ -65,6 +65,40 @@ query {
 <script>
 export default {
   props: ["showTitle"],
+  methods: {
+    initializeVara(selector, text, yPosition, duration) {
+      const fontSize =
+        window.screen.width < 700 ? 32 : window.screen.width < 1200 ? 56 : 72;
+
+      new this.$vara(
+        selector,
+        "https://cdn.jsdelivr.net/npm/vara@1.4.0/fonts/Satisfy/SatisfySL.json",
+        [
+          {
+            text: text,
+            y: yPosition,
+            fromCurrentPosition: { y: false },
+            duration: duration,
+            id: "blog",
+          },
+        ],
+        {
+          strokeWidth: 2,
+          color: "#000000",
+          fontSize: fontSize,
+          textAlign: "center",
+        }
+      );
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      // 查找 id 为 author-title 的元素
+      if (document.getElementById("author-title")) {
+        this.initializeVara("#author-title", "Hi, I'm Jalen", 10, 3000);
+      }
+    });
+  },
 };
 </script>
 
@@ -186,4 +220,17 @@ export default {
     visibility visible
     opacity 1
     transition opacity 0.15s
+
+#author-title
+  width 80%
+  margin 20px auto
+
+  *
+    margin 0
+    padding 0
+
+  .hidden
+    width 0
+    opacity 0
+    overflow hidden
 </style>
diff --git a/src/main.js b/src/main.js
index fd1e13e..459fc98 100644
--- a/src/main.js
+++ b/src/main.js
@@ -64,6 +64,9 @@ import axios from "axios";
 // NProgress
 import NProgress from "nprogress";
 
+// Vara
+import Vara from "vara";
+
 // The Client API can be used here. Learn more: gridsome.org/docs/client-api
 export default function (Vue, { router, head, isClient }) {
   head.htmlAttrs = { lang: "zh-Hans" };
@@ -100,4 +103,7 @@ export default function (Vue, { router, head, isClient }) {
   router.afterEach((to, from) => {
     NProgress.done();
   });
+
+  // Vara
+  Vue.prototype.$vara = Vara;
 }
diff --git a/src/pages/About.vue b/src/pages/About.vue
index 4023e43..4f50da4 100644
--- a/src/pages/About.vue
+++ b/src/pages/About.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <div class="about-title">
-      <h1 class="about-title__text">About</h1>
+    <div class="about-title" id="about-title">
+        <!-- <h1 class="about-title__text">About</h1> -->
     </div>
 
     <div class="about content-box">
@@ -24,14 +24,10 @@
             ><font-awesome :icon="['fab', 'github']" /> jalenzz</a
           >
           /
-          <a  
-            target="_blank"
-            class="about-me"
-            style="color: #efa371;">
+          <a target="_blank" class="about-me" style="color: #efa371">
             <font-awesome :icon="['fas', 'envelope']" />
             jalenchuh@gmail.com</a
           >
-          
         </p>
 
         <p>
@@ -39,7 +35,7 @@
           😍 坚定的括号不换行党！<br />
           🥳 最喜欢去陌生的城市走走看看<br />
           😶‍🌫️ 信奉好看就是生产力！<br />
-          😆 like Emoji 
+          😆 like Emoji
         </p>
 
         <h3 id="关于博客"><a href="#关于博客"></a>关于博客</h3>
@@ -121,7 +117,7 @@
       </div>
     </transition>
 
-    <Author class="post-author" />
+    <Author class="post-author" ref="authorComponent" />
   </div>
 </template>
 
@@ -144,7 +140,7 @@ export default {
   },
   data() {
     return {
-      themeUrl: '',
+      themeUrl: "",
       scrolledDist: 0,
     };
   },
@@ -155,6 +151,14 @@ export default {
       }
     },
   },
+  mounted() {
+    this.$refs.authorComponent.initializeVara(
+      "#about-title",
+      "About",
+      50,
+      2000
+    );
+  },
   created() {
     if (process.isClient) {
       window.addEventListener("scroll", this.handleScroll);
@@ -258,4 +262,17 @@ query {
 
 .v[data-class=v] .vaction
   display none !important
+
+#about-title
+  width 80%
+  margin 20px auto
+
+  *
+    margin 0
+    padding 0
+
+  .hidden
+    width 0
+    opacity 0
+    overflow hidden
 </style>
diff --git a/src/pages/Friends.vue b/src/pages/Friends.vue
index 63d3ade..c04dd4c 100644
--- a/src/pages/Friends.vue
+++ b/src/pages/Friends.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h1 class="friends-title text-center space-bottom">Friends</h1>
+    <h1 class="friends-title text-center space-bottom" id="friends-title"></h1>
 
     <div class="friends-container text-center space-bottom">
       <div class="friends-content">
@@ -32,7 +32,7 @@
       <div id="disqus_thread" />
     </div>
 
-    <Author class="post-author" />
+    <Author class="post-author" ref="authorComponent" />
   </div>
 </template>
 
@@ -107,6 +107,14 @@ export default {
       ],
     };
   },
+  mounted() {
+    this.$refs.authorComponent.initializeVara(
+      "#friends-title",
+      "Friends",
+      50,
+      2000
+    );
+  },
 };
 </script>
 
@@ -206,4 +214,17 @@ body[data-theme="dark"]
   margin calc(var(--space) / 2) 0
   font-size 0.9em
   opacity 0.8
+
+#friends-title
+  width 80%
+  margin 20px auto
+
+  *
+    margin 0
+    padding 0
+
+  .hidden
+    width 0
+    opacity 0
+    overflow hidden
 </style>
diff --git a/yarn.lock b/yarn.lock
index 59d1c2a..e3e862c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10187,6 +10187,11 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+vara@^1.4.1:
+  version "1.4.1"
+  resolved "https://mirrors.huaweicloud.com/repository/npm/vara/-/vara-1.4.1.tgz#974272696f39682bc4da7cc2e2f73d5fd683c305"
+  integrity sha512-oX+D+jXIJTmdQb7+OeuhvxSvSJB1PG8X2mzI3u7wTbuJ4v2QskA2fNlkNnyI2883YBRmEoA6R9gJg4jHiVNvXQ==
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://mirrors.huaweicloud.com/repository/npm/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"