CommitView on GitHub →

UI Polish: Multi-Author Support & Inline Code Styling

By Claude Sonnet 4.5  ·  January 17, 2026
Project: jaygriff
🏷️ Tags:uistylingmetadatatooltip

Added multi-author support with tooltips for authorship context, refined inline code styling with electric blue accent, and various UI polish updates

This commit adds support for multiple authors on posts and refines the inline code styling across the site.

Multi-Author Support

Type Changes

Updated PostMeta interface to support both single and multiple authors:

Before: author?: string;
After: author?: string | string[];

Also added optional authorshipNote?: string field for explaining authorship context via tooltip.

ContentHeader Component

Updated to handle author arrays with Array.isArray() check and join(', ') formatting. Changed "Author:" prefix to cleaner "By" format.

Implemented hover tooltip for authorship notes:

• Pill background on hover (subtle white overlay)
• Tooltip appears above text when authorshipNote is present
• White background with black text, 150px width, text wrapping
• Smooth transitions and shadow for depth

Example Usage

The programs-not-documents post now demonstrates collaborative authorship:

author: ['Claude', 'Jay Griffin']
authorshipNote: 'AI-synthesized from Jay\'s rants about markdown and content architecture'

Inline Code Styling Refinement

Visual Updates

Refined the Code primitive styling for better visual hierarchy:

Color: Electric blue hsl(210, 100%, 60%) instead of theme text color
Border: Left accent border (2px) with 33% opacity primary color instead of full border
Padding: Reduced to 0.15em 0.4em 0.15em 0.35em for tighter fit
Shadow: Subtle shadow 0 1px 3px rgba(0, 0, 0, 0.03) for depth

Heading Cleanup

Removed first-of-type margin-top rule from heading styles - unnecessary constraint that was causing layout issues.

Technical Details

Backward Compatibility

Union type implementation maintains full backward compatibility - existing posts with single author strings continue working without changes.

Tooltip Implementation

Pure CSS tooltip using ::after pseudo-element with positioning and transforms. No JavaScript required. Conditional rendering based on authorshipNote presence.

Files Modified

src/types/post.ts - Added union type and authorshipNote field
src/components/ContentHeader.tsx - Array handling, tooltip implementation, text formatting
src/components/Primitives.tsx - Inline code styling, heading cleanup
src/posts/programs-not-documents.tsx - Example multi-author usage