chore: update doc nav new (#4669)

docs/.vitepress/crowdin/en-US/pages/home.json

@@ -17,5 +17,7 @@
   "16": "Feedback",
   "17": "Contribution",
   "18": "SegmentFault",
-  "19": "Community"
+  "19": "Community",
+  "20": "Become a Sponsor!",
+  "21": "Please contact us via"
 }

docs/.vitepress/vitepress/components/globals/parallax-home.vue

@@ -89,23 +89,38 @@ useEventListener(window, 'scroll', handleScroll)
         </div>
       </div>
     </div>
-    <div class="sponsors">
-      <a
-        v-for="(sponsor, i) in sponsors"
-        :key="i"
-        :class="['sponsor', sponsor.className]"
-        :href="sponsor.url"
-        target="_blank"
-      >
-        <img width="45" :src="sponsor.img" :alt="sponsor.name" />
-        <div>
-          <p>
-            Sponsored by
-            <span class="name">{{ sponsor.name }}</span>
-          </p>
-          <p>{{ sponsor.slogan }}</p>
-        </div>
-      </a>
+    <div class="sponsors-container">
+      <div class="sponsors-list">
+        <a
+          v-for="(sponsor, i) in sponsors"
+          :key="i"
+          :class="['sponsor', sponsor.className]"
+          :href="sponsor.url"
+          target="_blank"
+        >
+          <img width="45" :src="sponsor.img" :alt="sponsor.name" />
+          <div>
+            <p>
+              Sponsored by
+              <span class="name">{{ sponsor.name }}</span>
+            </p>
+            <p>{{ sponsor.slogan }}</p>
+          </div>
+        </a>
+      </div>
+      <div class="join">
+        <el-tooltip placement="top" hide-after="1000" offset="20">
+          <template #content>
+            {{ homeLang['21'] }}
+            <a href="mailto:element-plus@outlook.com" target="_blank">
+              &nbsp;element-plus@outlook.com
+            </a>
+          </template>
+          <a href="mailto:element-plus@outlook.com" target="_blank">
+            <el-button round>{{ homeLang['20'] }}</el-button>
+          </a>
+        </el-tooltip>
+      </div>
     </div>
     <div class="cards">
       <ul class="container">
@@ -228,7 +243,14 @@ useEventListener(window, 'scroll', handleScroll)
     }
   }
 
-  .sponsors {
+  .sponsors-container {
+    .join {
+      text-align: center;
+      margin: 0 0 50px 0;
+    }
+  }
+
+  .sponsors-list {
     display: flex;
     justify-content: center;
     // jnpf ad class
@@ -238,7 +260,7 @@ useEventListener(window, 'scroll', handleScroll)
   }
 
   .sponsor {
-    margin: 0 20px 50px;
+    margin: 0 20px 10px;
     display: inline-flex;
     width: 300px;
     height: 100px;

docs/.vitepress/vitepress/components/navbar/vp-menu-link.vue

@@ -1,15 +1,29 @@
 <script lang="ts" setup>
+import { ref } from 'vue'
 import { useRoute } from 'vitepress'
 import VPLink from '../common/vp-link.vue'
 import { isActiveLink } from '../../utils'
 
 import type { Link } from '../../types'
-
+const USER_VISITED_NEW_RESOURCE_PAGE = 'USER_VISITED_NEW_RESOURCE_PAGE'
 defineProps<{
   item: Link
 }>()
 
 const route = useRoute()
+const isVisited = ref(
+  !!window.localStorage.getItem(USER_VISITED_NEW_RESOURCE_PAGE)
+)
+const isNewPage = (item: Link) => item.activeMatch === '/resource/'
+const onNavClick = (item: Link) => {
+  if (isNewPage(item) && !isVisited.value) {
+    window.localStorage.setItem(
+      USER_VISITED_NEW_RESOURCE_PAGE,
+      Date.now().toString()
+    )
+    isVisited.value = true
+  }
+}
 </script>
 
 <template>
@@ -24,8 +38,12 @@ const route = useRoute()
     }"
     :href="item.link"
     :no-icon="true"
+    @click="onNavClick(item)"
   >
-    {{ item.text }}
+    <el-badge v-if="isNewPage(item) && !isVisited" is-dot class="badge">
+      {{ item.text }}</el-badge
+    >
+    <template v-else> {{ item.text }}</template>
   </VPLink>
 </template>
 
@@ -47,5 +65,14 @@ const route = useRoute()
   &:hover {
     color: var(--brand-color);
   }
+
+  .badge {
+    display: inline;
+    vertical-align: unset;
+  }
+
+  .badge::v-deep .is-dot {
+    right: 0;
+  }
 }
 </style>

docs/.vitepress/vitepress/types.ts

@@ -1,4 +1,5 @@
 export type Link = {
   text: string
   link: string
+  activeMatch: string
 }