UI Polish: Multi-Author Support & Inline Code Styling
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