open-index/open-npm huggingface dataset:
npm package: @jayli3n/milgraphics
Description: MilGraphics is a library for drawing military graphics
Author: Måns Beckman
Latest version: 0.0.2

# Milgraphics

Military Tactical Graphics

This is a work in progress with the goal of being able to render tactical graphics in the web browser. 

The library is still in initial development and should not be used in production environments. The goal is to release an initial version during the summer of 2017. What this initial version will include will be decided at a later stage.

## Main idea

The main idea is to initially being able to convert input definition geometries to simple GeoJSON geometries.

### Input

First data will be input in GeoJSON, at the moment the data will be defined with the same geometries as in 2525D, the data specification will be published as [TacticalJSON](https://github.com/spatialillusions/TacticalJSON).

The library includes a parser for SitaWare SLF/SPF files just to be able to get some test data from an external source.

### Output

Points will be points with style information for different libraries (Cesium/OpenLayers etc.)

Lines will be lines, might have style information about simple label placement.

Polygons will be polygons, might have style information about simple label placement.

Other geometries (arrows and other complex geometries) will be converted to lines or polygons so that they can be displayed on a map and make sense.

The over all main idea is to keep it simple from the beginning and then move forward where it is needed.

## Feedback

Please add issues for feedback and ideas

## Technology

Milgraphics is built on top of [milsymbol](https://github.com/spatialillusions/milsymbol) and adds functionality for reading tactical data in GeoJSON and outputting it in different ways that makes it easy to use in webmaps.

## Contact

Milsymbol is created and maintained by Måns Beckman
 - http://www.spatialillusions.com to see more examples of what milsymbol can be used for
 - https://twitter.com/spatialillusion for milsymbol and mapping/military related information 

## Licensing

MIT, See [license.txt](license.txt) for details
npm package: @jayliang/excalidraw
Description: fork Excalidraw 0.17.6
Latest version: 0.0.1

# Excalidraw

**Excalidraw** is exported as a component to directly embed in your projects.

## Installation

You can use `npm`

```bash
npm install react react-dom @excalidraw/excalidraw
```

or via `yarn`

```bash
yarn add react react-dom @excalidraw/excalidraw
```

After installation you will see a folder `excalidraw-assets` and `excalidraw-assets-dev` in `dist` directory which contains the assets needed for this app in prod and dev mode respectively.

Move the folder `excalidraw-assets` and `excalidraw-assets-dev` to the path where your assets are served.

By default it will try to load the files from [`https://unpkg.com/@excalidraw/excalidraw/dist/`](https://unpkg.com/@excalidraw/excalidraw/dist)

If you want to load assets from a different path you can set a variable `window.EXCALIDRAW_ASSET_PATH` depending on environment (for example if you have different URL's for dev and prod) to the url from where you want to load the assets.

#### Note

**If you don't want to wait for the next stable release and try out the unreleased changes you can use `@excalidraw/excalidraw@next`.**

## Dimensions of Excalidraw

Excalidraw takes _100%_ of `width` and `height` of the containing block so make sure the container in which you render Excalidraw has non zero dimensions.

### Demo

[Try here](https://codesandbox.io/s/excalidraw-ehlz3).

## Integration

Head over to the [docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/integration)

## API

Head over to the [docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api)

## Contributing

Head over to the [docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/contributing)
npm package: @jaylvis/reactjs-fr-countdown
Description: A simple countdown timer component for React.js
Author: Brendan Seiller
Latest version: 0.0.8

# reactjs-countdown

A simple countdown timer component for React.js.

This package is inspired from the awesome [vuejs-countdown](https://github.com/getanwar/vuejs-countdown) package.

Forked from [reactjs-countdown](https://github.com/hashemirafsan/reactjs-countdown)

![screenshot](https://raw.githubusercontent.com/hashemirafsan/reactjs-countdown/master/scr.png "React JS Countdown")

## Installation

#### npm
`npm i reactjs-countdown --save`


## Usage

```javascript
import React, { Component } from 'react';
import CountDown from 'reactjs-countdown';

class Something extends Component {
    constructor(props) {
        // something
    }

    render() {
        return(
            <div>
                <CountDown
                    deadline="August 22, 2022"
                />
                or
                <CountDown
                    end="August 22, 2022"
                />
            </div>
        );
    }
}

export default Something;
```

## Other Config

You can stop the countdown timer anytime by passing `true` (Boolean) with `stop` props.

You can change the language of the text to French by passing `FR` (String) with `format` props.

```javascript
<Countdown
    format="FR"
    deadline="September 22, 2023"
/>
```

### Caution 

Please don't provide any confusing date format since it has no dependency to Moment.js or any other date helpers. You can check [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#Examples) more date format.
npm package: @jayly/minecraft-editor
Description: Unofficial Minecraft Bedrock Editor API modules type definitions.
Author: Jayly
Latest version: 0.3.7-0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Minecraft Editor APIs

Unofficial Minecraft: Bedrock Editor API modules type definitions.

The type definition files are still work in progress. Until v0.4 releases along with official type definitions, this module will be used for type checking scripts that uses editor APIs in the [ScriptAPI](https://github.com/JaylyDev/ScriptAPI) GitHub repository.

## Usage

Install `@jayly/minecraft-editor` package in NPM, this installs type definition for all editor API modules.

```
npm install @jayly/minecraft-editor
```

Then you must include the following in TSConfig. This allows the editor API modules to be included without importing `@jayly/minecraft-editor` package.

```json
{
  "compilerOptions": {
    "types": ["minecraft-editor"],
    "typeRoots": ["./node_modules/@jayly"],
  },
}
```

To test if this works, you can go on VSCode and type some variable names to see if auto complete will detect variable from modules:

- `@minecraft/server-editor`

![server_editor](https://media.discordapp.net/attachments/867015810312962063/1089631037010739220/image.png)

- `@minecraft/server-editor-bindings`

![server_editor_bindings](https://media.discordapp.net/attachments/867015810312962063/1089631135623028798/image.png)

## Versioning

Major to patch versions (`x.x.x`) represents Minecraft Editor API versions, revision version represents changes to type definitions in specific Minecraft editor version.
npm package: @jayming/expo-svga-player
Description: A expo svga player
Author: Jayming
Latest version: 1.0.2

# @jayming/expo-svga-player

Lightweight Expo / React Native wrapper for SVGA animations (Android, iOS, Web).

This repository contains a small native module exposing a `SvgaPlayer` view component with a unified API across platforms.

## Installation

Install the package in your project (example uses pnpm in the repository root for the example app):

```bash
# Using npm
npm install @jayming/expo-svga-player

# Using pnpm
pnpm add @jayming/expo-svga-player
```

If you are developing with a bare React Native project, ensure `expo` packages are configured (see Expo docs). For iOS, run:

```bash
npx pod-install
```

## Usage (React / React Native)

Simple example:

```tsx
import SvgaPlayer from "@jayming/expo-svga-player";

// In JSX
<SvgaPlayer
  source="https://example.com/anim.svga"
  autoPlay={true}
  loops={0} // 0 means infinite in the JS API
  clearsAfterStop={true}
  align="center" // "top" | "center" | "bottom"
  style={{ width: 320, height: 420 }}
  onLoaded={() => console.log("loaded")}
  onFinished={() => console.log("finished")}
/>;
```

You can call `startAnimation()` / `stopAnimation()` using a `ref` to the view.

## Platform notes & gotchas

- Loops semantics:
  - On JS side `loops` is a number where `0` means infinite looping. Android native SVGA implementations sometimes treat `0` specially, so the Android bridge maps `0` to a very large repeat count to emulate infinite looping.

- Align behavior (vertical alignment):
  - `align` accepts `"top" | "center" | "bottom"` and maps to platform-appropriate alignment.
  - Web: the container uses flexbox `justify-content` mapping so the canvas aligns vertically.
  - Android: `align` maps to `ImageView.ScaleType` plus enabling `adjustViewBounds` and requesting a layout pass to better reflect top/center/bottom. If you still see horizontal alignment, the parent layout may enforce constraints — try adjusting parent sizing or use a fixed height on the player view.

- Threading / playback start:
  - Native parsing may run on background threads; the module ensures UI operations (setting the video item and starting playback) are posted to the UI thread to avoid silent failures.

## Debugging

- If animation does not appear on Android:
  1. Confirm `onLoaded` event fires (the component emits `onLoaded` when parsing completes).
  2. Check `adb logcat` for logs containing `SvgaPlayerView` or `SVGA`.

Example logcat filter:

```bash
adb logcat | grep SvgaPlayerView
```

## Example app

The `example/` folder contains a small React Native app demonstrating usage and runtime controls for `loops`, `align`, and manual URL input. Run it from the `example` directory:

```bash
cd example
pnpm install
pnpm android
```

## Contributing

Contributions welcome — please open issues or PRs. Keep changes focused and include platform-specific testing steps when touching native code.

## License

See the project root for license information.
npm package: @jayminwest/rowana-core
Description: Core package for Rowana GEO - Automates Schema.org JSON-LD generation during build time.
Author: Jaymin West
Latest version: 0.1.0
Deprecated: This package has moved to @rowana/core

# @jayminwest/rowana-core

Core package for Rowana GEO - Automates Schema.org JSON-LD generation during build time.

(More details to come)
npm package: @jayounglee92/keycloak-auth-generator
Description: 프레임워크별 Keycloak SSO 인증 코드 자동 생성 Claude Code 스킬
Author: jayounglee92
Latest version: 1.1.0

# 🔐 Keycloak Auth Generator

프레임워크별 Keycloak SSO 인증 코드를 자동 생성하는 Claude Skill입니다.

## 지원 프레임워크

| 프레임워크 | 인증 방식 | UI 디자인 시스템 |
|-----------|----------|-----------------|
| **Next.js** | Auth.js v5 + Keycloak Provider | shadcn/ui, MUI, Ant Design, Tailwind |
| **Vue 3** | @josempgon/vue-keycloak | Vuetify, PrimeVue, Element Plus, Naive UI |
| **Nuxt 3** | sidebase/nuxt-auth | Nuxt UI, Vuetify, PrimeVue |
| **FastAPI** | PyJWT (JWT) | Swagger UI, Jinja2+Bootstrap |
| **Django** | mozilla-django-oidc | crispy-forms+Bootstrap, Tailwind |
| **Flask** | Authlib | Bootstrap 5, Tailwind |
| **Thymeleaf** | Spring Security OAuth2 Client | Bootstrap 5, Tailwind |

## 생성되는 코드

- ✅ 로그인 페이지 (선택한 디자인 시스템 적용)
- ✅ 로그아웃 (Keycloak 세션까지 종료)
- ✅ 토큰 자동 재발급 (refresh token rotation)
- ✅ 인증 미들웨어/가드
- ✅ 역할 기반 접근제어 (RBAC)
- ✅ 타입 정의 (TypeScript)
- ✅ 환경변수 파일 (.env)
- ✅ Docker 기반 로컬 Keycloak (선택)

## 설치 방법

### Claude.ai
1. 이 레포의 ZIP 파일을 다운로드
2. **Settings → Features → Skills**에서 업로드

### Claude Code
```bash
# 프로젝트의 .claude/skills/ 디렉토리에 복사
cp -r keycloak-auth-generator .claude/skills/
```

## 사용법

새 대화에서 아래처럼 요청하면 됩니다:

```
Next.js 프로젝트에 Keycloak SSO 연동해줘
```

스킬이 자동으로 트리거되어 필요한 정보를 물어봅니다:

1. **프레임워크** — 자동 감지 또는 직접 선택
2. **Keycloak 정보** — URL, Realm, Client ID, Client Secret
3. **디자인 시스템** — 프레임워크별 인기 UI 라이브러리 추천
4. **Keycloak 환경** — Docker(로컬 테스트) / 기존 서버 / 코드만

## 전체 플로우

```
사용자: "Keycloak 연동해줘"
  ↓
Step 1: 정보 수집 (프레임워크, Keycloak URL, Realm, Client ID)
  ↓
Step 2: 디자인 시스템 선택 (shadcn/ui, Vuetify 등)
  ↓
Step 3: 코드 생성 (auth, login, dashboard, middleware 등)
  ↓
Step 4: 패키지 자동 설치 (npm install / pip install)
  ↓
Step 5: Keycloak 환경 선택
  ├── 🐳 Docker → docker-compose.yml + realm 설정 자동 생성 + 실행
  ├── 🏢 기존 서버 → Admin Console 설정 안내
  └── 📄 코드만 → placeholder 값으로 생성
  ↓
Step 6: 최종 요약 (파일 목록, 실행 방법, 테스트 계정)
```

## Docker로 로컬 테스트 (Keycloak 서버 없이)

Docker 옵션을 선택하면 아래가 자동 생성됩니다:

- `docker-compose.yml` — Keycloak 서버
- `keycloak/realm-export.json` — Realm, Client, 테스트 사용자 설정

```bash
docker compose up -d   # Keycloak 서버 시작
npm run dev            # 앱 시작
# → http://localhost:3000 에서 testuser / 1234 로 로그인 테스트
```

## 주의사항

- `keycloak-connect` (Node.js 어댑터)는 deprecated입니다. 사용하지 마세요.
- `keycloakify` 대신 각 프레임워크의 공식 권장 방식을 사용합니다.
- Auth.js **v5** 기준입니다 (NextAuth v4와 설정 방식이 다릅니다).
- `flask-oidc`는 유지보수가 중단되었습니다. `Authlib`을 사용합니다.

## 파일 구조

```
keycloak-auth-generator/
├── SKILL.md                    ← 스킬 메인 (영어)
├── README.md                   ← 이 파일 (한글)
└── references/
    ├── nextjs.md               ← Next.js + Auth.js v5
    ├── vue3.md                 ← Vue 3 + vue-keycloak
    ├── nuxt3.md                ← Nuxt 3 + sidebase/nuxt-auth
    ├── fastapi.md              ← FastAPI + PyJWT
    ├── django.md               ← Django + mozilla-django-oidc
    ├── flask.md                ← Flask + Authlib
    └── thymeleaf.md            ← Spring Boot + Spring Security
```

## 라이선스

MIT
npm package: @jaypatrickm/streak-counter
Description: a streak counter inspired by Duolingo
Author: Jay M
Latest version: 0.0.3

# `@jaypatrickm/streak-counter` - a basic streak counter

(this is a copied tutorial from @jsjoeio)

This is a basic streak counter - inspired by Duolingo - written in TypeScript and meant for the browser (uses `localStorage`).

## Install

```shell
yarn add @jaypatrickm/streak-counter
```

```shell
npm install @jaypatrickm/streak-counter
```

### Usage

```typescript
import { streakCounter } from "@jaypatrickm/streak-counter";
const today = new Date();
const streak = streakCounter(localStorage, today);
// streak returns an object:
// {
//    currentCount: 1,
//    lastLoginDate: "11/11/2021",
//    startDate: "11/11/2021",
// }
```
npm package: @jayphelps/jay-scripts
Description: Common npm package management utilities used by Jay Phelps. Mostly just boilerplate for tsc + babel with esm/cjs output.
Author: Jay Phelps
Latest version: 0.0.50

# @jayphelps/jay-scripts

A collection of common scripts for my personal projects. Not intended to be used by others as I'll likely make frequent breaking changes without warning. Open source in case it's useful as a reference, and also why not.


## Notes

  - This project is self-hosted; it was bootstraped and is built using an older version of itself.
  - The CLI itself uses native ES Modules in Node, so it requires a fairly recent version. But it still compiles the consuming project to both ESM/CJS, setting up the package.json appropriately.

## Commands

### Create

```bash
npx @jayphelps/jay-scripts create my-project-name
cd my-project-name
```

### Start

```bash
yarn start
# or
npx jay-scripts start
```

### Build

```bash
yarn build
# or
npx jay-scripts build
```