mirror of
https://github.com/davila7/claude-code-templates.git
synced 2026-09-19 01:30:23 +08:00
Daniel Avila
5cba740dde
## Changes Made: ### 1. Modal Text Display Improvements - Increased error/warning message font size from 14px to 16px for better readability - Improved line height from 1.5 to 1.6 for better spacing - Increased margin-bottom from 4px to 8px for better visual separation ### 2. Code Preview Text Wrapping - Removed horizontal scroll (`overflow-x: auto`) from code previews - Added `white-space: normal` to prevent excessive whitespace at line start - Added `word-wrap: break-word` and `overflow-wrap: break-word` for proper text wrapping - Applied to all code preview sections: - Error line text previews - Warning line text previews - Example line text in errors - Example line text in warnings ### 3. Line Number Scroll Synchronization - Added `position: relative` to `.code-body` for better layout control - Added `overflow: hidden` and `max-height: 600px` to `.code-line-numbers` - Added `max-height: 600px` to `.code-content` - Implemented JavaScript scroll sync between line numbers and code content - Line numbers now scroll perfectly in sync with code content ### 4. Clickable Error Line Numbers - Added `cursor: pointer` to error/warning line numbers - Added "Click to see details" tooltip on error/warning lines - Implemented click event listeners on all error/warning lines - Click handler searches through validators to find matching error - Opens validation modal with correct validator details when clicked - Added hover effects with `transform: translateX(-2px)` and `cursor: help` ## User Experience Improvements: - ✅ Error messages are now larger and easier to read (16px) - ✅ Code snippets wrap naturally without horizontal scroll - ✅ No excessive whitespace at the beginning of code lines - ✅ Line numbers stay synchronized during scroll - ✅ Error line numbers are interactive and open detailed validation modals - ✅ Better visual hierarchy with improved spacing and sizing 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude <noreply@anthropic.com>
Claude Code Templates Website
This directory contains the static website for browsing and installing Claude Code configuration templates.
Features
- Dynamic Template Loading: Templates are loaded directly from the GitHub repository's
templates.jsfile - Interactive Cards: Click any template card to see the installation command
- Responsive Design: Works on desktop and mobile devices
- Framework Logos: Uses Devicon CDN for professional programming language and framework logos
- Copy to Clipboard: Easy command copying with visual feedback
Architecture
The website is built as a static site that:
- Fetches template data from
cli-tool/src/templates.jsin the GitHub repository - Parses the configuration to extract available languages and frameworks
- Generates cards dynamically with proper logos from Devicon CDN
- Updates automatically when new templates are added to the repository
Files
index.html- Main HTML structurestyles.css- Styling and responsive designscript.js- JavaScript for dynamic content loading and interactions_config.yml- Jekyll configuration for GitHub PagesREADME.md- This documentation
GitHub Pages Deployment
This website is automatically deployed to GitHub Pages when changes are pushed to the docs/ directory in the main branch.
Visit: https://davila7.github.io/claude-code-templates
Development
To test locally:
- Clone the repository
- Navigate to the
docs/directory - Serve with any static file server (e.g.,
python -m http.server 8000) - Open
http://localhost:8000
Dependencies
- Devicon CDN: For programming language and framework logos
- GitHub Raw Content: For fetching template configurations
- Modern Browser: Support for ES6+ features and Fetch API