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
PersonCardcomponent.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 aTeamRoleunion.Mirrors the Hypernova/TWF shape so future sites can reuse utilities.
Created
src/content/people/team.jsonas the initial Dark Matter team source of truth:Seeded entries for Mark Moline, Skinner Layne, Michael Staton, and Thomas Vu.
Included
classifiersvalues 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 withSocialIcons.
2. Grouping Logic & /team Page
Implemented
src/pages/team.astro:Imports
team.jsonasTeamMember[].Implements a
groupByRolehelper that:Normalizes
classifiersto an array.Uses a
classifierMapto 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
groupedTeamDataand passes the buckets into span components.
Current spans rendered on
/team:ManagingPartnersSpan→ Mark.FoundingTeamSpan→ Skinner, Michael, Thomas (allFounding 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.astroFoundingTeamSpan.astro
Shared characteristics:
Import a common
team-spans.cssstylesheet.Render a role header (
<h1 class="role-header">…</h1>) and a.person-cardscontainer ofPersonCardinstances.
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-64andh-fullstyle constraints from the card body so height is driven by content rather than a fixed 16rem block.Replaced
flex-1+mt-autolayout 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.csstuned for Dark Matter:.team-spanuses full width andbreak-inside: avoidso role groups stay contiguous..role-headeruses a gradient fromvar(--color-accent)tovar(--color-foreground)with a left border and underline, matching the Matter theme..person-cardsusesdisplay: contentsso the outer grid controls layout.
6. Social Icons (LinkedIn, GitHub, Instagram, Medium, Substack, X)
Added SVG assets under
public/icons/:linkedin.svggithub.svginstagram.svgmedium.svgsubstack.svg
Updated
src/components/ui/SocialIcons.astro:Accepts
socialLinks: { name, href, icon? }[]and aniconSizeprop.Normalizes the platform via
(link.icon || link.name).toLowerCase().Renders inline SVG icons for:
linkedingithubinstagrammediumsubstackx/twitter(X logo path)
All icons use
currentColorfor bothfillandstrokeso 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.astroSocialPlatformunion to includemediumandxso TypeScript recognises these platforms when mapping social links.
Files Changed Summary (Staged)
New
src/types/team.ts— sharedTeamMember/TeamRole/SocialLinkdefinitions 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 usingcurrentColorand supportsx/twitter.src/components/team/PersonCard.astro— updated layout to be content-height driven and expanded social platform support (medium,x).src/pages/team.astro— addedgroupByRolehelper, 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-patternspackage.