@voidzero-dev/vitepress-theme 3.1.0 → 3.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voidzero-dev/vitepress-theme",
-  "version": "3.1.0",
+  "version": "3.2.1",
   "description": "Shared VitePress theme for VoidZero projects",
   "type": "module",
   "license": "UNLICENSED",
@@ -15,20 +15,12 @@
     "*.css"
   ],
   "peerDependencies": {
-    "@docsearch/css": "^4.3.2",
-    "@docsearch/js": "^4.3.2",
     "vitepress": "^2.0.0-alpha.12",
     "vue": "^3.5.0"
   },
-  "peerDependenciesMeta": {
-    "@docsearch/css": {
-      "optional": true
-    },
-    "@docsearch/js": {
-      "optional": true
-    }
-  },
   "dependencies": {
+    "@docsearch/css": "^4.3.2",
+    "@docsearch/js": "^4.3.2",
     "@rive-app/canvas": "^2.31.6",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.1.18",

package/src/components/oss/Sponsors.vue

@@ -1,44 +1,15 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-
-// Sponsor with optional explicit image path
-interface Sponsor {
-  name: string
-  url: string
-  img?: string  // If provided, use directly; otherwise auto-generate
-}
-
-interface SponsorWithImg extends Sponsor {
-  img: string
-}
-
-// Tier configuration structure
-interface TierConfig {
-  displayName: string
-  columns: number
-  size?: 'large' | 'medium' | 'small' | 'avatar'
-  avatarMode?: boolean  // For backers dense grid
-}
-
-// Processed tier for rendering
-interface ProcessedTier {
-  tierKey: string
-  displayName: string
-  columns: number
-  size: 'large' | 'medium' | 'small' | 'avatar'
-  avatarMode: boolean
-  items: SponsorWithImg[]
-}
+import type { SponsorTier, SponsorSize } from '../../types/sponsors'
 
 interface Props {
-  sponsors?: Record<string, Sponsor[]>
-  tierConfig?: Record<string, Partial<TierConfig>>  // Override defaults
-  imageBasePath?: string  // Default: '/sponsors/'
-  sideBySideTiers?: [string, string]  // e.g., ['bronze', 'backers'] for OXC layout
+  sponsors?: SponsorTier[]
   heading?: string
   description?: string
   sponsorLink?: string
   sponsorLinkText?: string
+  sideBySideTiers?: [string, string] // e.g., ['bronze', 'backers'] for side-by-side layout
+  logoStyle?: 'opencollective'
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -48,285 +19,176 @@ const props = withDefaults(defineProps<Props>(), {
   sponsorLinkText: 'Become a Sponsor',
 })
 
-// Default tier configuration with display names, column counts, and sizes
-const defaultTierConfig: Record<string, TierConfig> = {
-  // Vite tiers
-  partnership: { displayName: 'IN PARTNERSHIP WITH', columns: 2, size: 'large' },
-  platinum: { displayName: 'PLATINUM SPONSORS', columns: 3, size: 'large' },
-
-  // Vitest tiers
-  special: { displayName: 'SPECIAL SPONSORS', columns: 3, size: 'large' },
-
-  // Shared tier
-  gold: { displayName: 'GOLD SPONSORS', columns: 5, size: 'medium' },
-
-  // OXC tiers
-  bronze: { displayName: 'BRONZE SPONSORS', columns: 1, size: 'medium' },
-  silver: { displayName: 'SILVER SPONSORS', columns: 3, size: 'medium' },
-  backers: { displayName: 'BACKERS', columns: 15, size: 'avatar', avatarMode: true },
+const sizeConfig: Record<SponsorSize, { columns: number; padding: string; logoSize: string; avatarMode?: boolean }> = {
+  big: { columns: 3, padding: 'py-16', logoSize: 'h-13 w-[220px]' },
+  medium: { columns: 5, padding: 'py-7', logoSize: 'h-8 w-[120px]' },
+  small: { columns: 7, padding: 'py-5', logoSize: 'h-6 w-[100px]' },
+  avatar: { columns: 15, padding: 'py-3', logoSize: 'w-10 h-10', avatarMode: true },
 }
 
-// Resolve image path - use explicit img or auto-generate from name
-const resolveImagePath = (sponsor: Sponsor): string => {
-  if (sponsor.img) return sponsor.img
-  const basePath = props.imageBasePath ?? '/sponsors/'
-  return `${basePath}${sponsor.name.toLowerCase().replace(/\s+/g, '')}.svg`
+const gridClasses: Record<number, string> = {
+  1: 'grid-cols-1',
+  2: 'grid-cols-1 sm:grid-cols-2',
+  3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+  4: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4',
+  5: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-5',
+  6: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-6',
+  7: 'grid-cols-2 sm:grid-cols-4 lg:grid-cols-7',
 }
 
-// Get merged tier config (defaults + overrides)
-const getMergedTierConfig = (tierKey: string): TierConfig => {
-  const defaultConfig = defaultTierConfig[tierKey] || {
-    displayName: tierKey.toUpperCase(),
-    columns: 5,
-    size: 'medium' as const,
-    avatarMode: false,
-  }
-  const overrideConfig = props.tierConfig?.[tierKey] || {}
-  return { ...defaultConfig, ...overrideConfig }
+const getEffectiveColumns = (size: SponsorSize, itemCount: number) =>
+  Math.min(sizeConfig[size].columns, itemCount)
+
+const getGridColumns = (size: SponsorSize, itemCount: number) =>
+  gridClasses[getEffectiveColumns(size, itemCount)] || 'grid-cols-1'
+
+const getEmptyCells = (itemCount: number, size: SponsorSize) => {
+  const cols = getEffectiveColumns(size, itemCount)
+  const remainder = itemCount % cols
+  return remainder === 0 ? 0 : cols - remainder
 }
 
-// Process a single tier
-const processTier = (tierKey: string, items: Sponsor[]): ProcessedTier => {
-  const config = getMergedTierConfig(tierKey)
-  return {
-    tierKey,
-    displayName: config.displayName,
-    columns: config.columns,
-    size: config.size || 'medium',
-    avatarMode: config.avatarMode || false,
-    items: items.map(sponsor => ({
-      ...sponsor,
-      img: resolveImagePath(sponsor),
-    })),
-  }
+// Calculate empty slots for backers grid (maintain visual consistency)
+const getBackerEmptySlots = (itemCount: number, minSlots: number = 30) => {
+  const targetSlots = Math.max(itemCount, minSlots)
+  return Math.max(0, targetSlots - itemCount)
 }
 
-// Side-by-side tier data (for OXC layout)
+// Side-by-side tier data (for layouts like OXC: Bronze + Backers)
 const sideBySideData = computed(() => {
   if (!props.sponsors || !props.sideBySideTiers) return null
 
-  const [leftTierKey, rightTierKey] = props.sideBySideTiers
-  const leftItems = props.sponsors[leftTierKey]
-  const rightItems = props.sponsors[rightTierKey]
+  const [leftTierName, rightTierName] = props.sideBySideTiers
+  const leftTier = props.sponsors.find(t => t.tier.toLowerCase() === leftTierName.toLowerCase())
+  const rightTier = props.sponsors.find(t => t.tier.toLowerCase() === rightTierName.toLowerCase())
 
-  if (!leftItems || !rightItems) return null
+  if (!leftTier || !rightTier) return null
 
-  return {
-    left: processTier(leftTierKey, leftItems),
-    right: processTier(rightTierKey, rightItems),
-  }
+  return { left: leftTier, right: rightTier }
 })
 
 // Standard stacked tier data (excludes side-by-side tiers)
-const stackedSponsorData = computed(() => {
+const stackedSponsors = computed(() => {
   if (!props.sponsors) return []
+  if (!props.sideBySideTiers) return props.sponsors
 
-  const sideBySideKeys = props.sideBySideTiers || []
-
-  return Object.entries(props.sponsors)
-    .filter(([tierKey]) => !sideBySideKeys.includes(tierKey))
-    .map(([tierKey, items]) => processTier(tierKey, items))
+  const sideBySideNames = props.sideBySideTiers.map(n => n.toLowerCase())
+  return props.sponsors.filter(tier => !sideBySideNames.includes(tier.tier.toLowerCase()))
 })
-
-// Get grid columns class based on specified columns
-const getGridColumns = (columns: number) => {
-  const gridClasses: Record<number, string> = {
-    1: 'grid-cols-1',
-    2: 'grid-cols-1 sm:grid-cols-2',
-    3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
-    4: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4',
-    5: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-5',
-    6: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-6',
-    7: 'grid-cols-2 sm:grid-cols-4 lg:grid-cols-7',
-  }
-  return gridClasses[columns] || 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4'
-}
-
-// Size-based padding classes
-const getSponsorPadding = (size: string) => {
-  const paddingMap: Record<string, string> = {
-    large: 'py-16',
-    medium: 'py-7',
-    small: 'py-5',
-    avatar: 'py-3',
-  }
-  return paddingMap[size] || 'py-7'
-}
-
-// Size-based logo dimension classes
-const getLogoSize = (size: string) => {
-  const sizeMap: Record<string, string> = {
-    large: 'max-h-12 max-w-[200px]',
-    medium: 'max-h-6 max-w-[120px]',
-    small: 'max-h-5 max-w-[100px]',
-    avatar: 'max-h-8 max-w-[80px]',
-  }
-  return sizeMap[size] || 'max-h-6 max-w-[120px]'
-}
-
-// Calculate number of empty cells needed to fill the last row
-const getEmptyCells = (itemCount: number, columns: number) => {
-  const remainder = itemCount % columns
-  return remainder === 0 ? 0 : columns - remainder
-}
-
-// Calculate empty slots for backers grid (maintain visual consistency)
-const getBackerEmptySlots = (itemCount: number, minSlots: number = 30) => {
-  const targetSlots = Math.max(itemCount, minSlots)
-  return Math.max(0, targetSlots - itemCount)
-}
 </script>
 
 <template>
-  <div class="wrapper wrapper--ticks border-t py-14 sm:py-30 px-5 sm:px-10">
-    <div class="flex flex-col md:flex-row justify-between items-center gap-8 md:gap-20 text-center md:text-left md:pl-15">
+  <div class="wrapper wrapper--ticks border-t py-14 sm:py-30 px-10">
+    <div
+      class="flex flex-col md:flex-row justify-between items-center gap-8 md:gap-20 text-center md:text-left md:pl-15">
       <div class="flex flex-col gap-3">
         <h3 class="text-white max-w-xl text-balance">{{ heading }}</h3>
         <p class="max-w-lg text-white/70 text-balance">{{ description }}</p>
         <a :href="sponsorLink" target="_blank" class="button w-fit mt-8 mx-auto md:mx-0">{{ sponsorLinkText }}</a>
       </div>
-      <div class="flex gap-8 md:gap-12 items-start justify-center md:justify-start md:pr-25">
-        <img src="../../assets/vite/vite-by-voidzero.png" alt="Brought to you by VoidZero" class="h-44 max-w-full object-contain mt-10 md:mt-0"/>
-      </div>
+      <a class="flex gap-8 md:gap-12 items-start justify-center md:justify-start md:pr-25" href="https://voidzero.dev"
+        target="_blank">
+        <img src="../../assets/vite/vite-by-voidzero.png" alt="Brought to you by VoidZero"
+          class="h-44 max-w-full object-contain mt-10 md:mt-0" />
+      </a>
     </div>
   </div>
-  <div v-if="sponsors && Object.keys(sponsors).length > 0" class="wrapper">
-    <!-- Side-by-Side Layout (OXC: Bronze + Backers) -->
+  <div v-if="sponsors && sponsors.length > 0" class="wrapper"
+    :class="{ 'sponsor-style-oc': logoStyle === 'opencollective' }">
+    <!-- Standard Stacked Sponsors Grid -->
+    <div v-for="(tier, tierIndex) in stackedSponsors" :key="tierIndex" class="border-t border-nickel">
+      <!-- Tier Heading -->
+      <div class="py-5 px-5 sm:px-10 border-b border-nickel">
+        <span class="text-white/70 text-xs font-mono uppercase tracking-wide">
+          {{ tier.tier }}
+        </span>
+      </div>
+
+      <!-- Avatar Mode Grid (for backers-style tiers) -->
+      <div v-if="sizeConfig[tier.size].avatarMode" class="backers-grid px-5 sm:px-10 py-6">
+        <a v-for="(sponsor, index) in tier.items" :key="index" :href="sponsor.url" target="_blank"
+          rel="noopener noreferrer" class="backer-avatar group relative">
+          <img :src="sponsor.img" :alt="sponsor.name"
+            class="w-10 h-10 rounded object-cover border border-nickel transition-all group-hover:border-white/50 group-hover:scale-110" />
+          <span class="backer-tooltip">{{ sponsor.name }}</span>
+        </a>
+        <!-- Empty placeholder slots -->
+        <div v-for="emptyIndex in getBackerEmptySlots(tier.items.length)" :key="`empty-${emptyIndex}`"
+          class="backer-avatar-placeholder" aria-hidden="true">
+          <div class="w-10 h-10 rounded border border-nickel/30"></div>
+        </div>
+      </div>
+
+      <!-- Standard Logo Grid -->
+      <div v-else class="grid [&>*]:border-r [&>*]:border-b [&>*]:border-nickel"
+        :class="getGridColumns(tier.size, tier.items.length)">
+        <a v-for="(sponsor, index) in tier.items" :key="index" :href="sponsor.url" target="_blank"
+          rel="noopener noreferrer"
+          class="sponsor-link flex items-center justify-center px-8 transition-opacity opacity-85 hover:opacity-100"
+          :class="sizeConfig[tier.size].padding">
+          <img :src="sponsor.img" :alt="sponsor.name" class="sponsor-logo object-contain"
+            :class="sizeConfig[tier.size].logoSize" />
+          <span class="sponsor-name ml-5">{{ sponsor.name }}</span>
+        </a>
+
+        <!-- Empty cells to fill incomplete rows -->
+        <div v-for="emptyIndex in getEmptyCells(tier.items.length, tier.size)" :key="`empty-${emptyIndex}`"
+          class="sponsor-link flex items-center justify-center px-8" :class="sizeConfig[tier.size].padding"
+          aria-hidden="true" />
+      </div>
+    </div>
+
+    <!-- Side-by-Side Layout (e.g., Bronze + Backers) -->
     <div v-if="sideBySideData" class="grid grid-cols-1 lg:grid-cols-2 border-t border-nickel">
-      <!-- Left Tier (Bronze Sponsors) -->
+      <!-- Left Tier -->
       <div class="border-b lg:border-b-0 lg:border-r border-nickel">
         <div class="py-5 px-5 sm:px-10 border-b border-nickel">
           <span class="text-white/70 text-xs font-mono uppercase tracking-wide">
-            {{ sideBySideData.left.displayName }}
+            {{ sideBySideData.left.tier }}
           </span>
         </div>
         <div class="flex flex-col">
-          <a
-            v-for="(sponsor, index) in sideBySideData.left.items"
-            :key="index"
-            :href="sponsor.url"
-            target="_blank"
+          <a v-for="(sponsor, index) in sideBySideData.left.items" :key="index" :href="sponsor.url" target="_blank"
             rel="noopener noreferrer"
-            class="sponsor-link flex items-center justify-center px-8 py-12 transition-opacity opacity-70 hover:opacity-100 border-b border-nickel last:border-b-0"
-          >
-            <img
-              :src="sponsor.img"
-              :alt="sponsor.name"
-              class="sponsor-logo object-contain max-h-8 max-w-[160px]"
-            />
+            class="sponsor-link flex items-center justify-center px-8 py-12 transition-opacity opacity-85 hover:opacity-100 border-b border-nickel last:border-b-0">
+            <img :src="sponsor.img" :alt="sponsor.name" class="sponsor-logo object-contain"
+              :class="sizeConfig[sideBySideData.left.size].logoSize" />
+            <span class="sponsor-name ml-5">{{ sponsor.name }}</span>
           </a>
         </div>
       </div>
 
-      <!-- Right Tier (Backers) -->
+      <!-- Right Tier (Backers style) -->
       <div>
         <div class="py-5 px-5 sm:px-10 border-b border-nickel">
           <span class="text-white/70 text-xs font-mono uppercase tracking-wide">
-            {{ sideBySideData.right.displayName }}
+            {{ sideBySideData.right.tier }}
           </span>
         </div>
-        <div class="backers-grid px-5 sm:px-10 py-6">
-          <a
-            v-for="(sponsor, index) in sideBySideData.right.items"
-            :key="index"
-            :href="sponsor.url"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="backer-avatar group relative"
-          >
-            <img
-              :src="sponsor.img"
-              :alt="sponsor.name"
-              class="w-10 h-10 rounded object-cover border border-nickel transition-all group-hover:border-white/50 group-hover:scale-110"
-            />
+        <div v-if="sizeConfig[sideBySideData.right.size].avatarMode" class="backers-grid px-5 sm:px-10 py-6">
+          <a v-for="(sponsor, index) in sideBySideData.right.items" :key="index" :href="sponsor.url" target="_blank"
+            rel="noopener noreferrer" class="backer-avatar group relative">
+            <img :src="sponsor.img" :alt="sponsor.name"
+              class="w-10 h-10 rounded object-cover border border-nickel transition-all group-hover:border-white/50 group-hover:scale-110" />
             <span class="backer-tooltip">{{ sponsor.name }}</span>
           </a>
           <!-- Empty placeholder slots for visual consistency -->
-          <div
-            v-for="emptyIndex in getBackerEmptySlots(sideBySideData.right.items.length)"
-            :key="`empty-${emptyIndex}`"
-            class="backer-avatar-placeholder"
-            aria-hidden="true"
-          >
-            <div class="w-10 h-10 rounded border border-nickel/30"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Standard Stacked Sponsors Grid -->
-    <div v-if="stackedSponsorData && stackedSponsorData.length > 0">
-      <div
-        v-for="(tierData, tierIndex) in stackedSponsorData"
-        :key="tierIndex"
-        class="border-t border-nickel"
-      >
-        <!-- Tier Heading -->
-        <div class="py-5 px-5 sm:px-10 border-b border-nickel">
-          <span class="text-white/70 text-xs font-mono uppercase tracking-wide">
-            {{ tierData.displayName }}
-          </span>
-        </div>
-
-        <!-- Avatar Mode Grid (for backers-style tiers) -->
-        <div v-if="tierData.avatarMode" class="backers-grid px-5 sm:px-10 py-6">
-          <a
-            v-for="(sponsor, index) in tierData.items"
-            :key="index"
-            :href="sponsor.url"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="backer-avatar group relative"
-          >
-            <img
-              :src="sponsor.img"
-              :alt="sponsor.name"
-              class="w-10 h-10 rounded object-cover border border-nickel transition-all group-hover:border-white/50 group-hover:scale-110"
-            />
-            <span class="backer-tooltip">{{ sponsor.name }}</span>
-          </a>
-          <!-- Empty placeholder slots -->
-          <div
-            v-for="emptyIndex in getBackerEmptySlots(tierData.items.length)"
-            :key="`empty-${emptyIndex}`"
-            class="backer-avatar-placeholder"
-            aria-hidden="true"
-          >
+          <div v-for="emptyIndex in getBackerEmptySlots(sideBySideData.right.items.length)" :key="`empty-${emptyIndex}`"
+            class="backer-avatar-placeholder" aria-hidden="true">
             <div class="w-10 h-10 rounded border border-nickel/30"></div>
           </div>
         </div>
-
-        <!-- Standard Logo Grid -->
-        <div
-          v-else
-          class="grid [&>*]:border-r [&>*]:border-b [&>*]:border-nickel"
-          :class="getGridColumns(tierData.columns)"
-        >
-          <a
-            v-for="(sponsor, index) in tierData.items"
-            :key="index"
-            :href="sponsor.url"
-            target="_blank"
+        <!-- Fallback to standard grid if not avatar mode -->
+        <div v-else class="grid [&>*]:border-r [&>*]:border-b [&>*]:border-nickel"
+          :class="getGridColumns(sideBySideData.right.size, sideBySideData.right.items.length)">
+          <a v-for="(sponsor, index) in sideBySideData.right.items" :key="index" :href="sponsor.url" target="_blank"
             rel="noopener noreferrer"
-            class="sponsor-link flex items-center justify-center px-8 transition-opacity opacity-70 hover:opacity-100"
-            :class="getSponsorPadding(tierData.size)"
-          >
-            <img
-              :src="sponsor.img"
-              :alt="sponsor.name"
-              class="sponsor-logo object-contain"
-              :class="getLogoSize(tierData.size)"
-            />
+            class="sponsor-link flex items-center justify-center px-8 transition-opacity opacity-85 hover:opacity-100"
+            :class="sizeConfig[sideBySideData.right.size].padding">
+            <img :src="sponsor.img" :alt="sponsor.name" class="sponsor-logo object-contain"
+              :class="sizeConfig[sideBySideData.right.size].logoSize" />
+              <span class="sponsor-name ml-5">{{ sponsor.name }}</span>
           </a>
-
-          <!-- Empty cells to fill incomplete rows -->
-          <div
-            v-for="emptyIndex in getEmptyCells(tierData.items.length, tierData.columns)"
-            :key="`empty-${emptyIndex}`"
-            class="sponsor-link flex items-center justify-center px-8"
-            :class="getSponsorPadding(tierData.size)"
-            aria-hidden="true"
-          />
         </div>
       </div>
     </div>
@@ -334,6 +196,31 @@ const getBackerEmptySlots = (itemCount: number, minSlots: number = 30) => {
 </template>
 
 <style scoped>
+/* Sponsor grid - clip outer borders using overflow */
+.grid[class*="grid-cols"] {
+  overflow: hidden;
+  margin-right: -1px;
+  margin-bottom: -1px;
+}
+
+.sponsor-logo {
+  filter: grayscale(1) invert(1);
+}
+
+.sponsor-style-oc .sponsor-logo {
+  filter: none;
+  width: auto;
+  border-radius: 0.25rem;
+}
+
+.sponsor-name {
+  display: none;
+}
+
+.sponsor-style-oc .sponsor-name {
+  display: inline-block;
+}
+
 /* Backers dense avatar grid */
 .backers-grid {
   display: flex;
@@ -389,11 +276,4 @@ const getBackerEmptySlots = (itemCount: number, minSlots: number = 30) => {
 .backer-avatar-placeholder div {
   background: transparent;
 }
-
-/* Sponsor grid - clip outer borders using overflow */
-.grid[class*="grid-cols"] {
-  overflow: hidden;
-  margin-right: -1px;
-  margin-bottom: -1px;
-}
 </style>

package/src/components/oss/TrustedBy.vue

@@ -1,40 +1,14 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import LogoGrid from '@components/shared/LogoGrid.vue'
 
-// Glob import all client logos
-const logoModules = import.meta.glob('../../assets/clients/*.svg', {
-  eager: true,
-  import: 'default'
-})
+const props = defineProps<{
+  logos: string[]
+}>()
 
-// Create logo asset map: { 'openai': 'url', 'framer': 'url', ... }
-const logoAssets: Record<string, string> = {}
-Object.entries(logoModules).forEach(([path, module]) => {
-  const filename = path.split('/').pop()?.replace('.svg', '') || ''
-  logoAssets[filename] = module as string
-})
-
-// Default logo order (matches current implementation)
-const DEFAULT_LOGO_ORDER = ['openai', 'framer', 'linear', 'ramp', 'shopify']
-
-// Props interface
-interface Props {
-  logos?: string[]  // Optional: array of logo names in desired order
-}
-
-const props = defineProps<Props>()
-
-// Computed logos array - resolves logo names to actual assets
-const logos = computed(() => {
-  const order = props.logos || DEFAULT_LOGO_ORDER
-  return order
-    .filter(name => name in logoAssets)  // Filter out invalid names
-    .map(name => ({
-      src: logoAssets[name],
-      alt: name.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ')
-    }))
-})
+const logos = props.logos.map(name => ({
+  src: `/trusted-by/${name}.svg`,
+  alt: name,
+}))
 </script>
 
 <template>
@@ -51,5 +25,6 @@ const logos = computed(() => {
 <style scoped>
 :deep(img) {
   filter: brightness(0) invert(1);
+  opacity: 0.7;
 }
 </style>

package/src/components/oxc/FeatureResolver.vue

@@ -11,11 +11,11 @@
         <p class="text-white/70 text-base max-w-[25rem] text-pretty">Node.js-compatible CJS and ESM module resolution
         </p>
         <ul class="checkmark-list">
-          <li>Behavior alignment with <code
-              class="mx-1 outline-none bg-nickel/50 text-aqua">enhanced-resolve</code></li>
+          <li>Behavior alignment with <code class="mx-1 outline-none bg-nickel/50 text-aqua">enhanced-resolve</code>
+          </li>
           <li>28x faster than <code class="mx-1 outline-none bg-nickel/50 text-aqua">enhanced-resolve</code>
-          <li>Highly customizable</li>
           </li>
+          <li>Highly customizable</li>
         </ul>
         <a href="/docs/guide/usage/resolver" class="button w-fit mt-6">Usage Guide</a>
       </div>

package/src/components/oxc/Hero.vue

@@ -7,17 +7,19 @@ import oxcAnimation from '@assets/oxc/animations/640_x_630_oxc masthead_.riv'
   <div class="wrapper wrapper--ticks grid md:grid-cols-2 w-full border-nickel divide-x">
     <div class="flex flex-col p-10 justify-center items-center md:items-start">
       <div class="flex flex-col gap-5 max-w-[30rem] text-center md:text-left items-center md:items-start">
-        <div class="flex items-center gap-2">
+        <a class="flex items-center gap-2" href="https://voidzero.dev" target="_blank">
           <span class="text-grey text-xs font-mono uppercase tracking-wide">By</span>
           <img src="@assets/logos/voidzero-light.svg" alt="VoidZero" class="h-2.5">
-        </div>
+        </a>
         <h1 class="text-white text-pretty">The JavaScript Oxidation Compiler</h1>
-        <p class="text-white/70 text-lg max-w-[25rem] text-pretty">A collection of high-performance JavaScript tools written in Rust</p>
+        <p class="text-white/70 text-lg max-w-[25rem] text-pretty">A collection of high-performance JavaScript tools
+          written in Rust</p>
         <div class="flex items-center gap-5 mt-8">
           <a href="/docs/guide/introduction" class="button button--primary inline-block w-fit">
             Get Started
           </a>
-          <a href="https://github.com/oxc-project/oxc" target="_blank" rel="noopener noreferrer" class="button inline-block w-fit">
+          <a href="https://github.com/oxc-project/oxc" target="_blank" rel="noopener noreferrer"
+            class="button inline-block w-fit">
             View on GitHub
           </a>
         </div>
@@ -25,20 +27,11 @@ import oxcAnimation from '@assets/oxc/animations/640_x_630_oxc masthead_.riv'
     </div>
     <div class="flex flex-col min-h-[22rem] sm:min-h-[30rem]">
       <div class="relative px-10 h-full flex flex-col justify-center overflow-clip pb-10 sm:pb-0">
-        <RiveAnimation
-            :desktop-src="oxcAnimation"
-            :mobile-src="oxcAnimation"
-            :desktop-width="640"
-            :desktop-height="630"
-            :mobile-width="640"
-            :mobile-height="630"
-            canvas-class="w-full"
-        />
+        <RiveAnimation :desktop-src="oxcAnimation" :mobile-src="oxcAnimation" :desktop-width="640" :desktop-height="630"
+          :mobile-width="640" :mobile-height="630" canvas-class="w-full" />
       </div>
     </div>
   </div>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

package/src/components/rolldown/Hero.vue

@@ -2,10 +2,10 @@
   <div class="wrapper wrapper--ticks grid md:grid-cols-2 w-full border-nickel divide-x">
     <div class="flex flex-col p-10 justify-between items-center md:items-start">
       <div class="flex flex-col gap-5 text-center md:text-left items-center md:items-start">
-        <div class="flex items-center gap-2">
+        <a class="flex items-center gap-2" href="https://voidzero.dev" target="_blank">
           <span class="text-grey text-xs font-mono uppercase tracking-wide">By</span>
           <img src="@assets/logos/voidzero-light.svg" alt="VoidZero" class="h-2.5">
-        </div>
+        </a>
         <h1 class="text-white text-pretty max-w-[35rem]">Blazing Fast<br>Rust-based bundler for JavaScript</h1>
         <p class="text-white/70 text-lg max-w-[30rem] text-pretty">with Rollup-compatible API and esbuild feature parity</p>
         <div class="flex items-center gap-5 mt-6">

package/src/components/vite/Community.vue

@@ -122,7 +122,7 @@ const testimonials: Testimonial[] = [
           >
             <!-- Comment -->
             <div class="relative z-[2] flex flex-col gap-4">
-              <p v-for="(paragraph, pIndex) in testimonial.comment" :key="pIndex" class="text-white/70 leading-relaxed">
+              <p v-for="(paragraph, pIndex) in testimonial.comment" :key="pIndex" class="text-white/70 leading-relaxed text-sm sm:text-base">
                 {{ paragraph }}
               </p>
             </div>

package/src/components/vite/FeatureGrid1.vue

@@ -8,7 +8,8 @@ import viteAnimation from '@assets/vite/animations/563_x_420_rich_features.riv'
     <div class="flex flex-col gap-3 justify-between">
       <div class="p-5 sm:p-10 flex flex-col gap-3">
         <h5 class="text-balance sm:text-pretty text-white">Instant Server Start</h5>
-        <p class="sm:max-w-[28rem] text-pretty">On demand source file serving over native ESM, with blazing fast
+        <p class="sm:max-w-[28rem] text-pretty">On demand source file serving over
+          native ESM, with blazing fast
           dependency pre-bundling.</p>
       </div>
       <div class="card-bg1 p-10 sm:p-15 flex justify-center">
@@ -19,18 +20,19 @@ import viteAnimation from '@assets/vite/animations/563_x_420_rich_features.riv'
     <div class="flex flex-col gap-3 justify-between border-r-0">
       <div class="p-5 sm:p-10 flex flex-col gap-3">
         <h5 class="text-white">Lightning Fast HMR</h5>
-        <p class="max-w-[26rem] text-pretty">Hot Module Replacement (HMR) that delivers updates instantly as you save,
-          and stays fast as your app grows.</p>
+        <p class="max-w-[26rem] text-pretty">Instantly reflect changes as you save, no matter how
+          big your app is.</p>
       </div>
-      <div class="relative min-h-100 -mt-15">
-        <img src="@assets/vite/vite-featurepanel-2-terminal.png" inert loading="lazy" alt="lightning fast hot module replacement"
-          class="absolute bottom-0 right-0 w-full max-w-[560px]">
+      <div class="flex justify-end">
+        <img src="@assets/vite/vite-featurepanel-2-terminal.png" class="md:max-w-[80%]" inert loading="lazy"
+          alt="lightning fast hot module replacement">
       </div>
     </div>
 
-    <div class="p-5 sm:p-10 pb-0 sm:pb-0 flex flex-col gap-3 border-b-0">
+    <div class="p-5 sm:p-10 pb-0 sm:pb-0 flex flex-col gap-3 lg:border-b-0">
       <h5 class="text-white">Rich Features Out of the Box</h5>
-      <p class="sm:max-w-[28rem] text-pretty">TypeScript, JSX, CSS, Workers, Web Assembly... and more with just a plugin away.</p>
+      <p class="sm:max-w-[28rem] text-pretty">TypeScript, JSX, CSS, Workers, Web
+        Assembly... and more with just a plugin away.</p>
       <RiveAnimation :desktop-src="viteAnimation" :mobile-src="viteAnimation" :desktop-width="563" :desktop-height="300"
         :mobile-width="563" :mobile-height="420" canvas-class="w-full" />
     </div>
@@ -38,7 +40,8 @@ import viteAnimation from '@assets/vite/animations/563_x_420_rich_features.riv'
     <div class="flex flex-col gap-3 justify-between border-r-0 border-b-0">
       <div class="p-5 sm:p-10 flex flex-col gap-3">
         <h5 class="text-white">Optimized Build</h5>
-        <p class="max-w-[25rem] text-pretty">Advanced tree-shaking, built-in minification, fine-grained chunking control
+        <p class="max-w-[25rem] text-pretty">Advanced tree-shaking, built-in
+          minification, fine-grained chunking control
           powered by Rolldown.</p>
       </div>
       <div class="card-bg p-10 sm:p-15 flex justify-center">

package/src/components/vite/FeatureGrid2.vue

@@ -7,7 +7,8 @@ import flexiblePluginAnimation from '@assets/vite/animations/640_x_300_flexible_
   <section class="wrapper wrapper--ticks border-t grid lg:grid-cols-2 divide-x divide-y divide-nickel">
     <div class="p-5 sm:p-10 flex flex-col gap-3">
       <h5 class="text-balance sm:text-pretty text-white">Flexible Plugin System</h5>
-      <p class="sm:max-w-[28rem] text-pretty">Vite plugins extends Rollup's well-designed plugin interface with a few
+      <p class="sm:max-w-[28rem] text-pretty">Vite plugins extends Rollup's
+        well-designed plugin interface with a few
         extra Vite-specific options.</p>
       <RiveAnimation :desktop-src="flexiblePluginAnimation" :desktop-width="640" :desktop-height="300"
         canvas-class="w-[calc(100%_+_2.5rem)] mt-5 -mx-5" />
@@ -23,9 +24,10 @@ import flexiblePluginAnimation from '@assets/vite/animations/640_x_300_flexible_
       </div>
     </div>
 
-    <div class="p-5 sm:p-10 flex flex-col gap-3 border-b-0">
+    <div class="p-5 sm:p-10 flex flex-col gap-3 lg:border-b-0">
       <h5 class="text-white">First class SSR Support</h5>
-      <p class="sm:max-w-[28rem] text-pretty mb-12 sm:mb-16">It's never been easier to setup custom SSR (Server-Side
+      <p class="sm:max-w-[28rem] text-pretty mb-12 sm:mb-16">It's never been easier to
+        setup custom SSR (Server-Side
         Rendering), or build your own SSR framework.</p>
       <img src="@assets/vite/vite-ssr-support.png" alt="SSR Support" loading="lazy" class="w-full px-5">
     </div>
@@ -33,7 +35,8 @@ import flexiblePluginAnimation from '@assets/vite/animations/640_x_300_flexible_
     <div class="flex flex-col gap-3 justify-between">
       <div class="p-5 sm:p-10 flex flex-col gap-3">
         <h5 class="text-white">Continuous ecosystem integration</h5>
-        <p class="max-w-[25rem] text-pretty">Our CI continuously tests Vite changes against downstream projects,
+        <p class="max-w-[25rem] text-pretty">Our CI continuously tests Vite changes
+          against downstream projects,
           allowing us to improve Vite with stability and confidence.</p>
       </div>
       <div class="px-5 sm:px-10 flex justify-center">

package/src/components/vite/Hero.vue

@@ -17,12 +17,13 @@ const installTabs = [
   <div class="wrapper wrapper--ticks grid md:grid-cols-2 w-full border-nickel md:divide-x">
     <div class="flex flex-col p-10 justify-between gap-20 items-center md:items-start">
       <div class="flex flex-col gap-5 items-center md:items-start text-center md:text-left">
-        <div class="flex items-center gap-2">
+        <a class="flex items-center gap-2" href="https://voidzero.dev" target="_blank">
           <span class="text-grey text-xs font-mono uppercase tracking-wide">By</span>
-          <img src="../../assets/logos/voidzero-light.svg" alt="VoidZero" class="h-2.5">
-        </div>
+          <img src="@assets/logos/voidzero-light.svg" alt="VoidZero" class="h-2.5">
+        </a>
         <h1 class="text-white text-pretty max-w-[25rem]">The Build Tool for the Web</h1>
-        <p class="text-white/70 md:text-lg max-w-[27rem] text-pretty">Vite is a blazing fast frontend build tool powering
+        <p class="text-white/70 md:text-lg max-w-[27rem] text-pretty">Vite is a blazing fast frontend build tool
+          powering
           the next generation of web applications.</p>
         <div class="flex items-center gap-5 mt-8">
           <a href="/guide/" class="button button--primary inline-block w-fit">

package/src/components/vitest/Hero.vue

@@ -2,10 +2,10 @@
   <div class="wrapper wrapper--ticks grid md:grid-cols-2 w-full border-nickel divide-x">
     <div class="flex flex-col p-10 justify-center items-center md:items-start">
       <div class="flex flex-col gap-5 max-w-[30rem] text-center md:text-left items-center md:items-start">
-        <div class="flex items-center gap-2">
+        <a class="flex items-center gap-2" href="https://voidzero.dev" target="_blank">
           <span class="text-grey text-xs font-mono uppercase tracking-wide">By</span>
           <img src="@assets/logos/voidzero-light.svg" alt="VoidZero" class="h-2.5">
-        </div>
+        </a>
         <h1 class="text-white text-pretty">Next Generation Testing Framework</h1>
         <p class="text-white/70 text-lg max-w-[25rem] text-pretty">A Vite-native testing framework. It's fast!</p>
         <div class="flex items-center gap-5 mt-8">
@@ -34,4 +34,4 @@
 }
 </style>
 <script setup lang="ts">
-</script>
+</script>

package/src/types/sponsors.ts

@@ -0,0 +1,14 @@
+export interface Sponsor {
+  name: string
+  img: string
+  url: string
+  hasDark?: true
+}
+
+export type SponsorSize = 'big' | 'medium' | 'small' | 'avatar'
+
+export interface SponsorTier {
+  tier: string
+  size: SponsorSize
+  items: Sponsor[]
+}