@voidzero-dev/vitepress-theme 3.0.2 → 3.2.0

package/config.js

@@ -53,8 +53,17 @@ export function extendConfig(c) {
 
   // inject alias
   v.resolve ??= {};
-  v.resolve.alias ??= {};
-  Object.assign(v.resolve.alias, aliases);
+  const al = (v.resolve.alias ??= {});
+  if (Array.isArray(al)) {
+    for (const key in aliases) {
+      al.push({
+        find: key,
+        replacement: aliases[key]
+      })
+    }
+  } else {
+    Object.assign(v.resolve.alias, aliases);
+  }
 
   const pkg = "@voidzero-dev/vitepress-theme";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voidzero-dev/vitepress-theme",
-  "version": "3.0.2",
+  "version": "3.2.0",
   "description": "Shared VitePress theme for VoidZero projects",
   "type": "module",
   "license": "UNLICENSED",

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/FeatureFormatter.vue

@@ -0,0 +1,30 @@
+<template>
+  <section id="feature-formatter" class="wrapper grid border-t md:grid-cols-2">
+    <div class="px-5 py-6 md:p-10 flex flex-col justify-center gap-15">
+      <div class="flex flex-col gap-5">
+        <span class="text-grey text-xs font-mono uppercase tracking-wide">Formatter<span class="text-aqua"> (Alpha)</span></span>
+        <h4 class="text-white">Oxfmt: Prettier-compatible formatter</h4>
+        <p class="text-white/70 text-base max-w-[25rem] text-pretty">Enforce consistent code styles</p>
+        <ul class="checkmark-list">
+          <li>3x faster than <code class="mx-1 outline-none bg-nickel/50 text-aqua">Biome</code></li>
+          <li>35x faster than <code class="mx-1 outline-none bg-nickel/50 text-aqua">Prettier</code></li>
+          <li>Tailwind class sorting support</li>
+        </ul>
+        <a href="/docs/guide/usage/formatter" class="button w-fit mt-6">Usage Guide</a>
+      </div>
+    </div>
+    <div class="flex flex-col">
+      <div class="h-full overflow-clip flex justify-end items-center py-5 px-5 md:py-20 md:pl-10 md:pr-0">
+        <img loading="lazy" src="@assets/oxc/oxc-formatter-terminal.png" alt="Linter" class="[mask-image:linear-gradient(to_bottom,black_50%,transparent),linear-gradient(to_right,black_50%,transparent)] [mask-composite:intersect] [-webkit-mask-composite:source-in]">
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.card-bg {
+  background-image: url('@assets/oxc/oxc-feature-background.jpg');
+  background-size: cover;
+  background-position: center;
+}
+</style>

package/src/components/oxc/FeatureLinter.vue

@@ -1,18 +1,15 @@
-<script setup lang="ts">
-
-</script>
-
 <template>
-  <section id="feature-linter" class="wrapper border-t grid md:grid-cols-2">
+  <section id="feature-linter" class="wrapper grid md:grid-cols-2">
     <div class="px-5 py-6 md:p-10 flex flex-col justify-center gap-15">
       <div class="flex flex-col gap-5">
         <span class="text-grey text-xs font-mono uppercase tracking-wide">Linter</span>
-        <h4 class="text-white">Oxlint: The Rust-powered linter</h4>
+        <h4 class="text-white">Oxlint: ESLint-compatible linter</h4>
         <p class="text-white/70 text-base max-w-[25rem] text-pretty">Catch bugs before they make it to production</p>
         <ul class="checkmark-list">
           <li>50~100x faster than <code class="mx-1 outline-none bg-nickel/50 text-aqua">ESLint</code></li>
           <li>570+ rules and growing</li>
-          <li>Type-aware Linting</li>
+          <li>True type-aware Linting powered by <code class="mx-1 outline-none bg-nickel/50 text-aqua">tsgo</code></li>
+          <li>Support for <code class="mx-1 outline-none bg-nickel/50 text-aqua">ESLint</code> JS Plugins</li>
         </ul>
         <a href="/docs/guide/usage/linter" class="button w-fit mt-6">Usage Guide</a>
       </div>
@@ -31,4 +28,4 @@
   background-size: cover;
   background-position: center;
 }
-</style>
+</style>