feat: implement ChatGPT document theme for compact interactive reading (Issue #165)

Add comprehensive ChatGPT-style document theme optimized for modern interactive content:

**Theme Features:**
- Inter font family for clean, modern sans-serif typography
- Compact 580px width for chat-like reading experience
- High contrast (#1f1f1f text on white background)
- ChatGPT signature green (#10a37f) accent color
- Tight 1.5 line height for efficient information density
- Modern 8px border radius for contemporary feel
- Optimized code block styling with proper monospace fonts

**Technical Implementation:**
- Added 'chatgpt' theme to LAYERED_THEMES system (document scope)
- Full backward compatibility with TEMPLATE_STYLES and LEGACY_THEME_MAPPING
- CLI integration: `markitect md-render --theme chatgpt`
- Proper theme layering support (combines with light/dark modes)

**Quality Assurance:**
- Comprehensive 9-test suite covering all functionality (9/9 passing)
- Verified HTML generation and CSS styling
- Tested CLI integration and theme combinations
- Full compatibility with existing theme architecture

Successfully closes Issue #165 with compact, readable layout optimized for
interactive content following ChatGPT's interface design principles.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-10 11:04:51 +01:00
parent 32d26e7648
commit afe6bcf6fe
2 changed files with 287 additions and 1 deletions

View File

@@ -201,6 +201,32 @@ LAYERED_THEMES = {
'blockquote_color': '#666666'
}
},
'chatgpt': {
'scope': 'document',
'properties': {
'font_family': 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
'heading_font_family': 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
'max_width': '580px',
'body_background': '#ffffff',
'body_color': '#1f1f1f',
'heading_color': '#1f1f1f',
'text_align': 'left',
'line_height': '1.5',
'heading_style': 'minimal',
'accent_color': '#10a37f',
'link_color': '#10a37f',
'link_hover_color': '#0d8c6d',
'code_background': '#f7f7f7',
'code_color': '#1f1f1f',
'code_font_family': '"SF Mono", Monaco, Inconsolata, "Roboto Mono", Consolas, "Courier New", monospace',
'font_size': '15px',
'heading_margin': '1.2em 0 0.6em 0',
'paragraph_margin': '1em 0',
'border_radius': '8px',
'blockquote_border': '#10a37f',
'blockquote_color': '#6b7280'
}
},
# Branding Themes - Company/personal styling
'corporate': {
@@ -227,7 +253,8 @@ LEGACY_THEME_MAPPING = {
'github': ['light', 'standard', 'github'],
'dark': ['dark', 'standard', 'basic'],
'academic': ['light', 'standard', 'academic'],
'substack': ['light', 'standard', 'substack']
'substack': ['light', 'standard', 'substack'],
'chatgpt': ['light', 'standard', 'chatgpt']
}
# Keep TEMPLATE_STYLES for backward compatibility in tests
@@ -256,6 +283,11 @@ TEMPLATE_STYLES = {
'body_color': '#333333',
'font_family': 'Spectral, Georgia, "Times New Roman", serif',
'max_width': '680px'
},
'chatgpt': {
'body_color': '#1f1f1f',
'font_family': 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
'max_width': '580px'
}
}