open-index/open-npm huggingface dataset:
npm package: @khmer-chi/pixi-vue
Description: npm i @khmer-chi/pixi-vue
Latest version: 2.2.4

## [my blog](https://taiwan.im/article/release-open-source-pixi-vue.html)

## how to install

npm i @khmer-chi/pixi-vue

## base on

1. pixi.js
2. vue
3. @pixi/layout

## how to use

### step1: vite.config.ts

```ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { isPixiVueElement } from "@khmer-chi/pixi-vue";

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: isPixiVueElement,
        },
      },
    }),
  ],
});
```

### step2: main.ts

```ts
import App from "./App.vue";
createPixiApp(App, document.getElementById("app")!);
```

### step3: App.vue

```vue
<template>
  <PixiApplication
    :width="500"
    :height="500"
    :layout="{
      backgroundColor: '#1099bb',
      justifyContent: 'center',
      alignItems: 'center',
      flexDirection: 'column',
    }"
    @resize="
      (...args) => {
        console.log(args);
      }
    "
  >
    <PixiLayoutText
      text="12123243"
      :layout="{ width: 200, height: 100, backgroundColor: '#000fff' }"
      :style="{
        fill: '#fff000',
      }"
    />
  </PixiApplication>
</template>
```

### step4: index.html

```html
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>pixi-vue demo</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #000;
      }
    </style>
  </head>

  <body>
    <div id="app"></div>
    <script type="module" src="./main.ts"></script>
  </body>
</html>
```

## to do list

1. unit test
npm package: @khmeropen/calendar
Description: A tools for building Khmer calendar related stuff.
Author: Khmer Open
Latest version: 0.0.1-beta.2

# Khmer Open Calendar

A library for building Khmer calendar related stuff.

[![test](https://github.com/khmeropen/calendar/actions/workflows/test.yml/badge.svg)](https://github.com/khmeropen/calendar/actions/workflows/test.yml)

## Features

- ✅ Gregorian calendar conversion (vice-versa)
- ✅ Khmer New Year calculation
- ✅ Sangkranta time calculation
- ✅ Full supports for Browser, Node.js & Deno
- ✅ Supports for ESM & CommonJS
- ✅ Fully-typed

## Installation

```
npm i @khmeropen/calendar
```
npm package: @khoaduy1234/react-cart-kit
Description: Reusable React cart components and hooks (UI + add/edit/remove)
Author: Your Name
Latest version: 0.1.0

# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

```js
export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      ...tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      ...tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      ...tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```

You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:

```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```
npm package: @khoaha/spek-cli
Description: CLI tool to download and extract Figma design specs from Directus
Author: Khoa Hoang
Latest version: 1.0.7

# spek-cli

CLI tool to download and extract Figma design specs from Directus.

## Installation

```bash
npx spek-cli
```

## Usage

### Interactive Mode

Simply run without arguments to be prompted for the file ID:

```bash
npx spek-cli
```

### Direct Download

Download a specific file by ID:

```bash
npx spek-cli -d <file-id>
# or
npx spek-cli --download <file-id>
```

### First Run Setup

On first run, you'll be prompted to configure:

1. **Directus Instance URL**: Your Directus instance (e.g., `https://my-instance.directus.app`)
2. **Access Token**: Your Directus access token for authentication

Configuration is saved to `~/.spek-cli/config.json`

## Features

- ✅ Download files from Directus using official SDK
- ✅ Automatic authentication with access token
- ✅ Extract ZIP files to named folder (based on filename)
- ✅ Prompt before overwriting existing folders
- ✅ Auto-setup configuration on first run
- ✅ Interactive and direct command modes

## Configuration

Configuration file location: `~/.spek-cli/config.json`

```json
{
  "directusUrl": "https://my-instance.directus.app",
  "accessToken": "your-access-token",
  "createdAt": "2026-02-13T..."
}
```

## Examples

```bash
# First time - interactive setup
npx spek-cli
# Prompts for: Directus URL, Access Token, File ID

# Subsequent runs - direct download
npx spek-cli -d abc123-def456-ghi789

# Interactive mode (prompts for file ID only)
npx spek-cli
```

### Output Structure

When you download a file, it will be extracted into a folder named after the file:

```bash
# If the file in Directus is named "design-specs-v1.zip"
npx spek-cli -d abc123

# Creates structure:
./design-specs-v1/
├── README.md
├── manifest.json
├── components/
├── icons/
└── images/
```

## Error Handling

The CLI handles common errors gracefully:

- **Invalid authentication**: Check your access token
- **File not found**: Verify the file ID exists in Directus
- **Network errors**: Check your internet connection
- **Corrupted ZIP**: The downloaded file is invalid
- **Permission errors**: Ensure write access to current directory

## Help

```bash
npx spek-cli --help
```

## Version

```bash
npx spek-cli --version
```

## Development

This CLI tool is part of the specs-figma monorepo.

### Build

```bash
npm run build
```

### Watch Mode

```bash
npm run dev
```

### Local Testing

**Linux/macOS:**
```bash
# Build first
npm run build

# Run locally
node dist/index.js -d <file-id>
```

**Windows:**
```powershell
# Build first
npm run build

# Run locally
node dist/index.js -d <file-id>
```

**Note for Windows users:** See [WINDOWS_DEVELOPMENT.md](./WINDOWS_DEVELOPMENT.md) for detailed Windows-specific development guide.

## License

MIT