From e5608ba98c12acfb2327b340eb1e4c81bfa83a9d Mon Sep 17 00:00:00 2001
From: Khang <khang.nguyenduyvn@gmail.com>
Date: Sun, 17 Dec 2023 16:47:04 +0700
Subject: [PATCH] Fix toast

---
 src/.vuepress/components/GAffiliates.vue | 61 +++++++++++-------------
 1 file changed, 29 insertions(+), 32 deletions(-)

diff --git a/src/.vuepress/components/GAffiliates.vue b/src/.vuepress/components/GAffiliates.vue
index bbe23272..eabd1ba1 100644
--- a/src/.vuepress/components/GAffiliates.vue
+++ b/src/.vuepress/components/GAffiliates.vue
@@ -7,40 +7,37 @@ import "vue-toastification/dist/index.css";
 export default {
   data() {
     return {
-      mounted: false,
-      toast: createToastInterface({
-        container: document.querySelector("#app"),
-        timeout: false,
-        position: POSITION.BOTTOM_LEFT,
-        showCloseButtonOnHover: true,
-      }),
+      /** @type {ReturnType<createToastInterface>} */
+      toast: null,
     };
   },
-  watch: {
-    $route: {
-      deep: true,
-      immediate: true,
-      handler(route) {
-        if (route.path === "/" || this.mounted) return;
-        const Content = (
-          <a
-            href="https://shipfa.st/?via=visnalize"
-            target="_blank"
-            style="display: block; color: #fff; margin-top: 8px"
-          >
-            Build and launch your web app in days
-            <span style="display: flex; align-items: center; justify-content: center">
-              <span style="margin-right: 8px">Check out</span>
-              <img
-                src="https://shipfa.st/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FlogoAndName_transparent.9c74ebc0.png&w=128&q=100"
-                alt="ShipFast"
-              />
-            </span>
-          </a>
-        );
-        this.toast(Content);
-        this.mounted = true;
-      },
+  mounted() {
+    this.toast = createToastInterface({
+      container: this.$root.$el,
+      timeout: false,
+      position: POSITION.BOTTOM_LEFT,
+      showCloseButtonOnHover: true,
+    });
+    this.toast(this.getContent());
+  },
+  methods: {
+    getContent() {
+      return (
+        <a
+          href="https://shipfa.st/?via=visnalize"
+          target="_blank"
+          style="display: block; color: #fff; margin-top: 8px"
+        >
+          Build and launch your web app in days
+          <span style="display: flex; align-items: center; justify-content: center">
+            <span style="margin-right: 8px">Check out</span>
+            <img
+              src="https://shipfa.st/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FlogoAndName_transparent.9c74ebc0.png&w=128&q=100"
+              alt="ShipFast"
+            />
+          </span>
+        </a>
+      );
     },
   },
 };