hit-counter/node/README.md

151 lines
4.8 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# Hit Counter - Because Nothing Says Retro Like a Hit Counter
[Remember Hit Counters? Well, Theyre Back. And Theyre Gloriously useless](https://datakra.sh/logs/remember-hit-counters-well-theyre-back-and-theyre-gloriously-useless), personal websites were as unique as fingerprints, and every site proudly flaunted a hit counter? It was the ultimate digital badge of honor—a glaring declaration of how many lost souls had wandered onto your site. Fast forward to now, and it turns out you can relive those glitzy days. Yup, hit counters are back, and they are as gloriously pointless as ever!
## Why, Though?
Why on Satans earth would anyone need a hit counter in 2024? Honestly, I haven't got the slightest idea. Most modern web metrics tools can provide far more detailed insights. But hey, who says everything needs to make sense? Sometimes, a little nostalgia is all you need to spice things up.
## Features
- **Custom Main Text and Secondary Text**: Because why settle for one when you can have two?
- **Hit Counter**: See how many times the page is hit. Its like a pissing contest, but for web traffic.
- **Frame Option**: For when you want to make things a tad more "extra."
- **Custom Colors**: Match your counter to your site's funky style.
- **Custom Output**: jpg, png, webp, tiff, gif. High-tech stuff.
## Requirements
- Node.js 22.x or higher
## Installation
1. **Clone this fantastic repository**:
```sh
git clone https://git.cyberwa.re/revengeday/hit-counter.git
```
2. **Navigate** to the project directory:
```sh
cd hit-counter/node
```
3. **Install**:
```sh
npm i
```
4. **Run devserver** to test it out locally:
```sh
npm run dev
```
5. **Enjoy the Retro Vibes**: Access the script from your web browser or via `curl`:
```sh
http://localhost:8000/
http://localhost:8000/hits # to see the count
http://localhost:8000/image # to see the image
http://localhost:8000/reset # to reset the count
```
## Configuration
```ts
// the config is defined in the HitCounterConfig interface
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
}
// currently only the ImageHitCounterRenderer is implemented, but this could be extended
// to a canvas or html or whatever renderer
```
## Usage
```ts
import { HitCounter, ImageHitCounterRenderer } from "./hit-counter";
// default config
defaultHitCounterConfig = {
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: 11,
numberPositionX: 170,
numberPositionY: 18,
fontSize: 10,
fontFace: 'fixed',
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
};
// the default config will be used, but you can pass a custom config object as
// the second argument to the HitCounter constructor
const hitCounter = new HitCounter(ImageHitCounterRenderer);
// increment the hit counter
hitCounter.increment(); // async function
// get the current hit count
const count = await hitCounter.getCount();
// get mime type
const imageMimeType = hitCounter.getMimeType();
// render the image
const image = await hitCounter.render();
// send to client however you like
// reset the hit counter
await hitCounter.reset();
```
## Contributing
Want to make this even more useless? Fork it, hack it, and send me a pull request.
## Contact
Got questions or just feeling nostalgic? Hit me up on the fediverse: [@revengeday@corteximplant.com](https://corteximplant.com/@revengeday).