Git .gitattributes Line Ending Normalizer

Overview

This single-file web application serves as a utility tool for developers to generate and manage .gitattributes configuration files. It provides a visual interface to define line-ending strategies (LF, CRLF, input, auto) for various file types and globs, ensuring repository consistency across cross-platform teams.

Key Features

• Live Configuration Generator: As users toggle options, the .gitattributes content updates in real-time.
• Glob Pattern Presets: Dropdown presets for common file types (code files, binaries, documentation, etc.).
• Strategy Selector: Easy UI to switch between text, text=auto, text eol=lf, text eol=crlf, and binary flagging.
• Clipboard Integration: One-click "Copy to Clipboard" functionality.
• Syntax Validation Helper: Visual indicators if the generated file content is empty or malformed.
• Responsive Design: Mobile-first layout that works on tablets and desktop browsers.

Technical Architecture

• Architecture: Single-file HTML5, CSS3, and Vanilla JavaScript.
• Constraints Compliance:
  • No Storage: No localStorage or sessionStorage. All state is volatile (in-memory JS variables).
  • No Popups: All interactions (e.g., "Copied to clipboard" notifications) occur via custom UI toast components.
  • No External Frameworks: Pure Vanilla JS. CDN links allowed for CSS (e.g., Tailwind) and Icons (e.g., FontAwesome).
• Sandboxed Compatibility: Designed for null origin iframe environments. Avoids any features requiring persistent cookies or origin-restricted APIs.

UI/UX Layout

• Header: Clean, minimalist title with a short description.
• Main Content:
  • Left Column: Control Panel. Input fields for pattern (e.g., *.js), dropdown for line ending style, and "Add Rule" button.
  • Right Column (Desktop) / Bottom (Mobile): The Generated Content view (formatted code block).
• Visual Aesthetic:
  • Palette: Soft white background (#FFFFFF), light gray utility borders (#E5E7EB), crisp typography (Inter or system font stack), primary action buttons in a professional blue (#2563EB).
  • Transitions: Smooth fade-ins for added rows; subtle box-shadow scaling on interaction (hover/active).

Developer Instructions

1. State Management: Use a simple JavaScript object array to store rules (e.g., [{pattern: '*.js', strategy: 'text eol=lf'}]). Rerender the output section whenever the array changes.
2. Security: Sanitize all inputs to prevent XSS. Treat the content as raw text before display.
3. Formatting: Ensure the output uses proper indentation and spacing appropriate for a .gitattributes file.
4. Accessibility: Ensure all inputs have associated <label> tags or aria-labels.
5. No Persistent Data: Strictly enforce the "in-memory only" rule. If the user refreshes, the state resets (this is intended behavior for this utility).