open-index/open-npm huggingface dataset:
npm package: @nonbili/emoji-list
Description: A web component to render a list of emoji
Author: Ping Chen
Latest version: 0.1.2

# `<emoji-list>`

A web component to render a list of emoji.

[Demo](https://nonbili.github.io/emoji-list/)

Install by

```
yarn add @nonbili/emoji-list
```

## Render full emoji list

```html
<emoji-list></emoji-list>
```

## Filter by keyword

```html
<emoji-list filter="+1"></emoji-list>
```
npm package: @nonbili/posthtml-md-element
Description: A PostHTML plugin to include and render Markdown into HTML
Author: Ping Chen
Latest version: 0.1.0

# posthtml-md-element

A plugin for PostHTML to render markdown file into html.

Differences from other PostHTML markdown plugins

- markdown-it is used instead of marked
- a dash is included in the element name `<posthtml-md>`, which follows the naming convention of custom element

## Install

```
yarn add --dev @nonbili/posthtml-md-element
```

## Usage

HTML

```html
<body>
  <posthtml-md src="docs/element.html"></posthtml-md>
</body>
```

NodeJS

```js
posthtml()
  .use(require("@nonbili/posthtml-md-element")())
  .process(html)
  .then((result) => console.log(result.html))
```

Or `postcss.config.js`

```js
module.exports = {
  plugins: {
    "@nonbili/posthtml-md-element": {
    }
  }
}
```

## Optional Configs

- `root`: root path. Default to `./`
- `encoding`: default to `utf-8`
- `withMd`: a function `(md: MarkdownIt) => ()` to further customize MarkdownIt.

All other options are passed to [markdown-it](https://github.com/markdown-it/markdown-it#init-with-presets-and-options).
npm package: @nonbili/svgen
Description: Generate an icons module in purescript halogen from svg files
Author: Ping Chen
Latest version: 0.2.0

# svgen

[![npm](https://img.shields.io/npm/v/@nonbili/svgen.svg)](https://www.npmjs.com/package/@nonbili/svgen)

Generate an icons module in purescript halogen from svg files.

## Usage

```
yarn add --dev @nonbili/svgen
yarn svgen -h
```

## Example

```
node index.js  -F example/svg -o ./example/src/Icons.purs --svgo-config ./example/svgo.config.json
cd example
yarn
pulp build
yarn start
```

The generated `Icons.purs` will be like

```purescript
module Icons where

import Prelude ((<>))
import Halogen.HTML

ns :: Namespace
ns = Namespace "http://www.w3.org/2000/svg"

iconHeart :: forall p r i. Array (IProp r i) -> HTML p i
iconHeart attrs =
  elementNS ns (ElemName "svg")
  ( attrs <> [ attr (AttrName "width") "16"
  , attr (AttrName "height") "16"
  , attr (AttrName "viewBox") "0 0 16 16"
  ])
  [ elementNS ns (ElemName "path")
    [ attr (AttrName "d") "M11.252 11.422C13.912 9.426 15 7.96 15 6c0-2.283-1.18-4-3.5-4a1.63 1.63 0 0 0-.569.136c-.347.14-.743.373-1.155.673a10.275 10.275 0 0 0-1.069.898L8 4.414l-.707-.707a10.275 10.275 0 0 0-1.069-.898c-.412-.3-.808-.533-1.155-.673A1.623 1.623 0 0 0 4.5 2C2.18 2 1 3.717 1 6c0 1.959 1.087 3.426 3.748 5.422.436.327 2.206 1.582 3.252 2.339 1.046-.757 2.816-2.012 3.252-2.339zM8 3s2-2 3.5-2C15 1 16 4 16 6c0 4-4 6-8 9-4-3-8-5-8-9 0-2 1-5 4.5-5C6 1 8 3 8 3z"
    ]
    [
    ]
  ]
```

Then use it like

```purescript
import Icons (iconHeart)

className = HH.attr (HH.AttrName "class")

render state =
  HH.div_
  [ iconHeart
    [ className "icon" ]
  ]
```