docs: add release countdown (#5605)

docs/.vitepress/config.ts

@@ -45,6 +45,7 @@ languages.forEach((lang) => {
 
 export const config: UserConfig = {
   title: 'Element Plus',
+  description: 'a Vue 3 based component library for designers and developers',
   head,
   themeConfig: {
     repo: 'element-plus/element-plus',

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

@@ -1,6 +1,6 @@
 {
-  "1": "A Desktop UI Library",
-  "2": "Element Plus, a Vue 3 based component library for developers, designers and product managers",
+  "1": "",
+  "2": "",
   "3": "Guide",
   "4": "Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.",
   "5": "View Detail",
@@ -19,5 +19,8 @@
   "18": "SegmentFault",
   "19": "Community",
   "20": "Become a Sponsor!",
-  "21": "Please contact us via"
+  "21": "Please contact us via",
+  "title_release": "Element Plus stable release is coming",
+  "title": "Element Plus",
+  "title_sub": "a Vue 3 based component library for designers and developers"
 }

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, reactive, computed } from 'vue'
 import { useParallax, useThrottleFn, useEventListener } from '@vueuse/core'
+import dayjs from 'dayjs'
 import { useLang } from '../../composables/lang'
 import homeLocale from '../../../i18n/pages/home.json'
 import sponsorLocale from '../../../i18n/component/sponsors-home.json'
@@ -67,28 +68,110 @@ const handleScroll = useThrottleFn(() => {
 }, 10)
 
 useEventListener(window, 'scroll', handleScroll)
+
+interface CountdownT {
+  days?: string
+  hours?: string
+  minutes?: string
+  seconds?: string
+}
+const releaseDate = dayjs('2022-02-07T11:00:00.000+08:00')
+const isBeforeRelease = ref(false)
+const countDownText = ref<CountdownT>({})
+const calReleaseCountDown = () => {
+  if (dayjs().isBefore(releaseDate)) {
+    isBeforeRelease.value = true
+    const dayDiff = releaseDate.diff(dayjs(), 'day')
+    countDownText.value.days = String(dayDiff).padStart(2, '0')
+    const hourDiff = releaseDate.diff(dayjs(), 'hour') - dayDiff * 24
+    countDownText.value.hours = String(hourDiff).padStart(2, '0')
+    const minuteDiff =
+      releaseDate.diff(dayjs(), 'minute') - hourDiff * 60 - dayDiff * 24 * 60
+    countDownText.value.minutes = String(minuteDiff).padStart(2, '0')
+    const secondDiff =
+      releaseDate.diff(dayjs(), 'second') -
+      minuteDiff * 60 -
+      hourDiff * 60 * 60 -
+      dayDiff * 24 * 60 * 60
+    countDownText.value.seconds = String(secondDiff).padStart(2, '0')
+  } else {
+    clearInterval(intervalId)
+  }
+}
+
+const intervalId = setInterval(() => {
+  calReleaseCountDown()
+}, 1000)
+calReleaseCountDown()
 </script>
 
 <template>
   <div ref="target" class="home-page">
-    <div class="banner">
-      <div class="banner-desc">
-        <h1>{{ homeLang['1'] }}</h1>
-        <p>{{ homeLang['2'] }}</p>
+    <template v-if="isBeforeRelease">
+      <div class="banner">
+        <div class="banner-desc banner-dot">
+          <h1>
+            <span>{{ homeLang['title_release'] }}</span>
+          </h1>
+          <p>{{ homeLang['title_sub'] }}</p>
+        </div>
       </div>
-    </div>
-    <div ref="jumbotronRef" class="jumbotron">
-      <div :style="containerStyle">
-        <div :style="cardStyle">
-          <div class="banner" :style="layer0">
-            <img src="/images/theme-index-blue.png" alt="banner" />
-            <div class="jumbotron-red" :style="jumbotronRedStyle">
-              <img src="/images/theme-index-red.png" alt="" />
+      <div class="count-down">
+        <div class="cd-main">
+          <div class="cd-date">Feb 7, 2022, 11 AM GMT+8</div>
+          <div class="cd-time">
+            <div class="cd-item">
+              <div class="cd-num">
+                <span>{{ countDownText.days[0] }}</span>
+                <span>{{ countDownText.days[1] }}</span>
+              </div>
+              <div class="cd-str">DAYS</div>
+            </div>
+            <div class="cd-item">
+              <div class="cd-num">
+                <span>{{ countDownText.hours[0] }}</span>
+                <span>{{ countDownText.hours[1] }}</span>
+              </div>
+              <div class="cd-str">HOURS</div>
+            </div>
+            <div class="cd-item">
+              <div class="cd-num">
+                <span>{{ countDownText.minutes[0] }}</span>
+                <span>{{ countDownText.minutes[1] }}</span>
+              </div>
+              <div class="cd-str">MINUTES</div>
+            </div>
+            <div class="cd-item">
+              <div class="cd-num">
+                <span>{{ countDownText.seconds[0] }}</span>
+                <span>{{ countDownText.seconds[1] }}</span>
+              </div>
+              <div class="cd-str">SECONDS</div>
             </div>
           </div>
         </div>
       </div>
-    </div>
+    </template>
+    <template v-else>
+      <div class="banner">
+        <div class="banner-desc">
+          <h1>{{ homeLang['title'] }}</h1>
+          <p>{{ homeLang['title_sub'] }}</p>
+        </div>
+      </div>
+      <div ref="jumbotronRef" class="jumbotron">
+        <div :style="containerStyle">
+          <div :style="cardStyle">
+            <div class="banner" :style="layer0">
+              <img src="/images/theme-index-blue.png" alt="banner" />
+              <div class="jumbotron-red" :style="jumbotronRedStyle">
+                <img src="/images/theme-index-red.png" alt="" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
     <div class="sponsors-container">
       <div class="sponsors-list">
         <a
@@ -225,6 +308,19 @@ useEventListener(window, 'scroll', handleScroll)
   .banner {
     text-align: center;
   }
+  .banner-dot h1 span {
+    position: relative;
+    &::after {
+      content: '';
+      position: absolute;
+      right: -12px;
+      bottom: 0;
+      background: var(--el-color-primary);
+      height: 8px;
+      width: 8px;
+      border-radius: 100%;
+    }
+  }
   .banner-desc {
     padding-top: 30px;
 
@@ -243,6 +339,42 @@ useEventListener(window, 'scroll', handleScroll)
     }
   }
 
+  .count-down {
+    .cd-main {
+      background: #f1f6fe;
+      border-radius: 10px;
+      width: 50%;
+      margin: 60px auto 120px;
+      padding: 30px 0;
+      font-size: 24px;
+      color: #666;
+      text-align: center;
+      font-weight: 600;
+    }
+    .cd-date {
+      font-size: 28px;
+    }
+    .cd-time {
+      display: flex;
+      justify-content: space-between;
+      width: 80%;
+      margin: 10px auto 0;
+    }
+    .cd-num {
+      color: var(--el-color-primary);
+      font-size: 78px;
+      font-weight: bold;
+    }
+    .cd-num span {
+      width: 50%;
+      display: inline-block;
+    }
+    .cd-str {
+      font-size: 22px;
+      margin-top: -5px;
+    }
+  }
+
   .sponsors-container {
     .join {
       text-align: center;
@@ -410,19 +542,10 @@ useEventListener(window, 'scroll', handleScroll)
     }
   }
 
-  @media (max-width: 1000px) {
-    .banner .container {
-      img {
-        display: none;
-      }
-    }
-    .jumbotron,
-    .banner {
-      display: none;
-    }
-  }
-
   @media (max-width: 768px) {
+    .banner-desc {
+      padding-top: 0px;
+    }
     .cards {
       li {
         width: 80%;
@@ -438,6 +561,9 @@ useEventListener(window, 'scroll', handleScroll)
       display: none;
     }
     .banner-desc {
+      h1 {
+        font-size: 22px;
+      }
       #line2 {
         display: none;
       }
@@ -448,6 +574,39 @@ useEventListener(window, 'scroll', handleScroll)
         width: auto;
       }
     }
+    .banner-dot h1 span {
+      &::after {
+        right: -8px;
+        bottom: 2px;
+        height: 6px;
+        width: 6px;
+      }
+    }
+    .count-down {
+      .cd-main {
+        width: 90%;
+        margin: 40px auto 40px;
+        padding: 20px 0;
+      }
+      .cd-date {
+        font-size: 22px;
+      }
+      .cd-num {
+        font-size: 38px;
+      }
+      .cd-str {
+        font-size: 12px;
+        margin-top: 0px;
+      }
+    }
+    .sponsors-list {
+      display: flex;
+      flex-direction: column;
+      align-content: center;
+      .sponsor {
+        justify-content: left;
+      }
+    }
   }
   .theme-intro-b {
     position: fixed;

docs/.vitepress/vitepress/styles/content/hero-content.scss

@@ -1,3 +1,8 @@
 .hero-content {
   padding: 55px 40px 0;
 }
+@media (max-width: 768px) {
+  .hero-content {
+    padding: 30px 10px 0;
+  }
+}