Lossless Changelog
product

Team Page, Person Cards, and Social Icons

First team page version with data-driven TeamMember model, role-based spans, and inline SVG social icons.

Changelog - 2025-12-09 (#1)

Dark Matter Site: Team Page, Person Cards, and Social Icons

Overview

Implemented the first version of the Dark Matter team page following the shared TeamPagesSpecification.md pattern, including:

  • A data-driven team model (TeamMember) backed by JSON content.

  • Role-based spans for Managing Partners and Founding Team.

  • A simplified but theme-aware PersonCard component.

  • New inline SVG social icons (LinkedIn, GitHub, Instagram, Medium, Substack, X) that inherit the surrounding text color.

This gives Dark Matter a reusable team presentation pattern aligned with Hypernova/TWF, but styled for the Matter theme.


Changes by Area

1. Team Data Model & Content

  • Added src/types/team.ts:

    • Defines SocialLink, TeamMember, TeamSectionProps, and a TeamRole union.

    • Mirrors the Hypernova/TWF shape so future sites can reuse utilities.

  • Created src/content/people/team.json as the initial Dark Matter team source of truth:

    • Seeded entries for Mark Moline, Skinner Layne, Michael Staton, and Thomas Vu.

    • Included classifiers values such as "Managing Partner, Team" and "Founding Partner, Team" to drive role grouping.

    • Added social links (LinkedIn, X, GitHub, Medium) using a { name, href, icon } structure compatible with SocialIcons.

2. Grouping Logic & /team Page

  • Implemented src/pages/team.astro:

    • Imports team.json as TeamMember[].

    • Implements a groupByRole helper that:

      • Normalizes classifiers to an array.

      • Uses a classifierMap to map values like "Managing Partner", "Founding Principal", and "Founding Partner" into internal buckets (managingPartners, foundingTeam).

      • Ensures each person appears in exactly one primary span on the page.

    • Computes groupedTeamData and passes the buckets into span components.

  • Current spans rendered on /team:

    • ManagingPartnersSpan → Mark.

    • FoundingTeamSpan → Skinner, Michael, Thomas (all Founding Partner-classified profiles).

3. Layout & Spans

  • Added src/layouts/TeamLayout.astro:

    • Wraps team content in BaseThemeLayout.

    • Provides a centered main container (max-w-5xl) with a responsive grid (grid-cols-1 → md:grid-cols-2).

    • Sets sensible defaults for <title> / description (Our Team | Dark Matter).

  • Added span components in src/components/team/:

    • ManagingPartnersSpan.astro

    • FoundingTeamSpan.astro

  • Shared characteristics:

    • Import a common team-spans.css stylesheet.

    • Render a role header (<h1 class="role-header">…</h1>) and a .person-cards container of PersonCard instances.

4. Person Card UX & Height Fixes

  • Created src/components/team/PersonCard.astro:

    • Displays:

      • Square image (lazy-loaded) with hover scale.

      • Name + role centered.

      • Truncated bio (word-based, with a line clamp) to keep cards compact.

      • Optional social icons row at the bottom.

    • Uses Matter theme tokens for background, border, and text colors.

  • Fixed card height behavior to avoid “cards into the abyss”:

    • Removed h-64 and h-full style constraints from the card body so height is driven by content rather than a fixed 16rem block.

    • Replaced flex-1 + mt-auto layout with a simpler column stack so the social row sits snugly under the bio.

    • Result: all cards shrink-wrap more closely to their content while preserving consistent styling.

5. Shared Span Styles

  • Added src/styles/team-spans.css tuned for Dark Matter:

    • .team-span uses full width and break-inside: avoid so role groups stay contiguous.

    • .role-header uses a gradient from var(--color-accent) to var(--color-foreground) with a left border and underline, matching the Matter theme.

    • .person-cards uses display: contents so the outer grid controls layout.

6. Social Icons (LinkedIn, GitHub, Instagram, Medium, Substack, X)

  • Added SVG assets under public/icons/:

    • linkedin.svg

    • github.svg

    • instagram.svg

    • medium.svg

    • substack.svg

  • Updated src/components/ui/SocialIcons.astro:

    • Accepts socialLinks: { name, href, icon? }[] and an iconSize prop.

    • Normalizes the platform via (link.icon || link.name).toLowerCase().

    • Renders inline SVG icons for:

      • linkedin

      • github

      • instagram

      • medium

      • substack

      • x / twitter (X logo path)

    • All icons use currentColor for both fill and stroke so they automatically inherit the link’s text color and theme hover states.

    • Maintains existing pill-style button chrome (border, subtle background, hover transitions).

  • Updated PersonCard.astro SocialPlatform union to include medium and x so TypeScript recognises these platforms when mapping social links.


Files Changed Summary (Staged)

New

  • src/types/team.ts — shared TeamMember/TeamRole/SocialLink definitions for Dark Matter.

  • src/content/people/team.json — initial Dark Matter team roster and metadata.

  • src/layouts/TeamLayout.astro — team-specific layout wrapper reusing the Matter theme shell.

  • src/styles/team-spans.css — shared span styles (role headers, container behavior) for the team page.

  • src/components/team/PersonCard.astro — reusable team member card.

  • src/components/team/ManagingPartnersSpan.astro — span component for managing partners.

  • src/components/team/FoundingTeamSpan.astro — span component for founding team members.

  • public/icons/linkedin.svg — LinkedIn icon.

  • public/icons/github.svg — GitHub icon.

  • public/icons/instagram.svg — Instagram icon.

  • public/icons/medium.svg — Medium icon.

  • public/icons/substack.svg — Substack icon.

Modified

  • src/components/ui/SocialIcons.astro — now renders inline SVG icons for common platforms using currentColor and supports x/twitter.

  • src/components/team/PersonCard.astro — updated layout to be content-height driven and expanded social platform support (medium, x).

  • src/pages/team.astro — added groupByRole helper, wired spans, and mapped classifiers (Managing Partner, Founding Partner, Founding Principal, Founding Team) to internal buckets.


Notes / Follow-Ups

  • The current role taxonomy covers Managing Partners and Founding Team; additional spans (e.g., Advisory Board, Fellows) can be added later using the same pattern.

  • Team content is still placeholder text; bios, roles, and images should be revised with real copy before launch.

  • Once stabilized, the Dark Matter implementation can be used as a reference for extracting a shared @knots/team-patterns package.