chore: update sponsors (#6364)

* chore: update sponsor config

* chore: update readme

* chore: fix lint

README.md

@@ -66,6 +66,11 @@ You can also try Element Plus out with the components built-in playground
           <img width="150px" src="https://user-images.githubusercontent.com/17680888/145664631-bbe85550-4406-4f20-a19f-7e6e844a9b85.png">
         </a>
       </td>
+      <td align="center" valign="middle">
+        <a href="https://vform666.com/vform3.html?from=element_plus" target="_blank">
+          <img width="150px" src="https://user-images.githubusercontent.com/17680888/156188909-f6780e1a-3b8c-4cab-a637-9a16f04110be.png">
+        </a>
+      </td>
       <td align="center" valign="middle">
         <a href="https://bit.dev/?from=element-ui" target="_blank">
           <img width="150px" src="https://user-images.githubusercontent.com/10095631/41342907-e44e7196-6f2f-11e8-92f2-47702dc8f059.png">

docs/.vitepress/config/sponsors.ts

@@ -0,0 +1,37 @@
+export const sponsors = [
+  {
+    name: 'JNPF',
+    img: '/images/jnpf_index.png',
+    url: 'https://www.jnpfsoft.com/index.html?from=elementUI',
+    slogan: 'JNPF low code development platform to develop simple!',
+    slogan_cn: 'JNPF 低代码开发平台，让开发变得简单！',
+    className: 'jnpf',
+    banner_img: '/images/jnpfsoft.jpg',
+    type: 'banner',
+  },
+  {
+    name: 'VForm',
+    img: '/images/vform.png',
+    url: 'https://vform666.com/vform3.html?from=element_plus',
+    slogan: 'Vue 3 Visual/Low-Code Forms',
+    slogan_cn: 'Vue 3 可视化/低代码表单',
+    banner_img: '/images/vform-banner.jpg',
+    type: 'banner',
+  },
+  {
+    name: 'bit',
+    img: '/images/bit.svg',
+    url: 'https://bit.dev/?from=element-ui',
+    slogan: 'Share Code',
+    isDark: true, // dark theme
+  },
+  {
+    name: 'renren.io',
+    name_cn: '人人开源',
+    img: '/images/renren.png',
+    url: 'https://www.renren.io/?from=element-ui',
+    slogan: 'Rapid development platform',
+    slogan_cn: '企业级的快速开发平台',
+    className: 'renren',
+  },
+]

docs/.vitepress/crowdin/en-US/component/sponsors-home.json

@@ -1,22 +0,0 @@
-[
-  {
-    "name": "JNPF",
-    "img": "/images/jnpf_index.png",
-    "url": "https://www.jnpfsoft.com/index.html?from=elementUI",
-    "slogan": "JNPF low code development platform to develop simple!",
-    "className": "jnpf"
-  },
-  {
-    "name": "bit",
-    "img": "/images/bit.svg",
-    "url": "https://bit.dev/?from=element-ui",
-    "slogan": "Share Code"
-  },
-  {
-    "name": "renren.io",
-    "img": "/images/renren.png",
-    "url": "https://www.renren.io/?from=element-ui",
-    "slogan": "Rapid development platform",
-    "className": "renren"
-  }
-]

docs/.vitepress/crowdin/en-US/component/sponsors.json

@@ -1,12 +0,0 @@
-[
-  {
-    "name": "bit",
-    "img": "/images/bit.svg",
-    "url": "https://bit.dev/?from=element-ui"
-  },
-  {
-    "name": "renren.io",
-    "img": "/images/renren.png",
-    "url": "https://www.renren.io/?from=element-ui"
-  }
-]

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

@@ -1,20 +1,31 @@
 <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'
 import { isDark } from '../../composables/dark'
+import { sponsors } from '../../../config/sponsors'
 import type { CSSProperties } from 'vue'
-
+const langZhCN = 'zh-CN'
 const target = ref<HTMLElement | null>(null)
 const parallax = reactive(useParallax(target))
 const jumbotronRedOffset = ref(0)
 const jumbotronRef = ref<HTMLElement | null>(null)
 const lang = useLang()
 const homeLang = computed(() => homeLocale[lang.value])
-const sponsors = computed(() => sponsorLocale[lang.value])
+
+const getSponsorName = (spons) => {
+  if (lang.value === langZhCN) {
+    return spons.name_cn || spons.name
+  }
+  return spons.name
+}
+const getSponsorSlogan = (spons) => {
+  if (lang.value === langZhCN) {
+    return spons.slogan_cn || spons.slogan
+  }
+  return spons.slogan
+}
 
 const containerStyle: CSSProperties = {
   display: 'flex',
@@ -70,91 +81,10 @@ 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>({} as 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 {
-//     pauseCountdown()
-//   }
-// }
-
-// const { pause: pauseCountdown } = useIntervalFn(
-//   () => calReleaseCountDown(),
-//   1000,
-//   { immediateCallback: true }
-// )
 </script>
 
 <template>
   <div ref="target" class="home-page">
-    <!-- <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 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>
-    </template> -->
     <div class="banner">
       <div class="banner-desc">
         <h1>{{ homeLang['title'] }}</h1>
@@ -186,9 +116,9 @@ useEventListener(window, 'scroll', handleScroll)
           <div>
             <p>
               Sponsored by
-              <span class="name">{{ sponsor.name }}</span>
+              <span class="name">{{ getSponsorName(sponsor) }}</span>
             </p>
-            <p>{{ sponsor.slogan }}</p>
+            <p>{{ getSponsorSlogan(sponsor) }}</p>
           </div>
         </a>
       </div>
@@ -377,6 +307,8 @@ useEventListener(window, 'scroll', handleScroll)
   }
 
   .sponsors-container {
+    width: 92%;
+    margin: 0 auto;
     .join {
       text-align: center;
       margin: 0 0 50px 0;
@@ -386,10 +318,6 @@ useEventListener(window, 'scroll', handleScroll)
   .sponsors-list {
     display: flex;
     justify-content: center;
-    // jnpf ad class
-    .jnpf > div > p:last-of-type {
-      font-size: 12px;
-    }
   }
 
   .sponsor {
@@ -419,7 +347,7 @@ useEventListener(window, 'scroll', handleScroll)
       margin: 0;
       line-height: 1.8;
       color: var(--text-color-light);
-      font-size: 14px;
+      font-size: 12px;
     }
   }
   .jumbotron {

docs/.vitepress/vitepress/components/vp-sponsor-large.vue

@@ -1,12 +1,15 @@
+<script setup lang="ts">
+import { sponsors } from '../../config/sponsors'
+const sponsorList = sponsors.filter((_) => _.type === 'banner')
+</script>
+
 <template>
-  <div class="sponsor-item">
-    <a
-      href="https://www.jnpfsoft.com/index.html?from=elementUI"
-      title="jnpfsoft"
-      target="_blank"
-    >
-      <img src="/images/jnpfsoft.jpg" alt="jnpfsoft" />
-    </a>
+  <div class="container">
+    <div v-for="item in sponsorList" :key="item.name" class="sponsor-item">
+      <a :href="item.url" :title="item.name" target="_blank">
+        <img :src="item.banner_img" :alt="item.name" />
+      </a>
+    </div>
   </div>
 </template>
 
@@ -16,6 +19,7 @@
   img {
     border-radius: 8px;
     overflow: hidden;
+    min-height: 60px;
   }
 }
 @media (max-width: 768px) {
@@ -23,6 +27,7 @@
     max-width: 160px;
     img {
       border-radius: 4px;
+      min-height: 45px;
     }
   }
 }

docs/.vitepress/vitepress/components/vp-sponsor-small.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { isDark } from '../composables/dark'
+import { sponsors } from '../../config/sponsors'
+const sponsorList = sponsors.filter((_) => !_.type)
+</script>
+
+<template>
+  <div class="container">
+    <div
+      v-for="item in sponsorList"
+      :key="item.name"
+      :class="['sponsor-item', item.isDark && isDark ? 'filter invert' : '']"
+    >
+      <a :href="item.url" :title="item.name" target="_blank">
+        <img :src="item.img" :alt="item.name" />
+      </a>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.container {
+  display: flex;
+  align-items: center;
+  .sponsor-item {
+    margin-right: 4px;
+
+    a {
+      display: inline-flex;
+      align-items: center;
+
+      img {
+        width: 36px;
+        height: 36px;
+      }
+    }
+  }
+}
+</style>

docs/.vitepress/vitepress/components/vp-sponsor.vue

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  item: {
-    name: string
-    img: string
-    url: string
-  }
-}>()
-</script>
-
-<template>
-  <div class="sponsor-item">
-    <a :href="item.url" :title="item.name" target="_blank">
-      <img :src="item.img" :alt="item.name" />
-    </a>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.sponsor-item {
-  margin-right: 4px;
-
-  a {
-    display: inline-flex;
-    align-items: center;
-
-    img {
-      width: 36px;
-      height: 36px;
-    }
-  }
-}
-</style>

docs/.vitepress/vitepress/components/vp-sponsors.vue

@@ -1,32 +1,19 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import sponsorsLocale from '../../i18n/component/sponsors.json'
 import sponsorLocale from '../../i18n/component/sponsor.json'
 import { useLang } from '../composables/lang'
-import { isDark } from '../composables/dark'
-import VPSponsor from './vp-sponsor.vue'
+import VPSponsorSmall from './vp-sponsor-small.vue'
 import VPSponsorLarge from './vp-sponsor-large.vue'
 
 const lang = useLang()
-const sponsors = computed(() => sponsorsLocale[lang.value])
-
 const sponsor = computed(() => sponsorLocale[lang.value])
-
-const darkSponsors = ['bit']
 </script>
 
 <template>
   <div class="sponsors">
     <p class="sponsors-title">{{ sponsor.sponsoredBy }}</p>
     <VPSponsorLarge />
-    <div class="container">
-      <VPSponsor
-        v-for="(s, key) in sponsors"
-        :key="key"
-        :item="s"
-        :class="darkSponsors.includes(s.name) && isDark ? 'filter invert' : ''"
-      />
-    </div>
+    <VPSponsorSmall />
   </div>
 </template>
 
@@ -38,10 +25,5 @@ const darkSponsors = ['bit']
     font-weight: 300;
     font-size: 14px;
   }
-
-  .container {
-    display: flex;
-    align-items: center;
-  }
 }
 </style>