open-index/open-npm huggingface dataset:
npm package: @hankei6km/appsheet-to-nuxt-content
Description: save contents from AppSheet for use with nuxt-content
Author: hankei6km
Latest version: 0.1.1

# appsheet-to-nuxt-content

Save contents from [AppSheet](https://www.appsheet.com/) for use within  [nuxt-content](https://content.nuxtjs.org/).

## AppSheet settings

### Enable API

- Open "Manage" / "Integrations" / "IN: from cloud services to your app"
- Turn on "Enable"
- Generate access key by "Create Application Access Key"

refer:
- [Enabling the API | AppSheet Help Center](https://help.appsheet.com/en/articles/1979976-enabling-the-api)
- [API: The Essentials | AppSheet Help Center](https://help.appsheet.com/en/articles/1979966-api-the-essentials)

### Image
(It require when using image)

- Open "Security" / "Options"
- Turn off "Require Image and File URL Signing"

Following setting has requrire when no `--image-url` flag.

- Add virtual column that contained the image URL

refer: [Displaying Images and Documents | AppSheet Help Center](https://help.appsheet.com/en/articles/961605-displaying-images-and-documents)


## Local settings

### Column map

- `mapconfig.json(sample)`

```json
{
    "cols":[
        {
            "srcName": "タイトル",
            "dstName": "title",
            "colType": "string"
        },
        {
            "srcName": "画像",
            "dstName": "image",
            "colType": "image"
        }
    ]
}
```

### Env variables

- `sample`

```
SHEET2CONTENT_API_BASE_URL=https://api.appsheet.com/api/v2/
SHEET2CONTENT_APP_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx
SHEET2CONTENT_MAP_COLS=path/to/mapcols.json
SHEET2CONTENT_ACCESS_KEY=xx-xxxxx-xxxxx-xxxxx-xxxxx-xxxxx-xxxxx-xxxxx-xxxxx
```

Following variable has requrire when use `--image-url` flag.

```
SHEET2CONTENT_APP_NAME=<app name>-xxxxxxx
```

## Save contents

```bash
npx --package=@hankei6km/appsheet-to-nuxt-content -c \
  'sheet2content save <table name> <contents dir> <iamges dir>'
```

## API

### `client(apiBaseURL, appId, appName, accessKey)`

Return client instance for AppSheet. 

#### `apiBaseURL`

Base URL to API endpoint.

#### `appId`

App Id to API endpoint.

#### `appName`

App Name to image adapter endpoint(It used to generate the Image URL).

#### `accessKey`

Access key to get contents.

#### returns

`Client`
 

### `saveRemoteContents(saveRemoteOptions)`

Save remote contens.

#### `saveRemoteOptions.client`

AppSheet client.

#### `tableName`

Table name to save contents.

##### `saveRemoteOptions.mapCols`

Colmuns map.

##### `saveRemoteOptions.dstContentDir`
 
directory to save contents.

##### `saveRemoteOptions.dstImagesDir`
 
directory to save images.

##### `saveRemoteOptions.staticRoot`
 
root of static path to trim image path.

##### `saveRemoteOptions.imageInfo`
 
extract information of image(size, meta).

##### `saveRemoteOptions.imageURL`
 
generate image url from rel path to fetch image filee.

#### returns

`Promise<Error | null>`

## Known Issues

- Partial downaload is not supported


## License

MIT License

Copyright (c) 2021 hankei6km
npm package: @hankei6km/files-to-licenses
Description: Generate licenses text from package source files
Author: hankei6km
Latest version: 0.1.1

# files-to-licenses

Generate licenses text from package source files

## Install

```
npm install --save-dev @hankei6km/files-to-licenses
```

## Usage

An example of using the meta information of esbuild.

code: `esbuild.config.mjs`

```ts
import * as fs from 'node:fs/promises'
import * as path from 'node:path'
import { fileURLToPath } from 'node:url'
import * as esbuild from 'esbuild'
import { FilesToLicenses } from '@hankei6km/files-to-licenses'

let result = await esbuild.build({
  entryPoints: ['src/main.ts'],
  outfile: 'build/main.js',
  //outdir: 'build',
  bundle: true,
  format: 'iife',
  globalName: '_entry_point_',
  sourcemap: false,
  platform: 'node',
  metafile: true,
  target: 'ES2019',
  tsconfig: 'tsconfig.build.json',
  logLevel: 'info'
})

const baseDir = path.dirname(fileURLToPath(import.meta.url))
const opensourceLicensesFilePath = path.join(
  baseDir,
  'build',
  'OPEN_SOURCE_LICENSES.txt'
)

async function* outoutFiles(outputs) {
  for (const [file, { bytes, inputs }] of Object.entries(outputs)) {
    for (const i in inputs) {
      yield path.join(baseDir, i)
    }
  }
}
const filesToLicenses = new FilesToLicenses(
  baseDir,
  outoutFiles(result.metafile.outputs)
)

const opensourceLicensesFile = await fs.open(opensourceLicensesFilePath, 'w')
await opensourceLicensesFile.write('---\n')

for await (const i of filesToLicenses.generate()) {
  await opensourceLicensesFile.write(i)
  await opensourceLicensesFile.write('\n---\n')
}

await opensourceLicensesFile.close()
```

## API

### `class FilesToLicenses(baseDir: string, files: AsyncIterable<string>)`

#### `baseDir`

The base directory path for the files.

#### `files`

An AsyncIterable object that contains a list of files.

### `FilesToLicenses#generate()`

Returns a generator that generates license information(`string`).

## License

MIT License

Copyright (c) 2024 hankei6km
npm package: @hankei6km/gas-gchanges2notion
Description: TypeScript definitions for gas library @hankei6km/gas-gchanges2notion
Author: hankei6km
Latest version: 0.1.0

# gas-gchanges2notion

Google Drive 上の変更リストを Notion データベースへ送信する Google Apps Script ライブラリー。

実装中。

## Setup

ライブラリーは App Script で利用できる状態になっています。
Apps Script のコードエディターで以下の手順を実行するとプロジェクトへ追加できます。

1. コードエディターのファイル名一覧が表示される部分の「ライブラリ +」をクリック
1. 「スクリプト ID」フィールドに `1_fy-5TJZRGLUiksOZsjRx52b6T7T2jLuP0o_zVfjl5JNNRKW69EsKpE0` を入力し検索をクリック
1. バージョンを選択(通常は最新版)
1. 「ID」を `GchangesToNotion` へ変更
1. 「追加」をクリック

上記以外にも Release ページから `gas-gchanges2notion.zip` をダウンロードし、`/dist` ディレクトリーをプロジェクトへコピーできます。

## Usage

### Notion 側での手順

#### データベースを作成

変更内容が送信されるデータベースをが必要です。このリポジトリをローカルへ clone 後、以下のようにスクリプトを実行することで作成できます。
なお、実行には `jq` が必要です。

```console
$ export NOTION_API_KEY="<API KEY>"
$ export PARENT_PAGE_ID="データベースを作成するページのID"
$ export DATABASE_NAME="作成するデータベースの名前"
$ bash scripts/create_database.sh

user_id: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
database_id: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
```

#### Notion インテグレーションを作成

Notion 外部からデータベースを操作するためのインテグレーション(API KEY)が必要です。以下を参考に作成してください。

- [Getting started # Step 1: Create an integration.](https://developers.notion.com/docs/getting-started#step-1-create-an-integration)

#### インテグレーションへの許可

以下を参考に、用意したデータベースをインテグレーションと共有してください。

- [Getting started # Step 2: Share a database with your integration](https://developers.notion.com/docs/getting-started#step-2-share-a-database-with-your-integration)

## Google Apps Script で実行

スタンドアロンのスクリプトを作成し、`GchangesToNotion.send` に `Drive.Changes.list` の実行結果を渡すコードを記述します。

```ts
const props = PropertiesService.getScriptProperties()
const v = props.getProperties()
const apiKey = v.notion_api_key
const optsv = {
  database_id: v.database_id,
  ignoreIds: JSON.parse(v.ignore_ids),
  limit: 20
}

const res = Drive.Changes?.list({ pageToken })
GchangesToNotion.send(apiKey, opts, res)
```

`Drive.Changes.list` を実行するたためには Google Drive の変更通知(プッシュ通知)を受け取る必要があります。
「[Google Drive の変更通知を Google Apps Script で受け取る](https://zenn.dev/hankei6km/articles/receive-google-drive-chages-notifications-by-gas)」などを参照してください。

## TypeScript

TypeScript(clasp) でコードを記述している場合は、`@hankei6km/gas-gchanges2notion` を import することで型定義を利用できます。

```console
$ npm install --save-dev @hankei6km/gas-gchamnges2notion
```

## Known Issues

- 一部のファイルで追加しているカバー画像は、Notion 側へエントリー追加後に時間が経過すると表示されなくなります

## License

MIT License

Copyright (c) 2022 hankei6km
npm package: @hankei6km/gas-github-app-token
Description: Google Apps Script library to support to fetch access token from GitHub App
Author: hankei6km
Latest version: 0.1.0

# gas-github-app-token

GitHub App の Access Token 取得をサポートする Google Apps Script のライブラリー。

## Setup

ライブラリーは App Script で利用できる状態になっています。
Apps Script のコードエディターで以下の手順を実行するとプロジェクトへ追加できます。

1. コードエディターのファイル名一覧が表示される部分の「ライブラリ +」をクリック
1. 「スクリプト ID」フィールドに `1S3DNbJEq91TAWt753wnEnDtUNcnWWBVSUl7_mNiyzi1rc9BwButo07xl` を入力し検索をクリック
1. バージョンを選択(通常は最新版)
1. 「ID」を `GitHubAppToken` へ変更
1. 「追加」をクリック

上記以外にも Release ページから `gas-github-app-token.zip` をダウンロードし、`/dist` ディレクトリーをプロジェクトへコピーできます。

## Usage

Google Apps Script のスクリプトから GitHub App のプライベートキーを利用して Access Token を取得する方法です。

### Convert private key

GitHub からダウンロードしたプライベートキーは Google Apps Script の `Utilities.computeRsaSha256Signature()` では扱えません。そのため、以下の方法で変換します(`xxxxx-private-key.pem` をダウンロードしたファイルに置き換えてください)。

```console
$ openssl pkcs8 -topk8 -inform pem -in xxxxx-private-key.pem -outform pem -nocrypt -out new-private.pem
```

### Properties

以下の項目をスクリプトから参照できる場所(スクリプトプロパティーなど)に保存します。

- App ID - GitHub App のアプリケーション ID
- Installation ID - インストールされた GitHub App へ付与されている ID
- Private Key - 上記で変換したプライベートキー

### Code

App Id などをスクリプトプロパティーへ保存している場合のサンプルです。

```js
function main() {
  const props = PropertiesService.getScriptProperties()
  const appId = props.getProperty('appId')
  const installationId = props.getProperty('installationId')
  const privateKey = props.getProperty('privateKey')

  // Generate URL and options to UrlFetchApp.fetch()
  const [url, opts] = GitHubAppToken.generate({
    appId,
    installationId,
    privateKey
  })

  // Fetch token
  const res = UrlFetchApp.fetch(url, opts)
  console.log(JSON.parse(res.getContentText())) // { token: 'xxxxxx', }
}
```

## TypeScript

TypeScript(clasp) でコードを記述している場合は、以下の方法で型定義を設定できます。

型定義パッケージをインストールします。

```console
$ npm install --save-dev  @hankei6km/gas-github-app-token
```

`tsconfig.json` に定義を追加します。

```json
{
  "compilerOptions": {
    "target": "ES2019",
    "module": "ES2020",
    "lib": ["ESNext"],
    "types": ["@types/google-apps-script", "@hankei6km/gas-github-app-token"]
  }
}
```

## License

MIT License

Copyright (c) 2022 hankei6km
npm package: @hankei6km/gas-md2html
Description: Google Apps Script library to convert Markdonw to HTML
Author: hankei6km
Latest version: 0.14.0

# gas-md2html

Markdown を HTML へ変換する Googl Apps Script Library 用ライブラリー。

## Setup

ライブラリーは App Script で利用できる状態になっています。
Apps Script のコードエディターで以下の手順を実行するとプロジェクトへ追加できます。

1. コードエディターのファイル名一覧が表示される部分の「ライブラリ +」をクリック
1. 「スクリプト ID」フィールドに `1tJwBPELEMAtIhts4YIp4h8VvCbj68SkmLYHwW71pSMz1EWTB1CRtYL_g` を入力し検索をクリック
1. バージョンを選択(通常は最新版)
1. 「ID」を `MD2html` へ変更
1. 「追加」をクリック

上記以外にも Release ページから `md2html.zip` をダウンロードし、`/dist` ディレクトリーをプロジェクトへコピーできます。

## Usage

スプレッドシートのカスタム関数で利用する場合は、以下のようなコードを記述します。

```js
function MD2HTML(args) {
  return MD2html.toHtml(args);
}
```

セル内に `=MD2HTML(B6)` のように入力するとセル内に HTML が代入されます。


## TypeScript

TypeScript(clasp) でコードを記述している場合は、以下の方法で型定義を設定できます。

型定義パッケージをインストールします。

```console
$ npm install --save-dev @hankei6km/gas-md2html
```

`tsconfig.json` に定義を追加します。

```json
{
  "compilerOptions": {
    "target": "ES2019",
    "module": "ES2020",
    "lib": [ "ESNext" ],
    "types": [
       "@types/google-apps-script",
       "@hankei6km/gas-md2html"
    ],


```


## License

MIT License

Copyright (c) 2022 hankei6km
npm package: @hankei6km/gas-notion-update-header
Description: TypeScript definitions for gas library @hankei6km/gas-notion-update-header
Author: hankei6km
Latest version: 0.1.0

# gas-notion-update-header

Notion のデータベースまたはページのヘッダーに関連する項目を簡易的に更新する Googl Apps Script Library。

![otion 上でデータベースを表示し、上部のヘッダーに相当する部分を切り出したスクリーンショット。それに cover icon title description を示すタグをつけてある画像](images/gas-github-app-token-sample.png)

## Setup

### App Script

ライブラリーは App Script で利用できる状態になっています。
Apps Script のコードエディターで以下の手順を実行するとプロジェクトへ追加できます。

1. コードエディターのファイル名一覧が表示される部分の「ライブラリ +」をクリック
1. 「スクリプト ID」フィールドに `1aNOkTIUB6u8WQmBydsnFh6Yjh5FsZ1U1b-1cre8Oo5b0hEgwyDquolYv` を入力し検索をクリック
1. バージョンを選択(通常は最新版)
1. 「ID」を `UpdateHeader` 等へ変更
1. 「追加」をクリック

上記以外にも Release ページから `gas-notion-update-header` をダウンロードし、`/dist` ディレクトリーをプロジェクトへコピーできます。

### Notion

Notion 外部からデータベースを操作するためのインテグレーション(API KEY)が必要です。以下を参考に作成してください。機能(権限)は最小で「コンテンツを更新」が必要です。

- [Step 1: Create an integration](https://developers.notion.com/docs/create-a-notion-integration#step-1-create-an-integration)

以下を参考に、更新予定のデータベースまたはページをインテグレーションと共有してください。

- [Step 2: Share a database with your integration](https://developers.notion.com/docs/create-a-notion-integration#step-2-share-a-database-with-your-integration)

## Usage

Notion Database を更新するサンプルコードです。

### dataqbase

```js
const props = PropertiesService.getScriptProperties()
UpdateHeader.update({
  apiKey: props.getProperty('notion_api_key'),
  id: '<youre dataase id>',
  kind: 'database',
  icon: '⚓',
  description: 'データベースについての説明。\nあういえお\n１２３４５',
  title: 'テストデータベース',
  cover: '<youre cover image url>'
})
```

**Note:** `title` と `description` には [rich text object](https://developers.notion.com/reference/rich-text) 配列も指定できます。

### page

```js
const props = PropertiesService.getScriptProperties()
UpdateHeader.update({
  apiKey: props.getProperty('notion_api_key'),
  id: '<youre page id>',
  kind: 'page',
  icon: '⚓',
  title: 'テストページ',
  cover: '<youre cover image url>'
})
```

**Note:** page に `description` は存在しないので指定しても無視されます。

**Note:** `title` のプロパティは名デフォルトで `title` を指定しています。変更する場合は `{title: '<youre title>, name: <prperty name>}` のように指定できます。

## TypeScript

TypeScript(clasp) でコードを記述している場合は、以下の方法で型定義を設定できます。

型定義パッケージをインストールします。

```console
$ npm install --save-dev  @hankei6km/gas-notion-update-header
```

`tsconfig.json` に定義を追加します。

```json
{
  "compilerOptions": {
    "target": "ES2019",
    "module": "ES2020",
    "lib": ["ESNext"],
    "types": [
      "@types/google-apps-script",
      "@hankei6km/gas-notion-update-header"
    ]
  }
}
```

## License

MIT License

Copyright (c) 2023 hankei6km
npm package: @hankei6km/rehype-image-salt
Description: Rebuild img tag using attributes embedded in alt
Author: hankei6km
Latest version: 0.1.1

# rehype-image-salt

[rehype](https://github.com/rehypejs/rehype) plugin that rebuild `<img>` tag to next-image etc. using attributes embedded in alt etc.

## Features

- Simply write [nuxt-image](https://image.nuxtjs.org/) tags in markdown for [nuxt-content](https://content.nuxtjs.org/)
- Set `:modifiers` as query parameters
- Unify the style of all images in the content by base attributes
- Save any attributes of img tag when converting format from HTML to Markdown

[📖 Read the document](https://hankei6km.github.io/rehype-image-salt-doc/en/)

## License

MIT License

Copyright (c) 2021 hankei6km
npm package: @hankei6km/remark-qrcode
Description: convert "qrcode:" to dataURL
Author: hankei6km
Latest version: 0.1.3

# remark-qrcode

[remark](https://remark.js.org/) plugin to convert URL etc. that contained in Image or Link node.

## Usage

code:
```typescript
import { unified } from 'unified'
import remarkParse from 'remark-parse'
import stringify from 'remark-stringify'
import { remarkQRCode } from '@hankei6km/remark-qrcode'

const f = async (markdown: string): Promise<string> => {
  return await unified()
    .use(remarkParse)
    .use(remarkQRCode)
    .use(stringify, {})
    .freeze()
    .process(markdown)
    .then(
      (file) => {
        return String(file)
      },
      (error) => {
        throw error
      }
    )
}

console.log(f('# title1\n\n![alt1](qrcode:test1)\ntext1')
```

yield
```markdown
# title1

![alt1](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAA ...snip ...=)
text1

```

## License

MIT License

Copyright (c) 2021 hankei6km

The word "QR Code" is registered trademark of: DENSO WAVE INCORPORATED
npm package: @hankei6km/reposition
Description: `reposition` is a command line tool to send a repository list to Notion database.
Author: hankei6km
Latest version: 0.2.2

# reposition

`reposition` is a command line tool to send a repository list to Notion database.

## Requirement

- GitHub CLI with authenticated to GitHub
- Notion Database
- Notion Integration

## Install

```diff
npm install -g @hankei6km/reposition
```

## Setup

Create a database with following properties in Notion workspace.

| name               | type           |
| ------------------ | -------------- |
| `title`            | `title`        |
| `isPrivate`        | `checkbox`     |
| `name`             | `text`         |
| `owner`            | `text`         |
| `url`              | `url`          |
| `description`      | `text`         |
| `repositoryTopics` | `multi_select` |
| `createdAt`        | `date`         |
| `updatedAt`        | `date`         |
| `pushedAt`         | `date`         |

## Usage

```bash
$ export REPOSITION_API_KEY=<Integration API KEY>
$ export REPOSITION_DATABASE_ID=<Database Id>
$ gh repo list \
  --json nameWithOwner,isPrivate,name,owner,url,description,repositoryTopics,createdAt,updatedAt,pushedAt,openGraphImageUrl \
  --jq .[] | reposition
```

Add `-L` option to `gh` if you hava many repositories.

```bash
$ gh repo list -L 50 \
  --json nameWithOwner,isPrivate,name,owner,url,description,repositoryTopics,createdAt,updatedAt,pushedAt,openGraphImageUrl \
  --jq .[] | reposition
```

When updating the database, use the `--filter-time-range` option to reduce the number of repositories to be send.

```bash
$ gh repo list -L 50 \
  --json nameWithOwner,isPrivate,name,owner,url,description,repositoryTopics,createdAt,updatedAt,pushedAt,openGraphImageUrl \
  --jq .[] | reposition --filter-time-range 172800 # repositories updated(pushed) within 2 days.
```

Note: `reposition` does not have the function to remove pages from the database.

## License

MIT License

Copyright (c) 2023 hankei6km
npm package: @hankei6km/rollup-plugin-nodebox-fs-files
Description: Converts files to Nodebox files
Author: hankei6km
Latest version: 0.1.2

# rollup-plugin-nodebox-fs-files

Converts file to [Nodebox](https://sandpack.codesandbox.io/docs/advanced-usage/nodebox) [files](https://github.com/codesandbox/nodebox-runtime/blob/main/packages/nodebox/api.md#nodeboxfsinitfiles).

## Installation

```shell
npm install --save-dev @hankei6km/rollup-plugin-nodebox-fs-files
```

## Usage

```js
// rollup.config.js
import nodeboxFsFiles from '@hankei6km/rollup-plugin-nodebox-fs-files'

export default {
  input: 'src/index.mjs',
  plugins: [
    nodeboxFsFiles({
      from: 'box-src/proj',
      insertTo: 'src/files.mjs'
    })
  ]
}
```

from

```
box-src/proj/
├── index.js
├── node_modules
│   └── ...
├── public
│   └── image.png
└── src
    └── lib.js
```

to

```js
// src/files.mjs
export const files = {
  'index.js': 'console.log(...;\n',
  'public/image.png': { type: 'Buffer', data: [97, 98, 99 /*...*/] },
  'src/lib.js': 'export default ...;\n'
}
```

> NOTE: Define a temporary `export` to bypass a linting error.
>
> ```js
> // src/files.mjs
> export const files = {}
> ```

## Examples

`misc` directory is ignored.

```js
// rollup.config.js
import nodeboxFsFiles from '@hankei6km/rollup-plugin-nodebox-fs-files'

export default {
  input: 'src/index.mjs',
  plugins: [
    nodeboxFsFiles({
      from: 'box-src/proj',
      insertTo: 'src/files.mjs',
      excludeFrom: '**/misc/**'
    })
  ]
}
```

converts `.mp4` and `.mp3` files as binary.

```js
// rollup.config.js
import nodeboxFsFiles from '@hankei6km/rollup-plugin-nodebox-fs-files'

export default {
  input: 'src/index.mjs',
  plugins: [
    nodeboxFsFiles({
      from: 'box-src/proj',
      insertTo: 'src/files.mjs',
      binaryFile: ['**/*.mp4', '**/*.mp3']
    })
  ]
}
```

vite example.

```js
// vite.config.js
import { defineConfig } from 'vite'
import { nodeboxFsFiles } from '@hankei6km/rollup-plugin-nodebox-fs-files'

export default defineConfig({
  plugins: [
    nodeboxFsFiles({
      from: 'box-src/vite-project',
      insertTo: 'src/files.mjs'
    })
  ]
})
```

## License

MIT License

Copyright (c) 2023 hankei6km
npm package: @hankei6km/test-dual-package-hazard
Description: Dual package hazard を体験する
Author: hankei6km
Latest version: 0.1.3

# test-dual-package-hazard 

[Dual package hazard](https://nodejs.org/api/packages.html#dual-package-hazard) を体験する。

詳細は[test-dual-package-hazard-main](https://github.com/hankei6km/test-dual-package-hazard-main)。

## ライセンス

MIT License

Copyright (c) 2021 hankei6km
npm package: @hankei6km/test-remote-cms-contents
Description: nuxt-content 用にリモート CMS のコンテンツを取得するパッケージのテスト
Author: hankei6km
Latest version: 0.1.0

# test-remote-cms-contents

nuxt-content でリモート CMS のコンテンツを利用するための実験用コマンド。


## 概要

microCMS からコンテンツをダウンロードして nuxt-content で扱えることは確認できた。

今後は「[nuxt-content でリモート CMS のコンテンツを利用する](https://hankei6km.github.io/mardock/deck/nuxt-content-and-remote-cms)」で得たノウハウを元に別途作り直す予定。

## 簡単な使い方

1. `api-scheme/api-pages.json` で API を作成。
1. 以下のコマンドでコンテンツを保存。

```console
$ npm run start -- save --apiName <api name>--apiBaseURL https://<service name>.microcms.io/ --getApiKey xxxxxxxx content/remote/
```



## ライセンス

MIT License

Copyright (c) 2021 hankei6km
npm package: @hankliu/icons
Description: 🥭 React easy to use HankLiu UI SVG Icons component
Author: hank.liu
Latest version: 0.0.2

# @hankliu/icons-react

[![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url] [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![bundle size][bundlephobia-image]][bundlephobia-url] [![dumi][dumi-image]][dumi-url]

[npm-image]: http://img.shields.io/npm/v/@hankliu/icons.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/@hankliu/icons
[travis-image]: https://img.shields.io/travis/hankliu62/icons-react/master?style=flat-square
[github-actions-image]: https://github.com/hankliu62/icons-react/workflows/CI/badge.svg
[github-actions-url]: https://github.com/hankliu62/icons-react/actions
[codecov-image]: https://img.shields.io/codecov/c/github/hankliu62/icons-react/master.svg?style=flat-square
[codecov-url]: https://app.codecov.io/gh/hankliu62/icons-react
[download-image]: https://img.shields.io/npm/dm/@hankliu/icons.svg?style=flat-square
[download-url]: https://npmjs.org/package/@hankliu/icons
[bundlephobia-url]: https://bundlephobia.com/package/@hankliu/icons
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@hankliu/icons
[dumi-url]: https://github.com/umijs/dumi
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square

🥭 HankLiu UI 的语义化的图标库，基于 Ant Design Icons 图标库，在此基础上新增了许多自定义的 SVG 图标，便于丰富图标库，便于业务开发。

## 安装

```bash
npm install @hankliu/icons --save
```

or

```bash
yarn add @hankliu/icons
```

or

```bash
pnpm install @hankliu/icons
```

## 使用

当启用 `tree-shaking` 时，您可以直接导入或从 `@hankliu/icons` 进行解构。

```ts
import SmileOutlined from '@hankliu/icons/lib/SmileOutlined';
import { SmileOutlined } from '@hankliu/icons';

import SmileFilled from '@hankliu/icons/lib/SmileFilled';
import SmileTwoTone from '@hankliu/icons/lib/SmileTwoTone';
import { SmileFilled, SmileTwoTone } from '@hankliu/icons';
```

### 组件接口参数

```ts
interface HankLiuIconProps {
  className?: string;
  onClick?: React.MouseEventHandler<SVGSVGElement>;
  style?: React.CSSProperties;
}
```

### 特别说明

如果当前组件中，某些 `Icon` 看起来像被裁剪了一样，效果如下所示：

![图片](https://github.com/hankliu62/icons-react/assets/8088864/d2cb76c4-06c8-4485-a4b5-8e8264cdfa09)

可以提交Issue说明，或者可以使用以下方法进行修复:

``` css
.hlui-icon-icon-orange svg path {
  transform-origin: center;
  transform: scale(0.8);
}
```

> PS: 可以提交Issue不一定修复，看心情，就是这么任性，推荐使用上面方法。

## 案例

`npm start` 然后打开 http://localhost:8000/examples/

线上案例: https://hankliu62.github.io/icons-react

## 单元测试

```
npm test
```

## 覆盖率

```
npm run coverage
```

## License

@hankliu/icons is released under the MIT license.
npm package: @hankliu/rc-footer
Description: React easy to use footer component
Latest version: 0.0.6

# @hankliu/rc-footer

[![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url] [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![bundle size][bundlephobia-image]][bundlephobia-url] [![dumi][dumi-image]][dumi-url]

[npm-image]: http://img.shields.io/npm/v/rc-footer.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/@hankliu/rc-footer
[travis-image]: https://img.shields.io/travis/hankliu62/rc-footer/master?style=flat-square
[github-actions-image]: https://github.com/hankliu62/rc-footer/workflows/CI/badge.svg
[github-actions-url]: https://github.com/hankliu62/rc-footer/actions
[codecov-image]: https://img.shields.io/codecov/c/github/hankliu62/rc-footer/master.svg?style=flat-square
[codecov-url]: https://app.codecov.io/gh/hankliu62/rc-footer
[download-image]: https://img.shields.io/npm/dm/@hankliu/rc-footer.svg?style=flat-square
[download-url]: https://npmjs.org/package/@hankliu/rc-footer
[bundlephobia-url]: https://bundlephobia.com/package/@hankliu/rc-footer
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@hankliu/rc-footer
[dumi-url]: https://github.com/umijs/dumi
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square

🥭 在 `HankLiu WebApp` 页面中使用的通用的 `Footer` 组件，包含 `Logo`，产品矩阵，联系我们，关于产品等模块内容。

## 功能特征

- [x] Logo
- [x] 产品矩阵
- [x] 联系我们
- [x] 关于产品

## 安装

```bash
npm install @hankliu/rc-footer --save
```

or

```bash
yarn add @hankliu/rc-footer
```

or

```bash
pnpm install @hankliu/rc-footer
```

## 使用

```bash
npm install
npm start
```

```js
import Footer from '@hankliu/rc-footer';

export default () => <Footer />;
```

## API 参数

| 名称 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| className | 组件外层元素 Class | string | - |
| prefixCls | 组件外层元素 Class 前缀 | string | hlui-footer |
| productLinks | 产品矩阵列表 | `Array<{ name: string, link: string}>` | 默认值在如下所示 |

#### productLinks 参数默认值

```ts
[
  {
    name: '前端集合',
    link: 'https://hankliu62.github.io/frontend/',
  },
  {
    name: '个人简历',
    link: 'https://hankliu62.github.io/resume/',
  },
  {
    name: '开发工具',
    link: 'https://hankliu62.github.io/developer-tools/',
  },
  {
    name: 'Hank-Design',
    link: 'https://hankliu62.github.io/hankliu-ui/index-cn/',
  },
  {
    name: '中午吃什么',
    link: 'https://hankliu62.github.io/what-lunch/',
  },
  {
    name: '懒人选择器',
    link: 'https://hankliu62.github.io/lucky-choose/',
  },
];
```

## 案例

`npm start` 然后打开 http://localhost:8000/examples/

线上案例: https://hankliu62.github.io/rc-footer

## 单元测试

```
npm test
```

## 覆盖率

```
npm run coverage
```

## License

@hankliu/rc-footer is released under the MIT license.