Ole-Morten Duesund
44a2ac4cbd
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>
96 lines
3.4 KiB
JavaScript
96 lines
3.4 KiB
JavaScript
/**
|
|
* Node.js script to generate PWA icons programmatically
|
|
* Run with: node create-icons.js
|
|
* Requires: npm install canvas
|
|
*/
|
|
|
|
/* eslint-env node */
|
|
/* eslint-disable no-undef */
|
|
|
|
const fs = require('fs');
|
|
const path = require('path');
|
|
|
|
// Check if we're in a browser or Node.js environment
|
|
const isBrowser = typeof window !== 'undefined';
|
|
|
|
if (!isBrowser) {
|
|
// Node.js environment - use canvas package
|
|
try {
|
|
const { createCanvas } = require('canvas');
|
|
|
|
// Icon sizes needed for PWA
|
|
const sizes = [72, 96, 128, 144, 152, 192, 384, 512];
|
|
|
|
// Create icons directory if it doesn't exist
|
|
const iconsDir = path.join(__dirname, 'icons');
|
|
if (!fs.existsSync(iconsDir)) {
|
|
fs.mkdirSync(iconsDir, { recursive: true });
|
|
}
|
|
|
|
const createIcon = function (size) {
|
|
const canvas = createCanvas(size, size);
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
// Background gradient (solid color fallback for canvas)
|
|
ctx.fillStyle = '#1a1a2e';
|
|
ctx.fillRect(0, 0, size, size);
|
|
|
|
// Center circle
|
|
const centerX = size / 2;
|
|
const centerY = size / 2;
|
|
const radius = size * 0.35;
|
|
|
|
ctx.beginPath();
|
|
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
|
|
ctx.fillStyle = '#00ff88';
|
|
ctx.fill();
|
|
|
|
// Letter "T"
|
|
ctx.font = `bold ${size * 0.4}px Arial`;
|
|
ctx.fillStyle = '#0f0f14';
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'middle';
|
|
ctx.fillText('T', centerX, centerY);
|
|
|
|
return canvas;
|
|
};
|
|
|
|
// Generate all icons
|
|
sizes.forEach(size => {
|
|
const canvas = createIcon(size);
|
|
const buffer = canvas.toBuffer('image/png');
|
|
const filename = path.join(iconsDir, `icon-${size}.png`);
|
|
fs.writeFileSync(filename, buffer);
|
|
console.log(`Created ${filename}`);
|
|
});
|
|
|
|
console.log('All icons created successfully!');
|
|
} catch (error) {
|
|
console.log('Canvas package not installed. Creating placeholder icons instead...');
|
|
|
|
// Fallback: Create placeholder SVG icons
|
|
const sizes = [72, 96, 128, 144, 152, 192, 384, 512];
|
|
const iconsDir = path.join(__dirname, 'icons');
|
|
|
|
if (!fs.existsSync(iconsDir)) {
|
|
fs.mkdirSync(iconsDir, { recursive: true });
|
|
}
|
|
|
|
sizes.forEach(size => {
|
|
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
|
|
<rect width="${size}" height="${size}" fill="#1a1a2e"/>
|
|
<circle cx="${size / 2}" cy="${size / 2}" r="${size * 0.35}" fill="#00ff88"/>
|
|
<text x="${size / 2}" y="${size / 2}" font-family="Arial" font-size="${size * 0.4}" font-weight="bold" text-anchor="middle" dominant-baseline="middle" fill="#0f0f14">T</text>
|
|
</svg>`;
|
|
|
|
const filename = path.join(iconsDir, `icon-${size}.svg`);
|
|
fs.writeFileSync(filename, svg);
|
|
console.log(`Created ${filename} (SVG placeholder)`);
|
|
});
|
|
|
|
console.log('\nNote: SVG placeholders created. For PNG icons, install canvas package:');
|
|
console.log('npm install canvas');
|
|
}
|
|
} else {
|
|
console.log('This script should be run in Node.js, not in a browser.');
|
|
}
|