Aura Bento Cards Widget - GitAscii API

The Aura Bento Cards widget combines a 260x260 developer portrait card with an ambient multi-row tech stack gallery with customizable display modes (both, logo, or name).

Configuration Schema

export interface CodewebRetroGridConfig {
  title?: string                              // Header label (default: 'Tech Stack')
  displayMode?: 'both' | 'logo' | 'name'       // Pill display mode (default: 'both')
  sourceType?: 'avatar' | 'url' | 'upload'     // Image source type
  imageUrl?: string                           // Custom avatar URL
  uploadedImageData?: string                  // Base64 image data
  devCardLink?: string                        // Clickable link for avatar card
  userName?: string                           // Name overlay string
  userHandle?: string                         // Handle overlay string
  selectedTechs?: string[]                    // Array of tech keys to display
  staticMode?: boolean                        // Disables glowing orb animations
}

'both' | 'logo' | 'name'

default:"both"

both: Displays official skill icon + title text.
logo: Compact 32px circular icon badges only.
name: Text-only pill badges.

Real Code Example

import { renderWidgetSvg, WidgetInstance } from '@/engine'

const bentoCardsWidget: WidgetInstance = {
  instanceId: 'bento_cards_01',
  widgetId: 'codeweb-retro-grid',
  name: 'Aura Bento Cards',
  position: { x: 0, y: 0 },
  size: { width: 800, height: 260 },
  config: {
    title: 'CORE STACK & TOOLS',
    displayMode: 'both',
    selectedTechs: ['ts', 'react', 'nextjs', 'nodejs', 'tailwind', 'postgres', 'docker', 'git'],
  },
  locked: false,
  visible: true,
  zIndex: 1,
}

const svgOutput = renderWidgetSvg(bentoCardsWidget, profileData, globalStyles)

⌘I