Ole-Morten Duesund
4e58281d51
Changes: - Renamed from "Text Corruptor" to "GlitchCraft" - New slogan: "Artisanal text corruption, served fresh!" - Updated server to support both IPv4 and IPv6 (dual-stack) - Server now listens on all interfaces (::) instead of just localhost - Updated all references in code and documentation The new name reflects both the glitch aesthetic and the craftsmanship of creating beautifully corrupted text, with a playful tone. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
114 lines
No EOL
3.6 KiB
Markdown
114 lines
No EOL
3.6 KiB
Markdown
# CLAUDE.md
|
|
|
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
|
|
|
## Project Overview
|
|
|
|
GlitchCraft 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/ and [::]: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) |