open-index/open-npm huggingface dataset:
npm package: @patarapolw/make-html-x-card
Description: To use `x-card` webcomponent, simply include
Author: Pacharapol Withayasakpunt
Latest version: 0.2.3

# x-card

To use `x-card` webcomponent, simply include

```html
<script src="https://unpkg.com/@patarapolw/make-html-x-card"></script>
```

To support old browsers, you might also need [@webcomponents/webcomponentsjs](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs)

```html
<script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="https://unpkg.com/@patarapolw/make-html-x-card"></script>
```

This is a part of <https://github.com/patarpolw/make-html>.
npm package: @patarapolw/markdown-it-imsize
Description: Markdown-it plugin to specify image size
Author: Pacharapol Withayasakpunt
Latest version: 2.0.1-dev3

# markdown-it-imsize

[![Build Status](https://travis-ci.org/tatsy/markdown-it-imsize.svg?branch=master)](https://travis-ci.org/tatsy/markdown-it-imsize)
[![NPM version](https://img.shields.io/npm/v/markdown-it-imsize.svg?style=flat)](https://www.npmjs.org/package/markdown-it-imsize)
[![Coverage Status](https://coveralls.io/repos/tatsy/markdown-it-imsize/badge.svg)](https://coveralls.io/r/tatsy/markdown-it-imsize)
[![Dependency Status](https://david-dm.org/tatsy/markdown-it-imsize.svg)](https://david-dm.org/tatsy/markdown-it-imsize)
[![devDependency Status](https://david-dm.org/tatsy/markdown-it-imsize/dev-status.svg)](https://david-dm.org/tatsy/markdown-it-imsize#info=devDependencies)

> A markdown-it plugin for size-specified image markups. This plugin overloads original image renderer of markdown-it.

## Usage

#### Enable plugin

```js
var md = require('markdown-it')({
  html: true,
  linkify: true,
  typography: true
}).use(require('markdown-it-imsize')); // <-- this use(package_name) is required
```

#### Example

```md
![test](image.png =100x200)
```

is interpreted as

```html
<p><img src="image.png" alt="test" width="100" height="200"></p>
```

## Options

#### Auto fill

```js
var md = require('markdown-it')({
  html: true,
  linkify: true,
  typography: true
}).use(require('markdown-it-imsize'), { autofill: true });
```

will fill the width and height fields automatically if the specified image path is valid.

Therefore,

```md
![test](image.png)
```

is interpreted as

```html
<p><img src="image.png" alt="test" width="200" height="200"></p>
```

where ```image.png``` is a valid path and its size is 200 x 200.

## Use with RequireJS

```markdown-it-imsize``` is available with bower and RequireJS. First, you can install the package with,

```shell
bower install markdown-it-imsize
```

Script for using ```markdown-it-imsize``` with RequireJS is like,

```js
require(['require', 'MarkdownIt', 'MarkdownItImsize'], function(require) {
  var md = require('MarkdownIt')({
    html: true,
    linkify: true,
    typography: true
  }).use(require('MarkdownItImsize'));

  var rendered = md.render("![test](test.jpg =100x)");
  document.getElementById('image-box').innerHTML = rendered;
});
```
npm package: @patarapolw/prettyprint
Description: This project shows how we can prettyprint beyond `JSON.stringify(obj, null, 2)` in Node.js
Author: Pacharapol Withayasakpunt
Latest version: 1.0.3

# prettyprint

This project shows how we can prettyprint beyond `JSON.stringify(obj, null, 2)` in Node.js

- With colors
- Multiline strings

As for the core code, you are free to copy the code from [/src/index.ts](/src/index.ts).

## Local installation

```sh
npm i @patarapol/prettyprint --dev
```

```ts
import { pp } from '@patarapolw/prettyprint'
pp(OBJECT)
```

## CLI installation

[Run it directly with npx](https://www.npmjs.com/package/npx#examples)

```sh
npx github:patarapolw/prettyprint OBJECT_AS_JS_EVAL
```

Or, install as global

```sh
npm i -g @patarapolw/prettyprint
pp OBJECT_AS_JS_EVAL
```
npm package: @patarapolw/qsearch
Description: Search a database with a string. Designed for end-users.
Author: Pacharapol Withayasakpunt
Latest version: 1.2.2

# QSearch

Search a database with a string. Designed for end-users.

## Demo

See <https://q2search.herokuapp.com>

This demo also allows `is:unique` as a special operator.

See [/web/backend/src/schema.ts](/web/backend/src/schema.ts) and [/web/backend/src/shared.ts](/web/backend/src/shared.ts) for schema and search options, respectively.

This compares between MongoDB, LokiJS, NeDB, and native `Array.filter`.

## Usage

This is inspired from [lunr.js](https://lunrjs.com/guides/searching.html) search by fields, if specified, with some major differences.

- Default connector is `AND`.
- To make an `OR`, use `?expression`.
- Search is normally case-insensitive, i.e. `a` and `A` means the same thing.
- `+expression` means exactly match, and case-sensitive.
- `-expression` means negation.
- Not only `:`, but also `>` and `<` is used to specify comparison. For example, `+foo:bar`, `count>1`.
- `NULL` is a special keyword, meaning, not exists, `undefined`, or `null`.
- `TRUE` and `FALSE` are special keywords, meaning, `true` and `false`, respectively.
- Date comparison is enabled.
  - Special keyword: `NOW`.
  - `+1h` means next 1 hour. `-1h` mean 1 hour ago.
    - Available units are `y (year)`, `M (month)`, `w (week)`, `d (day)`, `h (hour)`, `m (minute)`.
- Extra keywords, such as `is:duplicate` can be set.
- Tested for [loki.js](https://github.com/techfort/LokiJS), [nedb](https://github.com/louischatriot/nedb), and [MongoDB](https://www.mongodb.com/). Also, pure JavaScript Array filtering is possible too.
- For SQL's, you might need extra work to convert to queries, or just use NoSQL's.
- For now, fuzzy search is not supported.

## Used in

This project is used in <https://github.com/patarapolw/learn-unicode>

## Similar projects

- <https://github.com/patarapolw/q2filter>
npm package: @patarapolw/reveal-md
Description: Library for parsing/generating Reveal.js presentation to-and-from Markdown
Author: Pacharapol Withayasakpunt
Latest version: 0.1.4

# @patarapolw/reveal-md

A framework for manipulating Reveal.js <--> Markdown. With Showdown extensions and [HyperPug](https://github.com/patarapolw/hyperpug). See <https://patarapolw.github.com/reveal-editor>

## Features

- Global scripting `<script></script>` and styling `<style></style>` is now supported in slides marked with

```markdown
// global
content (Pug or HTML or extended Markdown)
```

- The slides marked with `// global` or `// hidden` will be hidden.
- Implementing `<style scoped>` would also be nice, but I haven't done it yet.
- Showdown extensions (with [indented-filter](https://github.com/patarapolw/indented-filter))
- HyperPug extensions

## Exporting to single file HTML

I have already tested this in [/scripts/test.ts](/scripts/test.ts)

```typescript
import RevealMd from "@patarapolw/reveal-md";
import fs from "fs";

const r = new RevealMd();
r.update(fs.readFileSync("../../example.md", "utf8"));
r.export("output");
```

## Live editor

See <https://github.com/patarapolw/reveal-editor>.

## Installation

```
npm i @patarapolw/reveal-md
```
npm package: @patarapolw/reveal-md-core
Description: A framework for manipulating Reveal.js <-> Markdown. With Showdown extensions and HyperPug. See https://patarapolw.github.com/reveal-md
Author: Pacharapol Withayasakpunt
Latest version: 1.1.0

# @patarapolw/reveal-md-core

A framework for manipulating Reveal.js <--> Markdown. With Showdown extensions and [HyperPug](https://github.com/patarapolw/hyperpug). See <https://patarapolw.github.com/reveal-editor>

## Features

- Global scripting `<script></script>` and styling `<style></style>` is now supported in slides marked with

```markdown
// global
content (Pug or HTML or extended Markdown)
```

- The slides marked with `// global` or `// hidden` will be hidden.

## Live editor

See <https://github.com/patarapolw/reveal-md>.

## Installation

```sh
npm i @patarapolw/reveal-md-core.git
```

## Local Reveal.js files

This can be done by serving [Reveal.js](https://github.com/hakimel/reveal.js) folder from `/reveal`, either via the same web server, or via proxy. It will be loaded automatically.
npm package: @patarapolw/scope-css
Description: Scope each css rule with a selector, ie. nest into parent
Author: ΔY
Latest version: 1.3.0

# scope-css [![unstable](https://img.shields.io/badge/stability-unstable-green.svg)](http://github.com/badges/stability-badges) [![Build Status](https://img.shields.io/travis/dy/scope-css.svg)](https://travis-ci.org/dy/scope-css)

Prefix or nest each style selector in a css string. Useful to create namespaced css for components, themes, applications, modular css etc. Also it is tiny.

## Usage

[![npm install scope-css](https://nodei.co/npm/scope-css.png?mini=true)](https://npmjs.org/package/scope-css/)

```js
const scope = require('scope-css');

scope(`
.my-component {}
.my-component-element {}
`, '.parent');

/*
`
.parent .my-component {}
.parent .my-component-element {}
`
*/
```

## API

## css = scope(css, parent, options?)

Return css string with each rule prefixed with the parent selector. Note that `parent` selector itself will be ignored. Also each `:host` keyword will be replaced with `parent` value. Example:

```js
scope(`
	.panel {}
	:host {}
	:host .my-element {}
	.panel .my-element {}
	.my-element {}
`, '.panel');

/*
`
	.panel {}
	.panel {}
	.panel .my-element {}
	.panel .my-element {}
	.panel .my-element {}
`
*/
```

Options can scope keyframes via `{ keyframes: bool|prefixStr }` option, eg.

```js
scope(`
	.panel {
		animation: infinite loading 4s;
	}
	@keyframes loading {
		from { top: 0; }
		to { top: 100px; }
	}
`, '.panel', { keyframes: true })

/*
`
.panel {
	animation: infinite panel-loading 4s;
}
@keyframes panel-loading {
	from { top: 0; }
	to { top: 100px; }
`)
*/
```

## css = scope.replace(css, 'replacement $1$2')

Apply replace to css, where `$1` is matched selectors and `$2` is rules for the selectors. It does not do any self/host detection, so use it for more flexible replacements.

```js
scope.replace(`
	.my-component, .my-other-component {
		padding: 0;
	}
`, '$1');

// `.my-component, .my-other-component`
```

## See also

* [scoped css polyfill](https://github.com/samthor/scoped)

## Credits

Based on [this question](http://stackoverflow.com/questions/12575845/what-is-the-regex-of-a-css-selector).
npm package: @patarapolw/sql-easyquery
Description: Easily query SQL (currently only support SQLite), with a string or a mongo-like query.
Author: Pacharapol Withayasakpunt
Latest version: 0.1.1

# sql-easyquery

Easily query SQL (currently only support SQLite), with a string or a mongo-like query.

With a set of utilities, according to SQLite documentation.
npm package: @patarapolw/vite-plugin-mpa
Description: MPA for vite
Author: indexxuan@gmail.com
Latest version: 1.1.2

# vite-plugin-mpa

> Out-of-the-box multi-page-application (MPA) support for Vite - supports Vue2/3, React and others

<p align="center">
  <img alt="wakatime" src="https://wakatime.com/badge/github/IndexXuan/vite-plugin-mpa.svg" />
  <a href="https://github.com/IndexXuan/vite-plugin-mpa/actions/workflows/npm-publish.yml">
   <img alt="NPM Publish" src="https://github.com/IndexXuan/vite-plugin-mpa/actions/workflows/npm-publish.yml/badge.svg" style="max-width:100%;">
  </a>
  <a href="https://www.npmjs.com/package/vite-plugin-mpa" rel="nofollow">
    <img alt="downloads" src="https://img.shields.io/npm/dt/vite-plugin-mpa.svg">
  </a>
  <a href="https://www.npmjs.com/package/vite-plugin-mpa" rel="nofollow">
    <img alt="npm version" src="https://img.shields.io/npm/v/vite-plugin-mpa.svg" style="max-width:100%;">
  </a>
  <a href="https://github.com/IndexXuan/vite-plugin-mpa/blob/main/LICENSE">
    <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" style="max-width:100%;">
  </a>
</p>

## Motivation

- Vite [natively supports multi-page apps](https://vitejs.dev/guide/build.html#multi-page-app), but you must configure `rollupOptions.input` manually
- When running vite dev, you must open `localhost:3000/src/pages/index/xxx.html` for `$projectRoot/src/pages/index/xxx.html`
- Similar to vue-cli, this plugin helps rewrite urls for MPA and auto open the first page for you
- Experimental: when building, organize the folder for you (like vue-cli) - e.g `dist/src/pages/subpage/index.html` will move to `dist/subpage/index.html`

## Usage

```sh
yarn add vite-plugin-mpa
```

```ts
// vite.config.ts
import mpa from 'vite-plugin-mpa'

// @see https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // ...other plugins
    mpa(/* options */),
  ],
})
```

## Options

```ts
{
  /**
   * open url path when server starts (customizable)
   * @default path of first-page
   */
  open: string
  /**
   * where to locate pages
   * @default 'src/pages', e.g. src/views
   */
  scanDir: string
  /**
   * how to locate page files (passed to fast-glob), e.g. index.{js,jsx}
   * @default 'main.{js,ts,jsx,tsx}'
   */
  scanFile: string
  /**
   * what is your html file name, e.g. index.html / main.html / entry.html / template.html
   * @default 'index.html'
   */
  filename: string
}
```

- [see more](https://github.com/IndexXuan/vite-plugin-mpa/blob/main/src/lib/options.ts)

## Examples

- see [src/examples](https://github.com/IndexXuan/vite-plugin-mpa/blob/main/examples)

- use shelljs after-build to organize dist folder (may be a better approach - help wanted)

## How It Works

- Uses fast-glob to collect all pages, e.g. src/pages/\*/main.{js,ts}, and calc MPA entries
- The result is passed into vite#rollupOptions#input


## Further Info
- [vue-cli-plugin-vite](https://github.com/IndexXuan/vue-cli-plugin-vite)
- [vite-plugin-html-template](https://github.com/IndexXuan/vite-plugin-html-template)
npm package: @patarapolw/vitepress-plugin-flexsearch
Description: Provide local search to your documentation site.
Author: Emerson Bottero
Latest version: 1.0.4-alpha.21

## Provides local search to your documentation site

Uses [flexsearch](https://github.com/nextapps-de/flexsearch).

## Installing

```js
npm i vitepress-plugin-search flexsearch -D
```

## Add the plugin

- Using an vite.config file
```js
//vite.config.ts
import { SearchPlugin } from "vitepress-plugin-search";
import { defineConfig } from "vite";

//default options
var options = {
  ...flexSearchIndexOptions,
  previewLength: 62,
  buttonLabel: "Search",
  placeholder: "Search docs",
  allow: [],
  ignore: [],
};

export default defineConfig({
  plugins: [SearchPlugin(options)],
});
```

- Using config.js or config.ts
```js
import { SearchPlugin } from "vitepress-plugin-search";
import { defineConfig } from "vitepress";
export default defineConfig({
  vite: { plugins: [SearchPlugin(options)] }
});
```

## Options

Accept [FlexSearch Index Options](https://github.com/nextapps-de/flexsearch#options)

## Multi language support

Provided by flexsearch  
  
See [chinese settings for example](https://github.com/emersonbottero/vitepress-plugin-search/issues/11)
npm package: @patch-sdk/react
Description: Patch React Library
Author: 300ft Ventures LLC
Latest version: 0.0.24

# Patch React SDK

The real-time customer experience library for React. Patch gives you access to prebuilt components, hooks, and helpers to make community support a breeze.

## Why Patch SDK?

- **Framework Agnostic** - Works with Next.js, Remix, Vite, and any React setup
- **Type Safe** - Full TypeScript support with comprehensive type definitions
- **Real-time** - Built on Convex for instant updates and real-time messaging
- **Flexible** - Build custom UIs with our hooks and components
- **Simple** - Minimal setup, maximum flexibility

## Getting Started

For installation instructions and full documentation, visit our [documentation site](https://docs.patch.bot).

## License

MIT
npm package: @patch-up/bun
Description: Bun is a fast all-in-one JavaScript runtime.
Latest version: 1.1.20

# Bun

Bun is a fast all-in-one JavaScript runtime. https://bun.sh

### Install

```sh
npm install -g bun
```

### Upgrade

```sh
bun upgrade
```

### Supported Platforms

- [macOS, arm64 (Apple Silicon)](https://www.npmjs.com/package/@oven/bun-darwin-aarch64)
- [macOS, x64](https://www.npmjs.com/package/@oven/bun-darwin-x64)
- [macOS, x64 (without AVX2 instructions)](https://www.npmjs.com/package/@oven/bun-darwin-x64-baseline)
- [Linux, arm64](https://www.npmjs.com/package/@oven/bun-linux-aarch64)
- [Linux, x64](https://www.npmjs.com/package/@oven/bun-linux-x64)
- [Linux, x64 (without AVX2 instructions)](https://www.npmjs.com/package/@oven/bun-linux-x64-baseline)
- [Windows](https://www.npmjs.com/package/@oven/bun-windows-x64)
- [Windows (without AVX2 instructions)](https://www.npmjs.com/package/@oven/bun-windows-x64-baseline)

### Future Platforms

- Unix-like variants such as FreeBSD, OpenBSD, etc.
- Android and iOS
npm package: @patch-up/just-performance
Description: Isomorphic ponyfill wrapping native browser performance and node.js perf_hooks performance
Author: John Hurliman
Latest version: 4.3.1

# just-performance

Isomorphic ponyfill wrapping browser performance and node.js perf_hooks performance.

## Usage

### Browser

```js
import { performance } from "just-performance";
```

## node.js

```js
import { performance } from "just-performance";
```

## License

MIT license
npm package: @patch_dev/ftp-deploy
Description: Ftp a folder from your local disk to an ftp destination
Author: Simon Hampton
Latest version: 0.1.3

# ftp-deploy

A Node.js package to help with deploying code. Ftp a folder from your local disk to a remote ftp destination. Does not delete from destination directory.

## Installation

```js
npm install --save-dev @patch_dev/ftp-deploy
```

And run

```bash
ftp-deploy --host example.com --user demo --password demo --localRoot ./dist/ --remoteRoot /web
```