open-index/open-npm huggingface dataset:
npm package: @fritz-c/react-image-diff
Description: Highlight differences between images
Author: Cezary Wojtkowski
Latest version: 0.2.0

# react-image-diff

Compares images, inspired by Github's [image diff view modes](https://github.com/blog/817-behold-image-view-modes).

![](public/img/demo-fade.gif)
![](public/img/demo-swipe.gif)

## Installation

```
npm install react-image-diff
```

## Demo

http://cezary.github.io/react-image-diff/

## Usage

```javascript
import React from 'react';
import ImageDiff from 'react-image-diff';

class Component extends React.Component {
  render() {
    return (
      <ImageDiff before={this.props.original} after={this.props.altered} type="fade" value={.5} />
    );
  }
}
```

### Props

* after: string - url to after image
* before: string - url to before image
* afterAlt: string - `<img>` _alt_ text for after image
* beforeAlt: string - `<img>` _alt_ text for before image
* height: number - height in pixels
* width: number - width in pixels
* type: string - type of image comparison (difference, fade, or swipe)
* value: number - decimal fraction used to compute transition between before and after images

## License

MIT
npm package: @fritzprix/hn-mcp
Description: A Hacker News MCP server for LLMs.
Author: fritzprix
Latest version: 1.0.1

# Hacker News MCP Server

A high-quality Model Context Protocol (MCP) server for Hacker News, enabling LLMs to explore stories, items, and user profiles.

## Features

- **Store Feeds**: Fetch Top, New, Best, Ask HN, Show HN, and Job stories.
- **Detailed Inspection**: Get full details for items (stories, comments, polls) and user profiles.
- **Live Updates**: Access recently changed items and the current max item ID.
- **Optimized for LLMs**:
  - Responses formatted in clear Markdown.
  - Built-in token limit (~3,000 tokens) to prevent context overflow.
  - Support for pagination (`limit`/`offset`) on all list-based tools.
- **Modern Infrastructure**: Built with TypeScript and the official MCP SDK.

## Available Tools

- `hn_get_top_stories`: Get top stories (paginated).
- `hn_get_new_stories`: Get new stories (paginated).
- `hn_get_best_stories`: Get best stories (paginated).
- `hn_get_ask_stories`: Get Ask HN stories (paginated).
- `hn_get_show_stories`: Get Show HN stories (paginated).
- `hn_get_job_stories`: Get Job stories (paginated).
- `hn_get_item`: Get detailed info for a specific item ID.
- `hn_get_user`: Get user profile details by username.
- `hn_get_updates`: Get IDs of recently updated items and profiles.
- `hn_get_max_item`: Get the latest item ID on Hacker News.

## Getting Started

### Prerequisites

- Node.js 18 or higher
- npm

### Installation

#### Via npx
You can run the server directly using `npx`:
```bash
npx @fritzprix/hn-mcp
```

#### Via npm (Global)
```bash
npm install -g @fritzprix/hn-mcp
```

#### From Source
1. Clone the repository or copy the project files.
2. Install dependencies:
   ```bash
   npm install
   ```

### Building

Build the project using TypeScript:
```bash
npm run build
```

### Running

Start the server via stdio:
```bash
npm start
```

For development with auto-reload:
```bash
npm run dev
```

## Configuration

### Claude Desktop

To use this server with Claude Desktop, add the following to your `claude_desktop_config.json` (usually located at `~/Library/Application Support/Claude/claude_desktop_config.json` on macOS or `%APPDATA%\Claude\claude_desktop_config.json` on Windows):

```json
{
  "mcpServers": {
    "hackernews": {
      "command": "node",
      "args": [
        "/home/fritzprix/my_works/hn-mcp/dist/index.js"
      ],
      "env": {}
    }
  }
}
```

> [!NOTE]
> Make sure to provide the absolute path to `dist/index.js`.

## License

MIT