hit-counter/node/src/hit-counter.ts

import { type Database as DB } from 'better-sqlite3';
import { type Statement } from 'better-sqlite3';
import Database from 'better-sqlite3';
// import sharp for images
import sharp, { FormatEnum, AvailableFormatInfo, Sharp, Metadata } from 'sharp';
import * as fs from 'fs';
import * as https from 'https';

// Map file extensions to sharp formats
const imageFormatMap: { [key: string]: keyof FormatEnum | AvailableFormatInfo } = {
    jpg: 'jpeg',
    jpeg: 'jpeg',
    png: 'png',
    webp: 'webp',
    tiff: 'tiff',
    gif: 'gif'
};

// no need for third party library
const mimeTypeMap: { [key: string]: string } = {
    jpg: 'image/jpeg',
    jpeg: 'image/jpeg',
    png: 'image/png',
    webp: 'image/webp',
    tiff: 'image/tiff',
    gif: 'image/gif'
};

interface HitResult {
    hits: number;
}

interface RGBColor {
    r: number;
    g: number;
    b: number;
}

export interface Type<T> extends Function { new (...args: any[]): T; }


interface HitCounterRenderer {
    render(): Promise<any>;
}

function fileExt(file: string): string {    
    const fileExt = file.split('.').pop();
    if (!fileExt) {
        throw new Error('Invalid file extension');
    }
    return fileExt.toLowerCase();
}


function extToFormat(ext: string): keyof FormatEnum | AvailableFormatInfo {
    const format = imageFormatMap[ext];
    if (!format) {
        throw new Error('Unsupported file extension');
    }
    return format;
}

/**
 * Determine whether the given `path` is a http(s) URL. This method
 * accepts a string value and a URL instance.
 * 
 * inspiration:
 * Marcus Pöhls
 * https://futurestud.io/tutorials/node-js-check-if-a-path-is-a-file-url
 *
 * @param {String|URL} path
 *
 * @returns {Boolean}
 */
function isWebURI(path) {  
    // `path` is neither a string nor a URL -> early return
    if (typeof path !== 'string' && !(path instanceof URL)) {
        return false
    }
  
    try {
        const url = new URL(path)
  
        return url.protocol === 'http:' || url.protocol === 'https:'
    } catch (error) {
        return false
    }
}

class BaseHitCounterRenderer implements HitCounterRenderer {
    protected counter: HitCounter;
    protected config: HitCounterConfig;

    constructor(counter: HitCounter, config: HitCounterConfig) {
        this.counter = counter;
        this.config = config;
    }

    async render(): Promise<any> {
        // render the counter
        throw new Error('Not implemented');
    }

}


class ImageHitCounterRenderer extends BaseHitCounterRenderer {
    private imageType: string;
    private imageFormat: keyof FormatEnum | AvailableFormatInfo;
    private baseImage: Buffer;
    private baseImageMetadata: Metadata;
    constructor(counter: HitCounter, config: HitCounterConfig) {
        super(counter, config);
        this.imageType = fileExt(this.config.imageFile);
        this.imageFormat = extToFormat(this.imageType);
    }

    private async downloadImage(): Promise<Buffer> {
        return new Promise((resolve, reject) => {
            let buf = Buffer.alloc(0);
            const request = https.get(this.config.backgroundImageUrl, (response) => {
                response.on('data', (chunk) => {
                    buf = Buffer.concat([buf, chunk]);
                });
                response.on('end', () => {
                    resolve(buf);
                });
            });
            request.on('error', (err) => {
                fs.unlink(this.config.backgroundCacheFile, () => {
                    reject(err);
                });
            });
        });
    }

    private async cachedBackgroundImage(overWrite: boolean = false): Promise<Sharp> {
        // cache the image
        const dest = this.config.backgroundCacheFile;
        if (fs.existsSync(dest)) {
            if (overWrite) {
                fs.unlinkSync(dest);
            } else {
                return sharp(dest);
            }
        }
        
        // store the image in the cache
        const ext = fileExt(this.config.backgroundImageUrl);
        
        const format = extToFormat(ext);
        if (isWebURI(this.config.backgroundImageUrl)) {
            const buf = await this.downloadImage();
            const image = sharp(buf).toFormat(format);
            await image.toFile(dest);
            return image;
        } else {
            if (fs.existsSync(this.config.backgroundImageUrl)) {
                const image = sharp(this.config.backgroundImageUrl).toFormat(format);
                await image.toFile(dest);
                return image;
            } else {
                throw new Error('Background image does not exist');
            }
        }
    }

    async prepareBaseImage(): Promise<void> {
        if (typeof this.baseImage !== 'undefined') {
            return;
        }
        const bgImage = await this.cachedBackgroundImage();
        const bgInfo = await bgImage.metadata();
        const imgWidth = bgInfo.width;
        const imgHeight = bgInfo.height;
        if (typeof imgWidth === 'undefined' || typeof imgHeight === 'undefined') {
            throw new Error('Invalid image dimensions');
        }

        const svgFrame = `
            <svg width="${bgInfo.width}" height="${bgInfo.height}" xmlns="http://www.w3.org/2000/svg">
                <rect x="${this.config.borderWidth}" y="${this.config.borderWidth}" width="${imgWidth - 2 * this.config.borderWidth}" height="${imgHeight - 2 * this.config.borderWidth}" fill="none" stroke-alignment="inner" stroke="rgb(${this.config.frameColorRGB.r},${this.config.frameColorRGB.g},${this.config.frameColorRGB.b})" stroke-width="${this.config.borderWidth}"/>
            </svg>
        `;
        
        const svgOverlay = `
            <svg width="${bgInfo.width}" height="${bgInfo.height}" xmlns="http://www.w3.org/2000/svg">
                <text x="${this.config.textPositionX}" y="${this.config.textPositionY}" fill="rgb(${this.config.textColorRGB.r},${this.config.textColorRGB.g},${this.config.textColorRGB.b})" font-size="${this.config.fontSize}" font-family="${this.config.fontFace}">${this.config.customText}</text>
                <text x="${this.config.textPositionX}" y="${this.config.textPositionY + 15}" fill="rgb(${this.config.textColorRGB.r},${this.config.textColorRGB.g},${this.config.textColorRGB.b})" font-size="${this.config.fontSize}" font-family="${this.config.fontFace}">${this.config.secondaryText}</text>
            </svg>
        `;

        const overlay = sharp(Buffer.from(svgOverlay));

        if (this.config.drawFrame) {
            const frame = sharp(Buffer.from(svgFrame));
            const composite = bgImage.composite([
                { input: await overlay.toBuffer(), gravity: 'northwest' },
                { input: await frame.toBuffer(), gravity: 'northwest' }
            ]);
            const preparedImg = composite.toFormat(this.imageFormat);
            this.baseImageMetadata = await preparedImg.metadata();
            this.baseImage = await preparedImg.toBuffer();;
        }

        const composite = bgImage.composite([
            { input: await overlay.toBuffer(), gravity: 'northwest' }
        ]);

        const preparedImg = composite.toFormat(this.imageFormat);
        this.baseImageMetadata = await preparedImg.metadata();
        this.baseImage = await preparedImg.toBuffer();

    }

    async render(): Promise<Buffer> {
        const hits = await this.counter.getHits();
        
        const numberColor = this.config.numberColorRGB;
        const numberX = this.config.numberPositionX;
        const numberY = this.config.numberPositionY;

        await this.prepareBaseImage();
        const overlay = `
            <svg width="${this.baseImageMetadata.width}" height="${this.baseImageMetadata.height}" xmlns="http://www.w3.org/2000/svg">
                <text x="${numberX}" y="${numberY}" fill="rgb(${numberColor.r},${numberColor.g},${numberColor.b})" font-size="12">${hits}</text>
            </svg>
        `;
        const composite = sharp(this.baseImage).composite([
            { input: Buffer.from(overlay), gravity: 'northwest' }
        ]);
        return composite.toBuffer();
        
    }
}


interface HitCounterConfig {
    siteId: number;
    // path to the database file
    counterDB: string;
    // Background image URL for the counter display
    backgroundImageUrl: string;
    // local image path
    imageFile: string;
    backgroundCacheFile: string;
    // Text settings to be displayed on the image
    customText: string; // Main headline text
    secondaryText: string; // Secondary descriptive text
    textPositionX: number; // X position of the text
    textPositionY: number; // Y position of the text
    numberPositionX: number; // X position of the number
    numberPositionY: number; // Y position of the number
    fontSize: number; // Font size
    fontFace: string; // Font face
    borderWidth: number; // Border width
    textColorRGB: RGBColor; // Text color
    secondaryTextColorRGB: RGBColor; // Secondary text color
    numberColorRGB: RGBColor; // Number color
    frameColorRGB: RGBColor; // Frame color
    drawFrame: boolean; // Whether to draw a frame around the counter
    renderer: Type<BaseHitCounterRenderer>; // Renderer class for the counter
}



// default configuration
const defaultHitCounterConfig: HitCounterConfig = {
    siteId: 1,
    counterDB: './hits.db',
    backgroundImageUrl: 'https://datakra.sh/assets/example_counter.jpg',
    imageFile: './example_counter.png',
    backgroundCacheFile: './example_counter_bg.png',
    customText: 'Hit Counter!',
    secondaryText: 'Super cyber, super cool!',
    textPositionX: 5,
    textPositionY: 5,
    numberPositionX: 160,
    numberPositionY: 15,
    fontSize: 12,
    fontFace: 'Arial',
    borderWidth: 3,
    textColorRGB: { r: 253, g: 252, b: 1 },
    secondaryTextColorRGB: { r: 0, g: 255, b: 0 },
    numberColorRGB: { r: 255, g: 255, b: 255 },
    frameColorRGB: { r: 255, g: 0, b: 0 },
    drawFrame: true,
    renderer: ImageHitCounterRenderer
};

class HitCounter {
    private db: DB;
    private renderer: BaseHitCounterRenderer;
    private config: HitCounterConfig;
    private preparedGet: Statement;
    private preparedIncrement: Statement;
    private preparedReset: Statement;
    private mimeType: string;

    constructor(renderer: Type<BaseHitCounterRenderer>, config?: HitCounterConfig) {
        this.config = { ...defaultHitCounterConfig, ...config };
        this.renderer = new renderer(this, this.config);
        this.openDB();
        this.setupDB();
        this.setupStatements();
        this.mimeType = mimeTypeMap[fileExt(this.config.imageFile)];
    }

    private openDB(): void {
        const db = new Database(this.config.counterDB, {fileMustExist: false});
        db.pragma('locking_mode = EXCLUSIVE');
        db.pragma('journal_mode = WAL');
        db.pragma('synchronous = OFF');
        this.db = db;
    }

    private setupDB(): void {
        this.db.exec(`
            CREATE TABLE IF NOT EXISTS hit_counter (
                id INTEGER PRIMARY KEY,
                hits INTEGER NOT NULL
            );
        `);
        this.db.exec(`
            INSERT OR IGNORE INTO hit_counter (id, hits)
            VALUES (?, ${this.config.siteId})
        `);
    }

    private closeDB(): void {
        this.db.close();
    }

    private setupStatements(): void {
        this.preparedGet = this.db.prepare(`
            SELECT hits
            FROM hit_counter
            WHERE id = ?
        `);
        this.preparedIncrement = this.db.prepare(`
            UPDATE hit_counter
            SET hits = hits + 1
            WHERE id = ?
        `);
        this.preparedReset = this.db.prepare(`
            UPDATE hit_counter
            SET hits = 0
            WHERE id = ?
        `);
    }

    async getHits(): Promise<number> {
        const result = this.preparedGet.get(this.config.siteId) as HitResult;
        return result.hits;
    }

    async increment(): Promise<void> {
        this.preparedIncrement.run(this.config.siteId);
    }

    async reset(): Promise<void> {
        this.preparedReset.run(this.config.siteId);
    }

    async render(): Promise<any> {
        return this.renderer.render();
    }

    getMimeType(): string {
        return this.mimeType;
    }

    // destructor
    destroy(): void {
        this.closeDB();
    }
    
}




export {
    HitCounter,
    HitCounterConfig,
    HitCounterRenderer,
    BaseHitCounterRenderer,
    ImageHitCounterRenderer
};

export default HitCounter;