Initial commit: Text Corruptor PWA
Features: - Zalgo text generator with adjustable intensity (1-10) - Real-time text corruption as you type - Click-to-copy functionality with visual feedback - Progressive Web App with offline support - Responsive design for mobile and desktop - Dark theme with glitch-inspired aesthetics Technical implementation: - Pure JavaScript implementation (no frameworks) - Service Worker for offline functionality - PWA manifest for installability - Python development server - Comprehensive linting setup (ESLint, Prettier, Black, Pylint) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
commit
44a2ac4cbd
23 changed files with 1672 additions and 0 deletions
114
CLAUDE.md
Normal file
114
CLAUDE.md
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
# CLAUDE.md
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||
|
||||
## Project Overview
|
||||
|
||||
Text Corruptor is a Progressive Web App (PWA) that generates zalgo text (corrupted/glitched text using Unicode combining characters). The app features real-time text corruption with adjustable intensity and click-to-copy functionality.
|
||||
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
zalgo/
|
||||
├── app/ # Main application directory (served as document root)
|
||||
│ ├── index.html # Main HTML page
|
||||
│ ├── zalgo.js # Zalgo text generation logic
|
||||
│ ├── app.js # Main application logic and PWA registration
|
||||
│ ├── styles.css # Application styles
|
||||
│ ├── sw.js # Service worker for offline functionality
|
||||
│ ├── manifest.json # PWA manifest
|
||||
│ ├── icons/ # PWA icons (SVG placeholders)
|
||||
│ ├── create-icons.js # Node.js script to generate PNG icons
|
||||
│ └── generate-icons.html # Browser-based icon generator
|
||||
├── server.py # Development server (serves app/ as root)
|
||||
├── package.json # Node dependencies and scripts
|
||||
├── bun.lockb # Bun lockfile
|
||||
├── .eslintrc.json # ESLint configuration
|
||||
└── .prettierrc # Prettier configuration
|
||||
```
|
||||
|
||||
## Development Commands
|
||||
|
||||
### Running the Application
|
||||
```bash
|
||||
# Start development server (serves on http://localhost:8000/)
|
||||
python3 server.py
|
||||
|
||||
# Or using the npm script
|
||||
bun run serve
|
||||
```
|
||||
|
||||
### Code Quality and Linting
|
||||
```bash
|
||||
# Lint JavaScript files
|
||||
bun run lint:js
|
||||
|
||||
# Lint and auto-fix JavaScript
|
||||
bun run lint:js:fix
|
||||
|
||||
# Format all code with Prettier
|
||||
bun run format
|
||||
|
||||
# Check formatting without changes
|
||||
bun run check
|
||||
|
||||
# Lint Python code
|
||||
black server.py
|
||||
pylint server.py
|
||||
```
|
||||
|
||||
### Generating Icons
|
||||
```bash
|
||||
# Install canvas package first (optional, for PNG generation)
|
||||
bun add canvas
|
||||
|
||||
# Generate PNG icons programmatically
|
||||
node app/create-icons.js
|
||||
|
||||
# Or open app/generate-icons.html in browser and manually save icons
|
||||
```
|
||||
|
||||
## Architecture and Key Components
|
||||
|
||||
### Zalgo Text Generation (zalgo.js)
|
||||
- **ZalgoGenerator class**: Core text corruption engine
|
||||
- Uses Unicode combining diacritical marks (above, middle, below)
|
||||
- Intensity scale 1-10 controls corruption amount
|
||||
- `generate()`: Creates zalgo text from input
|
||||
- `clean()`: Removes corruption from text
|
||||
|
||||
### Application Logic (app.js)
|
||||
- Real-time text corruption as user types
|
||||
- Click-to-copy functionality with visual feedback
|
||||
- Keyboard shortcuts (Ctrl+K to clear)
|
||||
- PWA installation handling
|
||||
- Service worker registration
|
||||
|
||||
### PWA Implementation
|
||||
- **Service Worker (sw.js)**: Enables offline functionality with cache-first strategy
|
||||
- **Manifest (manifest.json)**: PWA configuration for installability
|
||||
- Caches all essential files for offline use
|
||||
- Automatic cache cleanup on update
|
||||
|
||||
### Styling (styles.css)
|
||||
- Dark theme with glitch-inspired aesthetics
|
||||
- Responsive design for mobile and desktop
|
||||
- CSS animations for glitch effects
|
||||
- Print-friendly styles
|
||||
|
||||
## Deployment Notes
|
||||
|
||||
- The `app/` directory should be served as the document root
|
||||
- All paths in the app are relative to assume `app/` is the root
|
||||
- Service worker requires HTTPS in production (except localhost)
|
||||
- Icons are currently SVG placeholders; generate PNGs for production
|
||||
|
||||
## Testing Checklist
|
||||
|
||||
When making changes, ensure:
|
||||
1. Text corruption works with various Unicode characters
|
||||
2. Copy functionality works on both desktop and mobile
|
||||
3. PWA installs correctly
|
||||
4. Offline mode functions properly
|
||||
5. Responsive design works on all screen sizes
|
||||
6. All linting passes (JavaScript, Python, HTML validation)
|
||||
Loading…
Add table
Add a link
Reference in a new issue