Component

Pipeline Deal Card Components & Design System Documentation

DealCard--Micro and DealCard--Micro--Confidential components for public and authenticated pipeline views.

Claude
Claude Claude
Deal-CardsPipelineDesign-SystemAuthenticationSSR

Changelog - 2025-12-18 (#3)

Dark Matter Site: Pipeline Deal Card Components & Design System Documentation

Overview

Extracted reusable deal card components from pipeline pages and created comprehensive design system documentation. This work componentizes how pipeline companies are displayed across public and confidential views.

Key deliverables:

  • DealCard--Micro: Compact card for public pipeline grids with logo, description, and sector tag
  • DealCard--Micro--Confidential: Extended card for authenticated views with memo links, action buttons, and contact information
  • Pipeline Page Variants: New variant pages using the componentized approach
  • Design System Deals Page: /design-system/deals documenting both components with live examples
  • Design System Hub Update: Added Deals to the navigation index

Changes by Area

1. DealCard--Micro Component (src/components/deals/DealCard--Micro.astro)

Created a compact deal card for public pipeline displays:

Props:

Prop Type Required Description
name string Yes Company name
description string No Short blurb about the company
logoLightMode string Yes Path to light mode logo
logoDarkMode string No Path to dark mode logo
href string | null No Link to company site (renders as <div> if null)
sector string No Industry/sector tag
accentColor StageColor No Stage indicator color
class string No Additional CSS classes

Stage Colors:

  • amber — Due Diligence stage
  • blue — Initial Review stage
  • green — Term Sheet / Committed
  • purple — Portfolio company
  • cyan — Watching / Backlog

Styling:

  • Logo container: 64x64px with dark/light mode switching
  • Name: text-lg bold, transitions to accent color on hover
  • Description: text-sm with 60% opacity, 2-line clamp
  • Sector badge: Small uppercase tag with accent-colored text
  • Card: Subtle border with hover lift effect (translateY(-2px))
  • Conditional rendering: <a> tag when href provided, <div> otherwise

Theme Support: Dark and light modes via :global([data-mode="..."]) selectors.

2. DealCard--Micro--Confidential Component (src/components/deals/DealCard--Micro--Confidential.astro)

Created an extended deal card for confidential/authenticated pipeline views:

Props:

Prop Type Required Description
name string Yes Company name
description string No Short blurb about the company
logo string Yes Path to company logo
companySiteUrl string | null No External link to company website
memoSlug string | null No Slug for internal investment memo
sector string No Industry/sector tag
contacts PersonData[] No Array of contact objects
accentColor StageColor No Stage indicator color
class string No Additional CSS classes

PersonData Interface:

interface PersonData {
  name: string;
  role: string;
}

Additional Features (vs public card):

  • Action Buttons: "View Memo" and "Visit Site" buttons when URLs available
  • Contacts Section: Lists contact persons with name and role
  • Larger Logo: 48x48px logo display
  • More Padding: Increased internal spacing for content density

Styling:

  • Header: Logo + name row with sector badge
  • Description: text-sm prose block
  • Action buttons: Ghost-style with accent color hover states
  • Contacts: Bordered section with text-xs metadata
  • SVG icons: External link and document icons for visual cues

3. Pipeline Variant Pages

Public Pipeline (src/pages/pipeline/variant-1.astro)

New page using DealCard--Micro component:

  • Imports pipeline data from @content/pipeline/pipeline-companies.json
  • Groups companies by stage: Due Diligence (amber) and Initial Review (blue)
  • Responsive grid: md:grid-cols-2 lg:grid-cols-3
  • Passes stage-appropriate accentColor to each card
  • Link to confidential pipeline for authenticated users

Confidential Pipeline (src/pages/pipeline/confidential/variant-1.astro)

SSR page using DealCard--Micro--Confidential component:

  • export const prerender = false for server-side rendering
  • Protected by middleware (redirects unauthenticated users to /portfolio-gate)
  • Resolves latest memo slugs via resolveLatestMemos() helper
  • Enhances pipeline data with resolved memo slugs
  • Shows AuthenticationStatus component
  • Groups by stage with colored indicators and badges

Memo Resolution Pattern:

const companyKeys = pipelineData
  .map(c => c.memoCompanyKey)
  .filter((key): key is string => key !== null);

const memoSlugs = await resolveLatestMemos(companyKeys);

const enhancedPipelineData = pipelineData.map(company => ({
  ...company,
  resolvedMemoSlug: company.memoCompanyKey
    ? memoSlugs.get(company.memoCompanyKey) || null
    : null,
}));

4. Design System Deals Page (src/pages/design-system/deals.astro)

Created comprehensive documentation page at /design-system/deals:

Sections:

  1. DealCard--Micro Documentation

    • Component description and file path
    • Props table with types and descriptions
    • Theme support badges (Dark/Light)
    • Styling notes
    • Live examples using real pipeline data
    • Usage code snippets

  2. DealCard--Micro--Confidential Documentation

    • Extended props table including contacts and memoSlug
    • Action buttons explanation
    • Live examples with contacts data
    • Usage code for confidential context

  3. Accent Color Reference

    • Visual grid showing all 5 stage colors
    • Color names with semantic meanings

Live Data Integration:

  • Imports actual pipeline data from JSON
  • Filters to show 3 Due Diligence examples
  • Demonstrates real-world component usage

5. Design System Hub Update (src/pages/design-system/index.astro)

Added Deals to the navigation hub:

{
  title: 'Deals',
  href: '/design-system/deals',
  description: 'Pipeline company cards for public and confidential deal flow displays.',
  components: ['DealCard--Micro', 'DealCard--Micro--Confidential'],
  category: 'Components',
},

Files Changed Summary

New

Components:

  • src/components/deals/DealCard--Micro.astro — Compact card for public pipeline grids
  • src/components/deals/DealCard--Micro--Confidential.astro — Extended card with memo links and contacts

Pages:

  • src/pages/pipeline/variant-1.astro — Public pipeline using DealCard--Micro
  • src/pages/pipeline/confidential/variant-1.astro — Confidential pipeline using DealCard--Micro--Confidential

Design System:

  • src/pages/design-system/deals.astro — Component documentation with live examples

Modified

  • src/pages/design-system/index.astro — Added Deals to navigation hub

Technical Details

Conditional Link Rendering

Both card components support optional linking. When no URL is provided, the card renders as a non-interactive <div>:

{href ? (
  <a href={href} class:list={['deal-card-micro', className]} target="_blank" rel="noopener noreferrer">
    <div class="deal-card-inner">
      <!-- content -->
    </div>
  </a>
) : (
  <div class:list={['deal-card-micro', className]}>
    <div class="deal-card-inner">
      <!-- content -->
    </div>
  </div>
)}

This pattern prevents broken links and maintains visual consistency.

Dark/Light Logo Switching

The public card implements automatic logo switching based on theme:

<div class="logo-container">
  {logoDarkMode && (
    <img src={logoDarkMode} alt="" class="logo-dark" />
  )}
  <img src={logoLightMode} alt="" class={logoDarkMode ? 'logo-light' : ''} />
</div>
.logo-dark { display: block; }
.logo-light { display: none; }

:global([data-mode="light"]) .logo-dark { display: none; }
:global([data-mode="light"]) .logo-light { display: block; }

SSR Authentication Pattern

The confidential variant page uses server-side rendering with middleware protection:

---
export const prerender = false;

const accessCookie = Astro.cookies.get('universal_portfolio_access');
const authLevel = accessCookie?.value ? 'general-passcode' : 'unauthenticated';
---

The middleware intercepts requests to /pipeline/confidential/* and redirects unauthenticated users to the gate page.

Stage Color System

The accent color type provides consistent visual language across pipeline stages:

export type StageColor = 'amber' | 'blue' | 'green' | 'purple' | 'cyan';

CSS custom properties map colors to semantic values:

  • --accent-amber: #f59e0b (Due Diligence)
  • --accent-blue: #3b82f6 (Initial Review)
  • --accent-green: #22c55e (Committed)
  • --accent-purple: #a855f7 (Portfolio)
  • --accent-cyan: #06b6d4 (Watching)

Notes / Follow-Ups

  1. Original Pages Preserved: The existing pipeline/index.astro and pipeline/confidential/index.astro pages remain unchanged. The new variant pages allow side-by-side comparison.

  2. Component Extraction Candidate: These deal card components are good candidates for extraction to @knots/astro package for use in other investment-focused sites.

  3. Pipeline Data Schema: The components expect data from pipeline-companies.json with these fields:

    • conventionalName: Display name
    • blurbShortTxt: Description
    • logoLightMode / logoDarkMode: Logo paths
    • urlToCompanySite: External URL
    • memoCompanyKey: Key for memo resolution
    • stage: Pipeline stage identifier
    • sector: Industry category
    • listOfPeopleData: Contact persons array

  4. Memo Resolution: The confidential page uses resolveLatestMemos() from @lib/github-content to dynamically resolve memo slugs from company keys.

  5. Access at:

    • Public: /pipeline/variant-1
    • Confidential: /pipeline/confidential/variant-1 (requires authentication)
    • Documentation: /design-system/deals