Skip to content

feat: implement GistViewer component (#61) #84

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 7, 2025
Merged

Conversation

nullcoder
Copy link
Owner

Summary

  • Implement read-only gist viewer with vertical file layout
  • Add syntax highlighting, copy, and download functionality
  • Include comprehensive test suite with 12 passing tests

Changes

New Components

  • GistViewer (components/gist-viewer.tsx) - Main component for displaying gists
    • Vertical file layout with clear headers (GitHub-style)
    • Individual copy and download buttons per file
    • Global line numbers and word wrap toggles
    • Responsive design with mobile support
    • Dark mode support

Features

  • ✨ Syntax highlighting via CodeEditor in read-only mode
  • 📋 Copy individual files to clipboard
  • 💾 Download files individually or all at once
  • 🔢 Toggle line numbers on/off globally
  • 📝 Toggle word wrap on/off globally
  • 📱 Fully responsive design
  • ♿ Accessibility support with ARIA labels

Testing

  • 12 comprehensive tests covering all functionality
  • 100% test pass rate
  • Tests include: rendering, file navigation, copy/download, toggles

Additional Files

  • Demo page at /demo/gist-viewer
  • Added tooltip component from shadcn/ui
  • Updated documentation tracking

Screenshots

The GistViewer displays files in a clean vertical layout:

  • Each file has its own header with name and action buttons
  • Syntax highlighting matches the editor experience
  • Responsive toolbar with global settings

Test Plan

  • Run npm run test -- components/gist-viewer.test.tsx - All 12 tests pass
  • Visit /demo/gist-viewer to see component in action
  • Test copy functionality for individual files
  • Test download functionality (individual and all files)
  • Toggle line numbers and word wrap
  • Test on mobile viewport
  • Verify dark mode appearance

Closes #61

🤖 Generated with Claude Code

nullcoder and others added 2 commits June 6, 2025 21:25
- Add read-only gist viewer with vertical file layout
- Support syntax highlighting via CodeEditor in read-only mode
- Include copy to clipboard and download functionality per file
- Add global settings for line numbers and word wrap
- Implement responsive design with mobile-friendly layout
- Add comprehensive test suite (12 tests, 100% passing)
- Include demo page showcasing all features
- Use consistent GitHub-style presentation

The component displays multiple files vertically with clear headers,
individual action buttons, and proper accessibility support.

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

Co-Authored-By: Claude <noreply@anthropic.com>
@nullcoder nullcoder merged commit fdb0f87 into main Jun 7, 2025
1 check was pending
@nullcoder nullcoder deleted the feat/gist-viewer branch June 7, 2025 04:33
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.

feat: create gist viewer component
1 participant