open-index/open-npm huggingface dataset:
npm package: @lf-dev/optimize-image
Description: Image Optimization
Author: iwasawamanabu
Latest version: 0.9.22

# package.optimize-image
Image Optimization

## install
```
npm install @lf-dev/optimize-image -D
```

## add scripts

```
"optimize:images": "optimizeImages",
"optimize:watch": "onchange \"src/template/lp/assets/img/**/*.*\" -- optimizeImages {{changed}}"
```

### src内の画像を一括書き出し
```
npm run optimize:images
```
 - 一括書き出し後、Snippets Viewerが立ち上がります

### 特定の画像のみ画像を生成
```
npm run optimize:images -- src/assets/img/kv/img-kv01.jpg
```
 - -- ダブルハイフンの後に画像のパスを引数として指定  
（複数ファイルの場合には半角で区切る）
 - スニペットの更新は行われません

### src/assets/img/内の変更を検知し、画像の自動書き出し
```
npm run optimize:watch
```
 - ※未検証
 - スニペットの更新は行われません
 - onchangeのpackageが必要```npm i onchange -D```


## overview

### input → output
src/assets/img/に大元の画像を配置して、   
public/assets/imgに書き出します。  
※ディレクトリは設定ファイルで変更可能です。

### 機能
 - 画像の圧縮
 - WebP画像の書き出し
 - Avif画像の書き出し
 - レスポンシブ画像の書き出し
    - _pc,_spという接尾語をファイル名に付与し、pc/sp切り替え用のコードを生成します
    - @3xという接尾語をファイル名に付与すると@2x,@1xの画像を書き出してコードを生成します
    - @2xという接尾語をファイル名に付与すると@1xの画像を書き出してコードを生成します



## config file
.optimizeImagesrc.mjs
```
export default {
  // 圧縮対象の画像ファイル一式が格納されているディレクトリ
  inputImageDir: 'src/template/lp/assets/img',
  // 書き出し先のディレクトリ
  outputImageDir: 'public/template/lp/assets/img',
  // 書き出し先のディレクトリを空にするかどうか
  emptyOutputDir: true,
  // 圧縮対象の画像ファイルの拡張子 ※対象外の拡張子が含まれる場合にはエラー
  targetExtensions: ['jpg', 'jpeg', 'png', 'svg'],
  // SVGの圧縮を行うかどうか
  SVG: true,
  // WebPの生成を行うかどうか
  WebP: true,
  // Avifの生成を行うかどうか
  Avif: true,
  // 解像度：@2x→@1x(1/2)の画像を生成、@3x→@2x(1/1.5),@1x(1/3)の画像を生成 ※縮小のみ対応
  resolutionScaling: true,
  // 画像の圧縮設定（sharp：https://sharp.pixelplumbing.com/）
  encoderOptions: {
    png: {
      // compressionLevel: 9,
      adaptiveFiltering: true,
      quality: 100,
    },
    jpg: {
      quality: 80,
      mozjpeg: true,
    },
    avif: {
      quality: 50,
    },
    webp: {
      quality: 75,
    },
  },
  // SVGの圧縮設定（SVGO：https://svgo.dev/docs/introduction/）
  svgoConfig: {
    plugins: [
      'removeDimensions',
      {
        name: 'preset-default',
        params: {
          overrides: {
            // customize default plugin options
            // inlineStyles: {
            //   onlyMatchedOnce: false,
            // },
            // or disable plugins
            //removeDoctype: false,
          },
        },
      },
    ],
  },
  // スニペットの生成を行うかどうか
  snippets: true,
  snippetsOption: {
    // srcに追加する書き出し先のディレクトリのパス
    path: '/template/lp/assets/img',
    // publicフォルダのパス
    public: './public',
    // 書き出すファイルのパス
    snippetsFilePath: './_snippets.html',
    breakpoint: 768,
    responsiveSuffix: {
      pc: '_pc',
      sp: '_sp',
    },
  },
};
```


## TODO
 - デフォルトのOption設定 ※wip
 - Snippets Viewerのデザインブラッシュアップ ※wip
 - 絞り込み → 絞り込み結果の「All Copy」 ※wip
 - モーダル内に画像の全体表示
   - 元画像と形式ごとの画質比較チェック（容量も）
 - watch時にもスニペットを更新
 - 生成コードをオプションで切り替え（avif offとか）
 - リファクタリング + Snippets Viewerをフレームワークを使ってちゃんと作る
 - 生成AIを使用してAltを自動生成するボタンを追加？（自身のAPI Keyを入力）
npm package: @lf-dev/parse-ua
Description: This module parses the user agent string and returns the result in the form of CSS classes and an object.
Author: iwasawamanabu
Latest version: 1.0.1

# package.parse-ua
This module parses the user agent string and returns the result in the form of CSS classes and an object.
htmlタグにデスクトップorモバイル、OS、ブラウザ情報のclassを付与します。

## install
```
npm install @lf-dev/parse-ua
```

## 使用方法
```
import { parseUA } from '@lf-dev/parse-ua';
parseUA();
```

parseUA()は、取得した情報をオブジェクト形式でreturnしているので、
JavaScriptで情報を使用したい場合には、変数に格納してください。
```
const ua = parseUA();
```


### 情報を更新したい場合
```
import { refreshUA } from '@lf-dev/parse-ua';
ua = refreshUA();
```
npm package: @lf-lang/reactor-ts
Description: A reactor-oriented programming framework in TypeScript
Author: Marten Lohstroh
Latest version: 0.6.2

[![CI](https://github.com/lf-lang/reactor-ts/actions/workflows/ci.yml/badge.svg)](https://github.com/lf-lang/reactor-ts/actions/workflows/ci.yml)
[![API docs](https://github.com/lf-lang/reactor-ts/actions/workflows/api-docs.yml/badge.svg)](https://github.com/lf-lang/reactor-ts/actions/workflows/api-docs.yml)

A reactor-oriented programming framework in TypeScript
---

The prime use of this runtime implementation is to support the [TypeScript target of Lingua Franca (LF)](https://www.lf-lang.org/docs/handbook/a-first-reactor?target=ts). LF is a coordination language that endows mainstream programming languages with an intuitive concurrency model and abstractions for specifying timed behaviors.

This runtime implementation can also be used standalone. Documentation and examples of such usage will be included in future releases of this module. Automatically generated [API docs](https://lf-lang.github.io/reactor-ts) are already available.


## Quick reference

### Installing Reactor-ts
```
npm install
```

### Running the tests
```
npm run test
```

### Generating docs
```
npm run doc
```

## Additional resources
- [Lingua Franca GitHub repo](https://repo.lf-lang.org)
- [Lingua Franca website](https://www.lf-lang.org)
- [Reactor-ts API Docs](https://lf-lang.github.io/reactor-ts)
npm package: @lf_maple/koishi-plugin-chunithm-plugin
Description: 个人使用中二节奏相关插件
Latest version: 0.3.3

# @lf-maple/koishi-plugin-chunithm-plugin

[![npm](https://img.shields.io/npm/v/@lf-maple/koishi-plugin-chunithm-plugin?style=flat-square)](https://www.npmjs.com/package/@lf-maple/koishi-plugin-chunithm-plugin)

-