Skip to content

Improve article summary UI and accessibility#38

Merged
jonocodes merged 2 commits intodevfrom
claude/fix-summary-sync-display-TIvYH
Jan 30, 2026
Merged

Improve article summary UI and accessibility#38
jonocodes merged 2 commits intodevfrom
claude/fix-summary-sync-display-TIvYH

Conversation

@jonocodes
Copy link
Owner

Summary

Enhanced the article summary feature with improved UI/UX, better theme support, and accessibility improvements. Added a "View Summary" link next to the reading time and refined the summary drawer styling to properly respect the application's theme.

Key Changes

  • Summary Link Injection: Added a new effect that injects a "View Summary" link next to the reading time element when a summary exists, allowing users to quickly access the summary
  • Theme Support: Applied proper theme colors (background.paper, text.primary, text.secondary) throughout the summary drawer to ensure consistent appearance in both light and dark modes
  • Enhanced Markdown Styling: Improved styling for markdown elements within the summary:
    • Added proper color inheritance for all text elements
    • Styled code blocks with background color and padding
    • Added blockquote styling with left border and secondary text color
    • Ensured links use the primary theme color
  • Visual Polish: Updated the summary icon to use primary color and improved overall spacing and typography

Implementation Details

  • The summary link is injected via DOM manipulation with a 100ms timeout to ensure the reading time element is rendered
  • The injection includes a guard to prevent duplicate links using element IDs
  • All theme colors use MUI's theme system for consistency and automatic dark mode support
  • The summary drawer now properly inherits theme colors at multiple levels (container, content box, and individual elements)

https://claude.ai/code/session_015SJEBEcBbjPrzfHCfTiTTc

- Add "View Summary" link next to reading time when summary exists
  (displays regardless of summarization settings)
- Fix summary drawer colors for proper theme compatibility using
  MUI theme tokens (background.paper, text.primary, etc.)
- Improved markdown styling in summary drawer (code, blockquotes, links)

https://claude.ai/code/session_015SJEBEcBbjPrzfHCfTiTTc
@netlify
Copy link

netlify bot commented Jan 30, 2026

Deploy Preview for savrlist ready!

Name Link
🔨 Latest commit b9e1e3b
🔍 Latest deploy log https://app.netlify.com/projects/savrlist/deploys/697c298c152f85000882d1d7
😎 Deploy Preview https://deploy-preview-38--savrlist.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@jonocodes jonocodes marked this pull request as ready for review January 30, 2026 03:30
@netlify
Copy link

netlify bot commented Jan 30, 2026

Deploy Preview for savrdev ready!

Name Link
🔨 Latest commit b9e1e3b
🔍 Latest deploy log https://app.netlify.com/projects/savrdev/deploys/697c298c1203e00008d25a91
😎 Deploy Preview https://deploy-preview-38--savrdev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Changed approach from DOM manipulation to HTML string injection
via useMemo. The link is now part of the HTML content passed to
dangerouslySetInnerHTML, so it persists across re-renders.

Click handling uses document event listener to intercept clicks
on the injected link element.

https://claude.ai/code/session_015SJEBEcBbjPrzfHCfTiTTc
@jonocodes jonocodes merged commit 69579a3 into dev Jan 30, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants