update docs

Author: wu-clan

docs/.vuepress/components/SponsorPage.vue

@@ -2,6 +2,7 @@
 import { computed, h, onBeforeUnmount, ref } from 'vue'
 import { withBase } from 'vuepress/client'
 import { useI18n } from '../composables/useI18n'
+import { getBoothAspectRatio, isBoothFull } from '../data/sponsors'
 
 type SponsorTab = 'honor' | 'booth'
 type SponsorIconName = 'alipay' | 'wechat' | 'arrow-right' | 'check' | 'copy' | 'sponsor'
@@ -10,11 +11,9 @@ type SnippetKey = 'promotion' | 'inquiry'
 interface BoothPlan {
   key: string
   name: string
-  status: 'vacant' | 'full' | string
   price: string
   quota?: string
   placements: string[]
-  material: string
 }
 
 const { t, tm, withLocale } = useI18n()
@@ -57,12 +56,13 @@ const whyLink = computed(() =>
 )
 const groupLink = computed(() => withBase(withLocale('/group.html')))
 
-function isBoothFull(plan: BoothPlan) {
-  return plan.status === 'full'
+function statusLabel(plan: BoothPlan) {
+  return isBoothFull(plan.key) ? t('sponsors.statusFull') : t('sponsors.statusVacant')
 }
 
-function statusLabel(plan: BoothPlan) {
-  return plan.status === 'full' ? t('sponsors.statusFull') : t('sponsors.statusVacant')
+function materialLabel(plan: BoothPlan) {
+  const ratio = getBoothAspectRatio(plan.key)
+  return ratio ? t('sponsors.materialText', { ratio }) : ''
 }
 
 const sponsorEmail = 'jianhengwu0407@gmail.com'
@@ -188,7 +188,7 @@ onBeforeUnmount(() => {
 
       <div class="booth-grid">
         <article v-for="plan in boothPlans" :key="plan.key || plan.name" class="booth-card"
-          :class="{ 'is-full': isBoothFull(plan) }">
+          :class="{ 'is-full': isBoothFull(plan.key) }">
           <div class="booth-head">
             <div>
               <div class="booth-badges">
@@ -197,15 +197,15 @@ onBeforeUnmount(() => {
               </div>
               <h3>{{ plan.name }}</h3>
             </div>
-            <strong v-if="!isBoothFull(plan)">{{ plan.price }}</strong>
+            <strong v-if="!isBoothFull(plan.key)">{{ plan.price }}</strong>
           </div>
           <ul class="check-list">
             <li v-for="placement in plan.placements" :key="placement">
               <SponsorIcon name="check" />
               <span>{{ placement }}</span>
             </li>
           </ul>
-          <p class="material-line">{{ t('sponsors.materialPrefix') }}{{ plan.material }}</p>
+          <p v-if="materialLabel(plan)" class="material-line">{{ t('sponsors.materialPrefix') }}{{ materialLabel(plan) }}</p>
         </article>
       </div>
 

docs/.vuepress/data/sponsors.ts

@@ -58,6 +58,22 @@ export const boothCapacity = {
     gold: 3,
 } as const;
 
+/**
+ * 展位横版图比例
+ * 素材对应 Sponsor 字段：link 横版图链接、alt 品牌名、href 跳转链接
+ */
+export const boothAspectRatio = {
+    exclusive: '7:3',
+    gold: '7:3',
+    silver: '5:3',
+} as const;
+
+export type BoothKey = keyof typeof boothAspectRatio;
+
+export function getBoothAspectRatio(key: string): string | undefined {
+    return boothAspectRatio[key as BoothKey];
+}
+
 export function shouldShowSponsor(sponsor: Sponsor): boolean {
     if (!sponsor.alt || sponsor.alt.includes(PLACEHOLDER_ALT) || !sponsor.expiryTime) {
         return false;

docs/.vuepress/locales/en-US.ts

@@ -246,6 +246,7 @@ export default {
     contactEmail: 'Email us',
     mailSubject: 'fba booth sponsorship inquiry',
     materialPrefix: 'Creative: ',
+    materialText: '{ratio} landscape image URL, brand name, and destination URL',
     promotionLabel: 'Promotion:',
     promotionDesc:
       'Exclusive or Gold booth sponsorship includes one Discord community announcement for your product',
@@ -284,7 +285,6 @@ export default {
           'Exclusive right sidebar on blog',
           'Visible on mobile',
         ],
-        material: '7:3 landscape image, brand name, logo, and link',
       },
       {
         key: 'gold',
@@ -296,23 +296,22 @@ export default {
           'Visible on GitHub README',
           'Large right sidebar on docs',
         ],
-        material: 'Same as Exclusive',
       },
       {
         key: 'silver',
         name: 'Silver Booth',
         price: 'Contact / mo',
         placements: ['Scrolling homepage carousel slot', 'Small right sidebar on docs'],
-        material: '5:3 landscape image, brand name, logo, and link',
       },
     ],
     promotionRules: [
       'Prefer internet products related to developers, such as keyboards, monitors, headphones, low-code platforms, developer tools, cloud servers, personal blogs, etc. Non-developer products may be considered case by case',
       'No promotions that violate laws or involve gray-area products',
     ],
     inquiryLines: [
-      'Product name:',
-      'Website / landing page:',
+      'Brand name:',
+      'Destination URL:',
+      'Landscape image URL:',
       'Preferred tier: Exclusive / Gold / Silver',
       'Duration: 1 month / 3 months / 12 months',
       'Preferred go-live date:',

docs/.vuepress/locales/zh-CN.ts

@@ -233,6 +233,7 @@ export default {
     contactEmail: '邮件联系',
     mailSubject: 'fba 展位赞助咨询',
     materialPrefix: '素材：',
+    materialText: '{ratio} 横版图链接、品牌名、跳转链接',
     promotionLabel: '推广:',
     promotionDesc: '选择【独家展位、金牌展位】赞助，可帮助您的产品在 Discord 社区以公告的形式进行推广一次',
     announcementHint: '公告消息如下：（您也可以提供自定义非政治、非法律法规敏感的推广词/图片）',
@@ -266,7 +267,6 @@ export default {
           '博客右侧边栏独家展示位',
           '移动端可见',
         ],
-        material: '7:3 横版图，品牌名、Logo、链接',
       },
       {
         key: 'gold',
@@ -278,23 +278,22 @@ export default {
           'GitHub README 可见',
           '文档右侧边栏大号展示位',
         ],
-        material: '同独家',
       },
       {
         key: 'silver',
         name: '银牌展位',
         price: '沟通 / 月',
         placements: ['首页轮播滚动展示位', '文档右侧边栏小号展示位'],
-        material: '5:3 横版图，品牌名、Logo、链接',
       },
     ],
     promotionRules: [
       '优先推广和程序员相关的互联网产品，比如：键盘、显示器、耳机、低代码开发平台、开发软件、云服务器、个人博客等等；如果与程序员无关，可酌情考虑',
       '拒绝一切违反法律法规、灰产相关的产品推广',
     ],
     inquiryLines: [
-      '产品名称：',
-      '官网 / 落地页：',
+      '品牌名：',
+      '跳转链接：',
+      '横版图链接：',
       '意向档位：独家 / 金牌 / 银牌',
       '投放周期：1 个月 / 3 个月 / 12 个月',
       '希望上线时间：',